@w3kits-com/plugin-opendesign 0.1.8 → 0.1.9

package/dist/__w3kits/assets/design-templates/live-artifact/assets/templates/clinic-console/README.md

@@ -0,0 +1,342 @@
+# Clinic Console — live artifact template
+
+A `html_template_v1` template for a friendly clinic / hospital / telemedicine
+operations console. Soft-mint healthcare aesthetic: cool off-white canvas,
+single mint accent, generous 18px card radii, signature diagonal-stripe
+pattern fills inside KPI tiles and bar-chart bars, illustrated CSS-gradient
+avatars, and one dark surface (the calendar activity popover).
+
+## Files
+
+```text
+clinic-console/
+├── template.html   # html_template_v1 source — only DOM, CSS tokens, and {{data.*}} bindings
+├── data.json       # canonical default sample (renders straight out of the box)
+└── README.md       # this file — data contract + customization notes
+```
+
+## How an agent uses this template
+
+This template is intended to be copied (or referenced) when the
+[`live-artifact`](../../../SKILL.md) skill is invoked with a healthcare
+operations brief such as *"clinic dashboard", "doctors schedule", "hospital
+admin", "appointment console", "telemedicine ops", "诊所后台", "医院管理"*.
+
+The agent should:
+
+1. Copy `template.html` and `data.json` into the project's live-artifact
+   workspace directory as `template.html` and `data.json`.
+2. Edit `data.json` to reflect the actual brand, names, schedules, and
+   numbers from the brief or connector source. The shape of the JSON must
+   match what `template.html` references (every `{{data.path}}` interpolation
+   below).
+3. Author `artifact.json` and `provenance.json` per the live-artifact
+   protocol, then register the artifact through the daemon wrapper:
+
+   ```bash
+   "$OD_NODE_BIN" "$OD_BIN" tools live-artifacts create --input artifact.json
+   ```
+
+4. The daemon renders `template.html + data.json` into the preview
+   `index.html` automatically. The agent does **not** author `index.html`.
+
+When the user clicks **Refresh**, the daemon re-runs the registered source,
+maps results back into `data.json`, re-renders the preview, and snapshots
+the change — the layout never changes; only the numbers, names, and pill
+states do.
+
+## Default sample renders out of the box
+
+If you create a live artifact using the default `data.json` shipped here,
+you get the canonical "St. Lukes Wellness" demo screen:
+
+- Greeting: `Hey Lukmon, glad to have you back! 🙌`
+- Four KPI tiles: Total doctors / Total bookings / Available rooms / Total
+  visitors, with mixed amber- and blue-stripe pattern footers and an inline
+  General/Private rooms mini-list.
+- Patient overview chart with paired diagonal-stripe bars across Jan–Jul,
+  Mar 2025 highlighted with a mint outline.
+- March 2025 mini-calendar with day 8 active (mint circle + dot) and a dark
+  Activity Detail popover floating below it.
+- Top requested clinics donut: Dental 120 / Cardiology 249 / Surgery 165.
+- Doctor schedule with three pastel pills (Available / Unavailable / Leave).
+- Today's appointments list with five illustrated avatars + venue / mode
+  hints (`room 204`, `video call`, …).
+
+## Default sample provenance.json
+
+If you ship the default sample without re-sourcing the data, use:
+
+```json
+{
+  "generatedAt": "2026-04-29T12:00:00.000Z",
+  "generatedBy": "agent",
+  "notes": "Default sample data shipped with the clinic-console template. Replace with real clinic data before sharing externally.",
+  "sources": [
+    { "label": "Template default sample", "type": "user_input" }
+  ]
+}
+```
+
+## Data contract
+
+The shape below is the contract between `template.html` and `data.json`.
+Every key listed is referenced by at least one `{{data.path}}` interpolation
+in `template.html`. All values are scalars (string or number); the template
+does not invoke any expression / helper / conditional logic — it is a
+straight `html_template_v1` substitution.
+
+### Top-level scalars
+
+| Key | Example | Notes |
+|---|---|---|
+| `brand_name` | `"ST. LUKES"` | Sidebar wordmark. Keep ≤14 characters. |
+| `greeting` | `"Hey Lukmon, glad to have you back! 🙌"` | Single emoji allowed at the end; no other emoji anywhere in the artifact. |
+| `search_placeholder` | `"Search doctors, patients, rooms…"` | Greeting-row search input ghost text. |
+| `search_shortcut` | `"⌘K"` | Right-side keycap label. |
+| `secondary_action_label` | `"Export CSV"` | Greeting-row secondary button text. |
+| `primary_action_label` | `"Add new"` | Greeting-row primary mint CTA text. |
+
+### `user`
+
+| Key | Example | Notes |
+|---|---|---|
+| `name` | `"Lukmon Olabode"` | Sidebar bottom row. |
+| `role` | `"Admin"` | One-word role; longer roles wrap. |
+| `av_class` | `"av-orange"` | One of `av-orange`, `av-pink`, `av-mint`, `av-blue`, `av-violet`, `av-amber`, `av-rose`. |
+| `initial` | `"L"` | Single uppercase letter. |
+
+### `nav_main` and `nav_management` (5 items each)
+
+Each item shape:
+
+| Key | Example | Notes |
+|---|---|---|
+| `label` | `"Dashboard"` | Nav text. |
+| `active_class` | `""` or `"active"` | Set to `"active"` on exactly one nav item across both groups. |
+| `count` | `""` or `"10"` | Empty string hides the count badge (CSS `:empty { display: none }`). |
+
+> **Icons are template-locked.** Each nav slot's icon is hardcoded inside
+> `template.html` (see [Icons are template-locked](#icons-are-template-locked)
+> below) and is not exposed through `data.json`. The `html_template_v1`
+> security validator forbids `{{data.*}}` interpolation inside URL-bearing
+> attributes (`<use href>`, `<a href>`, `<img src>`, …) — and even if it
+> didn't, the validator runs *before* substitution, so a malformed `data.json`
+> could smuggle a `javascript:` URL past it. The reorder rule is therefore:
+> if you change the meaning of a nav slot, also edit the corresponding
+> `<use href="#icon-…">` literal in `template.html`.
+
+### `pro_card`
+
+| Key | Example | Notes |
+|---|---|---|
+| `tag` | `"Pro"` | Black pill in the upgrade card. Keep ≤6 characters. |
+| `title` | `"Pssst!"` | Display title. |
+| `body` | `"Your subscription expires in 9 days."` | One-sentence nudge. |
+| `primary_label` | `"Renew"` | Mint primary action. |
+| `secondary_label` | `"Cancel"` | Outlined secondary action. |
+
+### KPI tiles `kpi_a` `kpi_b` `kpi_c` `kpi_d`
+
+Tiles A, B, D share the **caption + pattern strip** layout. Tile C uses a
+**2-row mini-list** layout instead. Every tile must have either a strip or a
+mini-list — never bare.
+
+Common keys:
+
+| Key | Example | Notes |
+|---|---|---|
+| `label` | `"Total doctors"` | Tile label. |
+| `value` | `"1,089"` | Big number (Plus Jakarta Sans 700). Use commas for thousands. |
+| `trend_class` | `"up"` or `"down"` | Pill grammar — `up` = mint, `down` = rose. |
+| `trend_label` | `"↑ 5.5%"` | Always include the arrow glyph. |
+
+> KPI icons are also template-locked — see
+> [Icons are template-locked](#icons-are-template-locked) below.
+
+A / B / D additional keys:
+
+| Key | Example | Notes |
+|---|---|---|
+| `caption` | `"An increase of 20 doctors in the last 7 days."` | One sentence answering "compared to what". |
+| `strip_class` | `"stripe-amber"` | One of `stripe-amber`, `stripe-blue`, `stripe-mint`. Adjacent tiles should alternate hues. |
+| `mini_stat` (B / D only) | `"1,635 today"` | Right-aligned tiny caption below the strip. |
+
+C (`kpi_c`) additional keys:
+
+| Key | Example |
+|---|---|
+| `rows` | array of 2 objects: `{ "label": "General room", "value": "100" }` |
+
+### `chart`
+
+| Key | Example | Notes |
+|---|---|---|
+| `title` | `"Patient overview"` | Card title. |
+| `dropdown_label` | `"Last 6 months"` | Time-range chip text. |
+| `legend_a` `legend_b` `legend_c` | `"Total patients"` etc. | Three legend captions. |
+| `bars` | array of 14 objects: `{ "x": "34", "y": "148", "h": "92" }` | 7 month pairs (mint back, blue front). Bar 5 (index 5) is the highlighted month — the template adds a 2px mint stroke to bar 5 only. |
+| `x_labels` | `["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"]` | Seven month labels matching the seven bar pairs. |
+
+### `calendar`
+
+| Key | Example | Notes |
+|---|---|---|
+| `month_label` | `"March 2025"` | Header. |
+| `dow` | `["SUN", "MON", "TUE", "WED", "THU", "FRI", "SAT"]` | Always 7 items. |
+| `days` | array of exactly **35** objects: `{ "label": "1", "modifier": "" }` | 5 weeks × 7 days. `modifier` = `""`, `"muted"` (leading/trailing month), or `"active"` (single highlighted day, mint circle). |
+
+### `activity`
+
+| Key | Example | Notes |
+|---|---|---|
+| `title` | `"Activity Detail · Mar 8"` | Popover header — should reference the active calendar day. |
+| `events` | array of exactly 3 objects: `{ "av_class": "blue", "name": "Dr. Sarah · post-op review", "time": "11:00 am" }` | Three events. `av_class` ∈ `blue`, `pink`, `violet`, `mint`, `amber`. |
+| `add_label` | `"＋ Add item"` | Footer link. |
+
+### `donut`
+
+| Key | Example | Notes |
+|---|---|---|
+| `title` | `"Top 3 most requested clinics"` | Card title. |
+| `center_label` | `"Total patients"` | Above the center number. |
+| `center_num` | `"534"` | The big tabular number in the donut hole. |
+| `segment_b` | `{ "dasharray": "120 240", "dashoffset": "0" }` | SVG `stroke-dasharray` + `stroke-dashoffset` for the pink slice. Sum of arc lengths over a r=38 circle equals `2π × 38 ≈ 239`. |
+| `segment_c` | `{ "dasharray": "35 240", "dashoffset": "-120" }` | Same for the mint slice. The blue background ring is the full circumference — no per-segment math needed. |
+| `legend` | array of exactly 3 objects: `{ "value": "120", "label": "Dental" }` | Three entries in blue / pink / mint order. |
+
+### `schedule`
+
+| Key | Example | Notes |
+|---|---|---|
+| `title` | `"Doctors's schedule"` | Card title. |
+| `stats` | array of exactly 3 objects: `{ "value": "51", "small": "Total", "label": "Available" }` | Available / Unavailable / Leave counts in a 3-column grid. |
+| `list_header_label` | `"List of Doctor"` | Sortable list header label. |
+| `doctors` | array of exactly 4 objects | See below. |
+
+Each `doctors` row:
+
+| Key | Example | Notes |
+|---|---|---|
+| `av_class` | `"av-blue"` | Avatar gradient. |
+| `initial` | `"P"` | Single uppercase letter. |
+| `name` | `"Peter Bashir"` | Real-feeling name. |
+| `role` | `"Anesthesiologist"` | Specialty. |
+| `status_class` | `"avail"` `"unav"` `"leave"` | Pill grammar. |
+| `status_label` | `"Available"` `"Unavailable"` `"Leave"` | Pill text. |
+
+### `appointments`
+
+| Key | Example |
+|---|---|
+| `title` | `"Today's appointments"` |
+| `list` | array of exactly 5 objects |
+
+Each `list` row:
+
+| Key | Example | Notes |
+|---|---|---|
+| `av_class` | `"av-pink"` | Avatar gradient. |
+| `initial` | `"R"` | Single uppercase letter. |
+| `name` | `"Ruth Tubonimi"` | Real-feeling name. |
+| `role` | `"Gastroenterology · room 204"` | Specialty + venue / mode hint (`room N`, `video call`, `telemedicine`). |
+| `date` | `"Today"` | Short date label. |
+| `time` | `"09:40"` | 24h or 12h, pick one and stay consistent. |
+
+## Icons are template-locked
+
+`html_template_v1` forbids `{{data.*}}` interpolation inside URL-bearing
+attributes such as `<use href>`, `<a href>`, `<img src>`,
+`<form action>`, etc. (see
+[`skills/live-artifact/references/artifact-schema.md`](../../../references/artifact-schema.md#html-template-v1-binding-rules)).
+The renderer's security validator runs *before* `{{data.*}}` substitution, so
+even a well-formed validator pass would not protect a future `data.json`
+that put `javascript:alert(1)` (or any other URL value) into one of these
+attributes.
+
+This template therefore hardcodes every `<use href="#icon-…">` reference in
+`template.html` itself. Each slot has a fixed icon id:
+
+| Slot | Hardcoded icon id |
+|---|---|
+| Sidebar brand mark | `#icon-leaf` |
+| Sidebar collapse toggle | `#icon-collapse` |
+| `nav_main[0]` Dashboard | `#icon-dashboard` |
+| `nav_main[1]` Message | `#icon-message` |
+| `nav_main[2]` Schedule | `#icon-schedule` |
+| `nav_main[3]` Notification | `#icon-bell` |
+| `nav_main[4]` Transaction | `#icon-card` |
+| `nav_management[0]` Doctor | `#icon-user` |
+| `nav_management[1]` Medicine | `#icon-pill` |
+| `nav_management[2]` Bedroom | `#icon-bed` |
+| `nav_management[3]` Appointment | `#icon-check-square` |
+| `nav_management[4]` Patient | `#icon-people` |
+| Sidebar logout | `#icon-logout` |
+| Greeting-row search | `#icon-search` |
+| Greeting-row secondary CTA | `#icon-download` |
+| Greeting-row primary CTA | `#icon-plus` |
+| `kpi_a` glyph | `#icon-user` |
+| `kpi_b` glyph | `#icon-schedule` |
+| `kpi_c` glyph | `#icon-bed` |
+| `kpi_d` glyph | `#icon-people` |
+| Patient-overview card | `#icon-clock` |
+| Time-range dropdown chevron | `#icon-chev-down` |
+| Calendar prev / next | `#icon-chev-left`, `#icon-chev-right` |
+| Top-clinics card | `#icon-stethoscope` |
+| Doctor-schedule card | `#icon-schedule` |
+| List header chevron | `#icon-chev-down` |
+| Today's-appointments card | `#icon-check-square` |
+
+If you re-purpose a slot (e.g. swap `nav_main[2] Schedule` for
+`nav_main[2] Reports`), edit the corresponding `<use href="#icon-…">` literal
+in `template.html` to match — the icon set inside the inline `<symbol>`
+defs at the top of `template.html` already includes 21 icons covering the
+common clinic / hospital / pharmacy / telemedicine vocabulary
+(`#icon-dashboard`, `#icon-message`, `#icon-schedule`, `#icon-bell`,
+`#icon-card`, `#icon-user`, `#icon-pill`, `#icon-bed`, `#icon-check-square`,
+`#icon-people`, `#icon-leaf`, `#icon-clock`, `#icon-stethoscope`,
+`#icon-search`, `#icon-download`, `#icon-plus`, `#icon-chev-left`,
+`#icon-chev-right`, `#icon-chev-down`, `#icon-collapse`, `#icon-logout`).
+
+If you need a runtime-configurable icon, add a new constrained,
+non-URL-bearing mechanism (for example a `data.kpi_a.icon_class` that toggles
+between a fixed list of CSS classes the template enumerates) — never
+interpolate into `<use href>` directly.
+
+## Style guarantees
+
+The template enforces, in CSS only (no JavaScript):
+
+- Cool off-white canvas (`#EEF2F6`), bright white surfaces, 18px card radii, 1px hairline borders.
+- Mint accent (`#10B981`) restricted to five places: active sidebar nav row, primary CTA, KPI icon glyphs, success metric pill, active calendar date.
+- Diagonal-stripe pattern fills (135°, 8px line + 8px gap) on KPI footer strips and inside bar-chart bars.
+- Pastel-only status pills (mint / rose / amber).
+- Tabular lining numerals on every numeric value (`font-feature-settings: "tnum","lnum"`).
+- The dark calendar activity popover is the only dark surface in the artifact.
+- Mobile reflow at ≤920px: sidebar stacks above main, KPI strip becomes 2 cols then 1 col, mid and bottom rows stack.
+- No external CDN imports. Fonts use system fallback (`Plus Jakarta Sans, Inter, system-ui, sans-serif`).
+
+## Customization tips
+
+- **Telemedicine** variant: replace `kpi_c` (Available rooms) with `Live sessions`, swap the donut to `Top consultation types` (Video / Audio / Chat), and add `· video call` / `· audio call` venue hints in appointment rows.
+- **Pharmacy** variant: replace the doctor schedule with stock levels — keep the same shape, just rename the columns to SKU / drug / stock pill.
+- **Pediatric** variant: tilt the avatar palette toward `av-pink`, `av-amber`, `av-orange`, keep the active calendar day on a children's milestone.
+
+For all variants, **do not** introduce new colors, fonts, or radii. Every visual lever is already a token in `:root{}`.
+
+## Bounded JSON envelope
+
+This default `data.json` is well within the live-artifact bounded JSON
+constraints:
+
+| Constraint | Limit | This sample |
+|---|---|---|
+| Object/array depth | 8 | 4 |
+| Object keys | 100 / object | ≤20 |
+| Array length | 500 | 35 (calendar.days) |
+| String length | 16 KiB | <100 chars |
+| Serialized size | 256 KiB | ~7 KiB |
+
+If you scale up the bar count, calendar density, or list rows, stay well
+under these limits. Refresh writes go through the same validation, so
+oversized data will be rejected before persistence.

package/dist/__w3kits/assets/design-templates/live-artifact/assets/templates/clinic-console/data.json

@@ -0,0 +1,165 @@
+{
+  "brand_name": "ST. LUKES",
+  "greeting": "Hey Lukmon, glad to have you back! 🙌",
+  "search_placeholder": "Search doctors, patients, rooms…",
+  "search_shortcut": "⌘K",
+  "secondary_action_label": "Export CSV",
+  "primary_action_label": "Add new",
+
+  "user": {
+    "name": "Lukmon Olabode",
+    "role": "Admin",
+    "av_class": "av-orange",
+    "initial": "L"
+  },
+
+  "nav_main_label": "Main Menu",
+  "nav_main": [
+    { "label": "Dashboard",    "active_class": "active", "count": "" },
+    { "label": "Message",      "active_class": "",       "count": "10" },
+    { "label": "Schedule",     "active_class": "",       "count": "" },
+    { "label": "Notification", "active_class": "",       "count": "12" },
+    { "label": "Transaction",  "active_class": "",       "count": "" }
+  ],
+
+  "nav_management_label": "Management",
+  "nav_management": [
+    { "label": "Doctor",      "active_class": "", "count": "" },
+    { "label": "Medicine",    "active_class": "", "count": "" },
+    { "label": "Bedroom",     "active_class": "", "count": "" },
+    { "label": "Appointment", "active_class": "", "count": "" },
+    { "label": "Patient",     "active_class": "", "count": "" }
+  ],
+
+  "pro_card": {
+    "tag": "Pro",
+    "title": "Pssst!",
+    "body": "Your subscription expires in 9 days.",
+    "primary_label": "Renew",
+    "secondary_label": "Cancel"
+  },
+
+  "kpi_a": {
+    "label": "Total doctors",
+    "value": "1,089",
+    "trend_class": "down",
+    "trend_label": "↓ 4.2%",
+    "caption": "An increase of 20 doctors in the last 7 days.",
+    "strip_class": "stripe-amber"
+  },
+  "kpi_b": {
+    "label": "Total bookings",
+    "value": "17,610",
+    "trend_class": "up",
+    "trend_label": "↑ 5.5%",
+    "caption": "Last 7 days: 5,231 → 8,323 visitors.",
+    "strip_class": "stripe-blue",
+    "mini_stat": "1,635 today"
+  },
+  "kpi_c": {
+    "label": "Available rooms",
+    "value": "8,450",
+    "trend_class": "up",
+    "trend_label": "↑ 462",
+    "rows": [
+      { "label": "General room", "value": "100" },
+      { "label": "Private room", "value": "75" }
+    ]
+  },
+  "kpi_d": {
+    "label": "Total visitors",
+    "value": "29,709",
+    "trend_class": "up",
+    "trend_label": "↑ 3.5%",
+    "caption": "Top 3 in-demand clinics this month.",
+    "strip_class": "stripe-amber",
+    "mini_stat": "1,070 today"
+  },
+
+  "chart": {
+    "title": "Patient overview",
+    "dropdown_label": "Last 6 months",
+    "legend_a": "Total patients",
+    "legend_b": "Avg. hospitalized",
+    "legend_c": "Avg. outpatient care",
+    "bars": [
+      { "x": "34",  "y": "148", "h": "92"  },
+      { "x": "58",  "y": "108", "h": "132" },
+      { "x": "120", "y": "124", "h": "116" },
+      { "x": "144", "y": "92",  "h": "148" },
+      { "x": "206", "y": "96",  "h": "144" },
+      { "x": "230", "y": "56",  "h": "184" },
+      { "x": "292", "y": "156", "h": "84"  },
+      { "x": "316", "y": "116", "h": "124" },
+      { "x": "378", "y": "140", "h": "100" },
+      { "x": "402", "y": "100", "h": "140" },
+      { "x": "464", "y": "120", "h": "120" },
+      { "x": "488", "y": "80",  "h": "160" },
+      { "x": "550", "y": "160", "h": "80"  },
+      { "x": "574", "y": "128", "h": "112" }
+    ],
+    "x_labels": ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"]
+  },
+
+  "calendar": {
+    "month_label": "March 2025",
+    "dow": ["SUN", "MON", "TUE", "WED", "THU", "FRI", "SAT"],
+    "days": [
+      { "label": "23", "modifier": "muted" }, { "label": "24", "modifier": "muted" }, { "label": "25", "modifier": "muted" }, { "label": "26", "modifier": "muted" }, { "label": "27", "modifier": "muted" }, { "label": "28", "modifier": "muted" }, { "label": "1",  "modifier": "" },
+      { "label": "2",  "modifier": "" },      { "label": "3",  "modifier": "" },      { "label": "4",  "modifier": "" },      { "label": "5",  "modifier": "" },      { "label": "6",  "modifier": "" },      { "label": "7",  "modifier": "" },      { "label": "8",  "modifier": "active" },
+      { "label": "9",  "modifier": "" },      { "label": "10", "modifier": "" },      { "label": "11", "modifier": "" },      { "label": "12", "modifier": "" },      { "label": "13", "modifier": "" },      { "label": "14", "modifier": "" },      { "label": "15", "modifier": "" },
+      { "label": "16", "modifier": "" },      { "label": "17", "modifier": "" },      { "label": "18", "modifier": "" },      { "label": "19", "modifier": "" },      { "label": "20", "modifier": "" },      { "label": "21", "modifier": "" },      { "label": "22", "modifier": "" },
+      { "label": "23", "modifier": "" },      { "label": "24", "modifier": "" },      { "label": "25", "modifier": "" },      { "label": "26", "modifier": "" },      { "label": "27", "modifier": "" },      { "label": "28", "modifier": "" },      { "label": "29", "modifier": "" }
+    ]
+  },
+
+  "activity": {
+    "title": "Activity Detail · Mar 8",
+    "events": [
+      { "av_class": "blue",   "name": "Dr. Sarah · post-op review", "time": "11:00 am" },
+      { "av_class": "pink",   "name": "Dental staff meetup",         "time": "3:00 pm"  },
+      { "av_class": "violet", "name": "Ola Muhammad intake",          "time": "4:00 pm"  }
+    ],
+    "add_label": "＋ Add item"
+  },
+
+  "donut": {
+    "title": "Top 3 most requested clinics",
+    "center_label": "Total patients",
+    "center_num": "534",
+    "segment_b": { "dasharray": "120 240", "dashoffset": "0" },
+    "segment_c": { "dasharray": "35 240",  "dashoffset": "-120" },
+    "legend": [
+      { "value": "120", "label": "Dental" },
+      { "value": "249", "label": "Cardiology" },
+      { "value": "165", "label": "Surgery" }
+    ]
+  },
+
+  "schedule": {
+    "title": "Doctors's schedule",
+    "stats": [
+      { "value": "51", "small": "Total", "label": "Available" },
+      { "value": "23", "small": "Total", "label": "Unavailable" },
+      { "value": "09", "small": "Total", "label": "Leave" }
+    ],
+    "list_header_label": "List of Doctor",
+    "doctors": [
+      { "av_class": "av-blue",   "initial": "P", "name": "Peter Bashir",    "role": "Anesthesiologist", "status_class": "avail", "status_label": "Available"   },
+      { "av_class": "av-violet", "initial": "D", "name": "Deborah Fagbemi", "role": "Cardiologist",     "status_class": "unav",  "status_label": "Unavailable" },
+      { "av_class": "av-rose",   "initial": "H", "name": "Hannah Diongoli", "role": "Dermatologist",    "status_class": "avail", "status_label": "Available"   },
+      { "av_class": "av-amber",  "initial": "A", "name": "Aisha Bello",     "role": "Pediatrician",     "status_class": "leave", "status_label": "Leave"       }
+    ]
+  },
+
+  "appointments": {
+    "title": "Today's appointments",
+    "list": [
+      { "av_class": "av-pink",   "initial": "R", "name": "Ruth Tubonimi",  "role": "Gastroenterology · room 204", "date": "Today", "time": "09:40" },
+      { "av_class": "av-amber",  "initial": "J", "name": "Joseph Obiano",  "role": "Psychiatry · video call",     "date": "Today", "time": "10:25" },
+      { "av_class": "av-mint",   "initial": "T", "name": "Timothy Jibrin", "role": "Hematology · room 117",        "date": "Today", "time": "11:00" },
+      { "av_class": "av-violet", "initial": "E", "name": "Elizabeth Kanu", "role": "Ophthalmology · room 09",      "date": "Today", "time": "02:15" },
+      { "av_class": "av-blue",   "initial": "S", "name": "Simon Garba",    "role": "Otolaryngology · room 21",     "date": "Today", "time": "03:40" }
+    ]
+  }
+}