Seed shelf UI: source links, lots, and what's left (#51) (#68)

Co-authored-by: Steve Dudenhoeffer <[email protected]>

web/src/components/plants/SeedLotModal.tsx

@@ -0,0 +1,248 @@
+import { useState, type FormEvent } from 'react'
+import { Alert } from '@/components/ui/Alert'
+import { Button } from '@/components/ui/Button'
+import { Modal } from '@/components/ui/Modal'
+import { Select } from '@/components/ui/Select'
+import { TextArea } from '@/components/ui/TextArea'
+import { TextField } from '@/components/ui/TextField'
+import { errorMessage } from '@/lib/api'
+import {
+  conflictSeedLot,
+  LOT_UNITS,
+  safeExternalUrl,
+  useCreateSeedLot,
+  useUpdateSeedLot,
+  type LotUnit,
+  type SeedLot,
+} from '@/lib/seedLots'
+import type { Plant } from '@/lib/plants'
+
+/**
+ * Record a purchase, or correct one. Everything except quantity and unit is
+ * optional — the point is to make writing it down cheap enough to bother with,
+ * and a form that demands a SKU and a lot code gets skipped.
+ */
+export function SeedLotModal({
+  plant,
+  lot,
+  onClose,
+}: {
+  plant: Plant
+  /** Editing an existing lot, or undefined to record a new one. */
+  lot?: SeedLot
+  onClose: () => void
+}) {
+  const isEdit = !!lot
+  const create = useCreateSeedLot()
+  const update = useUpdateSeedLot()
+  const pending = create.isPending || update.isPending
+
+  // A new lot inherits the plant's vendor and source link, since the usual case
+  // is buying the variety you already recorded from the place you recorded it.
+  const [vendor, setVendor] = useState(lot?.vendor ?? plant.vendor ?? '')
+  const [sourceUrl, setSourceUrl] = useState(lot?.sourceUrl ?? plant.sourceUrl ?? '')
+  const [quantity, setQuantity] = useState(lot ? String(lot.quantity) : '')
+  const [unit, setUnit] = useState<LotUnit>(lot?.unit ?? 'seeds')
+  const [purchasedAt, setPurchasedAt] = useState(lot?.purchasedAt ?? '')
+  const [packedForYear, setPackedForYear] = useState(lot?.packedForYear != null ? String(lot.packedForYear) : '')
+  const [cost, setCost] = useState(lot?.costCents != null ? (lot.costCents / 100).toFixed(2) : '')
+  const [germination, setGermination] = useState(lot?.germinationPct != null ? String(lot.germinationPct) : '')
+  const [sku, setSku] = useState(lot?.sku ?? '')
+  const [lotCode, setLotCode] = useState(lot?.lotCode ?? '')
+  const [notes, setNotes] = useState(lot?.notes ?? '')
+  const [version, setVersion] = useState(lot?.version ?? 0)
+  const [conflict, setConflict] = useState<string | null>(null)
+  const [error, setError] = useState<string | null>(null)
+
+  async function onSubmit(e: FormEvent) {
+    e.preventDefault()
+    setError(null)
+    setConflict(null)
+
+    const qty = quantity.trim() === '' ? 0 : Number(quantity)
+    if (!Number.isFinite(qty) || qty < 0) {
+      setError('Quantity must be a number, or left blank.')
+      return
+    }
+    if (sourceUrl.trim() && !safeExternalUrl(sourceUrl.trim())) {
+      setError('The source link needs to be a full http:// or https:// address.')
+      return
+    }
+    let year: number | null = null
+    if (packedForYear.trim()) {
+      const y = Number(packedForYear)
+      if (!Number.isInteger(y) || y < 1900 || y > 2200) {
+        setError('Packed-for year should be a four-digit year.')
+        return
+      }
+      year = y
+    }
+    let costCents: number | null = null
+    if (cost.trim()) {
+      const c = Number(cost)
+      if (!Number.isFinite(c) || c < 0) {
+        setError('Cost must be an amount, or left blank.')
+        return
+      }
+      costCents = Math.round(c * 100)
+    }
+    let germinationPct: number | null = null
+    if (germination.trim()) {
+      const g = Number(germination)
+      if (!Number.isFinite(g) || g < 0 || g > 100) {
+        setError('Germination is a percentage between 0 and 100.')
+        return
+      }
+      germinationPct = g
+    }
+
+    const input = {
+      plantId: plant.id,
+      vendor: vendor.trim(),
+      sourceUrl: sourceUrl.trim(),
+      sku: sku.trim(),
+      lotCode: lotCode.trim(),
+      purchasedAt: purchasedAt.trim() === '' ? null : purchasedAt.trim(),
+      packedForYear: year,
+      quantity: qty,
+      unit,
+      costCents,
+      germinationPct,
+      notes: notes.trim(),
+    }
+
+    try {
+      if (isEdit) {
+        await update.mutateAsync({ id: lot.id, version, ...input })
+      } else {
+        await create.mutateAsync(input)
+      }
+      onClose()
+    } catch (err) {
+      const current = conflictSeedLot(err)
+      if (current) {
+        // Someone edited this lot elsewhere. Rebase onto the fresh row so a
+        // re-save applies, rather than making them retype everything — the same
+        // contract every other version-guarded form here honours.
+        setVersion(current.version)
+        setVendor(current.vendor)
+        setSourceUrl(current.sourceUrl)
+        setQuantity(String(current.quantity))
+        setUnit(current.unit)
+        setPurchasedAt(current.purchasedAt ?? '')
+        setPackedForYear(current.packedForYear != null ? String(current.packedForYear) : '')
+        setCost(current.costCents != null ? (current.costCents / 100).toFixed(2) : '')
+        setGermination(current.germinationPct != null ? String(current.germinationPct) : '')
+        setSku(current.sku)
+        setLotCode(current.lotCode)
+        setNotes(current.notes)
+        setConflict('This lot changed elsewhere. The latest values are shown — review and save again.')
+        return
+      }
+      setError(errorMessage(err, isEdit ? 'Could not save the lot.' : 'Could not record the lot.'))
+    }
+  }
+
+  return (
+    <Modal title={isEdit ? 'Edit seed lot' : `Seed lot — ${plant.name}`} onClose={onClose} busy={pending}>
+      <form onSubmit={onSubmit} className="flex flex-col gap-3">
+        {conflict && <Alert tone="info">{conflict}</Alert>}
+
+        <div className="grid grid-cols-2 gap-3">
+          <TextField
+            label="Quantity"
+            name="quantity"
+            type="number"
+            inputMode="decimal"
+            step="any"
+            min="0"
+            value={quantity}
+            onChange={(e) => setQuantity(e.target.value)}
+          />
+          <Select
+            label="Unit"
+            name="unit"
+            value={unit}
+            onChange={(e) => setUnit(e.target.value as LotUnit)}
+            options={LOT_UNITS.map((u) => ({ value: u.value, label: u.label }))}
+          />
+        </div>
+
+        <div className="grid grid-cols-2 gap-3">
+          <TextField label="Vendor" name="vendor" value={vendor} onChange={(e) => setVendor(e.target.value)} />
+          <TextField
+            label="Source link"
+            name="sourceUrl"
+            type="url"
+            inputMode="url"
+            placeholder="https://…"
+            value={sourceUrl}
+            onChange={(e) => setSourceUrl(e.target.value)}
+          />
+        </div>
+
+        <div className="grid grid-cols-2 gap-3">
+          <TextField
+            label="Purchased"
+            name="purchasedAt"
+            type="date"
+            value={purchasedAt}
+            onChange={(e) => setPurchasedAt(e.target.value)}
+          />
+          <TextField
+            label="Packed for"
+            name="packedForYear"
+            type="number"
+            inputMode="numeric"
+            placeholder="2026"
+            value={packedForYear}
+            onChange={(e) => setPackedForYear(e.target.value)}
+          />
+        </div>
+
+        <div className="grid grid-cols-2 gap-3">
+          <TextField
+            label="Cost"
+            name="cost"
+            type="number"
+            inputMode="decimal"
+            step="0.01"
+            min="0"
+            placeholder="4.99"
+            value={cost}
+            onChange={(e) => setCost(e.target.value)}
+          />
+          <TextField
+            label="Germination %"
+            name="germination"
+            type="number"
+            inputMode="decimal"
+            step="any"
+            min="0"
+            max="100"
+            value={germination}
+            onChange={(e) => setGermination(e.target.value)}
+          />
+        </div>
+
+        <div className="grid grid-cols-2 gap-3">
+          <TextField label="SKU" name="sku" value={sku} onChange={(e) => setSku(e.target.value)} />
+          <TextField label="Lot code" name="lotCode" value={lotCode} onChange={(e) => setLotCode(e.target.value)} />
+        </div>
+
+        <TextArea label="Notes" name="lotNotes" rows={2} value={notes} onChange={(e) => setNotes(e.target.value)} />
+
+        {error && <Alert>{error}</Alert>}
+
+        <div className="mt-1 flex justify-end gap-2">
+          <Button type="button" variant="ghost" onClick={onClose} disabled={pending}>
+            Cancel
+          </Button>
+          <Button type="submit" disabled={pending}>
+            {pending ? 'Saving…' : isEdit ? 'Save' : 'Record lot'}
+          </Button>
+        </div>
+      </form>
+    </Modal>
+  )
+}