From 56f6dd8efc71872e97608cf5b869e5db5bdee98f Mon Sep 17 00:00:00 2001
From: DEls <davide.els1@outlook.com>
Date: Wed, 2 Sep 2026 12:36:55 +0200
Subject: [PATCH] feat(plant): implement independent pagination for plant log
 entries

Added a new pagination system for the "Plant log entries" table in PlantView, allowing for separate page management from the main plant data. Introduced constants for log page size and updated the rendering logic to accommodate paginated logs, enhancing user experience when navigating through log entries.
---
 src/app/dashboard/plant/plant-view.tsx | 27 +++++++++++++++++++++++++-
 1 file changed, 26 insertions(+), 1 deletion(-)

diff --git a/src/app/dashboard/plant/plant-view.tsx b/src/app/dashboard/plant/plant-view.tsx
index 37df990..47c4cc3 100644
--- a/src/app/dashboard/plant/plant-view.tsx
+++ b/src/app/dashboard/plant/plant-view.tsx
@@ -48,6 +48,7 @@ import { useInlineEdit } from "@/lib/use-inline-edit";
 import { cn, formatCurrency, formatNumber } from "@/lib/utils";
 
 const PAGE_SIZE = 20;
+const LOGS_PAGE_SIZE = 20;
 
 export interface PlantRow {
   id: string;
@@ -152,6 +153,10 @@ export function PlantView({
   const [projectFilter, setProjectFilter] = React.useState<string>("all");
   const [search, setSearch] = React.useState("");
   const [page, setPage] = React.useState(1);
+  // Independent pagination for the bottom "Plant log entries" table.
+  // The top table's `page` resets on filter/search change (see the
+  // effect below); the logs table has no filter so this stays put.
+  const [logPage, setLogPage] = React.useState(1);
 
   const vehicleHref = React.useCallback(
     (id: string) => `${vehicleBasePath}/${id}`,
@@ -195,6 +200,14 @@ export function PlantView({
     [filtered, page],
   );
 
+  // Independent slice + page count for the bottom "Plant log entries"
+  // table. `logs` is already pre-sorted (newest first) by the server.
+  const logsPageCount = Math.max(1, Math.ceil(logs.length / LOGS_PAGE_SIZE));
+  const pagedLogs = React.useMemo(
+    () => logs.slice((logPage - 1) * LOGS_PAGE_SIZE, logPage * LOGS_PAGE_SIZE),
+    [logs, logPage],
+  );
+
   async function handleDelete(row: PlantRow) {
     if (row.logCount > 0) return; // safety: button is also disabled in this case
     if (deletingId !== null) return;
@@ -644,7 +657,7 @@ export function PlantView({
                   </TableRow>
                 </TableHeader>
                 <TableBody>
-                  {logs.map((l) => (
+                  {pagedLogs.map((l) => (
                     <TableRow key={l.id}>
                       <TableCell className="text-xs tabular-nums">
                         {l.dateLogged
@@ -686,6 +699,18 @@ export function PlantView({
                 </TableBody>
               </Table>
             )}
+            {logs.length > 0 && (
+              <div className="border-t border-border px-4 py-3">
+                <Pagination
+                  page={logPage}
+                  pageCount={logsPageCount}
+                  pageSize={LOGS_PAGE_SIZE}
+                  total={logs.length}
+                  onPageChange={setLogPage}
+                  label="Log entries"
+                />
+              </div>
+            )}
           </CardContent>
         </Card>
         </section>