Goods recieved notes and Booking delivery

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

@@ -1,5 +1,6 @@
-import { Button, Card } from '@mantine/core';
-import { PackageSearch } from 'lucide-react';
+import { useState } from 'react';
+import { Button, Card, Group, Modal, Stack } from '@mantine/core';
+import { PackageSearch, Truck } from 'lucide-react';
 import { useNavigate } from 'react-router-dom';
 
 import { PageContainer, PageHeader } from '@/components/page';
@@ -7,6 +8,7 @@ import { WarehouseFlowWorkbench } from '@/components/warehouses';
 
 export default function ExportWarehouseFlowPage() {
   const navigate = useNavigate();
+  const [receiveOpen, setReceiveOpen] = useState(false);
 
   return (
     <PageContainer>
@@ -14,15 +16,41 @@ export default function ExportWarehouseFlowPage() {
         title="Export Operations"
         subtitle="Manage export receive, terminal inventory, loading readiness, loaded items, and dispatch flow."
         action={
-          <Button variant="light" leftSection={<PackageSearch size={16} />} onClick={() => navigate('/dashboard/import-warehouse')}>
-            Import Operations
-          </Button>
+          <Group gap="xs">
+            <Button
+              fw={700}
+              leftSection={<Truck size={16} />}
+              onClick={() => setReceiveOpen(true)}
+            >
+              Receive for Loading
+            </Button>
+            <Button variant="light" leftSection={<PackageSearch size={16} />} onClick={() => navigate('/dashboard/import-warehouse')}>
+              Import Operations
+            </Button>
+          </Group>
         }
       />
 
       <Card>
         <WarehouseFlowWorkbench direction="EXPORT" />
       </Card>
+
+      <Modal
+        opened={receiveOpen}
+        onClose={() => setReceiveOpen(false)}
+        title="Receive for loading"
+        centered
+        size="80rem"
+      >
+        <Stack gap="md">
+          <WarehouseFlowWorkbench enabled={receiveOpen} direction="EXPORT" />
+          <Group justify="flex-end">
+            <Button variant="default" onClick={() => setReceiveOpen(false)}>
+              Close
+            </Button>
+          </Group>
+        </Stack>
+      </Modal>
     </PageContainer>
   );
 }