hamid
76 lines
2.7 KiB
TypeScript
76 lines
2.7 KiB
TypeScript
'use client';
|
|
import { FunctionComponent } from 'react';
|
|
import Box from '@mui/material/Box';
|
|
import Chip from '@mui/material/Chip';
|
|
import Stack from '@mui/material/Stack';
|
|
import Typography from '@mui/material/Typography';
|
|
import { InitialsAvatar } from '@/components/common';
|
|
|
|
export interface PatientHeaderProps {
|
|
/** The patient's display name. */
|
|
displayName: string;
|
|
/** Translated relation label; omitted when the patient has no relation set. */
|
|
relationLabel?: string;
|
|
/** Translated gender label. */
|
|
genderLabel: string;
|
|
/** Translated age label (e.g. "70 yrs"); omitted when the birth date is unknown. */
|
|
ageLabel?: string;
|
|
/** Translated condition labels; empty renders the "no conditions" line. */
|
|
conditionLabels: string[];
|
|
noConditionsLabel: string;
|
|
}
|
|
|
|
/**
|
|
* The patient identity block — bold name + relation chip, a secondary "age · gender" meta line, and outlined
|
|
* condition chips (or a "no conditions" caption). Extracted from `PatientCard` so the E1 list card and the E2
|
|
* record viewer render the exact same header. Purely presentational; the caller translates every label and
|
|
* tolerates a missing relation / empty conditions (both are client-augmented, may be empty on a real read).
|
|
* @component PatientHeader
|
|
*/
|
|
const PatientHeader: FunctionComponent<PatientHeaderProps> = ({
|
|
displayName,
|
|
relationLabel,
|
|
genderLabel,
|
|
ageLabel,
|
|
conditionLabels,
|
|
noConditionsLabel,
|
|
}) => {
|
|
const meta = [ageLabel, genderLabel].filter(Boolean).join(' · ');
|
|
|
|
return (
|
|
<Stack direction="row" sx={{ gap: 1.25, minWidth: 0 }}>
|
|
<InitialsAvatar name={displayName} />
|
|
<Stack sx={{ gap: 0.75, minWidth: 0, flexGrow: 1 }}>
|
|
<Stack direction="row" sx={{ alignItems: 'center', gap: 1, flexWrap: 'wrap' }}>
|
|
<Typography variant="subtitle1" sx={{ fontWeight: 700 }}>
|
|
{displayName}
|
|
</Typography>
|
|
{relationLabel ? (
|
|
<Chip size="small" label={relationLabel} sx={{ bgcolor: 'var(--bal-primary-soft)', fontWeight: 500 }} />
|
|
) : null}
|
|
</Stack>
|
|
|
|
{meta ? (
|
|
<Typography variant="body2" sx={{ color: 'text.secondary' }}>
|
|
{meta}
|
|
</Typography>
|
|
) : null}
|
|
|
|
{conditionLabels.length > 0 ? (
|
|
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5, mt: 0.25 }}>
|
|
{conditionLabels.map((label) => (
|
|
<Chip key={label} size="small" variant="outlined" label={label} />
|
|
))}
|
|
</Box>
|
|
) : (
|
|
<Typography variant="caption" sx={{ color: 'text.secondary' }}>
|
|
{noConditionsLabel}
|
|
</Typography>
|
|
)}
|
|
</Stack>
|
|
</Stack>
|
|
);
|
|
};
|
|
|
|
export default PatientHeader;
|