From 52845b5d87ef828a1b95c34e174a3cd5bcd3563b Mon Sep 17 00:00:00 2001
From: DeepnaPooja <poojathmideepna@gmail.com>
Date: Tue, 22 Sep 2026 11:24:21 +0530
Subject: [PATCH] Use client-side pagination for rides

---
 .../rides/_components/rides-client.tsx        | 23 ++++++++-----------
 1 file changed, 9 insertions(+), 14 deletions(-)

diff --git a/distribution_fe/app/(dashboard)/operations/rides/_components/rides-client.tsx b/distribution_fe/app/(dashboard)/operations/rides/_components/rides-client.tsx
index 0fe1f35..4353d1f 100644
--- a/distribution_fe/app/(dashboard)/operations/rides/_components/rides-client.tsx
+++ b/distribution_fe/app/(dashboard)/operations/rides/_components/rides-client.tsx
@@ -30,8 +30,6 @@ const RIDE_STATUS_VARIANT: Record<RideStatus, 'default' | 'secondary' | 'destruc
 export function RidesClient() {
   const [data, setData] = useState<RideResponse[]>([])
   const [loading, setLoading] = useState(true)
-  const [total, setTotal] = useState(0)
-  const [page, setPage] = useState(1)
   const [pageSize, setPageSize] = useState(20)
 
   const [sheetOpen, setSheetOpen] = useState(false)
@@ -41,12 +39,11 @@ export function RidesClient() {
   const [closeOpen, setCloseOpen] = useState(false)
   const [selectedRide, setSelectedRide] = useState<RideResponse | null>(null)
 
-  const fetchData = useCallback(async (p: number, ps: number) => {
+  const fetchData = useCallback(async () => {
     setLoading(true)
     try {
-      const res = await ridesApi.list({ page: p, pageSize: ps })
+      const res = await ridesApi.list({ pageSize: 500 })
       setData(getPaginatedItems(res))
-      setTotal(res.total)
     } catch (err) {
       toast.add({ title: 'Failed to load rides', description: getApiError(err), type: 'error' })
     } finally {
@@ -55,8 +52,8 @@ export function RidesClient() {
   }, [])
 
   useEffect(() => {
-    fetchData(page, pageSize)
-  }, [fetchData, page, pageSize])
+    fetchData()
+  }, [fetchData])
 
   function handleView(row: RideResponse) {
     setSelectedRide(row)
@@ -80,7 +77,6 @@ export function RidesClient() {
 
   const tableConfig = useMemo<TableConfig<RideResponse>>(() => ({
     rowKey: 'id',
-    serverSide: true,
     stickyHeader: true,
     emptyMessage: 'No rides found.',
     pagination: { enabled: true, pageSize, pageSizeOptions: [10, 20, 50] },
@@ -175,9 +171,8 @@ export function RidesClient() {
         config={tableConfig}
         data={data}
         loading={loading}
-        totalCount={total}
+        totalCount={data.length}
         onServerSideChange={({ page: p }) => {
-          setPage(p.page)
           setPageSize(p.pageSize)
         }}
       />
@@ -185,7 +180,7 @@ export function RidesClient() {
       <RideSheet
         open={sheetOpen}
         onClose={() => setSheetOpen(false)}
-        onSuccess={() => fetchData(page, pageSize)}
+        onSuccess={fetchData}
       />
 
       <RideViewSheet
@@ -197,21 +192,21 @@ export function RidesClient() {
       <RideEditDriverSheet
         open={editDriverOpen}
         onClose={() => setEditDriverOpen(false)}
-        onSuccess={() => fetchData(page, pageSize)}
+        onSuccess={fetchData}
         ride={selectedRide}
       />
 
       <RideCancelDialog
         open={cancelOpen}
         onClose={() => setCancelOpen(false)}
-        onSuccess={() => fetchData(page, pageSize)}
+        onSuccess={fetchData}
         ride={selectedRide}
       />
 
       <RideCloseDialog
         open={closeOpen}
         onClose={() => setCloseOpen(false)}
-        onSuccess={() => fetchData(page, pageSize)}
+        onSuccess={fetchData}
         ride={selectedRide}
       />
     </>