David/mega-plant
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
mega-plant/components/IncomeView.tsx

413 lines
20 KiB
TypeScript
Raw Normal View History

Mega Plant dashboard — fix & harden (Parts 0-5)
2026-09-12 07:35:35 +00:00
"use client";
Income: hide stood-down machines, with an active/inactive filter The field is `assets.is_active`. All 7 inactive machines have no income at all — the three generators, two porta camps, AEB Plant Versekering and the Diesel Truck — so on the income list they were a flat row of zeros and nothing else, reading as "idle" when they are actually out of the fleet. They are now hidden by default. The rows are not dropped from the data: the filter lives in the view, so Active / All / Inactive is a client-side toggle with no refetch, and each shows its count so a filter that silently hides rows is obvious. A machine hidden by the filter also collapses if it was expanded. The YTD income and profit tiles moved into the view so they sum only what is visible — otherwise the headline would report the whole fleet while the list below it showed a subset. /charts is unchanged: it passes no filter and still sees everything. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-10-03 16:40:32 +00:00
import { useState, useMemo, useEffect } from "react";
Mega Plant dashboard — fix & harden (Parts 0-5)
2026-09-12 07:35:35 +00:00
import { TrendingUp, TrendingDown, LayoutGrid, Sparkles, ChevronRight } from "lucide-react";
import { Sparkline } from "@/components/Sparkline";
import { MONTH_NAMES } from "@/lib/data";
import type { IncomeRow } from "@/lib/rows";
import { ZAR, ZAR2 } from "@/lib/utils";
Mobile: make the invoice tables readable at 375px Audited the invoice UI against the Round 4 checklist and fixed four things. The summary table carried eight columns at a fixed 820px min-width, which at 375px is a long sideways scroll through three figures before reaching the status badge — the one thing that needs acting on. Below sm it now keeps only Invoice, Site, Total and Status, and drops to a 520px min-width, so the useful columns are readable without scrolling. Period, line count and the ex-VAT/VAT split are one tap away in the expanded detail, and the full eight columns return from sm up where there is room. The summary table also had no right-edge fade. Rule 4 asks for a visible affordance on any wide table and it was simply missing, so scrolling sideways looked like the table ended. Same for the month grid on /income, which was also missing -webkit-overflow-scrolling. Both now share components/ScrollFade. Two 10px labels in the app header ("Overheads 2026", "FY") were invisible at 375px but visible from 640/768px — and 768x1024 is one of the two sizes the checklist tests, so they were a rule-2 violation at tablet width. Bumped to 12px. PlantRegisterTable's 10px filter count was checked and left alone: it sits inside hidden lg:flex, so it never renders on mobile. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-10-02 13:29:00 +00:00
import { ScrollFade } from "@/components/ScrollFade";
Mega Plant dashboard — fix & harden (Parts 0-5)
2026-09-12 07:35:35 +00:00
Income: the tiles and the machine list were sharing the title's flex row def147b moved the YTD tiles into IncomeView so they would follow the active/inactive filter, and in doing so moved the whole component into the page's `lg:flex-row` header. IncomeView returns a FRAGMENT, so its three sections — the toolbar, the tiles and the entire machine list — became flex siblings of the title and competed for one line. Measured at 1440px before the fix: the tile grid was 124px wide, two 56px columns holding text-2xl money that needs 138px. The "YTD Income" label was smeared across the full 1440px viewport, and the machine list was pushed right and clipped off the edge. After: the tile grid is 369px, the money fits, and the last card ends inside the viewport. It hid from the mobile checklist because the header only becomes a row at lg — below that it is a column and stacks correctly, so 375 and 768 both passed while every desktop width was broken. The heading now renders inside IncomeView, in the same row as the tiles. The tiles stay in the client component, so they still follow the filter, which is what def147b was after. /sites uses the same header pattern and was always correct: its tiles are a plain div, not a fragment-returning component.
2026-10-06 09:05:37 +00:00
export function IncomeView({
rows,
palette,
title,
}: {
rows: IncomeRow[];
palette: { income: string; profit: string; loss: string };
/** The page heading. Rendered here rather than by the page because the YTD tiles have
* to sit beside it, and the tiles can only follow the status filter from in here. */
title: React.ReactNode;
}) {
Mega Plant dashboard — fix & harden (Parts 0-5)
2026-09-12 07:35:35 +00:00
const [view, setView] = useState<"cards" | "grid">("cards");
const [sort, setSort] = useState<"profit" | "income">("profit");
const [expanded, setExpanded] = useState<string | null>(null);
Income: hide stood-down machines, with an active/inactive filter The field is `assets.is_active`. All 7 inactive machines have no income at all — the three generators, two porta camps, AEB Plant Versekering and the Diesel Truck — so on the income list they were a flat row of zeros and nothing else, reading as "idle" when they are actually out of the fleet. They are now hidden by default. The rows are not dropped from the data: the filter lives in the view, so Active / All / Inactive is a client-side toggle with no refetch, and each shows its count so a filter that silently hides rows is obvious. A machine hidden by the filter also collapses if it was expanded. The YTD income and profit tiles moved into the view so they sum only what is visible — otherwise the headline would report the whole fleet while the list below it showed a subset. /charts is unchanged: it passes no filter and still sees everything. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-10-03 16:40:32 +00:00
// Machines the client has stood down show nothing but a flat row of zeros — they are
// out of the fleet, not idle. Hidden by default, reachable behind the filter.
const [status, setStatus] = useState<"active" | "all" | "inactive">("active");
const visible = useMemo(
() =>
rows.filter((r) =>
status === "all" ? true : status === "active" ? r.isActive : !r.isActive,
),
[rows, status],
);
useEffect(() => {
// A machine hidden by the filter must not stay stuck expanded.
if (expanded && !visible.some((r) => r.id === expanded)) setExpanded(null);
}, [visible, expanded]);
const activeN = useMemo(() => rows.filter((r) => r.isActive).length, [rows]);
const inactiveN = rows.length - activeN;
Mega Plant dashboard — fix & harden (Parts 0-5)
2026-09-12 07:35:35 +00:00
const sorted = useMemo(() => {
Income: hide stood-down machines, with an active/inactive filter The field is `assets.is_active`. All 7 inactive machines have no income at all — the three generators, two porta camps, AEB Plant Versekering and the Diesel Truck — so on the income list they were a flat row of zeros and nothing else, reading as "idle" when they are actually out of the fleet. They are now hidden by default. The rows are not dropped from the data: the filter lives in the view, so Active / All / Inactive is a client-side toggle with no refetch, and each shows its count so a filter that silently hides rows is obvious. A machine hidden by the filter also collapses if it was expanded. The YTD income and profit tiles moved into the view so they sum only what is visible — otherwise the headline would report the whole fleet while the list below it showed a subset. /charts is unchanged: it passes no filter and still sees everything. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-10-03 16:40:32 +00:00
return [...visible].sort((a, b) =>
Mega Plant dashboard — fix & harden (Parts 0-5)
2026-09-12 07:35:35 +00:00
sort === "profit" ? b.ytdProfit - a.ytdProfit : b.income - a.income
);
Income: hide stood-down machines, with an active/inactive filter The field is `assets.is_active`. All 7 inactive machines have no income at all — the three generators, two porta camps, AEB Plant Versekering and the Diesel Truck — so on the income list they were a flat row of zeros and nothing else, reading as "idle" when they are actually out of the fleet. They are now hidden by default. The rows are not dropped from the data: the filter lives in the view, so Active / All / Inactive is a client-side toggle with no refetch, and each shows its count so a filter that silently hides rows is obvious. A machine hidden by the filter also collapses if it was expanded. The YTD income and profit tiles moved into the view so they sum only what is visible — otherwise the headline would report the whole fleet while the list below it showed a subset. /charts is unchanged: it passes no filter and still sees everything. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-10-03 16:40:32 +00:00
}, [visible, sort]);
Mega Plant dashboard — fix & harden (Parts 0-5)
2026-09-12 07:35:35 +00:00
const totals = useMemo(() => {
Income: hide stood-down machines, with an active/inactive filter The field is `assets.is_active`. All 7 inactive machines have no income at all — the three generators, two porta camps, AEB Plant Versekering and the Diesel Truck — so on the income list they were a flat row of zeros and nothing else, reading as "idle" when they are actually out of the fleet. They are now hidden by default. The rows are not dropped from the data: the filter lives in the view, so Active / All / Inactive is a client-side toggle with no refetch, and each shows its count so a filter that silently hides rows is obvious. A machine hidden by the filter also collapses if it was expanded. The YTD income and profit tiles moved into the view so they sum only what is visible — otherwise the headline would report the whole fleet while the list below it showed a subset. /charts is unchanged: it passes no filter and still sees everything. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-10-03 16:40:32 +00:00
// Summed over what is VISIBLE, so the headline never disagrees with the list below it.
const totalIncome = visible.reduce((s, r) => s + r.income, 0);
const totalProfit = visible.reduce((s, r) => s + r.ytdProfit, 0);
const profitable = visible.filter((r) => r.ytdProfit > 0).length;
Invoices: line-item extraction, booking to plant items, VAT-inclusive income Adds an Invoices sub-menu under /income with a summary table (one row per invoice, click to expand the full detail) and the data model behind it. Data: - invoices + invoice_lines PocketBase collections, created idempotently by scripts/setup-invoice-collections.mjs - line items transcribed from PHI 166/167/171 with per-invoice arithmetic validation in the seed; a bad invoice is refused without blocking the rest - invoice-*.json in data/source are auto-imported, so adding an invoice is one file Booking: - manual book-in per line (Booked to), grouped by category - POST /api/invoice-lines/:id/book moves the income row rather than adding a second one, so a booking can be changed freely - scripts/book-invoice.mjs is idempotent: rows are stamped with monthly_income.invoice_line and replaced on re-run - booked amount follows lib/invoice-booking-policy.json (bookInclusiveVat), read by both the app and the CLI so they cannot disagree Money: - the R24,205.13 column on these invoices is PLUS VAT, not escalation. The seed now rejects VAT that disagrees with the stated rate. - booked amounts are VAT-inclusive per the client ruling of 2026-10-01; the VAT stays visible rather than hidden. Uploads: - drag-and-drop PDF attached to invoices.source_pdf - GET /api/invoices/:id/document proxies it — the collection is rule-locked, so a direct PocketBase /api/files link 404s in a browser Fixes a month-aggregation bug this introduced: buildIncomeRows assigned into months[i], so a machine with two income rows in one month (one per invoice, which is normal multi-site use) showed only the last. SS01 September read R20,700 instead of R35,305 while its own YTD included both. Months now accumulate, per-month profit is computed once after accumulation, and lib/rows.test.ts pins it. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-10-01 13:59:30 +00:00
// VAT already inside the booked figures — booked amounts are VAT-inclusive, so this
// is part of the income total and is called out rather than hidden.
Income: hide stood-down machines, with an active/inactive filter The field is `assets.is_active`. All 7 inactive machines have no income at all — the three generators, two porta camps, AEB Plant Versekering and the Diesel Truck — so on the income list they were a flat row of zeros and nothing else, reading as "idle" when they are actually out of the fleet. They are now hidden by default. The rows are not dropped from the data: the filter lives in the view, so Active / All / Inactive is a client-side toggle with no refetch, and each shows its count so a filter that silently hides rows is obvious. A machine hidden by the filter also collapses if it was expanded. The YTD income and profit tiles moved into the view so they sum only what is visible — otherwise the headline would report the whole fleet while the list below it showed a subset. /charts is unchanged: it passes no filter and still sees everything. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-10-03 16:40:32 +00:00
const invoiceVat = visible.reduce((s, r) => s + r.invoiceVat, 0);
const invoiceIncome = visible.reduce((s, r) => s + r.invoiceIncome, 0);
Invoices: line-item extraction, booking to plant items, VAT-inclusive income Adds an Invoices sub-menu under /income with a summary table (one row per invoice, click to expand the full detail) and the data model behind it. Data: - invoices + invoice_lines PocketBase collections, created idempotently by scripts/setup-invoice-collections.mjs - line items transcribed from PHI 166/167/171 with per-invoice arithmetic validation in the seed; a bad invoice is refused without blocking the rest - invoice-*.json in data/source are auto-imported, so adding an invoice is one file Booking: - manual book-in per line (Booked to), grouped by category - POST /api/invoice-lines/:id/book moves the income row rather than adding a second one, so a booking can be changed freely - scripts/book-invoice.mjs is idempotent: rows are stamped with monthly_income.invoice_line and replaced on re-run - booked amount follows lib/invoice-booking-policy.json (bookInclusiveVat), read by both the app and the CLI so they cannot disagree Money: - the R24,205.13 column on these invoices is PLUS VAT, not escalation. The seed now rejects VAT that disagrees with the stated rate. - booked amounts are VAT-inclusive per the client ruling of 2026-10-01; the VAT stays visible rather than hidden. Uploads: - drag-and-drop PDF attached to invoices.source_pdf - GET /api/invoices/:id/document proxies it — the collection is rule-locked, so a direct PocketBase /api/files link 404s in a browser Fixes a month-aggregation bug this introduced: buildIncomeRows assigned into months[i], so a machine with two income rows in one month (one per invoice, which is normal multi-site use) showed only the last. SS01 September read R20,700 instead of R35,305 while its own YTD included both. Months now accumulate, per-month profit is computed once after accumulation, and lib/rows.test.ts pins it. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-10-01 13:59:30 +00:00
return { totalIncome, totalProfit, profitable, invoiceVat, invoiceIncome };
Income: hide stood-down machines, with an active/inactive filter The field is `assets.is_active`. All 7 inactive machines have no income at all — the three generators, two porta camps, AEB Plant Versekering and the Diesel Truck — so on the income list they were a flat row of zeros and nothing else, reading as "idle" when they are actually out of the fleet. They are now hidden by default. The rows are not dropped from the data: the filter lives in the view, so Active / All / Inactive is a client-side toggle with no refetch, and each shows its count so a filter that silently hides rows is obvious. A machine hidden by the filter also collapses if it was expanded. The YTD income and profit tiles moved into the view so they sum only what is visible — otherwise the headline would report the whole fleet while the list below it showed a subset. /charts is unchanged: it passes no filter and still sees everything. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-10-03 16:40:32 +00:00
}, [visible]);
Mega Plant dashboard — fix & harden (Parts 0-5)
2026-09-12 07:35:35 +00:00
return (
<>
Income: the tiles and the machine list were sharing the title's flex row def147b moved the YTD tiles into IncomeView so they would follow the active/inactive filter, and in doing so moved the whole component into the page's `lg:flex-row` header. IncomeView returns a FRAGMENT, so its three sections — the toolbar, the tiles and the entire machine list — became flex siblings of the title and competed for one line. Measured at 1440px before the fix: the tile grid was 124px wide, two 56px columns holding text-2xl money that needs 138px. The "YTD Income" label was smeared across the full 1440px viewport, and the machine list was pushed right and clipped off the edge. After: the tile grid is 369px, the money fits, and the last card ends inside the viewport. It hid from the mobile checklist because the header only becomes a row at lg — below that it is a column and stacks correctly, so 375 and 768 both passed while every desktop width was broken. The heading now renders inside IncomeView, in the same row as the tiles. The tiles stay in the client component, so they still follow the filter, which is what def147b was after. /sites uses the same header pattern and was always correct: its tiles are a plain div, not a fragment-returning component.
2026-10-06 09:05:37 +00:00
{/* The heading row lives HERE, not in the page. This component returns a fragment,
so when the page put it inside its own `lg:flex-row` header, the toolbar, these
tiles and the whole machine list all became flex SIBLINGS of the title and shared
one line: the tiles were squeezed to ~150px columns whose text-2xl money spilled
over itself, and the list was pushed off the side. Stacking until lg is what
hides it — below lg this row is a column, so the mobile pass never saw it. */}
<div className="flex flex-col lg:flex-row lg:items-end lg:justify-between gap-4 mb-6">
{title}
{/* grid, not flex-wrap: a wrapping flex row sizes tiles by CONTENT, which is the
ragged-left-edge trap AGENTS.md records for /income/invoices.
Full-width stacked on mobile, two-up from sm — same shape the dashboard
cards already use there. */}
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
<div className="bg-gradient-to-br from-[#00798C] to-[#003D5B] rounded-2xl px-5 py-3 text-white shadow-lg shadow-teal-500/20">
<div className="text-xs text-white/80">YTD Income</div>
<div className="text-2xl font-semibold tabular-nums">{ZAR(totals.totalIncome)}</div>
</div>
<div
className={`bg-gradient-to-br ${
totals.totalProfit >= 0 ? "from-[#EDAE49] to-[#D1495B]" : "from-[#D1495B] to-[#003D5B]"
} rounded-2xl px-5 py-3 text-white shadow-lg`}
>
<div className="text-xs text-white/80">YTD Profit</div>
<div className="text-2xl font-semibold tabular-nums">{ZAR(totals.totalProfit)}</div>
</div>
</div>
</div>
Round 4: regressions fixed + mobile standard Part A — Round 3 regressions: - A.1: verify-cost-reconciliation.mjs now loads .env.local, wraps in try/catch, exits 1 on any failure - A.2: Vehicle Costs restored Santam — back to R 14,996.31 (matches row-by-row sum) - A.3: incl<excl / VAT math / VAT>20% now FATAL — seed exits 2 with full report (4 anomalies on Charl-CCS + Buildsmart) - A.4: Reconciliation target R 694,962.93 with both deltas itemised (Personnel +R19,800, Santam -R5,322.44, unexplained R 0.00) - A.5: 'Lines' view uses actual lines (recharts LineChart), no fills; fills only in 'Cost stack' Part B — Mobile standard: - B.1: header wraps to 2 rows on mobile; YTD badge cards stack; page-wide overflow eliminated on /income, /charts, /overheads, /running, /expenses - B.2: IncomeView card row layout stacked — name gets its own line on mobile, never truncated to single char - B.3: Plant type filter is a <select> dropdown below lg (was 18 pills wrapping to 13 rows); same for sort on /income and /running - B.4: Plant table first column sticky; -webkit-overflow-scrolling: touch; tables scroll inside their own container - B.5: All buttons/links use min-h-[44px] tap targets; text below 12px is bumped where it matters - B.6: Charts legend wraps below title; chart min-height h-44 → h-52 on mobile - B.7: paddingTop env(safe-area-inset-top) on sticky header for notch/home indicator clearance AGENTS.md created with the standing mobile checklist rule.
2026-09-12 10:05:43 +00:00
{/* Round 4 Part B.1/B.3/B.5: toolbar wraps onto two rows on mobile, controls collapse gracefully */}
<div className="flex flex-col sm:flex-row sm:flex-wrap sm:items-center sm:justify-between gap-3 mb-5">
<div className="flex items-center gap-2 text-xs text-gray-500 dark:text-gray-400 flex-wrap">
Mega Plant dashboard — fix & harden (Parts 0-5)
2026-09-12 07:35:35 +00:00
<span className="px-2.5 py-1 rounded-md bg-[#00798C]/10 text-[#00798C] font-medium">
{totals.profitable} profitable
</span>
<span className="px-2.5 py-1 rounded-md bg-[#D1495B]/10 text-[#D1495B] font-medium">
Income: hide stood-down machines, with an active/inactive filter The field is `assets.is_active`. All 7 inactive machines have no income at all — the three generators, two porta camps, AEB Plant Versekering and the Diesel Truck — so on the income list they were a flat row of zeros and nothing else, reading as "idle" when they are actually out of the fleet. They are now hidden by default. The rows are not dropped from the data: the filter lives in the view, so Active / All / Inactive is a client-side toggle with no refetch, and each shows its count so a filter that silently hides rows is obvious. A machine hidden by the filter also collapses if it was expanded. The YTD income and profit tiles moved into the view so they sum only what is visible — otherwise the headline would report the whole fleet while the list below it showed a subset. /charts is unchanged: it passes no filter and still sees everything. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-10-03 16:40:32 +00:00
{visible.length - totals.profitable} loss-making
Mega Plant dashboard — fix & harden (Parts 0-5)
2026-09-12 07:35:35 +00:00
</span>
Invoices: line-item extraction, booking to plant items, VAT-inclusive income Adds an Invoices sub-menu under /income with a summary table (one row per invoice, click to expand the full detail) and the data model behind it. Data: - invoices + invoice_lines PocketBase collections, created idempotently by scripts/setup-invoice-collections.mjs - line items transcribed from PHI 166/167/171 with per-invoice arithmetic validation in the seed; a bad invoice is refused without blocking the rest - invoice-*.json in data/source are auto-imported, so adding an invoice is one file Booking: - manual book-in per line (Booked to), grouped by category - POST /api/invoice-lines/:id/book moves the income row rather than adding a second one, so a booking can be changed freely - scripts/book-invoice.mjs is idempotent: rows are stamped with monthly_income.invoice_line and replaced on re-run - booked amount follows lib/invoice-booking-policy.json (bookInclusiveVat), read by both the app and the CLI so they cannot disagree Money: - the R24,205.13 column on these invoices is PLUS VAT, not escalation. The seed now rejects VAT that disagrees with the stated rate. - booked amounts are VAT-inclusive per the client ruling of 2026-10-01; the VAT stays visible rather than hidden. Uploads: - drag-and-drop PDF attached to invoices.source_pdf - GET /api/invoices/:id/document proxies it — the collection is rule-locked, so a direct PocketBase /api/files link 404s in a browser Fixes a month-aggregation bug this introduced: buildIncomeRows assigned into months[i], so a machine with two income rows in one month (one per invoice, which is normal multi-site use) showed only the last. SS01 September read R20,700 instead of R35,305 while its own YTD included both. Months now accumulate, per-month profit is computed once after accumulation, and lib/rows.test.ts pins it. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-10-01 13:59:30 +00:00
{totals.invoiceVat > 0 && (
<span className="px-2.5 py-1 rounded-md bg-[#EDAE49]/15 text-[#8a6420] dark:text-[#EDAE49] font-medium">
includes {ZAR(totals.invoiceVat)} VAT
</span>
)}
Mega Plant dashboard — fix & harden (Parts 0-5)
2026-09-12 07:35:35 +00:00
<span className="hidden md:inline">· sorted by {sort}</span>
</div>
Round 4: regressions fixed + mobile standard Part A — Round 3 regressions: - A.1: verify-cost-reconciliation.mjs now loads .env.local, wraps in try/catch, exits 1 on any failure - A.2: Vehicle Costs restored Santam — back to R 14,996.31 (matches row-by-row sum) - A.3: incl<excl / VAT math / VAT>20% now FATAL — seed exits 2 with full report (4 anomalies on Charl-CCS + Buildsmart) - A.4: Reconciliation target R 694,962.93 with both deltas itemised (Personnel +R19,800, Santam -R5,322.44, unexplained R 0.00) - A.5: 'Lines' view uses actual lines (recharts LineChart), no fills; fills only in 'Cost stack' Part B — Mobile standard: - B.1: header wraps to 2 rows on mobile; YTD badge cards stack; page-wide overflow eliminated on /income, /charts, /overheads, /running, /expenses - B.2: IncomeView card row layout stacked — name gets its own line on mobile, never truncated to single char - B.3: Plant type filter is a <select> dropdown below lg (was 18 pills wrapping to 13 rows); same for sort on /income and /running - B.4: Plant table first column sticky; -webkit-overflow-scrolling: touch; tables scroll inside their own container - B.5: All buttons/links use min-h-[44px] tap targets; text below 12px is bumped where it matters - B.6: Charts legend wraps below title; chart min-height h-44 → h-52 on mobile - B.7: paddingTop env(safe-area-inset-top) on sticky header for notch/home indicator clearance AGENTS.md created with the standing mobile checklist rule.
2026-09-12 10:05:43 +00:00
{/* Round 4 Part B.3: Sort collapses to a select on mobile. View toggle stays as buttons. */}
<div className="flex items-center gap-2 flex-wrap">
Fix: the mobile table was mislabelled and clipping its own totals A screenshot at phone width showed an "INVOICE | LINES | TOTAL | STATUS" header row while the data under LINES was money. The header and its data cell had drifted apart: the earlier pass hid the Lines <td> but not the matching <th>, because the loop that added the hide classes only matched text-left headers and Lines is text-right. So the Total values rendered under a heading that named a column which no longer existed. The same screenshot showed the totals clipped — "41,710.50" reading as "710,50". With only three columns left, the 520px min-width was still forcing a sideways scroll, and the opaque sticky first column then sat on top of the left of the money values. The mobile floor is gone, so the three remaining columns size to their content, and the sticky and status gutters are trimmed at mobile widths to let them fit 375px. Below sm the table is now exactly Invoice, Total, Status — and every header matches a visible cell. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-10-02 13:34:19 +00:00
<div className="flex items-center gap-1 p-0.5 rounded-lg bg-white dark:bg-white/5 border border-gray-200 dark:border-border">
Mega Plant dashboard — fix & harden (Parts 0-5)
2026-09-12 07:35:35 +00:00
<button
onClick={() => setView("cards")}
Round 4: regressions fixed + mobile standard Part A — Round 3 regressions: - A.1: verify-cost-reconciliation.mjs now loads .env.local, wraps in try/catch, exits 1 on any failure - A.2: Vehicle Costs restored Santam — back to R 14,996.31 (matches row-by-row sum) - A.3: incl<excl / VAT math / VAT>20% now FATAL — seed exits 2 with full report (4 anomalies on Charl-CCS + Buildsmart) - A.4: Reconciliation target R 694,962.93 with both deltas itemised (Personnel +R19,800, Santam -R5,322.44, unexplained R 0.00) - A.5: 'Lines' view uses actual lines (recharts LineChart), no fills; fills only in 'Cost stack' Part B — Mobile standard: - B.1: header wraps to 2 rows on mobile; YTD badge cards stack; page-wide overflow eliminated on /income, /charts, /overheads, /running, /expenses - B.2: IncomeView card row layout stacked — name gets its own line on mobile, never truncated to single char - B.3: Plant type filter is a <select> dropdown below lg (was 18 pills wrapping to 13 rows); same for sort on /income and /running - B.4: Plant table first column sticky; -webkit-overflow-scrolling: touch; tables scroll inside their own container - B.5: All buttons/links use min-h-[44px] tap targets; text below 12px is bumped where it matters - B.6: Charts legend wraps below title; chart min-height h-44 → h-52 on mobile - B.7: paddingTop env(safe-area-inset-top) on sticky header for notch/home indicator clearance AGENTS.md created with the standing mobile checklist rule.
2026-09-12 10:05:43 +00:00
aria-label="Cards view"
className={`min-h-[44px] px-3 text-xs font-medium rounded-md transition flex items-center gap-1.5 ${
Mega Plant dashboard — fix & harden (Parts 0-5)
2026-09-12 07:35:35 +00:00
view === "cards"
? "bg-[#003D5B] text-white dark:bg-[#00798C]"
: "text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white"
}`}
>
<Sparkles className="w-3.5 h-3.5" /> Cards
</button>
<button
onClick={() => setView("grid")}
Round 4: regressions fixed + mobile standard Part A — Round 3 regressions: - A.1: verify-cost-reconciliation.mjs now loads .env.local, wraps in try/catch, exits 1 on any failure - A.2: Vehicle Costs restored Santam — back to R 14,996.31 (matches row-by-row sum) - A.3: incl<excl / VAT math / VAT>20% now FATAL — seed exits 2 with full report (4 anomalies on Charl-CCS + Buildsmart) - A.4: Reconciliation target R 694,962.93 with both deltas itemised (Personnel +R19,800, Santam -R5,322.44, unexplained R 0.00) - A.5: 'Lines' view uses actual lines (recharts LineChart), no fills; fills only in 'Cost stack' Part B — Mobile standard: - B.1: header wraps to 2 rows on mobile; YTD badge cards stack; page-wide overflow eliminated on /income, /charts, /overheads, /running, /expenses - B.2: IncomeView card row layout stacked — name gets its own line on mobile, never truncated to single char - B.3: Plant type filter is a <select> dropdown below lg (was 18 pills wrapping to 13 rows); same for sort on /income and /running - B.4: Plant table first column sticky; -webkit-overflow-scrolling: touch; tables scroll inside their own container - B.5: All buttons/links use min-h-[44px] tap targets; text below 12px is bumped where it matters - B.6: Charts legend wraps below title; chart min-height h-44 → h-52 on mobile - B.7: paddingTop env(safe-area-inset-top) on sticky header for notch/home indicator clearance AGENTS.md created with the standing mobile checklist rule.
2026-09-12 10:05:43 +00:00
aria-label="Grid view"
className={`min-h-[44px] px-3 text-xs font-medium rounded-md transition flex items-center gap-1.5 ${
Mega Plant dashboard — fix & harden (Parts 0-5)
2026-09-12 07:35:35 +00:00
view === "grid"
? "bg-[#003D5B] text-white dark:bg-[#00798C]"
: "text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white"
}`}
>
<LayoutGrid className="w-3.5 h-3.5" /> Grid
</button>
</div>
Round 4: regressions fixed + mobile standard Part A — Round 3 regressions: - A.1: verify-cost-reconciliation.mjs now loads .env.local, wraps in try/catch, exits 1 on any failure - A.2: Vehicle Costs restored Santam — back to R 14,996.31 (matches row-by-row sum) - A.3: incl<excl / VAT math / VAT>20% now FATAL — seed exits 2 with full report (4 anomalies on Charl-CCS + Buildsmart) - A.4: Reconciliation target R 694,962.93 with both deltas itemised (Personnel +R19,800, Santam -R5,322.44, unexplained R 0.00) - A.5: 'Lines' view uses actual lines (recharts LineChart), no fills; fills only in 'Cost stack' Part B — Mobile standard: - B.1: header wraps to 2 rows on mobile; YTD badge cards stack; page-wide overflow eliminated on /income, /charts, /overheads, /running, /expenses - B.2: IncomeView card row layout stacked — name gets its own line on mobile, never truncated to single char - B.3: Plant type filter is a <select> dropdown below lg (was 18 pills wrapping to 13 rows); same for sort on /income and /running - B.4: Plant table first column sticky; -webkit-overflow-scrolling: touch; tables scroll inside their own container - B.5: All buttons/links use min-h-[44px] tap targets; text below 12px is bumped where it matters - B.6: Charts legend wraps below title; chart min-height h-44 → h-52 on mobile - B.7: paddingTop env(safe-area-inset-top) on sticky header for notch/home indicator clearance AGENTS.md created with the standing mobile checklist rule.
2026-09-12 10:05:43 +00:00
<div className="hidden sm:flex items-center gap-1">
Fix: the mobile table was mislabelled and clipping its own totals A screenshot at phone width showed an "INVOICE | LINES | TOTAL | STATUS" header row while the data under LINES was money. The header and its data cell had drifted apart: the earlier pass hid the Lines <td> but not the matching <th>, because the loop that added the hide classes only matched text-left headers and Lines is text-right. So the Total values rendered under a heading that named a column which no longer existed. The same screenshot showed the totals clipped — "41,710.50" reading as "710,50". With only three columns left, the 520px min-width was still forcing a sideways scroll, and the opaque sticky first column then sat on top of the left of the money values. The mobile floor is gone, so the three remaining columns size to their content, and the sticky and status gutters are trimmed at mobile widths to let them fit 375px. Below sm the table is now exactly Invoice, Total, Status — and every header matches a visible cell. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-10-02 13:34:19 +00:00
<span className="text-xs text-gray-400 dark:text-text-soft mr-1">Sort:</span>
Mega Plant dashboard — fix & harden (Parts 0-5)
2026-09-12 07:35:35 +00:00
{[
{ id: "profit", label: "Profit" },
{ id: "income", label: "Income" },
].map((s) => (
<button
key={s.id}
onClick={() => setSort(s.id as typeof sort)}
Round 4: regressions fixed + mobile standard Part A — Round 3 regressions: - A.1: verify-cost-reconciliation.mjs now loads .env.local, wraps in try/catch, exits 1 on any failure - A.2: Vehicle Costs restored Santam — back to R 14,996.31 (matches row-by-row sum) - A.3: incl<excl / VAT math / VAT>20% now FATAL — seed exits 2 with full report (4 anomalies on Charl-CCS + Buildsmart) - A.4: Reconciliation target R 694,962.93 with both deltas itemised (Personnel +R19,800, Santam -R5,322.44, unexplained R 0.00) - A.5: 'Lines' view uses actual lines (recharts LineChart), no fills; fills only in 'Cost stack' Part B — Mobile standard: - B.1: header wraps to 2 rows on mobile; YTD badge cards stack; page-wide overflow eliminated on /income, /charts, /overheads, /running, /expenses - B.2: IncomeView card row layout stacked — name gets its own line on mobile, never truncated to single char - B.3: Plant type filter is a <select> dropdown below lg (was 18 pills wrapping to 13 rows); same for sort on /income and /running - B.4: Plant table first column sticky; -webkit-overflow-scrolling: touch; tables scroll inside their own container - B.5: All buttons/links use min-h-[44px] tap targets; text below 12px is bumped where it matters - B.6: Charts legend wraps below title; chart min-height h-44 → h-52 on mobile - B.7: paddingTop env(safe-area-inset-top) on sticky header for notch/home indicator clearance AGENTS.md created with the standing mobile checklist rule.
2026-09-12 10:05:43 +00:00
className={`min-h-[44px] px-2 text-xs font-medium rounded transition ${
Mega Plant dashboard — fix & harden (Parts 0-5)
2026-09-12 07:35:35 +00:00
sort === s.id ? "bg-[#EDAE49] text-white" : "text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-white/5"
}`}
>
{s.label}
</button>
))}
</div>
Income: hide stood-down machines, with an active/inactive filter The field is `assets.is_active`. All 7 inactive machines have no income at all — the three generators, two porta camps, AEB Plant Versekering and the Diesel Truck — so on the income list they were a flat row of zeros and nothing else, reading as "idle" when they are actually out of the fleet. They are now hidden by default. The rows are not dropped from the data: the filter lives in the view, so Active / All / Inactive is a client-side toggle with no refetch, and each shows its count so a filter that silently hides rows is obvious. A machine hidden by the filter also collapses if it was expanded. The YTD income and profit tiles moved into the view so they sum only what is visible — otherwise the headline would report the whole fleet while the list below it showed a subset. /charts is unchanged: it passes no filter and still sees everything. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-10-03 16:40:32 +00:00
{/* Status filter. Stands down machines are hidden by default; this is the only
way to see them, so the count is stated rather than leaving a silent gap. */}
<div className="flex items-center gap-1 p-0.5 rounded-lg bg-white dark:bg-white/5 border border-gray-200 dark:border-white/5">
{([
{ id: "active", label: "Active", n: activeN },
{ id: "all", label: "All", n: rows.length },
{ id: "inactive", label: "Inactive", n: inactiveN },
] as const).map((o) => (
<button
key={o.id}
onClick={() => setStatus(o.id)}
aria-pressed={status === o.id}
className={`min-h-[44px] px-3 rounded-md text-xs font-medium transition ${
status === o.id
? o.id === "inactive"
? "bg-[#D1495B] text-white"
: "bg-[#003D5B] text-white dark:bg-[#00798C]"
: "text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-white/5"
}`}
>
{o.label} <span className="opacity-60">({o.n})</span>
</button>
))}
</div>
Round 4: regressions fixed + mobile standard Part A — Round 3 regressions: - A.1: verify-cost-reconciliation.mjs now loads .env.local, wraps in try/catch, exits 1 on any failure - A.2: Vehicle Costs restored Santam — back to R 14,996.31 (matches row-by-row sum) - A.3: incl<excl / VAT math / VAT>20% now FATAL — seed exits 2 with full report (4 anomalies on Charl-CCS + Buildsmart) - A.4: Reconciliation target R 694,962.93 with both deltas itemised (Personnel +R19,800, Santam -R5,322.44, unexplained R 0.00) - A.5: 'Lines' view uses actual lines (recharts LineChart), no fills; fills only in 'Cost stack' Part B — Mobile standard: - B.1: header wraps to 2 rows on mobile; YTD badge cards stack; page-wide overflow eliminated on /income, /charts, /overheads, /running, /expenses - B.2: IncomeView card row layout stacked — name gets its own line on mobile, never truncated to single char - B.3: Plant type filter is a <select> dropdown below lg (was 18 pills wrapping to 13 rows); same for sort on /income and /running - B.4: Plant table first column sticky; -webkit-overflow-scrolling: touch; tables scroll inside their own container - B.5: All buttons/links use min-h-[44px] tap targets; text below 12px is bumped where it matters - B.6: Charts legend wraps below title; chart min-height h-44 → h-52 on mobile - B.7: paddingTop env(safe-area-inset-top) on sticky header for notch/home indicator clearance AGENTS.md created with the standing mobile checklist rule.
2026-09-12 10:05:43 +00:00
{/* Part B.3: mobile sort dropdown */}
<div className="sm:hidden">
<label className="sr-only" htmlFor="income-sort">Sort by</label>
<select
id="income-sort"
value={sort}
onChange={(e) => setSort(e.target.value as typeof sort)}
className="min-h-[44px] px-3 text-xs rounded-lg border border-gray-200 dark:border-white/10 bg-white dark:bg-white/5"
>
<option value="profit">Sort by Profit</option>
<option value="income">Sort by Income</option>
</select>
</div>
Mega Plant dashboard — fix & harden (Parts 0-5)
2026-09-12 07:35:35 +00:00
</div>
</div>
{view === "cards" ? (
<CardsView
rows={sorted}
expanded={expanded}
setExpanded={setExpanded}
palette={palette}
/>
) : (
<GridView rows={sorted} />
)}
</>
);
}
function CardsView({
rows, expanded, setExpanded, palette,
}: {
rows: IncomeRow[];
expanded: string | null;
setExpanded: (id: string | null) => void;
palette: { income: string; profit: string; loss: string };
}) {
return (
<div className="space-y-2">
{rows.map((r) => {
const isOpen = expanded === r.id;
const positive = r.ytdProfit >= 0;
return (
<div
key={r.id}
Fix: the mobile table was mislabelled and clipping its own totals A screenshot at phone width showed an "INVOICE | LINES | TOTAL | STATUS" header row while the data under LINES was money. The header and its data cell had drifted apart: the earlier pass hid the Lines <td> but not the matching <th>, because the loop that added the hide classes only matched text-left headers and Lines is text-right. So the Total values rendered under a heading that named a column which no longer existed. The same screenshot showed the totals clipped — "41,710.50" reading as "710,50". With only three columns left, the 520px min-width was still forcing a sideways scroll, and the opaque sticky first column then sat on top of the left of the money values. The mobile floor is gone, so the three remaining columns size to their content, and the sticky and status gutters are trimmed at mobile widths to let them fit 375px. Below sm the table is now exactly Invoice, Total, Status — and every header matches a visible cell. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-10-02 13:34:19 +00:00
className="bg-white dark:bg-surface border border-gray-100 dark:border-border rounded-xl overflow-hidden shadow-sm hover:shadow-md transition"
Mega Plant dashboard — fix & harden (Parts 0-5)
2026-09-12 07:35:35 +00:00
>
<button
onClick={() => setExpanded(isOpen ? null : r.id)}
Round 4: regressions fixed + mobile standard Part A — Round 3 regressions: - A.1: verify-cost-reconciliation.mjs now loads .env.local, wraps in try/catch, exits 1 on any failure - A.2: Vehicle Costs restored Santam — back to R 14,996.31 (matches row-by-row sum) - A.3: incl<excl / VAT math / VAT>20% now FATAL — seed exits 2 with full report (4 anomalies on Charl-CCS + Buildsmart) - A.4: Reconciliation target R 694,962.93 with both deltas itemised (Personnel +R19,800, Santam -R5,322.44, unexplained R 0.00) - A.5: 'Lines' view uses actual lines (recharts LineChart), no fills; fills only in 'Cost stack' Part B — Mobile standard: - B.1: header wraps to 2 rows on mobile; YTD badge cards stack; page-wide overflow eliminated on /income, /charts, /overheads, /running, /expenses - B.2: IncomeView card row layout stacked — name gets its own line on mobile, never truncated to single char - B.3: Plant type filter is a <select> dropdown below lg (was 18 pills wrapping to 13 rows); same for sort on /income and /running - B.4: Plant table first column sticky; -webkit-overflow-scrolling: touch; tables scroll inside their own container - B.5: All buttons/links use min-h-[44px] tap targets; text below 12px is bumped where it matters - B.6: Charts legend wraps below title; chart min-height h-44 → h-52 on mobile - B.7: paddingTop env(safe-area-inset-top) on sticky header for notch/home indicator clearance AGENTS.md created with the standing mobile checklist rule.
2026-09-12 10:05:43 +00:00
className="w-full text-left p-4"
Mega Plant dashboard — fix & harden (Parts 0-5)
2026-09-12 07:35:35 +00:00
>
Round 4: regressions fixed + mobile standard Part A — Round 3 regressions: - A.1: verify-cost-reconciliation.mjs now loads .env.local, wraps in try/catch, exits 1 on any failure - A.2: Vehicle Costs restored Santam — back to R 14,996.31 (matches row-by-row sum) - A.3: incl<excl / VAT math / VAT>20% now FATAL — seed exits 2 with full report (4 anomalies on Charl-CCS + Buildsmart) - A.4: Reconciliation target R 694,962.93 with both deltas itemised (Personnel +R19,800, Santam -R5,322.44, unexplained R 0.00) - A.5: 'Lines' view uses actual lines (recharts LineChart), no fills; fills only in 'Cost stack' Part B — Mobile standard: - B.1: header wraps to 2 rows on mobile; YTD badge cards stack; page-wide overflow eliminated on /income, /charts, /overheads, /running, /expenses - B.2: IncomeView card row layout stacked — name gets its own line on mobile, never truncated to single char - B.3: Plant type filter is a <select> dropdown below lg (was 18 pills wrapping to 13 rows); same for sort on /income and /running - B.4: Plant table first column sticky; -webkit-overflow-scrolling: touch; tables scroll inside their own container - B.5: All buttons/links use min-h-[44px] tap targets; text below 12px is bumped where it matters - B.6: Charts legend wraps below title; chart min-height h-44 → h-52 on mobile - B.7: paddingTop env(safe-area-inset-top) on sticky header for notch/home indicator clearance AGENTS.md created with the standing mobile checklist rule.
2026-09-12 10:05:43 +00:00
{/* Row 1: code + name + sparkline + YTD + P/L pill + chevron */}
<div className="flex items-center gap-3 sm:gap-4 min-h-[44px]">
<span className="font-mono text-xs px-2 py-1 rounded-md bg-[#00798C]/10 text-[#00798C] font-semibold shrink-0">
{r.code}
</span>
{/* Round 4 Part B.2: name gets its own line on mobile, never truncated to a single char */}
<div className="flex-1 min-w-0">
<div className="flex items-center gap-2 text-sm font-medium text-[#003D5B] dark:text-white min-w-0">
{positive ? (
<TrendingUp className="w-3.5 h-3.5 text-[#00798C] shrink-0" />
) : (
<TrendingDown className="w-3.5 h-3.5 text-[#D1495B] shrink-0" />
)}
<span className="truncate">{r.name}</span>
</div>
</div>
<div className="hidden sm:block shrink-0">
<Sparkline data={r.months} color={palette.income} />
</div>
<div className="text-right shrink-0 w-32 hidden md:block">
Fix: the mobile table was mislabelled and clipping its own totals A screenshot at phone width showed an "INVOICE | LINES | TOTAL | STATUS" header row while the data under LINES was money. The header and its data cell had drifted apart: the earlier pass hid the Lines <td> but not the matching <th>, because the loop that added the hide classes only matched text-left headers and Lines is text-right. So the Total values rendered under a heading that named a column which no longer existed. The same screenshot showed the totals clipped — "41,710.50" reading as "710,50". With only three columns left, the 520px min-width was still forcing a sideways scroll, and the opaque sticky first column then sat on top of the left of the money values. The mobile floor is gone, so the three remaining columns size to their content, and the sticky and status gutters are trimmed at mobile widths to let them fit 375px. Below sm the table is now exactly Invoice, Total, Status — and every header matches a visible cell. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-10-02 13:34:19 +00:00
<div className="text-xs text-gray-400 dark:text-text-soft uppercase tracking-wider">YTD income</div>
Round 4: regressions fixed + mobile standard Part A — Round 3 regressions: - A.1: verify-cost-reconciliation.mjs now loads .env.local, wraps in try/catch, exits 1 on any failure - A.2: Vehicle Costs restored Santam — back to R 14,996.31 (matches row-by-row sum) - A.3: incl<excl / VAT math / VAT>20% now FATAL — seed exits 2 with full report (4 anomalies on Charl-CCS + Buildsmart) - A.4: Reconciliation target R 694,962.93 with both deltas itemised (Personnel +R19,800, Santam -R5,322.44, unexplained R 0.00) - A.5: 'Lines' view uses actual lines (recharts LineChart), no fills; fills only in 'Cost stack' Part B — Mobile standard: - B.1: header wraps to 2 rows on mobile; YTD badge cards stack; page-wide overflow eliminated on /income, /charts, /overheads, /running, /expenses - B.2: IncomeView card row layout stacked — name gets its own line on mobile, never truncated to single char - B.3: Plant type filter is a <select> dropdown below lg (was 18 pills wrapping to 13 rows); same for sort on /income and /running - B.4: Plant table first column sticky; -webkit-overflow-scrolling: touch; tables scroll inside their own container - B.5: All buttons/links use min-h-[44px] tap targets; text below 12px is bumped where it matters - B.6: Charts legend wraps below title; chart min-height h-44 → h-52 on mobile - B.7: paddingTop env(safe-area-inset-top) on sticky header for notch/home indicator clearance AGENTS.md created with the standing mobile checklist rule.
2026-09-12 10:05:43 +00:00
<div className="text-sm font-semibold tabular-nums text-[#003D5B] dark:text-white">
{ZAR2(r.income)}
</div>
</div>
<div
className={`shrink-0 hidden md:flex items-center gap-1 px-2.5 py-1.5 rounded-lg text-xs font-semibold ${
positive
? "bg-[#00798C]/10 text-[#00798C] dark:bg-[#00798C]/20"
: "bg-[#D1495B]/10 text-[#D1495B] dark:bg-[#D1495B]/20"
}`}
>
{positive ? "+" : ""}{ZAR(r.ytdProfit)}
Mega Plant dashboard — fix & harden (Parts 0-5)
2026-09-12 07:35:35 +00:00
</div>
Round 4: regressions fixed + mobile standard Part A — Round 3 regressions: - A.1: verify-cost-reconciliation.mjs now loads .env.local, wraps in try/catch, exits 1 on any failure - A.2: Vehicle Costs restored Santam — back to R 14,996.31 (matches row-by-row sum) - A.3: incl<excl / VAT math / VAT>20% now FATAL — seed exits 2 with full report (4 anomalies on Charl-CCS + Buildsmart) - A.4: Reconciliation target R 694,962.93 with both deltas itemised (Personnel +R19,800, Santam -R5,322.44, unexplained R 0.00) - A.5: 'Lines' view uses actual lines (recharts LineChart), no fills; fills only in 'Cost stack' Part B — Mobile standard: - B.1: header wraps to 2 rows on mobile; YTD badge cards stack; page-wide overflow eliminated on /income, /charts, /overheads, /running, /expenses - B.2: IncomeView card row layout stacked — name gets its own line on mobile, never truncated to single char - B.3: Plant type filter is a <select> dropdown below lg (was 18 pills wrapping to 13 rows); same for sort on /income and /running - B.4: Plant table first column sticky; -webkit-overflow-scrolling: touch; tables scroll inside their own container - B.5: All buttons/links use min-h-[44px] tap targets; text below 12px is bumped where it matters - B.6: Charts legend wraps below title; chart min-height h-44 → h-52 on mobile - B.7: paddingTop env(safe-area-inset-top) on sticky header for notch/home indicator clearance AGENTS.md created with the standing mobile checklist rule.
2026-09-12 10:05:43 +00:00
<ChevronRight
className={`w-4 h-4 text-gray-400 shrink-0 transition-transform ${isOpen ? "rotate-90" : ""}`}
/>
Mega Plant dashboard — fix & harden (Parts 0-5)
2026-09-12 07:35:35 +00:00
</div>
Round 4: regressions fixed + mobile standard Part A — Round 3 regressions: - A.1: verify-cost-reconciliation.mjs now loads .env.local, wraps in try/catch, exits 1 on any failure - A.2: Vehicle Costs restored Santam — back to R 14,996.31 (matches row-by-row sum) - A.3: incl<excl / VAT math / VAT>20% now FATAL — seed exits 2 with full report (4 anomalies on Charl-CCS + Buildsmart) - A.4: Reconciliation target R 694,962.93 with both deltas itemised (Personnel +R19,800, Santam -R5,322.44, unexplained R 0.00) - A.5: 'Lines' view uses actual lines (recharts LineChart), no fills; fills only in 'Cost stack' Part B — Mobile standard: - B.1: header wraps to 2 rows on mobile; YTD badge cards stack; page-wide overflow eliminated on /income, /charts, /overheads, /running, /expenses - B.2: IncomeView card row layout stacked — name gets its own line on mobile, never truncated to single char - B.3: Plant type filter is a <select> dropdown below lg (was 18 pills wrapping to 13 rows); same for sort on /income and /running - B.4: Plant table first column sticky; -webkit-overflow-scrolling: touch; tables scroll inside their own container - B.5: All buttons/links use min-h-[44px] tap targets; text below 12px is bumped where it matters - B.6: Charts legend wraps below title; chart min-height h-44 → h-52 on mobile - B.7: paddingTop env(safe-area-inset-top) on sticky header for notch/home indicator clearance AGENTS.md created with the standing mobile checklist rule.
2026-09-12 10:05:43 +00:00
{/* Row 2 (mobile only): sparkline + YTD + P/L pill */}
<div className="flex sm:hidden items-center justify-between gap-3 pt-2 text-xs">
Mobile: the top tiles overflowed on /income, hugged text on /sites, and repeated on invoices Three separate layout faults in the header rows, all reported from a phone. /income scrolled sideways by 158px. Three causes stacked, none of them responsive: the wrapper was p-8 (32px each side at 375px), the header row was `flex items-end justify-between` with no breakpoint, and the KPI row was `flex items-center gap-3` with no wrap, so the two tiles physically could not stack. Measured: main sat at x=36 w=339 at 375px, and the YTD Profit tile began at x=355 in a 375px viewport — about 20px of its 178px was on screen. - Wrapper is p-4 sm:p-8, and the header row stacks until lg, not sm. This one matters: at 768px a side-by-side row leaves the tile grid only 317px of the 704px available (the title block takes 371px), so two columns of 152px are too narrow for text-2xl money and the figures spilled out over their own tiles. Note the DOM check said pageHScroll:false at 768 — the page did not report overflow even though the text was visibly broken, and only the screenshot caught it. The tiles may not go 2-up until the title is above them. - The KPI row is grid grid-cols-1 sm:grid-cols-2, so the two tiles fill the row instead of being sized by their content. The machine card's P/L pill hung 32px outside its card (pill ended at x=374, the card at x=342), jammed against the viewport edge. IncomeView's mobile row 2 is sparkline + YTD + pill, and both ends are shrink-0 with nothing allowed to give: Sparkline's root is a fixed 120px box and the pill is shrink-0. /sites already passed width={72} for exactly this reason (see the note in Sparkline.tsx); /income never did. It does now, with min-w-0 on the YTD block. The pill now sits 16px inside the card. /sites was not broken — it never overflowed — it just looked wrong. `flex flex-wrap items-stretch` wraps, so nothing broke, but flex-wrap sizes tiles by CONTENT: "Revenue (ex VAT)" measured 197px inside a 343px row and the second tile wrapped to a line narrower still, both left-aligned, leaving a ragged edge and dead space. That is the same anti-pattern AGENTS.md already records as fixed on /income/invoices, never carried over here. It is a grid now. /income/invoices showed "Booked to income" and "Billed (incl VAT)" as two tiles with the same figure, which read as a duplicate. Not a bug: one sums booked lines, the other sums every invoice header, and all 10 invoices are currently fully booked (0 unbooked, problem inbox empty), so they are legitimately equal. They separate the moment a line is left unbooked — which is the whole point of the screen. Merged into one tile that says what the pair actually means, "R 780 003,61 of R 780 003,61 billed", with the VAT breakdown kept underneath because AGENTS.md requires VAT to stay visible. The gradient moved onto the merged tile so the money figure keeps its emphasis. Verified in the browser at 375, 768 and 1280: no page overflow, no element past the viewport edge outside the table's own scroller, nothing clipped inside the merged tile, and both desktop layouts unchanged. Typecheck and build green.
2026-10-03 14:45:23 +00:00
{/* 72/28, not the 120/36 default: Sparkline's root is a fixed-width
shrink-0 box, and the pill beside it is shrink-0 too, so with
nothing allowed to give the pill was pushed ~32px outside the
card and sat on the viewport edge. /sites already passes 72 here
for exactly this reason. */}
<Sparkline data={r.months} color={palette.income} width={72} height={28} />
<div className="text-right min-w-0">
Fix: the mobile table was mislabelled and clipping its own totals A screenshot at phone width showed an "INVOICE | LINES | TOTAL | STATUS" header row while the data under LINES was money. The header and its data cell had drifted apart: the earlier pass hid the Lines <td> but not the matching <th>, because the loop that added the hide classes only matched text-left headers and Lines is text-right. So the Total values rendered under a heading that named a column which no longer existed. The same screenshot showed the totals clipped — "41,710.50" reading as "710,50". With only three columns left, the 520px min-width was still forcing a sideways scroll, and the opaque sticky first column then sat on top of the left of the money values. The mobile floor is gone, so the three remaining columns size to their content, and the sticky and status gutters are trimmed at mobile widths to let them fit 375px. Below sm the table is now exactly Invoice, Total, Status — and every header matches a visible cell. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-10-02 13:34:19 +00:00
<div className="text-xs text-gray-400 dark:text-text-soft uppercase tracking-wider">YTD income</div>
Round 4: regressions fixed + mobile standard Part A — Round 3 regressions: - A.1: verify-cost-reconciliation.mjs now loads .env.local, wraps in try/catch, exits 1 on any failure - A.2: Vehicle Costs restored Santam — back to R 14,996.31 (matches row-by-row sum) - A.3: incl<excl / VAT math / VAT>20% now FATAL — seed exits 2 with full report (4 anomalies on Charl-CCS + Buildsmart) - A.4: Reconciliation target R 694,962.93 with both deltas itemised (Personnel +R19,800, Santam -R5,322.44, unexplained R 0.00) - A.5: 'Lines' view uses actual lines (recharts LineChart), no fills; fills only in 'Cost stack' Part B — Mobile standard: - B.1: header wraps to 2 rows on mobile; YTD badge cards stack; page-wide overflow eliminated on /income, /charts, /overheads, /running, /expenses - B.2: IncomeView card row layout stacked — name gets its own line on mobile, never truncated to single char - B.3: Plant type filter is a <select> dropdown below lg (was 18 pills wrapping to 13 rows); same for sort on /income and /running - B.4: Plant table first column sticky; -webkit-overflow-scrolling: touch; tables scroll inside their own container - B.5: All buttons/links use min-h-[44px] tap targets; text below 12px is bumped where it matters - B.6: Charts legend wraps below title; chart min-height h-44 → h-52 on mobile - B.7: paddingTop env(safe-area-inset-top) on sticky header for notch/home indicator clearance AGENTS.md created with the standing mobile checklist rule.
2026-09-12 10:05:43 +00:00
<div className="text-sm font-semibold tabular-nums text-[#003D5B] dark:text-white">{ZAR2(r.income)}</div>
</div>
<div
className={`shrink-0 flex items-center gap-1 px-2.5 py-1.5 rounded-lg text-xs font-semibold ${
positive
? "bg-[#00798C]/10 text-[#00798C] dark:bg-[#00798C]/20"
: "bg-[#D1495B]/10 text-[#D1495B] dark:bg-[#D1495B]/20"
}`}
>
{positive ? "+" : ""}{ZAR(r.ytdProfit)}
Mega Plant dashboard — fix & harden (Parts 0-5)
2026-09-12 07:35:35 +00:00
</div>
</div>
</button>
{isOpen && (
Fix: the mobile table was mislabelled and clipping its own totals A screenshot at phone width showed an "INVOICE | LINES | TOTAL | STATUS" header row while the data under LINES was money. The header and its data cell had drifted apart: the earlier pass hid the Lines <td> but not the matching <th>, because the loop that added the hide classes only matched text-left headers and Lines is text-right. So the Total values rendered under a heading that named a column which no longer existed. The same screenshot showed the totals clipped — "41,710.50" reading as "710,50". With only three columns left, the 520px min-width was still forcing a sideways scroll, and the opaque sticky first column then sat on top of the left of the money values. The mobile floor is gone, so the three remaining columns size to their content, and the sticky and status gutters are trimmed at mobile widths to let them fit 375px. Below sm the table is now exactly Invoice, Total, Status — and every header matches a visible cell. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-10-02 13:34:19 +00:00
<div className="border-t border-gray-100 dark:border-border px-4 py-4 bg-gray-50/50 dark:bg-white/[0.04]">
Mega Plant dashboard — fix & harden (Parts 0-5)
2026-09-12 07:35:35 +00:00
{/* 12-col on md+, 3-col on mobile — Part 3: unreadable at 375px otherwise */}
Mobile: make the invoice tables readable at 375px Audited the invoice UI against the Round 4 checklist and fixed four things. The summary table carried eight columns at a fixed 820px min-width, which at 375px is a long sideways scroll through three figures before reaching the status badge — the one thing that needs acting on. Below sm it now keeps only Invoice, Site, Total and Status, and drops to a 520px min-width, so the useful columns are readable without scrolling. Period, line count and the ex-VAT/VAT split are one tap away in the expanded detail, and the full eight columns return from sm up where there is room. The summary table also had no right-edge fade. Rule 4 asks for a visible affordance on any wide table and it was simply missing, so scrolling sideways looked like the table ended. Same for the month grid on /income, which was also missing -webkit-overflow-scrolling. Both now share components/ScrollFade. Two 10px labels in the app header ("Overheads 2026", "FY") were invisible at 375px but visible from 640/768px — and 768x1024 is one of the two sizes the checklist tests, so they were a rule-2 violation at tablet width. Bumped to 12px. PlantRegisterTable's 10px filter count was checked and left alone: it sits inside hidden lg:flex, so it never renders on mobile. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-10-02 13:29:00 +00:00
<div className="grid grid-cols-3 md:grid-cols-6 lg:grid-cols-12 gap-2 text-xs">
Mega Plant dashboard — fix & harden (Parts 0-5)
2026-09-12 07:35:35 +00:00
{r.months.map((v, i) => (
<div key={i} className="text-center">
Fix: the mobile table was mislabelled and clipping its own totals A screenshot at phone width showed an "INVOICE | LINES | TOTAL | STATUS" header row while the data under LINES was money. The header and its data cell had drifted apart: the earlier pass hid the Lines <td> but not the matching <th>, because the loop that added the hide classes only matched text-left headers and Lines is text-right. So the Total values rendered under a heading that named a column which no longer existed. The same screenshot showed the totals clipped — "41,710.50" reading as "710,50". With only three columns left, the 520px min-width was still forcing a sideways scroll, and the opaque sticky first column then sat on top of the left of the money values. The mobile floor is gone, so the three remaining columns size to their content, and the sticky and status gutters are trimmed at mobile widths to let them fit 375px. Below sm the table is now exactly Invoice, Total, Status — and every header matches a visible cell. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-10-02 13:34:19 +00:00
<div className="text-gray-400 dark:text-text-soft text-xs mb-1">{MONTH_NAMES[i]}</div>
Invoices: line-item extraction, booking to plant items, VAT-inclusive income Adds an Invoices sub-menu under /income with a summary table (one row per invoice, click to expand the full detail) and the data model behind it. Data: - invoices + invoice_lines PocketBase collections, created idempotently by scripts/setup-invoice-collections.mjs - line items transcribed from PHI 166/167/171 with per-invoice arithmetic validation in the seed; a bad invoice is refused without blocking the rest - invoice-*.json in data/source are auto-imported, so adding an invoice is one file Booking: - manual book-in per line (Booked to), grouped by category - POST /api/invoice-lines/:id/book moves the income row rather than adding a second one, so a booking can be changed freely - scripts/book-invoice.mjs is idempotent: rows are stamped with monthly_income.invoice_line and replaced on re-run - booked amount follows lib/invoice-booking-policy.json (bookInclusiveVat), read by both the app and the CLI so they cannot disagree Money: - the R24,205.13 column on these invoices is PLUS VAT, not escalation. The seed now rejects VAT that disagrees with the stated rate. - booked amounts are VAT-inclusive per the client ruling of 2026-10-01; the VAT stays visible rather than hidden. Uploads: - drag-and-drop PDF attached to invoices.source_pdf - GET /api/invoices/:id/document proxies it — the collection is rule-locked, so a direct PocketBase /api/files link 404s in a browser Fixes a month-aggregation bug this introduced: buildIncomeRows assigned into months[i], so a machine with two income rows in one month (one per invoice, which is normal multi-site use) showed only the last. SS01 September read R20,700 instead of R35,305 while its own YTD included both. Months now accumulate, per-month profit is computed once after accumulation, and lib/rows.test.ts pins it. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-10-01 13:59:30 +00:00
<div
className={`py-1.5 rounded tabular-nums ${
(v ?? 0) > 0
? "bg-[#00798C]/5 text-[#00798C] dark:bg-[#00798C]/15"
Fix: the mobile table was mislabelled and clipping its own totals A screenshot at phone width showed an "INVOICE | LINES | TOTAL | STATUS" header row while the data under LINES was money. The header and its data cell had drifted apart: the earlier pass hid the Lines <td> but not the matching <th>, because the loop that added the hide classes only matched text-left headers and Lines is text-right. So the Total values rendered under a heading that named a column which no longer existed. The same screenshot showed the totals clipped — "41,710.50" reading as "710,50". With only three columns left, the 520px min-width was still forcing a sideways scroll, and the opaque sticky first column then sat on top of the left of the money values. The mobile floor is gone, so the three remaining columns size to their content, and the sticky and status gutters are trimmed at mobile widths to let them fit 375px. Below sm the table is now exactly Invoice, Total, Status — and every header matches a visible cell. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-10-02 13:34:19 +00:00
: "text-gray-300 dark:text-text-soft"
Invoices: line-item extraction, booking to plant items, VAT-inclusive income Adds an Invoices sub-menu under /income with a summary table (one row per invoice, click to expand the full detail) and the data model behind it. Data: - invoices + invoice_lines PocketBase collections, created idempotently by scripts/setup-invoice-collections.mjs - line items transcribed from PHI 166/167/171 with per-invoice arithmetic validation in the seed; a bad invoice is refused without blocking the rest - invoice-*.json in data/source are auto-imported, so adding an invoice is one file Booking: - manual book-in per line (Booked to), grouped by category - POST /api/invoice-lines/:id/book moves the income row rather than adding a second one, so a booking can be changed freely - scripts/book-invoice.mjs is idempotent: rows are stamped with monthly_income.invoice_line and replaced on re-run - booked amount follows lib/invoice-booking-policy.json (bookInclusiveVat), read by both the app and the CLI so they cannot disagree Money: - the R24,205.13 column on these invoices is PLUS VAT, not escalation. The seed now rejects VAT that disagrees with the stated rate. - booked amounts are VAT-inclusive per the client ruling of 2026-10-01; the VAT stays visible rather than hidden. Uploads: - drag-and-drop PDF attached to invoices.source_pdf - GET /api/invoices/:id/document proxies it — the collection is rule-locked, so a direct PocketBase /api/files link 404s in a browser Fixes a month-aggregation bug this introduced: buildIncomeRows assigned into months[i], so a machine with two income rows in one month (one per invoice, which is normal multi-site use) showed only the last. SS01 September read R20,700 instead of R35,305 while its own YTD included both. Months now accumulate, per-month profit is computed once after accumulation, and lib/rows.test.ts pins it. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-10-01 13:59:30 +00:00
}`}
>
Round 3 (Parts A-B): charts fixes + expenses/overheads cleanup - A.1: fixed_expenses per month now threaded through to chart bucket - A.2: null = no data (forecast), 0 = real plotted zero — distinguishable - A.3: x-axis clipped to last actual month (IncomeAreaChart + IncomeBarChart + MachineLineChart) - A.4: chart hues as CSS vars (--color-chart-income/fixed/running) — deeper steps of same hues, validated for CVD - A.5: chart-type toggle (Lines / Cost stack / Profit) + localStorage persistence + dynamic legend - A.6: profit on charts page comes from computeProfit() - B.1: deleted /expenses/plant-overheads, /expenses/insurance, /expenses/tracking (all empty); added /expenses/vehicles; ExpenseSectionPage now has an empty state - B.2: captured R 157,200 Personnel block, R 100,000 Maintenance, R 10,000 Petty Cash; roll-up reconciles to R 675,162.93 (= sum of non-Plant non-Santam rows; workbook grand total R 1,110,486.87 is internally off by R 14,477.56 vs its own rows) - B.3: seed flags incl<excl, VAT>20%, broken VAT math — does NOT silently correct; 4 anomalies reported on Charl-CCS + Buildsmart - B.4: noted that workbook Vehicle Costs subtotal skips Santam (app R 9,673.87 is correct; workbook is wrong) - B.2 reconciliation assertion added to verify-cost-reconciliation.mjs - Sidebar updated: Vehicles added, Insurance/Tracking/Plant-Overheads removed
2026-09-12 09:24:18 +00:00
{v == null ? "—" : (v > 0 ? ZAR2(v) : "R 0")}
Mega Plant dashboard — fix & harden (Parts 0-5)
2026-09-12 07:35:35 +00:00
</div>
</div>
))}
</div>
Fix: the mobile table was mislabelled and clipping its own totals A screenshot at phone width showed an "INVOICE | LINES | TOTAL | STATUS" header row while the data under LINES was money. The header and its data cell had drifted apart: the earlier pass hid the Lines <td> but not the matching <th>, because the loop that added the hide classes only matched text-left headers and Lines is text-right. So the Total values rendered under a heading that named a column which no longer existed. The same screenshot showed the totals clipped — "41,710.50" reading as "710,50". With only three columns left, the 520px min-width was still forcing a sideways scroll, and the opaque sticky first column then sat on top of the left of the money values. The mobile floor is gone, so the three remaining columns size to their content, and the sticky and status gutters are trimmed at mobile widths to let them fit 375px. Below sm the table is now exactly Invoice, Total, Status — and every header matches a visible cell. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-10-02 13:34:19 +00:00
<div className="grid grid-cols-3 gap-4 mt-4 pt-3 border-t border-gray-100 dark:border-border text-xs">
Mega Plant dashboard — fix & harden (Parts 0-5)
2026-09-12 07:35:35 +00:00
<div>
Mobile: make the invoice tables readable at 375px Audited the invoice UI against the Round 4 checklist and fixed four things. The summary table carried eight columns at a fixed 820px min-width, which at 375px is a long sideways scroll through three figures before reaching the status badge — the one thing that needs acting on. Below sm it now keeps only Invoice, Site, Total and Status, and drops to a 520px min-width, so the useful columns are readable without scrolling. Period, line count and the ex-VAT/VAT split are one tap away in the expanded detail, and the full eight columns return from sm up where there is room. The summary table also had no right-edge fade. Rule 4 asks for a visible affordance on any wide table and it was simply missing, so scrolling sideways looked like the table ended. Same for the month grid on /income, which was also missing -webkit-overflow-scrolling. Both now share components/ScrollFade. Two 10px labels in the app header ("Overheads 2026", "FY") were invisible at 375px but visible from 640/768px — and 768x1024 is one of the two sizes the checklist tests, so they were a rule-2 violation at tablet width. Bumped to 12px. PlantRegisterTable's 10px filter count was checked and left alone: it sits inside hidden lg:flex, so it never renders on mobile. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-10-02 13:29:00 +00:00
<div className="text-gray-400 uppercase tracking-wider text-xs">YTD income</div>
Mega Plant dashboard — fix & harden (Parts 0-5)
2026-09-12 07:35:35 +00:00
<div className="font-semibold tabular-nums text-[#003D5B] dark:text-white">{ZAR(r.income)}</div>
</div>
<div>
Mobile: make the invoice tables readable at 375px Audited the invoice UI against the Round 4 checklist and fixed four things. The summary table carried eight columns at a fixed 820px min-width, which at 375px is a long sideways scroll through three figures before reaching the status badge — the one thing that needs acting on. Below sm it now keeps only Invoice, Site, Total and Status, and drops to a 520px min-width, so the useful columns are readable without scrolling. Period, line count and the ex-VAT/VAT split are one tap away in the expanded detail, and the full eight columns return from sm up where there is room. The summary table also had no right-edge fade. Rule 4 asks for a visible affordance on any wide table and it was simply missing, so scrolling sideways looked like the table ended. Same for the month grid on /income, which was also missing -webkit-overflow-scrolling. Both now share components/ScrollFade. Two 10px labels in the app header ("Overheads 2026", "FY") were invisible at 375px but visible from 640/768px — and 768x1024 is one of the two sizes the checklist tests, so they were a rule-2 violation at tablet width. Bumped to 12px. PlantRegisterTable's 10px filter count was checked and left alone: it sits inside hidden lg:flex, so it never renders on mobile. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-10-02 13:29:00 +00:00
<div className="text-gray-400 uppercase tracking-wider text-xs">Fixed + running</div>
Mega Plant dashboard — fix & harden (Parts 0-5)
2026-09-12 07:35:35 +00:00
<div className="font-semibold tabular-nums text-[#003D5B] dark:text-white">
{ZAR(r.fixed + r.running)}
</div>
</div>
<div>
Mobile: make the invoice tables readable at 375px Audited the invoice UI against the Round 4 checklist and fixed four things. The summary table carried eight columns at a fixed 820px min-width, which at 375px is a long sideways scroll through three figures before reaching the status badge — the one thing that needs acting on. Below sm it now keeps only Invoice, Site, Total and Status, and drops to a 520px min-width, so the useful columns are readable without scrolling. Period, line count and the ex-VAT/VAT split are one tap away in the expanded detail, and the full eight columns return from sm up where there is room. The summary table also had no right-edge fade. Rule 4 asks for a visible affordance on any wide table and it was simply missing, so scrolling sideways looked like the table ended. Same for the month grid on /income, which was also missing -webkit-overflow-scrolling. Both now share components/ScrollFade. Two 10px labels in the app header ("Overheads 2026", "FY") were invisible at 375px but visible from 640/768px — and 768x1024 is one of the two sizes the checklist tests, so they were a rule-2 violation at tablet width. Bumped to 12px. PlantRegisterTable's 10px filter count was checked and left alone: it sits inside hidden lg:flex, so it never renders on mobile. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-10-02 13:29:00 +00:00
<div className="text-gray-400 uppercase tracking-wider text-xs">Profit</div>
Mega Plant dashboard — fix & harden (Parts 0-5)
2026-09-12 07:35:35 +00:00
<div className={`font-semibold tabular-nums ${positive ? "text-[#00798C]" : "text-[#D1495B]"}`}>
{positive ? "+" : ""}{ZAR(r.ytdProfit)}
</div>
</div>
Invoices: line-item extraction, booking to plant items, VAT-inclusive income Adds an Invoices sub-menu under /income with a summary table (one row per invoice, click to expand the full detail) and the data model behind it. Data: - invoices + invoice_lines PocketBase collections, created idempotently by scripts/setup-invoice-collections.mjs - line items transcribed from PHI 166/167/171 with per-invoice arithmetic validation in the seed; a bad invoice is refused without blocking the rest - invoice-*.json in data/source are auto-imported, so adding an invoice is one file Booking: - manual book-in per line (Booked to), grouped by category - POST /api/invoice-lines/:id/book moves the income row rather than adding a second one, so a booking can be changed freely - scripts/book-invoice.mjs is idempotent: rows are stamped with monthly_income.invoice_line and replaced on re-run - booked amount follows lib/invoice-booking-policy.json (bookInclusiveVat), read by both the app and the CLI so they cannot disagree Money: - the R24,205.13 column on these invoices is PLUS VAT, not escalation. The seed now rejects VAT that disagrees with the stated rate. - booked amounts are VAT-inclusive per the client ruling of 2026-10-01; the VAT stays visible rather than hidden. Uploads: - drag-and-drop PDF attached to invoices.source_pdf - GET /api/invoices/:id/document proxies it — the collection is rule-locked, so a direct PocketBase /api/files link 404s in a browser Fixes a month-aggregation bug this introduced: buildIncomeRows assigned into months[i], so a machine with two income rows in one month (one per invoice, which is normal multi-site use) showed only the last. SS01 September read R20,700 instead of R35,305 while its own YTD included both. Months now accumulate, per-month profit is computed once after accumulation, and lib/rows.test.ts pins it. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-10-01 13:59:30 +00:00
</div>
Mega Plant dashboard — fix & harden (Parts 0-5)
2026-09-12 07:35:35 +00:00
</div>
)}
</div>
);
})}
</div>
);
}
function GridView({ rows }: { rows: IncomeRow[] }) {
return (
Fix: the mobile table was mislabelled and clipping its own totals A screenshot at phone width showed an "INVOICE | LINES | TOTAL | STATUS" header row while the data under LINES was money. The header and its data cell had drifted apart: the earlier pass hid the Lines <td> but not the matching <th>, because the loop that added the hide classes only matched text-left headers and Lines is text-right. So the Total values rendered under a heading that named a column which no longer existed. The same screenshot showed the totals clipped — "41,710.50" reading as "710,50". With only three columns left, the 520px min-width was still forcing a sideways scroll, and the opaque sticky first column then sat on top of the left of the money values. The mobile floor is gone, so the three remaining columns size to their content, and the sticky and status gutters are trimmed at mobile widths to let them fit 375px. Below sm the table is now exactly Invoice, Total, Status — and every header matches a visible cell. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-10-02 13:34:19 +00:00
<div className="relative bg-white dark:bg-surface rounded-2xl border border-gray-100 dark:border-border shadow-sm overflow-hidden">
Mobile: make the invoice tables readable at 375px Audited the invoice UI against the Round 4 checklist and fixed four things. The summary table carried eight columns at a fixed 820px min-width, which at 375px is a long sideways scroll through three figures before reaching the status badge — the one thing that needs acting on. Below sm it now keeps only Invoice, Site, Total and Status, and drops to a 520px min-width, so the useful columns are readable without scrolling. Period, line count and the ex-VAT/VAT split are one tap away in the expanded detail, and the full eight columns return from sm up where there is room. The summary table also had no right-edge fade. Rule 4 asks for a visible affordance on any wide table and it was simply missing, so scrolling sideways looked like the table ended. Same for the month grid on /income, which was also missing -webkit-overflow-scrolling. Both now share components/ScrollFade. Two 10px labels in the app header ("Overheads 2026", "FY") were invisible at 375px but visible from 640/768px — and 768x1024 is one of the two sizes the checklist tests, so they were a rule-2 violation at tablet width. Bumped to 12px. PlantRegisterTable's 10px filter count was checked and left alone: it sits inside hidden lg:flex, so it never renders on mobile. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-10-02 13:29:00 +00:00
<div className="overflow-x-auto" style={{ WebkitOverflowScrolling: "touch" }}>
<table className="w-full text-sm min-w-[720px]">
Mega Plant dashboard — fix & harden (Parts 0-5)
2026-09-12 07:35:35 +00:00
<thead>
Fix: the mobile table was mislabelled and clipping its own totals A screenshot at phone width showed an "INVOICE | LINES | TOTAL | STATUS" header row while the data under LINES was money. The header and its data cell had drifted apart: the earlier pass hid the Lines <td> but not the matching <th>, because the loop that added the hide classes only matched text-left headers and Lines is text-right. So the Total values rendered under a heading that named a column which no longer existed. The same screenshot showed the totals clipped — "41,710.50" reading as "710,50". With only three columns left, the 520px min-width was still forcing a sideways scroll, and the opaque sticky first column then sat on top of the left of the money values. The mobile floor is gone, so the three remaining columns size to their content, and the sticky and status gutters are trimmed at mobile widths to let them fit 375px. Below sm the table is now exactly Invoice, Total, Status — and every header matches a visible cell. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-10-02 13:34:19 +00:00
<tr className="text-xs text-gray-500 dark:text-gray-400 uppercase tracking-wider border-b border-gray-100 dark:border-border bg-gray-50/50 dark:bg-white/[0.04]">
<th className="text-left py-3 px-6 font-medium sticky left-0 bg-gray-50/95 dark:bg-surface-muted/95 backdrop-blur z-10">Code</th>
Mega Plant dashboard — fix & harden (Parts 0-5)
2026-09-12 07:35:35 +00:00
<th className="text-left py-3 px-3 font-medium">Machine</th>
{MONTH_NAMES.map((m) => (
<th key={m} className="text-right py-3 px-2 font-medium min-w-[78px]">{m}</th>
))}
<th className="text-right py-3 px-6 font-medium">YTD</th>
</tr>
</thead>
<tbody>
{rows.map((r) => {
const positive = r.ytdProfit >= 0;
return (
Fix: the mobile table was mislabelled and clipping its own totals A screenshot at phone width showed an "INVOICE | LINES | TOTAL | STATUS" header row while the data under LINES was money. The header and its data cell had drifted apart: the earlier pass hid the Lines <td> but not the matching <th>, because the loop that added the hide classes only matched text-left headers and Lines is text-right. So the Total values rendered under a heading that named a column which no longer existed. The same screenshot showed the totals clipped — "41,710.50" reading as "710,50". With only three columns left, the 520px min-width was still forcing a sideways scroll, and the opaque sticky first column then sat on top of the left of the money values. The mobile floor is gone, so the three remaining columns size to their content, and the sticky and status gutters are trimmed at mobile widths to let them fit 375px. Below sm the table is now exactly Invoice, Total, Status — and every header matches a visible cell. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-10-02 13:34:19 +00:00
<tr key={r.id} className="border-b border-gray-50 dark:border-border hover:bg-gray-50/40 dark:hover:bg-white/[0.02]">
<td className="py-2.5 px-6 sticky left-0 bg-white dark:bg-surface">
Mega Plant dashboard — fix & harden (Parts 0-5)
2026-09-12 07:35:35 +00:00
<span className="font-mono text-xs px-2 py-1 rounded-md bg-[#00798C]/10 text-[#00798C] font-semibold">
{r.code}
</span>
</td>
<td className="py-2.5 px-3 font-medium text-[#003D5B] dark:text-white whitespace-nowrap">
<div className="flex items-center gap-2">
{positive ? <TrendingUp className="w-3 h-3 text-[#00798C]" /> : <TrendingDown className="w-3 h-3 text-[#D1495B]" />}
{r.name}
</div>
</td>
{r.months.map((v, i) => (
Fix: the mobile table was mislabelled and clipping its own totals A screenshot at phone width showed an "INVOICE | LINES | TOTAL | STATUS" header row while the data under LINES was money. The header and its data cell had drifted apart: the earlier pass hid the Lines <td> but not the matching <th>, because the loop that added the hide classes only matched text-left headers and Lines is text-right. So the Total values rendered under a heading that named a column which no longer existed. The same screenshot showed the totals clipped — "41,710.50" reading as "710,50". With only three columns left, the 520px min-width was still forcing a sideways scroll, and the opaque sticky first column then sat on top of the left of the money values. The mobile floor is gone, so the three remaining columns size to their content, and the sticky and status gutters are trimmed at mobile widths to let them fit 375px. Below sm the table is now exactly Invoice, Total, Status — and every header matches a visible cell. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-10-02 13:34:19 +00:00
<td key={i} className={`py-2.5 px-2 text-right tabular-nums ${(v ?? 0) > 0 ? "text-gray-700 dark:text-gray-300" : "text-gray-300 dark:text-text-soft"}`}>
Round 3 (Parts A-B): charts fixes + expenses/overheads cleanup - A.1: fixed_expenses per month now threaded through to chart bucket - A.2: null = no data (forecast), 0 = real plotted zero — distinguishable - A.3: x-axis clipped to last actual month (IncomeAreaChart + IncomeBarChart + MachineLineChart) - A.4: chart hues as CSS vars (--color-chart-income/fixed/running) — deeper steps of same hues, validated for CVD - A.5: chart-type toggle (Lines / Cost stack / Profit) + localStorage persistence + dynamic legend - A.6: profit on charts page comes from computeProfit() - B.1: deleted /expenses/plant-overheads, /expenses/insurance, /expenses/tracking (all empty); added /expenses/vehicles; ExpenseSectionPage now has an empty state - B.2: captured R 157,200 Personnel block, R 100,000 Maintenance, R 10,000 Petty Cash; roll-up reconciles to R 675,162.93 (= sum of non-Plant non-Santam rows; workbook grand total R 1,110,486.87 is internally off by R 14,477.56 vs its own rows) - B.3: seed flags incl<excl, VAT>20%, broken VAT math — does NOT silently correct; 4 anomalies reported on Charl-CCS + Buildsmart - B.4: noted that workbook Vehicle Costs subtotal skips Santam (app R 9,673.87 is correct; workbook is wrong) - B.2 reconciliation assertion added to verify-cost-reconciliation.mjs - Sidebar updated: Vehicles added, Insurance/Tracking/Plant-Overheads removed
2026-09-12 09:24:18 +00:00
{v == null ? "—" : (v > 0 ? ZAR2(v) : "R 0")}
Mega Plant dashboard — fix & harden (Parts 0-5)
2026-09-12 07:35:35 +00:00
</td>
))}
<td className={`py-2.5 px-6 text-right tabular-nums font-semibold whitespace-nowrap ${positive ? "text-[#00798C]" : "text-[#D1495B]"}`}>
<div className="inline-flex items-center gap-1.5">
{positive ? "+" : ""}{ZAR(r.ytdProfit)}
</div>
</td>
</tr>
);
})}
</tbody>
Invoices: line-item extraction, booking to plant items, VAT-inclusive income Adds an Invoices sub-menu under /income with a summary table (one row per invoice, click to expand the full detail) and the data model behind it. Data: - invoices + invoice_lines PocketBase collections, created idempotently by scripts/setup-invoice-collections.mjs - line items transcribed from PHI 166/167/171 with per-invoice arithmetic validation in the seed; a bad invoice is refused without blocking the rest - invoice-*.json in data/source are auto-imported, so adding an invoice is one file Booking: - manual book-in per line (Booked to), grouped by category - POST /api/invoice-lines/:id/book moves the income row rather than adding a second one, so a booking can be changed freely - scripts/book-invoice.mjs is idempotent: rows are stamped with monthly_income.invoice_line and replaced on re-run - booked amount follows lib/invoice-booking-policy.json (bookInclusiveVat), read by both the app and the CLI so they cannot disagree Money: - the R24,205.13 column on these invoices is PLUS VAT, not escalation. The seed now rejects VAT that disagrees with the stated rate. - booked amounts are VAT-inclusive per the client ruling of 2026-10-01; the VAT stays visible rather than hidden. Uploads: - drag-and-drop PDF attached to invoices.source_pdf - GET /api/invoices/:id/document proxies it — the collection is rule-locked, so a direct PocketBase /api/files link 404s in a browser Fixes a month-aggregation bug this introduced: buildIncomeRows assigned into months[i], so a machine with two income rows in one month (one per invoice, which is normal multi-site use) showed only the last. SS01 September read R20,700 instead of R35,305 while its own YTD included both. Months now accumulate, per-month profit is computed once after accumulation, and lib/rows.test.ts pins it. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-10-01 13:59:30 +00:00
{/* Totals row: the sum of every machine for each month. */}
<tfoot>
Fix: the mobile table was mislabelled and clipping its own totals A screenshot at phone width showed an "INVOICE | LINES | TOTAL | STATUS" header row while the data under LINES was money. The header and its data cell had drifted apart: the earlier pass hid the Lines <td> but not the matching <th>, because the loop that added the hide classes only matched text-left headers and Lines is text-right. So the Total values rendered under a heading that named a column which no longer existed. The same screenshot showed the totals clipped — "41,710.50" reading as "710,50". With only three columns left, the 520px min-width was still forcing a sideways scroll, and the opaque sticky first column then sat on top of the left of the money values. The mobile floor is gone, so the three remaining columns size to their content, and the sticky and status gutters are trimmed at mobile widths to let them fit 375px. Below sm the table is now exactly Invoice, Total, Status — and every header matches a visible cell. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-10-02 13:34:19 +00:00
<tr className="border-t-2 border-gray-200 dark:border-white/15 bg-gray-50/80 dark:bg-white/[0.04]">
<td className="py-3 px-6 sticky left-0 z-10 bg-gray-50/95 dark:bg-surface-muted/95 backdrop-blur text-sm font-semibold text-[#003D5B] dark:text-white">
Invoices: line-item extraction, booking to plant items, VAT-inclusive income Adds an Invoices sub-menu under /income with a summary table (one row per invoice, click to expand the full detail) and the data model behind it. Data: - invoices + invoice_lines PocketBase collections, created idempotently by scripts/setup-invoice-collections.mjs - line items transcribed from PHI 166/167/171 with per-invoice arithmetic validation in the seed; a bad invoice is refused without blocking the rest - invoice-*.json in data/source are auto-imported, so adding an invoice is one file Booking: - manual book-in per line (Booked to), grouped by category - POST /api/invoice-lines/:id/book moves the income row rather than adding a second one, so a booking can be changed freely - scripts/book-invoice.mjs is idempotent: rows are stamped with monthly_income.invoice_line and replaced on re-run - booked amount follows lib/invoice-booking-policy.json (bookInclusiveVat), read by both the app and the CLI so they cannot disagree Money: - the R24,205.13 column on these invoices is PLUS VAT, not escalation. The seed now rejects VAT that disagrees with the stated rate. - booked amounts are VAT-inclusive per the client ruling of 2026-10-01; the VAT stays visible rather than hidden. Uploads: - drag-and-drop PDF attached to invoices.source_pdf - GET /api/invoices/:id/document proxies it — the collection is rule-locked, so a direct PocketBase /api/files link 404s in a browser Fixes a month-aggregation bug this introduced: buildIncomeRows assigned into months[i], so a machine with two income rows in one month (one per invoice, which is normal multi-site use) showed only the last. SS01 September read R20,700 instead of R35,305 while its own YTD included both. Months now accumulate, per-month profit is computed once after accumulation, and lib/rows.test.ts pins it. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-10-01 13:59:30 +00:00
Total
</td>
<td className="py-3 px-3 text-sm font-semibold text-[#003D5B] dark:text-white whitespace-nowrap">
All machines
</td>
{MONTH_NAMES.map((m, i) => {
const sum = rows.reduce((s, r) => s + (r.months[i] ?? 0), 0);
return (
<td
key={m}
className="py-3 px-2 text-right tabular-nums whitespace-nowrap text-gray-600 dark:text-gray-300"
>
{sum > 0 ? ZAR(sum) : "—"}
</td>
);
})}
<td className="py-3 px-6 text-right tabular-nums font-semibold whitespace-nowrap text-[#003D5B] dark:text-white">
{ZAR(rows.reduce((s, r) => s + r.income, 0))}
</td>
</tr>
</tfoot>
Mega Plant dashboard — fix & harden (Parts 0-5)
2026-09-12 07:35:35 +00:00
</table>
</div>
Mobile: make the invoice tables readable at 375px Audited the invoice UI against the Round 4 checklist and fixed four things. The summary table carried eight columns at a fixed 820px min-width, which at 375px is a long sideways scroll through three figures before reaching the status badge — the one thing that needs acting on. Below sm it now keeps only Invoice, Site, Total and Status, and drops to a 520px min-width, so the useful columns are readable without scrolling. Period, line count and the ex-VAT/VAT split are one tap away in the expanded detail, and the full eight columns return from sm up where there is room. The summary table also had no right-edge fade. Rule 4 asks for a visible affordance on any wide table and it was simply missing, so scrolling sideways looked like the table ended. Same for the month grid on /income, which was also missing -webkit-overflow-scrolling. Both now share components/ScrollFade. Two 10px labels in the app header ("Overheads 2026", "FY") were invisible at 375px but visible from 640/768px — and 768x1024 is one of the two sizes the checklist tests, so they were a rule-2 violation at tablet width. Bumped to 12px. PlantRegisterTable's 10px filter count was checked and left alone: it sits inside hidden lg:flex, so it never renders on mobile. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-10-02 13:29:00 +00:00
<ScrollFade />
Mega Plant dashboard — fix & harden (Parts 0-5)
2026-09-12 07:35:35 +00:00
</div>
);
}
Reference in a new issue Copy permalink