root = Card([header, statsRow, appointmentsSection, roomsSection, nextPatientSection, checkinSection, navSection], "card", "column", "m")
header = CardHeader("Clinic Day View", "Monday, January 15, 2025")
statsRow = Card([expectedPatients, noShowRate], "clear", "row", "l", "stretch", "between")
expectedPatients = Callout("info", "Patients Expected", "24 scheduled today")
noShowRate = Callout("warning", "No-Show Rate (This Month)", "12.3% — 18 of 146 appointments")
appointmentsSection = Card([appointmentsHeader, appointmentsTable], "sunk", "column", "s")
appointmentsHeader = Heading("Today's Appointments", "h3")
appointmentsTable = Table([timeCol, patientCol, statusCol, roomCol])
timeCol = Col("Time", ["08:00", "08:30", "09:00", "09:30", "10:00", "10:30", "11:00", "11:30", "12:00", "13:00", "13:30", "14:00", "14:30", "15:00", "15:30", "16:00"])
patientCol = Col("Patient", ["Maria Santos", "James Chen", "Aisha Patel", "Robert Kim", "Elena Rodriguez", "David Thompson", "Sarah Johnson", "Michael Brown", "Lisa Wang", "Carlos Mendez", "Jennifer Lee", "Thomas Anderson", "Patricia Garcia", "Kevin White", "Amanda Taylor", "Steven Martin"])
statusCol = Col("Status", ["Checked In", "Waiting", "Scheduled", "Scheduled", "Scheduled", "Scheduled", "Scheduled", "Scheduled", "Scheduled", "Scheduled", "Scheduled", "Scheduled", "Scheduled", "Scheduled", "Scheduled", "Scheduled"])
roomCol = Col("Room", ["1", "2", "3", "1", "2", "3", "1", "2", "3", "1", "2", "3", "1", "2", "3", "1"])
roomsSection = Card([roomsHeader, roomsList], "sunk", "column", "s")
roomsHeader = Heading("Room Availability", "h3")
roomsList = ListBlock([room1, room2, room3, room4], "number")
room1 = ListItem("Room 1", "Occupied — Maria Santos (08:00)", null, null)
room2 = ListItem("Room 2", "Occupied — James Chen (08:30)", null, null)
room3 = ListItem("Room 3", "Free — Next: Aisha Patel (09:00)", null, null)
room4 = ListItem("Room 4", "Free — Available all morning", null, null)
nextPatientSection = Card([nextPatientCallout], "clear")
nextPatientCallout = Callout("success", "Next Patient Called", "Aisha Patel — Room 3 at 09:00")
checkinSection = Card([checkinHeader, checkinForm], "sunk", "column", "s")
checkinHeader = Heading("Check In Patient", "h3")
checkinForm = Form("checkin-form", checkinButtons, [patientSelectField])
patientSelectField = FormControl("Select Patient", patientSelect, "Choose from today's scheduled patients")
patientSelect = Select("patient", patientOptions, "Search or select...", null, null, "medium")
patientOptions = [optMaria, optJames, optAisha, optRobert, optElena, optDavid, optSarah, optMichael, optLisa, optCarlos, optJennifer, optThomas, optPatricia, optKevin, optAmanda, optSteven]
optMaria = SelectItem("Maria Santos", "Maria Santos — 08:00")
optJames = SelectItem("James Chen", "James Chen — 08:30")
optAisha = SelectItem("Aisha Patel", "Aisha Patel — 09:00")
optRobert = SelectItem("Robert Kim", "Robert Kim — 09:30")
optElena = SelectItem("Elena Rodriguez", "Elena Rodriguez — 10:00")
optDavid = SelectItem("David Thompson", "David Thompson — 10:30")
optSarah = SelectItem("Sarah Johnson", "Sarah Johnson — 11:00")
optMichael = SelectItem("Michael Brown", "Michael Brown — 11:30")
optLisa = SelectItem("Lisa Wang", "Lisa Wang — 12:00")
optCarlos = SelectItem("Carlos Mendez", "Carlos Mendez — 13:00")
optJennifer = SelectItem("Jennifer Lee", "Jennifer Lee — 13:30")
optThomas = SelectItem("Thomas Anderson", "Thomas Anderson — 14:00")
optPatricia = SelectItem("Patricia Garcia", "Patricia Garcia — 14:30")
optKevin = SelectItem("Kevin White", "Kevin White — 15:00")
optAmanda = SelectItem("Amanda Taylor", "Amanda Taylor — 15:30")
optSteven = SelectItem("Steven Martin", "Steven Martin — 16:00")
checkinButtons = Buttons([checkinBtn], "row")
checkinBtn = Button("Check In", null, "primary")
navSection = Card([navHeader, navButtons], "clear", "column", "s")
navHeader = Heading("Navigate", "h3")
navButtons = Buttons([prevDayBtn, todayBtn, nextDayBtn, datePickerBtn], "row", "m")
prevDayBtn = Button("← Previous Day", null, "secondary")
todayBtn = Button("Today", null, "primary")
nextDayBtn = Button("Next Day →", null, "secondary")
datePickerBtn = Button("Pick Date…", null, "tertiary")