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

Co-authored-by: Steve Dudenhoeffer <[email protected]>
2026-07-21 06:03:12 +00:00
parent 7f8b5254d0
commit 5d9b10d7c7
15 changed files with 1067 additions and 11 deletions
@@ -0,0 +1,50 @@
+import { useState } from 'react'
+import { Alert } from '@/components/ui/Alert'
+import { Button } from '@/components/ui/Button'
+import { Modal } from '@/components/ui/Modal'
+import { errorMessage } from '@/lib/api'
+import { formatQuantity, useDeleteSeedLot, type SeedLot } from '@/lib/seedLots'
+
+/**
+ * Retire a lot. Worth confirming because it's the one place cost and germination
+ * data lives — and worth saying plainly that the plantings survive it, since
+ * "will this wipe my garden" is the reasonable fear.
+ */
+export function DeleteSeedLotModal({ lot, onClose }: { lot: SeedLot; onClose: () => void }) {
+  const del = useDeleteSeedLot()
+  const [error, setError] = useState<string | null>(null)
+
+  return (
+    <Modal title="Retire this seed lot?" onClose={onClose} busy={del.isPending}>
+      <div className="flex flex-col gap-3">
+        <p className="text-sm text-fg">
+          {formatQuantity(lot.quantity)} {lot.unit}
+          {lot.vendor ? ` from ${lot.vendor}` : ''}
+          {lot.packedForYear != null ? `, packed for ${lot.packedForYear}` : ''}.
+        </p>
+        <p className="text-sm text-muted">
+          Anything planted from it stays exactly where it is — it just stops being attributed to this purchase.
+        </p>
+        {error && <Alert>{error}</Alert>}
+        <div className="mt-1 flex justify-end gap-2">
+          <Button type="button" variant="ghost" onClick={onClose} disabled={del.isPending}>
+            Cancel
+          </Button>
+          <Button
+            type="button"
+            variant="danger"
+            disabled={del.isPending}
+            onClick={() =>
+              del.mutate(lot.id, {
+                onSuccess: onClose,
+                onError: (err) => setError(errorMessage(err, 'Could not retire the lot.')),
+              })
+            }
+          >
+            {del.isPending ? 'Retiring…' : 'Retire lot'}
+          </Button>
+        </div>
+      </div>
+    </Modal>
+  )
+}