255 lines
9.8 KiB
TypeScript
255 lines
9.8 KiB
TypeScript
'use client';
|
|
|
|
import { useMemo, useState } from 'react';
|
|
import type { AppointmentColumnProvider, AppointmentRecord } from '@/types/appointment';
|
|
import { formatHourLabel } from '@/lib/appointmentTime';
|
|
import {
|
|
computeAppointmentLaneLayouts,
|
|
findOverlapCluster,
|
|
lanePositionStyles,
|
|
} from '@/lib/appointmentOverlapLayout';
|
|
import { purposeStyle } from '@/components/ui/appointments/appointmentPurposeStyles';
|
|
import { AppointmentOverlapPopover } from '@/components/ui/appointments/AppointmentOverlapPopover';
|
|
|
|
const HOUR_PX = 40;
|
|
const HOURS = Array.from({ length: 24 }, (_, i) => i);
|
|
|
|
function layoutBlock(apt: AppointmentRecord, day: Date): { top: string; height: string } | null {
|
|
const dayStart = new Date(day.getFullYear(), day.getMonth(), day.getDate(), 0, 0, 0, 0);
|
|
const dayEnd = new Date(day.getFullYear(), day.getMonth(), day.getDate() + 1, 0, 0, 0, 0);
|
|
const start = new Date(apt.startAt);
|
|
const end = new Date(apt.endAt);
|
|
const ms = dayEnd.getTime() - dayStart.getTime();
|
|
const clipStart = Math.max(start.getTime(), dayStart.getTime());
|
|
const clipEnd = Math.min(end.getTime(), dayEnd.getTime());
|
|
if (clipEnd <= clipStart) {
|
|
return null;
|
|
}
|
|
const top = ((clipStart - dayStart.getTime()) / ms) * 100;
|
|
const height = ((clipEnd - clipStart) / ms) * 100;
|
|
return { top: `${top}%`, height: `${height}%` };
|
|
}
|
|
|
|
function appointmentDurationMinutes(apt: AppointmentRecord): number {
|
|
const start = new Date(apt.startAt).getTime();
|
|
const end = new Date(apt.endAt).getTime();
|
|
return Math.max(0, Math.round((end - start) / 60_000));
|
|
}
|
|
|
|
function appointmentBannerHeightPx(durationMin: number): number {
|
|
return (durationMin / (24 * 60)) * HOURS.length * HOUR_PX;
|
|
}
|
|
|
|
function shortBannerNameClass(durationMin: number): string {
|
|
const heightPx = appointmentBannerHeightPx(durationMin);
|
|
if (heightPx < 18) {
|
|
return 'text-[8px] leading-none';
|
|
}
|
|
if (durationMin < 60) {
|
|
return 'text-[9px] leading-none';
|
|
}
|
|
return 'text-[11px] leading-tight';
|
|
}
|
|
|
|
type OverlapPopoverState = {
|
|
appointments: AppointmentRecord[];
|
|
anchorRect: DOMRect;
|
|
};
|
|
|
|
interface AppointmentScheduleGridProps {
|
|
day: Date;
|
|
providers: AppointmentColumnProvider[];
|
|
appointments: AppointmentRecord[];
|
|
canBook: boolean;
|
|
onSlotClick: (hour: number, providerUserId: string, providerName: string) => void;
|
|
onAppointmentClick?: (appointment: AppointmentRecord) => void;
|
|
}
|
|
|
|
export function AppointmentScheduleGrid({
|
|
day,
|
|
providers,
|
|
appointments,
|
|
canBook,
|
|
onSlotClick,
|
|
onAppointmentClick,
|
|
}: AppointmentScheduleGridProps) {
|
|
const gridHeight = HOURS.length * HOUR_PX;
|
|
const [overlapPopover, setOverlapPopover] = useState<OverlapPopoverState | null>(null);
|
|
|
|
const laneLayoutsByProvider = useMemo(() => {
|
|
const map = new Map<string, ReturnType<typeof computeAppointmentLaneLayouts>>();
|
|
for (const provider of providers) {
|
|
const providerApts = appointments.filter((a) => a.providerUserId === provider.userId);
|
|
map.set(provider.userId, computeAppointmentLaneLayouts(providerApts));
|
|
}
|
|
return map;
|
|
}, [appointments, providers]);
|
|
|
|
function handleAppointmentBannerClick(
|
|
apt: AppointmentRecord,
|
|
providerAppointments: AppointmentRecord[],
|
|
anchor: HTMLElement,
|
|
) {
|
|
const cluster = findOverlapCluster(apt.id, providerAppointments);
|
|
if (cluster.length > 1) {
|
|
setOverlapPopover({
|
|
appointments: cluster,
|
|
anchorRect: anchor.getBoundingClientRect(),
|
|
});
|
|
return;
|
|
}
|
|
onAppointmentClick?.(apt);
|
|
}
|
|
|
|
if (providers.length === 0) {
|
|
return (
|
|
<div className="surface-card p-6 text-sm text-text-muted">
|
|
No providers available. Add staff with treatment edit access to see columns here.
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<div className="surface-card overflow-x-auto">
|
|
<div className="min-w-[640px]">
|
|
<div className="flex border-b border-border">
|
|
<div className="w-14 flex-shrink-0" />
|
|
{providers.map((p) => (
|
|
<div
|
|
key={p.userId}
|
|
className="flex-1 min-w-[130px] text-center text-sm font-medium text-text-primary py-2.5 px-1 border-l border-border"
|
|
>
|
|
{p.name}
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<div className="flex">
|
|
<div className="w-14 flex-shrink-0 border-r border-border bg-background-secondary/40">
|
|
{HOURS.map((h) => (
|
|
<div
|
|
key={h}
|
|
className="text-[11px] text-text-muted flex items-start justify-end pr-1.5 pt-0.5 border-b border-border/50"
|
|
style={{ height: HOUR_PX }}
|
|
>
|
|
{formatHourLabel(h)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<div className="flex-1 flex min-w-0">
|
|
{providers.map((p) => {
|
|
const providerAppointments = appointments.filter(
|
|
(a) => a.providerUserId === p.userId,
|
|
);
|
|
const laneLayouts = laneLayoutsByProvider.get(p.userId) ?? new Map();
|
|
|
|
return (
|
|
<div
|
|
key={p.userId}
|
|
className="flex-1 min-w-[130px] border-l border-border relative"
|
|
style={{ height: gridHeight }}
|
|
>
|
|
{HOURS.map((h) => {
|
|
const slotDisabled = !canBook;
|
|
return (
|
|
<button
|
|
key={h}
|
|
type="button"
|
|
disabled={slotDisabled}
|
|
title={
|
|
slotDisabled
|
|
? 'You cannot create appointments'
|
|
: `Book ${formatHourLabel(h)}`
|
|
}
|
|
className={`absolute left-0 right-0 border-b border-border/50 transition-colors ${
|
|
slotDisabled
|
|
? 'cursor-not-allowed opacity-50'
|
|
: 'hover:bg-primary/8 cursor-pointer'
|
|
}`}
|
|
style={{ top: h * HOUR_PX, height: HOUR_PX }}
|
|
onClick={() => onSlotClick(h, p.userId, p.name)}
|
|
/>
|
|
);
|
|
})}
|
|
|
|
{providerAppointments.map((apt) => {
|
|
const pos = layoutBlock(apt, day);
|
|
if (!pos) {
|
|
return null;
|
|
}
|
|
const lane = laneLayouts.get(apt.id) ?? { lane: 0, laneCount: 1 };
|
|
const lanePos = lanePositionStyles(lane.lane, lane.laneCount);
|
|
const durationMin = appointmentDurationMinutes(apt);
|
|
const clusterSize = findOverlapCluster(apt.id, providerAppointments).length;
|
|
const isUnderOneHour = durationMin < 60;
|
|
const patientName = `${apt.patient.firstName} ${apt.patient.lastName}`;
|
|
const bannerTitle = [
|
|
patientName,
|
|
clusterSize > 1 ? `${clusterSize} overlapping — click to choose` : null,
|
|
!isUnderOneHour && apt.patient.phone ? apt.patient.phone : null,
|
|
]
|
|
.filter(Boolean)
|
|
.join(' · ');
|
|
|
|
return (
|
|
<button
|
|
type="button"
|
|
key={apt.id}
|
|
onClick={(e) =>
|
|
handleAppointmentBannerClick(apt, providerAppointments, e.currentTarget)
|
|
}
|
|
className={`absolute min-h-0 overflow-hidden rounded-[var(--radius-sm)] border pointer-events-auto z-10 flex text-left ${purposeStyle(apt.purpose)} focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/35 ${
|
|
isUnderOneHour
|
|
? 'items-center justify-center px-0.5 py-0'
|
|
: 'flex-col justify-start gap-0.5 px-1 py-0.5'
|
|
}`}
|
|
style={{
|
|
top: pos.top,
|
|
height: pos.height,
|
|
left: lanePos.left,
|
|
width: lanePos.width,
|
|
}}
|
|
title={bannerTitle}
|
|
>
|
|
<span
|
|
className={`block w-full truncate pointer-events-none font-medium ${shortBannerNameClass(durationMin)}`}
|
|
>
|
|
{patientName}
|
|
</span>
|
|
{!isUnderOneHour &&
|
|
apt.patient.phone &&
|
|
lane.laneCount === 1 && (
|
|
<span className="block w-full truncate pointer-events-none text-[10px] leading-tight opacity-90">
|
|
{apt.patient.phone}
|
|
</span>
|
|
)}
|
|
{!isUnderOneHour && clusterSize > 1 && (
|
|
<span className="block w-full truncate pointer-events-none text-[9px] leading-tight opacity-75">
|
|
{clusterSize} overlapping
|
|
</span>
|
|
)}
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{overlapPopover && (
|
|
<AppointmentOverlapPopover
|
|
appointments={overlapPopover.appointments}
|
|
anchorRect={overlapPopover.anchorRect}
|
|
onSelect={(apt) => onAppointmentClick?.(apt)}
|
|
onClose={() => setOverlapPopover(null)}
|
|
/>
|
|
)}
|
|
</>
|
|
);
|
|
}
|