1380 lines
32 KiB
Plaintext
1380 lines
32 KiB
Plaintext
<template>
|
|
<div class="anjungan-container">
|
|
<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">
|
|
<div class="info-guide">
|
|
<div class="guide-item">
|
|
<span class="guide-number">1</span>
|
|
<span class="guide-text">Pilih Poli (Hijau = Buka, Merah = Tutup)</span>
|
|
</div>
|
|
<div class="guide-item">
|
|
<span class="guide-number">2</span>
|
|
<span class="guide-text">Pilih: Daftar Sekarang atau Jadwal Lain</span>
|
|
</div>
|
|
<div class="guide-item">
|
|
<span class="guide-number">3</span>
|
|
<span class="guide-text">Pilih Jenis Pembayaran</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<v-card elevation="0" class="main-content-card">
|
|
<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
|
|
:class="{
|
|
'clinic-card': true,
|
|
'clinic-available': clinic.available,
|
|
'clinic-closed': !clinic.available,
|
|
}"
|
|
:disabled="!clinic.available"
|
|
@click="selectClinic(clinic)"
|
|
elevation="0"
|
|
>
|
|
<v-card-text class="clinic-content">
|
|
<!-- Clinic Name - HIERARCHY: Most Prominent -->
|
|
<h3 class="clinic-name">
|
|
{{ clinic.name }}
|
|
</h3>
|
|
|
|
<!-- Doctor Info -->
|
|
<div class="doctor-info">
|
|
<v-icon size="16" :color="clinic.available ? 'var(--color-primary-600)' : 'var(--color-neutral-600)'">
|
|
mdi-doctor
|
|
</v-icon>
|
|
<span>{{ getDisplayDoctorInfo(clinic) }}</span>
|
|
</div>
|
|
|
|
<!-- Schedule Info - Fixed Bottom Left -->
|
|
<div class="schedule-info">
|
|
<v-icon size="14" :color="clinic.available ? 'var(--color-success-600)' : 'var(--color-neutral-600)'">
|
|
mdi-clock-outline
|
|
</v-icon>
|
|
<span>{{ clinic.schedule || 'Tidak tersedia' }}</span>
|
|
</div>
|
|
|
|
<!-- Clinic Icon - Secondary Element -->
|
|
<div class="clinic-icon-wrapper">
|
|
<v-icon
|
|
:icon="clinic.icon"
|
|
size="40"
|
|
:color="clinic.available ? 'var(--color-success-600)' : 'var(--color-neutral-100)'"
|
|
></v-icon>
|
|
</div>
|
|
</v-card-text>
|
|
</v-card>
|
|
</v-col>
|
|
</v-row>
|
|
|
|
<div v-if="filteredClinics.length === 0" class="empty-state">
|
|
<v-icon size="64" color="grey-lighten-1">mdi-hospital-marker-outline</v-icon>
|
|
<h3 class="empty-title">Tidak ada klinik yang sesuai filter</h3>
|
|
<p class="empty-subtitle">Coba ubah filter pencarian Anda</p>
|
|
</div>
|
|
</v-card-text>
|
|
</v-card>
|
|
|
|
<v-dialog v-model="showVisitTypeDialog" max-width="400" persistent>
|
|
<v-card class="dialog-card">
|
|
<v-card-title class="dialog-header">
|
|
<v-icon class="mr-2">mdi-check-circle</v-icon>
|
|
Konfirmasi Pilihan
|
|
</v-card-title>
|
|
|
|
<v-card-text class="pa-6" v-if="selectedClinic">
|
|
<div class="dialog-content">
|
|
<div class="dialog-icon mb-3">
|
|
<v-icon :icon="selectedClinic.icon" size="48" color="primary-600"></v-icon>
|
|
</div>
|
|
<h3 class="dialog-clinic-name">{{ selectedClinic.name }}</h3>
|
|
<p v-if="selectedClinic.subtitle" class="dialog-subtitle">
|
|
{{ selectedClinic.subtitle }}
|
|
</p>
|
|
|
|
<v-divider class="my-4"></v-divider>
|
|
|
|
<div class="dialog-info">
|
|
<div class="doctor-list-section">
|
|
<p><strong>Dokter yang Tersedia:</strong></p>
|
|
<ul class="doctor-list">
|
|
<li v-for="(doctor, index) in selectedClinic.doctors" :key="index">
|
|
{{ doctor }}
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="quota-section">
|
|
<p><strong>Kuota Hari Ini (Shift {{ getCurrentShiftNumber() }}):</strong></p>
|
|
<div class="current-quota-display" :class="{ 'quota-empty': getCurrentShiftQuota() === 0 }">
|
|
<span class="quota-large-number">{{ getCurrentShiftQuota() }}</span>
|
|
<span class="quota-label">pasien tersedia</span>
|
|
</div>
|
|
</div>
|
|
|
|
<p><strong>Jadwal:</strong> {{ selectedClinic.schedule }}</p>
|
|
</div>
|
|
</div>
|
|
</v-card-text>
|
|
|
|
<v-divider />
|
|
|
|
<v-card-text class="pa-4">
|
|
<v-row dense>
|
|
<v-col cols="6">
|
|
<v-btn
|
|
color="success-600"
|
|
class="text-white"
|
|
size="large"
|
|
block
|
|
@click="selectVisitType('SEKARANG')"
|
|
:disabled="isShift1Full(selectedClinic)"
|
|
:class="{ 'btn-disabled': isShift1Full(selectedClinic) }"
|
|
>
|
|
DAFTAR SEKARANG
|
|
</v-btn>
|
|
<p v-if="isShift1Full(selectedClinic)" class="disabled-hint">Kuota hari ini habis</p>
|
|
</v-col>
|
|
<v-col cols="6">
|
|
<v-btn
|
|
color="primary-600"
|
|
class="text-white"
|
|
size="large"
|
|
block
|
|
@click="selectVisitType('JADWAL_LAIN')"
|
|
>
|
|
JADWAL LAIN
|
|
</v-btn>
|
|
</v-col>
|
|
</v-row>
|
|
</v-card-text>
|
|
|
|
<v-card-actions class="justify-center pa-4 pt-0">
|
|
<v-btn variant="outlined" color="neutral-600" @click="showVisitTypeDialog = false">
|
|
Tutup
|
|
</v-btn>
|
|
</v-card-actions>
|
|
</v-card>
|
|
</v-dialog>
|
|
|
|
<v-dialog v-model="showPaymentTypeDialog" max-width="400">
|
|
<v-card class="dialog-card">
|
|
<v-card-title class="dialog-header-simple">Jenis Pembayaran</v-card-title>
|
|
<v-divider />
|
|
<v-card-text class="pa-4">
|
|
<v-btn color="success-600" class="mb-3 payment-btn text-white" size="x-large" block @click="selectPaymentType('BPJS')">
|
|
BPJS
|
|
</v-btn>
|
|
<v-btn color="secondary-600" class="payment-btn text-white" size="x-large" block @click="selectPaymentType('UMUM')">
|
|
UMUM / JKMM / SPM / DLL
|
|
</v-btn>
|
|
</v-card-text>
|
|
<v-card-actions class="justify-center pa-4 pt-0">
|
|
<v-btn variant="outlined" color="neutral-600" @click="showPaymentTypeDialog = false">
|
|
Tutup
|
|
</v-btn>
|
|
</v-card-actions>
|
|
</v-card>
|
|
</v-dialog>
|
|
|
|
<v-dialog v-model="showBookingFormDialog" max-width="500">
|
|
<v-card class="dialog-card">
|
|
<v-card-title class="dialog-header">
|
|
Pilih Jadwal Kunjungan
|
|
</v-card-title>
|
|
<v-card-text class="pa-6">
|
|
<v-form @submit.prevent="submitBooking">
|
|
<v-text-field
|
|
v-model="bookingForm.date"
|
|
label="Tanggal"
|
|
type="date"
|
|
variant="outlined"
|
|
density="compact"
|
|
required
|
|
class="mb-3"
|
|
:min="getMinDate()"
|
|
:max="getMaxDate()"
|
|
></v-text-field>
|
|
|
|
<v-select
|
|
v-model="bookingForm.shift"
|
|
:items="getAvailableShiftsForBooking()"
|
|
item-title="label"
|
|
item-value="value"
|
|
label="Pilih Shift"
|
|
variant="outlined"
|
|
density="compact"
|
|
required
|
|
class="mb-3"
|
|
></v-select>
|
|
|
|
<v-select
|
|
v-model="bookingForm.payment"
|
|
:items="['BPJS', 'UMUM/JKMM/SPM/DLL']"
|
|
label="Pembayaran"
|
|
variant="outlined"
|
|
density="compact"
|
|
required
|
|
></v-select>
|
|
</v-form>
|
|
</v-card-text>
|
|
<v-card-actions class="pa-4">
|
|
<v-spacer />
|
|
<v-btn @click="showBookingFormDialog = false" variant="outlined" color="neutral-600">
|
|
Tutup
|
|
</v-btn>
|
|
<v-btn color="success-600" class="text-white" variant="flat" @click="submitBooking">
|
|
Simpan
|
|
</v-btn>
|
|
</v-card-actions>
|
|
</v-card>
|
|
</v-dialog>
|
|
|
|
<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 } from "vue";
|
|
|
|
definePageMeta({
|
|
layout: false,
|
|
});
|
|
|
|
const loading = ref(false);
|
|
const selectedStatus = ref(null);
|
|
const searchQuery = ref("");
|
|
const showVisitTypeDialog = ref(false);
|
|
const showPaymentTypeDialog = ref(false);
|
|
const showBookingFormDialog = ref(false);
|
|
const selectedClinic = ref(null);
|
|
const selectedVisitType = ref(null);
|
|
const snackbar = ref(false);
|
|
const snackbarText = ref("");
|
|
const snackbarColor = ref("success");
|
|
|
|
const bookingForm = ref({
|
|
date: new Date().toISOString().substring(0, 10),
|
|
shift: "Shift 1",
|
|
payment: null,
|
|
});
|
|
|
|
const statusOptions = ["Tersedia", "Tutup"];
|
|
|
|
const clinics = ref([
|
|
{
|
|
id: 1,
|
|
name: "ANAK",
|
|
subtitle: "",
|
|
icon: "mdi-baby-face",
|
|
shift: "SHIFT 1",
|
|
schedule: "Mulai Pukul 07:00",
|
|
available: true,
|
|
doctors: ["dr. Sarah Putri, Sp.A", "dr. Andi Wijaya, Sp.A"],
|
|
shifts: [
|
|
{ name: "Shift 1", quota: 15 },
|
|
{ name: "Shift 2", quota: 20 }
|
|
]
|
|
},
|
|
{
|
|
id: 2,
|
|
name: "ANESTESI",
|
|
subtitle: "",
|
|
icon: "mdi-face-mask",
|
|
shift: "SHIFT 1",
|
|
schedule: "Mulai Pukul 07:00",
|
|
available: true,
|
|
doctors: ["dr. Ahmad Fauzi, Sp.An"],
|
|
shifts: [
|
|
{ name: "Shift 1", quota: 0 },
|
|
{ name: "Shift 2", quota: 12 }
|
|
]
|
|
},
|
|
{
|
|
id: 3,
|
|
name: "BEDAH",
|
|
subtitle: "",
|
|
icon: "mdi-medical-bag",
|
|
shift: "SHIFT 1",
|
|
schedule: "Mulai Pukul 07:00",
|
|
available: true,
|
|
doctors: ["dr. Budi Santoso, Sp.B", "dr. Eko Prasetyo, Sp.B", "dr. Dian Permata, Sp.B"],
|
|
shifts: [
|
|
{ name: "Shift 1", quota: 8 },
|
|
{ name: "Shift 2", quota: 10 }
|
|
]
|
|
},
|
|
{
|
|
id: 4,
|
|
name: "GERIATRI",
|
|
subtitle: "",
|
|
icon: "mdi-human-cane",
|
|
shift: "SHIFT 1",
|
|
schedule: "Mulai Pukul 07:00",
|
|
available: true,
|
|
doctors: ["dr. Siti Aminah, Sp.PD-KGer"],
|
|
shifts: [
|
|
{ name: "Shift 1", quota: 10 },
|
|
{ name: "Shift 2", quota: 8 }
|
|
]
|
|
},
|
|
{
|
|
id: 5,
|
|
name: "GIGI DAN MULUT",
|
|
subtitle: "",
|
|
icon: "mdi-tooth",
|
|
shift: "SHIFT 1",
|
|
schedule: "Mulai Pukul 07:00",
|
|
available: true,
|
|
doctors: ["drg. Rina Wati, Sp.KG", "drg. Made Surya, Sp.KG"],
|
|
shifts: [
|
|
{ name: "Shift 1", quota: 18 },
|
|
{ name: "Shift 2", quota: 15 }
|
|
]
|
|
},
|
|
{
|
|
id: 6,
|
|
name: "GIZI",
|
|
subtitle: "",
|
|
icon: "mdi-food-apple",
|
|
shift: "SHIFT 1",
|
|
schedule: "Mulai Pukul 07:00",
|
|
available: true,
|
|
doctors: ["dr. Lisa Andriani, Sp.GK"],
|
|
shifts: [
|
|
{ name: "Shift 1", quota: 12 },
|
|
{ name: "Shift 2", quota: 10 }
|
|
]
|
|
},
|
|
{
|
|
id: 7,
|
|
name: "HEMATO ONKOLOGI MEDIS",
|
|
subtitle: "",
|
|
icon: "mdi-water",
|
|
shift: "TUTUP",
|
|
schedule: "",
|
|
available: false,
|
|
doctors: [],
|
|
shifts: []
|
|
},
|
|
{
|
|
id: 8,
|
|
name: "IPD (PENYAKIT DALAM)",
|
|
subtitle: "",
|
|
icon: "mdi-hospital",
|
|
shift: "SHIFT 1",
|
|
schedule: "Mulai Pukul 07:00",
|
|
available: true,
|
|
doctors: ["dr. Hendra Wijaya, Sp.PD", "dr. Agus Salim, Sp.PD", "dr. Retno Wulan, Sp.PD", "dr. Bambang Susilo, Sp.PD"],
|
|
shifts: [
|
|
{ name: "Shift 1", quota: 25 },
|
|
{ name: "Shift 2", quota: 20 }
|
|
]
|
|
},
|
|
{
|
|
id: 9,
|
|
name: "JANTUNG (CARDIOLOGI)",
|
|
subtitle: "",
|
|
icon: "mdi-heart-pulse",
|
|
shift: "SHIFT 1",
|
|
schedule: "Mulai Pukul 07:00",
|
|
available: true,
|
|
doctors: ["dr. Rudi Hartono, Sp.JP", "dr. Sinta Dewi, Sp.JP"],
|
|
shifts: [
|
|
{ name: "Shift 1", quota: 14 },
|
|
{ name: "Shift 2", quota: 12 }
|
|
]
|
|
},
|
|
{
|
|
id: 10,
|
|
name: "JIWA",
|
|
subtitle: "",
|
|
icon: "mdi-head-dots-horizontal",
|
|
shift: "SHIFT 1",
|
|
schedule: "Mulai Pukul 07:00",
|
|
available: true,
|
|
doctors: ["dr. Maya Kusuma, Sp.KJ"],
|
|
shifts: [
|
|
{ name: "Shift 1", quota: 10 },
|
|
{ name: "Shift 2", quota: 8 }
|
|
]
|
|
},
|
|
{
|
|
id: 11,
|
|
name: "KANDUNGAN",
|
|
subtitle: "",
|
|
icon: "mdi-human-pregnant",
|
|
shift: "SHIFT 1",
|
|
schedule: "Mulai Pukul 07:00",
|
|
available: true,
|
|
doctors: ["dr. Dewi Lestari, Sp.OG", "dr. Putri Andini, Sp.OG", "dr. Nova Riani, Sp.OG"],
|
|
shifts: [
|
|
{ name: "Shift 1", quota: 16 },
|
|
{ name: "Shift 2", quota: 14 }
|
|
]
|
|
},
|
|
{
|
|
id: 12,
|
|
name: "KEMOTERAPI",
|
|
subtitle: "",
|
|
icon: "mdi-virus",
|
|
shift: "SHIFT 1",
|
|
schedule: "Mulai Pukul 07:00",
|
|
available: true,
|
|
doctors: ["dr. Andi Pratama, Sp.PD-KHOM"],
|
|
shifts: [
|
|
{ name: "Shift 1", quota: 8 },
|
|
{ name: "Shift 2", quota: 6 }
|
|
]
|
|
},
|
|
{
|
|
id: 13,
|
|
name: "KOMPLEMENTER (NYERI)",
|
|
subtitle: "",
|
|
icon: "mdi-medical-bag",
|
|
shift: "SHIFT 1",
|
|
schedule: "Mulai Pukul 07:00",
|
|
available: true,
|
|
doctors: ["dr. Ratna Sari, Sp.KFR"],
|
|
shifts: [
|
|
{ name: "Shift 1", quota: 10 },
|
|
{ name: "Shift 2", quota: 8 }
|
|
]
|
|
},
|
|
{
|
|
id: 14,
|
|
name: "KULIT KELAMIN",
|
|
subtitle: "",
|
|
icon: "mdi-human-male-female",
|
|
shift: "SHIFT 1",
|
|
schedule: "Mulai Pukul 07:00",
|
|
available: true,
|
|
doctors: ["dr. Tika Anggraini, Sp.KK", "dr. Fajar Ramadhan, Sp.KK"],
|
|
shifts: [
|
|
{ name: "Shift 1", quota: 12 },
|
|
{ name: "Shift 2", quota: 10 }
|
|
]
|
|
},
|
|
{
|
|
id: 15,
|
|
name: "MATA",
|
|
subtitle: "",
|
|
icon: "mdi-eye",
|
|
shift: "SHIFT 1",
|
|
schedule: "Mulai Pukul 07:00",
|
|
available: true,
|
|
doctors: ["dr. Yudi Prasetyo, Sp.M", "dr. Linda Kartika, Sp.M"],
|
|
shifts: [
|
|
{ name: "Shift 1", quota: 15 },
|
|
{ name: "Shift 2", quota: 12 }
|
|
]
|
|
},
|
|
{
|
|
id: 16,
|
|
name: "MCU",
|
|
subtitle: "",
|
|
icon: "mdi-clipboard-check",
|
|
shift: "SHIFT 1",
|
|
schedule: "Mulai Pukul 07:00",
|
|
available: true,
|
|
doctors: ["dr. Fitri Handayani, Sp.OK"],
|
|
shifts: [
|
|
{ name: "Shift 1", quota: 20 },
|
|
{ name: "Shift 2", quota: 15 }
|
|
]
|
|
},
|
|
{
|
|
id: 17,
|
|
name: "ONKOLOGI",
|
|
subtitle: "",
|
|
icon: "mdi-virus",
|
|
shift: "SHIFT 1",
|
|
schedule: "Mulai Pukul 07:00",
|
|
available: true,
|
|
doctors: ["dr. Dimas Prakoso, Sp.Onk-Rad"],
|
|
shifts: [
|
|
{ name: "Shift 1", quota: 10 },
|
|
{ name: "Shift 2", quota: 8 }
|
|
]
|
|
},
|
|
{
|
|
id: 18,
|
|
name: "PARU",
|
|
subtitle: "",
|
|
icon: "mdi-lungs",
|
|
shift: "SHIFT 1",
|
|
schedule: "Mulai Pukul 07:00",
|
|
available: true,
|
|
doctors: ["dr. Nina Marlina, Sp.P", "dr. Arief Budiman, Sp.P"],
|
|
shifts: [
|
|
{ name: "Shift 1", quota: 14 },
|
|
{ name: "Shift 2", quota: 12 }
|
|
]
|
|
},
|
|
{
|
|
id: 19,
|
|
name: "R. TINDAKAN (EMG, ECG, DLL)",
|
|
subtitle: "",
|
|
icon: "mdi-waveform",
|
|
shift: "SHIFT 1",
|
|
schedule: "Mulai Pukul 07:00",
|
|
available: true,
|
|
doctors: ["dr. Fajar Nugroho, Sp.S"],
|
|
shifts: [
|
|
{ name: "Shift 1", quota: 12 },
|
|
{ name: "Shift 2", quota: 10 }
|
|
]
|
|
},
|
|
{
|
|
id: 20,
|
|
name: "RADIOTERAPI",
|
|
subtitle: "",
|
|
icon: "mdi-radioactive",
|
|
shift: "SHIFT 1",
|
|
schedule: "Mulai Pukul 07:00",
|
|
available: true,
|
|
doctors: ["dr. Wulan Safitri, Sp.Rad"],
|
|
shifts: [
|
|
{ name: "Shift 1", quota: 8 },
|
|
{ name: "Shift 2", quota: 6 }
|
|
]
|
|
},
|
|
{
|
|
id: 21,
|
|
name: "REHAB MEDIK",
|
|
subtitle: "",
|
|
icon: "mdi-human-cane",
|
|
shift: "SHIFT 1",
|
|
schedule: "Mulai Pukul 07:00",
|
|
available: true,
|
|
doctors: ["dr. Gita Permata, Sp.KFR", "dr. Rian Saputra, Sp.KFR"],
|
|
shifts: [
|
|
{ name: "Shift 1", quota: 16 },
|
|
{ name: "Shift 2", quota: 14 }
|
|
]
|
|
},
|
|
{
|
|
id: 22,
|
|
name: "SARAF (NEUROLOGI)",
|
|
subtitle: "",
|
|
icon: "mdi-head-cog",
|
|
shift: "SHIFT 1",
|
|
schedule: "Mulai Pukul 07:00",
|
|
available: false,
|
|
doctors: [],
|
|
shifts: []
|
|
},
|
|
{
|
|
id: 23,
|
|
name: "THT",
|
|
subtitle: "",
|
|
icon: "mdi-ear-hearing",
|
|
shift: "SHIFT 1",
|
|
schedule: "Mulai Pukul 07:00",
|
|
available: true,
|
|
doctors: ["dr. Reza Maulana, Sp.THT-KL"],
|
|
shifts: [
|
|
{ name: "Shift 1", quota: 12 },
|
|
{ name: "Shift 2", quota: 10 }
|
|
]
|
|
},
|
|
]);
|
|
|
|
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);
|
|
|
|
// Function to display doctor info on card (max 2 doctors shown)
|
|
const getDisplayDoctorInfo = (clinic) => {
|
|
if (!clinic.doctors || clinic.doctors.length === 0) {
|
|
return "Tidak ada dokter";
|
|
}
|
|
|
|
const maxDisplay = 2;
|
|
const doctors = clinic.doctors;
|
|
|
|
if (doctors.length <= maxDisplay) {
|
|
return doctors.join(", ");
|
|
} else {
|
|
const displayedDoctors = doctors.slice(0, maxDisplay).join(", ");
|
|
const remainingCount = doctors.length - maxDisplay;
|
|
return `${displayedDoctors}, dan ${remainingCount} dokter lainnya`;
|
|
}
|
|
};
|
|
|
|
// Check if Shift 1 is full
|
|
const isShift1Full = (clinic) => {
|
|
if (!clinic || !clinic.shifts || clinic.shifts.length === 0) return true;
|
|
const shift1 = clinic.shifts.find(s => s.name === "Shift 1");
|
|
return shift1 ? shift1.quota === 0 : true;
|
|
};
|
|
|
|
// Get current shift number (for demo purposes, assuming Shift 1 is current)
|
|
const getCurrentShiftNumber = () => {
|
|
return 1; // In real app, this would be dynamic based on current time
|
|
};
|
|
|
|
// Get current shift quota
|
|
const getCurrentShiftQuota = () => {
|
|
if (!selectedClinic.value || !selectedClinic.value.shifts) return 0;
|
|
const currentShift = selectedClinic.value.shifts.find(s => s.name === "Shift 1");
|
|
return currentShift ? currentShift.quota : 0;
|
|
};
|
|
|
|
// Get available shifts for booking form (excluding current shift)
|
|
const getAvailableShiftsForBooking = () => {
|
|
if (!selectedClinic.value || !selectedClinic.value.shifts) return [];
|
|
|
|
const selectedDate = bookingForm.value.date;
|
|
const today = new Date().toISOString().substring(0, 10);
|
|
const isToday = selectedDate === today;
|
|
|
|
// If today, exclude current shift (Shift 1)
|
|
// If future date, show all shifts with available quota
|
|
return selectedClinic.value.shifts
|
|
.filter(shift => {
|
|
if (isToday) {
|
|
// Exclude Shift 1 for today
|
|
return shift.name !== "Shift 1" && shift.quota > 0;
|
|
} else {
|
|
// Show all shifts with quota for future dates
|
|
return shift.quota > 0;
|
|
}
|
|
})
|
|
.map(shift => ({
|
|
label: `${shift.name} (Kuota: ${shift.quota} pasien)`,
|
|
value: shift.name
|
|
}));
|
|
};
|
|
|
|
// Get minimum date (today)
|
|
const getMinDate = () => {
|
|
return new Date().toISOString().substring(0, 10);
|
|
};
|
|
|
|
// Get maximum date (2 weeks from today)
|
|
const getMaxDate = () => {
|
|
const today = new Date();
|
|
const maxDate = new Date(today);
|
|
maxDate.setDate(today.getDate() + 14); // 2 weeks = 14 days
|
|
return maxDate.toISOString().substring(0, 10);
|
|
};
|
|
|
|
const showSnackbar = (text, color = "success") => {
|
|
snackbarText.value = text;
|
|
snackbarColor.value = color;
|
|
snackbar.value = true;
|
|
};
|
|
|
|
const selectClinic = (clinic) => {
|
|
if (clinic.available) {
|
|
selectedClinic.value = clinic;
|
|
showVisitTypeDialog.value = true;
|
|
}
|
|
};
|
|
|
|
const selectVisitType = (type) => {
|
|
selectedVisitType.value = type;
|
|
showVisitTypeDialog.value = false;
|
|
|
|
if (type === "SEKARANG") {
|
|
showPaymentTypeDialog.value = true;
|
|
} else if (type === "JADWAL_LAIN") {
|
|
// Set default to tomorrow
|
|
const tomorrow = new Date();
|
|
tomorrow.setDate(tomorrow.getDate() + 1);
|
|
const tomorrowStr = tomorrow.toISOString().substring(0, 10);
|
|
|
|
bookingForm.value = {
|
|
date: tomorrowStr,
|
|
shift: "",
|
|
payment: null,
|
|
};
|
|
showBookingFormDialog.value = true;
|
|
}
|
|
};
|
|
|
|
const selectPaymentType = (paymentType) => {
|
|
showPaymentTypeDialog.value = false;
|
|
const message = `Pendaftaran **${selectedClinic.value.name}** untuk kunjungan **HARI INI** dengan pembayaran **${paymentType}** berhasil diproses.`;
|
|
showSnackbar(message, "success");
|
|
console.log(
|
|
"Proceeding to registration for:",
|
|
selectedClinic.value.name,
|
|
"Type: SEKARANG",
|
|
"Payment:",
|
|
paymentType
|
|
);
|
|
selectedClinic.value = null;
|
|
};
|
|
|
|
const submitBooking = () => {
|
|
if (
|
|
!bookingForm.value.date ||
|
|
!bookingForm.value.shift ||
|
|
!bookingForm.value.payment
|
|
) {
|
|
showSnackbar("Mohon lengkapi semua field.", "error");
|
|
return;
|
|
}
|
|
|
|
showBookingFormDialog.value = false;
|
|
const message = `Jadwal kunjungan **${selectedClinic.value.name}** pada ${bookingForm.value.date} - ${bookingForm.value.shift} (**${bookingForm.value.payment}**) berhasil disimpan.`;
|
|
showSnackbar(message, "success");
|
|
console.log(
|
|
"Submitted booking for:",
|
|
selectedClinic.value.name,
|
|
bookingForm.value
|
|
);
|
|
selectedClinic.value = null;
|
|
};
|
|
|
|
const refreshData = () => {
|
|
loading.value = true;
|
|
setTimeout(() => {
|
|
loading.value = false;
|
|
showSnackbar("Status klinik berhasil diperbarui", "success");
|
|
}, 1000);
|
|
};
|
|
|
|
onMounted(() => {
|
|
refreshData();
|
|
});
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.anjungan-container {
|
|
background: var(--color-neutral-300);
|
|
min-height: 100vh;
|
|
padding: 16px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.page-header {
|
|
background: linear-gradient(135deg, var(--color-primary-600) 0%, var(--color-primary-700) 100%);
|
|
border-radius: 12px;
|
|
margin-bottom: 16px;
|
|
box-shadow: 0 4px 16px rgba(255, 155, 27, 0.25);
|
|
}
|
|
|
|
.header-content {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 20px 24px;
|
|
color: var(--color-neutral-100);
|
|
gap: 32px;
|
|
}
|
|
|
|
.header-left {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 20px;
|
|
}
|
|
|
|
.header-icon {
|
|
background: rgba(255, 255, 255, 0.2);
|
|
border-radius: 12px;
|
|
padding: 12px;
|
|
backdrop-filter: blur(10px);
|
|
}
|
|
|
|
.page-title {
|
|
font-size: 26px;
|
|
font-weight: 700;
|
|
margin: 0;
|
|
color: var(--color-neutral-100);
|
|
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.page-subtitle {
|
|
margin: 4px 0 0 0;
|
|
opacity: 0.95;
|
|
font-size: 14px;
|
|
color: var(--color-neutral-100);
|
|
}
|
|
|
|
.header-right {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.info-guide {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
|
|
.guide-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
font-size: 14px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.guide-number {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 26px;
|
|
height: 26px;
|
|
background: rgba(255, 255, 255, 0.3);
|
|
border-radius: 50%;
|
|
font-weight: 700;
|
|
font-size: 14px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.guide-text {
|
|
color: var(--color-neutral-100);
|
|
font-weight: 600;
|
|
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
.main-content-card {
|
|
border-radius: 12px;
|
|
border: 1px solid var(--color-neutral-500);
|
|
background: var(--color-neutral-100);
|
|
max-height: calc(100vh - 180px);
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.main-content-card .v-card-text {
|
|
padding: 16px !important;
|
|
}
|
|
|
|
/* CLINIC CARD - Improved Hierarchy */
|
|
.clinic-card {
|
|
cursor: pointer;
|
|
border-radius: 12px !important;
|
|
height: 180px;
|
|
background: var(--color-neutral-100);
|
|
border: 3px solid var(--color-neutral-500);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.clinic-available {
|
|
border-color: var(--color-success-600);
|
|
background: var(--color-success-200);
|
|
}
|
|
|
|
.clinic-closed {
|
|
opacity: 0.65;
|
|
cursor: not-allowed;
|
|
border-color: var(--color-danger-600);
|
|
background: var(--color-danger-200);
|
|
}
|
|
|
|
.clinic-content {
|
|
padding: 18px !important;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: flex-start;
|
|
position: relative;
|
|
gap: 8px;
|
|
}
|
|
|
|
/* HIERARCHY 1: Clinic Name - MOST PROMINENT */
|
|
.clinic-name {
|
|
font-size: 22px;
|
|
font-weight: 700;
|
|
color: var(--color-neutral-900);
|
|
margin: 0;
|
|
line-height: 1.2;
|
|
padding-right: 10px;
|
|
}
|
|
|
|
.clinic-closed .clinic-name {
|
|
color: var(--color-neutral-700);
|
|
}
|
|
|
|
/* HIERARCHY 2: Doctor Info */
|
|
.doctor-info {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 6px;
|
|
font-size: 12px;
|
|
color: var(--color-primary-700);
|
|
font-weight: 600;
|
|
line-height: 1.4;
|
|
padding-right: 70px;
|
|
flex: 1;
|
|
}
|
|
|
|
.clinic-closed .doctor-info {
|
|
color: var(--color-neutral-600);
|
|
}
|
|
|
|
/* HIERARCHY 3: Schedule Info - Fixed Bottom Left */
|
|
.schedule-info {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
font-size: 12px;
|
|
color: var(--color-neutral-700);
|
|
font-weight: 500;
|
|
position: absolute;
|
|
bottom: 18px;
|
|
left: 18px;
|
|
}
|
|
|
|
.clinic-closed .schedule-info {
|
|
color: var(--color-neutral-600);
|
|
}
|
|
|
|
/* HIERARCHY 4: Icon - Subtle, Bottom Right */
|
|
.clinic-icon-wrapper {
|
|
position: absolute;
|
|
bottom: 14px;
|
|
right: 14px;
|
|
width: 56px;
|
|
height: 56px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: rgba(255, 255, 255, 0.9);
|
|
border-radius: 50%;
|
|
border: 2px solid var(--color-neutral-400);
|
|
}
|
|
|
|
.clinic-closed .clinic-icon-wrapper {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
/* Empty State */
|
|
.empty-state {
|
|
text-align: center;
|
|
padding: 48px 24px;
|
|
}
|
|
|
|
.empty-title {
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
color: var(--color-neutral-700);
|
|
margin: 16px 0 8px 0;
|
|
}
|
|
|
|
.empty-subtitle {
|
|
font-size: 14px;
|
|
color: var(--color-neutral-600);
|
|
margin: 0;
|
|
}
|
|
|
|
/* Help Dialog Styles */
|
|
.help-content {
|
|
font-size: 14px;
|
|
}
|
|
|
|
.help-title {
|
|
font-size: 18px;
|
|
font-weight: 700;
|
|
color: var(--color-neutral-900);
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.help-step {
|
|
display: flex;
|
|
gap: 16px;
|
|
margin-bottom: 20px;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.step-number {
|
|
flex-shrink: 0;
|
|
width: 36px;
|
|
height: 36px;
|
|
background: var(--color-primary-600);
|
|
color: white;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-weight: 700;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.step-content h4 {
|
|
font-size: 15px;
|
|
font-weight: 700;
|
|
color: var(--color-neutral-900);
|
|
margin: 0 0 6px 0;
|
|
}
|
|
|
|
.step-content p {
|
|
font-size: 13px;
|
|
color: var(--color-neutral-700);
|
|
margin: 0;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.help-note {
|
|
background: var(--color-primary-100);
|
|
padding: 16px;
|
|
border-radius: 8px;
|
|
display: flex;
|
|
gap: 12px;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.help-note p {
|
|
margin: 0;
|
|
font-size: 13px;
|
|
color: var(--color-neutral-800);
|
|
line-height: 1.6;
|
|
}
|
|
|
|
/* Quota Section */
|
|
.quota-section {
|
|
margin-bottom: 16px;
|
|
|
|
p {
|
|
margin-bottom: 12px;
|
|
font-size: 15px;
|
|
}
|
|
}
|
|
|
|
.current-quota-display {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: 20px;
|
|
background: linear-gradient(135deg, var(--color-success-100) 0%, var(--color-success-200) 100%);
|
|
border-radius: 12px;
|
|
border: 2px solid var(--color-success-400);
|
|
margin-bottom: 12px;
|
|
|
|
&.quota-empty {
|
|
background: linear-gradient(135deg, var(--color-neutral-200) 0%, var(--color-neutral-300) 100%);
|
|
border-color: var(--color-neutral-500);
|
|
|
|
.quota-large-number {
|
|
color: var(--color-neutral-600);
|
|
}
|
|
|
|
.quota-label {
|
|
color: var(--color-neutral-700);
|
|
}
|
|
}
|
|
}
|
|
|
|
.quota-large-number {
|
|
font-size: 48px;
|
|
font-weight: 700;
|
|
color: var(--color-success-700);
|
|
line-height: 1;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.quota-label {
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
color: var(--color-success-800);
|
|
}
|
|
|
|
.disabled-hint {
|
|
font-size: 11px;
|
|
color: var(--color-danger-600);
|
|
text-align: center;
|
|
margin: 4px 0 0 0;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.btn-disabled {
|
|
opacity: 0.5 !important;
|
|
background-color: var(--color-neutral-500) !important;
|
|
}
|
|
|
|
.quota-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 8px;
|
|
}
|
|
|
|
.quota-item {
|
|
padding: 10px 12px;
|
|
background: var(--color-success-100);
|
|
border-radius: 8px;
|
|
border: 2px solid var(--color-success-300);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
|
|
&.quota-full {
|
|
background: var(--color-danger-100);
|
|
border-color: var(--color-danger-300);
|
|
opacity: 0.7;
|
|
|
|
.quota-shift, .quota-number {
|
|
color: var(--color-danger-700);
|
|
}
|
|
}
|
|
}
|
|
|
|
.quota-shift {
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
color: var(--color-success-700);
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.quota-number {
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
color: var(--color-success-800);
|
|
}
|
|
|
|
/* Dialog Styles */
|
|
.dialog-card {
|
|
border-radius: 16px !important;
|
|
}
|
|
|
|
.dialog-header {
|
|
background: var(--color-primary-600);
|
|
color: var(--color-neutral-100);
|
|
padding: 20px 24px;
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 18px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.dialog-header-simple {
|
|
padding: 20px 24px;
|
|
font-size: 18px;
|
|
font-weight: 700;
|
|
color: var(--color-neutral-900);
|
|
}
|
|
|
|
.dialog-content {
|
|
text-align: center;
|
|
}
|
|
|
|
.dialog-icon {
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
.dialog-clinic-name {
|
|
font-size: 22px;
|
|
font-weight: 700;
|
|
color: var(--color-neutral-900);
|
|
margin: 8px 0;
|
|
}
|
|
|
|
.dialog-subtitle {
|
|
font-size: 14px;
|
|
color: var(--color-neutral-700);
|
|
margin: 0;
|
|
}
|
|
|
|
.dialog-info {
|
|
text-align: left;
|
|
font-size: 14px;
|
|
|
|
p {
|
|
margin: 8px 0;
|
|
color: var(--color-neutral-800);
|
|
}
|
|
|
|
strong {
|
|
color: var(--color-neutral-900);
|
|
}
|
|
}
|
|
|
|
.doctor-list-section {
|
|
margin-bottom: 12px;
|
|
|
|
p {
|
|
margin-bottom: 8px;
|
|
}
|
|
}
|
|
|
|
.doctor-list {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
|
|
li {
|
|
padding: 6px 12px;
|
|
margin: 4px 0;
|
|
background: var(--color-primary-100);
|
|
border-radius: 6px;
|
|
color: var(--color-neutral-800);
|
|
font-size: 13px;
|
|
}
|
|
}
|
|
|
|
.status-available {
|
|
color: var(--color-success-600);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.payment-btn {
|
|
font-weight: 700;
|
|
height: 64px;
|
|
font-size: 16px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
/* Responsive Design */
|
|
@media (max-width: 1024px) {
|
|
.header-content {
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
text-align: center;
|
|
padding: 18px 20px;
|
|
}
|
|
|
|
.header-left {
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
}
|
|
|
|
.header-right {
|
|
width: 100%;
|
|
}
|
|
|
|
.info-guide {
|
|
width: 100%;
|
|
}
|
|
|
|
.guide-item {
|
|
font-size: 12px;
|
|
justify-content: center;
|
|
}
|
|
|
|
.guide-number {
|
|
width: 22px;
|
|
height: 22px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.page-title {
|
|
font-size: 24px;
|
|
}
|
|
|
|
.clinic-card {
|
|
height: 170px;
|
|
}
|
|
|
|
.clinic-name {
|
|
font-size: 20px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.anjungan-container {
|
|
padding: 12px;
|
|
}
|
|
|
|
.header-content {
|
|
padding: 16px;
|
|
}
|
|
|
|
.page-title {
|
|
font-size: 22px;
|
|
}
|
|
|
|
.header-icon {
|
|
padding: 10px;
|
|
}
|
|
|
|
.clinic-card {
|
|
height: 165px;
|
|
}
|
|
|
|
.clinic-name {
|
|
font-size: 19px;
|
|
}
|
|
|
|
.clinic-icon-wrapper {
|
|
width: 50px;
|
|
height: 50px;
|
|
}
|
|
|
|
.clinic-icon-wrapper .v-icon {
|
|
font-size: 32px !important;
|
|
}
|
|
|
|
.doctor-info, .schedule-info {
|
|
font-size: 11px;
|
|
}
|
|
|
|
.doctor-info {
|
|
padding-right: 60px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 600px) {
|
|
.clinic-card {
|
|
height: 160px;
|
|
}
|
|
|
|
.page-title {
|
|
font-size: 20px;
|
|
}
|
|
|
|
.clinic-name {
|
|
font-size: 18px;
|
|
}
|
|
|
|
.guide-item {
|
|
font-size: 11px;
|
|
}
|
|
|
|
.guide-number {
|
|
width: 20px;
|
|
height: 20px;
|
|
font-size: 11px;
|
|
}
|
|
}
|
|
</style> |