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

@@ -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>