From 56a65b23644d21a7a1865d25a4414bb2edb3f6c8 Mon Sep 17 00:00:00 2001
From: NuklearRabbit <145918611+NuklearRabbit@users.noreply.github.com>
Date: Sun, 2 Aug 2026 04:51:48 +0200
Subject: [PATCH] fix(ui): repair vehicle and booking list filtering and
 pagination

Vehicles and Bookings both computed a filtered (and, for bookings, paginated)
result but rendered the original unfiltered array in the table body, so
search, status and attention filters had no visible effect and every booking
rendered on every page regardless of the 25-row limit. Render the computed
result instead, and clamp the current booking page when a filter change
shrinks the result set below it.
---
 frontend/src/pages/Bookings.tsx | 11 ++++++++++-
 frontend/src/pages/Vehicles.tsx |  2 +-
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/frontend/src/pages/Bookings.tsx b/frontend/src/pages/Bookings.tsx
index ac02d2a..8544bd1 100644
--- a/frontend/src/pages/Bookings.tsx
+++ b/frontend/src/pages/Bookings.tsx
@@ -26,6 +26,15 @@ export function Bookings() {
       .catch(() => setError("Booking list is unavailable right now."));
   }, [status]);
 
+  useEffect(() => {
+    if (!bookings) return;
+    const filteredCount = bookings.filter((b) =>
+      `${b.public_ref} ${b.customer_name} ${b.vehicle_ref}`.toLowerCase().includes(query.toLowerCase()),
+    ).length;
+    const totalPages = Math.max(1, Math.ceil(filteredCount / perPage));
+    setPage((p) => Math.min(p, totalPages));
+  }, [bookings, query]);
+
   return (
     <div className="page">
       <PageHeader eyebrow="Operations / Schedule" title="Bookings" description="Review active rental windows and upcoming vehicle commitments." />
@@ -68,7 +77,7 @@ export function Bookings() {
             </tr>
           </thead>
           <tbody>
-            {bookings.map((b) => (
+            {visible.map((b) => (
               <tr key={b.public_ref}>
                 <th scope="row" data-label="Reference">
                   <Link to={`/bookings/${b.public_ref}`}>{b.public_ref}</Link>
diff --git a/frontend/src/pages/Vehicles.tsx b/frontend/src/pages/Vehicles.tsx
index 9a69f0e..7a83896 100644
--- a/frontend/src/pages/Vehicles.tsx
+++ b/frontend/src/pages/Vehicles.tsx
@@ -75,7 +75,7 @@ export function Vehicles() {
             </tr>
           </thead>
           <tbody>
-            {vehicles.map((v) => (
+            {filtered.map((v) => (
               <tr key={v.public_ref} className={v.attention ? "row-attention" : ""}>
                 <th scope="row" data-label="Reference">
                   <Link to={`/vehicles/${v.public_ref}`}>{v.public_ref}</Link>