ui phase 1

client/src/components/PayoutHistoryRow/PayoutHistoryRow.test.tsx

@@ -52,7 +52,7 @@ describe('<PayoutHistoryRow/> component', () => {
 
   it('renders the net amount transferred in Toman and the masked IBAN', () => {
     renderRow(makeItem('paid'));
-    expect(screen.getByText('425,000')).toBeInTheDocument(); // 4,250,000 ÷ 10
+    expect(screen.getByText(/425,000/)).toBeInTheDocument(); // 4,250,000 ÷ 10
     expect(screen.getByText('IR••••4821')).toBeInTheDocument();
   });
 

client/src/components/PayoutHistoryRow/PayoutHistoryRow.tsx

@@ -1,11 +1,14 @@
 'use client';
 import { FunctionComponent, ReactNode } from 'react';
 import { useLocale, useTranslations } from 'next-intl';
-import { Box, Paper, Stack, Typography } from '@mui/material';
+import { Box, Skeleton, Stack, Typography } from '@mui/material';
 import StatusChip, { StatusKind } from '@/components/StatusChip';
 import AppButton from '@/components/common/AppButton';
 import AppIcon from '@/components/common/AppIcon';
-import { formatIrrToToman, formatShamsiDate } from '@/utils';
+import SurfaceCard from '@/components/common/SurfaceCard';
+import AccentCard from '@/components/common/AccentCard';
+import Money from '@/components/common/Money';
+import { formatShamsiDate } from '@/utils';
 import type { NursePayoutHistoryItem, PayoutStatus } from '@/services/payouts/types';
 
 export interface PayoutHistoryRowProps {
@@ -31,16 +34,11 @@ const PAYOUT_STATUS_KIND: Record<PayoutStatus, StatusKind> = {
  */
 const PayoutHistoryRow: FunctionComponent<PayoutHistoryRowProps> = ({ item, onOpen }) => {
   const t = useTranslations('payouts');
-  const tc = useTranslations('common');
   const locale = useLocale();
   const isFailed = item.status === 'failed';
 
   return (
-    <Paper
-      elevation={0}
-      data-payout-status={item.status}
-      sx={{ p: 2.5, border: '1px solid', borderColor: 'divider', borderRadius: 2 }}
-    >
+    <SurfaceCard data-payout-status={item.status}>
       <Stack sx={{ gap: 1.5 }}>
         <Stack
           direction="row"
@@ -50,12 +48,7 @@ const PayoutHistoryRow: FunctionComponent<PayoutHistoryRowProps> = ({ item, onOp
             <Typography variant="caption" sx={{ color: 'text.secondary', fontWeight: 500 }}>
               {t('payout_net_amount')}
             </Typography>
-            <Typography variant="subtitle1" sx={{ fontWeight: 800 }}>
-              {formatIrrToToman(item.netAmountIrr, locale)}{' '}
-              <Typography component="span" variant="caption" sx={{ color: 'text.secondary' }}>
-                {tc('currency_toman')}
-              </Typography>
-            </Typography>
+            <Money amountIrr={item.netAmountIrr} size="md" sx={{ fontWeight: 800 }} />
           </Stack>
           <StatusChip status={PAYOUT_STATUS_KIND[item.status]} label={t(`pstatus_${item.status}`)} />
         </Stack>
@@ -82,16 +75,7 @@ const PayoutHistoryRow: FunctionComponent<PayoutHistoryRowProps> = ({ item, onOp
         </Stack>
 
         {isFailed ? (
-          <Box
-            sx={{
-              p: 1.5,
-              borderRadius: 2,
-              border: '1px solid',
-              borderColor: 'divider',
-              borderInlineStart: '3px solid',
-              borderInlineStartColor: 'var(--bal-error)',
-            }}
-          >
+          <AccentCard tone="error" padding="sm">
             <Stack direction="row" sx={{ gap: 0.75, alignItems: 'center', mb: 0.5 }}>
               <AppIcon icon="warning" size={18} color="var(--bal-error)" />
               <Typography variant="body2" sx={{ fontWeight: 700 }}>
@@ -106,7 +90,7 @@ const PayoutHistoryRow: FunctionComponent<PayoutHistoryRowProps> = ({ item, onOp
             <Typography variant="body2" sx={{ color: 'text.secondary', mt: 0.5 }}>
               {t('failure_hint')}
             </Typography>
-          </Box>
+          </AccentCard>
         ) : null}
 
         <Stack direction="row" sx={{ justifyContent: 'flex-end' }}>
@@ -115,7 +99,7 @@ const PayoutHistoryRow: FunctionComponent<PayoutHistoryRowProps> = ({ item, onOp
           </AppButton>
         </Stack>
       </Stack>
-    </Paper>
+    </SurfaceCard>
   );
 };
 
@@ -130,4 +114,24 @@ const MetaLine: FunctionComponent<{ label: string; children: ReactNode }> = ({ l
   </Stack>
 );
 
-export default PayoutHistoryRow;
+/** Matches the real row's anatomy (amount block, status chip, meta lines) for the payout-history list. */
+const PayoutHistoryRowSkeleton: FunctionComponent = () => (
+  <SurfaceCard>
+    <Stack sx={{ gap: 1.5 }}>
+      <Stack direction="row" sx={{ justifyContent: 'space-between', alignItems: 'flex-start', gap: 1.5 }}>
+        <Stack sx={{ gap: 0.5 }}>
+          <Skeleton variant="text" width={100} height={16} />
+          <Skeleton variant="text" width={150} height={30} />
+        </Stack>
+        <Skeleton variant="rounded" width={72} height={24} />
+      </Stack>
+      <Stack sx={{ gap: 0.75 }}>
+        <Skeleton variant="text" width="80%" height={18} />
+        <Skeleton variant="text" width="70%" height={18} />
+        <Skeleton variant="text" width="60%" height={18} />
+      </Stack>
+    </Stack>
+  </SurfaceCard>
+);
+
+export default Object.assign(PayoutHistoryRow, { Skeleton: PayoutHistoryRowSkeleton });