add loading confirmation for import-Djibouti trains before dispatch

apps/edr-freight-web/backoffice/src/components/trainScheduling/ScheduleWorkspacePanel.tsx

@@ -24,7 +24,7 @@ import {
   Inbox,
   PackageCheck,
   PackageX,
-  Repeat,
+  // Repeat, // used by the hidden Move (reassign) button
   Train,
   Weight,
   X,
@@ -156,6 +156,9 @@ export function ScheduleWorkspacePanel({
   const setLoading = useMutation(
     api.trainScheduling.setLoadingStatus.mutationOptions(),
   );
+  const confirmLoading = useMutation(
+    api.trainScheduling.confirmLoading.mutationOptions(),
+  );
   const moveSchedule = useMutation(
     api.trainScheduling.moveBookingSchedule.mutationOptions(),
   );
@@ -266,6 +269,25 @@ export function ScheduleWorkspacePanel({
       );
   };
 
+  const doConfirmLoading = () => {
+    confirmLoading
+      .mutateAsync({ id: schedule.id })
+      .then(() => {
+        toast({ title: "Loading confirmed", description: "The train is cleared to dispatch." });
+        onChanged();
+      })
+      .catch((error) =>
+        toast({
+          title: "Could not confirm loading",
+          description: apiErrorMessage(
+            error,
+            "Grant the Djibouti gatepass first, then confirm loading.",
+          ),
+          variant: "destructive",
+        }),
+      );
+  };
+
   const doMove = () => {
     if (!moveBookingId || !moveTarget) return;
     moveSchedule
@@ -376,6 +398,54 @@ export function ScheduleWorkspacePanel({
           </Text>
         ) : null}
 
+        {/* Loading confirmation — required before dispatch for import-Djibouti
+            trains; shown for every direction so staff have one place to confirm. */}
+        {canManage ? (
+          <Group
+            gap={10}
+            p="sm"
+            wrap="nowrap"
+            align="center"
+            justify="space-between"
+            style={{
+              borderRadius: 10,
+              background: schedule.loadingConfirmed
+                ? "var(--mantine-color-edr-green-0)"
+                : "var(--mantine-color-yellow-0)",
+              border: `1px solid ${
+                schedule.loadingConfirmed
+                  ? "var(--mantine-color-edr-green-2)"
+                  : "var(--mantine-color-yellow-3)"
+              }`,
+            }}
+          >
+            <Group gap={8} wrap="nowrap" align="center" style={{ minWidth: 0 }}>
+              {schedule.loadingConfirmed ? (
+                <CheckCircle2 size={18} color="var(--mantine-color-edr-green-7)" />
+              ) : (
+                <PackageCheck size={18} color="#B7791F" />
+              )}
+              <Text size="sm" fw={600}>
+                {schedule.loadingConfirmed
+                  ? "Loading confirmed — cleared to dispatch"
+                  : "Confirm loading before dispatching this train"}
+              </Text>
+            </Group>
+            {!schedule.loadingConfirmed ? (
+              <Button
+                size="compact-sm"
+                color="edr-green"
+                radius="md"
+                leftSection={<CheckCircle2 size={14} />}
+                loading={confirmLoading.isPending}
+                onClick={doConfirmLoading}
+              >
+                Confirm loading
+              </Button>
+            ) : null}
+          </Group>
+        ) : null}
+
         {/* Two-panel board */}
         <Group align="stretch" gap="lg" grow wrap="wrap">
           {/* Pool */}
@@ -477,6 +547,7 @@ export function ScheduleWorkspacePanel({
                           </Button>
                         </Tooltip>
                       ) : null}
+                      {/* Reassign-to-another-train — hidden for now.
                       <Tooltip label="Reassign to another train" withArrow>
                         <Button
                           size="compact-sm"
@@ -492,6 +563,7 @@ export function ScheduleWorkspacePanel({
                           Move
                         </Button>
                       </Tooltip>
+                      */}
                       <Tooltip label="Remove from this train" withArrow>
                         <Button
                           size="compact-sm"