From 1d2499a17af2c56efa019b7e00726710df419f0d Mon Sep 17 00:00:00 2001
From: SJCoetz <s.coetzee6@my.milpark.ac.za>
Date: Fri, 31 Jul 2026 14:00:03 +0200
Subject: [PATCH] feat(stock-orders): Edit button on draft PO rows

Adds a Pencil-icon ghost button to the trailing cell of every draft
row. Clicking it opens the QuickDraftModal in edit mode for that
purchase, scoped to that draft's lines. e.stopPropagation prevents
the row's detail-page navigation from also firing.

Co-authored-by: Orca <help@stably.ai>
---
 src/app/(app)/stock-orders/page.tsx | 35 ++++++++++++++++++++++++++---
 1 file changed, 32 insertions(+), 3 deletions(-)

diff --git a/src/app/(app)/stock-orders/page.tsx b/src/app/(app)/stock-orders/page.tsx
index a54e06f..639b6b5 100644
--- a/src/app/(app)/stock-orders/page.tsx
+++ b/src/app/(app)/stock-orders/page.tsx
@@ -13,7 +13,7 @@ import {
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent } from "@/components/ui/card";
-import { Loader2, Plus, AlertCircle, Package, ChevronRight, Boxes } from "lucide-react";
+import { Loader2, Plus, AlertCircle, Package, ChevronRight, Boxes, Pencil } from "lucide-react";
 import { toast } from "sonner";
 import getPocketBase from "@/lib/pocketbase";
 import { QuickDraftModal } from "@/components/stock-orders/quick-draft-modal";
@@ -95,6 +95,12 @@ export default function StockOrdersPage() {
   const [page, setPage] = useState(1);
   const [totalPages, setTotalPages] = useState(1);
   const [quickDraftOpen, setQuickDraftOpen] = useState(false);
+  const [editingPurchaseId, setEditingPurchaseId] = useState<string | null>(null);
+
+  const openEditForDraft = (purchaseId: string) => {
+    setEditingPurchaseId(purchaseId);
+    setQuickDraftOpen(true);
+  };
 
   const fetchRows = useCallback(async () => {
     setLoading(true);
@@ -273,7 +279,26 @@ export default function StockOrdersPage() {
                         {formatDate(row.created)}
                       </TableCell>
                       <TableCell>
-                        <ChevronRight className="h-4 w-4 text-muted-foreground" />
+                        <div className="flex items-center justify-end gap-1">
+                          {row.status === "draft" && (
+                            <Button
+                              type="button"
+                              variant="ghost"
+                              size="icon"
+                              className="h-8 w-8"
+                              onClick={(e) => {
+                                e.stopPropagation();
+                                openEditForDraft(row.id);
+                              }}
+                              aria-label={`Edit draft ${row.purchase_number}`}
+                              title={`Edit ${row.purchase_number}`}
+                              data-testid="edit-draft-button"
+                            >
+                              <Pencil className="h-4 w-4" />
+                            </Button>
+                          )}
+                          <ChevronRight className="h-4 w-4 text-muted-foreground" />
+                        </div>
                       </TableCell>
                     </TableRow>
                   );
@@ -311,7 +336,11 @@ export default function StockOrdersPage() {
 
       <QuickDraftModal
         open={quickDraftOpen}
-        onOpenChange={setQuickDraftOpen}
+        onOpenChange={(next) => {
+          setQuickDraftOpen(next);
+          if (!next) setEditingPurchaseId(null);
+        }}
+        editPurchaseId={editingPurchaseId ?? undefined}
       />
     </div>
   );