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("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({ - {logs.map((l) => ( + {pagedLogs.map((l) => ( {l.dateLogged @@ -686,6 +699,18 @@ export function PlantView({ )} + {logs.length > 0 && ( +
+ +
+ )}