From 5f7fc29e67b6a088d040ec9466b131b814da9080 Mon Sep 17 00:00:00 2001
From: lorentz <lorentz@wulfconsulting.com>
Date: Sun, 3 May 2026 19:52:25 -0400
Subject: [PATCH] feat(05-01): create FinanceSkeleton component

- Initial-load placeholder for /mobile/finance (D-17)
- 2x2 KPI grid (h-20) + 3-cell aging row (h-16) + 2x list-row blocks (3 rows each)
- Uses Skeleton primitive from components/ui/skeleton
- Locked spacing tokens: px-4 py-4, space-y-6, gap-3, gap-2, space-y-3
- No props, no Card wrapper, no custom animation per UI-SPEC
---
 components/mobile/FinanceSkeleton.tsx | 47 +++++++++++++++++++++++++++
 1 file changed, 47 insertions(+)
 create mode 100644 components/mobile/FinanceSkeleton.tsx

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 = (
+    <div className="space-y-3">
+      {[0, 1, 2].map((i) => (
+        <div key={i} className="px-4 py-3 flex justify-between gap-2">
+          <Skeleton className="h-4 w-2/3" />
+          <Skeleton className="h-4 w-16" />
+        </div>
+      ))}
+    </div>
+  );
+
+  return (
+    <div className="px-4 py-4 space-y-6">
+      {/* 4 KPI tile skeletons — 2×2 grid */}
+      <div className="grid grid-cols-2 gap-3">
+        <Skeleton className="h-20 rounded-xl" />
+        <Skeleton className="h-20 rounded-xl" />
+        <Skeleton className="h-20 rounded-xl" />
+        <Skeleton className="h-20 rounded-xl" />
+      </div>
+
+      {/* Aging row skeleton — 3 cells */}
+      <div className="grid grid-cols-3 gap-2">
+        <Skeleton className="h-16 rounded-xl" />
+        <Skeleton className="h-16 rounded-xl" />
+        <Skeleton className="h-16 rounded-xl" />
+      </div>
+
+      {/* Invoice list-row skeletons */}
+      {listRowSkeleton}
+
+      {/* Payment list-row skeletons */}
+      {listRowSkeleton}
+    </div>
+  );
+}