ui phase 5

client/src/components/NurseResultCard/NurseResultCard.tsx

@@ -1,6 +1,6 @@
 import { FunctionComponent, memo } from 'react';
 import { useLocale, useTranslations } from 'next-intl';
-import { Avatar, Box, Paper, Skeleton, Stack, Typography } from '@mui/material';
+import { Avatar, Box, Chip, Paper, Skeleton, Stack, Typography } from '@mui/material';
 import AppIcon from '../common/AppIcon';
 import TrustBadge from '../TrustBadge';
 import PriceDisplay from '../PriceDisplay';
@@ -10,6 +10,14 @@ import type { NurseSearchResult } from '@/services/search/types';
 export interface NurseResultCardProps {
   /** One search-result row (a bookable variant in a covered area). */
   nurse: NurseSearchResult;
+  /**
+   * The service/variant label for this row — the row **is** a variant, so the card must name what is
+   * being bought. `NurseSearchResultDto` has no display name yet (REQ-040); until it lands, the page
+   * passes the row's **category** name (from the cached catalog reference data) so multi-variant nurses
+   * are at least distinguishable by price row. The card stays data-agnostic — swap the caller's label
+   * source to the served `variantDisplayName` once the REQ lands, no card change needed.
+   */
+  serviceLabel: string;
   /** Tapping the card opens the nurse profile (C3), carrying the row (nurse + variant + gender intent). */
   onSelect: (nurse: NurseSearchResult) => void;
 }
@@ -19,14 +27,16 @@ function ratingText(rating: number, locale: string): string {
 }
 
 /**
- * The C2 result card: avatar, name, the reused ✓ تاییدشده verified badge, rating + review count, an
- * optional distance chip (only when `distanceKm` is present), and the "from X تومان/ساعت" rate (via the
- * shared `PriceDisplay` money util). Presentational + memoized so a list of N cards doesn't re-render on
- * unrelated state — pass a stable `onSelect` (e.g. `useCallback`). Every returned row is verified by the
- * search-index invariant, so the badge is always shown.
+ * The C2 result card — the four-second decision unit. Avatar, name, the reused tappable ✓ تاییدشده
+ * verified badge (opens the verification explainer), the service/variant label, a quiet gender chip
+ * (same-gender matching is load-bearing), completed-visits count, rating + review count, an optional
+ * distance chip, an optional one-line top-review tag (only when served), and the "from X تومان/ساعت"
+ * rate. Presentational + memoized so a list of N cards doesn't re-render on unrelated state — pass a
+ * stable `onSelect` (e.g. `useCallback`). Every returned row is verified by the search-index invariant,
+ * so the badge is always shown.
  * @component NurseResultCard
  */
-const NurseResultCard = ({ nurse, onSelect }: NurseResultCardProps) => {
+const NurseResultCard = ({ nurse, serviceLabel, onSelect }: NurseResultCardProps) => {
   const t = useTranslations('search');
   const locale = useLocale();
 
@@ -38,6 +48,7 @@ const NurseResultCard = ({ nurse, onSelect }: NurseResultCardProps) => {
   return (
     <Paper
       elevation={0}
+      data-nurse-result-card
       onClick={() => onSelect(nurse)}
       role="button"
       tabIndex={0}
@@ -68,12 +79,29 @@ const NurseResultCard = ({ nurse, onSelect }: NurseResultCardProps) => {
         {initial}
       </Avatar>
 
-      <Stack sx={{ gap: 0.75, flexGrow: 1, minWidth: 0 }}>
+      <Stack sx={{ gap: 0.5, flexGrow: 1, minWidth: 0 }}>
         <Stack direction="row" sx={{ gap: 1, alignItems: 'center', flexWrap: 'wrap' }}>
           <Typography variant="subtitle1" sx={{ fontWeight: 700 }}>
             {name}
           </Typography>
-          <TrustBadge state="verified" />
+          <TrustBadge state="verified" nurseId={nurse.nurseId} />
+        </Stack>
+
+        <Typography variant="body2" sx={{ color: 'text.secondary' }}>
+          {serviceLabel}
+        </Typography>
+
+        <Stack direction="row" sx={{ gap: 1, alignItems: 'center', flexWrap: 'wrap', mt: 0.25 }}>
+          <Chip
+            size="small"
+            variant="outlined"
+            label={t(`gender_${nurse.nurseGender}`)}
+            data-nurse-gender={nurse.nurseGender}
+            sx={{ height: 22, fontSize: '0.75rem' }}
+          />
+          <Typography variant="caption" sx={{ color: 'text.secondary' }}>
+            {t('completed_visits', { count: formatNumber(nurse.totalCompletedBookings, locale) })}
+          </Typography>
         </Stack>
 
         <Stack direction="row" sx={{ gap: 1.5, alignItems: 'center', flexWrap: 'wrap' }}>
@@ -97,6 +125,12 @@ const NurseResultCard = ({ nurse, onSelect }: NurseResultCardProps) => {
           ) : null}
         </Stack>
 
+        {nurse.topReviewTag ? (
+          <Typography variant="caption" sx={{ color: 'var(--bal-trust)', fontWeight: 500 }}>
+            «{nurse.topReviewTag}»
+          </Typography>
+        ) : null}
+
         <Box sx={{ display: 'flex', alignItems: 'baseline', gap: 0.5, flexWrap: 'wrap' }}>
           <Typography variant="body2" sx={{ color: 'text.secondary' }}>
             {t('price_from')}
@@ -108,14 +142,15 @@ const NurseResultCard = ({ nurse, onSelect }: NurseResultCardProps) => {
   );
 };
 
-/** Matches the real card's anatomy (avatar disc, name/badge row, rating row, price row) so a loading list
- * doesn't jump when data lands. */
+/** Matches the real card's anatomy (avatar disc, name+badge row, service-label row, gender+visits meta
+ * row, rating row, price row) so a loading list doesn't jump when data lands. */
 const NurseResultCardSkeleton: FunctionComponent = () => (
   <Paper elevation={0} sx={{ p: 2, display: 'flex', gap: 2, alignItems: 'flex-start', border: '1px solid', borderColor: 'divider', borderRadius: 2 }}>
     <Skeleton variant="circular" width={56} height={56} />
     <Stack sx={{ gap: 0.75, flexGrow: 1 }}>
       <Skeleton variant="text" width="55%" height={28} />
-      <Skeleton variant="text" width="40%" height={20} />
+      <Skeleton variant="text" width="35%" height={20} />
+      <Skeleton variant="text" width="45%" height={18} />
       <Skeleton variant="text" width="30%" height={20} />
     </Stack>
   </Paper>