192 lines
8.8 KiB
Vue
192 lines
8.8 KiB
Vue
<script setup lang="ts">
|
|
import { ref } from 'vue';
|
|
import { Icon } from '@iconify/vue';
|
|
import BaseBreadcrumb from '@/components/shared/BaseBreadcrumb.vue';
|
|
|
|
|
|
// Data dummy untuk antrian operasi
|
|
const totalActive = ref(45);
|
|
const totalInactive = ref(12);
|
|
const totalAll = ref(57);
|
|
|
|
// Data antrian per spesialis
|
|
const antrianPerSpesialis = ref([
|
|
{ spesialis: 'Bedah Umum', total: 15, active: 12, inactive: 3 },
|
|
{ spesialis: 'Bedah Ortopedi', total: 10, active: 8, inactive: 2 },
|
|
{ spesialis: 'Bedah Saraf', total: 8, active: 7, inactive: 1 },
|
|
{ spesialis: 'Bedah Jantung', total: 12, active: 10, inactive: 2 },
|
|
{ spesialis: 'Bedah Plastik', total: 7, active: 5, inactive: 2 },
|
|
{ spesialis: 'Bedah Urologi', total: 5, active: 3, inactive: 2 }
|
|
]);
|
|
|
|
// Data antrian per subspesialis
|
|
const antrianPerSubspesialis = ref([
|
|
{ spesialis: 'Bedah Umum', subspesialis: 'Digestif', total: 8, active: 7, inactive: 1 },
|
|
{ spesialis: 'Bedah Umum', subspesialis: 'Onkologi', total: 7, active: 5, inactive: 2 },
|
|
{ spesialis: 'Bedah Ortopedi', subspesialis: 'Traumatologi', total: 6, active: 5, inactive: 1 },
|
|
{ spesialis: 'Bedah Ortopedi', subspesialis: 'Spine', total: 4, active: 3, inactive: 1 },
|
|
{ spesialis: 'Bedah Saraf', subspesialis: 'Tumor', total: 5, active: 4, inactive: 1 },
|
|
{ spesialis: 'Bedah Saraf', subspesialis: 'Vaskular', total: 3, active: 3, inactive: 0 },
|
|
{ spesialis: 'Bedah Jantung', subspesialis: 'Dewasa', total: 7, active: 6, inactive: 1 },
|
|
{ spesialis: 'Bedah Jantung', subspesialis: 'Anak', total: 5, active: 4, inactive: 1 }
|
|
]);
|
|
|
|
const searchSpesialis = ref('');
|
|
const searchSubspesialis = ref('');
|
|
|
|
const headersSpesialis = [
|
|
{ title: 'Spesialis', key: 'spesialis' },
|
|
{ title: 'Total', key: 'total', align: 'center' as const },
|
|
{ title: 'Active', key: 'active', align: 'center' as const },
|
|
{ title: 'Inactive', key: 'inactive', align: 'center' as const }
|
|
];
|
|
|
|
const headersSubspesialis = [
|
|
{ title: 'Spesialis', key: 'spesialis' },
|
|
{ title: 'Subspesialis', key: 'subspesialis' },
|
|
{ title: 'Total', key: 'total', align: 'center' as const },
|
|
{ title: 'Active', key: 'active', align: 'center' as const },
|
|
{ title: 'Inactive', key: 'inactive', align: 'center' as const }
|
|
];
|
|
const page = ref({ title: 'Dashboard' });
|
|
const breadcrumbs = ref([
|
|
{
|
|
text: 'Dashboard',
|
|
disabled: false,
|
|
href: '#'
|
|
}
|
|
]);
|
|
</script>
|
|
|
|
<template>
|
|
<v-row>
|
|
<!-- Score Cards -->
|
|
<v-col cols="12">
|
|
<BaseBreadcrumb :title="page.title" :breadcrumbs="breadcrumbs"></BaseBreadcrumb>
|
|
</v-col>
|
|
<v-col cols="12" md="4">
|
|
<v-card elevation="10">
|
|
<v-card-item>
|
|
<div class="d-flex ga-3 align-center">
|
|
<v-avatar size="48" class="rounded-md bg-lightsuccess">
|
|
<Icon icon="solar:checklist-outline" class="text-success" height="25" />
|
|
</v-avatar>
|
|
<div>
|
|
<h6 class="text-subtitle-2 text-medium-emphasis mb-1">Total Antrian Aktif</h6>
|
|
<h3 class="text-h3 font-weight-bold">{{ totalActive }}</h3>
|
|
</div>
|
|
</div>
|
|
</v-card-item>
|
|
</v-card>
|
|
</v-col>
|
|
|
|
<v-col cols="12" md="4">
|
|
<v-card elevation="10">
|
|
<v-card-item>
|
|
<div class="d-flex ga-3 align-center">
|
|
<v-avatar size="48" class="rounded-md bg-lighterror">
|
|
<Icon icon="solar:close-circle-outline" class="text-error" height="25" />
|
|
</v-avatar>
|
|
<div>
|
|
<h6 class="text-subtitle-2 text-medium-emphasis mb-1">Total Antrian Tidak Aktif</h6>
|
|
<h3 class="text-h3 font-weight-bold">{{ totalInactive }}</h3>
|
|
</div>
|
|
</div>
|
|
</v-card-item>
|
|
</v-card>
|
|
</v-col>
|
|
|
|
<v-col cols="12" md="4">
|
|
<v-card elevation="10">
|
|
<v-card-item>
|
|
<div class="d-flex ga-3 align-center">
|
|
<v-avatar size="48" class="rounded-md bg-lightsecondary">
|
|
<Icon icon="solar:list-check-outline" class="text-secondary" height="25" />
|
|
</v-avatar>
|
|
<div>
|
|
<h6 class="text-subtitle-2 text-medium-emphasis mb-1">Total Semua Antrian</h6>
|
|
<h3 class="text-h3 font-weight-bold">{{ totalAll }}</h3>
|
|
</div>
|
|
</div>
|
|
</v-card-item>
|
|
</v-card>
|
|
</v-col>
|
|
|
|
<!-- Table 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">Antrian Per Spesialis</h5>
|
|
<v-avatar size="40" class="rounded-md bg-lightprimary">
|
|
<Icon icon="solar:users-group-rounded-outline" class="text-primary" height="22" />
|
|
</v-avatar>
|
|
</div>
|
|
<v-text-field v-model="searchSpesialis" density="compact" placeholder="Cari spesialis..."
|
|
prepend-inner-icon="mdi-magnify" variant="outlined" hide-details clearable
|
|
class="mb-4"></v-text-field>
|
|
</v-card-item>
|
|
<v-divider></v-divider>
|
|
<v-card-text class="pa-0">
|
|
<v-data-table :headers="headersSpesialis" :items="antrianPerSpesialis" :search="searchSpesialis"
|
|
:items-per-page="10" class="border-0" hide-default-footer>
|
|
<template v-slot:item.total="{ item }">
|
|
<v-chip size="small" color="primary" variant="tonal">
|
|
{{ item.total }}
|
|
</v-chip>
|
|
</template>
|
|
<template v-slot:item.active="{ item }">
|
|
<v-chip size="small" color="success" variant="tonal">
|
|
{{ item.active }}
|
|
</v-chip>
|
|
</template>
|
|
<template v-slot:item.inactive="{ item }">
|
|
<v-chip size="small" color="error" variant="tonal">
|
|
{{ item.inactive }}
|
|
</v-chip>
|
|
</template>
|
|
</v-data-table>
|
|
</v-card-text>
|
|
</v-card>
|
|
</v-col>
|
|
|
|
<!-- Table 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">Antrian Per Subspesialis</h5>
|
|
<v-avatar size="40" class="rounded-md bg-lightsecondary">
|
|
<Icon icon="solar:users-group-two-rounded-outline" class="text-secondary" height="22" />
|
|
</v-avatar>
|
|
</div>
|
|
<v-text-field v-model="searchSubspesialis" density="compact"
|
|
placeholder="Cari spesialis atau subspesialis..." prepend-inner-icon="mdi-magnify"
|
|
variant="outlined" hide-details clearable class="mb-4"></v-text-field>
|
|
</v-card-item>
|
|
<v-divider></v-divider>
|
|
<v-card-text class="pa-0">
|
|
<v-data-table :headers="headersSubspesialis" :items="antrianPerSubspesialis"
|
|
:search="searchSubspesialis" :items-per-page="10" class="border-0" hide-default-footer>
|
|
<template v-slot:item.total="{ item }">
|
|
<v-chip size="small" color="primary" variant="tonal">
|
|
{{ item.total }}
|
|
</v-chip>
|
|
</template>
|
|
<template v-slot:item.active="{ item }">
|
|
<v-chip size="small" color="success" variant="tonal">
|
|
{{ item.active }}
|
|
</v-chip>
|
|
</template>
|
|
<template v-slot:item.inactive="{ item }">
|
|
<v-chip size="small" color="error" variant="tonal">
|
|
{{ item.inactive }}
|
|
</v-chip>
|
|
</template>
|
|
</v-data-table>
|
|
</v-card-text>
|
|
</v-card>
|
|
</v-col>
|
|
</v-row>
|
|
</template>
|