ui phase 1

client/src/components/EarningsRow/EarningsRow.tsx

@@ -1,12 +1,13 @@
 'use client';
 import { FunctionComponent, useMemo } from 'react';
 import { useLocale, useTranslations } from 'next-intl';
-import { Paper, Stack, Typography } from '@mui/material';
+import { Skeleton, Stack, Typography } from '@mui/material';
 import StatusChip, { StatusKind } from '@/components/StatusChip';
 import PriceBreakdown from '@/components/PriceBreakdown';
 import CountdownTimer from '@/components/CountdownTimer';
 import AppButton from '@/components/common/AppButton';
 import AppIcon from '@/components/common/AppIcon';
+import SurfaceCard from '@/components/common/SurfaceCard';
 import { formatShamsiDate, parseIrr } from '@/utils';
 import type { EarningsState, NurseEarningsItem } from '@/services/payouts/types';
 
@@ -51,11 +52,7 @@ const EarningsRow: FunctionComponent<EarningsRowProps> = ({ item, onViewBooking,
   );
 
   return (
-    <Paper
-      elevation={0}
-      data-earnings-state={item.state}
-      sx={{ p: 2.5, border: '1px solid', borderColor: 'divider', borderRadius: 2 }}
-    >
+    <SurfaceCard data-earnings-state={item.state}>
       <Stack sx={{ gap: 1.75 }}>
         <Stack
           direction="row"
@@ -110,7 +107,7 @@ const EarningsRow: FunctionComponent<EarningsRowProps> = ({ item, onViewBooking,
           </AppButton>
         </Stack>
       </Stack>
-    </Paper>
+    </SurfaceCard>
   );
 };
 
@@ -190,4 +187,21 @@ const StateAffordance: FunctionComponent<{
   return null;
 };
 
-export default EarningsRow;
+/** Matches the real row's anatomy (title/chip header, breakdown lines, affordance row) for the earnings list. */
+const EarningsRowSkeleton: FunctionComponent = () => (
+  <SurfaceCard>
+    <Stack sx={{ gap: 1.75 }}>
+      <Stack direction="row" sx={{ justifyContent: 'space-between', alignItems: 'flex-start', gap: 1.5 }}>
+        <Stack sx={{ gap: 0.5 }}>
+          <Skeleton variant="text" width={140} height={26} />
+          <Skeleton variant="text" width={180} height={18} />
+        </Stack>
+        <Skeleton variant="rounded" width={72} height={24} />
+      </Stack>
+      <Skeleton variant="rounded" height={72} />
+      <Skeleton variant="text" width="50%" height={20} />
+    </Stack>
+  </SurfaceCard>
+);
+
+export default Object.assign(EarningsRow, { Skeleton: EarningsRowSkeleton });