Export Djbouti unloading queue

apps/edr-freight-web/backoffice/src/pages/warehouses/ExportDjiboutiUnloadingQueuePage.tsx

@@ -14,7 +14,17 @@ import {
   Text,
 } from '@mantine/core';
 import { useNavigate } from 'react-router-dom';
-import { ChevronDown, ChevronRight, Eye, FileText, History, PackageOpen, Truck } from 'lucide-react';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import {
+  ChevronDown,
+  ChevronRight,
+  Eye,
+  FileText,
+  History,
+  PackageOpen,
+  ShieldCheck,
+  Truck,
+} from 'lucide-react';
 
 import { PageHeader } from '@/components/page';
 import Breadcrumbs from '@/components/ui/Breadcrumbs';
@@ -36,6 +46,7 @@ import {
   useInterchangeDocuments,
 } from '@/hooks/useInterchangeDocuments';
 import { useToast } from '@/hooks/use-toast';
+import { trainSchedulingService } from '@/services/trainScheduling.service';
 import type {
   AutoUnloadExportDjiboutiResult,
   ExportTrain,
@@ -179,6 +190,14 @@ export default function ExportDjiboutiUnloadingQueuePage() {
   const { data: interchangeDocuments = [] } = useInterchangeDocuments({ direction: 'EXPORT' });
   const autoUnload = useAutoUnloadExportAtDjibouti();
   const generateInterchange = useGenerateInterchangeDocument();
+  const qc = useQueryClient();
+  const secureGatePass = useMutation({
+    mutationFn: (scheduleId: string) => trainSchedulingService.grantImportDjiboutiGatepass(scheduleId),
+    onSuccess: () =>
+      qc.invalidateQueries({
+        queryKey: ['warehouse-inventory', 'export-djibouti-arrival-queue'],
+      }),
+  });
   const [openScheduleId, setOpenScheduleId] = useState<string | null>(null);
   const [busyScheduleId, setBusyScheduleId] = useState<string | null>(null);
   const [historyInventoryId, setHistoryInventoryId] = useState<string | null>(null);
@@ -189,6 +208,25 @@ export default function ExportDjiboutiUnloadingQueuePage() {
       .map((doc) => [doc.scheduleId as string, doc]),
   );
 
+  const secureGate = async (train: ExportTrain) => {
+    setBusyScheduleId(train.scheduleId);
+    try {
+      await secureGatePass.mutateAsync(train.scheduleId);
+      toast({
+        title: 'Gate pass secured',
+        description: `Djibouti Port entry allowed for ${train.trainNumber ?? 'the train'}. You can now auto unload.`,
+      });
+    } catch (error) {
+      toast({
+        variant: 'destructive',
+        title: 'Could not secure gate pass',
+        description: getErrorMessage(error),
+      });
+    } finally {
+      setBusyScheduleId(null);
+    }
+  };
+
   const unloadTrain = async (train: ExportTrain) => {
     setBusyScheduleId(train.scheduleId);
     try {
@@ -346,6 +384,16 @@ export default function ExportDjiboutiUnloadingQueuePage() {
                               >
                                 Open
                               </Button>
+                              <Button
+                                size="compact-xs"
+                                variant="light"
+                                color="teal"
+                                leftSection={<ShieldCheck size={14} />}
+                                loading={busyScheduleId === train.scheduleId && secureGatePass.isPending}
+                                onClick={() => secureGate(train)}
+                              >
+                                Secure Gate Pass
+                              </Button>
                               <Button
                                 size="compact-xs"
                                 color="green"
@@ -356,7 +404,7 @@ export default function ExportDjiboutiUnloadingQueuePage() {
                                     <Truck size={14} />
                                   )
                                 }
-                                loading={busyScheduleId === train.scheduleId}
+                                loading={busyScheduleId === train.scheduleId && autoUnload.isPending}
                                 onClick={() => unloadTrain(train)}
                               >
                                 Auto Unload Export Items