- {hourMarks.map((hour) =>
- hour === END_HOUR ? null : (
-
- {formatHour(hour)}
- {[15, 30, 45].map((minute) => (
-
- {minute}
-
- ))}
-
- ),
- )}
- {showCurrentTime && (
-
-
-
- {formatCurrentTimeLabel(currentTimeMinutes!)}
-
-
- )}
-
+
+ {}}
+ onView={() => {}}
+ getNow={() => (currentTimeMinutes === null ? floatingNotToday() : minutesToFloatingDate(currentTimeMinutes))}
+ events={events}
+ backgroundEvents={backgroundEvents}
+ resources={resources}
+ resourceIdAccessor={(r) => r.id}
+ resourceTitleAccessor={(r) => r.column.name}
+ step={15}
+ timeslots={4}
+ min={minutesToFloatingDate(START_HOUR * 60)}
+ max={minutesToFloatingDate(END_HOUR * 60)}
+ scrollToTime={minutesToFloatingDate(scrollMinutes)}
+ dayLayoutAlgorithm="no-overlap"
+ selectable={false}
+ resizable={false}
+ draggableAccessor={canMove}
+ onEventDrop={handleDrop}
+ onSelectEvent={(event) => {
+ if (event.kind === "appointment") router.push(`${appointmentHrefBase}/${event.id}`);
+ }}
+ eventPropGetter={(event) => ({
+ className: cn("day-cal-appointment", canMove(event) && "day-cal-movable"),
+ })}
+ slotPropGetter={(slotDate, resourceId) =>
+ isOffHours(typeof resourceId === "string" ? columnById.get(resourceId) : undefined, slotDate)
+ ? { className: "day-cal-offhours" }
+ : {}
+ }
+ formats={{
+ timeGutterFormat: (value) => formatHourLabel(value.getHours()),
+ // Hidden visually (the block draws its own compact time) but kept for
+ // the accessible name, which the library builds as ": ".
+ eventTimeRangeFormat: ({ start, end }) =>
+ `${formatClock(floatingDateToMinutes(start))} – ${formatClock(floatingDateToMinutes(end))}`,
+ }}
+ components={{
+ event: EventContent,
+ resourceHeader: ({ resource }) => <ColumnHeader column={(resource as CalendarResource).column} />,
+ }}
+ />
</div>
- {/* Staff columns — a separately-scrolling strip, so swiping through staff never drags the axis along with it. Each column is a full swipeable "page": its own header, then its own grid body. */}
- <div className="snap-x snap-mandatory flex flex-1 gap-3 overflow-x-auto">
- {columns.map((column) => (
- <div key={column.id} className={COLUMN_WIDTH_CLASS}>
- <div className="flex items-center gap-2 pb-3" style={{ height: HEADER_HEIGHT }}>
- {column.avatarUrl ? (
- <Image
- src={column.avatarUrl}
- alt=""
- width={36}
- height={36}
- className="h-9 w-9 shrink-0 rounded-full border border-line object-cover"
- />
- ) : (
- <div className="bg-white text-muted flex h-9 w-9 shrink-0 items-center justify-center rounded-full border border-line text-sm font-bold">
- {column.name.charAt(0)}
- </div>
- )}
- <div className="min-w-0">
- <p className="truncate text-sm font-bold">{column.name}</p>
- <p className="text-muted truncate text-[10px]">{column.hoursLabel ?? "Off today"}</p>
- </div>
+ <Modal
+ open={!!pendingMove}
+ onClose={() => {
+ if (!isPending) setPendingMove(null);
+ }}
+ title={reassigning ? "Move to another barber?" : "Move this appointment?"}
+ >
+ {pendingMove && (
+ <div className="space-y-4">
+ <div className="space-y-1 text-sm">
+ <p className="font-bold">{pendingMove.event.appointment.customerName}</p>
+ <p className="text-muted">{pendingMove.event.appointment.serviceNames}</p>
+ <p className="pt-2">
+ <span className="text-muted">From </span>
+ {formatClock(pendingMove.event.appointment.startMinutes)}
+ {fromName ? ` with ${fromName}` : ""}
+ </p>
+ <p>
+ <span className="text-muted">To </span>
+ <strong>{formatClock(pendingMove.startMinutes)}</strong>
+ {toName ? ` with ${toName}` : ""}
+ </p>
</div>
-
- <div className="border-line relative border-l" style={{ height: gridHeight }}>
- {/* Hour gridlines */}
- {hourMarks.map((hour) => (
- <div
- key={hour}
- className="border-line absolute inset-x-0 border-t"
- style={{ top: (hour - START_HOUR) * PX_PER_HOUR }}
- />
- ))}
-
- {column.wholeDayOff ? (
- <div className="bg-line/10 absolute inset-0 flex items-center justify-center">
- <span className="text-muted text-xs font-bold tracking-widest uppercase">Off today</span>
- </div>
- ) : (
- <>
- {/* Outside-working-hours shading — diagonal hatch, same texture as the break/time-off blocks below. */}
- {column.workingWindow ? (
- <>
- {column.workingWindow.startMinutes > RANGE_START_MINUTES && (
- <div
- className={HATCH_CLASS}
- style={{ top: 0, height: topFor(column.workingWindow.startMinutes) }}
- aria-hidden="true"
- />
- )}
- {column.workingWindow.endMinutes < RANGE_END_MINUTES && (
- <div
- className={HATCH_CLASS}
- style={{ top: topFor(column.workingWindow.endMinutes), bottom: 0 }}
- aria-hidden="true"
- />
- )}
- </>
- ) : (
- <div className={cn(HATCH_CLASS, "inset-0")} aria-hidden="true" />
- )}
-
- {/* Breaks / time off */}
- {column.blocks.map((block) => (
- <div
- key={block.id}
- className="border-warning/40 bg-warning/10 absolute inset-x-1 z-10 overflow-hidden rounded-lg border bg-[repeating-linear-gradient(135deg,transparent,transparent_6px,rgba(0,0,0,0.04)_6px,rgba(0,0,0,0.04)_12px)] px-2 py-1"
- style={{
- top: topFor(block.startMinutes),
- height: heightFor(block.startMinutes, block.endMinutes),
- }}
- >
- <p className="text-warning-foreground truncate text-[10px] font-bold tracking-widest uppercase">
- {block.label}
- </p>
- </div>
- ))}
-
- {/* Appointments */}
- {column.appointments.map((appt) => {
- const blockHeight = heightFor(appt.startMinutes, appt.endMinutes);
- const BadgeIcon = STATUS_BADGE_ICON[appt.status];
- return (
- <Link
- key={appt.id}
- href={`${appointmentHrefBase}/${appt.id}`}
- className={cn(
- "absolute inset-x-1 z-20 overflow-hidden rounded-lg border-l-4 p-2 shadow-sm transition-shadow hover:shadow-md",
- "focus-visible:ring-ink focus-visible:ring-2 focus-visible:ring-offset-1",
- statusBlockClass(appt.status),
- )}
- style={{
- top: topFor(appt.startMinutes),
- height: blockHeight,
- }}
- >
- <span
- className={cn(
- "absolute top-1 right-1 flex h-4 w-4 items-center justify-center rounded-full",
- statusBadgeClass(appt.status),
- )}
- >
- <BadgeIcon className="h-2.5 w-2.5" aria-hidden="true" />
- <span className="sr-only">{statusLabel(appt.status)}</span>
- </span>
- <div className="flex items-center gap-1 pr-4">
- <p className="truncate text-[11px] font-bold">
- {formatCompactTime(appt.startMinutes)} – {formatCompactTime(appt.endMinutes)}
- </p>
- {appt.hasNotes && <NotebookText className="text-muted h-2.5 w-2.5 shrink-0" aria-label="Has notes" />}
- {appt.hasAvailableReward && (
- <Gift className="text-accent-loyalty h-2.5 w-2.5 shrink-0" aria-label="Reward available" />
- )}
- </div>
- {blockHeight >= 44 && (
- <p className="truncate text-[11px] opacity-80">
- {appt.customerName} • {appt.serviceNames}
- </p>
- )}
- </Link>
- );
- })}
-
- {/* Current-time indicator */}
- {showCurrentTime && (
- <div
- className="border-danger pointer-events-none absolute inset-x-0 z-30 border-t-2"
- style={{ top: topFor(currentTimeMinutes!) }}
- aria-hidden="true"
- />
- )}
- </>
- )}
+ <p className="text-muted text-xs">The customer will be notified of the change.</p>
+ {moveError && (
+ <p role="alert" className="text-danger text-sm font-medium">
+ {moveError}
+ </p>
+ )}
+ <div className="flex gap-3">
+ <Button variant="secondary" className="flex-1" disabled={isPending} onClick={() => setPendingMove(null)}>
+ Cancel
+ </Button>
+ <Button className="flex-1" isLoading={isPending} onClick={confirmMove}>
+ Move
+ </Button>
</div>
</div>
- ))}
+ )}
+ </Modal>
+ </div>
+ );
+}
+
+/** True for slots outside a staff member's working window (or the whole column when they're off) — those get the same hatch texture the break/time-off blocks use. */
+function isOffHours(column: CalendarColumn | undefined, slotDate: Date): boolean {
+ if (!column) return false;
+ const minutes = floatingDateToMinutes(slotDate);
+ return (
+ column.wholeDayOff ||
+ !column.workingWindow ||
+ minutes < column.workingWindow.startMinutes ||
+ minutes >= column.workingWindow.endMinutes
+ );
+}
+
+function ColumnHeader({ column }: { column: CalendarColumn }) {
+ return (
+ <div className="flex items-center gap-2 px-2 text-left" style={{ height: HEADER_HEIGHT }}>
+ {column.avatarUrl ? (
+ <Image
+ src={column.avatarUrl}
+ alt=""
+ width={36}
+ height={36}
+ className="border-line h-9 w-9 shrink-0 rounded-full border object-cover"
+ />
+ ) : (
+ <div className="border-line text-muted flex h-9 w-9 shrink-0 items-center justify-center rounded-full border bg-white text-sm font-bold">
+ {column.name.charAt(0)}
+ </div>
+ )}
+ <div className="min-w-0">
+ <p className="truncate text-sm font-bold">{column.name}</p>
+ <p className="text-muted truncate text-[10px] font-normal">
+ {column.wholeDayOff ? "Off today" : (column.hoursLabel ?? "Off today")}
+ </p>
</div>
</div>
);
}
-const HATCH_CLASS =
- "bg-line/15 absolute inset-x-0 bg-[repeating-linear-gradient(135deg,transparent,transparent_6px,rgba(0,0,0,0.05)_6px,rgba(0,0,0,0.05)_12px)]";
+function EventContent({ event }: { event: CalendarEvent }) {
+ if (event.kind === "block") {
+ return (
+ <div className="border-warning/40 bg-warning/10 h-full overflow-hidden rounded-lg border p-1.5">
+ <p className="text-warning-foreground truncate text-[10px] font-bold tracking-widest uppercase">{event.block.label}</p>
+ </div>
+ );
+ }
-function formatHour(hour: number): string {
- if (hour === 0 || hour === 24) return "12:00";
- if (hour === 12) return "12:00";
- return `${hour > 12 ? hour - 12 : hour}:00`;
+ const { appointment } = event;
+ const BadgeIcon = STATUS_BADGE_ICON[appointment.status];
+ const height = ((appointment.endMinutes - appointment.startMinutes) / 60) * PX_PER_HOUR;
+ return (
+ <div
+ className={cn(
+ "relative h-full overflow-hidden rounded-lg border-l-4 p-2 text-left shadow-sm transition-shadow hover:shadow-md",
+ statusBlockClass(appointment.status),
+ )}
+ >
+ <span
+ className={cn(
+ "absolute top-1 right-1 flex h-4 w-4 items-center justify-center rounded-full",
+ statusBadgeClass(appointment.status),
+ )}
+ >
+ <BadgeIcon className="h-2.5 w-2.5" aria-hidden="true" />
+ <span className="sr-only">{statusLabel(appointment.status)}</span>
+ </span>
+ <div className="flex items-center gap-1 pr-4">
+ <p className="truncate text-[11px] font-bold">
+ {formatCompactTime(appointment.startMinutes)} – {formatCompactTime(appointment.endMinutes)}
+ </p>
+ {appointment.hasNotes && <NotebookText className="text-muted h-2.5 w-2.5 shrink-0" aria-label="Has notes" />}
+ {appointment.hasAvailableReward && (
+ <Gift className="text-accent-loyalty h-2.5 w-2.5 shrink-0" aria-label="Reward available" />
+ )}
+ </div>
+ {height >= 44 && (
+ <p className="truncate text-[11px] opacity-80">
+ {appointment.customerName} • {appointment.serviceNames}
+ </p>
+ )}
+ </div>
+ );
+}
+
+/** "9 AM" / "12 PM" gutter label. */
+function formatHourLabel(hour: number): string {
+ const period = hour >= 12 ? "PM" : "AM";
+ return `${hour % 12 === 0 ? 12 : hour % 12} ${period}`;
+}
+
+/** Compact "9:30" / "1:15" clock text — no AM/PM, matching the tight in-block time-range label. */
+function formatCompactTime(minutes: number): string {
+ const h = Math.floor(minutes / 60);
+ const m = minutes % 60;
+ const displayHour = h % 12 === 0 ? 12 : h % 12;
+ return `${displayHour}:${String(m).padStart(2, "0")}`;
+}
+
+/** "2:45 PM" for the confirmation dialog. */
+function formatClock(minutes: number): string {
+ const h = Math.floor(minutes / 60);
+ const m = minutes % 60;
+ return `${h % 12 === 0 ? 12 : h % 12}:${String(m).padStart(2, "0")} ${h >= 12 ? "PM" : "AM"}`;
}
function statusLabel(status: AppointmentStatus): string {