64 lines
1.4 KiB
Vue
64 lines
1.4 KiB
Vue
<template>
|
|
<div class="gp-queue-list-container">
|
|
<div class="list-header">
|
|
<span class="title">DAFTAR ANTRIAN</span>
|
|
<span class="count-badge">{{ patients.length }}</span>
|
|
</div>
|
|
<div class="list-body">
|
|
<GpQueueListItem
|
|
v-for="patient in patients"
|
|
:key="patient.id || patient.noAntrian"
|
|
:queue-number="patient.noAntrian"
|
|
:status="patient.status"
|
|
:is-active="patient.isActive"
|
|
@view-detail="$emit('view-detail', patient)"
|
|
@process-patient="$emit('process-patient', patient)"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import GpQueueListItem from './GpQueueListItem.vue';
|
|
|
|
defineProps({
|
|
patients: { type: Array, default: () => [] }
|
|
});
|
|
|
|
defineEmits(['view-detail', 'process-patient']);
|
|
</script>
|
|
|
|
<style scoped>
|
|
.gp-queue-list-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex: 1;
|
|
background: white;
|
|
min-height: 200px;
|
|
}
|
|
.list-header {
|
|
padding: 12px 16px;
|
|
background: #EEF2F6; /* Light blue-gray from design */
|
|
border-bottom: 1px solid var(--gp-border, #e5e7eb);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
.title {
|
|
font-size: 10px;
|
|
font-weight: 700;
|
|
color: var(--gp-text-secondary, #6b7280);
|
|
}
|
|
.count-badge {
|
|
background: #D1D5DB; /* Gray */
|
|
color: white;
|
|
border-radius: 12px;
|
|
padding: 2px 8px;
|
|
font-size: 10px;
|
|
font-weight: 700;
|
|
}
|
|
.list-body {
|
|
overflow-y: auto;
|
|
}
|
|
</style>
|