feat(cemo): enhance admin mode functionality and update series handling

This commit is contained in:
riefive
2025-11-04 12:02:31 +07:00
parent fb7731188d
commit 64fe2524fb
7 changed files with 608 additions and 0 deletions
@@ -0,0 +1,30 @@
<script setup lang="ts">
import Button from '~/components/pub/ui/button/Button.vue'
const props = defineProps<{
rec: any
idx?: number
}>()
// Try to get proses handler from parent via inject
const prosesHandler = inject<(rec: any) => void>('proses-handler', null)
function handleProses() {
if (prosesHandler) {
prosesHandler(props.rec)
}
}
</script>
<template>
<div class="flex justify-center">
<Button
type="button"
class="border-orange-500 bg-orange-500 text-white hover:bg-orange-600"
@click="handleProses"
>
Proses
</Button>
</div>
</template>
@@ -0,0 +1,37 @@
<script setup lang="ts">
// Components
import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vue'
// Types
import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
// Configs
import { config } from './list-cfg.admin'
interface Props {
data: any[]
paginationMeta: PaginationMeta
}
defineProps<Props>()
const emit = defineEmits<{
pageChange: [page: number]
}>()
function handlePageChange(page: number) {
emit('pageChange', page)
}
</script>
<template>
<div class="space-y-4">
<PubMyUiDataTable
v-bind="config"
:rows="data"
:skeleton-size="paginationMeta?.pageSize"
/>
<PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
</div>
</template>
@@ -0,0 +1,78 @@
import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
import { defineAsyncComponent } from 'vue'
type SmallDetailDto = any
const statusBadge = defineAsyncComponent(() => import('./status-badge.vue'))
const verifyButton = defineAsyncComponent(() => import('./verify-button.vue'))
export const config: Config = {
cols: [
{ width: 120 },
{ width: 150 },
{ width: 150 },
{ width: 150 },
{ width: 150 },
{ width: 180 },
{ width: 150 },
{ width: 100 },
],
headers: [
[
{ label: 'TANGGAL MASUK' },
{ label: 'PJ BERKAS RM' },
{ label: 'DOKTER' },
{ label: 'JENIS RUANGAN' },
{ label: 'JENIS TINDAKAN' },
{ label: 'TANGGAL JADWAL TINDAKAN' },
{ label: 'STATUS' },
{ label: 'AKSI' },
],
],
keys: [
'tanggalMasuk',
'pjBerkasRm',
'dokter',
'jenisRuangan',
'jenisTindakan',
'tanggalJadwalTindakan',
'status',
'action',
],
delKeyNames: [
{ key: 'code', label: 'Kode' },
{ key: 'name', label: 'Nama' },
],
parses: {
parent: (rec: unknown): unknown => {
const recX = rec as SmallDetailDto
return recX.parent?.name || '-'
},
},
components: {
status(rec, idx) {
const res: RecComponent = {
idx,
rec: rec as object,
component: statusBadge,
}
return res
},
action(rec, idx) {
const res: RecComponent = {
idx,
rec: rec as object,
component: verifyButton,
}
return res
},
},
htmls: {},
}
@@ -0,0 +1,37 @@
<script setup lang="ts">
// Components
import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vue'
// Types
import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
// Configs
import { config } from './list-cfg.verification'
interface Props {
data: any[]
paginationMeta: PaginationMeta
}
defineProps<Props>()
const emit = defineEmits<{
pageChange: [page: number]
}>()
function handlePageChange(page: number) {
emit('pageChange', page)
}
</script>
<template>
<div class="space-y-4">
<PubMyUiDataTable
v-bind="config"
:rows="data"
:skeleton-size="paginationMeta?.pageSize"
/>
<PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
</div>
</template>
@@ -0,0 +1,130 @@
<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 AppChemotherapyListAdmin from '~/components/app/chemotherapy/list-admin.vue'
import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
// Sample data - replace with actual API call
import { sampleRows, type ChemotherapyData } from '~/components/app/chemotherapy/sample'
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 sampleRows.filter((r: ChemotherapyData) => {
if (q) {
return r.nama.toLowerCase().includes(q) || r.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 })
}
// Provide proses handler for action button
function handleProses(rec: any) {
// Navigate to verification page with record
navigateTo(`/outpation-action/chemotherapy/verification?id=${rec.id}`)
}
provide('proses-handler', handleProses)
</script>
<template>
<div class="mx-auto max-w-full">
<!-- Header Section -->
<div class="border-b p-6">
<h1 class="text-2xl font-semibold">Administrasi Pasien Rawat Jalan Kemoterapi</h1>
<p class="mt-1 text-sm text-gray-500">
Manajemen pendaftaran serta monitoring terapi pasien tindakan rawat jalan
</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 v-model="dateRange" />
</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">
<AppChemotherapyListAdmin
:data="filtered"
:pagination-meta="paginationMeta"
@page-change="handlePageChange"
/>
</div>
</div>
</template>
@@ -0,0 +1,241 @@
<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 v-model="dateRange" />
</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>
@@ -0,0 +1,55 @@
<script setup lang="ts">
import type { PagePermission } from '~/models/role'
import Error from '~/components/pub/my-ui/error/error.vue'
import { PAGE_PERMISSIONS } from '~/lib/page-permission'
import ContentChemotherapyAdminList from '~/components/content/chemotherapy/admin-list.vue'
import ContentChemotherapyVerification from '~/components/content/chemotherapy/verification.vue'
definePageMeta({
middleware: ['rbac'],
roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
title: 'Kemoterapi Admin',
contentFrame: 'cf-full-width',
})
const route = useRoute()
useHead({
title: () => {
const mode = route.params.mode as string
if (mode === 'admin') {
return 'Administrasi Pasien Rawat Jalan Kemoterapi'
} else if (mode === 'verification') {
return 'Verifikasi Jadwal Pasien'
}
return route.meta.title as string
},
})
const roleAccess: PagePermission = PAGE_PERMISSIONS['/doctor'] || {}
const { checkRole, hasReadAccess } = useRBAC()
// Check if user has access to this page
const hasAccess = checkRole(roleAccess)
if (!hasAccess) {
navigateTo('/403')
}
// Define permission-based computed properties
const canRead = true // hasReadAccess(roleAccess)
const mode = computed(() => route.params.mode as string)
</script>
<template>
<div>
<div v-if="canRead">
<ContentChemotherapyAdminList v-if="mode === 'admin'" />
<ContentChemotherapyVerification v-else-if="mode === 'verification'" />
<Error v-else :status-code="404" status-message="Mode tidak ditemukan" />
</div>
<Error v-else :status-code="403" />
</div>
</template>