docs(05-01): complete FinanceRow + FinanceSkeleton plan
- FinanceRow: 2-line stacked row with amountTone variants (D-06) - FinanceSkeleton: initial-load placeholder matching full page layout (D-17) - Both components type-check clean, no files outside components/mobile/ modified
This commit is contained in:
parent
5f7fc29e67
commit
1ce80371d1
1 changed files with 109 additions and 0 deletions
109
.planning/phases/05-finance-restyle/05-01-SUMMARY.md
Normal file
109
.planning/phases/05-finance-restyle/05-01-SUMMARY.md
Normal file
|
|
@ -0,0 +1,109 @@
|
|||
---
|
||||
phase: 05-finance-restyle
|
||||
plan: 01
|
||||
subsystem: ui
|
||||
tags: [react, tailwind, shadcn, mobile, skeleton, finance]
|
||||
|
||||
# Dependency graph
|
||||
requires:
|
||||
- phase: 03-dashboard-restyle
|
||||
provides: KpiCardMobile component pattern and phase comment block convention
|
||||
- phase: 04-tickets-restyle
|
||||
provides: Typography contract (2 weights, 3 sizes), spacing scale, color tokens
|
||||
|
||||
provides:
|
||||
- FinanceRow component — reusable 2-line stacked row for invoice and payment lists (D-06)
|
||||
- FinanceSkeleton component — initial-load placeholder matching final finance page layout (D-17)
|
||||
|
||||
affects:
|
||||
- 05-02 (plan 02 consumes both components directly)
|
||||
|
||||
# Tech tracking
|
||||
tech-stack:
|
||||
added: []
|
||||
patterns:
|
||||
- "FinanceRow: 2-line stacked row with amountTone prop (destructive/positive/default) — no priority stripe (Finance has no priority taxonomy)"
|
||||
- "FinanceSkeleton: no-prop skeleton layout matching page structure exactly for drop-in use in loading branch"
|
||||
|
||||
key-files:
|
||||
created:
|
||||
- components/mobile/FinanceRow.tsx
|
||||
- components/mobile/FinanceSkeleton.tsx
|
||||
modified: []
|
||||
|
||||
key-decisions:
|
||||
- "amountTone prop on FinanceRow: supports destructive (overdue), positive (payments), default (current) per D-06 Invoice Status Colors"
|
||||
- "FinanceSkeleton renders two identical list-row skeleton blocks (one for invoices, one for payments) sharing same JSX via a local const"
|
||||
- "No Card wrapper in FinanceSkeleton — pure Skeleton h-20/h-16 blocks per UI-SPEC item 1"
|
||||
|
||||
patterns-established:
|
||||
- "FinanceRow: pure presentational, parent passes pre-formatted amount string via fmt$()"
|
||||
- "Phase 05 comment block convention: /* ComponentName — phase 05 (FIN-NN). */"
|
||||
|
||||
requirements-completed: [FIN-01, FIN-02]
|
||||
|
||||
# Metrics
|
||||
duration: 10min
|
||||
completed: 2026-05-03
|
||||
---
|
||||
|
||||
# Phase 5 Plan 01: Finance Restyle Component Primitives Summary
|
||||
|
||||
**Two pure-presentational helper components extracted for the Finance page rewrite: FinanceRow (2-line stacked card row with amountTone variants) and FinanceSkeleton (4 KPI + aging + 2x list-row placeholder) ready for Plan 02 composition.**
|
||||
|
||||
## Performance
|
||||
|
||||
- **Duration:** ~10 min
|
||||
- **Started:** 2026-05-03T23:52:38Z
|
||||
- **Completed:** 2026-05-03T23:58:00Z
|
||||
- **Tasks:** 2
|
||||
- **Files modified:** 2 (both new files)
|
||||
|
||||
## Accomplishments
|
||||
- Created `FinanceRow` with the locked 2-line layout from UI-SPEC §"Invoice / Payment List Rows": text-sm font-semibold line 1, text-xs text-muted-foreground line 2, hover:bg-muted/50, no priority stripe
|
||||
- Created `FinanceSkeleton` matching exact layout from UI-SPEC §"Skeleton Loading State": 2x2 KPI grid (h-20), 3-cell aging row (h-16), 2x sets of 3 list-row skeletons (h-4)
|
||||
- Both components pass TypeScript strict-mode checks with zero errors
|
||||
|
||||
## Task Commits
|
||||
|
||||
1. **Task 1: Create FinanceRow component** - `180ab51` (feat)
|
||||
2. **Task 2: Create FinanceSkeleton component** - `5f7fc29` (feat)
|
||||
|
||||
## Files Created/Modified
|
||||
- `components/mobile/FinanceRow.tsx` — Reusable 2-line stacked row for Open Invoices and Recent Payments lists; exports `FinanceRow` + `FinanceRowProps`
|
||||
- `components/mobile/FinanceSkeleton.tsx` — Initial-load placeholder for /mobile/finance; exports no-prop `FinanceSkeleton`
|
||||
|
||||
## Import Signatures for Plan 02
|
||||
|
||||
```typescript
|
||||
import { FinanceRow, type FinanceRowProps } from '@/components/mobile/FinanceRow';
|
||||
import { FinanceSkeleton } from '@/components/mobile/FinanceSkeleton';
|
||||
```
|
||||
|
||||
## Decisions Made
|
||||
- `amountTone` uses `'destructive' | 'positive' | 'default'` literals matching exact UI-SPEC D-06 color table entries (`text-destructive` for overdue, `text-emerald-600` for payment positive)
|
||||
- `secondary` and `rightSecondary` are typed `React.ReactNode` so Plan 02 can pass formatted JSX (chip spans, date fragments) without string concatenation
|
||||
- `FinanceSkeleton` uses a local `listRowSkeleton` const rendered twice to avoid duplicating the 3-row block — clean DRY without adding props
|
||||
|
||||
## Deviations from Plan
|
||||
|
||||
None - plan executed exactly as written.
|
||||
|
||||
## Issues Encountered
|
||||
|
||||
Worktree was not based on the expected commit (`a0ccd14`). Per the `<worktree_branch_check>` protocol in the plan, ran `git reset --soft a0ccd14` then restored all files outside `components/mobile/FinanceRow.tsx` and `components/mobile/FinanceSkeleton.tsx` via `git checkout HEAD -- ...`. Worktree was clean before task execution began.
|
||||
|
||||
## User Setup Required
|
||||
|
||||
None - no external service configuration required.
|
||||
|
||||
## Next Phase Readiness
|
||||
|
||||
- Both components are ready for Plan 02 (the full finance page restyle)
|
||||
- Plan 02 can import both directly without modification
|
||||
- `FinanceRow` covers invoices, payments, and top-customers rows (the top-customers variant uses the same 2-line shape)
|
||||
- `FinanceSkeleton` drops into the `if (loading)` branch of the restyled page.tsx
|
||||
|
||||
---
|
||||
*Phase: 05-finance-restyle*
|
||||
*Completed: 2026-05-03*
|
||||
Loading…
Add table
Add a link
Reference in a new issue