diff --git a/components/mobile/FinanceSkeleton.tsx b/components/mobile/FinanceSkeleton.tsx new file mode 100644 index 0000000..93f1477 --- /dev/null +++ b/components/mobile/FinanceSkeleton.tsx @@ -0,0 +1,47 @@ +'use client'; + +/* FinanceSkeleton — phase 05 (FIN-01). + * Purpose: initial-load placeholder for /mobile/finance. + * Layout: 4 KPI tile skeletons (2×2 grid) + 1 aging row (3 cells) + 2 list-row skeleton blocks (3 rows each). + * Pure presentational — no props. + * UI-SPEC §"Skeleton Loading State [D-17]". */ + +import { Skeleton } from '@/components/ui/skeleton'; + +export function FinanceSkeleton() { + const listRowSkeleton = ( +
+ {[0, 1, 2].map((i) => ( +
+ + +
+ ))} +
+ ); + + return ( +
+ {/* 4 KPI tile skeletons — 2×2 grid */} +
+ + + + +
+ + {/* Aging row skeleton — 3 cells */} +
+ + + +
+ + {/* Invoice list-row skeletons */} + {listRowSkeleton} + + {/* Payment list-row skeletons */} + {listRowSkeleton} +
+ ); +}