The third grouped ledger became SectionList in freight billing

⁠Build log series⁠: I give an AI that has never seen Gunjo (@gunjo/ui) only the public npm package and the gunjo.jp docs, then ask it to build a real screen. ⁠This fourth staff-facing trucking round⁠ covered dense ⁠freight rates and billing⁠: tariff calculation, fuel surcharge, invoices, and payment matching.

Result: 4/5, and the grouped backbone settled on its third case

The desktop screen passed tsc. The agent reported:

⁠This was a genuinely strong administrative library.⁠ Purpose-built components covered about 85 percent of a freight billing and receivables console. One recurring gap remained: a grouped table with subtotals.

The core observation: SectionList reached three of three

Invoices needed grouping by shipper and closing date, with a subtotal for each group. The agent found:

⁠There was no grouped list, section list, or grouped table.⁠ DataTable and ActionDataTable are flat TanStack tables with no groupBy, section header row, or subtotal footer per group. The by-use-case catalog admits the gap by sending a grouped table with subtotals to plain DataTable while saying grouping is unsupported. I hand-rolled groupInvoices() and stacked a heading band, ActionDataTable, and another Table for each subtotal. The highest-value addition is a grouped table with groupBy, section headings, and subtotal footers.

Taxi monthly ride history in #149 and bus IC-card (transit card) history by date in #158 had already hand-rolled the pattern. The third case fired, so I built:

• ⁠SectionList⁠ renders ordered sections. Each has a heading band with title, sublabel, and right-aligned aggregate, caller-provided body rows, and an optional subtotal footer.
• It is body-agnostic. Callers can place mobile ListCard history, desktop tables, or signed ledger rows inside. The caller owns grouping, subtotal calculations, and cross-group selection; the component owns section framing and accessible structure.
• I corrected the catalog to send grouped tables with subtotals to SectionList, and cross-linked AmountBreakdown with the clarification that it displays amounts but does not aggregate transactions.

PR#421 confirmed two closing-date groups, right-aligned totals of ¥1,663,500 and ¥808,500, and two subtotal footer bands. Issue #404 closed. ⁠This was the twentieth component produced by the series.⁠

What I took away: an acknowledged gap is the most honest bad answer

The catalog traps from #160 separated hiding from substitution. This screen added a third state: ⁠an acknowledged gap.⁠ The catalog recommended plain DataTable for grouped subtotals but openly stated that grouping was not provided.

That is more honest than hiding an existing answer or substituting a wrong one. The adopter knows hand-rolling is required, even though the hardest part of the screen has no guidance. In order of honesty:

1. ⁠Acknowledged gap:⁠ the catalog says the available component is insufficient. Build the missing component.
2. ⁠Hidden answer:⁠ the right component exists but is omitted. Fix the guidance cheaply.
3. ⁠Substituted answer:⁠ the catalog actively recommends the wrong model. Build or correct the component and fix the guidance.

SectionList advanced the first state from an honest no to a real yes.

What it flagged

• ✅ AmountBreakdown was the best component for base freight, fuel surcharge, tolls, discounts, pretax subtotal, sales tax, and invoice total, while correctly remaining display-only rather than an aggregator.
• ✅ ActionDataTable was independently found again for selecting invoices and matching payments, validating PR#418.
• 🟡 DataTable exposes no footer or summary row even though TableFooter exists underneath, so the agent stacked a separate table for subtotals.

⁠What I built under src this round: SectionList.⁠ The 4/5 settled the grouped backbone and corrected the catalog.

📊 Component scoreboard (⁠20 built⁠)

SegmentedControl / LineChip / LimitMonitor / ⁠SectionList⁠, plus earlier components In progress: MatchCard or PairingPanel at one of three, ValidityTimer at one of three, and a DataTable summary row.

📋 Mode progress

• ✈️ Air ✅ / 🚆 Rail ✅ / 🚕 Taxi ✅ / 🚌 Bus ✅
• 🚚 ⁠Trucking: four staff screens (dispatch, matching, fleet and labor, billing)⁠, one short of comparable staff depth

Next up: build log #163

• Finish staff-facing trucking with transport cost or KPIs, then move to shipper pickup requests and freight tracking.

The run

• ⁠gunjo.jp⁠ / ⁠SectionList⁠ / ⁠AmountBreakdown⁠ / ⁠ActionDataTable⁠ / npm @gunjo/ui / ⁠GitHub⁠ / previous rounds #1 through #161
• ⁠GunjoUI by UIXHERO⁠

The third grouped ledger became SectionList. The most honest catalog failure is an acknowledged gap, and this build turned that honest no into a supported answer.