1001 lines
36 KiB
Vue
1001 lines
36 KiB
Vue
<script setup lang="ts">
|
|
import { ref, computed, watch, onMounted } from 'vue';
|
|
import { Icon } from '@iconify/vue';
|
|
// @ts-ignore: module has incompatible/undiscoverable typings in package exports
|
|
import VueApexCharts from "vue3-apexcharts";
|
|
import ModalPendaftaran from '@/components/pendaftaran/ModalPendaftaran.vue';
|
|
import api from '@/services/api';
|
|
import { useAuth } from '~/composables/useAuth';
|
|
import { useUserMenuStore } from '~/store/userMenu';
|
|
|
|
// Check user access to dashboard
|
|
const { user } = useAuth();
|
|
const menuStore = useUserMenuStore();
|
|
|
|
// Check if user has access to dashboard menu item
|
|
const hasDashboardAccess = computed(() => {
|
|
if (!menuStore.hasMenu) return false;
|
|
|
|
// Extract all eligible paths from menu
|
|
const eligiblePaths: string[] = [];
|
|
menuStore.menuItems.forEach((group) => {
|
|
if (group.children) {
|
|
group.children.forEach((item) => {
|
|
if (item.to) {
|
|
eligiblePaths.push(item.to);
|
|
}
|
|
if (item.children) {
|
|
item.children.forEach((subItem) => {
|
|
if (subItem.to) {
|
|
eligiblePaths.push(subItem.to);
|
|
}
|
|
});
|
|
}
|
|
});
|
|
}
|
|
});
|
|
|
|
// Check if /dashboard is in eligible paths
|
|
return eligiblePaths.includes('/dashboard');
|
|
});
|
|
|
|
// Filter bulan
|
|
const selectedMonth = ref(new Date().getMonth());
|
|
const selectedYear = ref(new Date().getFullYear());
|
|
|
|
const months = [
|
|
{ value: 0, text: 'Januari' },
|
|
{ value: 1, text: 'Februari' },
|
|
{ value: 2, text: 'Maret' },
|
|
{ value: 3, text: 'April' },
|
|
{ value: 4, text: 'Mei' },
|
|
{ value: 5, text: 'Juni' },
|
|
{ value: 6, text: 'Juli' },
|
|
{ value: 7, text: 'Agustus' },
|
|
{ value: 8, text: 'September' },
|
|
{ value: 9, text: 'Oktober' },
|
|
{ value: 10, text: 'November' },
|
|
{ value: 11, text: 'Desember' }
|
|
];
|
|
const yearNow = new Date().getFullYear();
|
|
const years = ref([
|
|
yearNow -3, yearNow - 2, yearNow -1,yearNow
|
|
]);
|
|
|
|
// Modal state
|
|
const showModal = ref(false);
|
|
|
|
// Loading state
|
|
const loadingStatusAntrian = ref(false);
|
|
const loadingKategoriAntrian = ref(false);
|
|
const loadingAntrianPerHari = ref(false);
|
|
const loadingAntrianPerSpesialis = ref(false);
|
|
const loadingAntrianPerSubspesialis = ref(false);
|
|
|
|
// Data status antrian dari API
|
|
const statusAntrianData = ref<Array<{ id: number; jumlah: number; statust: string }>>([]);
|
|
const kategoriAntrianData = ref<Array<{ id_kategori: number; kategori: string; jumlah: number }>>([]);
|
|
const antrianPerHariData = ref<Array<{ TanggalDaftar: string; Belum: number; Selesai: number; Tunda: number; Batal: number }>>([]);
|
|
|
|
// Fetch data perbandingan status antrian
|
|
const fetchStatusAntrian = async () => {
|
|
loadingStatusAntrian.value = true;
|
|
try {
|
|
const response = await api.get('/dashboard/perbandingan-status-antrian', {
|
|
params: {
|
|
year: selectedYear.value,
|
|
month: selectedMonth.value + 1 // API expects 1-12, not 0-11
|
|
}
|
|
});
|
|
|
|
if (response.data?.success && response.data?.data) {
|
|
statusAntrianData.value = response.data.data;
|
|
}
|
|
} catch (error) {
|
|
console.error('Error fetching status antrian:', error);
|
|
statusAntrianData.value = [];
|
|
} finally {
|
|
loadingStatusAntrian.value = false;
|
|
}
|
|
};
|
|
|
|
// Fetch data antrian per kategori
|
|
const fetchKategoriAntrian = async () => {
|
|
loadingKategoriAntrian.value = true;
|
|
try {
|
|
const response = await api.get('/dashboard/perbandingan-kategori-antrian', {
|
|
params: {
|
|
year: selectedYear.value,
|
|
month: selectedMonth.value + 1 // API expects 1-12, not 0-11
|
|
}
|
|
});
|
|
|
|
if (response.data?.success && response.data?.data) {
|
|
kategoriAntrianData.value = response.data.data;
|
|
}
|
|
} catch (error) {
|
|
console.error('Error fetching kategori antrian:', error);
|
|
kategoriAntrianData.value = [];
|
|
} finally {
|
|
loadingKategoriAntrian.value = false;
|
|
}
|
|
};
|
|
|
|
// Fetch data antrian per hari
|
|
const fetchAntrianPerHari = async () => {
|
|
loadingAntrianPerHari.value = true;
|
|
try {
|
|
const response = await api.get('/dashboard/antrian-per-hari', {
|
|
params: {
|
|
year: selectedYear.value,
|
|
month: selectedMonth.value + 1 // API expects 1-12, not 0-11
|
|
}
|
|
});
|
|
|
|
if (response.data?.success && response.data?.data) {
|
|
antrianPerHariData.value = response.data.data;
|
|
}
|
|
} catch (error) {
|
|
console.error('Error fetching antrian per hari:', error);
|
|
antrianPerHariData.value = [];
|
|
} finally {
|
|
loadingAntrianPerHari.value = false;
|
|
}
|
|
};
|
|
|
|
// Fetch data antrian per spesialis
|
|
const fetchAntrianPerSpesialis = async () => {
|
|
loadingAntrianPerSpesialis.value = true;
|
|
try {
|
|
const response = await api.get('/dashboard/table-antrian-per-spesialis', {
|
|
params: {
|
|
year: selectedYear.value,
|
|
month: selectedMonth.value + 1 // API expects 1-12, not 0-11
|
|
}
|
|
});
|
|
|
|
if (response.data?.success && response.data?.data) {
|
|
// Transform API data to match table headers (lowercase keys)
|
|
antrianPerSpesialis.value = response.data.data.map((item: any) => ({
|
|
spesialis: item.Spesialis,
|
|
total: item.Total,
|
|
belum: item.Belum,
|
|
selesai: item.Selesai,
|
|
tunda: item.Tunda,
|
|
batal: item.Batal
|
|
}));
|
|
}
|
|
} catch (error) {
|
|
console.error('Error fetching antrian per spesialis:', error);
|
|
antrianPerSpesialis.value = [];
|
|
} finally {
|
|
loadingAntrianPerSpesialis.value = false;
|
|
}
|
|
};
|
|
|
|
// Fetch data antrian per subspesialis
|
|
const fetchAntrianPerSubspesialis = async () => {
|
|
loadingAntrianPerSubspesialis.value = true;
|
|
try {
|
|
const response = await api.get('/dashboard/table-antrian-per-subspesialis', {
|
|
params: {
|
|
year: selectedYear.value,
|
|
month: selectedMonth.value + 1 // API expects 1-12, not 0-11
|
|
}
|
|
});
|
|
|
|
if (response.data?.success && response.data?.data) {
|
|
// Transform API data to match table headers (lowercase keys)
|
|
antrianPerSubspesialis.value = response.data.data.map((item: any) => ({
|
|
spesialis: item.Spesialis,
|
|
subspesialis: item.SubSpesialis,
|
|
total: item.Total,
|
|
belum: item.Belum,
|
|
selesai: item.Selesai,
|
|
tunda: item.Tunda,
|
|
batal: item.Batal
|
|
}));
|
|
}
|
|
} catch (error) {
|
|
console.error('Error fetching antrian per subspesialis:', error);
|
|
antrianPerSubspesialis.value = [];
|
|
} finally {
|
|
loadingAntrianPerSubspesialis.value = false;
|
|
}
|
|
};
|
|
|
|
// Computed properties untuk total masing-masing status
|
|
const totalBelum = computed(() => {
|
|
const item = statusAntrianData.value.find(d => d.statust === 'Belum');
|
|
return item?.jumlah || 0;
|
|
});
|
|
|
|
const totalSelesai = computed(() => {
|
|
const item = statusAntrianData.value.find(d => d.statust === 'Selesai');
|
|
return item?.jumlah || 0;
|
|
});
|
|
|
|
const totalTunda = computed(() => {
|
|
const item = statusAntrianData.value.find(d => d.statust === 'Tunda');
|
|
return item?.jumlah || 0;
|
|
});
|
|
|
|
const totalBatal = computed(() => {
|
|
const item = statusAntrianData.value.find(d => d.statust === 'Batal');
|
|
return item?.jumlah || 0;
|
|
});
|
|
|
|
const totalAll = computed(() => {
|
|
return totalBelum.value + totalSelesai.value + totalTunda.value + totalBatal.value;
|
|
});
|
|
|
|
// Buka modal pendaftaran
|
|
const openModal = () => {
|
|
showModal.value = true;
|
|
};
|
|
|
|
const handleModalSuccess = () => {
|
|
// Refresh data dashboard setelah pendaftaran berhasil
|
|
fetchStatusAntrian();
|
|
fetchKategoriAntrian();
|
|
fetchAntrianPerHari();
|
|
fetchAntrianPerSpesialis();
|
|
fetchAntrianPerSubspesialis();
|
|
console.log('Pendaftaran berhasil');
|
|
};
|
|
|
|
// Data dummy untuk antrian operasi berdasarkan status
|
|
// Dihapus karena sudah menggunakan API
|
|
|
|
// Data untuk Pie Chart - Status Antrian
|
|
const pieChartOptions = ref({
|
|
chart: {
|
|
type: 'pie',
|
|
height: 350
|
|
},
|
|
labels: ['Belum', 'Selesai', 'Tunda', 'Batal'],
|
|
colors: ['#4C71CF', '#2FA4A9', '#F06D02', '#EF4444'],
|
|
legend: {
|
|
position: 'bottom'
|
|
},
|
|
dataLabels: {
|
|
enabled: true,
|
|
formatter: function (val: number) {
|
|
return Math.round(val) + '%'
|
|
}
|
|
},
|
|
responsive: [{
|
|
breakpoint: 480,
|
|
options: {
|
|
chart: {
|
|
width: 300
|
|
},
|
|
legend: {
|
|
position: 'bottom'
|
|
}
|
|
}
|
|
}]
|
|
});
|
|
|
|
const pieChartSeries = computed(() => {
|
|
return [
|
|
totalBelum.value,
|
|
totalSelesai.value,
|
|
totalTunda.value,
|
|
totalBatal.value
|
|
];
|
|
});
|
|
|
|
// Data untuk Pie Chart - Kategori Antrian (computed untuk dynamic labels)
|
|
const pieKategoriChartOptions = computed(() => ({
|
|
chart: {
|
|
type: 'pie',
|
|
height: 350
|
|
},
|
|
labels: kategoriAntrianData.value.map(item => item.kategori.split('-')[1]?.trim() ),
|
|
colors: ['#4C71CF', '#2FA4A9', '#F06D02', '#EF4444', '#9C27B0', '#E91E63', '#00BCD4', '#4CAF50'],
|
|
legend: {
|
|
position: 'bottom'
|
|
},
|
|
dataLabels: {
|
|
enabled: true,
|
|
formatter: function (val: number) {
|
|
return Math.round(val) + '%'
|
|
}
|
|
},
|
|
responsive: [{
|
|
breakpoint: 480,
|
|
options: {
|
|
chart: {
|
|
width: 300
|
|
},
|
|
legend: {
|
|
position: 'bottom'
|
|
}
|
|
}
|
|
}]
|
|
}));
|
|
|
|
const pieKategoriChartSeries = computed(() => {
|
|
return kategoriAntrianData.value.map(item => item.jumlah);
|
|
});
|
|
|
|
// Data untuk Column Chart - Antrian Per Hari dalam 1 Bulan
|
|
const lineChartOptions = computed(() => {
|
|
const monthName = months[selectedMonth.value].text.substring(0, 3);
|
|
|
|
// Get categories from API data or generate default
|
|
const categories = antrianPerHariData.value.length > 0
|
|
? antrianPerHariData.value.map(item => {
|
|
const date = new Date(item.TanggalDaftar);
|
|
return `${date.getDate()} ${monthName}`;
|
|
})
|
|
: [];
|
|
|
|
return {
|
|
chart: {
|
|
type: 'bar',
|
|
height: 350,
|
|
stacked: true,
|
|
toolbar: {
|
|
show: true
|
|
},
|
|
zoom: {
|
|
enabled: true
|
|
}
|
|
},
|
|
colors: ['#4C71CF', '#2FA4A9', '#F06D02', '#EF4444'],
|
|
plotOptions: {
|
|
bar: {
|
|
horizontal: false,
|
|
columnWidth: '55%',
|
|
borderRadius: 4
|
|
}
|
|
},
|
|
dataLabels: {
|
|
enabled: false
|
|
},
|
|
stroke: {
|
|
show: true,
|
|
width: 2,
|
|
colors: ['transparent']
|
|
},
|
|
xaxis: {
|
|
categories: categories,
|
|
title: {
|
|
text: 'Tanggal'
|
|
}
|
|
},
|
|
yaxis: {
|
|
title: {
|
|
text: 'Jumlah Antrian'
|
|
}
|
|
},
|
|
legend: {
|
|
position: 'top',
|
|
horizontalAlign: 'left'
|
|
},
|
|
fill: {
|
|
opacity: 1
|
|
},
|
|
tooltip: {
|
|
shared: true,
|
|
intersect: false,
|
|
y: {
|
|
formatter: function (val: number) {
|
|
return val + ' antrian'
|
|
}
|
|
}
|
|
}
|
|
};
|
|
});
|
|
|
|
const lineChartSeries = computed(() => {
|
|
// If no data from API, return empty series
|
|
if (antrianPerHariData.value.length === 0) {
|
|
return [
|
|
{ name: 'Belum', data: [] },
|
|
{ name: 'Selesai', data: [] },
|
|
{ name: 'Tunda', data: [] },
|
|
{ name: 'Batal', data: [] }
|
|
];
|
|
}
|
|
|
|
// Map data from API
|
|
return [
|
|
{
|
|
name: 'Belum',
|
|
data: antrianPerHariData.value.map(item => item.Belum)
|
|
},
|
|
{
|
|
name: 'Selesai',
|
|
data: antrianPerHariData.value.map(item => item.Selesai)
|
|
},
|
|
{
|
|
name: 'Tunda',
|
|
data: antrianPerHariData.value.map(item => item.Tunda)
|
|
},
|
|
{
|
|
name: 'Batal',
|
|
data: antrianPerHariData.value.map(item => item.Batal)
|
|
}
|
|
];
|
|
});
|
|
|
|
// Data antrian per spesialis - populated from API
|
|
const antrianPerSpesialis = ref<Array<{ spesialis: string; total: number; belum: number; selesai: number; tunda: number; batal: number }>>([]);
|
|
|
|
// Data antrian per subspesialis - populated from API
|
|
const antrianPerSubspesialis = ref<Array<{ spesialis: string; subspesialis: string; total: number; belum: number; selesai: number; tunda: number; batal: number }>>([]);
|
|
|
|
// Chart options untuk Antrian Per Spesialis
|
|
const spesialisChartOptions = computed(() => ({
|
|
chart: {
|
|
type: 'bar',
|
|
height: 400,
|
|
stacked: true,
|
|
toolbar: {
|
|
show: true
|
|
}
|
|
},
|
|
colors: ['#4C71CF', '#2FA4A9', '#F06D02', '#EF4444'],
|
|
plotOptions: {
|
|
bar: {
|
|
horizontal: true,
|
|
borderRadius: 6,
|
|
dataLabels: {
|
|
total: {
|
|
enabled: true,
|
|
style: {
|
|
fontSize: '12px',
|
|
fontWeight: 600
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
dataLabels: {
|
|
enabled: false
|
|
},
|
|
stroke: {
|
|
show: true,
|
|
width: 1,
|
|
colors: ['#fff']
|
|
},
|
|
xaxis: {
|
|
categories: antrianPerSpesialis.value.map(item => item.spesialis),
|
|
title: {
|
|
text: 'Jumlah Antrian'
|
|
}
|
|
},
|
|
yaxis: {
|
|
title: {
|
|
text: 'Spesialis'
|
|
}
|
|
},
|
|
legend: {
|
|
position: 'top',
|
|
horizontalAlign: 'left',
|
|
offsetX: 40
|
|
},
|
|
fill: {
|
|
opacity: 1
|
|
},
|
|
tooltip: {
|
|
y: {
|
|
formatter: function (val: number) {
|
|
return val + ' antrian'
|
|
}
|
|
}
|
|
}
|
|
}));
|
|
|
|
const spesialisChartSeries = computed(() => [
|
|
{
|
|
name: 'Belum',
|
|
data: antrianPerSpesialis.value.map(item => item.belum)
|
|
},
|
|
{
|
|
name: 'Selesai',
|
|
data: antrianPerSpesialis.value.map(item => item.selesai)
|
|
},
|
|
{
|
|
name: 'Tunda',
|
|
data: antrianPerSpesialis.value.map(item => item.tunda)
|
|
},
|
|
{
|
|
name: 'Batal',
|
|
data: antrianPerSpesialis.value.map(item => item.batal)
|
|
}
|
|
]);
|
|
|
|
// Chart options untuk Antrian Per Subspesialis
|
|
const subspesialisChartOptions = computed(() => ({
|
|
chart: {
|
|
type: 'bar',
|
|
height: 400,
|
|
stacked: true,
|
|
toolbar: {
|
|
show: true
|
|
}
|
|
},
|
|
colors: ['#4C71CF', '#2FA4A9', '#F06D02', '#EF4444'],
|
|
plotOptions: {
|
|
bar: {
|
|
horizontal: true,
|
|
borderRadius: 6,
|
|
dataLabels: {
|
|
total: {
|
|
enabled: true,
|
|
style: {
|
|
fontSize: '11px',
|
|
fontWeight: 600
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
dataLabels: {
|
|
enabled: false
|
|
},
|
|
stroke: {
|
|
show: true,
|
|
width: 1,
|
|
colors: ['#fff']
|
|
},
|
|
xaxis: {
|
|
categories: antrianPerSubspesialis.value.map(item => `${item.subspesialis} (${item.spesialis})`),
|
|
title: {
|
|
text: 'Jumlah Antrian'
|
|
}
|
|
},
|
|
yaxis: {
|
|
title: {
|
|
text: 'Subspesialis'
|
|
},
|
|
labels: {
|
|
style: {
|
|
fontSize: '11px'
|
|
}
|
|
}
|
|
},
|
|
legend: {
|
|
position: 'top',
|
|
horizontalAlign: 'left',
|
|
offsetX: 40
|
|
},
|
|
fill: {
|
|
opacity: 1
|
|
},
|
|
tooltip: {
|
|
y: {
|
|
formatter: function (val: number) {
|
|
return val + ' antrian'
|
|
}
|
|
}
|
|
}
|
|
}));
|
|
|
|
const subspesialisChartSeries = computed(() => [
|
|
{
|
|
name: 'Belum',
|
|
data: antrianPerSubspesialis.value.map(item => item.belum)
|
|
},
|
|
{
|
|
name: 'Selesai',
|
|
data: antrianPerSubspesialis.value.map(item => item.selesai)
|
|
},
|
|
{
|
|
name: 'Tunda',
|
|
data: antrianPerSubspesialis.value.map(item => item.tunda)
|
|
},
|
|
{
|
|
name: 'Batal',
|
|
data: antrianPerSubspesialis.value.map(item => item.batal)
|
|
}
|
|
]);
|
|
|
|
// Watch untuk refetch data saat bulan atau tahun berubah
|
|
watch([selectedMonth, selectedYear], () => {
|
|
if (hasDashboardAccess.value) {
|
|
fetchStatusAntrian();
|
|
fetchKategoriAntrian();
|
|
fetchAntrianPerHari();
|
|
fetchAntrianPerSpesialis();
|
|
fetchAntrianPerSubspesialis();
|
|
}
|
|
});
|
|
|
|
// Watch for dashboard access changes (when menu loads)
|
|
watch(hasDashboardAccess, (hasAccess) => {
|
|
if (hasAccess) {
|
|
fetchStatusAntrian();
|
|
fetchKategoriAntrian();
|
|
fetchAntrianPerHari();
|
|
fetchAntrianPerSpesialis();
|
|
fetchAntrianPerSubspesialis();
|
|
}
|
|
});
|
|
|
|
// Fetch data saat component mounted
|
|
onMounted(() => {
|
|
if (hasDashboardAccess.value) {
|
|
fetchStatusAntrian();
|
|
fetchKategoriAntrian();
|
|
fetchAntrianPerHari();
|
|
fetchAntrianPerSpesialis();
|
|
fetchAntrianPerSubspesialis();
|
|
}
|
|
});
|
|
|
|
definePageMeta({
|
|
middleware: 'auth',
|
|
pageTitle: 'Dashboard',
|
|
breadcrumbs: [{ text: 'Dashboard' }]
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<!-- Loading State - Menu Belum Ready -->
|
|
<v-row v-if="!menuStore.menuFetched">
|
|
<div> </div>
|
|
</v-row>
|
|
|
|
<!-- Welcome Card - Limited Access (Setelah Menu Ready) -->
|
|
<v-row v-else-if="!hasDashboardAccess">
|
|
<!-- Main Welcome Card -->
|
|
<v-col cols="12">
|
|
<v-card elevation="10" class="overflow-hidden">
|
|
<v-card-item class="pa-6">
|
|
<div class="d-flex align-center ga-6 flex-wrap">
|
|
<!-- Left Side - Avatar -->
|
|
<div class="flex-shrink-0">
|
|
<v-avatar size="140" class="elevation-1 bg-lightprimary">
|
|
<Icon icon="solar:user-circle-bold" height="100" class="text-primary" />
|
|
</v-avatar>
|
|
</div>
|
|
|
|
<!-- Right Side - Content -->
|
|
<div class="flex-grow-1">
|
|
|
|
<h1 class="text-h3 font-weight-bold text-primary mb-2">
|
|
👋 Selamat Datang, {{ user?.name || 'User' }}!
|
|
</h1>
|
|
<p class="text-h6 text-medium-emphasis mb-1">
|
|
Sistem Informasi Antrean Operasi RSSA
|
|
</p>
|
|
<div class="d-flex align-center ga-2 text-medium-emphasis mb-3">
|
|
<Icon icon="solar:calendar-bold" height="18" class="text-primary" />
|
|
<span class="text-body-1">
|
|
{{ new Date().toLocaleDateString('id-ID', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }) }}
|
|
</span>
|
|
</div>
|
|
<div class="d-flex align-center ga-2 flex-wrap">
|
|
<v-chip size="small" color="success" variant="flat" class="font-weight-bold px-3">
|
|
<Icon icon="solar:shield-check-bold" height="16" class="text-white mr-1" />
|
|
Terautentikasi
|
|
</v-chip>
|
|
<v-chip v-if="user?.client_roles && user.client_roles.length > 0"
|
|
size="small"
|
|
color="primary"
|
|
variant="outlined"
|
|
class="font-weight-medium px-3">
|
|
<Icon icon="solar:user-id-bold" height="16" class="text-primary mr-1" />
|
|
{{ user.client_roles.join(', ') }}
|
|
</v-chip>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</v-card-item>
|
|
</v-card>
|
|
</v-col>
|
|
</v-row>
|
|
|
|
<!-- Full Dashboard - With Access -->
|
|
<template v-else>
|
|
<v-row class="mb-4">
|
|
<v-col cols="12">
|
|
</v-col>
|
|
<v-col cols="12">
|
|
<v-card elevation="0" class="bg-transparent">
|
|
<v-card-item class="pa-0">
|
|
<div class="d-flex align-center justify-space-between flex-wrap ga-3">
|
|
<div class="d-flex align-center ga-3 flex-wrap">
|
|
<div class="d-flex align-center ga-2">
|
|
<v-select
|
|
v-model="selectedMonth"
|
|
:items="months"
|
|
item-title="text"
|
|
item-value="value"
|
|
density="compact"
|
|
variant="outlined"
|
|
hide-details
|
|
style="min-width: 140px;"
|
|
prepend-inner-icon="mdi-calendar-month"
|
|
></v-select>
|
|
<v-select
|
|
v-model="selectedYear"
|
|
:items="years"
|
|
density="compact"
|
|
variant="outlined"
|
|
hide-details
|
|
style="min-width: 100px;"
|
|
></v-select>
|
|
</div>
|
|
</div>
|
|
<v-btn
|
|
color="primary"
|
|
size="large"
|
|
elevation="2"
|
|
@click="openModal"
|
|
>
|
|
<Icon icon="solar:add-circle-bold" height="20" class="mr-2" />
|
|
Pendaftaran Operasi Baru
|
|
</v-btn>
|
|
</div>
|
|
</v-card-item>
|
|
</v-card>
|
|
</v-col>
|
|
</v-row>
|
|
|
|
<v-row>
|
|
<!-- Status Cards -->
|
|
<v-col cols="12" sm="6" md="3">
|
|
<v-card elevation="10" class="bg-primary" style="background: linear-gradient(135deg, #708DD9 0%, #4C71CF 100%);">
|
|
<v-card-item>
|
|
<div v-if="loadingStatusAntrian" class="d-flex ga-3 align-center">
|
|
<v-skeleton-loader type="avatar" class="bg-transparent white-skeleton"></v-skeleton-loader>
|
|
<div class="flex-grow-1">
|
|
<v-skeleton-loader type="text" class="bg-transparent white-skeleton"></v-skeleton-loader>
|
|
<v-skeleton-loader type="heading" class="bg-transparent white-skeleton"></v-skeleton-loader>
|
|
</div>
|
|
</div>
|
|
<div v-else class="d-flex ga-3 align-center">
|
|
<v-avatar size="56" class="rounded-md" style="background: rgba(255,255,255,0.2);">
|
|
<Icon icon="solar:hourglass-line-outline" class="text-white" height="28" />
|
|
</v-avatar>
|
|
<div>
|
|
<h6 class="text-subtitle-1 text-white opacity-80 mb-1">Belum</h6>
|
|
<h3 class="text-h2 font-weight-bold text-white">{{ totalBelum }}</h3>
|
|
</div>
|
|
</div>
|
|
</v-card-item>
|
|
</v-card>
|
|
</v-col>
|
|
|
|
<v-col cols="12" sm="6" md="3">
|
|
<v-card elevation="10" class="bg-success" style="background: linear-gradient(135deg, #59B6BA 0%, #2FA4A9 100%);">
|
|
<v-card-item>
|
|
<div v-if="loadingStatusAntrian" class="d-flex ga-3 align-center">
|
|
<v-skeleton-loader type="avatar" class="bg-transparent white-skeleton"></v-skeleton-loader>
|
|
<div class="flex-grow-1">
|
|
<v-skeleton-loader type="text" class="bg-transparent white-skeleton"></v-skeleton-loader>
|
|
<v-skeleton-loader type="heading" class="bg-transparent white-skeleton"></v-skeleton-loader>
|
|
</div>
|
|
</div>
|
|
<div v-else class="d-flex ga-3 align-center">
|
|
<v-avatar size="56" class="rounded-md" style="background: rgba(255,255,255,0.2);">
|
|
<Icon icon="solar:check-circle-outline" class="text-white" height="28" />
|
|
</v-avatar>
|
|
<div>
|
|
<h6 class="text-subtitle-1 text-white opacity-80 mb-1">Selesai</h6>
|
|
<h3 class="text-h2 font-weight-bold text-white">{{ totalSelesai }}</h3>
|
|
</div>
|
|
</div>
|
|
</v-card-item>
|
|
</v-card>
|
|
</v-col>
|
|
|
|
<v-col cols="12" sm="6" md="3">
|
|
<v-card elevation="10" class="bg-warning" style="background: linear-gradient(135deg, #F38A35 0%, #F06D02 100%);">
|
|
<v-card-item>
|
|
<div v-if="loadingStatusAntrian" class="d-flex ga-3 align-center">
|
|
<v-skeleton-loader type="avatar" class="bg-transparent white-skeleton"></v-skeleton-loader>
|
|
<div class="flex-grow-1">
|
|
<v-skeleton-loader type="text" class="bg-transparent white-skeleton"></v-skeleton-loader>
|
|
<v-skeleton-loader type="heading" class="bg-transparent white-skeleton"></v-skeleton-loader>
|
|
</div>
|
|
</div>
|
|
<div v-else class="d-flex ga-3 align-center">
|
|
<v-avatar size="56" class="rounded-md" style="background: rgba(255,255,255,0.2);">
|
|
<Icon icon="solar:pause-circle-outline" class="text-white" height="28" />
|
|
</v-avatar>
|
|
<div>
|
|
<h6 class="text-subtitle-1 text-white opacity-80 mb-1">Tunda</h6>
|
|
<h3 class="text-h2 font-weight-bold text-white">{{ totalTunda }}</h3>
|
|
</div>
|
|
</div>
|
|
</v-card-item>
|
|
</v-card>
|
|
</v-col>
|
|
|
|
<v-col cols="12" sm="6" md="3">
|
|
<v-card elevation="10" class="bg-error" style="background: linear-gradient(135deg, #F26969 0%, #EF4444 100%);">
|
|
<v-card-item>
|
|
<div v-if="loadingStatusAntrian" class="d-flex ga-3 align-center">
|
|
<v-skeleton-loader type="avatar" class="bg-transparent white-skeleton"></v-skeleton-loader>
|
|
<div class="flex-grow-1">
|
|
<v-skeleton-loader type="text" class="bg-transparent white-skeleton"></v-skeleton-loader>
|
|
<v-skeleton-loader type="heading" class="bg-transparent white-skeleton"></v-skeleton-loader>
|
|
</div>
|
|
</div>
|
|
<div v-else class="d-flex ga-3 align-center">
|
|
<v-avatar size="56" class="rounded-md" style="background: rgba(255,255,255,0.2);">
|
|
<Icon icon="solar:close-circle-outline" class="text-white" height="28" />
|
|
</v-avatar>
|
|
<div>
|
|
<h6 class="text-subtitle-1 text-white opacity-80 mb-1">Batal</h6>
|
|
<h3 class="text-h2 font-weight-bold text-white">{{ totalBatal }}</h3>
|
|
</div>
|
|
</div>
|
|
</v-card-item>
|
|
</v-card>
|
|
</v-col>
|
|
|
|
<!-- Pie Chart - Status Antrian -->
|
|
<v-col cols="12" lg="6">
|
|
<v-card elevation="10">
|
|
<v-card-item>
|
|
<div class="d-flex align-center justify-space-between mb-4">
|
|
<h5 class="text-h5 font-weight-bold">Perbandingan Status Antrean</h5>
|
|
<v-avatar size="40" class="rounded-md bg-lightprimary">
|
|
<Icon icon="solar:pie-chart-2-outline" class="text-primary" height="22" />
|
|
</v-avatar>
|
|
</div>
|
|
</v-card-item>
|
|
<v-divider></v-divider>
|
|
<v-card-text>
|
|
<div v-if="loadingStatusAntrian" class="d-flex justify-center align-center" style="min-height: 350px;">
|
|
<v-progress-circular indeterminate color="primary" size="64"></v-progress-circular>
|
|
</div>
|
|
<ClientOnly v-else>
|
|
<VueApexCharts
|
|
:key="`pie-status-${selectedMonth}-${selectedYear}`"
|
|
type="donut"
|
|
height="350"
|
|
:options="pieChartOptions"
|
|
:series="pieChartSeries"
|
|
></VueApexCharts>
|
|
</ClientOnly>
|
|
</v-card-text>
|
|
</v-card>
|
|
</v-col>
|
|
|
|
<!-- Pie Chart - Kategori Antrian -->
|
|
<v-col cols="12" lg="6">
|
|
<v-card elevation="10">
|
|
<v-card-item>
|
|
<div class="d-flex align-center justify-space-between mb-4">
|
|
<h5 class="text-h5 font-weight-bold">Perbandingan Kategori Antrean</h5>
|
|
<v-avatar size="40" class="rounded-md bg-lightsecondary">
|
|
<Icon icon="solar:pie-chart-2-outline" class="text-secondary" height="22" />
|
|
</v-avatar>
|
|
</div>
|
|
</v-card-item>
|
|
<v-divider></v-divider>
|
|
<v-card-text>
|
|
<div v-if="loadingKategoriAntrian" class="d-flex justify-center align-center" style="min-height: 350px;">
|
|
<v-progress-circular indeterminate color="secondary" size="64"></v-progress-circular>
|
|
</div>
|
|
<ClientOnly v-else>
|
|
<VueApexCharts
|
|
:key="`pie-kategori-${selectedMonth}-${selectedYear}`"
|
|
type="donut"
|
|
height="350"
|
|
:options="pieKategoriChartOptions"
|
|
:series="pieKategoriChartSeries"
|
|
></VueApexCharts>
|
|
</ClientOnly>
|
|
</v-card-text>
|
|
</v-card>
|
|
</v-col>
|
|
|
|
<!-- Line Chart - Antrian Per Hari -->
|
|
<v-col cols="12" lg="12">
|
|
<v-card elevation="10">
|
|
<v-card-item>
|
|
<div class="d-flex align-center justify-space-between mb-4">
|
|
<h5 class="text-h5 font-weight-bold">Antrean Per Hari ({{ months[selectedMonth].text }} {{ selectedYear }})</h5>
|
|
<v-avatar size="40" class="rounded-md bg-lightsecondary">
|
|
<Icon icon="solar:chart-outline" class="text-secondary" height="22" />
|
|
</v-avatar>
|
|
</div>
|
|
</v-card-item>
|
|
<v-divider></v-divider>
|
|
<v-card-text>
|
|
<div v-if="loadingAntrianPerHari" class="d-flex justify-center align-center" style="min-height: 350px;">
|
|
<v-progress-circular indeterminate color="primary" size="64"></v-progress-circular>
|
|
</div>
|
|
<ClientOnly v-else>
|
|
<VueApexCharts
|
|
:key="`column-${selectedMonth}-${selectedYear}`"
|
|
type="bar"
|
|
height="350"
|
|
:options="lineChartOptions"
|
|
:series="lineChartSeries"
|
|
></VueApexCharts>
|
|
</ClientOnly>
|
|
</v-card-text>
|
|
</v-card>
|
|
</v-col>
|
|
|
|
<!-- Chart Antrian Per Spesialis -->
|
|
<v-col cols="12" lg="6">
|
|
<v-card elevation="10">
|
|
<v-card-item>
|
|
<div class="d-flex align-center justify-space-between mb-4">
|
|
<h5 class="text-h5 font-weight-bold">Antrean Per Spesialis</h5>
|
|
<v-avatar size="40" class="rounded-md bg-lightprimary">
|
|
<Icon icon="solar:chart-square-bold" class="text-primary" height="22" />
|
|
</v-avatar>
|
|
</div>
|
|
</v-card-item>
|
|
<v-divider></v-divider>
|
|
<v-card-text>
|
|
<div v-if="loadingAntrianPerSpesialis" class="d-flex justify-center align-center" style="min-height: 400px;">
|
|
<v-progress-circular indeterminate color="primary" size="64"></v-progress-circular>
|
|
</div>
|
|
<div v-else-if="antrianPerSpesialis.length === 0" class="d-flex justify-center align-center" style="min-height: 400px;">
|
|
<div class="text-center">
|
|
<Icon icon="solar:chart-square-outline" height="64" class="text-medium-emphasis mb-4" />
|
|
<p class="text-body-1 text-medium-emphasis">Tidak ada data antrian</p>
|
|
</div>
|
|
</div>
|
|
<ClientOnly v-else>
|
|
<VueApexCharts
|
|
:key="`spesialis-${selectedMonth}-${selectedYear}`"
|
|
type="bar"
|
|
height="400"
|
|
:options="spesialisChartOptions"
|
|
:series="spesialisChartSeries"
|
|
></VueApexCharts>
|
|
</ClientOnly>
|
|
</v-card-text>
|
|
</v-card>
|
|
</v-col>
|
|
|
|
<!-- Chart Antrian Per Subspesialis -->
|
|
<v-col cols="12" lg="6">
|
|
<v-card elevation="10">
|
|
<v-card-item>
|
|
<div class="d-flex align-center justify-space-between mb-4">
|
|
<h5 class="text-h5 font-weight-bold">Antrean Per Subspesialis</h5>
|
|
<v-avatar size="40" class="rounded-md bg-lightsecondary">
|
|
<Icon icon="solar:chart-square-bold" class="text-secondary" height="22" />
|
|
</v-avatar>
|
|
</div>
|
|
</v-card-item>
|
|
<v-divider></v-divider>
|
|
<v-card-text>
|
|
<div v-if="loadingAntrianPerSubspesialis" class="d-flex justify-center align-center" style="min-height: 400px;">
|
|
<v-progress-circular indeterminate color="secondary" size="64"></v-progress-circular>
|
|
</div>
|
|
<div v-else-if="antrianPerSubspesialis.length === 0" class="d-flex justify-center align-center" style="min-height: 400px;">
|
|
<div class="text-center">
|
|
<Icon icon="solar:chart-square-outline" height="64" class="text-medium-emphasis mb-4" />
|
|
<p class="text-body-1 text-medium-emphasis">Tidak ada data antrian</p>
|
|
</div>
|
|
</div>
|
|
<ClientOnly v-else>
|
|
<VueApexCharts
|
|
:key="`subspesialis-${selectedMonth}-${selectedYear}`"
|
|
type="bar"
|
|
height="400"
|
|
:options="subspesialisChartOptions"
|
|
:series="subspesialisChartSeries"
|
|
></VueApexCharts>
|
|
</ClientOnly>
|
|
</v-card-text>
|
|
</v-card>
|
|
</v-col>
|
|
</v-row>
|
|
</template>
|
|
|
|
<!-- Modal Pendaftaran -->
|
|
<ModalPendaftaran
|
|
v-model="showModal"
|
|
mode="create"
|
|
@success="handleModalSuccess"
|
|
/>
|
|
</template>
|