ui phase 9

client/src/components/PatientCard/PatientCard.tsx

@@ -1,9 +1,11 @@
 'use client';
 import { FunctionComponent } from 'react';
 import Box from '@mui/material/Box';
+import ButtonBase from '@mui/material/ButtonBase';
 import Skeleton from '@mui/material/Skeleton';
 import Stack from '@mui/material/Stack';
-import { AppIconButton, SurfaceCard } from '@/components/common';
+import Typography from '@mui/material/Typography';
+import { AppIcon, AppIconButton, SurfaceCard } from '@/components/common';
 import PatientHeader from '@/components/PatientHeader';
 import type { Patient } from '@/services/patients/types';
 
@@ -26,6 +28,12 @@ export interface PatientCardProps {
   onOpen?: () => void;
   /** Accessible label for the tappable identity area (required when `onOpen` is set). */
   openLabel?: string;
+  /**
+   * Pre-formatted "آخرین ویزیت: …" teaser, best-effort from the cached bookings list. Omitted (never
+   * fabricated) when no cached booking can be matched to this patient — the server has no
+   * `lastVisitAt` field yet (filed as a REQ).
+   */
+  lastVisitLabel?: string;
 }
 
 /**
@@ -48,41 +56,48 @@ const PatientCard: FunctionComponent<PatientCardProps> = ({
   archiveLabel,
   onOpen,
   openLabel,
+  lastVisitLabel,
 }) => {
   const header = (
-    <PatientHeader
-      displayName={patient.displayName}
-      relationLabel={relationLabel}
-      genderLabel={genderLabel}
-      ageLabel={ageLabel}
-      conditionLabels={conditionLabels}
-      noConditionsLabel={noConditionsLabel}
-    />
+    <>
+      <PatientHeader
+        displayName={patient.displayName}
+        relationLabel={relationLabel}
+        genderLabel={genderLabel}
+        ageLabel={ageLabel}
+        conditionLabels={conditionLabels}
+        noConditionsLabel={noConditionsLabel}
+      />
+      {lastVisitLabel ? (
+        <Typography variant="caption" sx={{ color: 'text.secondary', display: 'block', mt: 0.75 }}>
+          {lastVisitLabel}
+        </Typography>
+      ) : null}
+    </>
   );
 
   return (
     <SurfaceCard padding="sm">
       <Stack direction="row" sx={{ alignItems: 'flex-start', gap: 1 }}>
         {onOpen ? (
-          <Box
-            component="button"
-            type="button"
+          <ButtonBase
             onClick={onOpen}
             aria-label={openLabel}
             sx={{
               flexGrow: 1,
               minWidth: 0,
+              justifyContent: 'flex-start',
               textAlign: 'start',
-              background: 'none',
-              border: 'none',
-              p: 0,
-              cursor: 'pointer',
-              font: 'inherit',
-              color: 'inherit',
+              borderRadius: 2,
+              p: 1,
+              m: -1,
+              gap: 1,
+              '&:hover': { bgcolor: 'action.hover' },
             }}
           >
-            {header}
-          </Box>
+            <Box sx={{ flexGrow: 1, minWidth: 0 }}>{header}</Box>
+            <AppIcon icon="forward" size={20} color="var(--bal-text-secondary)" />
+          </ButtonBase>
         ) : (
           <Box sx={{ flexGrow: 1, minWidth: 0 }}>{header}</Box>
         )}