cleanup

client/src/modules/purchasing/PurchaseFormPage.tsx

@@ -2,6 +2,7 @@ import type { InventoryItemOptionDto, PurchaseLineInput, PurchaseOrderInput, Pur
 import { useEffect, useState } from "react";
 import { Link, useNavigate, useParams, useSearchParams } from "react-router-dom";
 
+import { ConfirmActionDialog } from "../../components/ConfirmActionDialog";
 import { useAuth } from "../../auth/AuthProvider";
 import { api, ApiError } from "../../lib/api";
 import { inventoryUnitOptions } from "../inventory/config";
@@ -24,6 +25,7 @@ export function PurchaseFormPage({ mode }: { mode: "create" | "edit" }) {
   const [lineSearchTerms, setLineSearchTerms] = useState<string[]>([]);
   const [activeLinePicker, setActiveLinePicker] = useState<number | null>(null);
   const [isSaving, setIsSaving] = useState(false);
+  const [pendingLineRemovalIndex, setPendingLineRemovalIndex] = useState<number | null>(null);
 
   function collectRecommendedPurchaseNodes(node: SalesOrderPlanningNodeDto): SalesOrderPlanningNodeDto[] {
     const nodes = node.recommendedPurchaseQuantity > 0 ? [node] : [];
@@ -212,6 +214,15 @@ export function PurchaseFormPage({ mode }: { mode: "create" | "edit" }) {
     setLineSearchTerms((current) => current.filter((_term, termIndex) => termIndex !== index));
   }
 
+  const pendingLineRemoval =
+    pendingLineRemovalIndex != null
+      ? {
+          index: pendingLineRemovalIndex,
+          line: form.lines[pendingLineRemovalIndex],
+          sku: lineSearchTerms[pendingLineRemovalIndex] ?? "",
+        }
+      : null;
+
   async function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
     event.preventDefault();
     if (!token) {
@@ -425,7 +436,7 @@ export function PurchaseFormPage({ mode }: { mode: "create" | "edit" }) {
                     <input type="number" min={0} step={0.01} value={line.unitCost} onChange={(event) => updateLine(index, { ...line, unitCost: Number(event.target.value) })} className="w-full rounded-2xl border border-line/70 bg-surface px-2 py-2 text-text outline-none transition focus:border-brand" />
                   </label>
                   <div className="flex items-end"><div className="w-full rounded-2xl border border-line/70 bg-surface px-2 py-2 text-sm text-text">${(line.quantity * line.unitCost).toFixed(2)}</div></div>
-                  <div className="flex items-end"><button type="button" onClick={() => removeLine(index)} className="rounded-2xl border border-rose-400/40 px-2 py-2 text-sm font-semibold text-rose-700 dark:text-rose-300">Remove</button></div>
+                  <div className="flex items-end"><button type="button" onClick={() => setPendingLineRemovalIndex(index)} className="rounded-2xl border border-rose-400/40 px-2 py-2 text-sm font-semibold text-rose-700 dark:text-rose-300">Remove</button></div>
                 </div>
               </div>
             ))}
@@ -444,6 +455,25 @@ export function PurchaseFormPage({ mode }: { mode: "create" | "edit" }) {
           </button>
         </div>
       </section>
+      <ConfirmActionDialog
+        open={pendingLineRemoval != null}
+        title="Remove purchase line"
+        description={
+          pendingLineRemoval
+            ? `Remove ${pendingLineRemoval.sku || pendingLineRemoval.line?.description || "this line"} from the purchase order draft.`
+            : "Remove this purchase line."
+        }
+        impact="The line will be removed from the draft immediately and purchasing totals will recalculate."
+        recovery="Re-add the line before saving if the removal was accidental."
+        confirmLabel="Remove line"
+        onClose={() => setPendingLineRemovalIndex(null)}
+        onConfirm={() => {
+          if (pendingLineRemoval) {
+            removeLine(pendingLineRemoval.index);
+          }
+          setPendingLineRemovalIndex(null);
+        }}
+      />
     </form>
   );
 }