48 lines
1.4 KiB
TypeScript
48 lines
1.4 KiB
TypeScript
|
'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>
|
|||
|
|
);
|
|||
|
|
}
|