Intercity load unload with grn ,Warehouse , fleet , and allocation endpoints permission

apps/edr-freight-web/backoffice/src/pages/fleet/CompliancePage.tsx

@@ -18,6 +18,11 @@ import {
 } from "@mantine/core";
 import { Plus, AlertTriangle } from "lucide-react";
 import Breadcrumbs from "@/components/ui/Breadcrumbs";
+import ListControls from "@/components/common/ListControls";
+// Generic list footer — already shared by the fleet and train-scheduling lists
+// despite the ruleEngine path.
+import RuleEngineListFooter from "@/components/ruleEngine/RuleEngineListFooter";
+import { useListControls } from "@/hooks/useListControls";
 import { useToast } from "@/hooks/use-toast";
 import {
   complianceService,
@@ -86,6 +91,11 @@ export default function CompliancePage() {
     },
   });
 
+  const controls = useListControls(records as ComplianceRecord[], {
+    searchKeys: ["type", "status", "documentNumber"],
+    dateKey: "expiryDate",
+  });
+
   const createMutation = useMutation({
     mutationFn: async (data: typeof formData) => {
       const res = await complianceService.create({
@@ -210,6 +220,18 @@ export default function CompliancePage() {
         Compliance Records
       </Title>
       <Card withBorder>
+        <ListControls
+          search={controls.search}
+          onSearchChange={controls.setSearch}
+          searchPlaceholder="Search type, status, document no…"
+          dateFrom={controls.dateFrom}
+          onDateFromChange={controls.setDateFrom}
+          dateTo={controls.dateTo}
+          onDateToChange={controls.setDateTo}
+          dateLabel="Expiry"
+          hasFilters={controls.hasFilters}
+          onReset={controls.reset}
+        />
         <Table striped highlightOnHover>
           <Table.Thead>
             <Table.Tr>
@@ -239,7 +261,7 @@ export default function CompliancePage() {
                 </Table.Td>
               </Table.Tr>
             ) : null}
-            {(records as ComplianceRecord[]).map((record) => (
+            {controls.pagedRows.map((record) => (
               <Table.Tr key={record.id}>
                 <Table.Td>{vehicleLabel(record)}</Table.Td>
                 <Table.Td>
@@ -259,6 +281,13 @@ export default function CompliancePage() {
             ))}
           </Table.Tbody>
         </Table>
+        <RuleEngineListFooter
+          pagination={controls.pagination}
+          pageCount={controls.pageCount}
+          totalCount={controls.totalCount}
+          itemLabel="records"
+          onPaginationChange={controls.setPagination}
+        />
       </Card>
 
       {/* Modal */}

apps/edr-freight-web/backoffice/src/pages/fleet/FleetResourcePage.tsx

@@ -1,5 +1,6 @@
 import type { ColumnDef } from "@edr/ui-common";
 import { Box, Button, Card, Container, Group, Modal, Select, Stack, Text, Title } from "@mantine/core";
+import { DatePickerInput } from "@mantine/dates";
 import { useMutation, useQuery } from "@tanstack/react-query";
 
 import { api } from "@/services/api";
@@ -15,6 +16,7 @@ import FleetFormDialog from "@/components/fleet/FleetFormDialog";
 import FleetHistoryModal from "@/components/fleet/FleetHistoryModal";
 import FleetRecordActions from "@/components/fleet/FleetRecordActions";
 import FleetToolbar from "@/components/fleet/FleetToolbar";
+import { matchesDayRange } from "@/hooks/useListControls";
 import WagonMovementHistoryModal from "@/components/fleet/WagonMovementHistoryModal";
 import WagonYardWorkspaceModal from "@/components/wagons/WagonYardWorkspaceModal";
 import WagonTransferRequestsModal from "@/components/wagons/WagonTransferRequestsModal";
@@ -47,6 +49,10 @@ const FleetResourcePage = () => {
   const { pagination, setPagination } = usePagination({ pageSize: 10 });
   const [search, setSearch] = useState("");
   const [statusFilter, setStatusFilter] = useState("ALL");
+  // Registration date range. Server-side list filters (status/yard/train) are
+  // applied by the API; this narrows what comes back, alongside search.
+  const [dateFrom, setDateFrom] = useState<string | null>(null);
+  const [dateTo, setDateTo] = useState<string | null>(null);
   const [listFilterValues, setListFilterValues] = useState<Record<string, string>>({});
   const [formOpen, setFormOpen] = useState(false);
   const [editing, setEditing] = useState<FleetRecord | null>(null);
@@ -125,7 +131,7 @@ const FleetResourcePage = () => {
 
   useEffect(() => {
     setPagination((prev) => ({ pageIndex: 0, pageSize: prev.pageSize }));
-  }, [search, listFilterValues, setPagination]);
+  }, [search, listFilterValues, dateFrom, dateTo, setPagination]);
 
   const hasStatusColumn = Boolean(config?.columns.some((col) => col.accessorKey === "status"));
   const usesServerListFilters = Boolean(config?.listFilters?.length);
@@ -255,10 +261,13 @@ const FleetResourcePage = () => {
 
   const filteredRows = useMemo(() => {
     if (!config) return allRows;
-    if (usesServerListFilters) return allRows;
     const term = search.trim().toLowerCase();
     return allRows.filter((row) => {
       const record = row as unknown as Record<string, unknown>;
+      // The date range applies even when the API already filtered the list —
+      // it is not one of the server-side filters.
+      if (!matchesDayRange(record.createdAt, dateFrom, dateTo)) return false;
+      if (usesServerListFilters) return true;
       if (statusFilter !== "ALL" && String(record.status ?? "") !== statusFilter) {
         return false;
       }
@@ -269,7 +278,7 @@ const FleetResourcePage = () => {
           .includes(term),
       );
     });
-  }, [allRows, search, statusFilter, config, usesServerListFilters]);
+  }, [allRows, search, statusFilter, config, usesServerListFilters, dateFrom, dateTo]);
 
   const pageCount = Math.max(1, Math.ceil(filteredRows.length / pagination.pageSize));
   const pagedRows = useMemo(() => {
@@ -466,7 +475,30 @@ const FleetResourcePage = () => {
               viewMode={viewMode}
               onViewModeChange={setViewMode}
               filters={
-                listFilterSelects ? (
+                <Group gap="sm" wrap="wrap" align="center">
+                  <DatePickerInput
+                    aria-label="Created from"
+                    placeholder="Created from"
+                    value={dateFrom}
+                    onChange={setDateFrom}
+                    maxDate={dateTo ?? undefined}
+                    clearable
+                    size="sm"
+                    radius="lg"
+                    w={160}
+                  />
+                  <DatePickerInput
+                    aria-label="Created to"
+                    placeholder="Created to"
+                    value={dateTo}
+                    onChange={setDateTo}
+                    minDate={dateFrom ?? undefined}
+                    clearable
+                    size="sm"
+                    radius="lg"
+                    w={160}
+                  />
+                {listFilterSelects ? (
                   <Group gap="sm" wrap="wrap" align="center">
                     {listFilterSelects.map((filter) => (
                       <Select
@@ -509,7 +541,8 @@ const FleetResourcePage = () => {
                       ))}
                     </Group>
                   </Group>
-                ) : undefined
+                ) : null}
+                </Group>
               }
             />
           </Box>

apps/edr-freight-web/backoffice/src/pages/fleet/FuelPurchasePage.tsx

@@ -19,6 +19,11 @@ import {
 } from "@mantine/core";
 import { Plus } from "lucide-react";
 import Breadcrumbs from "@/components/ui/Breadcrumbs";
+import ListControls from "@/components/common/ListControls";
+// Generic list footer — already shared by the fleet and train-scheduling lists
+// despite the ruleEngine path.
+import RuleEngineListFooter from "@/components/ruleEngine/RuleEngineListFooter";
+import { useListControls } from "@/hooks/useListControls";
 import { useToast } from "@/hooks/use-toast";
 import { api } from "@/auth/http";
 import { QUERY_KEYS } from "@/constants/QUERY_KEYS";
@@ -118,6 +123,11 @@ export default function FuelPurchasePage() {
   const totalCost = formData.liters * formData.costPerLiter;
 
   // Aggregate stats (guarded against divide-by-zero when there are no purchases)
+  const controls = useListControls(purchasesData as FuelPurchase[], {
+    searchKeys: ["fuelStation", "paymentMethod"],
+    dateKey: "purchaseDate",
+  });
+
   const totalLiters = (purchasesData as FuelPurchase[]).reduce(
     (sum, p) => sum + Number(p.liters),
     0
@@ -185,6 +195,18 @@ export default function FuelPurchasePage() {
 
       {/* Purchases Table */}
       <Card withBorder>
+        <ListControls
+          search={controls.search}
+          onSearchChange={controls.setSearch}
+          searchPlaceholder="Search station or payment method…"
+          dateFrom={controls.dateFrom}
+          onDateFromChange={controls.setDateFrom}
+          dateTo={controls.dateTo}
+          onDateToChange={controls.setDateTo}
+          dateLabel="Purchased"
+          hasFilters={controls.hasFilters}
+          onReset={controls.reset}
+        />
         <Table striped highlightOnHover>
           <Table.Thead>
             <Table.Tr>
@@ -215,7 +237,7 @@ export default function FuelPurchasePage() {
                 </Table.Td>
               </Table.Tr>
             ) : null}
-            {(purchasesData as FuelPurchase[])?.map((purchase) => (
+            {controls.pagedRows.map((purchase) => (
               <Table.Tr key={purchase.id}>
                 <Table.Td>{(purchase as any).vehicle?.registrationNumber || (purchase as any).vehicle?.plateNumber || purchase.vehicleId}</Table.Td>
                 <Table.Td>{new Date(purchase.purchaseDate).toLocaleDateString()}</Table.Td>
@@ -230,6 +252,13 @@ export default function FuelPurchasePage() {
             ))}
           </Table.Tbody>
         </Table>
+        <RuleEngineListFooter
+          pagination={controls.pagination}
+          pageCount={controls.pageCount}
+          totalCount={controls.totalCount}
+          itemLabel="purchases"
+          onPaginationChange={controls.setPagination}
+        />
       </Card>
 
       {/* Modal */}

apps/edr-freight-web/backoffice/src/pages/fleet/IncidentsPage.tsx

@@ -20,6 +20,11 @@ import {
 } from "@mantine/core";
 import { Plus } from "lucide-react";
 import Breadcrumbs from "@/components/ui/Breadcrumbs";
+import ListControls from "@/components/common/ListControls";
+// Generic list footer — already shared by the fleet and train-scheduling lists
+// despite the ruleEngine path.
+import RuleEngineListFooter from "@/components/ruleEngine/RuleEngineListFooter";
+import { useListControls } from "@/hooks/useListControls";
 import { useToast } from "@/hooks/use-toast";
 import {
   incidentsService,
@@ -161,6 +166,10 @@ export default function IncidentsPage() {
     })) || [];
 
   const incidents = incidentsData as Incident[];
+  const controls = useListControls(incidents, {
+    searchKeys: ["type", "severity", "status"],
+    dateKey: "occurredAt",
+  });
   const totalCount = incidents.length;
   const openCount = incidents.filter((i) => OPEN_STATUSES.includes(i.status)).length;
   const underReviewCount = incidents.filter((i) => i.status === "UNDER_REVIEW").length;
@@ -237,6 +246,18 @@ export default function IncidentsPage() {
 
       {/* Incidents Table */}
       <Card withBorder>
+        <ListControls
+          search={controls.search}
+          onSearchChange={controls.setSearch}
+          searchPlaceholder="Search type, severity, status…"
+          dateFrom={controls.dateFrom}
+          onDateFromChange={controls.setDateFrom}
+          dateTo={controls.dateTo}
+          onDateToChange={controls.setDateTo}
+          dateLabel="Occurred"
+          hasFilters={controls.hasFilters}
+          onReset={controls.reset}
+        />
         <Table striped highlightOnHover>
           <Table.Thead>
             <Table.Tr>
@@ -267,7 +288,7 @@ export default function IncidentsPage() {
                 </Table.Td>
               </Table.Tr>
             ) : null}
-            {incidents.map((incident) => (
+            {controls.pagedRows.map((incident) => (
               <Table.Tr key={incident.id}>
                 <Table.Td>{new Date(incident.occurredAt).toLocaleDateString()}</Table.Td>
                 <Table.Td>
@@ -294,6 +315,13 @@ export default function IncidentsPage() {
             ))}
           </Table.Tbody>
         </Table>
+        <RuleEngineListFooter
+          pagination={controls.pagination}
+          pageCount={controls.pageCount}
+          totalCount={controls.totalCount}
+          itemLabel="incidents"
+          onPaginationChange={controls.setPagination}
+        />
       </Card>
 
       {/* Modal */}