enhance booking windows section with pagination and improved UI

apps/edr-freight-web/backoffice/src/pages/bookings/BookingRequestsPage.tsx

@@ -149,7 +149,8 @@ export default function BookingRequestsPage() {
     return items.filter(
       (b) =>
         b.reference.toLowerCase().includes(q) ||
-        b.customerLabel.toLowerCase().includes(q),
+        b.customerLabel.toLowerCase().includes(q) ||
+        (b.contractReference?.toLowerCase().includes(q) ?? false),
     );
   }, [data?.items, query]);
 
@@ -196,6 +197,22 @@ export default function BookingRequestsPage() {
         );
       },
     },
+    {
+      id: "contract",
+      header: () => <span className={bookingTable.headerCell}>Contract</span>,
+      cell: ({ row }) => {
+        const ref = row.original.contractReference;
+        return (
+          <div className="py-1">
+            {ref ? (
+              <span className="truncate font-mono text-xs text-foreground">{ref}</span>
+            ) : (
+              <span className="text-xs text-muted-foreground">—</span>
+            )}
+          </div>
+        );
+      },
+    },
     {
       id: "route",
       header: () => <span className={bookingTable.headerCell}>Route</span>,
@@ -373,7 +390,7 @@ export default function BookingRequestsPage() {
                 <Stack gap="sm">
                   <Group justify="space-between" gap="md" wrap="wrap">
                     <TextInput
-                      placeholder="Search reference or customer…"
+                      placeholder="Search booking, contract or customer…"
                       leftSection={<Search size={18} />}
                       value={query}
                       onChange={(e) => setQuery(e.target.value)}