157 lines
3.9 KiB
Vue
157 lines
3.9 KiB
Vue
<template>
|
|
<v-dialog v-model="internalModel" max-width="500px">
|
|
<v-card class="dialog-card overflow-hidden rounded-xl" elevation="0">
|
|
<!-- Solid Blue Header -->
|
|
<v-card-title class="bg-primary-600 text-white py-4 px-6 d-flex justify-space-between align-center">
|
|
<div class="d-flex align-center">
|
|
<v-icon start icon="mdi-alert-circle-outline" class="mr-2"></v-icon>
|
|
<span class="text-h6 font-weight-bold">Konfirmasi Selesai</span>
|
|
</div>
|
|
<v-btn icon="mdi-close" variant="text" size="small" @click="internalModel = false" class="text-white"></v-btn>
|
|
</v-card-title>
|
|
|
|
<v-card-text class="dialog-content-premium pa-6 text-center">
|
|
<div class="text-center mb-6 text-uppercase font-weight-bold text-caption text-neutral-600" style="letter-spacing: 1px;">
|
|
Antrean Belum Dibuat
|
|
</div>
|
|
|
|
<p class="text-body-1 mb-6">
|
|
Tiket antrean ruang atau penunjang <strong>belum dibuat</strong> untuk pasien ini.
|
|
</p>
|
|
|
|
<div class="comparison-container mb-6 mx-auto" style="max-width: 220px; justify-content: center;">
|
|
<div class="comparison-item current">
|
|
<div class="item-label text-center">PASIEN AKTIF</div>
|
|
<div class="item-card">
|
|
<div class="item-number text-danger-700">{{ patient?.noAntrian?.split(' |')[0] || '-' }}</div>
|
|
<div class="item-status">Sedang Diproses</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<p class="text-body-2 text-neutral-600">
|
|
Apakah Anda yakin ingin menyelesaikan pelayanan untuk pasien ini?
|
|
</p>
|
|
</v-card-text>
|
|
|
|
<v-divider />
|
|
|
|
<v-card-actions class="pa-4 bg-light justify-center">
|
|
<v-btn
|
|
class="px-8 font-weight-bold rounded-lg text-none btn-batal"
|
|
variant="outlined"
|
|
@click="internalModel = false"
|
|
size="large"
|
|
>
|
|
Batal
|
|
</v-btn>
|
|
<v-btn
|
|
class="px-8 font-weight-bold ml-4 rounded-lg text-none btn-confirm"
|
|
variant="flat"
|
|
@click="confirm"
|
|
size="large"
|
|
elevation="2"
|
|
>
|
|
Ya, Selesaikan
|
|
</v-btn>
|
|
</v-card-actions>
|
|
</v-card>
|
|
</v-dialog>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed } from 'vue';
|
|
|
|
const props = defineProps({
|
|
modelValue: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
patient: {
|
|
type: Object,
|
|
default: null
|
|
}
|
|
});
|
|
|
|
const emit = defineEmits(['update:modelValue', 'confirm']);
|
|
|
|
const internalModel = computed({
|
|
get: () => props.modelValue,
|
|
set: (val) => emit('update:modelValue', val)
|
|
});
|
|
|
|
const confirm = () => {
|
|
emit('confirm');
|
|
internalModel.value = false;
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.dialog-card {
|
|
/* Remove border to prevent white outline around blue header */
|
|
}
|
|
.bg-light {
|
|
background-color: var(--color-neutral-50) !important;
|
|
}
|
|
|
|
.comparison-container {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
background: white;
|
|
padding: 16px;
|
|
border-radius: 16px;
|
|
border: 1px solid var(--color-neutral-300);
|
|
}
|
|
|
|
.comparison-item {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
|
|
.item-label {
|
|
font-size: 10px;
|
|
font-weight: 800;
|
|
color: var(--color-neutral-600);
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
.item-card {
|
|
background: white;
|
|
padding: 12px;
|
|
border-radius: 12px;
|
|
border: 1px solid var(--color-neutral-400);
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
|
|
text-align: center;
|
|
}
|
|
|
|
.item-number {
|
|
font-size: 24px;
|
|
font-weight: 800;
|
|
line-height: 1;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.item-status {
|
|
font-size: 11px;
|
|
color: var(--color-neutral-600);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.text-danger-700 {
|
|
color: var(--color-danger-700) !important;
|
|
}
|
|
|
|
.btn-batal {
|
|
border-color: var(--color-neutral-300) !important;
|
|
color: var(--color-neutral-700) !important;
|
|
}
|
|
|
|
.btn-confirm {
|
|
background-color: var(--color-primary-600) !important;
|
|
color: white !important;
|
|
}
|
|
</style>
|