242 lines
7.7 KiB
Vue
242 lines
7.7 KiB
Vue
<script setup lang="ts">
|
|
import { ref, computed } from 'vue'
|
|
import { format } from 'date-fns'
|
|
import { id as localeID } from 'date-fns/locale'
|
|
import { Calendar as CalendarIcon, Filter as FilterIcon, Search } from 'lucide-vue-next'
|
|
import { Button } from '~/components/pub/ui/button'
|
|
import { Popover, PopoverContent, PopoverTrigger } from '~/components/pub/ui/popover'
|
|
import Input from '~/components/pub/ui/input/Input.vue'
|
|
import RangeCalendar from '~/components/pub/ui/range-calendar/RangeCalendar.vue'
|
|
import AppChemotherapyListVerification from '~/components/app/chemotherapy/list-verification.vue'
|
|
import DialogVerification from '~/components/app/chemotherapy/dialog-verification.vue'
|
|
import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
|
|
|
|
const route = useRoute()
|
|
const router = useRouter()
|
|
|
|
// Sample patient data - replace with actual API call
|
|
const patientData = ref({
|
|
noRm: 'RM21123',
|
|
nama: 'Ahmad Sutanto',
|
|
jenisPembayaran: 'PKS',
|
|
noBilling: '18291822',
|
|
tanggalLahir: '23 April 1992',
|
|
usia: '33 tahun',
|
|
jenisKelamin: 'Laki-Laki (L)',
|
|
diagnosis: 'C34.9 - Karsinoma Paru',
|
|
klinik: 'Penyakit Dalam',
|
|
})
|
|
|
|
// Sample schedule data - replace with actual API call
|
|
const scheduleData = ref([
|
|
{
|
|
id: 1,
|
|
tanggalMasuk: '12 Agustus 2025',
|
|
pjBerkasRm: 'TPP Rawat Jalan',
|
|
dokter: 'Dr. Andreas Sutaji',
|
|
jenisRuangan: 'Ruang Tindakan',
|
|
jenisTindakan: 'KEMOTERAPI',
|
|
tanggalJadwalTindakan: '-',
|
|
status: 'belum_terverifikasi',
|
|
tanggalPemeriksaan: '2025-08-12',
|
|
},
|
|
])
|
|
|
|
const search = ref('')
|
|
const dateRange = ref<{ from: Date | null; to: Date | null }>({
|
|
from: null,
|
|
to: null,
|
|
})
|
|
|
|
// Format date range for display
|
|
const dateRangeDisplay = computed(() => {
|
|
if (dateRange.value.from && dateRange.value.to) {
|
|
return `${format(dateRange.value.from, 'dd MMMM yyyy', { locale: localeID })} - ${format(dateRange.value.to, 'dd MMMM yyyy', { locale: localeID })}`
|
|
}
|
|
return '12 Agustus 2025 - 32 Agustus 2025' // Default display
|
|
})
|
|
|
|
// Filter + search (client-side)
|
|
const filtered = computed(() => {
|
|
const q = search.value.trim().toLowerCase()
|
|
return scheduleData.value.filter((r: any) => {
|
|
if (q) {
|
|
return r.dokter.toLowerCase().includes(q) || patientData.value.noRm.toLowerCase().includes(q)
|
|
}
|
|
return true
|
|
})
|
|
})
|
|
|
|
// Pagination meta
|
|
const paginationMeta = reactive<PaginationMeta>({
|
|
recordCount: filtered.value.length,
|
|
page: 1,
|
|
pageSize: 10,
|
|
totalPage: Math.ceil(filtered.value.length / 10),
|
|
hasNext: false,
|
|
hasPrev: false,
|
|
})
|
|
|
|
function handlePageChange(page: number) {
|
|
paginationMeta.page = page
|
|
paginationMeta.hasNext = page < paginationMeta.totalPage
|
|
paginationMeta.hasPrev = page > 1
|
|
}
|
|
|
|
function handleFilter() {
|
|
// TODO: Implement filter logic
|
|
console.log('Filter clicked', { search: search.value, dateRange: dateRange.value })
|
|
}
|
|
|
|
// Dialog verification state
|
|
const isDialogVerificationOpen = ref(false)
|
|
const selectedSchedule = ref<any>(null)
|
|
|
|
// Provide verify handler for verify button
|
|
function handleVerify(rec: any) {
|
|
selectedSchedule.value = rec
|
|
isDialogVerificationOpen.value = true
|
|
}
|
|
|
|
provide('verify-handler', handleVerify)
|
|
|
|
function handleDialogSubmit(data: { tanggalPemeriksaan: string | undefined; jadwalTanggalPemeriksaan: string | undefined }) {
|
|
// TODO: Implement submit logic
|
|
console.log('Verification submitted', data)
|
|
isDialogVerificationOpen.value = false
|
|
// Refresh data after verification
|
|
}
|
|
|
|
function handleBackToAdmin() {
|
|
router.push('/outpation-action/chemotherapy/admin')
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="mx-auto max-w-full">
|
|
<!-- Back Button -->
|
|
<div class="mb-4">
|
|
<Button
|
|
variant="outline"
|
|
class="flex items-center gap-2 rounded-full border border-orange-400 bg-orange-50 px-3 py-1 text-sm font-medium text-orange-600 hover:bg-orange-100"
|
|
@click="handleBackToAdmin"
|
|
>
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
|
|
</svg>
|
|
Kembali ke Administrasi Kunjungan
|
|
</Button>
|
|
</div>
|
|
|
|
<!-- Data Pasien Section -->
|
|
<div class="mb-6 rounded-md border bg-white p-4 shadow-sm">
|
|
<h3 class="mb-4 text-lg font-semibold">Data Pasien:</h3>
|
|
<div class="grid grid-cols-2 gap-6">
|
|
<!-- Left Column -->
|
|
<div class="space-y-3">
|
|
<div class="flex">
|
|
<span class="w-48 font-medium">No. RM:</span>
|
|
<span>{{ patientData.noRm }}</span>
|
|
</div>
|
|
<div class="flex">
|
|
<span class="w-48 font-medium">Nama:</span>
|
|
<span>{{ patientData.nama }}</span>
|
|
</div>
|
|
<div class="flex">
|
|
<span class="w-48 font-medium">Jenis Pembayaran:</span>
|
|
<span>{{ patientData.jenisPembayaran }}</span>
|
|
</div>
|
|
<div class="flex">
|
|
<span class="w-48 font-medium">No Billing:</span>
|
|
<span>{{ patientData.noBilling }}</span>
|
|
</div>
|
|
</div>
|
|
<!-- Right Column -->
|
|
<div class="space-y-3">
|
|
<div class="flex">
|
|
<span class="w-48 font-medium">Tanggal Lahir / Usia:</span>
|
|
<span>{{ patientData.tanggalLahir }} / {{ patientData.usia }}</span>
|
|
</div>
|
|
<div class="flex">
|
|
<span class="w-48 font-medium">Jenis Kelamin:</span>
|
|
<span>{{ patientData.jenisKelamin }}</span>
|
|
</div>
|
|
<div class="flex">
|
|
<span class="w-48 font-medium">Diagnosis:</span>
|
|
<span>{{ patientData.diagnosis }}</span>
|
|
</div>
|
|
<div class="flex">
|
|
<span class="w-48 font-medium">Klinik:</span>
|
|
<span>{{ patientData.klinik }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Header Section -->
|
|
<div class="border-b p-6">
|
|
<h1 class="text-2xl font-semibold">Verifikasi Jadwal Pasien</h1>
|
|
<p class="mt-1 text-sm text-gray-500">
|
|
Pantau riwayat masuk, dokter penanggung jawab, dan status pasien secara real-time.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Search and Filter Bar -->
|
|
<div class="flex flex-wrap items-center gap-3 border-b p-4">
|
|
<!-- Search Input -->
|
|
<div class="relative">
|
|
<Search class="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-400" />
|
|
<Input
|
|
v-model="search"
|
|
placeholder="Cari Nama /No.RM"
|
|
class="w-64 pl-9"
|
|
/>
|
|
</div>
|
|
|
|
<!-- Date Range Picker -->
|
|
<Popover>
|
|
<PopoverTrigger as-child>
|
|
<Button
|
|
variant="outline"
|
|
class="h-10 w-72 justify-start border-gray-300 bg-white text-left font-normal"
|
|
>
|
|
<CalendarIcon class="mr-2 h-4 w-4" />
|
|
{{ dateRangeDisplay }}
|
|
</Button>
|
|
</PopoverTrigger>
|
|
<PopoverContent class="w-auto p-0">
|
|
<RangeCalendar />
|
|
</PopoverContent>
|
|
</Popover>
|
|
|
|
<!-- Filter Button -->
|
|
<Button
|
|
variant="outline"
|
|
class="ml-auto border-orange-500 bg-orange-50 text-orange-600 hover:bg-orange-100"
|
|
@click="handleFilter"
|
|
>
|
|
<FilterIcon class="mr-2 h-4 w-4" />
|
|
Filter
|
|
</Button>
|
|
</div>
|
|
|
|
<!-- Data Table -->
|
|
<div class="overflow-x-auto p-4">
|
|
<AppChemotherapyListVerification
|
|
:data="filtered"
|
|
:pagination-meta="paginationMeta"
|
|
@page-change="handlePageChange"
|
|
/>
|
|
</div>
|
|
|
|
<!-- Dialog Verification -->
|
|
<DialogVerification
|
|
v-model:open="isDialogVerificationOpen"
|
|
:tanggal-pemeriksaan="selectedSchedule?.tanggalPemeriksaan"
|
|
:jadwal-tanggal-pemeriksaan="selectedSchedule?.jadwalTanggalPemeriksaan"
|
|
@submit="handleDialogSubmit"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|