ui phase 1

client/src/components/PatientCard/PatientCard.tsx

@@ -1,9 +1,9 @@
 'use client';
 import { FunctionComponent } from 'react';
 import Box from '@mui/material/Box';
-import Paper from '@mui/material/Paper';
+import Skeleton from '@mui/material/Skeleton';
 import Stack from '@mui/material/Stack';
-import { AppIconButton } from '@/components/common';
+import { AppIconButton, SurfaceCard } from '@/components/common';
 import PatientHeader from '@/components/PatientHeader';
 import type { Patient } from '@/services/patients/types';
 
@@ -61,7 +61,7 @@ const PatientCard: FunctionComponent<PatientCardProps> = ({
   );
 
   return (
-    <Paper elevation={0} sx={{ p: 2, border: '1px solid', borderColor: 'divider', borderRadius: 2 }}>
+    <SurfaceCard padding="sm">
       <Stack direction="row" sx={{ alignItems: 'flex-start', gap: 1 }}>
         {onOpen ? (
           <Box
@@ -92,8 +92,25 @@ const PatientCard: FunctionComponent<PatientCardProps> = ({
           <AppIconButton icon="archive" title={archiveLabel} aria-label={archiveLabel} size="small" onClick={onArchive} />
         </Stack>
       </Stack>
-    </Paper>
+    </SurfaceCard>
   );
 };
 
-export default PatientCard;
+/** Matches the real card's anatomy (identity block + two icon-button actions) for the E1 patient list. */
+const PatientCardSkeleton: FunctionComponent = () => (
+  <SurfaceCard padding="sm">
+    <Stack direction="row" sx={{ alignItems: 'flex-start', gap: 1 }}>
+      <Stack sx={{ gap: 0.75, flexGrow: 1 }}>
+        <Skeleton variant="text" width="45%" height={26} />
+        <Skeleton variant="text" width="65%" height={20} />
+        <Skeleton variant="rounded" width={90} height={22} />
+      </Stack>
+      <Stack direction="row" sx={{ flexShrink: 0, gap: 0.5 }}>
+        <Skeleton variant="circular" width={32} height={32} />
+        <Skeleton variant="circular" width={32} height={32} />
+      </Stack>
+    </Stack>
+  </SurfaceCard>
+);
+
+export default Object.assign(PatientCard, { Skeleton: PatientCardSkeleton });