backend phase 13 & frontend phase 6

client/src/components/NurseResultCard/NurseResultCard.test.tsx

@@ -0,0 +1,82 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import { ThemeProvider } from '../../theme';
+import type { NurseSearchResult } from '@/services/search/types';
+
+// next-intl echoes keys; locale = en so the rating/price format with ASCII digits we can assert on.
+jest.mock('next-intl', () => ({
+  useTranslations: () => (key: string) => key,
+  useLocale: () => 'en',
+}));
+
+import NurseResultCard from './NurseResultCard';
+
+const NURSE: NurseSearchResult = {
+  nurseId: 1,
+  variantId: 11,
+  serviceCategoryId: 1,
+  nurseName: 'Maryam Rezaei',
+  avatarUrl: null,
+  isVerified: true,
+  averageRating: 4.9,
+  totalReviews: 37,
+  totalCompletedBookings: 52,
+  distanceKm: 2.4,
+  priceFromIrr: '2800000',
+  priceUnit: 'per_hour',
+  nurseGender: 'female',
+  cityId: 101,
+  districtId: 1003,
+};
+
+function renderCard(nurse: NurseSearchResult, onSelect = jest.fn()) {
+  render(
+    <ThemeProvider>
+      <NurseResultCard nurse={nurse} onSelect={onSelect} />
+    </ThemeProvider>,
+  );
+  return onSelect;
+}
+
+describe('<NurseResultCard/> component', () => {
+  it('renders the name, the reused verified badge, and the rating', () => {
+    renderCard(NURSE);
+    expect(screen.getByText('Maryam Rezaei')).toBeInTheDocument();
+    expect(screen.getByText('badge_verified')).toBeInTheDocument();
+    expect(screen.getByText('4.9')).toBeInTheDocument();
+    expect(screen.getByText('reviews_count')).toBeInTheDocument();
+  });
+
+  it('renders the "from" price line as grouped Toman via the money util', () => {
+    renderCard(NURSE);
+    expect(screen.getByText('price_from')).toBeInTheDocument();
+    // 2,800,000 IRR = 280,000 Toman.
+    expect(screen.getByText(/280,000/)).toBeInTheDocument();
+  });
+
+  it('shows the distance chip only when distanceKm is present', () => {
+    const { rerender } = render(
+      <ThemeProvider>
+        <NurseResultCard nurse={NURSE} onSelect={jest.fn()} />
+      </ThemeProvider>,
+    );
+    expect(screen.getByText('distance_km')).toBeInTheDocument();
+
+    rerender(
+      <ThemeProvider>
+        <NurseResultCard nurse={{ ...NURSE, distanceKm: null }} onSelect={jest.fn()} />
+      </ThemeProvider>,
+    );
+    expect(screen.queryByText('distance_km')).not.toBeInTheDocument();
+  });
+
+  it('falls back to a label when the name is missing (b7 join gap)', () => {
+    renderCard({ ...NURSE, nurseName: '' });
+    expect(screen.getByText('unnamed_nurse')).toBeInTheDocument();
+  });
+
+  it('calls onSelect with the nurse row when clicked', () => {
+    const onSelect = renderCard(NURSE);
+    fireEvent.click(screen.getByRole('button'));
+    expect(onSelect).toHaveBeenCalledWith(NURSE);
+  });
+});

client/src/components/NurseResultCard/NurseResultCard.tsx

@@ -0,0 +1,117 @@
+import { memo } from 'react';
+import { useLocale, useTranslations } from 'next-intl';
+import { Avatar, Box, Paper, Stack, Typography } from '@mui/material';
+import AppIcon from '../common/AppIcon';
+import TrustBadge from '../TrustBadge';
+import PriceDisplay from '../PriceDisplay';
+import type { NurseSearchResult } from '@/services/search/types';
+
+export interface NurseResultCardProps {
+  /** One search-result row (a bookable variant in a covered area). */
+  nurse: NurseSearchResult;
+  /** Tapping the card opens the nurse profile (C3), carrying the row (nurse + variant + gender intent). */
+  onSelect: (nurse: NurseSearchResult) => void;
+}
+
+function ratingText(rating: number, locale: string): string {
+  return new Intl.NumberFormat(locale === 'fa' ? 'fa-IR' : 'en-US', {
+    minimumFractionDigits: 1,
+    maximumFractionDigits: 1,
+  }).format(rating);
+}
+
+/**
+ * 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.
+ * @component NurseResultCard
+ */
+const NurseResultCard = ({ nurse, onSelect }: NurseResultCardProps) => {
+  const t = useTranslations('search');
+  const locale = useLocale();
+
+  const name = nurse.nurseName.trim() || t('unnamed_nurse');
+  const initial = name.charAt(0);
+  const distance =
+    nurse.distanceKm != null
+      ? new Intl.NumberFormat(locale === 'fa' ? 'fa-IR' : 'en-US', { maximumFractionDigits: 1 }).format(
+          nurse.distanceKm,
+        )
+      : null;
+
+  return (
+    <Paper
+      elevation={0}
+      onClick={() => onSelect(nurse)}
+      role="button"
+      tabIndex={0}
+      onKeyDown={(event) => {
+        if (event.key === 'Enter' || event.key === ' ') {
+          event.preventDefault();
+          onSelect(nurse);
+        }
+      }}
+      sx={{
+        p: 2,
+        display: 'flex',
+        gap: 2,
+        alignItems: 'flex-start',
+        border: '1px solid',
+        borderColor: 'divider',
+        borderRadius: 2,
+        cursor: 'pointer',
+        transition: 'border-color 120ms ease',
+        '&:hover': { borderColor: 'var(--bal-primary)' },
+        '&:focus-visible': { outline: '2px solid var(--bal-primary)', outlineOffset: 2 },
+      }}
+    >
+      <Avatar
+        src={nurse.avatarUrl ?? undefined}
+        sx={{ width: 56, height: 56, bgcolor: 'var(--bal-primary-soft)', color: 'var(--bal-primary)', fontWeight: 700 }}
+      >
+        {initial}
+      </Avatar>
+
+      <Stack sx={{ gap: 0.75, 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" />
+        </Stack>
+
+        <Stack direction="row" sx={{ gap: 1.5, alignItems: 'center', flexWrap: 'wrap' }}>
+          <Stack direction="row" sx={{ gap: 0.5, alignItems: 'center' }}>
+            <AppIcon icon="star" size={16} color="var(--bal-warning)" />
+            <Typography variant="body2" sx={{ fontWeight: 700 }}>
+              {ratingText(nurse.averageRating, locale)}
+            </Typography>
+            <Typography variant="body2" sx={{ color: 'text.secondary' }}>
+              {t('reviews_count', { count: nurse.totalReviews })}
+            </Typography>
+          </Stack>
+
+          {distance != null ? (
+            <Stack direction="row" sx={{ gap: 0.25, alignItems: 'center' }}>
+              <AppIcon icon="location" size={16} color="var(--bal-text-secondary)" />
+              <Typography variant="body2" sx={{ color: 'text.secondary' }}>
+                {t('distance_km', { km: distance })}
+              </Typography>
+            </Stack>
+          ) : null}
+        </Stack>
+
+        <Box sx={{ display: 'flex', alignItems: 'baseline', gap: 0.5, flexWrap: 'wrap' }}>
+          <Typography variant="body2" sx={{ color: 'text.secondary' }}>
+            {t('price_from')}
+          </Typography>
+          <PriceDisplay price={nurse.priceFromIrr} priceUnit={nurse.priceUnit} align="start" />
+        </Box>
+      </Stack>
+    </Paper>
+  );
+};
+
+export default memo(NurseResultCard);

client/src/components/NurseResultCard/index.tsx

@@ -0,0 +1,2 @@
+export { default } from './NurseResultCard';
+export type { NurseResultCardProps } from './NurseResultCard';

client/src/components/ServicePriceRow/ServicePriceRow.test.tsx

@@ -0,0 +1,36 @@
+import { render, screen } from '@testing-library/react';
+import { ThemeProvider } from '../../theme';
+
+// next-intl is mocked to echo keys; locale = en so the money util groups with ASCII digits we can assert on.
+jest.mock('next-intl', () => ({
+  useTranslations: () => (key: string) => key,
+  useLocale: () => 'en',
+}));
+
+import ServicePriceRow from './ServicePriceRow';
+
+function renderRow(props: React.ComponentProps<typeof ServicePriceRow>) {
+  return render(
+    <ThemeProvider>
+      <ServicePriceRow {...props} />
+    </ThemeProvider>,
+  );
+}
+
+describe('<ServicePriceRow/> component', () => {
+  it('renders the service name', () => {
+    renderRow({ displayName: 'Daytime elderly care', priceIrr: '2800000', priceUnit: 'per_hour' });
+    expect(screen.getByText('Daytime elderly care')).toBeInTheDocument();
+  });
+
+  it('renders the price as grouped Toman via the shared money display', () => {
+    // 2,800,000 IRR = 280,000 Toman.
+    renderRow({ displayName: 'Daytime elderly care', priceIrr: '2800000', priceUnit: 'per_hour' });
+    expect(screen.getByText(/280,000/)).toBeInTheDocument();
+  });
+
+  it('renders the unit label off the price_unit code (never hardcoded)', () => {
+    renderRow({ displayName: 'Live-in care', priceIrr: '85000000', priceUnit: 'per_24h' });
+    expect(screen.getByText('unit_per_24h')).toBeInTheDocument();
+  });
+});

client/src/components/ServicePriceRow/ServicePriceRow.tsx

@@ -0,0 +1,48 @@
+import { FunctionComponent } from 'react';
+import { Stack, Typography } from '@mui/material';
+import PriceDisplay from '../PriceDisplay';
+import type { PriceUnit } from '@/services/catalog/types';
+
+export interface ServicePriceRowProps {
+  /** The variant/service name, already localised by the caller. */
+  displayName: string;
+  /** IRR Rials as a digit-string (wire shape); rendered as Toman via the money util in PriceDisplay. */
+  priceIrr: string;
+  /** Drives the unit label — an i18n key off the code, never hardcoded. */
+  priceUnit: PriceUnit;
+  /** Duration/count carried for later booking-summary reuse; not shown as a total here. */
+  sessionCount?: number | null;
+}
+
+/**
+ * One offered-service line: the service name on the start edge, the priced rate on the end edge. The
+ * money + unit label render through the shared `PriceDisplay` (which uses the f0 money util and the
+ * i18n `catalog` unit labels) — never re-implemented here. Used on the C3 nurse profile now and reused
+ * by the booking summary (f7+).
+ * @component ServicePriceRow
+ */
+const ServicePriceRow: FunctionComponent<ServicePriceRowProps> = ({
+  displayName,
+  priceIrr,
+  priceUnit,
+  sessionCount,
+}) => (
+  <Stack
+    direction="row"
+    sx={{
+      gap: 2,
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      py: 1.5,
+      borderBottom: '1px solid',
+      borderColor: 'divider',
+    }}
+  >
+    <Typography variant="body1" sx={{ fontWeight: 600, flexGrow: 1 }}>
+      {displayName}
+    </Typography>
+    <PriceDisplay price={priceIrr} priceUnit={priceUnit} sessionCount={sessionCount} align="start" />
+  </Stack>
+);
+
+export default ServicePriceRow;

client/src/components/ServicePriceRow/index.tsx

@@ -0,0 +1,2 @@
+export { default } from './ServicePriceRow';
+export type { ServicePriceRowProps } from './ServicePriceRow';

client/src/components/common/AppIcon/config.ts

@@ -55,6 +55,9 @@ import RefreshIcon from '@mui/icons-material/RefreshOutlined';
 import IdentityIcon from '@mui/icons-material/BadgeOutlined';
 import LicenseIcon from '@mui/icons-material/WorkspacePremiumOutlined';
 import PublishIcon from '@mui/icons-material/RocketLaunchOutlined';
+// Search & discovery — the customer nurse-finding flow (f6/b7): rating star, filter controls
+import StarIcon from '@mui/icons-material/Star';
+import TuneIcon from '@mui/icons-material/TuneOutlined';
 
 /**
  * List of all available Icon names
@@ -123,4 +126,6 @@ export const ICONS /* Note: Setting type disables property autocomplete :( was -
   identity: IdentityIcon,
   license: LicenseIcon,
   publish: PublishIcon,
+  star: StarIcon,
+  tune: TuneIcon,
 };

client/src/components/index.tsx

@@ -17,6 +17,8 @@ import PriceDisplay from './PriceDisplay';
 import VariantCard from './VariantCard';
 import TrustBadge from './TrustBadge';
 import DocumentUpload from './DocumentUpload';
+import NurseResultCard from './NurseResultCard';
+import ServicePriceRow from './ServicePriceRow';
 
 export {
   UserInfo,
@@ -36,6 +38,8 @@ export {
   VariantCard,
   TrustBadge,
   DocumentUpload,
+  NurseResultCard,
+  ServicePriceRow,
 };
 export type { PlaceholderScreenProps } from './PlaceholderScreen';
 export type { OtpInputProps } from './OtpInput';
@@ -53,3 +57,5 @@ export type { PriceDisplayProps } from './PriceDisplay';
 export type { VariantCardProps } from './VariantCard';
 export type { TrustBadgeProps } from './TrustBadge';
 export type { DocumentUploadProps, UploadedDocInfo } from './DocumentUpload';
+export type { NurseResultCardProps } from './NurseResultCard';
+export type { ServicePriceRowProps } from './ServicePriceRow';