update list pasien dan antrian klinik
This commit is contained in:
bagus-arie05
@@ -2,7 +2,7 @@
|
||||
<div>
|
||||
<!-- Filter Section -->
|
||||
<v-row class="mb-4">
|
||||
<v-col cols="12" class="d-flex align-center flex-wrap">
|
||||
<v-col cols="12" class="d-flex align-center flex-wrap ml-4">
|
||||
<div style="width: 200px;" class="mr-4">
|
||||
<v-text-field
|
||||
v-model="filterDate"
|
||||
@@ -38,7 +38,7 @@
|
||||
<!-- Table Controls -->
|
||||
<v-row class="mb-3">
|
||||
<v-col cols="12" md="6" class="d-flex align-center">
|
||||
<span class="mr-2">Show</span>
|
||||
<span class="mr-2 pa-4">Show</span>
|
||||
<div style="width: 100px;">
|
||||
<v-select
|
||||
v-model="itemsPerPage"
|
||||
@@ -51,7 +51,7 @@
|
||||
<span class="ml-2">entries</span>
|
||||
</v-col>
|
||||
<v-col cols="12" md="6" class="d-flex justify-end">
|
||||
<div class="d-flex align-center">
|
||||
<div class="d-flex align-center pa-4">
|
||||
<span class="mr-2">Search:</span>
|
||||
<v-text-field
|
||||
v-model="search"
|
||||
|
||||
@@ -1,25 +1,172 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- Page Header -->
|
||||
<v-container fluid>
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<h1 class="text-h4 font-weight-bold mb-6">List Pasien</h1>
|
||||
<div class="pasien-container">
|
||||
<!-- Header Section -->
|
||||
<div class="page-header">
|
||||
<div class="header-content">
|
||||
<div class="header-left">
|
||||
<div class="header-icon">
|
||||
<v-icon size="32" color="white">mdi-account-group</v-icon>
|
||||
</div>
|
||||
<div class="header-text">
|
||||
<h1 class="page-title">List Pasien</h1>
|
||||
<p class="page-subtitle">Senin, 15 September 2025 - Data Master Pasien</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-right">
|
||||
<v-chip
|
||||
color="success"
|
||||
variant="flat"
|
||||
class="mr-2"
|
||||
>
|
||||
Total {{ pasienData.length }} Pasien
|
||||
</v-chip>
|
||||
<v-chip
|
||||
color="white"
|
||||
variant="flat"
|
||||
class="text-primary"
|
||||
>
|
||||
Status: Aktif
|
||||
</v-chip>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Filter Controls
|
||||
<v-card class="filter-controls-card mb-4" elevation="2">
|
||||
<v-card-text class="py-4">
|
||||
<v-row align="center">
|
||||
<v-col cols="12" md="8">
|
||||
<div class="d-flex align-center flex-wrap gap-10">
|
||||
<span class="text-subtitle-1 font-weight-medium">Filter Cepat:</span>
|
||||
<v-btn
|
||||
color="primary"
|
||||
variant="flat"
|
||||
size="default"
|
||||
class="px-4"
|
||||
@click="filterByStatus('Tunggu Daftar')"
|
||||
>
|
||||
<v-icon start size="16">mdi-clock-outline</v-icon>
|
||||
Tunggu Daftar
|
||||
</v-btn>
|
||||
<v-btn
|
||||
color="success"
|
||||
variant="flat"
|
||||
size="default"
|
||||
class="px-4"
|
||||
@click="filterByStatus('Selesai')"
|
||||
>
|
||||
<v-icon start size="16">mdi-check-circle</v-icon>
|
||||
Selesai
|
||||
</v-btn>
|
||||
<v-btn
|
||||
color="warning"
|
||||
variant="flat"
|
||||
size="default"
|
||||
class="px-4"
|
||||
@click="filterByKlinik('JKN')"
|
||||
>
|
||||
<v-icon start size="16">mdi-card-account-details</v-icon>
|
||||
JKN
|
||||
</v-btn>
|
||||
<v-btn
|
||||
color="info"
|
||||
variant="flat"
|
||||
size="default"
|
||||
class="px-4"
|
||||
@click="resetFilter()"
|
||||
>
|
||||
<v-icon start size="16">mdi-refresh</v-icon>
|
||||
Reset
|
||||
</v-btn>
|
||||
</div>
|
||||
</v-col>
|
||||
<v-col cols="12" md="4">
|
||||
<div class="d-flex justify-end gap-2">
|
||||
<v-btn
|
||||
color="success"
|
||||
variant="flat"
|
||||
@click="handleExportLaporan"
|
||||
:loading="loading"
|
||||
>
|
||||
<v-icon start>mdi-file-excel</v-icon>
|
||||
Export Laporan
|
||||
</v-btn>
|
||||
<v-btn
|
||||
color="primary"
|
||||
variant="flat"
|
||||
@click="handleExportLaporanPerKlinik"
|
||||
:loading="loading"
|
||||
>
|
||||
<v-icon start>mdi-hospital-building</v-icon>
|
||||
Export Per Klinik
|
||||
</v-btn>
|
||||
</div>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-text>
|
||||
</v-card> -->
|
||||
|
||||
<!-- Main Patients Table -->
|
||||
<v-card class="main-table-card mb-4" elevation="2">
|
||||
<v-card-title class="d-flex align-center justify-space-between pa-6">
|
||||
<div class="d-flex align-center">
|
||||
<v-icon color="primary" class="mr-2">mdi-table</v-icon>
|
||||
<span class="text-h6 font-weight-bold">DATA PASIEN</span>
|
||||
</div>
|
||||
<v-chip color="info" variant="flat">
|
||||
{{ filteredData.length }} dari {{ pasienData.length }} pasien
|
||||
</v-chip>
|
||||
</v-card-title>
|
||||
|
||||
<v-divider></v-divider>
|
||||
|
||||
<!-- Main Content Card -->
|
||||
<v-card elevation="2">
|
||||
<v-card-text class="pa-6">
|
||||
<TabelListPasien
|
||||
:items="pasienData"
|
||||
:items="filteredData"
|
||||
@search="handleSearch"
|
||||
@export-laporan="handleExportLaporan"
|
||||
@export-laporan-per-klinik="handleExportLaporanPerKlinik"
|
||||
/>
|
||||
</v-card>
|
||||
|
||||
Statistics Cards
|
||||
<v-row class="mb-4">
|
||||
<v-col cols="12" md="3">
|
||||
<v-card class="stats-card" elevation="2">
|
||||
<v-card-text class="text-center pa-4">
|
||||
<v-icon size="40" color="success" class="mb-2">mdi-account-check</v-icon>
|
||||
<div class="text-h4 font-weight-bold text-success">{{ getStatsByStatus('Tunggu Daftar') }}</div>
|
||||
<div class="text-body-2 text-grey-darken-1">Tunggu Daftar</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-container>
|
||||
</v-col>
|
||||
<v-col cols="12" md="3">
|
||||
<v-card class="stats-card" elevation="2">
|
||||
<v-card-text class="text-center pa-4">
|
||||
<v-icon size="40" color="info" class="mb-2">mdi-barcode</v-icon>
|
||||
<div class="text-h4 font-weight-bold text-info">{{ getStatsByStatus('Barcode') }}</div>
|
||||
<div class="text-body-2 text-grey-darken-1">Barcode</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
<v-col cols="12" md="3">
|
||||
<v-card class="stats-card" elevation="2">
|
||||
<v-card-text class="text-center pa-4">
|
||||
<v-icon size="40" color="warning" class="mb-2">mdi-wifi</v-icon>
|
||||
<div class="text-h4 font-weight-bold text-warning">{{ getStatsByKeterangan('Online') }}</div>
|
||||
<div class="text-body-2 text-grey-darken-1">Online</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
<v-col cols="12" md="3">
|
||||
<v-card class="stats-card" elevation="2">
|
||||
<v-card-text class="text-center pa-4">
|
||||
<v-icon size="40" color="error" class="mb-2">mdi-wifi-off</v-icon>
|
||||
<div class="text-h4 font-weight-bold text-error">{{ getStatsByKeterangan('Offline') }}</div>
|
||||
<div class="text-body-2 text-grey-darken-1">Offline</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<!-- Loading Overlay -->
|
||||
<v-overlay v-model="loading" class="align-center justify-center">
|
||||
@@ -30,7 +177,7 @@
|
||||
/>
|
||||
</v-overlay>
|
||||
|
||||
<!-- Success Snackbar -->
|
||||
<!-- Snackbar -->
|
||||
<v-snackbar
|
||||
v-model="snackbar.show"
|
||||
:color="snackbar.color"
|
||||
@@ -40,19 +187,18 @@
|
||||
{{ snackbar.message }}
|
||||
<template v-slot:actions>
|
||||
<v-btn
|
||||
variant="text"
|
||||
icon
|
||||
@click="snackbar.show = false"
|
||||
>
|
||||
Close
|
||||
<v-icon>mdi-close</v-icon>
|
||||
</v-btn>
|
||||
</template>
|
||||
</v-snackbar>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { ref, onMounted, computed } from 'vue'
|
||||
import TabelListPasien from '~/components/TabelListPasien.vue'
|
||||
|
||||
// Meta untuk SEO
|
||||
@@ -63,13 +209,14 @@ definePageMeta({
|
||||
|
||||
// Reactive states
|
||||
const loading = ref(false)
|
||||
const currentFilter = ref('')
|
||||
const snackbar = ref({
|
||||
show: false,
|
||||
message: '',
|
||||
color: 'success'
|
||||
})
|
||||
|
||||
// Sample data (replace with actual API call)
|
||||
// Sample data
|
||||
const pasienData = ref([
|
||||
{
|
||||
tglPeriksa: '27/08/2025',
|
||||
@@ -203,17 +350,57 @@ const pasienData = ref([
|
||||
}
|
||||
])
|
||||
|
||||
// Computed properties
|
||||
const filteredData = computed(() => {
|
||||
if (!currentFilter.value) {
|
||||
return pasienData.value
|
||||
}
|
||||
|
||||
return pasienData.value.filter(item => {
|
||||
return item.status === currentFilter.value ||
|
||||
item.pembayaran === currentFilter.value ||
|
||||
item.keterangan === currentFilter.value
|
||||
})
|
||||
})
|
||||
|
||||
// Methods
|
||||
const showSnackbar = (message, color = 'success') => {
|
||||
snackbar.value = {
|
||||
show: true,
|
||||
message,
|
||||
color
|
||||
}
|
||||
}
|
||||
|
||||
const filterByStatus = (status) => {
|
||||
currentFilter.value = status
|
||||
showSnackbar(`Filter diterapkan: ${status}`, 'info')
|
||||
}
|
||||
|
||||
const filterByKlinik = (pembayaran) => {
|
||||
currentFilter.value = pembayaran
|
||||
showSnackbar(`Filter diterapkan: ${pembayaran}`, 'info')
|
||||
}
|
||||
|
||||
const resetFilter = () => {
|
||||
currentFilter.value = ''
|
||||
showSnackbar('Filter direset', 'success')
|
||||
}
|
||||
|
||||
const getStatsByStatus = (status) => {
|
||||
return pasienData.value.filter(item => item.status === status).length
|
||||
}
|
||||
|
||||
const getStatsByKeterangan = (keterangan) => {
|
||||
return pasienData.value.filter(item => item.keterangan === keterangan).length
|
||||
}
|
||||
|
||||
const handleSearch = async (filters) => {
|
||||
loading.value = true
|
||||
|
||||
try {
|
||||
// Simulate API call
|
||||
await new Promise(resolve => setTimeout(resolve, 1000))
|
||||
|
||||
// Here you would typically call your API with filters
|
||||
console.log('Search filters:', filters)
|
||||
|
||||
showSnackbar('Data berhasil difilter', 'success')
|
||||
} catch (error) {
|
||||
console.error('Error searching data:', error)
|
||||
@@ -227,12 +414,8 @@ const handleExportLaporan = async () => {
|
||||
loading.value = true
|
||||
|
||||
try {
|
||||
// Simulate export process
|
||||
await new Promise(resolve => setTimeout(resolve, 2000))
|
||||
|
||||
// Here you would typically call your export API
|
||||
console.log('Exporting laporan pasien...')
|
||||
|
||||
showSnackbar('Laporan pasien berhasil diexport', 'success')
|
||||
} catch (error) {
|
||||
console.error('Error exporting laporan:', error)
|
||||
@@ -246,12 +429,8 @@ const handleExportLaporanPerKlinik = async () => {
|
||||
loading.value = true
|
||||
|
||||
try {
|
||||
// Simulate export process
|
||||
await new Promise(resolve => setTimeout(resolve, 2000))
|
||||
|
||||
// Here you would typically call your export API
|
||||
console.log('Exporting laporan pasien per klinik...')
|
||||
|
||||
showSnackbar('Laporan pasien per klinik berhasil diexport', 'success')
|
||||
} catch (error) {
|
||||
console.error('Error exporting laporan per klinik:', error)
|
||||
@@ -261,25 +440,11 @@ const handleExportLaporanPerKlinik = async () => {
|
||||
}
|
||||
}
|
||||
|
||||
const showSnackbar = (message, color = 'success') => {
|
||||
snackbar.value = {
|
||||
show: true,
|
||||
message,
|
||||
color
|
||||
}
|
||||
}
|
||||
|
||||
const fetchPasienData = async () => {
|
||||
loading.value = true
|
||||
|
||||
try {
|
||||
// Simulate API call to fetch patient data
|
||||
await new Promise(resolve => setTimeout(resolve, 1000))
|
||||
|
||||
// Here you would typically call your API
|
||||
// const response = await $fetch('/api/pasien')
|
||||
// pasienData.value = response.data
|
||||
|
||||
console.log('Patient data loaded successfully')
|
||||
} catch (error) {
|
||||
console.error('Error fetching patient data:', error)
|
||||
@@ -307,5 +472,164 @@ useHead({
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* Custom styles if needed */
|
||||
.pasien-container {
|
||||
background: #f5f7fa;
|
||||
min-height: 100vh;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
background: linear-gradient(135deg, #1976d2 0%, #1565c0 100%);
|
||||
border-radius: 16px;
|
||||
margin-bottom: 24px;
|
||||
box-shadow: 0 8px 32px rgba(25, 118, 210, 0.3);
|
||||
}
|
||||
|
||||
.header-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 32px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.header-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.header-icon {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border-radius: 16px;
|
||||
padding: 16px;
|
||||
margin-right: 20px;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 32px;
|
||||
font-weight: 700;
|
||||
margin: 0;
|
||||
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.page-subtitle {
|
||||
margin: 4px 0 0 0;
|
||||
opacity: 0.9;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.header-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* .filter-controls-card, */
|
||||
.main-table-card,
|
||||
.stats-card {
|
||||
border-radius: 16px;
|
||||
border: 1px solid rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.stats-card {
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.stats-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
/* Enhanced table styling */
|
||||
.main-table-card :deep(.v-data-table th) {
|
||||
background: #fafbfc;
|
||||
font-weight: 600;
|
||||
font-size: 13px;
|
||||
color: #374151;
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
}
|
||||
|
||||
.main-table-card :deep(.v-data-table tbody tr:hover) {
|
||||
background: #f8fafc !important;
|
||||
}
|
||||
|
||||
.main-table-card :deep(.v-data-table tbody td) {
|
||||
padding: 12px 16px;
|
||||
border-bottom: 1px solid #f1f5f9;
|
||||
}
|
||||
|
||||
/* Button styling */
|
||||
.v-btn {
|
||||
text-transform: none !important;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.v-btn--size-default {
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
/* Responsive Design */
|
||||
@media (max-width: 1024px) {
|
||||
.header-content {
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.header-left {
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.pasien-container {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.header-content {
|
||||
padding: 24px 20px;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.header-icon {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
/* .filter-controls-card .d-flex {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 16px;
|
||||
} */
|
||||
|
||||
.filter-controls-card .v-col:last-child .d-flex {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.page-title {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.filter-buttons-container {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.filter-btn {
|
||||
margin-right: 12px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.header-right .v-chip {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
713
pages/Screen/AntrianKlinik.vue
Normal file
713
pages/Screen/AntrianKlinik.vue
Normal file
@@ -0,0 +1,713 @@
|
||||
<!-- pages/AntrianKlinik.vue -->
|
||||
<template>
|
||||
<div class="antrian-container">
|
||||
<!-- Header Section -->
|
||||
<div class="page-header">
|
||||
<div class="header-content">
|
||||
<div class="header-left">
|
||||
<div class="header-icon">
|
||||
<v-icon size="32" color="white">mdi-clipboard-list</v-icon>
|
||||
</div>
|
||||
<div class="header-text">
|
||||
<h1 class="page-title">Antrian Klinik</h1>
|
||||
<p class="page-subtitle">Informasi Antrian Real-time</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-right">
|
||||
<div class="time-display">
|
||||
<v-chip color="white" variant="flat" size="large" class="time-chip">
|
||||
<v-icon start size="16">mdi-clock-outline</v-icon>
|
||||
{{ currentTime }}
|
||||
</v-chip>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Controls Section -->
|
||||
<v-card class="controls-card mb-4" elevation="2">
|
||||
<v-card-text class="py-3">
|
||||
<v-row align="center">
|
||||
<v-col cols="12" md="6">
|
||||
<div class="d-flex align-center flex-wrap gap-3">
|
||||
<v-select
|
||||
v-model="selectedClinic"
|
||||
:items="clinicOptions"
|
||||
label="Pilih Klinik"
|
||||
density="compact"
|
||||
variant="outlined"
|
||||
hide-details
|
||||
clearable
|
||||
style="min-width: 200px;"
|
||||
/>
|
||||
|
||||
<v-select
|
||||
v-model="selectedStatus"
|
||||
:items="statusOptions"
|
||||
label="Filter Status"
|
||||
density="compact"
|
||||
variant="outlined"
|
||||
hide-details
|
||||
clearable
|
||||
style="min-width: 160px;"
|
||||
/>
|
||||
</div>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12" md="6">
|
||||
<div class="d-flex justify-end align-center flex-wrap gap-2">
|
||||
<v-btn
|
||||
variant="outlined"
|
||||
prepend-icon="mdi-refresh"
|
||||
@click="refreshData"
|
||||
:loading="loading"
|
||||
size="small"
|
||||
>
|
||||
Refresh
|
||||
</v-btn>
|
||||
|
||||
<v-btn
|
||||
:color="autoRefresh ? 'success' : 'grey'"
|
||||
:variant="autoRefresh ? 'flat' : 'outlined'"
|
||||
prepend-icon="mdi-autorenew"
|
||||
@click="toggleAutoRefresh"
|
||||
size="small"
|
||||
>
|
||||
Auto Refresh
|
||||
</v-btn>
|
||||
</div>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
|
||||
<!-- Queue Display -->
|
||||
<v-card elevation="2" class="main-content-card">
|
||||
<v-card-title class="d-flex align-center pa-4 bg-grey-lighten-4">
|
||||
<v-icon class="mr-2">mdi-format-list-numbered</v-icon>
|
||||
<span>Antrian Aktif - {{ filteredQueues.length }} antrian</span>
|
||||
</v-card-title>
|
||||
|
||||
<v-card-text class="pa-6">
|
||||
<v-row>
|
||||
<v-col
|
||||
v-for="queue in filteredQueues"
|
||||
:key="queue.id"
|
||||
cols="12"
|
||||
sm="6"
|
||||
md="4"
|
||||
lg="3"
|
||||
class="pa-2"
|
||||
>
|
||||
<v-card
|
||||
:class="{
|
||||
'queue-card': true,
|
||||
'queue-active': queue.status === 'active',
|
||||
'queue-waiting': queue.status === 'waiting',
|
||||
'queue-completed': queue.status === 'completed',
|
||||
'queue-called': queue.status === 'called'
|
||||
}"
|
||||
elevation="3"
|
||||
>
|
||||
<v-card-text class="text-center pa-4">
|
||||
<!-- Status Chip -->
|
||||
<div class="mb-3">
|
||||
<v-chip
|
||||
:color="getStatusColor(queue.status)"
|
||||
size="small"
|
||||
variant="flat"
|
||||
>
|
||||
{{ getStatusText(queue.status) }}
|
||||
</v-chip>
|
||||
</div>
|
||||
|
||||
<!-- Queue Number -->
|
||||
<div class="queue-number-wrapper mb-3">
|
||||
<div class="queue-number">
|
||||
{{ queue.number }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Clinic Info -->
|
||||
<h3 class="text-h6 font-weight-bold mb-2">
|
||||
{{ queue.clinicName }}
|
||||
</h3>
|
||||
|
||||
<!-- Patient Info -->
|
||||
<div class="patient-info mb-3">
|
||||
<p class="text-body-2 mb-1">
|
||||
<strong>Pasien:</strong> {{ queue.patientName }}
|
||||
</p>
|
||||
<p class="text-caption text-grey-darken-1 mb-1">
|
||||
<strong>Dokter:</strong> {{ queue.doctorName }}
|
||||
</p>
|
||||
<p class="text-caption text-grey-darken-1">
|
||||
<strong>Estimasi:</strong> {{ queue.estimatedTime }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Waiting Info -->
|
||||
<div v-if="queue.status === 'waiting'" class="waiting-info">
|
||||
<v-chip
|
||||
size="small"
|
||||
color="orange"
|
||||
variant="outlined"
|
||||
class="mb-2"
|
||||
>
|
||||
Sisa {{ queue.remainingQueue }} antrian
|
||||
</v-chip>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<!-- Empty State -->
|
||||
<div v-if="filteredQueues.length === 0" class="text-center py-8">
|
||||
<v-icon size="64" color="grey-lighten-1">mdi-clipboard-list-outline</v-icon>
|
||||
<h3 class="text-h6 mt-4 text-grey-darken-1">Tidak ada antrian yang sesuai filter</h3>
|
||||
<p class="text-body-2 text-grey-darken-1">Coba ubah filter pencarian Anda</p>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
|
||||
<!-- Current Queue Display -->
|
||||
<v-card class="current-queue-card mt-4" elevation="4" v-if="currentQueue">
|
||||
<div class="current-queue-header">
|
||||
<v-icon size="24" class="mr-2">mdi-account-voice</v-icon>
|
||||
<span class="text-h6">Sedang Dipanggil</span>
|
||||
</div>
|
||||
<v-card-text class="pa-6">
|
||||
<v-row align="center">
|
||||
<v-col cols="12" md="8">
|
||||
<div class="d-flex align-center">
|
||||
<div class="current-number-display mr-4">
|
||||
{{ currentQueue.number }}
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-h5 font-weight-bold mb-1">{{ currentQueue.patientName }}</h3>
|
||||
<p class="text-body-1 mb-1">{{ currentQueue.clinicName }}</p>
|
||||
<p class="text-body-2 text-grey-darken-1">Dr. {{ currentQueue.doctorName }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</v-col>
|
||||
<v-col cols="12" md="4" class="text-right">
|
||||
<v-chip color="success" size="large" variant="flat">
|
||||
<v-icon start>mdi-microphone</v-icon>
|
||||
DIPANGGIL
|
||||
</v-chip>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
|
||||
<!-- Statistics Card -->
|
||||
<v-card class="stats-card mt-4" elevation="2">
|
||||
<v-card-title class="d-flex align-center pa-4 bg-info text-white">
|
||||
<v-icon class="mr-2">mdi-chart-line</v-icon>
|
||||
Statistik Antrian Hari Ini
|
||||
</v-card-title>
|
||||
|
||||
<v-card-text class="pa-4">
|
||||
<v-row>
|
||||
<v-col cols="6" md="3" class="text-center">
|
||||
<div class="stat-item">
|
||||
<div class="stat-number text-primary">{{ statistics.total }}</div>
|
||||
<div class="stat-label">Total Antrian</div>
|
||||
</div>
|
||||
</v-col>
|
||||
<v-col cols="6" md="3" class="text-center">
|
||||
<div class="stat-item">
|
||||
<div class="stat-number text-success">{{ statistics.completed }}</div>
|
||||
<div class="stat-label">Selesai</div>
|
||||
</div>
|
||||
</v-col>
|
||||
<v-col cols="6" md="3" class="text-center">
|
||||
<div class="stat-item">
|
||||
<div class="stat-number text-warning">{{ statistics.waiting }}</div>
|
||||
<div class="stat-label">Menunggu</div>
|
||||
</div>
|
||||
</v-col>
|
||||
<v-col cols="6" md="3" class="text-center">
|
||||
<div class="stat-item">
|
||||
<div class="stat-number text-error">{{ statistics.avgWaitTime }}</div>
|
||||
<div class="stat-label">Rata-rata Tunggu (menit)</div>
|
||||
</div>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
|
||||
<!-- Snackbar -->
|
||||
<v-snackbar
|
||||
v-model="snackbar"
|
||||
:color="snackbarColor"
|
||||
:timeout="3000"
|
||||
location="top right"
|
||||
>
|
||||
{{ snackbarText }}
|
||||
|
||||
<template v-slot:actions>
|
||||
<v-btn icon @click="snackbar = false">
|
||||
<v-icon>mdi-close</v-icon>
|
||||
</v-btn>
|
||||
</template>
|
||||
</v-snackbar>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, onMounted, onUnmounted } from 'vue'
|
||||
|
||||
definePageMeta({
|
||||
layout: false,
|
||||
});
|
||||
|
||||
// Reactive data
|
||||
const loading = ref(false)
|
||||
const selectedClinic = ref(null)
|
||||
const selectedStatus = ref(null)
|
||||
const snackbar = ref(false)
|
||||
const snackbarText = ref('')
|
||||
const snackbarColor = ref('success')
|
||||
const currentTime = ref('')
|
||||
const autoRefresh = ref(false)
|
||||
let autoRefreshInterval = null
|
||||
let timeInterval = null
|
||||
|
||||
// Options - removed all filter options
|
||||
|
||||
// Queue data
|
||||
const queues = ref([
|
||||
{
|
||||
id: 1,
|
||||
number: '026',
|
||||
clinicName: 'ANAK',
|
||||
patientName: 'Ahmad Fauzi',
|
||||
doctorName: 'Dr. Sarah Putri',
|
||||
status: 'waiting',
|
||||
estimatedTime: '10:30',
|
||||
remainingQueue: 3
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
number: '018',
|
||||
clinicName: 'JANTUNG',
|
||||
patientName: 'Siti Aminah',
|
||||
doctorName: 'Dr. Budi Santoso',
|
||||
status: 'called',
|
||||
estimatedTime: '10:15',
|
||||
remainingQueue: 0
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
number: '019',
|
||||
clinicName: 'MATA',
|
||||
patientName: 'Rudi Hartono',
|
||||
doctorName: 'Dr. Maya Sari',
|
||||
status: 'active',
|
||||
estimatedTime: '10:20',
|
||||
remainingQueue: 0
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
number: '020',
|
||||
clinicName: 'GIGI DAN MULUT',
|
||||
patientName: 'Dewi Lestari',
|
||||
doctorName: 'Dr. Agus Wijaya',
|
||||
status: 'waiting',
|
||||
estimatedTime: '10:40',
|
||||
remainingQueue: 5
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
number: '021',
|
||||
clinicName: 'IPD',
|
||||
patientName: 'Bambang Susilo',
|
||||
doctorName: 'Dr. Rina Handayani',
|
||||
status: 'waiting',
|
||||
estimatedTime: '10:50',
|
||||
remainingQueue: 7
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
number: '022',
|
||||
clinicName: 'THT',
|
||||
patientName: 'Lisa Permata',
|
||||
doctorName: 'Dr. Hendra Gunawan',
|
||||
status: 'waiting',
|
||||
estimatedTime: '11:00',
|
||||
remainingQueue: 2
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
number: '015',
|
||||
clinicName: 'BEDAH',
|
||||
patientName: 'Eko Prasetyo',
|
||||
doctorName: 'Dr. Diana Sari',
|
||||
status: 'completed',
|
||||
estimatedTime: '09:30',
|
||||
remainingQueue: 0
|
||||
}
|
||||
])
|
||||
|
||||
// Current queue (being called)
|
||||
const currentQueue = ref({
|
||||
number: '018',
|
||||
clinicName: 'JANTUNG',
|
||||
patientName: 'Siti Aminah',
|
||||
doctorName: 'Budi Santoso'
|
||||
})
|
||||
|
||||
// Statistics
|
||||
const statistics = ref({
|
||||
total: 45,
|
||||
completed: 18,
|
||||
waiting: 22,
|
||||
avgWaitTime: 25
|
||||
})
|
||||
|
||||
// Computed properties
|
||||
const filteredQueues = computed(() => {
|
||||
let filtered = queues.value
|
||||
|
||||
if (selectedClinic.value) {
|
||||
filtered = filtered.filter(queue => queue.clinicName === selectedClinic.value)
|
||||
}
|
||||
|
||||
if (selectedStatus.value) {
|
||||
const statusMap = {
|
||||
'Menunggu': 'waiting',
|
||||
'Dipanggil': 'called',
|
||||
'Aktif': 'active',
|
||||
'Selesai': 'completed'
|
||||
}
|
||||
const statusFilter = statusMap[selectedStatus.value]
|
||||
filtered = filtered.filter(queue => queue.status === statusFilter)
|
||||
}
|
||||
|
||||
return filtered
|
||||
})
|
||||
|
||||
// Methods
|
||||
const updateTime = () => {
|
||||
const now = new Date()
|
||||
currentTime.value = now.toLocaleTimeString('id-ID', {
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
second: '2-digit'
|
||||
})
|
||||
}
|
||||
|
||||
const showSnackbar = (text, color = 'success') => {
|
||||
snackbarText.value = text
|
||||
snackbarColor.value = color
|
||||
snackbar.value = true
|
||||
}
|
||||
|
||||
const getStatusColor = (status) => {
|
||||
const colors = {
|
||||
'waiting': 'orange',
|
||||
'called': 'info',
|
||||
'active': 'success',
|
||||
'completed': 'grey'
|
||||
}
|
||||
return colors[status] || 'grey'
|
||||
}
|
||||
|
||||
const getStatusText = (status) => {
|
||||
const texts = {
|
||||
'waiting': 'MENUNGGU',
|
||||
'called': 'DIPANGGIL',
|
||||
'active': 'AKTIF',
|
||||
'completed': 'SELESAI'
|
||||
}
|
||||
return texts[status] || 'UNKNOWN'
|
||||
}
|
||||
|
||||
const refreshData = () => {
|
||||
loading.value = true
|
||||
setTimeout(() => {
|
||||
loading.value = false
|
||||
showSnackbar('Data antrian berhasil diperbarui', 'success')
|
||||
}, 1000)
|
||||
}
|
||||
|
||||
const toggleAutoRefresh = () => {
|
||||
autoRefresh.value = !autoRefresh.value
|
||||
|
||||
if (autoRefresh.value) {
|
||||
autoRefreshInterval = setInterval(() => {
|
||||
refreshData()
|
||||
}, 30000) // Refresh every 30 seconds
|
||||
showSnackbar('Auto refresh diaktifkan (30 detik)', 'info')
|
||||
} else {
|
||||
if (autoRefreshInterval) {
|
||||
clearInterval(autoRefreshInterval)
|
||||
autoRefreshInterval = null
|
||||
}
|
||||
showSnackbar('Auto refresh dinonaktifkan', 'warning')
|
||||
}
|
||||
}
|
||||
|
||||
// Lifecycle
|
||||
onMounted(() => {
|
||||
updateTime()
|
||||
timeInterval = setInterval(updateTime, 1000)
|
||||
refreshData()
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
if (timeInterval) {
|
||||
clearInterval(timeInterval)
|
||||
}
|
||||
if (autoRefreshInterval) {
|
||||
clearInterval(autoRefreshInterval)
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.antrian-container {
|
||||
background: #f5f7fa;
|
||||
min-height: 100vh;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
background: linear-gradient(135deg, #1976d2 0%, #1565c0 100%);
|
||||
border-radius: 16px;
|
||||
margin-bottom: 24px;
|
||||
box-shadow: 0 8px 32px rgba(25, 118, 210, 0.3);
|
||||
}
|
||||
|
||||
.header-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 32px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.header-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.header-icon {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border-radius: 16px;
|
||||
padding: 16px;
|
||||
margin-right: 20px;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 32px;
|
||||
font-weight: 700;
|
||||
margin: 0;
|
||||
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.page-subtitle {
|
||||
margin: 4px 0 0 0;
|
||||
opacity: 0.9;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.time-chip {
|
||||
font-weight: 600;
|
||||
color: #1976d2 !important;
|
||||
}
|
||||
|
||||
.controls-card,
|
||||
.main-content-card,
|
||||
.current-queue-card,
|
||||
.stats-card {
|
||||
border-radius: 16px;
|
||||
border: 1px solid rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.queue-card {
|
||||
border-radius: 16px !important;
|
||||
height: 280px;
|
||||
background: white;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.queue-waiting {
|
||||
border-left: 6px solid #FF9800;
|
||||
box-shadow: 0 4px 12px rgba(255, 152, 0, 0.3);
|
||||
}
|
||||
|
||||
.queue-called {
|
||||
border-left: 6px solid #2196F3;
|
||||
box-shadow: 0 4px 12px rgba(33, 150, 243, 0.3);
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
|
||||
.queue-active {
|
||||
border-left: 6px solid #4CAF50;
|
||||
box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
|
||||
}
|
||||
|
||||
.queue-completed {
|
||||
border-left: 6px solid #9E9E9E;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.queue-number-wrapper {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 0 auto 16px;
|
||||
}
|
||||
|
||||
.queue-number {
|
||||
background: linear-gradient(135deg, #1976d2, #1565c0);
|
||||
color: white;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
box-shadow: 0 4px 16px rgba(25, 118, 210, 0.4);
|
||||
}
|
||||
|
||||
.patient-info {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.current-queue-card {
|
||||
background: linear-gradient(135deg, #4CAF50, #45a049);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.current-queue-header {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
padding: 16px 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: white;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.current-number-display {
|
||||
background: white;
|
||||
color: #4CAF50;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 32px;
|
||||
font-weight: bold;
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.stats-card .stat-item {
|
||||
padding: 16px 0;
|
||||
}
|
||||
|
||||
.stat-number {
|
||||
font-size: 32px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
box-shadow: 0 4px 12px rgba(33, 150, 243, 0.3);
|
||||
}
|
||||
50% {
|
||||
box-shadow: 0 8px 20px rgba(33, 150, 243, 0.6);
|
||||
}
|
||||
100% {
|
||||
box-shadow: 0 4px 12px rgba(33, 150, 243, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
/* Responsive Design */
|
||||
@media (max-width: 1024px) {
|
||||
.header-content {
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.header-left {
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.antrian-container {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.header-content {
|
||||
padding: 24px 20px;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.queue-card {
|
||||
height: 260px;
|
||||
}
|
||||
|
||||
.queue-number {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.current-number-display {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.queue-card {
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.stat-number {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.queue-number {
|
||||
width: 90px;
|
||||
height: 90px;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.current-number-display {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
font-size: 32px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user