update theme blue
This commit is contained in:
bagus-arie05
+414
-170
@@ -1,126 +1,267 @@
|
||||
<!-- pages/Anjungan.vue -->
|
||||
<template>
|
||||
<div class="clinic-selection-page">
|
||||
<!-- Header -->
|
||||
<v-app-bar color=#fafbfc elevation="2">
|
||||
<v-toolbar-title class="text-h5 font-weight-bold">
|
||||
Anjungan RSSA
|
||||
</v-toolbar-title>
|
||||
<v-spacer></v-spacer>
|
||||
<v-chip color="white" >
|
||||
Pilih Klinik Tekan Tombol Hijau, Tombol Merah Penuh / Klinik Tutup
|
||||
</v-chip>
|
||||
</v-app-bar>
|
||||
<div class="anjungan-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-hospital-building</v-icon>
|
||||
</div>
|
||||
<div class="header-text">
|
||||
<h1 class="page-title">Anjungan RSSA</h1>
|
||||
<p class="page-subtitle">Pilih Klinik untuk Pendaftaran</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-right">
|
||||
<v-chip color="white" variant="flat" class="instruction-chip">
|
||||
<v-icon start size="16">mdi-information</v-icon>
|
||||
Hijau: Tersedia | Merah: Tutup/Penuh
|
||||
</v-chip>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Main Content -->
|
||||
<v-container fluid class="pa-8 mt-4">
|
||||
<v-row class="ma-4">
|
||||
<!-- Clinic Cards -->
|
||||
<v-col
|
||||
v-for="clinic in clinics"
|
||||
:key="clinic.id"
|
||||
cols="12"
|
||||
sm="6"
|
||||
md="4"
|
||||
lg="3"
|
||||
class="pa-3"
|
||||
>
|
||||
<v-card
|
||||
:class="{
|
||||
'clinic-card': true,
|
||||
'clinic-available': clinic.available,
|
||||
'clinic-closed': !clinic.available
|
||||
}"
|
||||
:disabled="!clinic.available"
|
||||
@click="selectClinic(clinic)"
|
||||
elevation="3"
|
||||
hover
|
||||
<!-- 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="selectedStatus"
|
||||
:items="statusOptions"
|
||||
label="Filter Status"
|
||||
density="compact"
|
||||
variant="outlined"
|
||||
hide-details
|
||||
clearable
|
||||
style="min-width: 160px;"
|
||||
/>
|
||||
|
||||
<v-text-field
|
||||
v-model="searchQuery"
|
||||
label="Cari Klinik"
|
||||
density="compact"
|
||||
variant="outlined"
|
||||
prepend-inner-icon="mdi-magnify"
|
||||
hide-details
|
||||
clearable
|
||||
style="min-width: 200px;"
|
||||
/>
|
||||
</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>
|
||||
</div>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
|
||||
<!-- Clinic Cards -->
|
||||
<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-hospital-marker</v-icon>
|
||||
<span>Daftar Klinik - {{ filteredClinics.length }} dari {{ totalClinics }} klinik</span>
|
||||
</v-card-title>
|
||||
|
||||
<v-card-text class="pa-6">
|
||||
<v-row>
|
||||
<v-col
|
||||
v-for="clinic in filteredClinics"
|
||||
:key="clinic.id"
|
||||
cols="12"
|
||||
sm="6"
|
||||
md="4"
|
||||
lg="3"
|
||||
class="pa-2"
|
||||
>
|
||||
<v-card-text class="text-center pa-4">
|
||||
<!-- Icon -->
|
||||
<div class="clinic-icon-wrapper mb-3">
|
||||
<v-icon
|
||||
:icon="clinic.icon"
|
||||
size="48"
|
||||
:color="clinic.available ? 'success' : 'error'"
|
||||
class="clinic-icon"
|
||||
></v-icon>
|
||||
</div>
|
||||
<v-card
|
||||
:class="{
|
||||
'clinic-card': true,
|
||||
'clinic-available': clinic.available,
|
||||
'clinic-closed': !clinic.available
|
||||
}"
|
||||
:disabled="!clinic.available"
|
||||
@click="selectClinic(clinic)"
|
||||
elevation="2"
|
||||
>
|
||||
<v-card-text class="text-center pa-4">
|
||||
<!-- Status Chip -->
|
||||
<div class="mb-3">
|
||||
<v-chip
|
||||
:color="clinic.available ? 'success' : 'error'"
|
||||
size="small"
|
||||
variant="flat"
|
||||
>
|
||||
{{ clinic.available ? 'TERSEDIA' : 'TUTUP' }}
|
||||
</v-chip>
|
||||
</div>
|
||||
|
||||
<!-- Clinic Name -->
|
||||
<h3 class="text-h6 font-weight-bold mb-2" :class="clinic.available ? 'text-success' : 'text-error'">
|
||||
{{ clinic.name }}
|
||||
</h3>
|
||||
<!-- Icon -->
|
||||
<div class="clinic-icon-wrapper mb-3">
|
||||
<v-icon
|
||||
:icon="clinic.icon"
|
||||
size="40"
|
||||
:color="clinic.available ? 'success' : 'error'"
|
||||
></v-icon>
|
||||
</div>
|
||||
|
||||
<!-- Subtitle -->
|
||||
<p v-if="clinic.subtitle" class="text-caption text-grey-darken-1 mb-2">
|
||||
{{ clinic.subtitle }}
|
||||
</p>
|
||||
<!-- Clinic Name -->
|
||||
<h3 class="text-h6 font-weight-bold mb-2">
|
||||
{{ clinic.name }}
|
||||
</h3>
|
||||
|
||||
<!-- Shift Info -->
|
||||
<div class="shift-info">
|
||||
<v-chip
|
||||
size="small"
|
||||
:color="clinic.available ? 'success' : 'error'"
|
||||
variant="outlined"
|
||||
class="mb-1"
|
||||
>
|
||||
{{ clinic.shift }}
|
||||
</v-chip>
|
||||
<br>
|
||||
<span class="text-caption text-grey-darken-1">
|
||||
{{ clinic.schedule }}
|
||||
</span>
|
||||
</div>
|
||||
<!-- Subtitle -->
|
||||
<p v-if="clinic.subtitle" class="text-caption text-grey-darken-1 mb-2">
|
||||
{{ clinic.subtitle }}
|
||||
</p>
|
||||
|
||||
<!-- Status -->
|
||||
<div v-if="!clinic.available" class="mt-2">
|
||||
<v-chip
|
||||
size="small"
|
||||
color="error"
|
||||
variant="flat"
|
||||
prepend-icon="mdi-clock-alert"
|
||||
>
|
||||
{{ clinic.status }}
|
||||
</v-chip>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
<!-- Shift Info -->
|
||||
<div class="shift-info">
|
||||
<v-chip
|
||||
size="small"
|
||||
:color="clinic.available ? 'info' : 'error'"
|
||||
variant="outlined"
|
||||
class="mb-2"
|
||||
>
|
||||
{{ clinic.shift }}
|
||||
</v-chip>
|
||||
<br>
|
||||
<span v-if="clinic.schedule" class="text-caption text-grey-darken-1">
|
||||
{{ clinic.schedule }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Action Button -->
|
||||
<div class="mt-3">
|
||||
<v-btn
|
||||
v-if="clinic.available"
|
||||
color="success"
|
||||
variant="flat"
|
||||
size="small"
|
||||
block
|
||||
>
|
||||
Pilih Klinik
|
||||
</v-btn>
|
||||
<v-btn
|
||||
v-else
|
||||
color="error"
|
||||
variant="outlined"
|
||||
size="small"
|
||||
disabled
|
||||
block
|
||||
>
|
||||
Tidak Tersedia
|
||||
</v-btn>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<!-- Empty State -->
|
||||
<div v-if="filteredClinics.length === 0" class="text-center py-8">
|
||||
<v-icon size="64" color="grey-lighten-1">mdi-hospital-marker-outline</v-icon>
|
||||
<h3 class="text-h6 mt-4 text-grey-darken-1">Tidak ada klinik 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>
|
||||
|
||||
<!-- Selection Dialog -->
|
||||
<v-dialog v-model="showDialog" max-width="400">
|
||||
<v-dialog v-model="showDialog" max-width="500">
|
||||
<v-card>
|
||||
<v-card-title class="text-h5">
|
||||
<v-card-title class="d-flex align-center bg-primary text-white">
|
||||
<v-icon class="mr-2">mdi-check-circle</v-icon>
|
||||
Konfirmasi Pilihan
|
||||
</v-card-title>
|
||||
<v-card-text>
|
||||
Anda telah memilih klinik <strong>{{ selectedClinic?.name }}</strong>.
|
||||
Lanjutkan untuk mendaftar?
|
||||
|
||||
<v-card-text class="pa-6" v-if="selectedClinic">
|
||||
<div class="text-center">
|
||||
<div class="mb-3">
|
||||
<v-icon :icon="selectedClinic.icon" size="48" color="primary"></v-icon>
|
||||
</div>
|
||||
<h3 class="text-h5 font-weight-bold mb-2">{{ selectedClinic.name }}</h3>
|
||||
<p v-if="selectedClinic.subtitle" class="text-body-1 text-grey-darken-1 mb-3">
|
||||
{{ selectedClinic.subtitle }}
|
||||
</p>
|
||||
|
||||
<v-divider class="my-4"></v-divider>
|
||||
|
||||
<div class="text-left">
|
||||
<p><strong>Shift:</strong> {{ selectedClinic.shift }}</p>
|
||||
<p v-if="selectedClinic.schedule"><strong>Jadwal:</strong> {{ selectedClinic.schedule }}</p>
|
||||
<p><strong>Status:</strong> <span class="text-success">Tersedia</span></p>
|
||||
</div>
|
||||
</div>
|
||||
</v-card-text>
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn text @click="showDialog = false">
|
||||
|
||||
<v-card-actions class="pa-4">
|
||||
<v-spacer />
|
||||
<v-btn @click="showDialog = false" variant="text">
|
||||
Batal
|
||||
</v-btn>
|
||||
<v-btn color="primary" @click="proceedToRegistration">
|
||||
<v-btn
|
||||
color="primary"
|
||||
@click="proceedToRegistration"
|
||||
variant="flat"
|
||||
>
|
||||
Lanjutkan
|
||||
</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
|
||||
<!-- 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 } from 'vue'
|
||||
import { ref, computed, onMounted } from 'vue'
|
||||
definePageMeta({
|
||||
layout: false, // Disables the layout for this specific page
|
||||
});
|
||||
|
||||
// Reactive data
|
||||
const loading = ref(false)
|
||||
const selectedStatus = ref(null)
|
||||
const searchQuery = ref('')
|
||||
const showDialog = ref(false)
|
||||
const selectedClinic = ref(null)
|
||||
const snackbar = ref(false)
|
||||
const snackbarText = ref('')
|
||||
const snackbarColor = ref('success')
|
||||
|
||||
// Clinic data with medical icons
|
||||
// Options
|
||||
const statusOptions = ['Tersedia', 'Tutup']
|
||||
|
||||
// Clinic data
|
||||
const clinics = ref([
|
||||
{
|
||||
id: 1,
|
||||
@@ -128,9 +269,8 @@ const clinics = ref([
|
||||
subtitle: '',
|
||||
icon: 'mdi-baby-face',
|
||||
shift: 'SHIFT 1',
|
||||
schedule: 'Mulai + Pukul 07:00',
|
||||
schedule: 'Mulai Pukul 07:00',
|
||||
available: true,
|
||||
status: ''
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
@@ -138,9 +278,8 @@ const clinics = ref([
|
||||
subtitle: '',
|
||||
icon: 'mdi-sleep',
|
||||
shift: 'SHIFT 1',
|
||||
schedule: 'Mulai + Pukul 07:00',
|
||||
schedule: 'Mulai Pukul 07:00',
|
||||
available: true,
|
||||
status: ''
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
@@ -148,9 +287,8 @@ const clinics = ref([
|
||||
subtitle: '',
|
||||
icon: 'mdi-medical-bag',
|
||||
shift: 'SHIFT 1',
|
||||
schedule: 'Mulai + Pukul 07:00',
|
||||
schedule: 'Mulai Pukul 07:00',
|
||||
available: true,
|
||||
status: ''
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
@@ -158,9 +296,8 @@ const clinics = ref([
|
||||
subtitle: '',
|
||||
icon: 'mdi-account-supervisor',
|
||||
shift: 'SHIFT 1',
|
||||
schedule: 'Mulai + Pukul 07:00',
|
||||
schedule: 'Mulai Pukul 07:00',
|
||||
available: true,
|
||||
status: ''
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
@@ -168,9 +305,8 @@ const clinics = ref([
|
||||
subtitle: 'GIGI DAN MULUT',
|
||||
icon: 'mdi-tooth',
|
||||
shift: 'SHIFT 1',
|
||||
schedule: 'Mulai + Pukul 07:00',
|
||||
schedule: 'Mulai Pukul 07:00',
|
||||
available: true,
|
||||
status: ''
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
@@ -178,9 +314,8 @@ const clinics = ref([
|
||||
subtitle: '',
|
||||
icon: 'mdi-food-apple',
|
||||
shift: 'SHIFT 1',
|
||||
schedule: 'Mulai + Pukul 07:00',
|
||||
schedule: 'Mulai Pukul 07:00',
|
||||
available: true,
|
||||
status: ''
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
@@ -190,7 +325,6 @@ const clinics = ref([
|
||||
shift: 'TUTUP',
|
||||
schedule: '',
|
||||
available: false,
|
||||
status: ''
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
@@ -198,9 +332,8 @@ const clinics = ref([
|
||||
subtitle: 'PENYAKIT DALAM',
|
||||
icon: 'mdi-hospital',
|
||||
shift: 'SHIFT 1',
|
||||
schedule: 'Mulai + Pukul 07:00',
|
||||
schedule: 'Mulai Pukul 07:00',
|
||||
available: true,
|
||||
status: ''
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
@@ -208,9 +341,8 @@ const clinics = ref([
|
||||
subtitle: 'CARDIOLOGI',
|
||||
icon: 'mdi-heart-pulse',
|
||||
shift: 'SHIFT 1',
|
||||
schedule: 'Mulai + Pukul 07:00',
|
||||
schedule: 'Mulai Pukul 07:00',
|
||||
available: true,
|
||||
status: ''
|
||||
},
|
||||
{
|
||||
id: 10,
|
||||
@@ -218,9 +350,8 @@ const clinics = ref([
|
||||
subtitle: '',
|
||||
icon: 'mdi-brain',
|
||||
shift: 'SHIFT 1',
|
||||
schedule: 'Mulai + Pukul 07:00',
|
||||
schedule: 'Mulai Pukul 07:00',
|
||||
available: true,
|
||||
status: ''
|
||||
},
|
||||
{
|
||||
id: 11,
|
||||
@@ -228,9 +359,8 @@ const clinics = ref([
|
||||
subtitle: '',
|
||||
icon: 'mdi-human-pregnant',
|
||||
shift: 'SHIFT 1',
|
||||
schedule: 'Mulai + Pukul 07:00',
|
||||
schedule: 'Mulai Pukul 07:00',
|
||||
available: true,
|
||||
status: ''
|
||||
},
|
||||
{
|
||||
id: 12,
|
||||
@@ -238,9 +368,8 @@ const clinics = ref([
|
||||
subtitle: '',
|
||||
icon: 'mdi-needle',
|
||||
shift: 'SHIFT 1',
|
||||
schedule: 'Mulai + Pukul 07:00',
|
||||
schedule: 'Mulai Pukul 07:00',
|
||||
available: true,
|
||||
status: ''
|
||||
},
|
||||
{
|
||||
id: 13,
|
||||
@@ -248,9 +377,8 @@ const clinics = ref([
|
||||
subtitle: 'NYERI',
|
||||
icon: 'mdi-leaf',
|
||||
shift: 'SHIFT 1',
|
||||
schedule: 'Mulai + Pukul 07:00',
|
||||
schedule: 'Mulai Pukul 07:00',
|
||||
available: true,
|
||||
status: ''
|
||||
},
|
||||
{
|
||||
id: 14,
|
||||
@@ -258,9 +386,8 @@ const clinics = ref([
|
||||
subtitle: 'KULIT KELAMIN',
|
||||
icon: 'mdi-hand-back-right',
|
||||
shift: 'SHIFT 1',
|
||||
schedule: 'Mulai + Pukul 07:00',
|
||||
schedule: 'Mulai Pukul 07:00',
|
||||
available: true,
|
||||
status: ''
|
||||
},
|
||||
{
|
||||
id: 15,
|
||||
@@ -268,9 +395,8 @@ const clinics = ref([
|
||||
subtitle: '',
|
||||
icon: 'mdi-eye',
|
||||
shift: 'SHIFT 1',
|
||||
schedule: 'Mulai + Pukul 07:00',
|
||||
schedule: 'Mulai Pukul 07:00',
|
||||
available: true,
|
||||
status: ''
|
||||
},
|
||||
{
|
||||
id: 16,
|
||||
@@ -278,9 +404,8 @@ const clinics = ref([
|
||||
subtitle: '',
|
||||
icon: 'mdi-clipboard-check',
|
||||
shift: 'SHIFT 1',
|
||||
schedule: 'Mulai + Pukul 07:00',
|
||||
schedule: 'Mulai Pukul 07:00',
|
||||
available: true,
|
||||
status: ''
|
||||
},
|
||||
{
|
||||
id: 17,
|
||||
@@ -288,9 +413,8 @@ const clinics = ref([
|
||||
subtitle: '',
|
||||
icon: 'mdi-ribbon',
|
||||
shift: 'SHIFT 1',
|
||||
schedule: 'Mulai + Pukul 07:00',
|
||||
schedule: 'Mulai Pukul 07:00',
|
||||
available: true,
|
||||
status: ''
|
||||
},
|
||||
{
|
||||
id: 18,
|
||||
@@ -298,9 +422,8 @@ const clinics = ref([
|
||||
subtitle: '',
|
||||
icon: 'mdi-lungs',
|
||||
shift: 'SHIFT 1',
|
||||
schedule: 'Mulai + Pukul 07:00',
|
||||
schedule: 'Mulai Pukul 07:00',
|
||||
available: true,
|
||||
status: ''
|
||||
},
|
||||
{
|
||||
id: 19,
|
||||
@@ -308,9 +431,8 @@ const clinics = ref([
|
||||
subtitle: 'EMG, ECG, DLL',
|
||||
icon: 'mdi-monitor-heart-rate',
|
||||
shift: 'SHIFT 1',
|
||||
schedule: 'Mulai + Pukul 07:00',
|
||||
schedule: 'Mulai Pukul 07:00',
|
||||
available: true,
|
||||
status: ''
|
||||
},
|
||||
{
|
||||
id: 20,
|
||||
@@ -318,9 +440,8 @@ const clinics = ref([
|
||||
subtitle: '',
|
||||
icon: 'mdi-radioactive',
|
||||
shift: 'SHIFT 1',
|
||||
schedule: 'Mulai + Pukul 07:00',
|
||||
schedule: 'Mulai Pukul 07:00',
|
||||
available: true,
|
||||
status: ''
|
||||
},
|
||||
{
|
||||
id: 21,
|
||||
@@ -328,9 +449,8 @@ const clinics = ref([
|
||||
subtitle: '',
|
||||
icon: 'mdi-human-cane',
|
||||
shift: 'SHIFT 1',
|
||||
schedule: 'Mulai + Pukul 07:00',
|
||||
schedule: 'Mulai Pukul 07:00',
|
||||
available: true,
|
||||
status: ''
|
||||
},
|
||||
{
|
||||
id: 22,
|
||||
@@ -338,9 +458,8 @@ const clinics = ref([
|
||||
subtitle: 'NEUROLOGI',
|
||||
icon: 'mdi-head-cog',
|
||||
shift: 'SHIFT 1',
|
||||
schedule: 'Mulai + Pukul 07:00',
|
||||
schedule: 'Mulai Pukul 07:00',
|
||||
available: false,
|
||||
status: ''
|
||||
},
|
||||
{
|
||||
id: 23,
|
||||
@@ -348,13 +467,40 @@ const clinics = ref([
|
||||
subtitle: '',
|
||||
icon: 'mdi-ear-hearing',
|
||||
shift: 'SHIFT 1',
|
||||
schedule: 'Mulai + Pukul 07:00',
|
||||
schedule: 'Mulai Pukul 07:00',
|
||||
available: true,
|
||||
status: ''
|
||||
}
|
||||
])
|
||||
|
||||
// Computed properties
|
||||
const filteredClinics = computed(() => {
|
||||
let filtered = clinics.value
|
||||
|
||||
if (selectedStatus.value) {
|
||||
const isAvailable = selectedStatus.value === 'Tersedia'
|
||||
filtered = filtered.filter(clinic => clinic.available === isAvailable)
|
||||
}
|
||||
|
||||
if (searchQuery.value) {
|
||||
const query = searchQuery.value.toLowerCase()
|
||||
filtered = filtered.filter(clinic =>
|
||||
clinic.name.toLowerCase().includes(query) ||
|
||||
clinic.subtitle.toLowerCase().includes(query)
|
||||
)
|
||||
}
|
||||
|
||||
return filtered
|
||||
})
|
||||
|
||||
const totalClinics = computed(() => clinics.value.length)
|
||||
|
||||
// Methods
|
||||
const showSnackbar = (text, color = 'success') => {
|
||||
snackbarText.value = text
|
||||
snackbarColor.value = color
|
||||
snackbar.value = true
|
||||
}
|
||||
|
||||
const selectClinic = (clinic) => {
|
||||
if (clinic.available) {
|
||||
selectedClinic.value = clinic
|
||||
@@ -363,33 +509,93 @@ const selectClinic = (clinic) => {
|
||||
}
|
||||
|
||||
const proceedToRegistration = () => {
|
||||
// Navigate to registration page or emit event
|
||||
showSnackbar(`Mengarahkan ke pendaftaran ${selectedClinic.value.name}...`, 'success')
|
||||
console.log('Proceeding to registration for:', selectedClinic.value.name)
|
||||
showDialog.value = false
|
||||
// You can add navigation logic here
|
||||
// await navigateTo(`/registration/${selectedClinic.value.id}`)
|
||||
}
|
||||
|
||||
definePageMeta({
|
||||
layout: false,
|
||||
});
|
||||
|
||||
const refreshData = () => {
|
||||
loading.value = true
|
||||
setTimeout(() => {
|
||||
loading.value = false
|
||||
showSnackbar('Status klinik berhasil diperbarui', 'success')
|
||||
}, 1000)
|
||||
}
|
||||
|
||||
// Lifecycle
|
||||
onMounted(() => {
|
||||
refreshData()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.clinic-selection-page {
|
||||
.anjungan-container {
|
||||
background: #f5f7fa;
|
||||
min-height: 100vh;
|
||||
background: linear-gradient(135deg, #fafbfc 0%, #c3cfe2 100%);
|
||||
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;
|
||||
}
|
||||
|
||||
.instruction-chip {
|
||||
font-weight: 500;
|
||||
color: #1976d2 !important;
|
||||
}
|
||||
|
||||
.controls-card,
|
||||
.main-content-card {
|
||||
border-radius: 16px;
|
||||
border: 1px solid rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.clinic-card {
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
border-radius: 16px !important;
|
||||
height: 220px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 280px;
|
||||
background: white;
|
||||
}
|
||||
|
||||
@@ -397,24 +603,19 @@ definePageMeta({
|
||||
border-left: 6px solid #4CAF50;
|
||||
}
|
||||
|
||||
.clinic-available:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 8px 25px rgba(76, 175, 80, 0.2) !important;
|
||||
border-left: 6px solid #2E7D32;
|
||||
}
|
||||
|
||||
.clinic-closed {
|
||||
opacity: 0.7;
|
||||
cursor: not-allowed;
|
||||
border-left: 6px solid #F44336;
|
||||
background: #fafafa;
|
||||
}
|
||||
|
||||
.clinic-icon-wrapper {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
background: rgba(76, 175, 80, 0.1);
|
||||
border-radius: 50%;
|
||||
margin: 0 auto;
|
||||
@@ -423,20 +624,63 @@ definePageMeta({
|
||||
.clinic-closed .clinic-icon-wrapper {
|
||||
background: rgba(244, 67, 54, 0.1);
|
||||
}
|
||||
*
|
||||
.clinic-icon {
|
||||
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
|
||||
}
|
||||
|
||||
.shift-info {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
/* Custom Vuetify theme colors */
|
||||
.v-theme--light {
|
||||
--v-theme-primary: #2E7D32;
|
||||
--v-theme-secondary: #FF7043;
|
||||
--v-theme-success: #4CAF50;
|
||||
--v-theme-error: #F44336;
|
||||
/* 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) {
|
||||
.anjungan-container {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.header-content {
|
||||
padding: 24px 20px;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.header-icon {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.clinic-card {
|
||||
height: 260px;
|
||||
}
|
||||
|
||||
.clinic-icon-wrapper {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.clinic-card {
|
||||
height: 240px;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
+368
-208
@@ -1,223 +1,223 @@
|
||||
<!-- pages/LoketAdmin.vue -->
|
||||
<template>
|
||||
<v-app>
|
||||
<v-app-bar>
|
||||
<v-container fluid class="pa-4">
|
||||
<v-row align="center" no-gutters class="fill-height">
|
||||
<v-col cols="auto">
|
||||
<div class="d-flex align-center">
|
||||
<div
|
||||
class="bg-grey-darken-4 px-3 py-1 mr-2"
|
||||
style="border-radius: 3px"
|
||||
>
|
||||
<span class="text-body-1 font-weight-bold text-white"
|
||||
>Total 2</span
|
||||
>
|
||||
</div>
|
||||
<div
|
||||
class="bg-grey-darken-2 px-3 py-1"
|
||||
style="border-radius: 3px"
|
||||
>
|
||||
<span class="text-body-1 text-white">Max 150 Pasien</span>
|
||||
</div>
|
||||
</div>
|
||||
</v-col>
|
||||
<v-spacer />
|
||||
<v-col cols="auto">
|
||||
<div class="d-flex align-center text-body-2">
|
||||
<v-icon size="small" class="mr-2">mdi-view-dashboard</v-icon>
|
||||
<span class="mr-6">Dashboard</span>
|
||||
<span>Loket 12 | Rabu, 13 Agustus 2025 - Pelayanan</span>
|
||||
</div>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</v-app-bar>
|
||||
<div class="loket-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-view-dashboard</v-icon>
|
||||
</div>
|
||||
<div class="header-text">
|
||||
<h1 class="page-title">Loket 12</h1>
|
||||
<p class="page-subtitle">Rabu, 13 Agustus 2025 - Pelayanan</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-right">
|
||||
<v-chip
|
||||
color="success"
|
||||
variant="flat"
|
||||
class="mr-2"
|
||||
>
|
||||
Total 2 Pasien
|
||||
</v-chip>
|
||||
<v-chip
|
||||
color="white"
|
||||
variant="flat"
|
||||
class="text-primary"
|
||||
>
|
||||
Max 150 Pasien
|
||||
</v-chip>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-cyan" style="height: 3px" />
|
||||
|
||||
<v-main>
|
||||
<v-container fluid class="pa-6">
|
||||
<v-row class="mb-6">
|
||||
<v-col>
|
||||
<div class="text-h6 text-grey-darken-2 font-weight-medium">
|
||||
Loket 12 | Rabu, 13 Agustus 2025 - Pelayanan :
|
||||
</div>
|
||||
</v-col>
|
||||
<v-spacer />
|
||||
<v-col cols="auto">
|
||||
<div class="d-flex align-center">
|
||||
<!-- Call Controls -->
|
||||
<v-card class="call-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-3">
|
||||
<span class="text-subtitle-1 font-weight-medium">Panggil Pasien:</span>
|
||||
<v-btn
|
||||
color="success"
|
||||
dark
|
||||
variant="flat"
|
||||
size="large"
|
||||
class="mr-4 px-8"
|
||||
style="min-width: 120px; height: 40px"
|
||||
class="px-6"
|
||||
@click="callPatient(1)"
|
||||
>
|
||||
<span class="text-h6 font-weight-bold">1</span>
|
||||
</v-btn>
|
||||
<v-btn
|
||||
color="info"
|
||||
dark
|
||||
variant="flat"
|
||||
size="large"
|
||||
class="mr-4 px-4"
|
||||
style="min-width: 120px; height: 40px"
|
||||
class="px-6"
|
||||
@click="callPatient(5)"
|
||||
>
|
||||
<span class="text-h6 font-weight-bold">5</span>
|
||||
</v-btn>
|
||||
<v-btn
|
||||
color="warning"
|
||||
dark
|
||||
variant="flat"
|
||||
size="large"
|
||||
class="mr-4 px-4"
|
||||
style="min-width: 120px; height: 40px"
|
||||
class="px-6"
|
||||
@click="callPatient(10)"
|
||||
>
|
||||
<span class="text-h6 font-weight-bold">10</span>
|
||||
</v-btn>
|
||||
<v-btn
|
||||
color="error"
|
||||
dark
|
||||
variant="flat"
|
||||
size="large"
|
||||
class="px-4"
|
||||
style="min-width: 120px; height: 40px"
|
||||
class="px-6"
|
||||
@click="callPatient(20)"
|
||||
>
|
||||
<span class="text-h6 font-weight-bold">20</span>
|
||||
</v-btn>
|
||||
</div>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-row justify="center" class="pa-12">
|
||||
<v-col cols="12" md="10" lg="8">
|
||||
<v-card
|
||||
color="success"
|
||||
dark
|
||||
flat
|
||||
class="text-center"
|
||||
style="min-height: 160px; border-radius: 8px"
|
||||
<v-col cols="12" md="4">
|
||||
<v-chip
|
||||
color="info"
|
||||
variant="flat"
|
||||
class="float-right"
|
||||
>
|
||||
<v-card-text class="pa-8">
|
||||
<div
|
||||
class="text-h2 font-weight-bold mb-2"
|
||||
style="letter-spacing: 4px"
|
||||
>
|
||||
NEXT
|
||||
</div>
|
||||
<div class="text-h6 mb-4 font-weight-normal">
|
||||
Pasien - UM1004
|
||||
</div>
|
||||
<div
|
||||
class="text-body-1 font-weight-normal"
|
||||
style="opacity: 0.9"
|
||||
>
|
||||
Klik untuk memanggil pasien selanjutnya
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
Total Quota Terpakai: 5
|
||||
</v-chip>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
|
||||
<v-card class="mb-4">
|
||||
<TabelData
|
||||
:headers="mainHeaders"
|
||||
:items="mainPatients"
|
||||
title="DATA PASIEN"
|
||||
>
|
||||
<template #actions="{ 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 #item.jamPanggil="{ item }">
|
||||
<span :class="getRowClass(item)">{{ item.jamPanggil }}</span>
|
||||
</template>
|
||||
</TabelData>
|
||||
</v-card>
|
||||
<!-- Next Patient Card -->
|
||||
<v-card class="next-patient-card mb-4" elevation="2">
|
||||
<v-card-text class="text-center pa-8">
|
||||
<v-chip color="success" variant="flat" class="mb-4" size="large">
|
||||
<v-icon start>mdi-account-arrow-right</v-icon>
|
||||
PASIEN SELANJUTNYA
|
||||
</v-chip>
|
||||
<div class="text-h3 font-weight-bold mb-2 text-success">
|
||||
UM1004
|
||||
</div>
|
||||
<div class="text-h6 mb-4 text-grey-darken-1">
|
||||
Klik tombol hijau untuk memanggil
|
||||
</div>
|
||||
<v-btn
|
||||
color="success"
|
||||
variant="flat"
|
||||
size="x-large"
|
||||
class="px-12"
|
||||
@click="callNext"
|
||||
>
|
||||
<v-icon start>mdi-microphone</v-icon>
|
||||
PANGGIL NEXT
|
||||
</v-btn>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
|
||||
<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>
|
||||
<!-- Main Patients Table -->
|
||||
<v-card class="main-table-card mb-4" elevation="2">
|
||||
<TabelData
|
||||
:headers="mainHeaders"
|
||||
:items="mainPatients"
|
||||
title="DATA PASIEN"
|
||||
>
|
||||
<template #actions="{ item }">
|
||||
<div class="d-flex gap-1">
|
||||
<v-btn
|
||||
size="small"
|
||||
color="success"
|
||||
variant="flat"
|
||||
@click="callPatient(item.no)"
|
||||
>
|
||||
Panggil
|
||||
</v-btn>
|
||||
<v-btn
|
||||
size="small"
|
||||
color="warning"
|
||||
variant="flat"
|
||||
@click="cancelPatient(item)"
|
||||
>
|
||||
Cancel
|
||||
</v-btn>
|
||||
<v-btn
|
||||
size="small"
|
||||
color="primary"
|
||||
variant="flat"
|
||||
@click="finishPatient(item)"
|
||||
>
|
||||
Selesai
|
||||
</v-btn>
|
||||
</div>
|
||||
</template>
|
||||
<template #item.jamPanggil="{ item }">
|
||||
<span :class="getRowClass(item)">{{ item.jamPanggil }}</span>
|
||||
</template>
|
||||
</TabelData>
|
||||
</v-card>
|
||||
|
||||
<v-card class="mb-4">
|
||||
<TabelData
|
||||
:headers="lateHeaders"
|
||||
:items="latePatients"
|
||||
title="INFO PASIEN LAPOR TERLAMBAT"
|
||||
:show-search="false"
|
||||
>
|
||||
</TabelData>
|
||||
</v-card>
|
||||
<!-- Late Patients Table -->
|
||||
<v-card class="late-table-card mb-4" elevation="2" v-if="latePatients.length > 0">
|
||||
<TabelData
|
||||
:headers="lateHeaders"
|
||||
:items="latePatients"
|
||||
title="INFO PASIEN LAPOR TERLAMBAT"
|
||||
:show-search="false"
|
||||
/>
|
||||
</v-card>
|
||||
|
||||
<v-card class="mb-4">
|
||||
<TabelData
|
||||
:headers="clinicHeaders"
|
||||
:items="clinicPatients"
|
||||
title="INFO PASIEN MASUK KLINIK"
|
||||
>
|
||||
</TabelData>
|
||||
</v-card>
|
||||
</v-container>
|
||||
</v-main>
|
||||
</v-app>
|
||||
<!-- Clinic Patients Table -->
|
||||
<v-card class="clinic-table-card mb-4" elevation="2" v-if="clinicPatients.length > 0">
|
||||
<TabelData
|
||||
:headers="clinicHeaders"
|
||||
:items="clinicPatients"
|
||||
title="INFO PASIEN MASUK KLINIK"
|
||||
/>
|
||||
</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 lang="ts">
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
import TabelData from "../components/TabelData.vue";
|
||||
|
||||
// Define interfaces
|
||||
interface Patient {
|
||||
no: number;
|
||||
jamPanggil: string;
|
||||
barcode: string;
|
||||
noAntrian: string;
|
||||
shift: string;
|
||||
klinik: string;
|
||||
fastTrack: string;
|
||||
pembayaran: string;
|
||||
panggil: string;
|
||||
status: string;
|
||||
}
|
||||
|
||||
interface LatePatient {
|
||||
no: number;
|
||||
barcode: string;
|
||||
noAntrian: string;
|
||||
shift: string;
|
||||
klinik: string;
|
||||
aksi: string;
|
||||
}
|
||||
|
||||
interface ClinicPatient {
|
||||
no: number;
|
||||
barcode: string;
|
||||
noAntrian: string;
|
||||
noRM: string;
|
||||
shift: string;
|
||||
klinik: string;
|
||||
fastTrack: string;
|
||||
pembayaran: string;
|
||||
aksi: string;
|
||||
}
|
||||
// Reactive data
|
||||
const snackbar = ref(false)
|
||||
const snackbarText = ref('')
|
||||
const snackbarColor = ref('success')
|
||||
|
||||
// Data and Headers
|
||||
const mainHeaders = ref([
|
||||
{ title: "No", value: "no", sortable: false },
|
||||
{ title: "Jam Panggil", value: "jamPanggil", sortable: true },
|
||||
{ title: "Barcode", value: "barcode", sortable: true },
|
||||
{ title: "No Antrian", value: "noAntrian", sortable: true },
|
||||
{ title: "Shift", value: "shift", sortable: true },
|
||||
{ title: "Klinik", value: "klinik", sortable: true },
|
||||
{ title: "Fast Track", value: "fastTrack", sortable: true },
|
||||
{ title: "Pembayaran", value: "pembayaran", sortable: true },
|
||||
{ title: "Panggil", value: "panggil", sortable: true },
|
||||
{ title: "Aksi", value: "aksi", sortable: false },
|
||||
{ title: "No", value: "no", sortable: false, width: "60px" },
|
||||
{ title: "Jam Panggil", value: "jamPanggil", sortable: true, width: "100px" },
|
||||
{ title: "Barcode", value: "barcode", sortable: true, width: "140px" },
|
||||
{ title: "No Antrian", value: "noAntrian", sortable: true, width: "200px" },
|
||||
{ title: "Shift", value: "shift", sortable: true, width: "80px" },
|
||||
{ title: "Klinik", value: "klinik", sortable: true, width: "120px" },
|
||||
{ title: "Fast Track", value: "fastTrack", sortable: true, width: "100px" },
|
||||
{ title: "Pembayaran", value: "pembayaran", sortable: true, width: "100px" },
|
||||
{ title: "Status", value: "panggil", sortable: true, width: "80px" },
|
||||
{ title: "Aksi", value: "aksi", sortable: false, width: "200px" },
|
||||
]);
|
||||
|
||||
const mainPatients = ref<Patient[]>([
|
||||
const mainPatients = ref([
|
||||
{
|
||||
no: 1,
|
||||
jamPanggil: "12:49",
|
||||
@@ -227,7 +227,7 @@ const mainPatients = ref<Patient[]>([
|
||||
klinik: "KANDUNGAN",
|
||||
fastTrack: "UMUM",
|
||||
pembayaran: "UMUM",
|
||||
panggil: "Panggil",
|
||||
panggil: "Aktif",
|
||||
status: "current",
|
||||
},
|
||||
{
|
||||
@@ -239,7 +239,7 @@ const mainPatients = ref<Patient[]>([
|
||||
klinik: "IPD",
|
||||
fastTrack: "UMUM",
|
||||
pembayaran: "UMUM",
|
||||
panggil: "Cancel",
|
||||
panggil: "Menunggu",
|
||||
status: "normal",
|
||||
},
|
||||
...Array.from({ length: 20 }, (_, i) => ({
|
||||
@@ -251,68 +251,228 @@ const mainPatients = ref<Patient[]>([
|
||||
klinik: ["KANDUNGAN", "IPD", "THT", "SARAF"][Math.floor(Math.random() * 4)],
|
||||
fastTrack: "UMUM",
|
||||
pembayaran: "UMUM",
|
||||
panggil: "Panggil",
|
||||
panggil: "Menunggu",
|
||||
status: "normal",
|
||||
})),
|
||||
]);
|
||||
|
||||
const lateHeaders = ref([
|
||||
{ title: "No", value: "no", sortable: false },
|
||||
{ title: "Barcode", value: "barcode", sortable: true },
|
||||
{ title: "No Antrian", value: "noAntrian", sortable: true },
|
||||
{ title: "Shift", value: "shift", sortable: true },
|
||||
{ title: "Klinik", value: "klinik", sortable: true },
|
||||
{ title: "Aksi", value: "aksi", sortable: false },
|
||||
{ title: "No", value: "no", sortable: false, width: "60px" },
|
||||
{ title: "Barcode", value: "barcode", sortable: true, width: "140px" },
|
||||
{ title: "No Antrian", value: "noAntrian", sortable: true, width: "200px" },
|
||||
{ title: "Shift", value: "shift", sortable: true, width: "80px" },
|
||||
{ title: "Klinik", value: "klinik", sortable: true, width: "120px" },
|
||||
{ title: "Aksi", value: "aksi", sortable: false, width: "100px" },
|
||||
]);
|
||||
const latePatients = ref<LatePatient[]>([]);
|
||||
|
||||
const latePatients = ref([]);
|
||||
|
||||
const clinicHeaders = ref([
|
||||
{ title: "#", value: "no", sortable: false },
|
||||
{ title: "Barcode", value: "barcode", sortable: true },
|
||||
{ title: "No Antrian", value: "noAntrian", sortable: true },
|
||||
{ title: "No RM", value: "noRM", sortable: true },
|
||||
{ title: "Shift", value: "shift", sortable: true },
|
||||
{ title: "Klinik", value: "klinik", sortable: true },
|
||||
{ title: "Fast Track", value: "fastTrack", sortable: true },
|
||||
{ title: "Pembayaran", value: "pembayaran", sortable: true },
|
||||
{ title: "Aksi", value: "aksi", sortable: false },
|
||||
{ title: "#", value: "no", sortable: false, width: "60px" },
|
||||
{ title: "Barcode", value: "barcode", sortable: true, width: "140px" },
|
||||
{ title: "No Antrian", value: "noAntrian", sortable: true, width: "200px" },
|
||||
{ title: "No RM", value: "noRM", sortable: true, width: "100px" },
|
||||
{ title: "Shift", value: "shift", sortable: true, width: "80px" },
|
||||
{ title: "Klinik", value: "klinik", sortable: true, width: "120px" },
|
||||
{ title: "Fast Track", value: "fastTrack", sortable: true, width: "100px" },
|
||||
{ title: "Pembayaran", value: "pembayaran", sortable: true, width: "100px" },
|
||||
{ title: "Aksi", value: "aksi", sortable: false, width: "100px" },
|
||||
]);
|
||||
const clinicPatients = ref<ClinicPatient[]>([]);
|
||||
|
||||
// Method yang tetap di halaman induk (seperti getRowClass)
|
||||
const getRowClass = (item: Patient): string => {
|
||||
const clinicPatients = ref([]);
|
||||
|
||||
// Methods
|
||||
const showSnackbar = (text, color = 'success') => {
|
||||
snackbarText.value = text
|
||||
snackbarColor.value = color
|
||||
snackbar.value = true
|
||||
}
|
||||
|
||||
const callPatient = (number) => {
|
||||
showSnackbar(`Memanggil pasien nomor ${number}`, 'success')
|
||||
}
|
||||
|
||||
const callNext = () => {
|
||||
showSnackbar('Memanggil pasien selanjutnya: UM1004', 'success')
|
||||
}
|
||||
|
||||
const cancelPatient = (patient) => {
|
||||
showSnackbar(`Membatalkan pasien ${patient.noAntrian.split(' |')[0]}`, 'warning')
|
||||
}
|
||||
|
||||
const finishPatient = (patient) => {
|
||||
showSnackbar(`Menyelesaikan pasien ${patient.noAntrian.split(' |')[0]}`, 'success')
|
||||
}
|
||||
|
||||
const getRowClass = (item) => {
|
||||
if (item.status === "current") {
|
||||
return "text-green font-weight-bold";
|
||||
return "text-success font-weight-bold";
|
||||
}
|
||||
return "";
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.v-list-item--active {
|
||||
background-color: rgba(25, 118, 210, 0.12);
|
||||
color: #1976d2;
|
||||
.loket-container {
|
||||
background: #f5f7fa;
|
||||
min-height: 100vh;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.text-green {
|
||||
color: #4caf50 !important;
|
||||
.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);
|
||||
}
|
||||
|
||||
.bg-cyan {
|
||||
background-color: #00bcd4 !important;
|
||||
.header-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 32px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Row highlighting */
|
||||
:deep(.v-data-table tbody tr:nth-child(1)) {
|
||||
.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;
|
||||
}
|
||||
|
||||
.call-controls-card,
|
||||
.next-patient-card,
|
||||
.main-table-card,
|
||||
.late-table-card,
|
||||
.clinic-table-card {
|
||||
border-radius: 16px;
|
||||
border: 1px solid rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.next-patient-card {
|
||||
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
|
||||
border: 2px solid rgba(76, 175, 80, 0.2);
|
||||
}
|
||||
|
||||
/* 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:nth-child(1)) {
|
||||
background-color: #fff3cd !important;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.v-btn--size-small {
|
||||
height: 32px;
|
||||
padding: 0 8px;
|
||||
padding: 0 12px;
|
||||
}
|
||||
|
||||
/* Success text color */
|
||||
.text-success {
|
||||
color: #4caf50 !important;
|
||||
}
|
||||
|
||||
/* 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) {
|
||||
.loket-container {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.header-content {
|
||||
padding: 24px 20px;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.header-icon {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.call-controls-card .d-flex {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.call-controls-card .v-btn {
|
||||
min-width: 80px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.page-title {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.next-patient-card .text-h3 {
|
||||
font-size: 2rem !important;
|
||||
}
|
||||
|
||||
.call-controls-card .d-flex.flex-wrap {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
+4
-4
@@ -20,7 +20,7 @@
|
||||
</v-chip>
|
||||
</v-col>
|
||||
<v-col cols="12" md="2">
|
||||
<v-btn block color="info">Pendaftaran Online</v-btn>
|
||||
<v-btn block color=#ff9248 style="color:white;">Pendaftaran Online</v-btn>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-text>
|
||||
@@ -42,9 +42,9 @@
|
||||
>
|
||||
<template v-slot:actions="{ item }">
|
||||
<div class="d-flex ga-1">
|
||||
<v-btn small color="success" class="d-flex flex-row" variant="flat">Tiket</v-btn>
|
||||
<v-btn small color="success" class="d-flex flex-row" variant="flat"
|
||||
>Tiket Pengantar</v-btn
|
||||
<v-btn small color=#ff9248 class="d-flex flex-row" variant="flat" style="color:white;">PASIEN</v-btn>
|
||||
<v-btn small color="grey-lighten-3" class="d-flex flex-row" variant="flat"
|
||||
>PENGANTAR</v-btn
|
||||
>
|
||||
<v-btn small color="info" class="d-flex flex-row" variant="flat">ByPass</v-btn>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user