From b25b4637256590dd2c6b489686573b84ca45f210 Mon Sep 17 00:00:00 2001
From: riefive <rie.five@gmail.com>
Date: Thu, 16 Oct 2025 14:33:16 +0700
Subject: [PATCH] feat(sep): add preview sep

---
 app/components/app/sep/print-preview.vue | 105 +++++++++++++++++++++++
 app/components/content/sep/list.vue      |  83 ++++++++++++++----
 2 files changed, 173 insertions(+), 15 deletions(-)
 create mode 100644 app/components/app/sep/print-preview.vue

diff --git a/app/components/app/sep/print-preview.vue b/app/components/app/sep/print-preview.vue
new file mode 100644
index 00000000..92ba7324
--- /dev/null
+++ b/app/components/app/sep/print-preview.vue
@@ -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>
diff --git a/app/components/content/sep/list.vue b/app/components/content/sep/list.vue
index bb4165a0..f1ed0323 100644
--- a/app/components/content/sep/list.vue
+++ b/app/components/content/sep/list.vue
@@ -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>