99 lines
2.3 KiB
Vue
99 lines
2.3 KiB
Vue
<template>
|
|
<div class="gp-monitor-sidebar">
|
|
<div class="sidebar-header">
|
|
<v-icon size="18" class="mr-2" color="#3F51B5">mdi-monitor-dashboard</v-icon>
|
|
<span class="title">MONITOR RUANG</span>
|
|
</div>
|
|
|
|
<div class="stats-row">
|
|
<div class="stat-box box-success">
|
|
<div class="stat-label text-success">TERSEDIA</div>
|
|
<div class="stat-value text-success">{{ availableCount }}</div>
|
|
</div>
|
|
<div class="stat-box box-danger ml-2">
|
|
<div class="stat-label text-danger">SIBUK</div>
|
|
<div class="stat-value text-danger">{{ busyCount }}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="rooms-list">
|
|
<GpRoomMonitorCard
|
|
v-for="room in rooms"
|
|
:key="room.id"
|
|
:room-name="room.name"
|
|
:active-patient="room.activePatient"
|
|
:clinic-name="room.clinicName"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed } from 'vue';
|
|
import GpRoomMonitorCard from './GpRoomMonitorCard.vue';
|
|
|
|
const props = defineProps({
|
|
rooms: { type: Array, default: () => [] }
|
|
});
|
|
|
|
const availableCount = computed(() => props.rooms.filter(r => !r.activePatient).length);
|
|
const busyCount = computed(() => props.rooms.filter(r => r.activePatient).length);
|
|
</script>
|
|
|
|
<style scoped>
|
|
.gp-monitor-sidebar {
|
|
width: 300px;
|
|
background: white;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
border-left: 1px solid var(--gp-border, #e5e7eb);
|
|
}
|
|
.sidebar-header {
|
|
padding: 16px;
|
|
display: flex;
|
|
align-items: center;
|
|
border-bottom: 1px solid var(--gp-border, #e5e7eb);
|
|
}
|
|
.title {
|
|
font-size: 14px;
|
|
font-weight: 700;
|
|
color: var(--gp-text-primary, #1f2937);
|
|
}
|
|
.stats-row {
|
|
display: flex;
|
|
padding: 16px;
|
|
border-bottom: 1px solid var(--gp-border, #e5e7eb);
|
|
}
|
|
.stat-box {
|
|
flex: 1;
|
|
padding: 12px;
|
|
border-radius: 2px;
|
|
}
|
|
.box-success {
|
|
background: #ECFDF5;
|
|
border: 1px solid #D1FAE5;
|
|
}
|
|
.box-danger {
|
|
background: #FFF7ED;
|
|
border: 1px solid #FFEDD5;
|
|
}
|
|
.stat-label {
|
|
font-size: 10px;
|
|
font-weight: 700;
|
|
margin-bottom: 4px;
|
|
}
|
|
.stat-value {
|
|
font-size: 20px;
|
|
font-weight: 700;
|
|
}
|
|
.text-success { color: var(--gp-success, #10b981); }
|
|
.text-danger { color: var(--gp-room-number, #F97316); } /* Orange */
|
|
|
|
.rooms-list {
|
|
padding: 16px;
|
|
overflow-y: auto;
|
|
flex: 1;
|
|
}
|
|
</style>
|