cleanup

client/src/modules/sales/SalesFormPage.tsx

@@ -3,6 +3,7 @@ import type { SalesCustomerOptionDto, SalesDocumentDetailDto, SalesDocumentInput
 import { useEffect, useState } from "react";
 import { Link, useNavigate, useParams } 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";
@@ -23,6 +24,7 @@ export function SalesFormPage({ entity, mode }: { entity: SalesDocumentEntity; m
   const [lineSearchTerms, setLineSearchTerms] = useState<string[]>([]);
   const [activeLinePicker, setActiveLinePicker] = useState<number | null>(null);
   const [isSaving, setIsSaving] = useState(false);
+  const [pendingLineRemovalIndex, setPendingLineRemovalIndex] = useState<number | null>(null);
 
   const subtotal = form.lines.reduce((sum, line) => sum + line.quantity * line.unitPrice, 0);
   const discountAmount = subtotal * (form.discountPercent / 100);
@@ -129,6 +131,15 @@ export function SalesFormPage({ entity, mode }: { entity: SalesDocumentEntity; m
     setLineSearchTerms((current: string[]) => current.filter((_term: string, termIndex: number) => 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) {
@@ -431,7 +442,7 @@ export function SalesFormPage({ entity, mode }: { entity: SalesDocumentEntity; m
                     </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">
+                    <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>
@@ -465,6 +476,26 @@ export function SalesFormPage({ entity, mode }: { entity: SalesDocumentEntity; m
           </button>
         </div>
       </section>
+      <ConfirmActionDialog
+        open={pendingLineRemoval != null}
+        title={`Remove ${config.singularLabel.toLowerCase()} line`}
+        description={
+          pendingLineRemoval
+            ? `Remove ${pendingLineRemoval.sku || pendingLineRemoval.line?.description || "this line"} from the ${config.singularLabel.toLowerCase()}.`
+            : "Remove this line."
+        }
+        impact="The line will be dropped from the document draft immediately and totals will recalculate."
+        recovery="Add the line back manually before saving if this removal was a mistake."
+        confirmLabel="Remove line"
+        isConfirming={false}
+        onClose={() => setPendingLineRemovalIndex(null)}
+        onConfirm={() => {
+          if (pendingLineRemoval) {
+            removeLine(pendingLineRemoval.index);
+          }
+          setPendingLineRemovalIndex(null);
+        }}
+      />
     </form>
   );
 }