<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="robots" content="noindex, nofollow">
    
    <meta name="csrf-token" content="3GTvEQqdYpuHzvwGhpneQff2fV5iENZvFgfZsOcA">
    <title>Dashboard — BITMED</title>
    <script>
        // Resolve the theme before first paint so there is no flash of the
        // wrong palette. An explicit choice is remembered; otherwise the
        // operating-system preference is honoured.
        (function () {
            try {
                var saved = window.localStorage.getItem('bitmed-theme');
                if (saved !== 'light' && saved !== 'dark') {
                    saved = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
                }
                document.documentElement.setAttribute('data-theme', saved);
            } catch (error) {
                document.documentElement.setAttribute('data-theme', 'light');
            }
        })();
    </script>
    <link rel="preload" href="/assets/fonts/InterVariable.woff2" as="font" type="font/woff2" crossorigin>
    <link rel="stylesheet" href="/assets/css/bitmed.css">
</head>
<body>
<a class="skip-link" href="#main-content">Skip to main content</a>

<div class="app" data-nav="closed" id="app-shell">
    <aside class="app__sidebar" aria-label="Primary navigation">
        <a class="app__brand" href="http://127.0.0.1:8010/dashboard">
            <span class="app__brand-mark" aria-hidden="true">B</span>
            <span class="app__brand-text">
                BITMED
                <span class="app__brand-sub">
                    Lagos Family Clinic
                </span>
            </span>
        </a>

        <nav class="app__nav">
                            <div class="app__nav-group">
                    <div class="app__nav-heading">
                                                    <svg class="app__nav-icon" aria-hidden="true"><use href="/assets/icons/sprite.svg#home"></use></svg>
                                                Overview
                    </div>
                                            <a class="app__nav-link"
                           href="http://127.0.0.1:8010/dashboard"
                            aria-current="page" >
                                                            <svg class="app__nav-item-icon" aria-hidden="true"><use href="/assets/icons/sprite.svg#layout-dashboard"></use></svg>
                                                        <span>Dashboard</span>
                                                    </a>
                                            <a class="app__nav-link"
                           href="http://127.0.0.1:8010/patients"
                           >
                                                            <svg class="app__nav-item-icon" aria-hidden="true"><use href="/assets/icons/sprite.svg#users"></use></svg>
                                                        <span>Patients</span>
                                                    </a>
                                    </div>
                            <div class="app__nav-group">
                    <div class="app__nav-heading">
                                                    <svg class="app__nav-icon" aria-hidden="true"><use href="/assets/icons/sprite.svg#heart-pulse"></use></svg>
                                                Care
                    </div>
                                            <a class="app__nav-link"
                           href="http://127.0.0.1:8010/appointments"
                           >
                                                            <svg class="app__nav-item-icon" aria-hidden="true"><use href="/assets/icons/sprite.svg#calendar"></use></svg>
                                                        <span>Appointments</span>
                                                    </a>
                                            <a class="app__nav-link"
                           href="http://127.0.0.1:8010/queue"
                           >
                                                            <svg class="app__nav-item-icon" aria-hidden="true"><use href="/assets/icons/sprite.svg#list-check"></use></svg>
                                                        <span>Queue</span>
                                                    </a>
                                            <a class="app__nav-link"
                           href="http://127.0.0.1:8010/calendar"
                           >
                                                            <svg class="app__nav-item-icon" aria-hidden="true"><use href="/assets/icons/sprite.svg#calendar-days"></use></svg>
                                                        <span>Calendar</span>
                                                    </a>
                                            <a class="app__nav-link"
                           href="http://127.0.0.1:8010/encounters"
                           >
                                                            <svg class="app__nav-item-icon" aria-hidden="true"><use href="/assets/icons/sprite.svg#clipboard-list"></use></svg>
                                                        <span>Encounters</span>
                                                    </a>
                                            <a class="app__nav-link"
                           href="http://127.0.0.1:8010/patients//record"
                           >
                                                            <svg class="app__nav-item-icon" aria-hidden="true"><use href="/assets/icons/sprite.svg#file-medical"></use></svg>
                                                        <span>Clinical records</span>
                                                    </a>
                                            <a class="app__nav-link"
                           href="http://127.0.0.1:8010/results"
                           >
                                                            <svg class="app__nav-item-icon" aria-hidden="true"><use href="/assets/icons/sprite.svg#flask-conical"></use></svg>
                                                        <span>Results review</span>
                                                    </a>
                                            <a class="app__nav-link"
                           href="http://127.0.0.1:8010/referrals"
                           >
                                                            <svg class="app__nav-item-icon" aria-hidden="true"><use href="/assets/icons/sprite.svg#arrow-right-circle"></use></svg>
                                                        <span>Referrals</span>
                                                    </a>
                                            <a class="app__nav-link"
                           href="http://127.0.0.1:8010/cds"
                           >
                                                            <svg class="app__nav-item-icon" aria-hidden="true"><use href="/assets/icons/sprite.svg#brain"></use></svg>
                                                        <span>Decision support</span>
                                                    </a>
                                            <a class="app__nav-link"
                           href="http://127.0.0.1:8010/results/deliveries"
                           >
                                                            <svg class="app__nav-item-icon" aria-hidden="true"><use href="/assets/icons/sprite.svg#send"></use></svg>
                                                        <span>Result deliveries</span>
                                                    </a>
                                            <a class="app__nav-link"
                           href="http://127.0.0.1:8010/specimens"
                           >
                                                            <svg class="app__nav-item-icon" aria-hidden="true"><use href="/assets/icons/sprite.svg#test-tube"></use></svg>
                                                        <span>Specimens</span>
                                                    </a>
                                            <a class="app__nav-link"
                           href="http://127.0.0.1:8010/specimens/process"
                           >
                                                            <svg class="app__nav-item-icon" aria-hidden="true"><use href="/assets/icons/sprite.svg#microscope"></use></svg>
                                                        <span>Processing &amp; QC</span>
                                                    </a>
                                            <a class="app__nav-link"
                           href="http://127.0.0.1:8010/drug-administrations"
                           >
                                                            <svg class="app__nav-item-icon" aria-hidden="true"><use href="/assets/icons/sprite.svg#pill"></use></svg>
                                                        <span>Drug administration</span>
                                                    </a>
                                    </div>
                            <div class="app__nav-group">
                    <div class="app__nav-heading">
                                                    <svg class="app__nav-icon" aria-hidden="true"><use href="/assets/icons/sprite.svg#bed"></use></svg>
                                                Admission
                    </div>
                                            <a class="app__nav-link"
                           href="http://127.0.0.1:8010/beds"
                           >
                                                            <svg class="app__nav-item-icon" aria-hidden="true"><use href="/assets/icons/sprite.svg#bed"></use></svg>
                                                        <span>Bed management</span>
                                                    </a>
                                            <a class="app__nav-link"
                           href="http://127.0.0.1:8010/wards"
                           >
                                                            <svg class="app__nav-item-icon" aria-hidden="true"><use href="/assets/icons/sprite.svg#building"></use></svg>
                                                        <span>Wards</span>
                                                    </a>
                                    </div>
                            <div class="app__nav-group">
                    <div class="app__nav-heading">
                                                    <svg class="app__nav-icon" aria-hidden="true"><use href="/assets/icons/sprite.svg#help-circle"></use></svg>
                                                Assistance
                    </div>
                                            <a class="app__nav-link"
                           href="http://127.0.0.1:8010/ask"
                           >
                                                            <svg class="app__nav-item-icon" aria-hidden="true"><use href="/assets/icons/sprite.svg#bot"></use></svg>
                                                        <span>Ask BITMED AI</span>
                                                    </a>
                                    </div>
                    </nav>

        <div class="app__sidebar-foot">
            <button class="theme-toggle" type="button" aria-pressed="false">
                <svg class="app__nav-item-icon" aria-hidden="true"><use href="/assets/icons/sprite.svg#moon"></use></svg>
                <span class="theme-toggle__label">Dark mode</span>
            </button>
        </div>
    </aside>

    <div class="app__main">
        <header class="app__topbar">
            <button class="app__nav-toggle" type="button" aria-expanded="false" aria-controls="app-shell">
                <svg class="app__nav-item-icon" aria-hidden="true"><use href="/assets/icons/sprite.svg#menu"></use></svg>
                <span>Menu</span>
            </button>

                            <form class="topbar-search" role="search" method="get" action="http://127.0.0.1:8010/patients">
                    <svg class="topbar-search__icon" aria-hidden="true"><use href="/assets/icons/sprite.svg#search"></use></svg>
                    <label class="visually-hidden" for="topbar-search-input">Search patients</label>
                    <input id="topbar-search-input" type="search" name="q" value=""
                           placeholder="Search patients by name or MRN" autocomplete="off">
                </form>
            
            <div class="app__topbar-spacer"></div>

                            <div class="topbar-actions">
                                            <details class="menu add-menu">
                            <summary class="btn btn--dark">
                                <svg class="btn-icon" aria-hidden="true"><use href="/assets/icons/sprite.svg#plus"></use></svg>
                                <span>Add</span>
                            </summary>
                            <div class="menu__panel">
                                                                    <a class="menu__item" href="http://127.0.0.1:8010/patients/new">
                                        <svg class="menu__icon" aria-hidden="true"><use href="/assets/icons/sprite.svg#user-plus"></use></svg>
                                        <span>Register patient</span>
                                    </a>
                                                                    <a class="menu__item" href="http://127.0.0.1:8010/patients">
                                        <svg class="menu__icon" aria-hidden="true"><use href="/assets/icons/sprite.svg#search"></use></svg>
                                        <span>Find a patient</span>
                                    </a>
                                                                    <a class="menu__item" href="http://127.0.0.1:8010/patients//record">
                                        <svg class="menu__icon" aria-hidden="true"><use href="/assets/icons/sprite.svg#heart-pulse"></use></svg>
                                        <span>Record vitals</span>
                                    </a>
                                                            </div>
                        </details>
                    
                    <button class="icon-btn" type="button" aria-disabled="true"
                            title="Direct messaging is not part of this build yet.">
                        <svg class="icon-btn__icon" aria-hidden="true"><use href="/assets/icons/sprite.svg#message"></use></svg>
                        <span class="visually-hidden">Messages — not available in this build</span>
                    </button>

                    <button class="icon-btn" type="button" aria-disabled="true"
                            title="Notification centre is not part of this build yet.">
                        <svg class="icon-btn__icon" aria-hidden="true"><use href="/assets/icons/sprite.svg#bell"></use></svg>
                        <span class="visually-hidden">Notifications — not available in this build</span>
                    </button>

                    <a class="icon-btn" href="http://127.0.0.1:8010/settings/two-step" title="Account settings">
                        <svg class="icon-btn__icon" aria-hidden="true"><use href="/assets/icons/sprite.svg#settings"></use></svg>
                        <span class="visually-hidden">Account settings</span>
                    </a>

                                        <details class="menu user-menu">
                        <summary class="user-chip">
                            <span class="user-avatar" aria-hidden="true">HY</span>
                            <span class="user-chip__meta">
                                <strong>Halima Yusuf</strong>
                                <span>Nurse</span>
                            </span>
                            <svg class="user-chip__caret" aria-hidden="true"><use href="/assets/icons/sprite.svg#chevron-down"></use></svg>
                        </summary>
                        <div class="menu__panel menu__panel--right">
                            <div class="menu__header">
                                <strong>Halima Yusuf</strong>
                                <span>nurse@lagosfamilyclinic.bitmed.test</span>
                                <span class="menu__role">Nurse</span>
                            </div>
                            <a class="menu__item" href="http://127.0.0.1:8010/settings/two-step">
                                <svg class="menu__icon" aria-hidden="true"><use href="/assets/icons/sprite.svg#shield"></use></svg>
                                <span>Two-step verification</span>
                            </a>
                            <a class="menu__item" href="http://127.0.0.1:8010/dashboard">
                                <svg class="menu__icon" aria-hidden="true"><use href="/assets/icons/sprite.svg#home"></use></svg>
                                <span>Dashboard</span>
                            </a>
                            <form method="POST" action="http://127.0.0.1:8010/logout">
                                <input type="hidden" name="_token" value="3GTvEQqdYpuHzvwGhpneQff2fV5iENZvFgfZsOcA" autocomplete="off">                                <button class="menu__item menu__item--button" type="submit">
                                    <svg class="menu__icon" aria-hidden="true"><use href="/assets/icons/sprite.svg#log-out"></use></svg>
                                    <span>Sign out</span>
                                </button>
                            </form>
                        </div>
                    </details>
                </div>
                    </header>

        <main class="app__content" id="main-content">
            
            
                <div class="stack dash">
        <div class="page-head">
            <div class="page-head__text">
                <h1>Good day, Halima Yusuf</h1>
                <p class="lede">
                    Every figure below is counted from records in this organisation only.
                    A card whose capability your role cannot reach says so instead of showing a number.
                </p>
            </div>
            <div class="page-head__actions">
                <a class="btn btn--outline" href="http://127.0.0.1:8010/setup/modules">Module registry</a>
                            </div>
        </div>

        <div class="alert alert--info" role="note">
            <span class="alert__icon" aria-hidden="true">ℹ</span>
            <span>
                <strong>Synthetic demonstration data.</strong>
                Nothing here is a real patient record, and no clinical feature in this
                build should be used for care until its clinical owner has signed off.
            </span>
        </div>

        
        <div class="metric-grid">
            <article class="metric metric--lavender">
    <div class="metric__top">
        <span class="metric__icon" aria-hidden="true">
            <svg><use href="/assets/icons/sprite.svg#users"></use></svg>
        </span>
        <span class="metric__label">Total patients</span>
                    <a class="metric__menu" href="http://127.0.0.1:8010/patients" aria-label="Open Total patients">
                <svg class="icon-btn__icon" aria-hidden="true"><use href="/assets/icons/sprite.svg#chevron-right"></use></svg>
            </a>
            </div>

            <div class="metric__value">
            2        </div>
    
    <div class="metric__foot">
                                <span class="trend trend--up">
                <svg class="trend__icon" aria-hidden="true"><use href="/assets/icons/sprite.svg#trending-up"></use></svg>
                New activity
                <span class="visually-hidden">vs previous 30 days</span>
            </span>
            <span class="metric__note">vs previous 30 days</span>
            </div>

    <p class="metric__context">
        Active and temporary identities. Merged records are excluded.
    </p>
</article>

            <article class="metric metric--bluegreen">
    <div class="metric__top">
        <span class="metric__icon" aria-hidden="true">
            <svg><use href="/assets/icons/sprite.svg#calendar"></use></svg>
        </span>
        <span class="metric__label">Appointments today</span>
                    <a class="metric__menu" href="http://127.0.0.1:8010/appointments" aria-label="Open Appointments today">
                <svg class="icon-btn__icon" aria-hidden="true"><use href="/assets/icons/sprite.svg#chevron-right"></use></svg>
            </a>
            </div>

            <div class="metric__value">
            0        </div>
    
    <div class="metric__foot">
                                <span class="trend trend--up">
                <svg class="trend__icon" aria-hidden="true"><use href="/assets/icons/sprite.svg#trending-up"></use></svg>
                New activity
                <span class="visually-hidden">vs last week</span>
            </span>
            <span class="metric__note">vs last week</span>
            </div>

    <p class="metric__context">
        Appointments scheduled for today.
    </p>
</article>

            <article class="metric metric--lime">
    <div class="metric__top">
        <span class="metric__icon" aria-hidden="true">
            <svg><use href="/assets/icons/sprite.svg#bed"></use></svg>
        </span>
        <span class="metric__label">Beds occupied</span>
                    <a class="metric__menu" href="http://127.0.0.1:8010/beds" aria-label="Open Beds occupied">
                <svg class="icon-btn__icon" aria-hidden="true"><use href="/assets/icons/sprite.svg#chevron-right"></use></svg>
            </a>
            </div>

            <div class="metric__value">
            4        </div>
    
    <div class="metric__foot">
                    <span class="trend trend--flat">40% occupancy</span>
            </div>

    <p class="metric__context">
        4 of 10 beds occupied.
    </p>
</article>

            <article class="metric metric--cyan">
    <div class="metric__top">
        <span class="metric__icon" aria-hidden="true">
            <svg><use href="/assets/icons/sprite.svg#file-invoice"></use></svg>
        </span>
        <span class="metric__label">Total invoices</span>
            </div>

            <div class="metric__value metric__value--muted" aria-hidden="true">—</div>
    
    <div class="metric__foot">
            </div>

    <p class="metric__context">
        Requires the invoices.view permission.
    </p>
</article>
        </div>

        
        <div class="dash__main">
            <section class="panel panel--health">
                <div class="panel__head">
    <div>
        <h2 class="panel__title">Patient health</h2>
                    <p class="panel__sub">Live counts from records in this organisation</p>
            </div>
            <div class="panel__actions"><a class="btn btn--outline btn--sm" href="http://127.0.0.1:8010/patients">All patients</a></div>
    </div>

                <div class="health-content">
                    <div class="health-illustration"><svg viewBox="0 0 220 200" aria-hidden="true" focusable="false">
    <defs>
        <linearGradient id="bitmed-anatomy-fill" x1="0" y1="0" x2="1" y2="1">
            <stop offset="0%" stop-color="#8fd3e8" stop-opacity="0.55"></stop>
            <stop offset="55%" stop-color="#b9aef0" stop-opacity="0.5"></stop>
            <stop offset="100%" stop-color="#f0c9b6" stop-opacity="0.45"></stop>
        </linearGradient>
    </defs>

    <g fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round">
        <path d="M110 14v46"></path>
        <path d="M110 60c-7 9-18 13-28 17"></path>
        <path d="M110 60c7 9 18 13 28 17"></path>
    </g>

    <g stroke="currentColor" stroke-width="4" stroke-linejoin="round">
        <path d="M102 78C84 88 60 112 56 146c-3 27 10 44 32 46 12 1 18-6 18-18V88c0-9-4-14-4-10z"
              fill="url(#bitmed-anatomy-fill)"></path>
        <path d="M118 78c18 10 42 34 46 68 3 27-10 44-32 46-12 1-18-6-18-18V88c0-9 4-14 4-10z"
              fill="url(#bitmed-anatomy-fill)"></path>
    </g>

    <path d="M110 126c-6-7-17-2-17 7 0 9 17 17 17 17s17-8 17-17c0-9-11-14-17-7z"
          fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="round" opacity="0.65"></path>
</svg>
</div>

                    <div class="health-top">
                                                    <span class="hr-badge">
                                <svg aria-hidden="true"><use href="/assets/icons/sprite.svg#activity"></use></svg>
                                72 bpm
                            </span>
                            <span class="metric__note">
                                Most recent vitals for Aisha Bello
                            </span>
                                            </div>

                    <div class="health-cards">
                        <article class="health-card">
                            <span class="health-card__label">
                                <svg aria-hidden="true"><use href="/assets/icons/sprite.svg#calendar"></use></svg>
                                Next appointment
                            </span>
                                                            <span class="health-card__value">
                                    Thu 15 Oct, 08:00
                                </span>
                                <span class="health-card__meta">
                                    Aisha Bello
                                    · Dr Ngozi Eze
                                </span>
                                                    </article>

                        <article class="health-card">
                            <span class="health-card__label">
                                <svg aria-hidden="true"><use href="/assets/icons/sprite.svg#thermometer"></use></svg>
                                Latest vitals
                            </span>
                                                            <span class="health-vitals">
                                    <span class="vital">
                                        <span class="vital__label">BP</span>
                                        <span class="vital__value">118/76</span>
                                    </span>
                                    <span class="vital">
                                        <span class="vital__label">Temp</span>
                                        <span class="vital__value">36.7°C</span>
                                    </span>
                                    <span class="vital">
                                        <span class="vital__label">SpO₂</span>
                                        <span class="vital__value">98%</span>
                                    </span>
                                    <span class="vital">
                                        <span class="vital__label">Pulse</span>
                                        <span class="vital__value">72 bpm</span>
                                    </span>
                                </span>
                                <span class="health-card__meta">Recorded 7 hours ago</span>
                                                    </article>
                    </div>
                </div>
            </section>

            <section class="panel">
                <div class="panel__head">
    <div>
        <h2 class="panel__title">Total revenue</h2>
                    <p class="panel__sub">Invoiced and collected, trailing six months</p>
            </div>
            <div class="panel__actions"><div class="segmented" role="group" aria-label="Revenue series">
                        <button class="segmented__btn" type="button" data-series-btn="invoiced" aria-pressed="true">Invoiced</button>
                        <button class="segmented__btn" type="button" data-series-btn="collected" aria-pressed="false">Collected</button>
                    </div></div>
    </div>

                                    <figure style="margin:0;">
    <svg class="chart" viewBox="0 0 520 220" role="img"
         aria-label="Invoiced and collected amounts per month for this organisation.. Solid line: invoiced. Dashed line: collected. A data table follows.">
                                <line class="chart__grid" x1="46" y1="178" x2="504" y2="178" />
            <text x="38" y="182" text-anchor="end">0</text>
                                <line class="chart__grid" x1="46" y1="137.5" x2="504" y2="137.5" />
            <text x="38" y="141.5" text-anchor="end">79.5k</text>
                                <line class="chart__grid" x1="46" y1="97" x2="504" y2="97" />
            <text x="38" y="101" text-anchor="end">159k</text>
                                <line class="chart__grid" x1="46" y1="56.5" x2="504" y2="56.5" />
            <text x="38" y="60.5" text-anchor="end">238.5k</text>
                                <line class="chart__grid" x1="46" y1="16" x2="504" y2="16" />
            <text x="38" y="20" text-anchor="end">318k</text>
        
                    <path class="chart__area" d="M46,178 L46,83.75 137.6,55.74 229.2,69.75 320.8,16 412.4,37.14 504,63.68 L504,178 Z" />
        
        <polyline class="chart__line" points="46,83.75 137.6,55.74 229.2,69.75 320.8,16 412.4,37.14 504,63.68" />
        <polyline class="chart__line chart__line--2 chart__line--dashed" points="46,83.75 137.6,76.11 229.2,69.75 320.8,30.26 412.4,37.14 504,132.15" />

                    <circle class="chart__dot" cx="46" cy="83.75" r="3" />
                    <circle class="chart__dot" cx="137.6" cy="55.74" r="3" />
                    <circle class="chart__dot" cx="229.2" cy="69.75" r="3" />
                    <circle class="chart__dot" cx="320.8" cy="16" r="3" />
                    <circle class="chart__dot" cx="412.4" cy="37.14" r="3" />
                    <circle class="chart__dot" cx="504" cy="63.68" r="3" />
                            <circle class="chart__dot chart__dot--2" cx="46" cy="83.75" r="3" />
                    <circle class="chart__dot chart__dot--2" cx="137.6" cy="76.11" r="3" />
                    <circle class="chart__dot chart__dot--2" cx="229.2" cy="69.75" r="3" />
                    <circle class="chart__dot chart__dot--2" cx="320.8" cy="30.26" r="3" />
                    <circle class="chart__dot chart__dot--2" cx="412.4" cy="37.14" r="3" />
                    <circle class="chart__dot chart__dot--2" cx="504" cy="132.15" r="3" />
        
                    <text class="chart__label" x="46" y="198" text-anchor="middle">May</text>
                    <text class="chart__label" x="137.6" y="198" text-anchor="middle">Jun</text>
                    <text class="chart__label" x="229.2" y="198" text-anchor="middle">Jul</text>
                    <text class="chart__label" x="320.8" y="198" text-anchor="middle">Aug</text>
                    <text class="chart__label" x="412.4" y="198" text-anchor="middle">Sep</text>
                    <text class="chart__label" x="504" y="198" text-anchor="middle">Oct</text>
        
        <line class="chart__axis" x1="46" y1="178" x2="504" y2="178" />
        <text x="2" y="12" class="chart__label">NGN</text>
    </svg>

    <figcaption class="small muted">
        Invoiced and collected amounts per month for this organisation.
        <details>
            <summary>Show data table</summary>
            <table class="data-table">
                <caption>Invoiced and collected amounts per month for this organisation.. Invoiced 1,456,400 NGN, collected 1,254,000 NGN across the period.</caption>
                <thead>
                    <tr>
                        <th scope="col">Month</th>
                        <th scope="col" class="num">Invoiced (NGN)</th>
                        <th scope="col" class="num">Collected (NGN)</th>
                    </tr>
                </thead>
                <tbody>
                                            <tr>
                            <th scope="row">May</th>
                            <td class="num">185,000</td>
                            <td class="num">185,000</td>
                        </tr>
                                            <tr>
                            <th scope="row">Jun</th>
                            <td class="num">240,000</td>
                            <td class="num">200,000</td>
                        </tr>
                                            <tr>
                            <th scope="row">Jul</th>
                            <td class="num">212,500</td>
                            <td class="num">212,500</td>
                        </tr>
                                            <tr>
                            <th scope="row">Aug</th>
                            <td class="num">318,000</td>
                            <td class="num">290,000</td>
                        </tr>
                                            <tr>
                            <th scope="row">Sep</th>
                            <td class="num">276,500</td>
                            <td class="num">276,500</td>
                        </tr>
                                            <tr>
                            <th scope="row">Oct</th>
                            <td class="num">224,400</td>
                            <td class="num">90,000</td>
                        </tr>
                                    </tbody>
            </table>
        </details>
    </figcaption>
</figure>

                    <div class="month-pills" role="group" aria-label="Select a month">
                                                    <button class="month-pill" type="button"
                                    data-month-pill
                                    data-label="May 2026"
                                    data-invoiced="185000"
                                    data-collected="185000"
                                    aria-pressed="false">
                                May 2026
                            </button>
                                                    <button class="month-pill" type="button"
                                    data-month-pill
                                    data-label="Jun 2026"
                                    data-invoiced="240000"
                                    data-collected="200000"
                                    aria-pressed="false">
                                Jun 2026
                            </button>
                                                    <button class="month-pill" type="button"
                                    data-month-pill
                                    data-label="Jul 2026"
                                    data-invoiced="212500"
                                    data-collected="212500"
                                    aria-pressed="false">
                                Jul 2026
                            </button>
                                                    <button class="month-pill" type="button"
                                    data-month-pill
                                    data-label="Aug 2026"
                                    data-invoiced="318000"
                                    data-collected="290000"
                                    aria-pressed="false">
                                Aug 2026
                            </button>
                                                    <button class="month-pill" type="button"
                                    data-month-pill
                                    data-label="Sep 2026"
                                    data-invoiced="276500"
                                    data-collected="276500"
                                    aria-pressed="false">
                                Sep 2026
                            </button>
                                                    <button class="month-pill" type="button"
                                    data-month-pill
                                    data-label="Oct 2026"
                                    data-invoiced="224400"
                                    data-collected="90000"
                                    aria-pressed="true">
                                Oct 2026
                            </button>
                                            </div>

                    <div class="revenue-summary">
                        <div class="revenue-stat">
                            <span class="revenue-stat__label">
                                <span data-revenue-series-label>Invoiced</span>, <span data-revenue-month-label>Oct 2026</span>
                            </span>
                            <span class="revenue-stat__value">NGN <span data-revenue-value>224,400</span></span>
                        </div>
                        <div class="revenue-stat">
                            <span class="revenue-stat__label">Six-month totals</span>
                            <span class="revenue-stat__value">
                                NGN <span data-revenue-total>1,456,400</span>
                                <small class="muted">· collected NGN <span data-revenue-collected-total>1,254,000</span></small>
                            </span>
                        </div>
                    </div>
                            </section>
        </div>

        
        <div class="dash-lower">
            <section class="panel">
                <div class="panel__head">
    <div>
        <h2 class="panel__title">Patient overview</h2>
                    <p class="panel__sub">Upcoming appointments by department</p>
            </div>
    </div>
                                    <svg class="gauge" viewBox="0 0 180 122" role="img"
                         aria-label="Busiest department Unassigned accounts for 100 percent of 9 upcoming appointments. The full breakdown follows.">
                        <path class="gauge__track" d="M20 100 A60 60 0 0 1 160 100" pathLength="100" />
                        <path class="gauge__value" d="M20 100 A60 60 0 0 1 160 100" pathLength="100"
                              stroke-dasharray="100 100" />
                        <text class="gauge__total" x="90" y="90" text-anchor="middle">100%</text>
                        <text class="gauge__caption" x="90" y="112" text-anchor="middle">Unassigned</text>
                    </svg>

                    <div class="breakdown">
                                                                                <div class="breakdown__row">
                                <span class="breakdown__label">Unassigned</span>
                                <span class="breakdown__value">9</span>
                                <span class="breakdown__bar">
                                    <span class="breakdown__fill" style="width: 100%"></span>
                                </span>
                            </div>
                                            </div>
                    <p class="panel__foot">
                        9 upcoming appointments across 1
                        department.
                    </p>
                            </section>

            <section class="panel">
                <div class="panel__head">
    <div>
        <h2 class="panel__title">Doctor schedule</h2>
                    <p class="panel__sub">Next five appointments</p>
            </div>
            <div class="panel__actions"><a class="btn btn--outline btn--sm" href="http://127.0.0.1:8010/calendar">Calendar</a></div>
    </div>
                                    <ul class="schedule-list">
                                                    <li class="schedule-item">
                                <span class="schedule-item__avatar" aria-hidden="true">DN</span>
                                <span class="schedule-item__body">
                                    <span class="schedule-item__title">Dr Ngozi Eze</span>
                                    <span class="schedule-item__meta">
                                        Aisha Bello
                                        · Unassigned
                                    </span>
                                </span>
                                <span class="schedule-item__time">
                                    Thu 15 Oct<br>
                                    08:00
                                </span>
                            </li>
                                                    <li class="schedule-item">
                                <span class="schedule-item__avatar" aria-hidden="true">DN</span>
                                <span class="schedule-item__body">
                                    <span class="schedule-item__title">Dr Ngozi Eze</span>
                                    <span class="schedule-item__meta">
                                        Chidi Okafor
                                        · Unassigned
                                    </span>
                                </span>
                                <span class="schedule-item__time">
                                    Thu 15 Oct<br>
                                    08:20
                                </span>
                            </li>
                                                    <li class="schedule-item">
                                <span class="schedule-item__avatar" aria-hidden="true">DN</span>
                                <span class="schedule-item__body">
                                    <span class="schedule-item__title">Dr Ngozi Eze</span>
                                    <span class="schedule-item__meta">
                                        Aisha Bello
                                        · Unassigned
                                    </span>
                                </span>
                                <span class="schedule-item__time">
                                    Thu 15 Oct<br>
                                    09:00
                                </span>
                            </li>
                                                    <li class="schedule-item">
                                <span class="schedule-item__avatar" aria-hidden="true">FA</span>
                                <span class="schedule-item__body">
                                    <span class="schedule-item__title">Funmi Adebayo</span>
                                    <span class="schedule-item__meta">
                                        Aisha Bello
                                        · Unassigned
                                    </span>
                                </span>
                                <span class="schedule-item__time">
                                    Fri 16 Oct<br>
                                    10:00
                                </span>
                            </li>
                                                    <li class="schedule-item">
                                <span class="schedule-item__avatar" aria-hidden="true">DN</span>
                                <span class="schedule-item__body">
                                    <span class="schedule-item__title">Dr Ngozi Eze</span>
                                    <span class="schedule-item__meta">
                                        Aisha Bello
                                        · Unassigned
                                    </span>
                                </span>
                                <span class="schedule-item__time">
                                    Tue 20 Oct<br>
                                    09:00
                                </span>
                            </li>
                                            </ul>
                            </section>

            <section class="panel panel--tint-cyan">
                <div class="panel__head">
    <div>
        <h2 class="panel__title">Reports</h2>
                    <p class="panel__sub">Recent audited activity</p>
            </div>
    </div>
                                    <div class="empty empty--inline" role="note">
    <strong>No audited activity visible</strong>
    <span>Either nothing has been recorded yet, or audit visibility is not granted to your role.</span>    
</div>
                            </section>
        </div>

        
        <h2 class="foundation-title">System foundation</h2>

        <div class="foundation-grid">
            <section class="panel">
                <div class="panel__head">
    <div>
        <h2 class="panel__title">Availability by weekday</h2>
                    <p class="panel__sub">Slot capacity, current roster</p>
            </div>
    </div>
                <figure style="margin:0;">
    <svg class="chart" viewBox="0 0 480 240" role="img"
         aria-label="Bookable slot capacity per weekday across published availability windows.. Peak 60 Slots, total 178 Slots. A data table follows.">
                                <line class="chart__grid" x1="40" y1="198" x2="468" y2="198" />
            <text x="32" y="202" text-anchor="end">0</text>
                                <line class="chart__grid" x1="40" y1="152" x2="468" y2="152" />
            <text x="32" y="156" text-anchor="end">15</text>
                                <line class="chart__grid" x1="40" y1="106" x2="468" y2="106" />
            <text x="32" y="110" text-anchor="end">30</text>
                                <line class="chart__grid" x1="40" y1="60" x2="468" y2="60" />
            <text x="32" y="64" text-anchor="end">45</text>
                                <line class="chart__grid" x1="40" y1="14" x2="468" y2="14" />
            <text x="32" y="18" text-anchor="end">60</text>
        
        <line class="chart__axis" x1="40" y1="198" x2="468" y2="198" />

                                <rect class="chart__bar chart__bar--zero"
                  x="51.62" y="198"
                  width="37.91" height="1"
                  rx="3" />
            <text class="chart__value" x="70.57" y="193" text-anchor="middle">0</text>
            <text class="chart__label" x="70.57" y="216" text-anchor="middle">Sunday</text>
                                <rect class="chart__bar chart__bar--1"
                  x="112.76" y="14"
                  width="37.91" height="184"
                  rx="3" />
            <text class="chart__value" x="131.71" y="9" text-anchor="middle">60</text>
            <text class="chart__label" x="131.71" y="216" text-anchor="middle">Monday</text>
                                <rect class="chart__bar chart__bar--1"
                  x="173.9" y="56.93"
                  width="37.91" height="141.07"
                  rx="3" />
            <text class="chart__value" x="192.86" y="51.93" text-anchor="middle">46</text>
            <text class="chart__label" x="192.86" y="216" text-anchor="middle">Tuesday</text>
                                <rect class="chart__bar chart__bar--1"
                  x="235.05" y="112.13"
                  width="37.91" height="85.87"
                  rx="3" />
            <text class="chart__value" x="254" y="107.13" text-anchor="middle">28</text>
            <text class="chart__label" x="254" y="216" text-anchor="middle">Wednesday</text>
                                <rect class="chart__bar chart__bar--1"
                  x="296.19" y="112.13"
                  width="37.91" height="85.87"
                  rx="3" />
            <text class="chart__value" x="315.14" y="107.13" text-anchor="middle">28</text>
            <text class="chart__label" x="315.14" y="216" text-anchor="middle">Thursday</text>
                                <rect class="chart__bar chart__bar--1"
                  x="357.33" y="148.93"
                  width="37.91" height="49.07"
                  rx="3" />
            <text class="chart__value" x="376.29" y="143.93" text-anchor="middle">16</text>
            <text class="chart__label" x="376.29" y="216" text-anchor="middle">Friday</text>
                                <rect class="chart__bar chart__bar--zero"
                  x="418.47" y="198"
                  width="37.91" height="1"
                  rx="3" />
            <text class="chart__value" x="437.43" y="193" text-anchor="middle">0</text>
            <text class="chart__label" x="437.43" y="216" text-anchor="middle">Saturday</text>
        
        <text x="40" y="234" class="chart__label">Slots</text>
    </svg>

    <figcaption class="small muted">
        Bookable slot capacity per weekday across published availability windows.
        <details>
            <summary>Show data table</summary>
            <table class="data-table">
                <caption>Bookable slot capacity per weekday across published availability windows.. Values are counted from records, not estimated.</caption>
                <thead>
                    <tr><th scope="col">Weekday</th><th scope="col" class="num">Slots</th></tr>
                </thead>
                <tbody>
                                            <tr>
                            <th scope="row">Sunday</th>
                            <td class="num">0</td>
                        </tr>
                                            <tr>
                            <th scope="row">Monday</th>
                            <td class="num">60</td>
                        </tr>
                                            <tr>
                            <th scope="row">Tuesday</th>
                            <td class="num">46</td>
                        </tr>
                                            <tr>
                            <th scope="row">Wednesday</th>
                            <td class="num">28</td>
                        </tr>
                                            <tr>
                            <th scope="row">Thursday</th>
                            <td class="num">28</td>
                        </tr>
                                            <tr>
                            <th scope="row">Friday</th>
                            <td class="num">16</td>
                        </tr>
                                            <tr>
                            <th scope="row">Saturday</th>
                            <td class="num">0</td>
                        </tr>
                                    </tbody>
            </table>
        </details>
    </figcaption>
</figure>
                <p class="panel__foot">
                    Source: <code>staff_availabilities</code>, filtered to this organisation.
                    Zero bars mean no published window, which is different from missing data.
                </p>
            </section>

            <section class="panel">
                                    <div class="panel__head">
    <div>
        <h2 class="panel__title">Audit events, last 7 days</h2>
                    <p class="panel__sub">Not visible to your role</p>
            </div>
    </div>
                    <div class="empty empty--inline" role="note">
    <strong>Audit trail not available to your role</strong>
    <span>Audit visibility is a separately granted permission. Denied reads are still audited.</span>    
</div>
                            </section>

            <section class="panel">
                <div class="panel__head">
    <div>
        <h2 class="panel__title">Foundation counts</h2>
                    <p class="panel__sub">Phase 1 capacity and access figures</p>
            </div>
    </div>
                <dl class="stat-list">
                                            <div class="stat-list__row">
                            <dt class="stat-list__label">
                                Availability slots each week
                                <span class="visually-hidden"> — Sum of slot capacity across published weekly availability windows.</span>
                            </dt>
                            <dd class="stat-list__value">178 <span class="muted small">slots</span></dd>
                        </div>
                                            <div class="stat-list__row">
                            <dt class="stat-list__label">
                                Staff rostered
                                <span class="visually-hidden"> — Distinct staff with at least one active availability window.</span>
                            </dt>
                            <dd class="stat-list__value">6 <span class="muted small">people</span></dd>
                        </div>
                                            <div class="stat-list__row">
                            <dt class="stat-list__label">
                                Time off, next 14 days
                                <span class="visually-hidden"> — Leave, holiday and extra-hour overrides recorded for the next 14 days.</span>
                            </dt>
                            <dd class="stat-list__value">3 <span class="muted small">entries</span></dd>
                        </div>
                                            <div class="stat-list__row">
                            <dt class="stat-list__label">
                                Active accounts
                                <span class="visually-hidden"> — Accounts in this organisation with an active status.</span>
                            </dt>
                            <dd class="stat-list__value">14 <span class="muted small">accounts</span></dd>
                        </div>
                                            <div class="stat-list__row">
                            <dt class="stat-list__label">
                                Patients registered
                                <span class="visually-hidden"> — Active and temporary identities in this organisation. Merged records are not counted here.</span>
                            </dt>
                            <dd class="stat-list__value">2 <span class="muted small">patients</span></dd>
                        </div>
                                            <div class="stat-list__row">
                            <dt class="stat-list__label">
                                Grants in force
                                <span class="visually-hidden"> — Contextual role grants that are active and not expired.</span>
                            </dt>
                            <dd class="stat-list__value">18 <span class="muted small">grants</span></dd>
                        </div>
                                    </dl>
            </section>

            <section class="panel">
                <div class="panel__head">
    <div>
        <h2 class="panel__title">Your roster</h2>
                    <p class="panel__sub">Published availability windows</p>
            </div>
            <div class="panel__actions"><a class="btn btn--outline btn--sm" href="http://127.0.0.1:8010/calendar">Open calendar</a></div>
    </div>
                                    <ul class="stat-list">
                                                    <li class="stat-list__row">
                                <span class="stat-list__label">
                                    <span class="tnum">
                                        Monday
                                        08:00–16:00
                                    </span>
                                    <span class="muted"> · Triage and observation</span>
                                </span>
                                <span class="stat-list__value">30 min</span>
                            </li>
                                                    <li class="stat-list__row">
                                <span class="stat-list__label">
                                    <span class="tnum">
                                        Tuesday
                                        08:00–16:00
                                    </span>
                                    <span class="muted"> · Triage and observation</span>
                                </span>
                                <span class="stat-list__value">30 min</span>
                            </li>
                                                    <li class="stat-list__row">
                                <span class="stat-list__label">
                                    <span class="tnum">
                                        Friday
                                        08:00–13:00
                                    </span>
                                    <span class="muted"> · Triage and observation</span>
                                </span>
                                <span class="stat-list__value">30 min</span>
                            </li>
                                            </ul>
                            </section>

            <section class="panel">
                <div class="panel__head">
    <div>
        <h2 class="panel__title">Time off, next 14 days</h2>
                    <p class="panel__sub">Leave, holiday and extra hours</p>
            </div>
    </div>
                                    <ul class="stat-list">
                                                    <li class="stat-list__row">
                                <span class="stat-list__label">
                                    <span class="tnum">Fri 16 Oct</span>
                                    <span class="muted"> · Halima Yusuf</span>
                                </span>
                                <span class="stat-list__value">
                                    <span class="badge badge--warning">
    <span aria-hidden="true">▲</span>
    <span>Leave</span>
</span>
                                </span>
                            </li>
                                                    <li class="stat-list__row">
                                <span class="stat-list__label">
                                    <span class="tnum">Mon 19 Oct</span>
                                    <span class="muted"> · Dr Ngozi Eze</span>
                                </span>
                                <span class="stat-list__value">
                                    <span class="badge badge--warning">
    <span aria-hidden="true">▲</span>
    <span>Leave</span>
</span>
                                </span>
                            </li>
                                                    <li class="stat-list__row">
                                <span class="stat-list__label">
                                    <span class="tnum">Tue 20 Oct</span>
                                    <span class="muted"> · Dr Ngozi Eze</span>
                                </span>
                                <span class="stat-list__value">
                                    <span class="badge badge--warning">
    <span aria-hidden="true">▲</span>
    <span>Holiday</span>
</span>
                                </span>
                            </li>
                                            </ul>
                            </section>

            <section class="panel">
                <div class="panel__head">
    <div>
        <h2 class="panel__title">Modules in this organisation</h2>
                    <p class="panel__sub">Registry state, stated honestly</p>
            </div>
    </div>
                <div class="table-wrap table-wrap--inset">
                    <table>
                        <caption>Registry state for this tenant. Readiness is stated honestly.</caption>
                        <thead>
                            <tr><th scope="col">Readiness</th><th scope="col" class="num">Modules</th></tr>
                        </thead>
                        <tbody>
                            <tr>
                                <th scope="row">Delivered</th>
                                <td class="num">9</td>
                            </tr>
                            <tr>
                                <th scope="row">Enabled here</th>
                                <td class="num">11</td>
                            </tr>
                            <tr>
                                <th scope="row">In development</th>
                                <td class="num">1</td>
                            </tr>
                            <tr>
                                <th scope="row">Planned</th>
                                <td class="num">4</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </section>

            <section class="panel panel--wide">
                <div class="panel__head">
    <div>
        <h2 class="panel__title">Registered but not yet delivered</h2>
                    <p class="panel__sub">Roadmap, not features</p>
            </div>
    </div>
                                    <div class="table-wrap table-wrap--inset">
                        <table>
                            <caption>Modules declared in the registry that are not delivered. They cannot be enabled until they are.</caption>
                            <thead>
                                <tr>
                                    <th scope="col">Module</th>
                                    <th scope="col">Phase</th>
                                    <th scope="col">Readiness</th>
                                    <th scope="col">Requirements</th>
                                </tr>
                            </thead>
                            <tbody>
                                                                    <tr>
                                        <th scope="row">Clinical form builder</th>
                                        <td>P1</td>
                                        <td>
                                            <span class="badge badge--warning">
    <span aria-hidden="true">▲</span>
    <span>In development</span>
</span>
                                        </td>
                                        <td class="small muted">F09</td>
                                    </tr>
                                                                    <tr>
                                        <th scope="row">Nutrition assessment and care plans</th>
                                        <td>P2</td>
                                        <td>
                                            <span class="badge badge--neutral">
    <span aria-hidden="true">●</span>
    <span>Planned</span>
</span>
                                        </td>
                                        <td class="small muted">NU02, NU03, NU04, NU05</td>
                                    </tr>
                                                                    <tr>
                                        <th scope="row">Laboratory</th>
                                        <td>P2B</td>
                                        <td>
                                            <span class="badge badge--neutral">
    <span aria-hidden="true">●</span>
    <span>Planned</span>
</span>
                                        </td>
                                        <td class="small muted">L01, L02, L03</td>
                                    </tr>
                                                                    <tr>
                                        <th scope="row">Pharmacy and dispensing</th>
                                        <td>P2B</td>
                                        <td>
                                            <span class="badge badge--neutral">
    <span aria-hidden="true">●</span>
    <span>Planned</span>
</span>
                                        </td>
                                        <td class="small muted">M01, M02, M05</td>
                                    </tr>
                                                                    <tr>
                                        <th scope="row">Patient portal and messaging</th>
                                        <td>P2C</td>
                                        <td>
                                            <span class="badge badge--neutral">
    <span aria-hidden="true">●</span>
    <span>Planned</span>
</span>
                                        </td>
                                        <td class="small muted">C11, C12, C13</td>
                                    </tr>
                                                                    <tr>
                                        <th scope="row">Billing and payment points</th>
                                        <td>P2C</td>
                                        <td>
                                            <span class="badge badge--neutral">
    <span aria-hidden="true">●</span>
    <span>Beta</span>
</span>
                                        </td>
                                        <td class="small muted">B01, B02, B03, B04, B05, B06</td>
                                    </tr>
                                                            </tbody>
                        </table>
                    </div>
                                <p class="panel__foot">
                    Dependencies are resolved before enablement: an undelivered
                    dependency keeps its dependents disabled, which fails closed.
                </p>
            </section>
        </div>
    </div>
        </main>

        <footer class="app__footer">
            Synthetic demonstration data only. No real patient records, and no real
            payments or notifications are generated by this build.
        </footer>
    </div>
</div>

<script>
    (function () {
        var shell = document.getElementById('app-shell');
        var toggle = document.querySelector('.app__nav-toggle');
        if (shell && toggle) {
            toggle.addEventListener('click', function () {
                var open = shell.getAttribute('data-nav') === 'open';
                shell.setAttribute('data-nav', open ? 'closed' : 'open');
                toggle.setAttribute('aria-expanded', open ? 'false' : 'true');
            });
        }

        // Only one top-bar menu is open at a time.
        var menus = Array.prototype.slice.call(document.querySelectorAll('details.menu'));
        menus.forEach(function (menu) {
            menu.addEventListener('toggle', function () {
                if (!menu.open) return;
                menus.forEach(function (other) {
                    if (other !== menu) other.open = false;
                });
            });
        });

        document.addEventListener('click', function (event) {
            menus.forEach(function (menu) {
                if (menu.open && !menu.contains(event.target)) menu.open = false;
            });
        });

        document.addEventListener('keydown', function (event) {
            if (event.key !== 'Escape') return;
            if (shell && toggle) {
                shell.setAttribute('data-nav', 'closed');
                toggle.setAttribute('aria-expanded', 'false');
            }
            menus.forEach(function (menu) { menu.open = false; });
        });

        var themeButton = document.querySelector('.theme-toggle');

        function syncThemeButton() {
            if (!themeButton) return;
            var dark = document.documentElement.getAttribute('data-theme') === 'dark';
            themeButton.setAttribute('aria-pressed', dark ? 'true' : 'false');
            var label = themeButton.querySelector('.theme-toggle__label');
            if (label) label.textContent = dark ? 'Light mode' : 'Dark mode';
        }

        if (themeButton) {
            syncThemeButton();
            themeButton.addEventListener('click', function () {
                var dark = document.documentElement.getAttribute('data-theme') === 'dark';
                var next = dark ? 'light' : 'dark';
                document.documentElement.setAttribute('data-theme', next);
                try {
                    window.localStorage.setItem('bitmed-theme', next);
                } catch (error) {
                    /* Storage may be unavailable; the choice simply does not persist. */
                }
                syncThemeButton();
            });
        }
    })();
</script>
<script>
    (function () {
        var pills = Array.prototype.slice.call(document.querySelectorAll('[data-month-pill]'));
        if (!pills.length) return;

        var valueEl = document.querySelector('[data-revenue-value]');
        var totalEl = document.querySelector('[data-revenue-total]');
        var collectedEl = document.querySelector('[data-revenue-collected-total]');
        var monthLabelEl = document.querySelector('[data-revenue-month-label]');
        var seriesLabelEl = document.querySelector('[data-revenue-series-label]');
        var seriesButtons = Array.prototype.slice.call(document.querySelectorAll('[data-series-btn]'));

        var activeSeries = 'invoiced';
        var selected = pills.length - 1;

        var totals = pills.reduce(function (acc, pill) {
            acc.invoiced += Number(pill.dataset.invoiced || 0);
            acc.collected += Number(pill.dataset.collected || 0);
            return acc;
        }, { invoiced: 0, collected: 0 });

        function format(value) {
            return Number(value || 0).toLocaleString('en-NG');
        }

        function render() {
            var pill = pills[selected];
            var selectedValue = pill.dataset[activeSeries] || 0;

            if (valueEl) valueEl.textContent = format(selectedValue);
            if (monthLabelEl) monthLabelEl.textContent = pill.dataset.label;
            if (seriesLabelEl) seriesLabelEl.textContent = activeSeries === 'invoiced' ? 'Invoiced' : 'Collected';
            if (totalEl) totalEl.textContent = format(activeSeries === 'invoiced' ? totals.invoiced : totals.collected);
            if (collectedEl) collectedEl.textContent = format(totals.collected);

            pills.forEach(function (item, index) {
                item.setAttribute('aria-pressed', index === selected ? 'true' : 'false');
            });
        }

        pills.forEach(function (pill, index) {
            pill.addEventListener('click', function () {
                selected = index;
                render();
            });
        });

        seriesButtons.forEach(function (button) {
            button.addEventListener('click', function () {
                activeSeries = button.dataset.seriesBtn;
                seriesButtons.forEach(function (other) {
                    other.setAttribute('aria-pressed', other === button ? 'true' : 'false');
                });
                render();
            });
        });

        render();
    })();
</script>
</body>
</html>
