# Care schedule > A home-care agency’s day board: visits on a 7 AM to 7 PM timeline per caregiver, a live now line, travel links, a visit popover and drag to reassign. The scheduling screen of an invented home-care agency. A sidebar holds the agency switcher, search, the sections with an alerts count, the service areas with their visit counts and the coordinator. The schedule lays out the day’s 48 visits on a timeline, one row per caregiver: confirmed, in progress, completed, missed and at-risk visits each have their look, dotted links show the travel time between them, a coverage row sits on top and the caregiver who called out sits at the bottom. A clock moves the now line and starts and finishes visits as it passes them. Click a visit for its popover, drag it to another caregiver or time, step through days, switch to the week or to clients, filter by area, search, or highlight one state from the legend. A React component by Bruno Delorence: https://brunodelorence.com/components/care-schedule. MIT License, Copyright (c) 2026 Bruno Delorence. Category: Dashboards. ## Anatomy 1. **Sidebar**: The agency switcher, a search on caregivers and clients (⌘K), the sections, the service areas with their visit counts, and the coordinator. A drawer under 880 px. 2. **Top bar**: The sidebar toggle, the breadcrumb, the running clock and the inbox and notification buttons. 3. **Header**: The title and the day’s counts, then the day stepper (previous, Today, next), Day/Week, Caregivers/Clients, the area menu and New visit. 4. **Coverage row**: Pinned on top: how many of the day’s visits have a caregiver, and the line saying all are covered. 5. **Caregiver row**: An illustrated avatar, the name, the role and the hours booked, then the lane with that caregiver’s visits on the 7 AM to 7 PM timeline. 6. **Visit**: A button placed by its start and length as shares of the day; its fill is its state. Click it for the popover, drag it or press Alt with the arrows to move it. 7. **Now line**: The clock’s minute across every row, moved by a transform; visits start and finish as it passes them. 8. **Visit popover**: The client, the care, the time, the caregiver, the check-in and the note, with Open visit and Message. Escape or a click elsewhere closes it. ## When to use - A coordinator’s day board for people who go to places: caregivers, technicians, cleaners, each with timed visits across one working day. - Days where who covers what changes by the hour: someone calls out, a visit is moved to another row or another time by dragging it. - Work whose state comes from the clock: a visit is confirmed, in progress or completed as the now line passes it, with missed and at risk as flags. - Schedules where the gap between two jobs matters, because it is time on the road: the dotted links show the travel minutes. - Teams of a dozen or two rows that one person reads at a glance, filtered by area and searched by caregiver or client. ## When not to use - Booking a time for oneself (a client picking a slot). Use a date picker with a list of free times. - Rooms, desks or other resources that do not move. Use a resource calendar with columns per resource; there is no travel between them. - Planning weeks or months ahead. The Week view only counts visits per day; use a month calendar or a Gantt chart for long plans. - Hundreds of rows. The board lists ten caregivers before “Show all” and draws every block; page or virtualise a long roster instead. - A single person’s day on a phone. Use a vertical agenda: the timeline reflows narrow but still scrolls sideways. ## Installation Install it with the shadcn CLI, into components/care-schedule of any React project: ```sh npx shadcn@latest add https://brunodelorence.com/r/care-schedule.json ``` Or copy all the source files below into one folder of your project. Either way it needs React 19 and a bundler with CSS Modules (Next.js, Vite). It has a dark colour scheme. Its colours are CSS light-dark() pairs, kept inside @supports so that builds which rewrite light-dark() for older browsers leave them alone: it follows your page’s color-scheme (light unless the page sets one) or its colorScheme prop, with nothing to configure. Browsers without light-dark() show it light. ## Usage ```tsx import { CareSchedule } from './care-schedule'; export function SchedulePage() { return ( console.log(visit.client, 'moved from', from.caregiver)} /> ); } ``` ## States - **Visit open**: The reference: 1:38 PM on Monday, with the popover of Inés’s late-morning visit open under its row. - **Nothing open**: `defaultSelected={null}`: the board alone: filled blocks under way, grey ones done, outlined ones still to come. - **Morning**: `defaultNow="8:15"`: the now line near the start, almost every visit still confirmed. - **End of day**: `defaultNow="18:30"`: nearly everything completed; the at-risk visit was never started, so it is now missed. - **State highlighted**: `defaultHighlight="missed"`, or a click on the legend: the other visits fade back. - **Search**: `defaultQuery="Ellery"`: only the rows with a match stay, and their other visits fade. - **One area**: `defaultArea="harbor"`: only Harbor Point’s visits and the caregivers who have one there. - **By client**: `defaultGroup="clients"`: one row per client, in the order of their first visit, without travel links. - **Week**: `defaultView="week"`: each caregiver’s visits and hours per day, today marked, days off greyed. - **Dark**: `colorScheme="dark"`: a warm charcoal frame with the same roles; every colour is a light-dark() token. - **Narrow**: Under 880 px of its own width the sidebar becomes a drawer, the controls wrap and the timeline scrolls sideways with the names pinned. ## How it works - The board is one 1440 × 1025 design. From 880 px up it is scaled to the root’s width in CSS alone: transform: scale(tan(atan2(100cqw, 1440px))) turns a length over a length into a number, so it is laid out once and looks the same at any size. Under 880 px a container query reflows it: the sidebar becomes a drawer behind a menu button, the controls wrap and the timeline scrolls sideways inside its card with the names pinned. - The timeline is shares of the day. Each visit, travel link, hour line and drop target is placed by two custom properties, --s (where it starts) and --w (how long it lasts), as calc(8px + var(--s) * (100% - 16px)), so the same rules serve every width. - A visit’s state comes from the clock, not the data: it is confirmed before its start, in progress until its end and completed after, while missed and at risk are flags. The clock runs twelve times faster than real time while the board is on screen (once under reduced motion), and the now line is a full-width track moved by translateX(var(--now) * 100%), with only its left edge seen. - Dragging uses pointer events with pointer capture: past 4 px the block follows the pointer by a transform, the row under the pointer lights up, and a dashed slot shows where it would land, snapped to 15 minutes, green when it fits and red when it would overlap. A drop that fits moves the visit, recomputes the travel links around it and announces it; one that does not springs back. Alt and the arrow keys do the same from the keyboard. - The popover is placed under the visit’s row and kept inside the board, above the row when there is no room below; a click elsewhere, Escape or a scroll of the timeline closes it. - Other days are made from today’s plan: each caregiver’s day slides by up to half an hour, a visit is dropped now and then and weekends are lighter, so day stepping and the week view always have plausible data. Clients regroups the same visits by client. - A demo pointer plays the board while it is on screen and untouched: it hovers and opens visits, drags one to another caregiver half an hour later, filters an area, steps to tomorrow and back and highlights a state. Any real pointer, key or wheel input hands control to the reader; it resumes six seconds after they leave, and stops off screen, in a hidden tab, under reduced motion and with autoplay={false}. - Avatars and the agency mark are inline SVG illustrations, never photos, and every colour is a light-dark() token on the root. ## API reference - **autoplay** (`boolean`, default `true`): Plays the demo pointer while the board is on screen and untouched. Never under reduced motion. - **colorScheme** (`'light' | 'dark' | 'system'`): Forces a colour scheme. Without it the board follows the page’s color-scheme. - **defaultNow** (`string`, default `'13:38'`): The time the clock starts at, H:MM on a 24-hour clock. - **clockSpeed** (`number`, default `12`): How many times faster than real time the clock runs (always 1 under reduced motion). - **defaultSelected** (`string | null`, default `'ines-1'`): The visit whose popover is open at first, or null for none. - **defaultArea** (`'all' | 'millbrook' | 'harbor' | 'elm' | 'fallow'`, default `'all'`): The service area the board opens filtered to. - **defaultView** (`'day' | 'week'`, default `'day'`): Opens on the day timeline or on the week. - **defaultGroup** (`'caregivers' | 'clients'`, default `'caregivers'`): One row per caregiver, or one per client. - **defaultHighlight** (`'confirmed' | 'in-progress' | 'completed' | 'missed' | 'at-risk' | null`, default `null`): The state the legend highlights at first; the other visits fade. Set, it keeps the demo off. - **defaultQuery** (`string`, default `''`): What the search holds at first: matching caregivers and clients stay, the rest fade or go. Set, it keeps the demo off. - **onReassign** (`(visit: Visit, from: { caregiver: string; start: number }) => void`): Called when a visit is dropped on another caregiver or time, by the reader or the demo; start is in minutes after midnight. - **onOpenVisit** (`(visit: Visit) => void`): Called by the popover’s Open visit button. - **onMessage** (`(visit: Visit) => void`): Called by the popover’s Message button. - **className** (`string`): Added to the root, to size or place the board. ## Accessibility - The schedule is a table of rows: each caregiver is a row header and each visit a button named by its client, time and state, described by how to move it. The popover is a labelled dialog the visit controls (aria-expanded); Escape closes it and returns focus to the visit. - Alt with the arrow keys moves a focused visit to the caregiver above or below, or 15 minutes earlier or later; a move that would overlap is refused and said. Every move, filter and day change is announced in a polite live region. - The area picker is a listbox button: arrow keys, Home and End move, Enter picks and Escape closes and returns focus. Day/Week, Caregivers/Clients, the legend and the sidebar areas are toggle buttons with aria-pressed; the current section has aria-current. - On the narrow layout the menu button reports aria-expanded and Escape closes the drawer. ⌘K or Ctrl+K focuses the search. - Illustrated avatars, icons, the travel links, hour lines and the now line are hidden from assistive technology; the demo pointer is decorative. Reduced motion stops the demo and the transitions and runs the clock at real time. ## Source ### care-schedule/care-schedule.tsx ```tsx // Copyright (c) 2026 Bruno Delorence. MIT License. 'use client'; import { useCallback, useEffect, useEffectEvent, useId, useLayoutEffect, useMemo, useRef, useState, type CSSProperties, type KeyboardEvent as ReactKeyboardEvent, type PointerEvent as ReactPointerEvent, } from 'react'; import { Avatar } from './avatar'; import { AREAS, CAREGIVERS, DAY_END, DAY_START, FIRST_ROWS, START_NOW, TODAY_DATE, travelBetween, visitsFor, type AreaId, type Caregiver, type Look, type Status, type Visit, } from './data'; import { DemoPointer, runDemo, type Point } from './demo-pointer'; import { Icon, Mark, type IconName } from './icons'; import { useAutoplay } from './use-autoplay'; import styles from './care-schedule.module.css'; export type { AreaId, Status, Visit } from './data'; /* * Care schedule: the day board of an invented home-care agency. A sidebar (agency switcher, * search, sections, service areas with their visit counts, the signed-in coordinator) and a * schedule: the day's visits laid out on a 7 AM to 7 PM timeline, one row per caregiver, with * a live "now" line, a coverage row on top and the caregiver who called out at the bottom. * * - Each visit is a block placed by its start and length as shares of the day (CSS custom * properties), so the timeline is the same at any width. Its state comes from the clock: * confirmed (outlined), in progress (black) and completed (grey); missed (red, dashed) and at * risk (amber) are flags. Dotted links between blocks are the travel time between visits. * - The clock runs (12 times real time by default) while the board is on screen: the now line * slides by a transform, and visits start and finish as it passes them. * - Click a visit for its popover (client, care, time, caregiver, check-in, note, Open visit and * Message); Escape or a click elsewhere closes it. Drag a visit to another caregiver, or along * its row in steps of 15 minutes, to reassign or move it; Alt and the arrow keys do the same * from the keyboard. A drop that would overlap another visit springs back. * - Day navigation (previous, Today, next) builds any other day from today's plan; Week shows the * week by day; Clients turns the rows into clients; the area menu, the sidebar's areas, the * search and the legend filter or highlight what is shown. * - While on screen and untouched, a demo pointer opens visits, drags one to another caregiver, * filters an area, steps to tomorrow and back and highlights a state. Any real input hands * control to the reader; reduced motion or autoplay={false} turns it off. * - Wide (the root 880 px and up) the board is a 1440 × 1025 design scaled to the root's width * in CSS alone; narrower, it reflows: the sidebar becomes a drawer, the controls wrap and the * timeline scrolls sideways inside its card with the names pinned. * - Light or dark: every colour is a light-dark() token on the root. */ export type CareScheduleProps = { className?: string; /** Plays the demo pointer while on screen and untouched. Never under reduced motion. */ autoplay?: boolean; /** Forces a colour scheme; without it, the page's color-scheme decides. */ colorScheme?: 'light' | 'dark' | 'system'; /** The time the clock starts at, 'H:MM' on a 24-hour clock. */ defaultNow?: string; /** How many times faster than real time the clock runs (1 under reduced motion). */ clockSpeed?: number; /** The visit whose popover is open at first ('ines-1' in the reference), or null. */ defaultSelected?: string | null; /** The service area shown at first. */ defaultArea?: AreaId | 'all'; defaultView?: 'day' | 'week'; defaultGroup?: 'caregivers' | 'clients'; /** The state the legend highlights at first (the others fade). Set, it keeps the demo off. */ defaultHighlight?: Status | null; /** What the search holds at first. Set, it keeps the demo off. */ defaultQuery?: string; /** Called when a visit is dropped on another caregiver or another time. */ onReassign?: (visit: Visit, from: { caregiver: string; start: number }) => void; /** Called by the popover's Open visit button. */ onOpenVisit?: (visit: Visit) => void; /** Called by the popover's Message button. */ onMessage?: (visit: Visit) => void; }; /* ------------------------------------------------------------------ helpers */ const HOURS = Array.from({ length: 13 }, (_, index) => DAY_START + index * 60); const SPAN = DAY_END - DAY_START; const STEP = 15; const WEEKDAYS = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']; const MONTHS = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; const STATES: { id: Status; label: string }[] = [ { id: 'confirmed', label: 'Confirmed' }, { id: 'in-progress', label: 'In progress' }, { id: 'completed', label: 'Completed' }, { id: 'missed', label: 'Missed' }, { id: 'at-risk', label: 'At risk' }, ]; const STATE_LABEL = Object.fromEntries(STATES.map((state) => [state.id, state.label])) as Record< Status, string >; const AREA_LABEL = Object.fromEntries(AREAS.map((area) => [area.id, area.label])) as Record< AreaId, string >; const NAV: { id: string; label: string; icon: IconName; badge?: number }[][] = [ [ { id: 'dashboard', label: 'Dashboard', icon: 'dashboard' }, { id: 'schedule', label: 'Schedule', icon: 'calendar' }, { id: 'visits', label: 'Visits', icon: 'visits' }, { id: 'alerts', label: 'Alerts', icon: 'bell', badge: 4 }, ], [ { id: 'caregivers', label: 'Caregivers', icon: 'caregivers' }, { id: 'clients', label: 'Clients', icon: 'clients' }, ], [ { id: 'evv', label: 'EVV', icon: 'shield' }, { id: 'reports', label: 'Reports', icon: 'reports' }, ], ]; const SECTIONS = ['Operations', 'People', 'Compliance']; const parseClock = (clock: string) => { const [hours, minutes] = clock.split(':').map(Number); return hours * 60 + (minutes || 0); }; /** "7:30": a block's time, twelve-hour, no AM/PM. */ const short = (minutes: number) => { const hours = Math.floor(minutes / 60); return `${((hours + 11) % 12) + 1}:${String(Math.round(minutes % 60)).padStart(2, '0')}`; }; /** "10:00 AM". */ const long = (minutes: number) => `${short(minutes)} ${minutes < 720 ? 'AM' : 'PM'}`; const dateFor = (offset: number) => { const date = new Date(TODAY_DATE); date.setDate(date.getDate() + offset); return date; }; const hoursOf = (visits: Visit[]) => visits.reduce((sum, v) => sum + (v.end - v.start), 0) / 60; const firstName = (name: string) => name.split(' ')[0]; const initialed = (name: string) => { const [first, last] = name.split(' '); return last ? `${first} ${last[0]}.` : first; }; function statusOf(visit: Visit, offset: number, now: number): Status { if (visit.flag === 'missed') return 'missed'; if (offset < 0) return 'completed'; if (offset > 0) return visit.flag ?? 'confirmed'; if (visit.flag === 'at-risk') return now >= visit.end ? 'missed' : 'at-risk'; if (now >= visit.end) return 'completed'; if (now >= visit.start) return 'in-progress'; return 'confirmed'; } /** What the popover says about the check-in (electronic visit verification). */ function checkIn(visit: Visit, status: Status) { const feet = visit.distance ?? 12 + ((visit.client.length * 7) % 40); switch (status) { case 'completed': return { ok: true, text: `Verified · ${feet} ft from the door` }; case 'in-progress': return { ok: true, text: `Checked in ${long(visit.start + 2)}` }; case 'missed': return { ok: false, text: 'No check-in' }; case 'at-risk': return { ok: false, text: 'Not en route · 4.2 mi away' }; default: return { ok: false, text: 'Not started' }; } } type Row = { id: string; kind: 'caregiver' | 'client' | 'out'; name: string; meta: string; look: Look; visits: Visit[]; /** Visits on the row that do not match the search. */ dim?: Set; }; type Drag = { id: string; pointer: number; x: number; y: number; dx: number; dy: number; moving: boolean; row: string | null; start: number; ok: boolean; }; /* ------------------------------------------------------------------ component */ export function CareSchedule({ className, autoplay = true, colorScheme, defaultNow = '13:38', clockSpeed = 12, defaultSelected = 'ines-1', defaultArea = 'all', defaultView = 'day', defaultGroup = 'caregivers', defaultHighlight = null, defaultQuery = '', onReassign, onOpenVisit, onMessage, }: CareScheduleProps) { const id = useId(); const { ref: root, take, visible, reduced, playing } = useAutoplay(6000); const frame = useRef(null); const board = useRef(null); const scroller = useRef(null); const popover = useRef(null); const pointer = useRef(null); const searchBox = useRef(null); const areaButton = useRef(null); const areaMenu = useRef(null); const opener = useRef(null); const [offset, setOffset] = useState(0); const [view, setView] = useState(defaultView); const [group, setGroup] = useState(defaultGroup); const [area, setArea] = useState(defaultArea); const [query, setQuery] = useState(defaultQuery); const [legend, setLegend] = useState(defaultHighlight); const [showAll, setShowAll] = useState(false); const [days, setDays] = useState>({}); const [selected, setSelected] = useState(defaultSelected); const [hover, setHover] = useState(null); const [now, setNow] = useState(() => parseClock(defaultNow)); const [drag, setDrag] = useState(null); const [menu, setMenu] = useState(false); const [menuIndex, setMenuIndex] = useState(0); const [drawer, setDrawer] = useState(false); const [collapsed, setCollapsed] = useState(false); const [nav, setNav] = useState('schedule'); const [bell, setBell] = useState(true); const [said, setSaid] = useState(''); const [fresh, setFresh] = useState(null); const added = useRef(0); const visits = useMemo(() => days[offset] ?? visitsFor(offset), [days, offset]); const setVisits = useCallback( (update: (list: Visit[]) => Visit[]) => setDays((all) => ({ ...all, [offset]: update(all[offset] ?? visitsFor(offset)) })), [offset], ); const status = useCallback((visit: Visit) => statusOf(visit, offset, now), [offset, now]); /* The clock: one simulated minute at a time, only while the board is on screen. */ const speed = reduced ? 1 : Math.max(clockSpeed, 0.01); useEffect(() => { if (!visible) return; const timer = window.setInterval( () => setNow((minutes) => Math.min(minutes + 1, DAY_END)), 60000 / speed, ); return () => window.clearInterval(timer); }, [visible, speed]); /* ---------------------------------------------------------------- rows */ const q = query.trim().toLowerCase(); const inArea = useCallback((v: Visit) => area === 'all' || v.area === area, [area]); const rows = useMemo(() => { const shown = visits.filter(inArea); if (group === 'clients') { const byClient = new Map(); for (const visit of [...shown].sort((a, b) => a.start - b.start)) byClient.set(visit.client, [...(byClient.get(visit.client) ?? []), visit]); return [...byClient.entries()] .filter(([client, list]) => { if (!q) return true; const carer = CAREGIVERS.find((c) => c.id === list[0].caregiver)?.name ?? ''; return client.toLowerCase().includes(q) || carer.toLowerCase().includes(q); }) .map(([client, list]) => ({ id: `client:${client}`, kind: 'client' as const, name: client, meta: `${AREA_LABEL[list[0].area]} · ${list.length} visit${list.length > 1 ? 's' : ''}`, look: list[0].look, visits: list, })); } const out: Row[] = []; for (const caregiver of CAREGIVERS) { const own = visits.filter((v) => v.caregiver === caregiver.id); const mine = own.filter(inArea); const isOut = offset === 0 && caregiver.out; if (isOut) { if (area === 'all' && (!q || caregiver.name.toLowerCase().includes(q))) out.push({ id: caregiver.id, kind: 'out', name: caregiver.name, meta: `${caregiver.role} · ${caregiver.out!.reason}`, look: caregiver.look, visits: [], }); continue; } if (!own.length || (area !== 'all' && !mine.length)) continue; let dim: Set | undefined; if (q && !caregiver.name.toLowerCase().includes(q)) { const hits = mine.filter((v) => v.client.toLowerCase().includes(q)); if (!hits.length) continue; dim = new Set(mine.filter((v) => !hits.includes(v)).map((v) => v.id)); } out.push({ id: caregiver.id, kind: 'caregiver', name: caregiver.name, meta: `${caregiver.role} · ${hoursOf(own).toFixed(1)} h`, look: caregiver.look, visits: mine.sort((a, b) => a.start - b.start), dim, }); } return out; }, [visits, inArea, group, q, offset, area]); // The called-out caregiver stays at the bottom; the rest are cut to FIRST_ROWS until "show all". const working = rows.filter((row) => row.kind !== 'out'); const outRows = rows.filter((row) => row.kind === 'out'); const limited = showAll ? working : working.slice(0, FIRST_ROWS); const listed = [...limited, ...outRows]; const total = group === 'clients' ? rows.length : CAREGIVERS.length; const noun = group === 'clients' ? 'clients' : 'caregivers'; const canExpand = working.length > FIRST_ROWS; const dayVisits = visits.length; const onShift = new Set(visits.map((v) => v.caregiver)).size + (offset === 0 ? 1 : 0); const date = dateFor(offset); const weekStart = dateFor(offset - ((date.getDay() + 6) % 7)); const weekOffsets = Array.from( { length: 7 }, (_, index) => offset - ((date.getDay() + 6) % 7) + index, ); const dayLabel = `${WEEKDAYS[date.getDay()].slice(0, 3)}, ${MONTHS[date.getMonth()]} ${date.getDate()}`; const weekLabel = `${MONTHS[weekStart.getMonth()]} ${weekStart.getDate()} – ${dateFor(weekOffsets[6]).getDate()}`; const weekVisits = weekOffsets.map((day) => day === offset ? visits : (days[day] ?? visitsFor(day)), ); const weekCount = weekVisits.reduce((sum, list) => sum + list.length, 0); const selectedVisit = visits.find((v) => v.id === selected) ?? null; const open = Boolean(selectedVisit && view === 'day' && !drag?.moving); /* ---------------------------------------------------------------- announcements */ const say = (text: string) => setSaid(text); /* ---------------------------------------------------------------- popover placement */ useLayoutEffect(() => { const card = popover.current; const space = board.current; if (!open || !card || !space || !selectedVisit) return; const block = space.querySelector( `[data-visit="${CSS.escape(selectedVisit.id)}"]`, ); if (!block) return; const place = () => { const box = space.getBoundingClientRect(); const scale = box.width / space.offsetWidth || 1; const rect = block.getBoundingClientRect(); const row = block.closest('[data-row]')?.getBoundingClientRect() ?? rect; const width = card.offsetWidth; const height = card.offsetHeight; let left = (rect.left - box.left) / scale; left = Math.max(8, Math.min(left, space.offsetWidth - width - 8)); let top = (row.bottom - box.top) / scale; if (top + height > space.offsetHeight - 4) top = (row.top - box.top) / scale - height; card.style.left = `${left}px`; card.style.top = `${Math.max(0, top)}px`; }; place(); const observer = new ResizeObserver(place); observer.observe(space); return () => observer.disconnect(); }, [open, selectedVisit, rows, now]); // Close the popover on a click elsewhere, or when the timeline scrolls under it. useEffect(() => { if (!open) return; const away = (event: PointerEvent) => { const target = event.target as Element; if (popover.current?.contains(target) || target.closest?.('[data-visit]')) return; setSelected(null); }; const scroll = scroller.current; const close = () => setSelected(null); document.addEventListener('pointerdown', away); scroll?.addEventListener('scroll', close, { passive: true }); return () => { document.removeEventListener('pointerdown', away); scroll?.removeEventListener('scroll', close); }; }, [open]); useEffect(() => { if (!menu) return; const away = (event: PointerEvent) => { const target = event.target as Node; if (areaMenu.current?.contains(target) || areaButton.current?.contains(target)) return; setMenu(false); }; document.addEventListener('pointerdown', away); return () => document.removeEventListener('pointerdown', away); }, [menu]); useEffect(() => { if (menu) areaMenu.current?.querySelectorAll('[role="option"]')[menuIndex]?.focus(); }, [menu, menuIndex]); /* ---------------------------------------------------------------- moving visits */ /** Whether `visit` fits on `row` from `start` without overlapping another visit. */ const fits = useCallback( (visit: Visit, row: string, start: number) => { const end = start + (visit.end - visit.start); if (start < DAY_START || end > DAY_END) return false; if (group === 'clients') return true; const caregiver = CAREGIVERS.find((c) => c.id === row); if (!caregiver || (offset === 0 && caregiver.out)) return false; return !visits.some( (other) => other.id !== visit.id && other.caregiver === row && other.start < end && start < other.end, ); }, [visits, group, offset], ); const move = useCallback( (visit: Visit, row: string, start: number) => { const from = { caregiver: visit.caregiver, start: visit.start }; const length = visit.end - visit.start; const caregiver = group === 'clients' ? visit.caregiver : row; let moved: Visit | null = null; setVisits((list) => { const next = list.map((v) => v.id === visit.id ? { ...v, caregiver, start, end: start + length } : v, ); // Travel links: recomputed for the moved visit and for what now follows it, and // for what followed it where it came from. const relink = (list2: Visit[], carer: string) => { const day = list2.filter((v) => v.caregiver === carer).sort((a, b) => a.start - b.start); const travel = new Map(); day.forEach((v, index) => { const before = day[index - 1]; if (!before) return travel.set(v.id, undefined); const gap = v.start - before.end; const touched = v.id === visit.id || before.id === visit.id; if (!touched && v.travel !== undefined) return; travel.set( v.id, gap >= 10 && gap <= 60 ? Math.min(travelBetween(before, v), gap - 2) : undefined, ); }); return list2.map((v) => (travel.has(v.id) ? { ...v, travel: travel.get(v.id) } : v)); }; let out = relink(next, caregiver); if (from.caregiver !== caregiver) { const follower = list .filter((v) => v.caregiver === from.caregiver && v.start >= visit.end) .sort((a, b) => a.start - b.start)[0]; out = out.map((v) => follower && v.id === follower.id ? { ...v, travel: undefined } : v, ); } moved = out.find((v) => v.id === visit.id) ?? null; return out; }); const carer = CAREGIVERS.find((c) => c.id === caregiver); say( `${visit.short} moved to ${carer?.name ?? ''}, ${long(start)} to ${long(start + length)}.`, ); setFresh(visit.id); if (moved) onReassign?.(moved, from); else onReassign?.({ ...visit, caregiver, start, end: start + length }, from); }, [group, setVisits, onReassign], ); const pxPerMinute = () => { const lane = board.current?.querySelector('[data-lane]'); return lane ? (lane.offsetWidth - 16) / SPAN : 1; }; const scaleOf = () => { const space = frame.current; if (!space) return 1; return space.getBoundingClientRect().width / space.offsetWidth || 1; }; const rowAt = (clientY: number) => { const list = board.current?.querySelectorAll('[data-row]') ?? []; for (const element of list) { const rect = element.getBoundingClientRect(); if (clientY >= rect.top && clientY < rect.bottom) return element.dataset.row ?? null; } return null; }; /** Where a drag of `visit` by (dx, dy) screen px would land. */ const landing = (visit: Visit, origin: string, clientY: number, dx: number) => { const minutes = dx / scaleOf() / pxPerMinute(); const start = Math.max( DAY_START, Math.min( DAY_END - (visit.end - visit.start), visit.start + Math.round(minutes / STEP) * STEP, ), ); const row = group === 'clients' ? origin : rowAt(clientY); return { row, start, ok: Boolean(row) && fits(visit, row ?? '', start) }; }; const onBlockDown = (event: ReactPointerEvent, visit: Visit, row: string) => { if (event.button !== 0 || view !== 'day') return; event.currentTarget.setPointerCapture?.(event.pointerId); setDrag({ id: visit.id, pointer: event.pointerId, x: event.clientX, y: event.clientY, dx: 0, dy: 0, moving: false, row, start: visit.start, ok: true, }); }; const onBlockMove = (event: ReactPointerEvent, visit: Visit, row: string) => { if (!drag || drag.pointer !== event.pointerId || drag.id !== visit.id) return; const dx = event.clientX - drag.x; const dy = event.clientY - drag.y; const moving = drag.moving || Math.hypot(dx, dy) > 4; if (!moving) return; const land = landing(visit, row, event.clientY, dx); setDrag({ ...drag, dx, dy, moving, row: land.row, start: land.start, ok: land.ok }); }; const onBlockUp = (event: ReactPointerEvent, visit: Visit, row: string) => { if (!drag || drag.pointer !== event.pointerId) return; const was = drag; setDrag(null); if (!was.moving) { opener.current = event.currentTarget; setSelected((current) => (current === visit.id ? null : visit.id)); return; } if (was.ok && was.row && (was.row !== row || was.start !== visit.start)) { move(visit, was.row, was.start); setSelected(null); } else if (!was.ok) say(`${visit.short} can't go there: it would overlap another visit.`); }; const onBlockKey = (event: ReactKeyboardEvent, visit: Visit, row: string) => { if (event.key === 'Escape') { setSelected(null); return; } if (!event.altKey || view !== 'day') return; const vertical = event.key === 'ArrowUp' || event.key === 'ArrowDown'; const horizontal = event.key === 'ArrowLeft' || event.key === 'ArrowRight'; if (!vertical && !horizontal) return; event.preventDefault(); let target = row; let start = visit.start; if (horizontal) start += event.key === 'ArrowLeft' ? -STEP : STEP; if (vertical && group === 'caregivers') { const candidates = listed.filter((r) => r.kind === 'caregiver').map((r) => r.id); const index = candidates.indexOf(row) + (event.key === 'ArrowUp' ? -1 : 1); if (index < 0 || index >= candidates.length) return; target = candidates[index]; } if (!fits(visit, target, start)) { say(`${visit.short} can't go there: it would overlap another visit.`); return; } move(visit, target, start); const focus = () => board.current?.querySelector(`[data-visit="${CSS.escape(visit.id)}"]`)?.focus(); requestAnimationFrame(focus); }; useEffect(() => { if (!fresh) return; const timer = window.setTimeout(() => setFresh(null), 900); return () => window.clearTimeout(timer); }, [fresh]); /* ---------------------------------------------------------------- controls */ const goDay = (next: number) => { setOffset(next); setSelected(null); setDrag(null); const d = dateFor(next); say(`${WEEKDAYS[d.getDay()]}, ${MONTHS[d.getMonth()]} ${d.getDate()}.`); }; const pickArea = (next: AreaId | 'all') => { setArea(next); setMenu(false); setSelected(null); say(next === 'all' ? 'All service areas.' : `${AREA_LABEL[next]} only.`); }; const newVisit = () => { added.current += 1; const carer = listed.find((row) => row.kind === 'caregiver' && group === 'caregivers')?.id ?? 'ines'; const from = offset === 0 ? Math.ceil(now / 30) * 30 : 9 * 60; let start = from; const draft: Visit = { id: `new-${added.current}`, caregiver: carer, client: 'New client', short: 'New visit', start, end: start + 60, care: 'Personal care', area: area === 'all' ? 'millbrook' : area, look: CAREGIVERS[0].look, }; while (start + 60 <= DAY_END && !fits(draft, carer, start)) start += 30; if (start + 60 > DAY_END) { say('No free hour left today for a new visit.'); return; } const visit = { ...draft, start, end: start + 60 }; setView('day'); setVisits((list) => [...list, visit]); setSelected(visit.id); setFresh(visit.id); say(`New visit added for ${CAREGIVERS.find((c) => c.id === carer)?.name}, ${long(start)}.`); }; const onRootKey = (event: ReactKeyboardEvent) => { if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === 'k') { event.preventDefault(); setDrawer(true); requestAnimationFrame(() => searchBox.current?.focus()); } if (event.key === 'Escape') { if (open) { setSelected(null); opener.current?.focus(); } else if (drawer) setDrawer(false); } }; /* ---------------------------------------------------------------- the demo */ const demoState = useEffectEvent( ( action: | 'reset' | 'hover' | 'select' | 'area' | 'menu' | 'day' | 'legend' | 'drag' | 'drop' | 'release', value?: unknown, ) => { switch (action) { case 'reset': setDays({}); setOffset(0); setView(defaultView); setGroup(defaultGroup); setArea('all'); setQuery(''); setLegend(null); setMenu(false); setDrag(null); setHover(null); setNow(parseClock(defaultNow)); break; case 'hover': setHover(value as string | null); break; case 'select': setSelected(value as string | null); break; case 'area': setArea(value as AreaId | 'all'); setMenu(false); break; case 'menu': setMenu(Boolean(value)); break; case 'day': setSelected(null); setOffset(value as number); break; case 'legend': setLegend(value as Status | null); break; case 'drag': { const { visit, row, start, dx, dy } = value as { visit: Visit; row: string; start: number; dx: number; dy: number; }; setDrag({ id: visit.id, pointer: -1, x: 0, y: 0, dx, dy, moving: true, row, start, ok: fits(visit, row, start), }); break; } case 'drop': { const { visit, row, start } = value as { visit: Visit; row: string; start: number }; setDrag(null); if (fits(visit, row, start)) move(visit, row, start); break; } case 'release': // Only the demo's own drag: a reader's drag in progress stays theirs. setDrag((current) => (current?.pointer === -1 ? null : current)); setHover(null); break; } }, ); const findVisit = useEffectEvent((client: string) => visits.find((v) => v.client === client)); const demo = autoplay && playing && !defaultHighlight && !defaultQuery; useEffect(() => { const stage = root.current; const arrow = pointer.current; if (!demo || !stage || !arrow) return; const centre = (selector: string, dx = 0.5, dy = 0.5): Point | null => { const target = stage.querySelector(selector); if (!target || !target.getClientRects().length) return null; const box = stage.getBoundingClientRect(); const rect = target.getBoundingClientRect(); if (rect.bottom < box.top || rect.top > box.bottom) return null; return { x: rect.left + rect.width * dx - box.left, y: rect.top + rect.height * dy - box.top, }; }; const at = (name: string) => `[data-demo="${name}"]`; const visitAt = (client: string) => { const visit = findVisit(client); return visit ? `[data-visit="${CSS.escape(visit.id)}"]` : '[data-none]'; }; const stop = runDemo(stage, arrow, async ({ wait, glide, glyph }) => { const go = async (selector: string, ms = 650, dx?: number, dy?: number) => { const to = centre(selector, dx, dy); if (to) await glide(to, ms); return Boolean(to); }; const press = async (selector: string, ms?: number, dx?: number, dy?: number) => { glyph('hand'); const ok = await go(selector, ms, dx, dy); await wait(180); return ok; }; for (;;) { demoState('reset'); demoState('select', defaultSelected); await wait(1600); // Hover two visits, open one in progress, then the missed one. glyph('arrow'); for (const client of ['Imogen Oakes', 'Tobias Wynn']) { const visit = findVisit(client); if (await go(visitAt(client), 700, 0.45, 0.55)) demoState('hover', visit?.id ?? null); await wait(700); } demoState('hover', null); if (await press(visitAt('Waldo Dace'), 650, 0.4, 0.5)) demoState('select', findVisit('Waldo Dace')?.id ?? null); await wait(2200); if (await press(visitAt('Mirela Pask'), 650, 0.4, 0.5)) demoState('select', findVisit('Mirela Pask')?.id ?? null); await wait(2200); demoState('select', null); // Drag a visit to another caregiver, half an hour later. const visit = findVisit('Delphine Yarrow'); const fromBox = centre(visitAt('Delphine Yarrow'), 0.3, 0.5); const toRow = centre('[data-row="paloma"]', 0.5, 0.5); const lane = stage.querySelector('[data-lane]'); if (visit && fromBox && toRow && lane) { glyph('arrow'); await glide(fromBox, 700); demoState('hover', visit.id); await wait(300); glyph('hand'); const box = stage.getBoundingClientRect(); const laneRect = lane.getBoundingClientRect(); const perMinute = (laneRect.width - 16 * scaleOf()) / SPAN; const scale = scaleOf(); const target = { x: fromBox.x + 30 * perMinute, y: toRow.y }; const dyScreen = target.y - fromBox.y; const steps = 14; for (let index = 1; index <= steps; index += 1) { const share = index / steps; const point = { x: fromBox.x + (target.x - fromBox.x) * share, y: fromBox.y + dyScreen * share, }; await glide(point, 60); demoState('drag', { visit, row: share > 0.5 ? 'paloma' : visit.caregiver, start: visit.start + (share > 0.5 ? 30 : 0), dx: (point.x - fromBox.x) / 1, dy: (point.y - fromBox.y) / 1, }); } void box; void scale; await wait(450); demoState('drop', { visit, row: 'paloma', start: visit.start + 30 }); demoState('hover', null); await wait(1800); } // Filter an area, then back to all of them. if (await press(at('area'), 800)) { demoState('menu', true); await wait(500); if (await go(at('area-harbor'), 450)) { await wait(200); demoState('area', 'harbor'); } await wait(2000); await press(at('area'), 500); demoState('menu', true); await wait(450); if (await go(at('area-all'), 400)) { await wait(200); demoState('area', 'all'); } await wait(900); } // Tomorrow, and back to today. if (await press(at('next'), 700)) demoState('day', 1); await wait(2000); if (await press(at('today'), 500)) demoState('day', 0); await wait(1200); // Highlight what is in progress. if (await press(at('legend-in-progress'), 800)) demoState('legend', 'in-progress'); await wait(2000); demoState('legend', null); await wait(600); // Back to the reference's open visit. glyph('arrow'); await go(visitAt('Henrietta Vance'), 800, 0.4, 0.5); demoState('select', findVisit('Henrietta Vance')?.id ?? null); await wait(2600); } }); return () => { stop(); demoState('release'); }; }, [demo, root, defaultSelected]); /* ---------------------------------------------------------------- pieces */ const nowShare = (Math.min(Math.max(now, DAY_START), DAY_END) - DAY_START) / SPAN; const showNow = offset === 0 && view === 'day'; const clockLabel = `${WEEKDAYS[TODAY_DATE.getDay()].slice(0, 3)}, ${MONTHS[TODAY_DATE.getMonth()]} ${TODAY_DATE.getDate()} · ${long(Math.floor(now))}`; const areaCounts = useMemo(() => { const counts = Object.fromEntries(AREAS.map((a) => [a.id, 0])) as Record; for (const visit of visits) counts[visit.area] += 1; return counts; }, [visits]); const block = (visit: Visit, row: Row) => { const state = status(visit); const dragging = drag?.id === visit.id && drag.moving; const isOpen = selected === visit.id && open; const label = group === 'clients' ? initialed(CAREGIVERS.find((c) => c.id === visit.caregiver)?.name ?? '') : visit.short; const time = visit.end - visit.start <= 60 ? short(visit.start) : `${short(visit.start)} - ${short(visit.end)}`; const style = { '--s': (visit.start - DAY_START) / SPAN, '--w': (visit.end - visit.start) / SPAN, ...(dragging ? { transform: `translate(${drag.dx / scaleOf()}px, ${drag.dy / scaleOf()}px)` } : null), } as CSSProperties; return ( ); }; const links = (row: Row) => row.visits.map((visit, index) => { const before = row.visits[index - 1]; if (!before || visit.travel === undefined || group === 'clients') return null; const gap = visit.start - before.end; if (gap <= 0 || gap > 60) return null; if (drag?.moving && (drag.id === visit.id || drag.id === before.id)) return null; return ( ); }); const ghost = (row: Row) => { if (!drag?.moving || drag.row !== row.id) return null; const visit = visits.find((v) => v.id === drag.id); if (!visit) return null; return (