374 lines
11 KiB
Vue
374 lines
11 KiB
Vue
<template>
|
|
<!-- Main Content -->
|
|
<v-main>
|
|
<v-container fluid class="pa-4 main-content-padding">
|
|
<!-- Header Stats -->
|
|
<div class="d-flex justify-space-between align-center mb-4">
|
|
<div class="d-flex align-center">
|
|
<span class="text-h6 mr-4">Total 0</span>
|
|
<span class="text-body-2">Max 150 Pasien</span>
|
|
</div>
|
|
<div class="d-flex align-center">
|
|
<span class="mr-4">Dashboard</span>
|
|
<span class="mr-4">Loket 24 | Senin, 11 Agustus 2025</span>
|
|
<span class="mr-4">11 Agustus 2025 - Pelayanan</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Status Cards -->
|
|
<v-card class="pa-5 mb-5" color="white" flat></v-card>
|
|
<v-row align="center">
|
|
<v-col cols="12" md="1">
|
|
<v-card color="green" dark class="text-center clickable-card" @click="handleStatusCardClick('1')">
|
|
<v-card-text>
|
|
<div class="text-h4">1</div>
|
|
</v-card-text>
|
|
</v-card>
|
|
</v-col>
|
|
<v-col cols="12" md="1">
|
|
<v-card color="blue" dark class="text-center clickable-card" @click="handleStatusCardClick('5')">
|
|
<v-card-text>
|
|
<div class="text-h4">5</div>
|
|
</v-card-text>
|
|
</v-card>
|
|
</v-col>
|
|
<v-col cols="12" md="1">
|
|
<v-card color="orange" dark class="text-center clickable-card" @click="handleStatusCardClick('10')">
|
|
<v-card-text>
|
|
<div class="text-h4">10</div>
|
|
</v-card-text>
|
|
</v-card>
|
|
</v-col>
|
|
<v-col cols="12" md="1">
|
|
<v-card color="red" dark class="text-center clickable-card" @click="handleStatusCardClick('20')">
|
|
<v-card-text>
|
|
<div class="text-h4">20</div>
|
|
</v-card-text>
|
|
</v-card>
|
|
</v-col>
|
|
</v-row>
|
|
|
|
|
|
<!-- Next Patient Card -->
|
|
<v-col cols="12" md="4">
|
|
<v-card color="green" dark class="mb-4 clickable-card" @click="handleNextPatientClick">
|
|
<v-card-text class="text-center">
|
|
<div class="text-h4 mb-2">NEXT</div>
|
|
<div class="text-h6 mb-1">Pasien : UM1001</div>
|
|
<div class="text-body-2">
|
|
Klik untuk memanggil pasien selanjutnya
|
|
</div>
|
|
</v-card-text>
|
|
</v-card>
|
|
</v-col>
|
|
|
|
<!-- Main Data Table -->
|
|
<v-card class="mb-4">
|
|
<v-card-title class="d-flex justify-space-between align-center">
|
|
<span>Data Pasien</span>
|
|
<div class="d-flex align-center">
|
|
<span class="mr-2">Show</span>
|
|
<v-select
|
|
v-model="itemsPerPage"
|
|
:items="[10, 25, 50, 100]"
|
|
density="compact"
|
|
variant="outlined"
|
|
style="max-width: 80px"
|
|
class="mr-4"
|
|
></v-select>
|
|
<span class="mr-2">entries</span>
|
|
<span class="mr-4">Search:</span>
|
|
<v-text-field
|
|
v-model="search"
|
|
density="compact"
|
|
variant="outlined"
|
|
style="max-width: 200px"
|
|
hide-details
|
|
></v-text-field>
|
|
</div>
|
|
</v-card-title>
|
|
<v-data-table
|
|
:headers="mainHeaders"
|
|
:items="mainPatients"
|
|
:search="search"
|
|
:items-per-page="itemsPerPage"
|
|
class="elevation-1"
|
|
>
|
|
<template v-slot:item.aksi="{ item }">
|
|
<div class="d-flex ga-1">
|
|
<v-btn size="small" color="success" variant="flat"
|
|
>Panggil</v-btn
|
|
>
|
|
<v-btn size="small" color="info" variant="flat">Cancel</v-btn>
|
|
<v-btn size="small" color="primary" variant="flat"
|
|
>Selesai</v-btn
|
|
>
|
|
</div>
|
|
</template>
|
|
<template v-slot:item.jamPanggil="{ item }">
|
|
<span :class="getRowClass(item)">{{ item.jamPanggil }}</span>
|
|
</template>
|
|
</v-data-table>
|
|
</v-card>
|
|
|
|
<!-- Total Quota Used -->
|
|
<v-card color="cyan" dark class="mb-4">
|
|
<v-card-text class="text-center">
|
|
<div class="text-h6">Total Quota Terpakai 5</div>
|
|
</v-card-text>
|
|
</v-card>
|
|
|
|
<!-- Late Patients Table -->
|
|
<v-card class="mb-4">
|
|
<v-card-title class="d-flex justify-space-between align-center">
|
|
<span>Info Pasien Lapor Terlambat</span>
|
|
<div class="d-flex align-center">
|
|
<span class="mr-2 text-caption text-orange"
|
|
>KETERANGAN: PASIEN MASUK PADA TANGGAL</span
|
|
>
|
|
<span class="mr-2">Show</span>
|
|
<v-select
|
|
v-model="lateItemsPerPage"
|
|
:items="[10, 25, 50, 100]"
|
|
density="compact"
|
|
variant="outlined"
|
|
style="max-width: 80px"
|
|
class="mr-4"
|
|
></v-select>
|
|
<span class="mr-2">entries</span>
|
|
<span class="mr-4">Search:</span>
|
|
<v-text-field
|
|
v-model="lateSearch"
|
|
density="compact"
|
|
variant="outlined"
|
|
style="max-width: 200px"
|
|
hide-details
|
|
></v-text-field>
|
|
</div>
|
|
</v-card-title>
|
|
<v-data-table
|
|
:headers="lateHeaders"
|
|
:items="latePatients"
|
|
:search="lateSearch"
|
|
:items-per-page="lateItemsPerPage"
|
|
class="elevation-1"
|
|
>
|
|
<template v-slot:no-data>
|
|
<div class="text-center pa-4">No data available in table</div>
|
|
</template>
|
|
</v-data-table>
|
|
</v-card>
|
|
|
|
<!-- Clinic Entry Patients Table -->
|
|
<v-card>
|
|
<v-card-title class="d-flex justify-space-between align-center">
|
|
<span>Info Pasien Masuk Klinik</span>
|
|
<div class="d-flex align-center">
|
|
<span class="mr-2">Show</span>
|
|
<v-select
|
|
v-model="clinicItemsPerPage"
|
|
:items="[10, 25, 50, 100]"
|
|
density="compact"
|
|
variant="outlined"
|
|
style="max-width: 80px"
|
|
class="mr-4"
|
|
></v-select>
|
|
<span class="mr-2">entries</span>
|
|
<span class="mr-4">Search:</span>
|
|
<v-text-field
|
|
v-model="clinicSearch"
|
|
density="compact"
|
|
variant="outlined"
|
|
style="max-width: 200px"
|
|
hide-details
|
|
></v-text-field>
|
|
</div>
|
|
</v-card-title>
|
|
<v-data-table
|
|
:headers="clinicHeaders"
|
|
:items="clinicPatients"
|
|
:search="clinicSearch"
|
|
:items-per-page="clinicItemsPerPage"
|
|
class="elevation-1"
|
|
>
|
|
<template v-slot:no-data>
|
|
<div class="text-center pa-4">No data available in table</div>
|
|
</template>
|
|
</v-data-table>
|
|
</v-card>
|
|
</v-container>
|
|
</v-main>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from "vue";
|
|
|
|
// Reactive data
|
|
const search = ref("");
|
|
const lateSearch = ref("");
|
|
const clinicSearch = ref("");
|
|
const itemsPerPage = ref(10);
|
|
const lateItemsPerPage = ref(10);
|
|
const clinicItemsPerPage = ref(10);
|
|
|
|
// Table headers
|
|
const mainHeaders = ref([
|
|
{ title: "No", value: "no", sortable: false },
|
|
{ title: "Jam Panggil", value: "jamPanggil" },
|
|
{ title: "Barcode", value: "barcode" },
|
|
{ title: "No Antrian", value: "noAntrian" },
|
|
{ title: "Shift", value: "shift" },
|
|
{ title: "Klinik", value: "klinik" },
|
|
{ title: "Fast Track", value: "fastTrack" },
|
|
{ title: "Pembayaran", value: "pembayaran" },
|
|
{ title: "Panggil", value: "panggil" },
|
|
{ title: "Aksi", value: "aksi", sortable: false },
|
|
]);
|
|
|
|
const lateHeaders = ref([
|
|
{ title: "No", value: "no", sortable: false },
|
|
{ title: "Barcode", value: "barcode" },
|
|
{ title: "No Antrian", value: "noAntrian" },
|
|
{ title: "Shift", value: "shift" },
|
|
{ title: "Klinik", value: "klinik" },
|
|
{ title: "Aksi", value: "aksi", sortable: false },
|
|
]);
|
|
|
|
const clinicHeaders = ref([
|
|
{ title: "#", value: "no", sortable: false },
|
|
{ title: "Barcode", value: "barcode" },
|
|
{ title: "No Antrian", value: "noAntrian" },
|
|
{ title: "No RM", value: "noRM" },
|
|
{ title: "Shift", value: "shift" },
|
|
{ title: "Klinik", value: "klinik" },
|
|
{ title: "Fast Track", value: "fastTrack" },
|
|
{ title: "Pembayaran", value: "pembayaran" },
|
|
{ title: "Aksi", value: "aksi", sortable: false },
|
|
]);
|
|
|
|
// Sample data
|
|
const mainPatients = ref([
|
|
{
|
|
no: 1,
|
|
jamPanggil: "12:49",
|
|
barcode: "250811100163",
|
|
noAntrian: "UM1001 | Online - 250811100163",
|
|
shift: "Shift 1",
|
|
klinik: "KANDUNGAN",
|
|
fastTrack: "UMUM",
|
|
pembayaran: "UMUM",
|
|
panggil: "Panggil",
|
|
status: "current",
|
|
},
|
|
{
|
|
no: 2,
|
|
jamPanggil: "10:52",
|
|
barcode: "250811100155",
|
|
noAntrian: "UM1002 | Online - 250811100155",
|
|
shift: "Shift 1",
|
|
klinik: "IPD",
|
|
fastTrack: "UMUM",
|
|
pembayaran: "UMUM",
|
|
panggil: "Cancel",
|
|
status: "normal",
|
|
},
|
|
{
|
|
no: 3,
|
|
jamPanggil: "07:35",
|
|
barcode: "250811100355",
|
|
noAntrian: "UM1005 | Online - 250811100355",
|
|
shift: "Shift 1",
|
|
klinik: "THT",
|
|
fastTrack: "UMUM",
|
|
pembayaran: "UMUM",
|
|
panggil: "Panggil",
|
|
status: "normal",
|
|
},
|
|
{
|
|
no: 4,
|
|
jamPanggil: "08:05",
|
|
barcode: "250811100355",
|
|
noAntrian: "UM1006 | Online - 250811100355",
|
|
shift: "Shift 1",
|
|
klinik: "THT",
|
|
fastTrack: "UMUM",
|
|
pembayaran: "UMUM",
|
|
panggil: "Panggil",
|
|
status: "normal",
|
|
},
|
|
{
|
|
no: 5,
|
|
jamPanggil: "12:43",
|
|
barcode: "250811100402",
|
|
noAntrian: "UM1004 | Online - 250811100402",
|
|
shift: "Shift 1",
|
|
klinik: "SARAF",
|
|
fastTrack: "UMUM",
|
|
pembayaran: "UMUM",
|
|
panggil: "Panggil",
|
|
status: "normal",
|
|
},
|
|
]);
|
|
|
|
const latePatients = ref([]);
|
|
|
|
const clinicPatients = ref([]);
|
|
|
|
// Methods
|
|
const getRowClass = (item) => {
|
|
if (item.status === "current") {
|
|
return "text-green font-weight-bold";
|
|
}
|
|
return "";
|
|
};
|
|
|
|
const handleStatusCardClick = (value) => {
|
|
console.log(`Status card with value ${value} was clicked!`);
|
|
// Tambahkan logika Anda di sini
|
|
};
|
|
|
|
const handleNextPatientClick = () => {
|
|
console.log("Next Patient card was clicked!");
|
|
// Tambahkan logika untuk memanggil pasien selanjutnya di sini
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.v-list-item--active {
|
|
background-color: rgba(25, 118, 210, 0.12);
|
|
color: #1976d2;
|
|
}
|
|
|
|
.text-green {
|
|
color: #4caf50 !important;
|
|
}
|
|
|
|
/* Custom scrollbar */
|
|
:deep(.v-data-table) {
|
|
font-size: 14px;
|
|
}
|
|
|
|
:deep(.v-data-table__wrapper) {
|
|
max-height: 400px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
/* Row highlighting */
|
|
:deep(.v-data-table tbody tr:nth-child(1)) {
|
|
background-color: #fff3cd !important;
|
|
}
|
|
|
|
.main-content-padding {
|
|
padding-left: 64px !important;
|
|
}
|
|
|
|
.clickable-card {
|
|
cursor: pointer;
|
|
transition: transform 0.2s ease-in-out;
|
|
}
|
|
|
|
.clickable-card:hover {
|
|
transform: translateY(-4px);
|
|
}
|
|
</style>
|