From 42d39bd08bffae5bfecfe550ab8982bb18fd5e3f Mon Sep 17 00:00:00 2001
From: riefive <rie.five@gmail.com>
Date: Thu, 11 Sep 2025 14:53:25 +0700
Subject: [PATCH] feat(sep): create filter on sep list

---
 app/components/content/sep/list.vue | 57 ++++++++++++++++++++++++++++-
 1 file changed, 56 insertions(+), 1 deletion(-)

diff --git a/app/components/content/sep/list.vue b/app/components/content/sep/list.vue
index 8c52a816..73afb3a7 100644
--- a/app/components/content/sep/list.vue
+++ b/app/components/content/sep/list.vue
@@ -1,8 +1,16 @@
 <script setup lang="ts">
 import type { DataTableLoader } from '~/components/pub/base/data-table/type'
 import type { HeaderPrep, RefSearchNav } from '~/components/pub/custom-ui/data/types'
+import type { PaginationMeta } from '~/components/pub/custom-ui/pagination/pagination.type'
 import Header from '~/components/pub/custom-ui/nav-header/prep.vue'
 
+const search = ref('')
+const dateRange = ref('12 Agustus 2025 - 32 Agustus 2025')
+const perPage = ref('10')
+const currentPage = ref(1)
+const totalPages = 20
+const perPageOptions = [10, 25, 50].map((value) => ({ value: value.toString(), label: value.toString() }))
+
 interface SepData {
   tgl_sep: string
   no_sep: string
@@ -18,6 +26,19 @@ interface SepData {
   diagnosis_awal: string
 }
 
+const paginationMeta = reactive<PaginationMeta>({
+  recordCount: 0,
+  page: 1,
+  pageSize: 10,
+  totalPage: 5,
+  hasNext: false,
+  hasPrev: false,
+})
+
+function handlePageChange(page: number) {
+  console.log('pageChange', page)
+}
+
 const data = ref<SepData[]>([])
 
 // contoh data dummy
@@ -115,9 +136,43 @@ provide('table_data_loader', isLoading)
 
 <template>
   <div class="rounded-md border p-4">
-    <Header :prep="{ ...headerPrep }" :ref-search-nav="refSearchNav" />
+    <Header :prep="{ ...headerPrep }" />
+    <!-- Filter Bar -->
+    <div class="my-2 flex items-center gap-2">
+      <!-- Search -->
+      <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">
+            {{ dateRange }}
+            <Icon name="i-lucide-calendar" class="h-5 w-5" />
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent class="p-2">
+          <Calendar mode="range" />
+        </PopoverContent>
+      </Popover>
+
+      <!-- Export -->
+      <Button
+        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
+      </Button>
+    </div>
+
     <div class="rounded-md border p-4">
       <AppSepList v-if="!isLoading.dataListLoading" :data="data" />
     </div>
+
+    <!-- Pagination -->
+    <template v-if="paginationMeta">
+      <div v-if="paginationMeta.totalPage > 1">
+        <PubCustomUiPagination :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+      </div>
+    </template>
   </div>
 </template>