feature: a minimal implementation of the appointment feature done.
This commit is contained in:
@@ -0,0 +1,157 @@
|
||||
'use client';
|
||||
|
||||
import { Trash2 } from 'lucide-react';
|
||||
import type { AppointmentColumnProvider, AppointmentRecord } from '@/types/appointment';
|
||||
import { formatHourLabel } from '@/lib/appointmentTime';
|
||||
import { purposeDeleteIconClass, purposeStyle } from '@/components/ui/appointments/appointmentPurposeStyles';
|
||||
|
||||
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}%` };
|
||||
}
|
||||
|
||||
interface AppointmentScheduleGridProps {
|
||||
day: Date;
|
||||
providers: AppointmentColumnProvider[];
|
||||
appointments: AppointmentRecord[];
|
||||
canBook: boolean;
|
||||
canDelete?: boolean;
|
||||
onDeleteAppointment?: (id: string) => void;
|
||||
onSlotClick: (hour: number, providerUserId: string, providerName: string) => void;
|
||||
}
|
||||
|
||||
export function AppointmentScheduleGrid({
|
||||
day,
|
||||
providers,
|
||||
appointments,
|
||||
canBook,
|
||||
canDelete = false,
|
||||
onDeleteAppointment,
|
||||
onSlotClick,
|
||||
}: AppointmentScheduleGridProps) {
|
||||
const gridHeight = HOURS.length * HOUR_PX;
|
||||
|
||||
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) => (
|
||||
<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)}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
|
||||
{appointments
|
||||
.filter((a) => a.providerUserId === p.userId)
|
||||
.map((apt) => {
|
||||
const pos = layoutBlock(apt, day);
|
||||
if (!pos) {
|
||||
return null;
|
||||
}
|
||||
return (
|
||||
<div
|
||||
key={apt.id}
|
||||
className={`absolute left-0.5 right-0.5 rounded-[var(--radius-sm)] border pointer-events-none z-10 flex flex-row items-center gap-1.5 px-1.5 py-1 min-h-[36px] ${purposeStyle(apt.purpose)}`}
|
||||
style={{ top: pos.top, height: pos.height, minHeight: 36 }}
|
||||
>
|
||||
<div className="pointer-events-none flex-1 min-w-0 overflow-hidden text-left">
|
||||
<p className="text-[11px] font-medium leading-tight truncate">
|
||||
{apt.patient.firstName} {apt.patient.lastName}
|
||||
</p>
|
||||
{apt.patient.phone && (
|
||||
<p className="text-[10px] opacity-90 truncate">{apt.patient.phone}</p>
|
||||
)}
|
||||
</div>
|
||||
{canDelete && onDeleteAppointment && (
|
||||
<button
|
||||
type="button"
|
||||
className={`pointer-events-auto shrink-0 self-center z-20 m-1 inline-flex cursor-pointer items-center justify-center border-0 bg-transparent p-2 outline-none transition-opacity hover:opacity-90 focus-visible:rounded-[var(--radius-sm)] focus-visible:ring-2 focus-visible:ring-primary/35 ${purposeDeleteIconClass(apt.purpose)}`}
|
||||
aria-label="Delete appointment"
|
||||
title="Delete appointment"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onDeleteAppointment(apt.id);
|
||||
}}
|
||||
>
|
||||
<Trash2 className="h-6 w-6 icon-flat" strokeWidth={2.25} />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user