663 lines
21 KiB
Vue
663 lines
21 KiB
Vue
<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">
|
|
<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>
|
|
|
|
<v-card elevation="2" 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="2"
|
|
>
|
|
<v-card-text class="text-center pa-4">
|
|
<div class="mb-6">
|
|
<v-chip
|
|
:color="clinic.available ? 'success' : 'error'"
|
|
size="small"
|
|
variant="flat"
|
|
class="mr-2"
|
|
>
|
|
{{ clinic.available ? 'TERSEDIA' : 'TUTUP' }}
|
|
</v-chip>
|
|
<v-chip
|
|
size="small"
|
|
:color="clinic.available ? 'info' : 'error'"
|
|
variant="outlined"
|
|
>
|
|
{{ clinic.shift }}
|
|
</v-chip>
|
|
</div>
|
|
|
|
<div class="clinic-icon-wrapper mb-6">
|
|
<v-icon
|
|
:icon="clinic.icon"
|
|
size="40"
|
|
:color="clinic.available ? 'success' : 'error'"
|
|
></v-icon>
|
|
</div>
|
|
|
|
<h3 class="text-h6 font-weight-bold mb-2">
|
|
{{ clinic.name }}
|
|
</h3>
|
|
|
|
<p v-if="clinic.subtitle" class="text-caption text-grey-darken-1 mb-2">
|
|
{{ clinic.subtitle }}
|
|
</p>
|
|
|
|
<div class="shift-info">
|
|
<span v-if="clinic.schedule" class="text-caption text-grey-darken-1">
|
|
{{ clinic.schedule }}
|
|
</span>
|
|
</div>
|
|
</v-card-text>
|
|
</v-card>
|
|
</v-col>
|
|
</v-row>
|
|
|
|
<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>
|
|
|
|
<v-dialog v-model="showVisitTypeDialog" max-width="400" persistent>
|
|
<v-card class="text-center" :style="{ borderRadius: '16px' }">
|
|
<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 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-divider />
|
|
<v-card-text class="pa-4">
|
|
<v-btn
|
|
color="primary"
|
|
class="mb-3"
|
|
size="large"
|
|
block
|
|
@click="selectVisitType('SEKARANG')"
|
|
>
|
|
SEKARANG
|
|
</v-btn>
|
|
<v-btn
|
|
color="warning"
|
|
class="mb-3"
|
|
size="large"
|
|
block
|
|
@click="selectVisitType('PESAN')"
|
|
>
|
|
PESAN
|
|
</v-btn>
|
|
<v-btn
|
|
color="error"
|
|
size="large"
|
|
block
|
|
@click="selectVisitType('FAST TRACK')"
|
|
>
|
|
FAST TRACK
|
|
</v-btn>
|
|
</v-card-text>
|
|
<v-card-actions class="justify-center pa-4 pt-0">
|
|
<v-btn variant="outlined" color="grey-darken-1" @click="showVisitTypeDialog = false">
|
|
Tutup
|
|
</v-btn>
|
|
</v-card-actions>
|
|
</v-card>
|
|
</v-dialog>
|
|
|
|
<v-dialog v-model="showPaymentTypeDialog" max-width="400" persistent>
|
|
<v-card class="text-center" :style="{ borderRadius: '16px' }">
|
|
<v-card-title class="headline pa-4">Jenis Pembayaran</v-card-title>
|
|
<v-divider />
|
|
<v-card-text class="pa-4">
|
|
<v-btn
|
|
color="success"
|
|
class="mb-3 text-h6"
|
|
size="x-large"
|
|
block
|
|
@click="selectPaymentType('BPJS')"
|
|
:style="{ height: '80px', fontWeight: 'bold' }"
|
|
>
|
|
BPJS
|
|
</v-btn>
|
|
<v-btn
|
|
color="blue-grey-darken-2"
|
|
class="text-h6"
|
|
size="x-large"
|
|
block
|
|
@click="selectPaymentType('UMUM')"
|
|
:style="{ height: '80px', fontWeight: 'bold' }"
|
|
>
|
|
UMUM / JKMM / SPM / DLL
|
|
</v-btn>
|
|
</v-card-text>
|
|
<v-card-actions class="justify-center pa-4 pt-0">
|
|
<v-btn variant="outlined" color="grey-darken-1" @click="showPaymentTypeDialog = false">
|
|
Tutup
|
|
</v-btn>
|
|
</v-card-actions>
|
|
</v-card>
|
|
</v-dialog>
|
|
|
|
<v-dialog v-model="showBookingFormDialog" max-width="500" persistent>
|
|
<v-card :style="{ borderRadius: '16px' }">
|
|
<v-card-title class="headline pa-4 bg-primary text-white">
|
|
Pemesanan Antrian Poliklinik
|
|
</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"
|
|
></v-text-field>
|
|
|
|
<v-select
|
|
v-model="bookingForm.shift"
|
|
:items="['Shift 1', 'Shift 2']"
|
|
label="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="grey-darken-1">
|
|
Tutup
|
|
</v-btn>
|
|
<v-btn color="success" variant="flat" @click="submitBooking">
|
|
Simpan
|
|
</v-btn>
|
|
</v-card-actions>
|
|
</v-card>
|
|
</v-dialog>
|
|
|
|
<v-dialog v-model="showFastTrackFormDialog" max-width="500" persistent>
|
|
<v-card :style="{ borderRadius: '16px' }">
|
|
<v-card-title class="headline pa-4 bg-primary text-white">
|
|
Form Fast Track
|
|
</v-card-title>
|
|
<v-card-text class="pa-6">
|
|
<v-form @submit.prevent="submitFastTrack">
|
|
<v-text-field
|
|
v-model="fastTrackForm.guarantor"
|
|
label="Penanggung Jawab"
|
|
variant="outlined"
|
|
density="compact"
|
|
required
|
|
class="mb-3"
|
|
></v-text-field>
|
|
|
|
<v-text-field
|
|
v-model="fastTrackForm.noRek"
|
|
label="No Rekam Medis (Jika Ada)"
|
|
variant="outlined"
|
|
density="compact"
|
|
class="mb-3"
|
|
></v-text-field>
|
|
|
|
<v-text-field
|
|
v-model="fastTrackForm.patientName"
|
|
label="Nama Pasien"
|
|
variant="outlined"
|
|
density="compact"
|
|
required
|
|
class="mb-3"
|
|
></v-text-field>
|
|
|
|
<v-textarea
|
|
v-model="fastTrackForm.reason"
|
|
label="Alasan Fast Track"
|
|
variant="outlined"
|
|
density="compact"
|
|
required
|
|
rows="3"
|
|
class="mb-3"
|
|
></v-textarea>
|
|
|
|
<v-select
|
|
v-model="fastTrackForm.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="showFastTrackFormDialog = false" variant="outlined" color="grey-darken-1">
|
|
Tutup
|
|
</v-btn>
|
|
<v-btn color="success" variant="flat" @click="submitFastTrack">
|
|
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, // Disables the layout for this specific page
|
|
})
|
|
|
|
// Reactive data (tambahan untuk dialog baru)
|
|
const loading = ref(false)
|
|
const selectedStatus = ref(null)
|
|
const searchQuery = ref('')
|
|
const showVisitTypeDialog = ref(false) // Dialog: Pilih Kunjungan
|
|
const showPaymentTypeDialog = ref(false) // Dialog: Jenis Pembayaran (Sekarang)
|
|
const showBookingFormDialog = ref(false) // Dialog: Form Pesan
|
|
const showFastTrackFormDialog = ref(false) // Dialog: Form Fast Track
|
|
const selectedClinic = ref(null)
|
|
const selectedVisitType = ref(null)
|
|
const snackbar = ref(false)
|
|
const snackbarText = ref('')
|
|
const snackbarColor = ref('success')
|
|
|
|
// Form data models
|
|
const bookingForm = ref({
|
|
date: new Date().toISOString().substring(0, 10),
|
|
shift: 'Shift 1',
|
|
payment: null,
|
|
})
|
|
const fastTrackForm = ref({
|
|
guarantor: '',
|
|
noRek: '',
|
|
patientName: '',
|
|
reason: '',
|
|
payment: null,
|
|
})
|
|
|
|
|
|
// Options (Tidak Berubah)
|
|
const statusOptions = ['Tersedia', 'Tutup']
|
|
|
|
// Clinic data (Tidak Berubah)
|
|
const clinics = ref([
|
|
// ... data klinik ... (dibiarkan seperti semula)
|
|
{ id: 1, name: 'ANAK', subtitle: '', icon: 'mdi-baby-face', shift: 'SHIFT 1', schedule: 'Mulai Pukul 07:00', available: true, },
|
|
{ id: 2, name: 'ANESTESI', subtitle: '', icon: 'mdi-sleep', shift: 'SHIFT 1', schedule: 'Mulai Pukul 07:00', available: true, },
|
|
{ id: 3, name: 'BEDAH', subtitle: '', icon: 'mdi-medical-bag', shift: 'SHIFT 1', schedule: 'Mulai Pukul 07:00', available: true, },
|
|
{ id: 4, name: 'GERIATRI', subtitle: '', icon: 'mdi-account-supervisor', shift: 'SHIFT 1', schedule: 'Mulai Pukul 07:00', available: true, },
|
|
{ id: 5, name: 'GIGI DAN MULUT', subtitle: '', icon: 'mdi-tooth', shift: 'SHIFT 1', schedule: 'Mulai Pukul 07:00', available: true, },
|
|
{ id: 6, name: 'GIZI', subtitle: '', icon: 'mdi-food-apple', shift: 'SHIFT 1', schedule: 'Mulai Pukul 07:00', available: true, },
|
|
{ id: 7, name: 'HEMATO ONKOLOGI MEDIS', subtitle: '', icon: 'mdi-water', shift: 'TUTUP', schedule: '', available: false, },
|
|
{ id: 8, name: 'IPD (PENYAKIT DALAM)', subtitle: '', icon: 'mdi-hospital', shift: 'SHIFT 1', schedule: 'Mulai Pukul 07:00', available: true, },
|
|
{ id: 9, name: 'JANTUNG (CARDIOLOGI)', subtitle: '', icon: 'mdi-heart-pulse', shift: 'SHIFT 1', schedule: 'Mulai Pukul 07:00', available: true, },
|
|
{ id: 10, name: 'JIWA', subtitle: '', icon: 'mdi-brain', shift: 'SHIFT 1', schedule: 'Mulai Pukul 07:00', available: true, },
|
|
{ id: 11, name: 'KANDUNGAN', subtitle: '', icon: 'mdi-human-pregnant', shift: 'SHIFT 1', schedule: 'Mulai Pukul 07:00', available: true, },
|
|
{ id: 12, name: 'KEMOTERAPI', subtitle: '', icon: 'mdi-needle', shift: 'SHIFT 1', schedule: 'Mulai Pukul 07:00', available: true, },
|
|
{ id: 13, name: 'KOMPLEMENTER (NYERI)', subtitle: '', icon: 'mdi-leaf', shift: 'SHIFT 1', schedule: 'Mulai Pukul 07:00', available: true, },
|
|
{ id: 14, name: 'KULIT KELAMIN', subtitle: '', icon: 'mdi-hand-back-right', shift: 'SHIFT 1', schedule: 'Mulai Pukul 07:00', available: true, },
|
|
{ id: 15, name: 'MATA', subtitle: '', icon: 'mdi-eye', shift: 'SHIFT 1', schedule: 'Mulai Pukul 07:00', available: true, },
|
|
{ id: 16, name: 'MCU', subtitle: '', icon: 'mdi-clipboard-check', shift: 'SHIFT 1', schedule: 'Mulai Pukul 07:00', available: true, },
|
|
{ id: 17, name: 'ONKOLOGI', subtitle: '', icon: 'mdi-ribbon', shift: 'SHIFT 1', schedule: 'Mulai Pukul 07:00', available: true, },
|
|
{ id: 18, name: 'PARU', subtitle: '', icon: 'mdi-lungs', shift: 'SHIFT 1', schedule: 'Mulai Pukul 07:00', available: true, },
|
|
{ id: 19, name: 'R. TINDAKAN (EMG, ECG, DLL)', subtitle: '', icon: 'mdi-monitor-heart-rate', shift: 'SHIFT 1', schedule: 'Mulai Pukul 07:00', available: true, },
|
|
{ id: 20, name: 'RADIOTERAPI', subtitle: '', icon: 'mdi-radioactive', shift: 'SHIFT 1', schedule: 'Mulai Pukul 07:00', available: true, },
|
|
{ id: 21, name: 'REHAB MEDIK', subtitle: '', icon: 'mdi-human-cane', shift: 'SHIFT 1', schedule: 'Mulai Pukul 07:00', available: true, },
|
|
{ id: 22, name: 'SARAF (NEUROLOGI)', subtitle: '', icon: 'mdi-head-cog', shift: 'SHIFT 1', schedule: 'Mulai Pukul 07:00', available: false, },
|
|
{ id: 23, name: 'THT', subtitle: '', icon: 'mdi-ear-hearing', shift: 'SHIFT 1', schedule: 'Mulai Pukul 07:00', available: true, }
|
|
])
|
|
|
|
// Computed properties (Tidak Berubah)
|
|
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
|
|
}
|
|
|
|
// 1. Memilih Klinik
|
|
const selectClinic = (clinic) => {
|
|
if (clinic.available) {
|
|
selectedClinic.value = clinic
|
|
showVisitTypeDialog.value = true // Tampilkan dialog Pilih Kunjungan
|
|
}
|
|
}
|
|
|
|
// 2. Memilih Jenis Kunjungan (Sekarang, Pesan, Fast Track)
|
|
const selectVisitType = (type) => {
|
|
selectedVisitType.value = type
|
|
showVisitTypeDialog.value = false // Tutup dialog jenis kunjungan
|
|
|
|
if (type === 'SEKARANG') {
|
|
showPaymentTypeDialog.value = true // Lanjut ke dialog Jenis Pembayaran
|
|
} else if (type === 'PESAN') {
|
|
// Reset form booking sebelum ditampilkan
|
|
bookingForm.value = {
|
|
date: new Date().toISOString().substring(0, 10),
|
|
shift: 'Shift 1',
|
|
payment: null,
|
|
}
|
|
showBookingFormDialog.value = true // Tampilkan form Pesan
|
|
} else if (type === 'FAST TRACK') {
|
|
// Reset form fast track sebelum ditampilkan
|
|
fastTrackForm.value = {
|
|
guarantor: '',
|
|
noRek: '',
|
|
patientName: '',
|
|
reason: '',
|
|
payment: null,
|
|
}
|
|
showFastTrackFormDialog.value = true // Tampilkan form Fast Track
|
|
}
|
|
}
|
|
|
|
// 3. Memilih Jenis Pembayaran (untuk SEKARANG)
|
|
const selectPaymentType = (paymentType) => {
|
|
showPaymentTypeDialog.value = false
|
|
const message = `Pendaftaran **${selectedClinic.value.name}** untuk kunjungan **SEKARANG** dengan pembayaran **${paymentType}** berhasil diproses.`
|
|
showSnackbar(message, 'success')
|
|
console.log('Proceeding to registration for:', selectedClinic.value.name, 'Type: SEKARANG', 'Payment:', paymentType)
|
|
selectedClinic.value = null; // Reset
|
|
}
|
|
|
|
// 4. Submit Form Pesan
|
|
const submitBooking = () => {
|
|
if (!bookingForm.value.date || !bookingForm.value.shift || !bookingForm.value.payment) {
|
|
showSnackbar('Mohon lengkapi semua field Pemesanan.', 'error')
|
|
return
|
|
}
|
|
|
|
showBookingFormDialog.value = false
|
|
const message = `Pemesanan antrian **${selectedClinic.value.name}** pada ${bookingForm.value.date} (**${bookingForm.value.payment}**) berhasil disimpan.`
|
|
showSnackbar(message, 'success')
|
|
console.log('Submitted booking for:', selectedClinic.value.name, bookingForm.value)
|
|
selectedClinic.value = null; // Reset
|
|
}
|
|
|
|
// 5. Submit Form Fast Track
|
|
const submitFastTrack = () => {
|
|
if (!fastTrackForm.value.guarantor || !fastTrackForm.value.patientName || !fastTrackForm.value.reason || !fastTrackForm.value.payment) {
|
|
showSnackbar('Mohon lengkapi semua field Fast Track yang wajib diisi.', 'error')
|
|
return
|
|
}
|
|
showFastTrackFormDialog.value = false
|
|
const message = `Permintaan Fast Track **${selectedClinic.value.name}** atas nama ${fastTrackForm.value.patientName} (**${fastTrackForm.value.payment}**) telah diajukan.`
|
|
showSnackbar(message, 'success')
|
|
console.log('Submitted Fast Track for:', selectedClinic.value.name, fastTrackForm.value)
|
|
selectedClinic.value = null; // Reset
|
|
}
|
|
|
|
const refreshData = () => {
|
|
loading.value = true
|
|
setTimeout(() => {
|
|
loading.value = false
|
|
showSnackbar('Status klinik berhasil diperbarui', 'success')
|
|
}, 1000)
|
|
}
|
|
|
|
// Lifecycle
|
|
onMounted(() => {
|
|
refreshData()
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
/* Style yang sudah ada (Tidak Berubah) */
|
|
.anjungan-container {
|
|
background: #f5f7fa;
|
|
min-height: 100vh;
|
|
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 {
|
|
cursor: pointer;
|
|
border-radius: 16px !important;
|
|
height: 240px;
|
|
background: white;
|
|
}
|
|
|
|
.clinic-available {
|
|
border-left: 6px solid #4CAF50;
|
|
}
|
|
|
|
.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: 70px;
|
|
height: 70px;
|
|
background: rgba(76, 175, 80, 0.1);
|
|
border-radius: 50%;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.clinic-closed .clinic-icon-wrapper {
|
|
background: rgba(244, 67, 54, 0.1);
|
|
}
|
|
|
|
.shift-info {
|
|
margin-top: 8px;
|
|
}
|
|
|
|
/* Responsive Design (Tidak Berubah) */
|
|
@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> |