munawwirul_jamal/simrsx-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(sep): add preview sep

Browse Source
This commit is contained in:
riefive
2025-10-16 14:33:16 +07:00
parent e942975f02
commit b25b463725
2 changed files with 173 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/app/sep/print-preview.vue
+105
View File
@@ -0,0 +1,105 @@
<script setup lang="ts">
import { ref, onMounted } from "vue"
import { Card, CardContent } from "~/components/pub/ui/card"
import { Separator } from "~/components/pub/ui/separator"
// Simulasi data dari API
const route = useRoute()
const sepData = ref<any>(null)
onMounted(async () => {
// contoh fetch data API (ganti dengan endpoint kamu)
const id = route.params.id
const res = await fetch(`/api/sep/${id}`)
sepData.value = await res.json()
})
</script>
<template>
<div class="max-w-4xl mx-auto p-6 space-y-4">
<div class="flex items-center justify-between">
<h1 class="text-lg font-semibold">Preview SEP</h1>
<p class="text-sm text-muted-foreground">
</p>
</div>
<Card class="p-6">
<CardContent class="space-y-4">
<!-- Header -->
<div class="flex items-start justify-between">
<div class="flex items-center gap-3">
<img
src="/bpjs-logo.png"
alt="BPJS"
class="h-10 w-auto"
/>
<div>
<p class="font-semibold">SURAT ELIGIBILITAS PESERTA</p>
<p>RSUD dr. Saiful Anwar</p>
</div>
</div>
<p class="text-sm text-right">
Peserta: {{ sepData?.peserta?.jenisPeserta || "-" }}
</p>
</div>
<Separator />
<!-- Content -->
<div class="grid grid-cols-2 gap-8 text-sm">
<!-- Left -->
<div class="space-y-1">
<p>No. SEP : {{ sepData?.noSEP }}</p>
<p>Tgl. SEP : {{ sepData?.tglSEP }}</p>
<p>No. Kartu : {{ sepData?.noKartu }}</p>
<p>Nama Peserta : {{ sepData?.nama }}</p>
<p>Tgl. Lahir : {{ sepData?.tglLahir }} Kelamin: {{ sepData?.kelamin }}</p>
<p>No. Telepon : {{ sepData?.telepon }}</p>
<p>Sub/Spesialis : {{ sepData?.spesialis }}</p>
<p>Dokter : {{ sepData?.dokter }}</p>
<p>Faskes Perujuk : {{ sepData?.faskes }}</p>
<p>Diagnosa Awal : {{ sepData?.diagnosa }}</p>
<p>Catatan : {{ sepData?.catatan }}</p>
</div>
<!-- Right -->
<div class="space-y-1">
<p>Jns. Rawat : {{ sepData?.jenisRawat }}</p>
<p>Jns. Kunjungan : {{ sepData?.jenisKunjungan }}</p>
<p>Poli Perujuk : {{ sepData?.poliPerujuk }}</p>
<p>Kls. Hak : {{ sepData?.kelasHak }}</p>
<p>Kls. Rawat : {{ sepData?.kelasRawat }}</p>
<p>Penjamin : {{ sepData?.penjamin }}</p>
<div class="mt-6 text-center">
<p class="font-semibold">Persetujuan</p>
<p>Pasien/Keluarga Pasien</p>
<img
:src="sepData?.qrCodeUrl"
alt="QR Code"
class="h-24 mx-auto mt-2"
/>
<p class="font-semibold mt-2">{{ sepData?.nama }}</p>
</div>
</div>
</div>
<Separator />
<!-- Footer -->
<div class="text-xs text-muted-foreground leading-snug space-y-1">
<p>*Saya menyetujui BPJS Kesehatan untuk:</p>
<ul class="list-disc pl-5">
<li>membuka dan atau menggunakan informasi medis Pasien untuk keperluan administrasi dan pembiayaan</li>
<li>memberikan akses informasi kepada tenaga medis di RSUD Dr. Saiful Anwar</li>
<li>Penjaminan lainnya sesuai ketentuan yang berlaku</li>
</ul>
<p class="pt-2">
Cetakan ke {{ sepData?.cetakanKe || 1 }} |
{{ sepData?.tglCetak }}
</p>
</div>
</CardContent>
</Card>
</div>
</template>
app/components/content/sep/list.vue
+68 -15
View File
@@ -97,6 +97,31 @@ const rows = [
},
]
const dataBpjs = {
noSEP: '1323R0010825V027605',
tglSEP: '2025-08-28',
noKartu: '0001966915168 (MR. 11274212)',
nama: 'Kenzie',
tglLahir: '2010-01-25',
kelamin: 'Laki-laki',
telepon: '085854487311',
spesialis: 'HEMODIALISA',
dokter: 'dr. Nursam, SpPD-KGH',
faskes: 'RS Saiful Anwar',
diagnosa: 'Penyakit ginjal kronis, stadium 5',
catatan: 'Riwayat HEMODIALISA di RSUD DR. SAIFUL ANWAR',
peserta: { jenisPeserta: 'PEKERJA MANDIRI' },
jenisRawat: 'R. Jalan',
jenisKunjungan: 'Kunjungan Kontrol (ulangan)',
poliPerujuk: '-',
kelasHak: '-',
kelasRawat: 'Kelas 3',
penjamin: '-',
qrCodeUrl: '/dummy-qr.png',
cetakanKe: 1,
tglCetak: '28-08-2025 07:10:30 WIB',
}
const refSearchNav: RefSearchNav = {
onClick: () => {
// open filter modal
@@ -174,14 +199,24 @@ provide('table_data_loader', isLoading)
<!-- Filter Bar -->
<div class="my-2 flex flex-wrap items-center gap-2">
<!-- Search -->
<Input v-model="search" placeholder="Cari No. SEP / No. Kartu BPJS..." class="w-72" />
<Input
v-model="search"
placeholder="Cari No. SEP / No. Kartu BPJS..."
class="w-72"
/>
<!-- Date Range -->
<Popover>
<PopoverTrigger as-child>
<Button variant="outline" class="h-[40px] w-72 border-gray-400 bg-white text-right font-normal">
<Button
variant="outline"
class="h-[40px] w-72 border-gray-400 bg-white text-right font-normal"
>
{{ dateRange }}
<Icon name="i-lucide-calendar" class="h-5 w-5" />
<Icon
name="i-lucide-calendar"
class="h-5 w-5"
/>
</Button>
</PopoverTrigger>
<PopoverContent class="p-2">
@@ -196,24 +231,34 @@ provide('table_data_loader', isLoading)
variant="outline"
class="ml-auto h-[40px] w-[120px] rounded-md border-green-600 text-green-600 hover:bg-green-50"
>
<Icon name="i-lucide-download" class="h-5 w-5" /> Ekspor
<Icon
name="i-lucide-download"
class="h-5 w-5"
/>
Ekspor
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent class="w-40">
<DropdownMenuItem @click="exportCsv"> Ekspor CSV </DropdownMenuItem>
<DropdownMenuItem @click="exportExcel"> Ekspor Excel </DropdownMenuItem>
<DropdownMenuItem @click="exportCsv">Ekspor CSV</DropdownMenuItem>
<DropdownMenuItem @click="exportExcel">Ekspor Excel</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</div>
<div class="rounded-md border p-4">
<AppSepList v-if="!isLoading.dataListLoading" :data="data" />
<AppSepList
v-if="!isLoading.dataListLoading"
:data="data"
/>
</div>
<!-- Pagination -->
<template v-if="paginationMeta">
<div v-if="paginationMeta.totalPage > 1">
<PubMyUiPagination :pagination-meta="paginationMeta" @page-change="handlePageChange" />
<PubMyUiPagination
:pagination-meta="paginationMeta"
@page-change="handlePageChange"
/>
</div>
</template>
@@ -226,9 +271,7 @@ provide('table_data_loader', isLoading)
<DialogTitle>Hapus SEP</DialogTitle>
</DialogHeader>
<DialogDescription class="text-gray-700">
Apakah anda yakin ingin menghapus SEP dengan data:
</DialogDescription>
<DialogDescription class="text-gray-700">Apakah anda yakin ingin menghapus SEP dengan data:</DialogDescription>
<div class="mt-4 space-y-2 text-sm">
<p>No. SEP : {{ sepData.no_sep }}</p>
@@ -237,11 +280,21 @@ provide('table_data_loader', isLoading)
</div>
<DialogFooter class="mt-6 flex justify-end gap-3">
<Button variant="outline" class="border-green-600 text-green-600 hover:bg-green-50" @click="open = false">
<X class="mr-1 h-4 w-4" /> Tidak
<Button
variant="outline"
class="border-green-600 text-green-600 hover:bg-green-50"
@click="open = false"
>
<X class="mr-1 h-4 w-4" />
Tidak
</Button>
<Button variant="destructive" class="bg-red-600 hover:bg-red-700" @click="handleDelete">
<Check class="mr-1 h-4 w-4" /> Ya
<Button
variant="destructive"
class="bg-red-600 hover:bg-red-700"
@click="handleDelete"
>
<Check class="mr-1 h-4 w-4" />
Ya
</Button>
</DialogFooter>
</DialogContent>