hamid
97 lines
4.1 KiB
TypeScript
97 lines
4.1 KiB
TypeScript
'use client';
|
|
import { useLocale, useTranslations } from 'next-intl';
|
|
import { useRouter } from 'next/navigation';
|
|
import { Box, Skeleton, Stack } from '@mui/material';
|
|
import { AppButton, EmptyState, ErrorState, PageHeader } from '@/components';
|
|
import { SessionCard, useEvvController } from '@/components/booking';
|
|
import { CONTENT_MAX_WIDTH } from '@/components/config';
|
|
import { ROUTES } from '@/constants';
|
|
import { formatShamsiDate } from '@/utils';
|
|
import { useSessionEvv, useTodaySessions } from '@/services/bookings';
|
|
import type { BookingSessionListItemDto } from '@/services/bookings/types';
|
|
|
|
const TODAY_HEADER_DATE_OPTIONS: Intl.DateTimeFormatOptions = { month: 'long', day: 'numeric' };
|
|
|
|
/**
|
|
* Nurse ویزیت امروز (E3 top) — the day's operational surface. Lists today's sessions from
|
|
* `useTodaySessions` (polled every 60s so a same-day schedule change surfaces without re-navigation);
|
|
* each renders the shared `SessionCard` with the per-session EVV check-in/out control (driven by one
|
|
* `useEvvController`) and the advisory EVV banner once checked in. A GPS mismatch is advisory, never a
|
|
* block. Each card also deep-links to the full booking detail (`/nurse/visits/{id}`), where the gated
|
|
* care instructions live. Visit-note authoring + task checklist are deferred to f13.
|
|
*/
|
|
export default function NurseVisitsPage() {
|
|
const t = useTranslations('booking');
|
|
const locale = useLocale();
|
|
const { data, isLoading, isError, refetch } = useTodaySessions();
|
|
const evv = useEvvController();
|
|
const items = data?.items ?? [];
|
|
const dateAnchor = t('today_date_prefix', { date: formatShamsiDate(new Date(), locale, TODAY_HEADER_DATE_OPTIONS) });
|
|
|
|
return (
|
|
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 3, maxWidth: CONTENT_MAX_WIDTH, mx: 'auto', width: '100%' }}>
|
|
<PageHeader title={dateAnchor} subtitle={t('evv_visits_subtitle')} />
|
|
|
|
{isLoading ? (
|
|
<Stack sx={{ gap: 2 }}>
|
|
{[0, 1].map((key) => (
|
|
<Skeleton key={key} variant="rounded" height={150} />
|
|
))}
|
|
</Stack>
|
|
) : isError ? (
|
|
<ErrorState message={t('evv_visits_error')} retryLabel={t('retry')} onRetry={() => refetch()} />
|
|
) : items.length === 0 ? (
|
|
<EmptyState icon="visits" title={t('evv_no_visits')} />
|
|
) : (
|
|
<Stack sx={{ gap: 2 }}>
|
|
{items.map((item) => (
|
|
<TodayVisitCard key={item.sessionId} item={item} evv={evv} />
|
|
))}
|
|
</Stack>
|
|
)}
|
|
</Box>
|
|
);
|
|
}
|
|
|
|
function TodayVisitCard({ item, evv }: { item: BookingSessionListItemDto; evv: ReturnType<typeof useEvvController> }) {
|
|
const t = useTranslations('booking');
|
|
const locale = useLocale();
|
|
const router = useRouter();
|
|
|
|
// Fetch the EVV detail only once the session has activity, so the banner has the server check-in time.
|
|
const hasEvvActivity = item.evvStatus !== 'pending';
|
|
const { data: evvDetail } = useSessionEvv(item.sessionId, { enabled: hasEvvActivity });
|
|
|
|
return (
|
|
<Stack sx={{ gap: 0.75 }}>
|
|
<SessionCard
|
|
title={item.patientName}
|
|
serviceLabel={item.variantLabel}
|
|
sessionIndex={item.sessionIndex}
|
|
scheduledDate={item.scheduledDate}
|
|
scheduledTimeStart={item.scheduledTimeStart}
|
|
scheduledTimeEnd={item.scheduledTimeEnd}
|
|
status={item.status}
|
|
evvStatus={item.evvStatus}
|
|
checkInAt={evvDetail?.checkInAt ?? null}
|
|
checkOutAt={evvDetail?.checkOutAt ?? null}
|
|
checkInAddressMatch={evvDetail?.checkInAddressMatch ?? null}
|
|
showEvvControls
|
|
evvPending={evv.busySessionId === item.sessionId}
|
|
acquiringLocation={evv.acquiringSessionId === item.sessionId}
|
|
onCheckIn={() => evv.checkIn({ sessionId: item.sessionId, bookingId: item.bookingId })}
|
|
onCheckOut={() => evv.checkOut({ sessionId: item.sessionId, bookingId: item.bookingId })}
|
|
/>
|
|
<AppButton
|
|
variant="text"
|
|
color="primary"
|
|
endIcon="bookings"
|
|
onClick={() => router.push(`/${locale}${ROUTES.NURSE_VISITS}/${item.bookingId}`)}
|
|
sx={{ alignSelf: 'flex-start' }}
|
|
>
|
|
{t('view_booking')}
|
|
</AppButton>
|
|
</Stack>
|
|
);
|
|
}
|