ChrisChen/ROLAC
1
0
Fork 0
Code Issues 66 Pull Requests Actions Packages Projects Releases Wiki Activity
Files
60405ef0aaec9910c2e5405d309943ea510e79a6
ROLAC/APP/src/app/features/dashboard/dashboard.html
T
Chris Chen d5648315a0 WIP
2026-05-25 17:32:18 -07:00

294 lines
17 KiB
HTML
Raw Blame History

<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>
Reference in New Issue View Git Blame Copy Permalink