Last mile confirmation request , approval, payment Feature

apps/edr-freight-web/backoffice/src/pages/operations/LastMilePage.tsx

@@ -47,6 +47,9 @@ import { bookingsService } from "@/services/bookings.service";
 import { ruleEngineTable } from "@/components/ruleEngine/ruleEngineStyles";
 import { QUERY_KEYS } from "@/constants/QUERY_KEYS";
 import { useToast } from "@/hooks/use-toast";
+import { useAuth } from "@/auth/useAuth";
+import { FREIGHT_PERMS, hasPermission } from "@/lib/permissions";
+import { LastMileRequestsPanel } from "@/components/operations/LastMileRequestsPanel";
 import {
   LAST_MILE_STATUSES,
   type LastMileApiStatus,
@@ -543,6 +546,9 @@ const buildTripSlipHtml = (record: LastMileRecord, vehicle?: TripSlipVehicle | n
 const LastMilePage = () => {
   const { toast } = useToast();
   const qc = useQueryClient();
+  const { user } = useAuth();
+  const canViewRequests = hasPermission(user, FREIGHT_PERMS.lastMile.requestView);
+  const [view, setView] = useState<"legs" | "requests">("legs");
   const [podRecord, setPodRecord] = useState<LastMileRecord | null>(null);
   const navigate = useNavigate();
   const { pagination, setPagination } = usePagination({ pageSize: 10 });
@@ -1590,6 +1596,30 @@ const LastMilePage = () => {
 
   return (
     <Stack gap="md" p="md">
+      {canViewRequests && (
+        <Group gap="xs">
+          <Button
+            size="xs"
+            variant={view === "legs" ? "filled" : "default"}
+            styles={{ label: { fontWeight: 500 } }}
+            onClick={() => setView("legs")}
+          >
+            Deliveries
+          </Button>
+          <Button
+            size="xs"
+            variant={view === "requests" ? "filled" : "default"}
+            styles={{ label: { fontWeight: 500 } }}
+            onClick={() => setView("requests")}
+          >
+            Requests
+          </Button>
+        </Group>
+      )}
+
+      {view === "requests" && canViewRequests ? (
+        <LastMileRequestsPanel />
+      ) : (
       <Card radius="lg" padding={0} withBorder style={{ borderColor: "var(--mantine-color-gray-2)" }}>
         <Stack gap={0}>
           <Box px="md" pt="md" pb="sm" w="100%">
@@ -1672,6 +1702,7 @@ const LastMilePage = () => {
           />
         </Stack>
       </Card>
+      )}
 
       {/* 2-step Assign Mile (arrival queue → vehicle) */}
       <Modal