hamid
297 lines
12 KiB
TypeScript
297 lines
12 KiB
TypeScript
'use client';
|
||
import { useLocale, useTranslations } from 'next-intl';
|
||
import { useRouter } from 'next/navigation';
|
||
import { Avatar, Box, Skeleton, Stack, Typography } from '@mui/material';
|
||
import {
|
||
AppButton,
|
||
AppIcon,
|
||
AppLink,
|
||
CountdownTimer,
|
||
EmptyState,
|
||
ErrorState,
|
||
Money,
|
||
SurfaceCard,
|
||
TrustBadge,
|
||
} from '@/components';
|
||
import { ROUTES } from '@/constants';
|
||
import { formatRelativeTime, formatShamsiDate, localeTag, parseIrr } from '@/utils';
|
||
import { useMe } from '@/services/auth';
|
||
import { useNurseRequestInbox } from '@/services/bookingRequests';
|
||
import { useTodaySessions } from '@/services/bookings';
|
||
import { useNurseEarningsBalance } from '@/services/payouts';
|
||
import { useUnreadCount } from '@/services/notifications';
|
||
import { useVerificationStatus } from '@/services/verification';
|
||
import { ownBadgeState } from '@/services/verification/types';
|
||
import { coarseResponseLabel } from '@/services/bookingRequests/format';
|
||
import DashboardActivationSlot from './DashboardActivationSlot';
|
||
|
||
const DASHBOARD_MAX_WIDTH = 960;
|
||
/** The pill's urgency tiers (ui-phase-7 §3.4): teal >2h · amber <2h · terracotta <30min. */
|
||
const URGENT_THRESHOLD_SECONDS = 30 * 60;
|
||
const WARN_THRESHOLD_SECONDS = 2 * 60 * 60;
|
||
|
||
/**
|
||
* The nurse "امروز" dashboard (ui-phase-7 §3.1) — the operational home replacing the `PlaceholderScreen`.
|
||
* Pure assembly: every widget reads an already-cached query. Order matters — the pending-requests strip
|
||
* is the most time-critical thing a nurse can miss, so it sits above the earnings snapshot.
|
||
*/
|
||
export default function NurseDashboardScreen() {
|
||
const t = useTranslations('dashboard');
|
||
const { data: me, isLoading: meLoading } = useMe();
|
||
const verification = useVerificationStatus();
|
||
|
||
const displayName = me ? [me.firstName, me.lastName].filter(Boolean).join(' ').trim() || me.phone : '';
|
||
|
||
return (
|
||
<Stack sx={{ gap: 3, maxWidth: DASHBOARD_MAX_WIDTH, mx: 'auto', width: '100%' }}>
|
||
<Stack direction="row" sx={{ gap: 1.5, alignItems: 'center' }}>
|
||
{meLoading ? (
|
||
<>
|
||
<Skeleton variant="circular" width={44} height={44} />
|
||
<Skeleton variant="text" width={160} height={32} />
|
||
</>
|
||
) : (
|
||
<>
|
||
<Avatar sx={{ width: 44, height: 44, bgcolor: 'var(--bal-primary-soft)', color: 'var(--bal-primary)', fontWeight: 700 }}>
|
||
{(displayName || '؟').charAt(0)}
|
||
</Avatar>
|
||
<Stack sx={{ gap: 0.5 }}>
|
||
<Typography variant="h6" component="h1" sx={{ fontWeight: 700 }}>
|
||
{t('greeting', { name: displayName })}
|
||
</Typography>
|
||
{!verification.isLoading ? <TrustBadge state={ownBadgeState(verification.data)} /> : null}
|
||
</Stack>
|
||
</>
|
||
)}
|
||
</Stack>
|
||
|
||
<NextVisitCard />
|
||
<RequestsStrip />
|
||
<EarningsSnapshotCard />
|
||
<DashboardActivationSlot />
|
||
<NotificationsEntryRow />
|
||
</Stack>
|
||
);
|
||
}
|
||
|
||
/** First actionable session from `useTodaySessions` + a display-only "time until" line. */
|
||
function NextVisitCard() {
|
||
const t = useTranslations('dashboard');
|
||
const locale = useLocale();
|
||
const router = useRouter();
|
||
const { data, isLoading, isError, refetch } = useTodaySessions();
|
||
|
||
if (isLoading) return <Skeleton variant="rounded" height={140} />;
|
||
if (isError) {
|
||
return <ErrorState message={t('next_visit_error')} retryLabel={t('retry')} onRetry={() => refetch()} />;
|
||
}
|
||
|
||
const items = data?.items ?? [];
|
||
const next = items.find((item) => item.status === 'scheduled' || item.status === 'in_progress');
|
||
|
||
if (!next) {
|
||
return <EmptyState icon="visits" title={t('next_visit_empty')} />;
|
||
}
|
||
|
||
const timeFmt = new Intl.DateTimeFormat(localeTag(locale), { hour: '2-digit', minute: '2-digit' });
|
||
const timeRangeLabel = `${timeFmt.format(new Date(`${next.scheduledDate}T${next.scheduledTimeStart}`))} – ${timeFmt.format(new Date(`${next.scheduledDate}T${next.scheduledTimeEnd}`))}`;
|
||
const timeUntil = formatRelativeTime(`${next.scheduledDate}T${next.scheduledTimeStart}`, locale, formatShamsiDate);
|
||
|
||
return (
|
||
<SurfaceCard data-widget="next-visit">
|
||
<Stack sx={{ gap: 1.25 }}>
|
||
<Stack direction="row" sx={{ gap: 1, alignItems: 'center' }}>
|
||
<AppIcon icon="visits" size={20} color="var(--bal-primary)" />
|
||
<Typography variant="subtitle1" sx={{ fontWeight: 700 }}>
|
||
{t('next_visit_title')}
|
||
</Typography>
|
||
</Stack>
|
||
<Stack sx={{ gap: 0.25 }}>
|
||
<Typography variant="body1" sx={{ fontWeight: 500 }}>
|
||
{next.patientName}
|
||
</Typography>
|
||
<Typography variant="body2" sx={{ color: 'text.secondary' }}>
|
||
<Typography component="span" dir="ltr" sx={{ fontVariantNumeric: 'tabular-nums' }}>
|
||
{timeRangeLabel}
|
||
</Typography>
|
||
{timeUntil ? ` · ${t('next_visit_starts_in', { relative: timeUntil })}` : ''}
|
||
</Typography>
|
||
</Stack>
|
||
<AppButton
|
||
variant="contained"
|
||
color="secondary"
|
||
startIcon="check_in"
|
||
onClick={() => router.push(`/${locale}${ROUTES.NURSE_VISITS}`)}
|
||
sx={{ alignSelf: 'flex-start' }}
|
||
>
|
||
{t('next_visit_cta')}
|
||
</AppButton>
|
||
</Stack>
|
||
</SurfaceCard>
|
||
);
|
||
}
|
||
|
||
/** The most time-critical widget: pending-request count + the most urgent countdown, inline into detail. */
|
||
function RequestsStrip() {
|
||
const t = useTranslations('dashboard');
|
||
const tb = useTranslations('booking');
|
||
const locale = useLocale();
|
||
const router = useRouter();
|
||
const { data, isLoading, isError, refetch } = useNurseRequestInbox();
|
||
|
||
if (isLoading) return <Skeleton variant="rounded" height={140} />;
|
||
if (isError) {
|
||
return <ErrorState message={t('requests_strip_error')} retryLabel={t('retry')} onRetry={() => refetch()} />;
|
||
}
|
||
|
||
const items = data?.items ?? [];
|
||
const total = data?.total ?? 0;
|
||
|
||
if (items.length === 0) {
|
||
return <EmptyState icon="requests" title={t('requests_strip_empty')} />;
|
||
}
|
||
|
||
const mostUrgent = items[0];
|
||
|
||
return (
|
||
<SurfaceCard data-widget="requests-strip">
|
||
<Stack sx={{ gap: 1.25 }}>
|
||
<Stack direction="row" sx={{ gap: 1, alignItems: 'center', justifyContent: 'space-between' }}>
|
||
<Stack direction="row" sx={{ gap: 1, alignItems: 'center' }}>
|
||
<AppIcon icon="requests" size={20} color="var(--bal-secondary)" />
|
||
<Typography variant="subtitle1" sx={{ fontWeight: 700 }}>
|
||
{t('requests_strip_title', { count: total })}
|
||
</Typography>
|
||
</Stack>
|
||
<AppButton
|
||
variant="text"
|
||
color="primary"
|
||
endIcon="requests"
|
||
onClick={() => router.push(`/${locale}${ROUTES.NURSE_REQUESTS}`)}
|
||
>
|
||
{t('requests_strip_cta')}
|
||
</AppButton>
|
||
</Stack>
|
||
|
||
<Stack
|
||
direction="row"
|
||
sx={{ gap: 1.5, alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap' }}
|
||
>
|
||
<Stack sx={{ gap: 0.25, minWidth: 0 }}>
|
||
<Typography variant="body1" sx={{ fontWeight: 500 }}>
|
||
{mostUrgent.counterpartyName}
|
||
</Typography>
|
||
<Typography variant="caption" sx={{ color: 'text.secondary' }}>
|
||
{formatShamsiDate(mostUrgent.requestedDate, locale)}
|
||
</Typography>
|
||
</Stack>
|
||
<CountdownTimer
|
||
deadlineIso={mostUrgent.nurseResponseDeadlineAt}
|
||
elapsedText={tb('response_elapsed')}
|
||
warnThresholdSeconds={WARN_THRESHOLD_SECONDS}
|
||
urgentThresholdSeconds={URGENT_THRESHOLD_SECONDS}
|
||
coarseLabel={(minutes) => coarseResponseLabel(minutes, tb)}
|
||
size="sm"
|
||
/>
|
||
</Stack>
|
||
|
||
<AppButton
|
||
variant="outlined"
|
||
color="primary"
|
||
endIcon="requests"
|
||
onClick={() => router.push(`/${locale}${ROUTES.NURSE_REQUESTS}/${mostUrgent.id}`)}
|
||
sx={{ alignSelf: 'flex-start' }}
|
||
>
|
||
{t('requests_strip_open')}
|
||
</AppButton>
|
||
</Stack>
|
||
</SurfaceCard>
|
||
);
|
||
}
|
||
|
||
/** A compact two-stat row (net payable + eligible) — never clamps a negative net balance. */
|
||
function EarningsSnapshotCard() {
|
||
const t = useTranslations('dashboard');
|
||
const tp = useTranslations('payouts');
|
||
const locale = useLocale();
|
||
const router = useRouter();
|
||
const { data, isLoading, isError, refetch } = useNurseEarningsBalance();
|
||
|
||
if (isLoading) return <Skeleton variant="rounded" height={120} />;
|
||
if (isError) {
|
||
return <ErrorState message={t('earnings_snapshot_error')} retryLabel={t('retry')} onRetry={() => refetch()} />;
|
||
}
|
||
if (!data) return null;
|
||
|
||
const net = parseIrr(data.netPayableBalanceIrr);
|
||
const isOwed = net < BigInt(0);
|
||
const magnitude = isOwed ? -net : net;
|
||
|
||
return (
|
||
<SurfaceCard data-widget="earnings-snapshot">
|
||
<Stack sx={{ gap: 1.5 }}>
|
||
<Stack direction="row" sx={{ gap: 1, alignItems: 'center', justifyContent: 'space-between' }}>
|
||
<Stack direction="row" sx={{ gap: 1, alignItems: 'center' }}>
|
||
<AppIcon icon="earnings" size={20} color="var(--bal-primary)" />
|
||
<Typography variant="subtitle1" sx={{ fontWeight: 700 }}>
|
||
{t('earnings_snapshot_title')}
|
||
</Typography>
|
||
</Stack>
|
||
<AppButton
|
||
variant="text"
|
||
color="primary"
|
||
endIcon="earnings"
|
||
onClick={() => router.push(`/${locale}${ROUTES.NURSE_EARNINGS}`)}
|
||
>
|
||
{t('earnings_snapshot_cta')}
|
||
</AppButton>
|
||
</Stack>
|
||
<Box sx={{ display: 'grid', gap: 1.5, gridTemplateColumns: '1fr 1fr' }}>
|
||
<Stack sx={{ gap: 0.25 }}>
|
||
<Typography variant="caption" sx={{ color: 'text.secondary' }}>
|
||
{isOwed ? tp('balance_owed_label') : tp('balance_net_label')}
|
||
</Typography>
|
||
<Money amountIrr={String(magnitude)} size="lg" tone={isOwed ? 'error' : 'emphasis'} sx={{ fontWeight: 800 }} />
|
||
</Stack>
|
||
<Stack sx={{ gap: 0.25 }}>
|
||
<Typography variant="caption" sx={{ color: 'text.secondary' }}>
|
||
{tp('bucket_eligible')}
|
||
</Typography>
|
||
<Money amountIrr={data.eligibleTotalIrr} size="lg" sx={{ fontWeight: 800 }} />
|
||
</Stack>
|
||
</Box>
|
||
</Stack>
|
||
</SurfaceCard>
|
||
);
|
||
}
|
||
|
||
/** The unread-count entry row — the bell in the shell chrome is Phase 2's; this is a dashboard shortcut. */
|
||
function NotificationsEntryRow() {
|
||
const t = useTranslations('dashboard');
|
||
const locale = useLocale();
|
||
const unread = useUnreadCount();
|
||
|
||
return (
|
||
<AppLink to={`/${locale}${ROUTES.NURSE_NOTIFICATIONS}`} color="inherit" underline="none" sx={{ display: 'block' }}>
|
||
<SurfaceCard data-widget="notifications-entry">
|
||
<Stack direction="row" sx={{ gap: 1.5, alignItems: 'center', justifyContent: 'space-between' }}>
|
||
<Stack direction="row" sx={{ gap: 1, alignItems: 'center' }}>
|
||
<AppIcon icon="notifications" size={20} color="var(--bal-primary)" />
|
||
<Typography variant="body1" sx={{ fontWeight: 500 }}>
|
||
{t('notifications_entry_title')}
|
||
</Typography>
|
||
</Stack>
|
||
<Typography
|
||
variant="body2"
|
||
// --bal-secondary-dark, not --bal-secondary: the plain terracotta fails AA contrast for
|
||
// small text on a light surface (frontend-designer skill §2) — this is body copy, not an icon.
|
||
sx={{ color: unread > 0 ? 'var(--bal-secondary-dark)' : 'text.secondary', fontWeight: unread > 0 ? 700 : 400 }}
|
||
>
|
||
{unread > 0 ? t('notifications_entry_unread', { count: unread }) : t('notifications_entry_empty')}
|
||
</Typography>
|
||
</Stack>
|
||
</SurfaceCard>
|
||
</AppLink>
|
||
);
|
||
}
|