72 lines
1.8 KiB
Vue
72 lines
1.8 KiB
Vue
<template>
|
|
<div class="gp-room-monitor-card" :class="{ 'is-busy': isBusy }">
|
|
<div class="card-header">
|
|
<span class="room-name">{{ roomName }}</span>
|
|
<span class="room-status" :class="isBusy ? 'text-danger' : 'text-success'">
|
|
{{ isBusy ? 'SIBUK' : 'TERSEDIA' }}
|
|
</span>
|
|
</div>
|
|
<div class="card-body">
|
|
<span v-if="isBusy" class="active-patient">{{ activePatient }} - {{ clinicName }}</span>
|
|
<span v-else class="waiting-text">Menunggu pasien...</span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed } from 'vue';
|
|
|
|
const props = defineProps({
|
|
roomName: { type: String, required: true },
|
|
activePatient: { type: String, default: null }, // e.g. "AI002"
|
|
clinicName: { type: String, default: '' },
|
|
});
|
|
|
|
const isBusy = computed(() => !!props.activePatient);
|
|
</script>
|
|
|
|
<style scoped>
|
|
.gp-room-monitor-card {
|
|
background: var(--gp-surface, #fff);
|
|
border: 1px solid var(--gp-border, #e5e7eb);
|
|
border-left: 4px solid var(--gp-success, #10b981);
|
|
border-radius: 2px;
|
|
padding: 12px;
|
|
margin-bottom: 12px;
|
|
box-shadow: 0 1px 2px rgba(0,0,0,0.02);
|
|
}
|
|
.gp-room-monitor-card.is-busy {
|
|
border-left-color: var(--gp-room-number, #F97316); /* Orange */
|
|
}
|
|
.card-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 8px;
|
|
}
|
|
.room-name {
|
|
font-size: 13px;
|
|
font-weight: 700;
|
|
color: var(--gp-text-primary, #1f2937);
|
|
}
|
|
.room-status {
|
|
font-size: 10px;
|
|
font-weight: 700;
|
|
}
|
|
.text-success { color: var(--gp-success, #10b981); }
|
|
.text-danger { color: var(--gp-room-number, #F97316); } /* Matching image orange */
|
|
|
|
.card-body {
|
|
font-size: 13px;
|
|
}
|
|
.active-patient {
|
|
color: var(--gp-primary, #3F51B5);
|
|
font-weight: 700;
|
|
}
|
|
.waiting-text {
|
|
color: var(--gp-text-secondary, #6b7280);
|
|
font-style: italic;
|
|
font-size: 12px;
|
|
}
|
|
</style>
|