ui phase 1

client/src/components/InstallmentScheduleRow/InstallmentScheduleRow.tsx

@@ -1,9 +1,11 @@
 'use client';
 import { FunctionComponent } from 'react';
 import { useLocale, useTranslations } from 'next-intl';
-import { Paper, Stack, Typography } from '@mui/material';
+import { Stack, Typography } from '@mui/material';
 import StatusChip from '../StatusChip';
-import { formatIrrToToman, formatShamsiDate } from '@/utils';
+import Money from '@/components/common/Money';
+import SurfaceCard from '@/components/common/SurfaceCard';
+import { formatShamsiDate } from '@/utils';
 import { installmentStatusKind, type BnplInstallmentRow, type BnplInstallmentStatus } from '@/services/bnpl/types';
 
 export interface InstallmentScheduleRowProps {
@@ -35,11 +37,7 @@ const InstallmentScheduleRow: FunctionComponent<InstallmentScheduleRowProps> = (
   const dueLabel = row.kind === 'down_payment' ? t('today') : formatShamsiDate(`${row.dueDate}T00:00:00`, locale);
 
   return (
-    <Paper
-      elevation={0}
-      data-row-kind={row.kind}
-      sx={{ p: 1.5, borderRadius: 2, border: '1px solid', borderColor: 'divider' }}
-    >
+    <SurfaceCard padding="sm" data-row-kind={row.kind}>
       <Stack direction="row" sx={{ justifyContent: 'space-between', alignItems: 'center', gap: 1.5 }}>
         <Stack sx={{ gap: 0.25 }}>
           <Typography variant="body2" sx={{ fontWeight: 700 }}>
@@ -50,18 +48,19 @@ const InstallmentScheduleRow: FunctionComponent<InstallmentScheduleRowProps> = (
           </Typography>
         </Stack>
         <Stack sx={{ alignItems: 'flex-end', gap: 0.5 }}>
-          <Typography
-            variant="body2"
-            sx={{ fontWeight: 700, color: row.kind === 'down_payment' ? 'var(--bal-secondary)' : undefined }}
-          >
-            {formatIrrToToman(row.amountIrr, locale)}
-          </Typography>
+          <Money
+            amountIrr={row.amountIrr}
+            hideUnit
+            size="sm"
+            tone={row.kind === 'down_payment' ? 'emphasis' : 'default'}
+            sx={{ fontWeight: 700 }}
+          />
           {showStatus && row.status ? (
             <StatusChip status={installmentStatusKind(row.status)} label={t(STATUS_LABEL_KEY[row.status])} />
           ) : null}
         </Stack>
       </Stack>
-    </Paper>
+    </SurfaceCard>
   );
 };