Khafid Prayoga
7ee6f40196
feat(treatment-report): add treatment report component with sample data Implement new treatment report feature including list view component, sample data, and configuration. The component supports pagination, filtering by date range, and search functionality. Also integrates with encounter process and home views. wip: init form and schema
74 lines
1.9 KiB
Vue
74 lines
1.9 KiB
Vue
<script setup lang="ts">
|
|
import { ref, computed } from 'vue'
|
|
|
|
// Components
|
|
import AppTreatmentReportList from '~/components/app/treatment-report/list.vue'
|
|
|
|
// Samples
|
|
import { sampleRows, type TreatmentReportData } from '~/components/app/treatment-report/sample'
|
|
|
|
const search = ref('')
|
|
const dateFrom = ref('')
|
|
const dateTo = ref('')
|
|
|
|
// filter + pencarian sederhana (client-side)
|
|
const filtered = computed(() => {
|
|
const q = search.value.trim().toLowerCase()
|
|
return sampleRows.filter((r: TreatmentReportData) => {
|
|
if (q) {
|
|
return r.nama.toLowerCase().includes(q) || r.noRm.toLowerCase().includes(q) || r.dokter.toLowerCase().includes(q)
|
|
}
|
|
return true
|
|
})
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="mx-auto max-w-full">
|
|
<div class="border-b p-6">
|
|
<h1 class="text-2xl font-semibold">Laporan Tindakan</h1>
|
|
<p class="mt-1 text-sm text-gray-500">Infomasi laporan tindakan pasien</p>
|
|
</div>
|
|
|
|
<div class="flex flex-wrap items-center gap-3 border-b p-4">
|
|
<div class="flex items-center gap-2">
|
|
<input
|
|
v-model="search"
|
|
placeholder="Cari Nama / No.RM"
|
|
class="w-64 rounded border px-3 py-2"
|
|
/>
|
|
</div>
|
|
|
|
<div class="flex items-center gap-2">
|
|
<input
|
|
v-model="dateFrom"
|
|
type="date"
|
|
class="rounded border px-3 py-2"
|
|
/>
|
|
<span class="text-sm text-gray-500">-</span>
|
|
<input
|
|
v-model="dateTo"
|
|
type="date"
|
|
class="rounded border px-3 py-2"
|
|
/>
|
|
</div>
|
|
|
|
<button class="ml-auto rounded bg-orange-500 px-3 py-2 text-white hover:bg-orange-600">Filter</button>
|
|
</div>
|
|
|
|
<div class="overflow-x-auto p-4">
|
|
<AppTreatmentReportList
|
|
:data="filtered"
|
|
:pagination-meta="{
|
|
recordCount: 2,
|
|
page: 1,
|
|
pageSize: 10,
|
|
totalPage: 1,
|
|
hasPrev: false,
|
|
hasNext: false,
|
|
}"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|