WIP

2026-05-25 17:32:18 -07:00
parent 9b28fbcfb6
commit d5648315a0
262 changed files with 32074 additions and 0 deletions
@@ -0,0 +1,294 @@
+<main
+    class="k-px-2 k-px-sm-4.5 k-px-md-6 k-px-lg-4 k-px-xl-7.5 k-py-2 k-py-sm-4.5 k-py-md-6 k-py-lg-4 k-py-xl-7.5 k-pt-8 k-bg-light">
+    <h1 class="k-h1 k-color-primary-emphasis k-overflow-hidden k-text-ellipsis">Dashboard</h1>
+    <div class="k-d-grid k-grid-cols-12 k-gap-4 k-py-4">
+
+        <!-- Start of CMPCTCARD-1 -->
+        <div *ngFor="let card of compactCards; let i = index;"
+            class="{{cardClasses}} k-col-span-12 k-col-span-md-6 k-col-span-lg-3">
+            <kendo-svgicon [icon]="card.svgIcon" themeColor="primary" size="xxlarge"></kendo-svgicon>
+            <div class="k-d-flex k-flex-col">
+                <span
+                    class="k-font-size-lg k-line-height-lg k-font-semibold k-color-primary-emphasis">{{card.title}}</span>
+                <span class="k-font-size-sm k-line-height-lg k-color-subtle">{{card.info}}</span>
+            </div>
+        </div>
+        <!-- End of CMPCTCARD-1 -->
+
+        <!-- Start of DASHBRDCARD-10 -->
+        <div class="{{dashboardClasses}} k-col-span-12 k-col-span-md-6 k-col-span-lg-3">
+            <div class="k-d-flex k-align-items-center k-p-3">
+                <span class="k-font-size-lg k-line-height-lg k-font-semibold k-color-primary-emphasis">Calendar</span>
+            </div>
+            <div class="k-flex-1 k-px-3 k-pb-3 k-d-flex k-justify-content-center">
+                <kendo-calendar [showOtherMonthDays]="false" type="classic" [(ngModel)]="date2">
+                </kendo-calendar>
+            </div>
+        </div>
+        <!-- End of DASHBRDCARD-10 -->
+
+        <!-- Start of DASHBRDCARD-11 -->
+        <div class="{{dashboardClasses}} k-col-span-12 k-col-span-md-6">
+            <div class="k-d-flex k-justify-content-between k-align-items-center k-p-3">
+                <span class="k-font-size-lg k-line-height-lg k-font-semibold k-color-primary-emphasis">Bed
+                    Occupancy</span>
+                <kendo-datepicker format="yyyy" [(ngModel)]="date" [fillMode]="'flat'" [style.width.px]="164"
+                    [clearButton]="true" [inputAttributes]="{'aria-label': 'Select date'}"></kendo-datepicker>
+            </div>
+            <div class="k-flex-1 k-px-3 k-pb-3">
+                <kendo-chart style="height: 257px;">
+                    <kendo-chart-category-axis>
+                        <kendo-chart-category-axis-item
+                            [categories]="['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']">
+                        </kendo-chart-category-axis-item>
+                    </kendo-chart-category-axis>
+                    <kendo-chart-value-axis>
+                        <kendo-chart-value-axis-item [max]="100" [min]="0" [majorTicks]="{step: 10}">
+                        </kendo-chart-value-axis-item>
+                    </kendo-chart-value-axis>
+                    <kendo-chart-series>
+                        <kendo-chart-series-item type="column" name="Occupied" [spacing]="0"
+                            [legendItem]="{type: 'line' }" [data]="[67, 78, 47, 41, 38, 33]">
+                        </kendo-chart-series-item>
+                        <kendo-chart-series-item type="column" name="Free" [legendItem]="{type: 'line' }"
+                            [data]="[21, 10, 44, 40, 48, 60]">
+                        </kendo-chart-series-item>
+                    </kendo-chart-series>
+                    <kendo-chart-legend position="bottom" orientation="horizontal" align="start"></kendo-chart-legend>
+                </kendo-chart>
+            </div>
+        </div>
+        <!-- End of DASHBRDCARD-11 -->
+
+        <!-- Start of DASHBRDCARD-1 -->
+        <div class="{{dashboardClasses}} k-col-span-12 k-col-span-md-6 k-col-span-lg-3">
+            <div class="k-d-flex k-justify-content-between k-align-items-center k-p-3">
+                <span class="k-font-size-lg k-line-height-lg k-font-semibold k-color-primary-emphasis">Staff</span>
+                <kendo-dropdownlist [data]="ddlData" [value]="ddlValue" fillMode="flat" [style.width.px]="164"
+                    [attr.aria-label]="'Select'"></kendo-dropdownlist>
+            </div>
+            <div class="k-flex-1 k-px-3">
+                <kendo-listview [data]="listItems" layout="flex" flexDirection="col" [bordered]="false">
+                    <ng-template kendoListViewItemTemplate let-dataItem>
+                        <div
+                            class="k-d-flex k-border-b k-border-b-solid k-border-border k-gap-3 k-p-2 k-align-items-center">
+                            <kendo-badge-container>
+                                <kendo-avatar [imageSrc]="dataItem.imageSrc"></kendo-avatar>
+                                <kendo-badge rounded="medium" position="inside" [align]="badgeAlignBottomEnd"
+                                    themeColor="success"></kendo-badge>
+                            </kendo-badge-container>
+                            <div class="k-d-flex k-flex-col">
+                                <div class="k-font-size-lg">{{dataItem.name}}</div>
+                                <div class="k-font-size-sm k-color-subtle">{{dataItem.specialty}}</div>
+                            </div>
+                        </div>
+                    </ng-template>
+                </kendo-listview>
+            </div>
+            <div class="k-p-3">
+                <button kendoButton fillMode="flat" themeColor="primary">View all</button>
+            </div>
+        </div>
+        <!-- End of DASHBRDCARD-1 -->
+
+        <!-- Start of DASHBRDCARD-4 -->
+        <div class="{{dashboardClasses}} k-col-span-12 k-col-span-md-6 k-col-span-lg-7">
+            <div class="k-d-flex k-justify-content-between k-align-items-center k-p-3">
+                <span
+                    class="k-font-size-lg k-line-height-lg k-font-semibold k-color-primary-emphasis">Appointments</span>
+                <kendo-datepicker [(ngModel)]="date" [fillMode]="'flat'" [style.width.px]="164" [clearButton]="true"
+                    [inputAttributes]="{'aria-label': 'Select date'}"></kendo-datepicker>
+            </div>
+            <div class="k-d-grid k-grid-cols-12 k-p-4 k-gap-2">
+                <div *ngFor="let appointment of appointments; let last = last"
+                    [ngClass]="{ 'k-d-none k-d-lg-block' : last }"
+                    class=" k-col-span-12 k-col-span-lg-4 k-bg-light k-border k-border-solid k-border-border k-rounded-sm k-d-flex k-flex-col k-flex-1">
+                    <div class="k-d-flex k-justify-content-between k-p-1.5 k-h-12">
+                        <span class="k-font-medium">{{appointment.doctor}}</span>
+                        <div class="k-flex-shrink-0">
+                            <span class="k-badge k-badge-md k-badge-solid k-badge-solid-primary k-rounded-full">
+                                {{appointment.start}}
+                            </span>
+                        </div>
+                    </div>
+                    <div class="k-d-flex k-flex-col k-flex-1 k-gap-1.5 k-px-1.5">
+                        <div>Appointment with {{appointment.patient.name}}.</div>
+                        <div class="k-font-size-sm">
+                            <div class="k-color-subtle k-d-flex k-gap-1 k-align-items-center k-line-height-lg">
+                                <kendo-svgicon [icon]="envelopeIcon"></kendo-svgicon>
+                                <a class="k-color-inherit" href="#">{{appointment.patient.phone}}</a>
+                            </div>
+                            <div class="k-color-subtle k-d-flex k-gap-1 k-align-items-center k-line-height-lg">
+                                <kendo-svgicon [icon]="envelopeIcon"></kendo-svgicon>
+                                <a class="k-color-inherit" href="#">{{appointment.patient.email}}</a>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="k-d-flex k-flex-shrink-0 k-p-1.5">
+                        <button kendoButton fillMode="clear" themeColor="primary">Edit</button>
+                        <button kendoButton fillMode="clear">Cancel</button>
+                    </div>
+                </div>
+            </div>
+            <div class="k-p-3">
+                <button kendoButton fillMode="clear" themeColor="primary">View all appointments</button>
+            </div>
+        </div>
+        <!-- End of DASHBRDCARD-4 -->
+
+        <!-- Start of DASHBRDCARD-11 -->
+        <div class="{{dashboardClasses}} k-col-span-12 k-col-span-lg-5">
+            <div class="k-d-flex k-justify-content-between k-align-items-center k-p-3">
+                <span class="k-font-size-lg k-line-height-lg k-font-semibold k-color-primary-emphasis">Infection
+                    Rate</span>
+            </div>
+            <div class="k-flex-1 k-px-3 k-pb-3">
+                <kendo-chart [style.height.px]="240">
+                    <kendo-chart-x-axis>
+                        <kendo-chart-x-axis-item [labels]="{rotation: -45}"></kendo-chart-x-axis-item>
+                    </kendo-chart-x-axis>
+                    <kendo-chart-series>
+                        <kendo-chart-series-item
+                            *ngFor="let dataSet of ['RSV', 'CDC', 'Measles', 'Influenza', 'Campylobacteriosis', 'Hepatitis']"
+                            type="heatmap" [data]="heatmapData(dataSet)" xField="a" yField="b"
+                            valueField="value"></kendo-chart-series-item>
+                    </kendo-chart-series>
+                </kendo-chart>
+            </div>
+        </div>
+        <!-- End of DASHBRDCARD-11 -->
+
+        <!-- Start of DASHBRDCARD-11 -->
+        <div class="{{dashboardClasses}} k-col-span-12 k-col-span-lg-5">
+            <div class="k-d-flex k-justify-content-between k-align-items-center k-p-3">
+                <span class="k-font-size-lg k-line-height-lg k-font-semibold k-color-primary-emphasis">Equipment
+                    Availability</span>
+                <kendo-datepicker [(ngModel)]="date" format="yyyy" [fillMode]="'flat'" [style.width.px]="164"
+                    [clearButton]="true" [inputAttributes]="{'aria-label': 'Select date'}"></kendo-datepicker>
+            </div>
+            <div class="k-flex-1 k-px-3 k-pb-3">
+                <kendo-chart [style.height.px]="240">
+                    <kendo-chart-series>
+                        <kendo-chart-series-item [autoFit]="true" type="donut" [holeSize]="50" [data]="donutData"
+                            categoryField="kind" field="share">
+                            <kendo-chart-series-item-labels position="outsideEnd" color="#000"
+                                [content]="chartLabelContent"></kendo-chart-series-item-labels>
+                        </kendo-chart-series-item>
+                    </kendo-chart-series>
+                    <kendo-chart-legend [visible]="false"></kendo-chart-legend>
+                </kendo-chart>
+            </div>
+        </div>
+        <!-- End of DASHBRDCARD-11 -->
+
+        <!-- Start of DASHBRDCARD-11 -->
+        <div class="{{dashboardClasses}} k-col-span-12 k-col-span-lg-7">
+            <div class="k-d-flex k-justify-content-between k-align-items-center k-p-3">
+                <span class="k-font-size-lg k-line-height-lg k-font-semibold k-color-primary-emphasis">Average Length of
+                    Stay</span>
+                <kendo-datepicker [(ngModel)]="date" format="yyyy" [fillMode]="'flat'" [style.width.px]="164"
+                    [clearButton]="true" [inputAttributes]="{'aria-label': 'Select date'}"></kendo-datepicker>
+            </div>
+            <div class="k-flex-1 k-px-3 k-pb-3">
+                <kendo-chart [style.height.px]="240">
+                    <kendo-chart-category-axis>
+                        <kendo-chart-category-axis-item [categories]="departments">
+                        </kendo-chart-category-axis-item>
+                    </kendo-chart-category-axis>
+                    <kendo-chart-value-axis>
+                        <kendo-chart-value-axis-item [max]="14" [majorUnit]="1">
+                        </kendo-chart-value-axis-item>
+                    </kendo-chart-value-axis>
+                    <kendo-chart-series>
+                        <kendo-chart-series-item type="bar" [data]="averageStay">
+                        </kendo-chart-series-item>
+                    </kendo-chart-series>
+                </kendo-chart>
+            </div>
+        </div>
+        <!-- End of DASHBRDCARD-11 -->
+
+        <!-- Start of DASHBRDCARD-11 -->
+        <div class="{{dashboardClasses}} k-col-span-12">
+            <div class="k-d-flex k-justify-content-between k-align-items-center k-p-3">
+                <span class="k-font-size-lg k-line-height-lg k-font-semibold k-color-primary-emphasis">Hospital
+                    Visits</span>
+                <kendo-datepicker [(ngModel)]="date" format="yyyy" [fillMode]="'flat'" [style.width.px]="164"
+                    [clearButton]="true" [inputAttributes]="{'aria-label': 'Select date'}"></kendo-datepicker>
+            </div>
+            <div class="k-flex-1 k-px-3 k-pb-3">
+                <kendo-chart [style.height.px]="330">
+                    <kendo-chart-category-axis>
+                        <kendo-chart-category-axis-item [categories]="hours" baseUnit="hours"
+                            [labels]="{rotation: 270, position: 'start', format: 'h:mm'}">
+                        </kendo-chart-category-axis-item>
+                    </kendo-chart-category-axis>
+                    <kendo-chart-value-axis>
+                        <kendo-chart-value-axis-item [max]="100">
+                        </kendo-chart-value-axis-item>
+                    </kendo-chart-value-axis>
+                    <kendo-chart-series>
+                        <kendo-chart-series-item type="line" [data]="hospitalVisits">
+                        </kendo-chart-series-item>
+                    </kendo-chart-series>
+                </kendo-chart>
+            </div>
+        </div>
+        <!-- End of DASHBRDCARD-11 -->
+
+        <!-- Start of DASHBRDCARD-11 -->
+        <div class="{{dashboardClasses}} k-col-span-12 k-col-span-lg-5">
+            <div class="k-d-flex k-justify-content-between k-align-items-center k-p-3">
+                <span class="k-font-size-lg k-line-height-lg k-font-semibold k-color-primary-emphasis">Satisfaction
+                    Score</span>
+                <kendo-dropdownlist [value]="'2023'" [fillMode]="'flat'" [style.width.px]="164"
+                    [attr.aria-label]="'Select'"></kendo-dropdownlist>
+            </div>
+            <div class="k-flex-1 k-px-3 k-pb-3">
+                <kendo-chart [style.height.px]="288">
+                    <kendo-chart-series>
+                        <kendo-chart-series-item type="pie" [legendItem]="{type: 'line' }" [data]="satisfaction"
+                            categoryField="kind" field="share" [padding]="10" [border]="{width: 3, color: '#fff'}">
+                            <kendo-chart-series-item-labels position="center">
+                            </kendo-chart-series-item-labels>
+                        </kendo-chart-series-item>
+                    </kendo-chart-series>
+                    <kendo-chart-legend position="bottom"></kendo-chart-legend>
+                </kendo-chart>
+            </div>
+        </div>
+        <!-- End of DASHBRDCARD-11 -->
+
+        <!-- Start of DASHBRDCARD-11 -->
+        <div class="{{dashboardClasses}} k-col-span-12 k-col-span-lg-7">
+            <div class="k-d-flex k-justify-content-between k-align-items-center k-p-3">
+                <span class="k-font-size-lg k-line-height-lg k-font-semibold k-color-primary-emphasis">Mortality
+                    Rate</span>
+                <kendo-datepicker format="yyyy" [(ngModel)]="date" [fillMode]="'flat'" [style.width.px]="164"
+                    [clearButton]="true" [inputAttributes]="{'aria-label': 'Select date'}"></kendo-datepicker>
+            </div>
+            <div class="k-flex-1 k-px-3 k-pb-3">
+                <kendo-chart [style.height.px]="288">
+                    <kendo-chart-category-axis>
+                        <kendo-chart-category-axis-item [categories]="mortalityCauses">
+                        </kendo-chart-category-axis-item>
+                    </kendo-chart-category-axis>
+                    <kendo-chart-value-axis>
+                        <kendo-chart-value-axis-item [max]="100" [min]="0"
+                            [majorTicks]="{step: 10}"></kendo-chart-value-axis-item>
+                    </kendo-chart-value-axis>
+                    <kendo-chart-series>
+                        <kendo-chart-series-item type="bar" [legendItem]="{type: 'line' }" name="Male"
+                            [data]="[25, 35, 36, 42, 85, 12, 4, 17, 19, 49, 28]">
+                        </kendo-chart-series-item>
+                        <kendo-chart-series-item type="bar" [legendItem]="{type: 'line' }" name="Female"
+                            [data]="[23, 40, 38, 30, 81, 18, 3, 21, 22, 45, 24]">
+                        </kendo-chart-series-item>
+                    </kendo-chart-series>
+                    <kendo-chart-legend position="bottom" orientation="horizontal" align="start"></kendo-chart-legend>
+                </kendo-chart>
+            </div>
+        </div>
+        <!-- End of DASHBRDCARD-11 -->
+    </div>
+</main>
@@ -0,0 +1,86 @@
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { ChartsModule, SeriesLabelsContentArgs } from '@progress/kendo-angular-charts';
+import { DateInputsModule } from '@progress/kendo-angular-dateinputs';
+import { DropDownsModule } from '@progress/kendo-angular-dropdowns';
+import { ListViewModule } from '@progress/kendo-angular-listview';
+import { BadgeAlign, IndicatorsModule } from '@progress/kendo-angular-indicators';
+import { ButtonsModule } from '@progress/kendo-angular-buttons';
+import { IconsModule } from '@progress/kendo-angular-icons';
+import { LayoutModule } from '@progress/kendo-angular-layout';
+import { SVGIcon, envelopeIcon } from '@progress/kendo-svg-icons';
+import {
+  appointments,
+  averageStay,
+  compactCards,
+  departments,
+  donutData,
+  heatmapDataCDC,
+  heatmapDataCampylobacteriosis,
+  heatmapDataHepatitis,
+  heatmapDataInfluenza,
+  heatmapDataMeasles,
+  heatmapDataRSV,
+  hospitalVisits,
+  hours,
+  listItems,
+  mortalityCauses,
+  satisfaction
+} from './models';
+
+@Component({
+  selector: 'app-dashboard',
+  standalone: true,
+  imports: [
+    CommonModule,
+    FormsModule,
+    ChartsModule,
+    DateInputsModule,
+    DropDownsModule,
+    ListViewModule,
+    IndicatorsModule,
+    ButtonsModule,
+    IconsModule,
+    LayoutModule
+  ],
+  templateUrl: './dashboard.html',
+  styleUrl: './dashboard.css'
+})
+export class Dashboard {
+  public cardClasses = 'k-d-flex k-border k-border-solid k-border-border k-bg-surface-alt k-align-items-center k-overflow-x-auto k-p-3 k-gap-6 k-elevation-1 k-rounded-md';
+  public dashboardClasses = 'k-d-flex k-flex-col k-border k-border-solid k-border-border k-bg-surface-alt k-overflow-x-auto k-elevation-1 k-rounded-md';
+
+  public envelopeIcon: SVGIcon = envelopeIcon;
+
+  public badgeAlignBottomEnd: BadgeAlign = {
+    vertical: 'bottom',
+    horizontal: 'end'
+  };
+
+  public chartLabelContent(e: SeriesLabelsContentArgs): string {
+    return e.category;
+  }
+
+  public date = new Date(2023, 5, 14);
+  public date2 = new Date(2023, 5, 15);
+  public averageStay = averageStay;
+  public hours = hours
+  public hospitalVisits = hospitalVisits;
+  public departments = departments;
+  public mortalityCauses = mortalityCauses;
+  public satisfaction = satisfaction;
+  public donutData = donutData;
+  public heatmapDataRSV = heatmapDataRSV;
+  public heatmapDataCDC = heatmapDataCDC;
+  public heatmapDataMeasles = heatmapDataMeasles;
+  public heatmapDataInfluenza = heatmapDataInfluenza;
+  public heatmapDataHepatitis = heatmapDataHepatitis
+  public heatmapDataCampylobacteriosis = heatmapDataCampylobacteriosis;
+  public heatmapData = (dataset: string): any[] => (this as any)[`heatmapData${dataset}`];
+  public appointments = appointments;
+  public ddlData = ['All Departments'];
+  public ddlValue = 'All Departments'
+  public compactCards = compactCards;
+  public listItems: any[] = listItems;
+}
@@ -0,0 +1,502 @@
+import { accessibilityIcon, calendarDateIcon, calendarIcon, displayBlockIcon, dollarIcon, fileIcon, inboxIcon, myspaceIcon, pencilIcon, starOutlineIcon } from "@progress/kendo-svg-icons";
+
+export const menuItems = [
+    "Settings",
+    "Support",
+    "Log out"
+];
+
+export const averageStay = [4, 3, 2, 14, 5, 7, 5, 6, 12, 1, 4];
+
+export const hours = Array(48).fill({}).map((_, idx) => `${Math.floor(idx / 2)}:${idx % 2 ? '30': '00'}`);
+
+export const hospitalVisits = [14, 20, 20, 26, 30, 26, 29, 32, 31, 29, 31, 35, 36, 40, 42, 45, 61, 63, 65, 66, 67, 67, 63, 64, 63, 62, 60, 45, 52, 55, 48, 44, 38, 35, 31, 35, 36, 40, 42, 55, 50, 41, 41, 39, 31, 32, 23, 27];
+
+export const departments = [
+    'Pharmacology & Toxicology',
+    'Gastroenterology',
+    'Radiology',
+    'Orthopedics',
+    'Outpatient',
+    'Oncology',
+    'Neurology',
+    'ICU',
+    'Cardiology',
+    'Emergency',
+    'Delivery'
+];
+
+export const mortalityCauses = [
+    'Pharmacology & Toxicology',
+    'Oncological diseases',
+    'Circulatory diseases',
+    'Injury and poisoning',
+    'Respiratory diseases',
+    'Endocrine diseases',
+    'Digestive diseases',
+    'Nervous system diseases',
+    'Infectious diseases',
+    'Kidney diseases',
+    'Other causes'
+];
+
+export const satisfaction = [
+    {
+        kind: 'Very dissatisfied',
+        share: 60
+    },
+    {
+        kind: 'Dissatisfied',
+        share: 60
+    },
+    {
+        kind: 'Neutral',
+        share: 60
+    },
+    {
+        kind: 'Satisfied',
+        share: 60
+    },
+    {
+        kind: 'Very satisfied',
+        share: 60
+    },
+    {
+        kind: 'Didn\'t answer',
+        share: 60
+}];
+
+export const donutData = [
+    {
+      kind: 'Imaging Equipment',
+      share: 0.17,
+    },
+    {
+      kind: 'Surgical Instruments',
+      share: 0.17,
+    },
+    {
+      kind: 'Electromedical Equipment',
+      share: 0.17,
+    },
+    {
+      kind: 'Transport and Storage',
+      share: 0.17,
+    },
+    {
+      kind: 'Endoscopic Instruments',
+      share: 0.17,
+    },
+    {
+      kind: 'Others',
+        share: 0.17,
+}];
+
+export const heatmapDataRSV = [{
+    a: 'June 2023',
+    b: 'RSV',
+    value: 66
+}, {
+    a: 'May 2023',
+    b: 'RSV',
+    value: 34
+}, {
+    a: 'Apr 2023',
+    b: 'RSV',
+    value: 13
+}, {
+    a: 'Mar 2023',
+    b: 'RSV',
+    value: 49
+}, {
+    a: 'Feb 2023',
+    b: 'RSV',
+    value: 22
+}, {
+    a: 'Jan 2023',
+    b: 'RSV',
+    value: 66
+}, {
+    a: 'Dec 2022',
+    b: 'RSV',
+    value: 78
+}, {
+    a: 'Nov 2022',
+    b: 'RSV',
+    value: 89
+}, {
+    a: 'Oct 2022',
+    b: 'RSV',
+    value: 27
+}, {
+    a: 'Sep 2022',
+    b: 'RSV',
+    value: 83
+}];
+
+export const heatmapDataCDC = [{
+    a: 'June 2023',
+    b: 'CDC',
+    value: 51
+}, {
+    a: 'May 2023',
+    b: 'CDC',
+    value: 84
+}, {
+    a: 'Apr 2023',
+    b: 'CDC',
+    value: 32
+}, {
+    a: 'Mar 2023',
+    b: 'CDC',
+    value: 16
+}, {
+    a: 'Feb 2023',
+    b: 'CDC',
+    value: 11
+}, {
+    a: 'Jan 2023',
+    b: 'CDC',
+    value: 55
+}, {
+    a: 'Dec 2022',
+    b: 'CDC',
+    value: 99
+}, {
+    a: 'Nov 2022',
+    b: 'CDC',
+    value: 42
+}, {
+    a: 'Oct 2022',
+    b: 'CDC',
+    value: 30
+}, {
+    a: 'Sep 2022',
+    b: 'CDC',
+    value: 10
+}];
+
+export const heatmapDataMeasles = [{
+    a: 'June 2023',
+    b: 'Measles',
+    value: 80
+}, {
+    a: 'May 2023',
+    b: 'Measles',
+    value: 56
+}, {
+    a: 'Apr 2023',
+    b: 'Measles',
+    value: 78
+}, {
+    a: 'Mar 2023',
+    b: 'Measles',
+    value: 63
+}, {
+    a: 'Feb 2023',
+    b: 'Measles',
+    value: 24
+}, {
+    a: 'Jan 2023',
+    b: 'Measles',
+    value: 33
+}, {
+    a: 'Dec 2022',
+    b: 'Measles',
+    value: 38
+}, {
+    a: 'Nov 2022',
+    b: 'Measles',
+    value: 17
+}, {
+    a: 'Oct 2022',
+    b: 'Measles',
+    value: 62
+}, {
+    a: 'Sep 2022',
+    b: 'Measles',
+    value: 82
+}];
+
+export const heatmapDataInfluenza = [{
+    a: 'June 2023',
+    b: 'Influenza',
+    value: 84
+}, {
+    a: 'May 2023',
+    b: 'Influenza',
+    value: 25
+}, {
+    a: 'Apr 2023',
+    b: 'Influenza',
+    value: 59
+}, {
+    a: 'Mar 2023',
+    b: 'Influenza',
+    value: 74
+}, {
+    a: 'Feb 2023',
+    b: 'Influenza',
+    value: 41
+}, {
+    a: 'Jan 2023',
+    b: 'Influenza',
+    value: 69
+}, {
+    a: 'Dec 2022',
+    b: 'Influenza',
+    value: 71
+}, {
+    a: 'Nov 2022',
+    b: 'Influenza',
+    value: 11
+}, {
+    a: 'Oct 2022',
+    b: 'Influenza',
+    value: 23
+}, {
+    a: 'Sep 2022',
+    b: 'Influenza',
+    value: 43
+}];
+
+export const heatmapDataHepatitis = [{
+    a: 'June 2023',
+    b: 'Hepatitis',
+    value: 31
+}, {
+    a: 'May 2023',
+    b: 'Hepatitis',
+    value: 27
+}, {
+    a: 'Apr 2023',
+    b: 'Hepatitis',
+    value: 16
+}, {
+    a: 'Mar 2023',
+    b: 'Hepatitis',
+    value: 74
+}, {
+    a: 'Feb 2023',
+    b: 'Hepatitis',
+    value: 50
+}, {
+    a: 'Jan 2023',
+    b: 'Hepatitis',
+    value: 6
+}, {
+    a: 'Dec 2022',
+    b: 'Hepatitis',
+    value: 22
+}, {
+    a: 'Nov 2022',
+    b: 'Hepatitis',
+    value: 65
+}, {
+    a: 'Oct 2022',
+    b: 'Hepatitis',
+    value: 37
+}, {
+    a: 'Sep 2022',
+    b: 'Hepatitis',
+    value: 13
+}];
+
+export const heatmapDataCampylobacteriosis = [{
+    a: 'June 2023',
+    b: 'Campylobacteriosis',
+    value: 66
+}, {
+    a: 'May 2023',
+    b: 'Campylobacteriosis',
+    value: 21
+}, {
+    a: 'Apr 2023',
+    b: 'Campylobacteriosis',
+    value: 52
+}, {
+    a: 'Mar 2023',
+    b: 'Campylobacteriosis',
+    value: 43
+}, {
+    a: 'Feb 2023',
+    b: 'Campylobacteriosis',
+    value: 97
+}, {
+    a: 'Jan 2023',
+    b: 'Campylobacteriosis',
+    value: 81
+}, {
+    a: 'Dec 2022',
+    b: 'Campylobacteriosis',
+    value: 28
+}, {
+    a: 'Nov 2022',
+    b: 'Campylobacteriosis',
+    value: 34
+}, {
+    a: 'Oct 2022',
+    b: 'Campylobacteriosis',
+    value: 45
+}, {
+    a: 'Sep 2022',
+    b: 'Campylobacteriosis',
+    value: 18
+}];
+
+export const appointments = [{
+    doctor: 'Dr. Terrell Fashey',
+    start: '8:30 AM',
+    patient: {
+        name: 'Flora Strosin',
+        phone: '679-747-6105',
+        email: 'flora.strosin@email.com'
+    }
+}, {
+    doctor: 'Dr. Clarence Gulgowski',
+    start: '9:10 AM',
+    patient: {
+        name: 'Michele Nicolas',
+        phone: '884-528-7089',
+        email: 'm.nicolas@email.com'
+    }
+}, {
+    doctor: 'Dr. Jay Mohr',
+    start: '9:45 AM',
+    patient: {
+        name: 'Joseph Pacocha',
+        phone: '777-284-2912',
+        email: 'j.pacocha@email.com'
+    }
+}];
+
+export const compactCards = [{
+    svgIcon: calendarIcon,
+    title: 'Appointments',
+    info: '78 appointments today'
+}, {
+    svgIcon: accessibilityIcon,
+    title: 'Patients',
+    info: '1234 active cases'
+}, {
+    svgIcon: displayBlockIcon,
+    title: 'Beds',
+    info: '56 occupied beds'
+}, {
+    svgIcon: myspaceIcon,
+    title: 'Staff',
+    info: '78 colleagues at work'
+}];
+
+export const listItems = [{
+    name: 'Dr. Teresa Conn',
+    specialty: 'Internal medicine',
+    imageSrc: 'assets/healthcare-dashboard/avatar_1.png'
+}, {
+    name: 'Dr. Mitchell Robel',
+    specialty: 'Pediatrics',
+    imageSrc: 'assets/healthcare-dashboard/avatar_2.png'
+}, {
+    name: 'Dr. Barry Jacobs',
+    specialty: 'Gastroenterology',
+    imageSrc: 'assets/healthcare-dashboard/avatar_3.png'
+}, {
+    name: 'Dr. Nina Bosco',
+    specialty: 'Cardiology',
+    imageSrc: 'assets/healthcare-dashboard/avatar_4.png'
+}];
+
+export const drawerItems = [{
+    text: 'Dashboard',
+    svgIcon: inboxIcon,
+    selected: true,
+    id: 0,
+}, {
+    text: 'Schedule',
+    svgIcon: calendarDateIcon,
+    id: 1
+}, {
+    text: 'Patients',
+    svgIcon: accessibilityIcon,
+    id: 2,
+}, {
+    text: 'Bed Management',
+    svgIcon: displayBlockIcon,
+    id: 3
+}, {
+    text: 'Staff',
+    svgIcon: myspaceIcon,
+    id: 4,
+}, {
+    text: 'Doctors',
+    svgIcon: accessibilityIcon,
+    id: 40,
+    parentId: 4
+}, {
+    text: 'Nurses',
+    svgIcon: accessibilityIcon,
+    id: 41,
+    parentId: 4
+}, {
+    text: 'Therapists',
+    svgIcon: accessibilityIcon,
+    id: 42,
+    parentId: 4
+}, {
+    text: 'Technicians',
+    svgIcon: accessibilityIcon,
+    id: 43,
+    parentId: 4
+}, {
+    text: 'Information technology',
+    svgIcon: accessibilityIcon,
+    id: 44,
+    parentId: 4
+}, {
+    text: 'Food services',
+    svgIcon: accessibilityIcon,
+    id: 45,
+    parentId: 4
+}, {
+    text: 'Environmental services',
+    svgIcon: accessibilityIcon,
+    id: 46,
+    parentId: 4
+}, {
+    text: 'Pharmacy',
+    svgIcon: pencilIcon,
+    id: 5,
+}, {
+    text: 'Reports',
+    svgIcon: fileIcon,
+    id: 6,
+}, {
+    text: 'Report 1',
+    svgIcon: fileIcon,
+    id: 60,
+    parentId: 6
+}, {
+    text: 'Departments',
+    svgIcon: calendarIcon,
+    id: 7,
+}, {
+    text: 'Report 1',
+    svgIcon: calendarIcon,
+    id: 70,
+    parentId: 7
+}, {
+    text: 'Payments',
+    svgIcon: dollarIcon,
+    id: 8,
+}, {
+    text: 'Payments 1',
+    svgIcon: dollarIcon,
+    id: 80,
+    parentId: 8
+}, {
+    separator: true
+}, {
+    text: 'Support',
+    svgIcon: starOutlineIcon,
+    id: 9,
+}];