From d583fe6de67e6dd88a1ee1cd224205f88b813b7a Mon Sep 17 00:00:00 2001
From: Z8MB1E <jason@onyxsimple.com>
Date: Sun, 2 Aug 2026 02:04:51 -0400
Subject: [PATCH] feat(logistics): add shipment action controls to shipment
 detail page

---
 .../frontend/logistics/ShipmentActions.tsx    | 113 ++++++++++++++++++
 1 file changed, 113 insertions(+)
 create mode 100644 src/components/frontend/logistics/ShipmentActions.tsx

diff --git a/src/components/frontend/logistics/ShipmentActions.tsx b/src/components/frontend/logistics/ShipmentActions.tsx
new file mode 100644
index 0000000..142f629
--- /dev/null
+++ b/src/components/frontend/logistics/ShipmentActions.tsx
@@ -0,0 +1,113 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import type { Shipment } from "@/payload-types";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { cancelShipment, toggleAutoReturn } from "@/app/(frontend)/logistics/shipments/actions";
+import { RotateCcwIcon, XIcon } from "lucide-react";
+
+interface ShipmentActionsProps {
+  shipment: Shipment;
+}
+
+export function ShipmentActions({ shipment }: ShipmentActionsProps) {
+  const router = useRouter();
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [showCancelDialog, setShowCancelDialog] = useState(false);
+
+  const isActive =
+    shipment.status === "dispatched" || shipment.status === "in_transit";
+
+  if (!isActive) return null;
+
+  async function handleCancel() {
+    setLoading(true);
+    setError(null);
+
+    const result = await cancelShipment(shipment.id);
+    if (result.success) {
+      setShowCancelDialog(false);
+      router.refresh();
+    } else {
+      setError(result.error ?? "Failed to cancel shipment.");
+    }
+    setLoading(false);
+  }
+
+  async function handleToggleAutoReturn() {
+    setLoading(true);
+    setError(null);
+
+    const result = await toggleAutoReturn(
+      shipment.id,
+      !shipment.autoReturn,
+    );
+    if (result.success) {
+      router.refresh();
+    } else {
+      setError(result.error ?? "Failed to toggle auto-return.");
+    }
+    setLoading(false);
+  }
+
+  return (
+    <div className="flex items-center gap-2">
+      {error && (
+        <span className="text-xs text-red-400">{error}</span>
+      )}
+      <Button
+        variant="outline"
+        size="sm"
+        onClick={handleToggleAutoReturn}
+        disabled={loading}
+      >
+        <RotateCcwIcon className="size-3.5 mr-1.5" />
+        {shipment.autoReturn ? "Disable" : "Enable"} Auto-Return
+      </Button>
+      <Dialog open={showCancelDialog} onOpenChange={setShowCancelDialog}>
+        <DialogTrigger asChild>
+          <Button variant="destructive" size="sm" disabled={loading}>
+            <XIcon className="size-3.5 mr-1.5" />
+            Cancel Shipment
+          </Button>
+        </DialogTrigger>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Cancel Shipment</DialogTitle>
+            <DialogDescription>
+              Are you sure you want to cancel this shipment? All cargo will be
+              returned to the origin structure and the vehicle will be parked
+              at the origin.
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter>
+            <Button
+              variant="outline"
+              onClick={() => setShowCancelDialog(false)}
+            >
+              Keep Shipment
+            </Button>
+            <Button
+              variant="destructive"
+              onClick={handleCancel}
+              disabled={loading}
+            >
+              {loading ? "Cancelling..." : "Cancel Shipment"}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}