feat: enhance SEP entry form and detail handling with conditional disabling and improved data filtering

app/components/app/sep/entry-form.vue

@@ -393,7 +393,7 @@ onMounted(() => {
               id="cardNumber"
               v-model="cardNumber"
               v-bind="cardNumberAttrs"
-              :disabled="false"
+              :disabled="isLoading || isReadonly"
             />
           </Field>
         </Cell>
@@ -408,7 +408,7 @@ onMounted(() => {
               id="nationalId"
               v-model="nationalId"
               v-bind="nationalIdAttrs"
-              :disabled="false"
+              :disabled="isLoading || isReadonly"
             />
           </Field>
         </Cell>
@@ -487,6 +487,7 @@ onMounted(() => {
                 "
               />
               <Button
+                v-if="!isReadonly"
                 variant="outline"
                 type="button"
                 class="h-[40px] rounded-md border-orange-400 text-orange-400 hover:bg-green-50"

app/components/content/sep/list.vue

@@ -13,9 +13,12 @@ import RangeCalendar from '~/components/pub/ui/range-calendar/RangeCalendar.vue'
 // Icons
 import { X, Check } from 'lucide-vue-next'
 
-// Libraries
+// Handlers
 import { useIntegrationSepList } from '~/handlers/integration-sep-list.handler'
 
+// Helpers
+import { refDebounced } from '@vueuse/core'
+
 // use handler to provide state and functions
 const {
   recId,
@@ -42,30 +45,42 @@ const {
   handleRemove,
 } = useIntegrationSepList()
 
+const dataFiltered = ref<any>([])
+const debouncedSearch = refDebounced(search, 500)
+
 // expose provides so component can also use provide/inject if needed
 provide('rec_id', recId)
 provide('rec_action', recAction)
 provide('rec_item', recItem)
 provide('table_data_loader', isLoading)
 
-watch(
-  [recId, recAction],
-  () => {
-    if (recAction.value === 'showConfirmDel') {
-      open.value = true
-    }
-    if (recAction.value === 'showDetail') {
-      navigateTo(`/integration/bpjs-vclaim/sep/${recItem.value?.letterNumber}/detail`)
-    }
-  },
-)
+watch([recId, recAction], () => {
+  if (recAction.value === 'showConfirmDel') {
+    open.value = true
+  }
+  if (recAction.value === 'showDetail') {
+    navigateTo(`/integration/bpjs-vclaim/sep/${recItem.value?.letterNumber}/detail`)
+  }
+})
+
+watch(debouncedSearch, (newValue) => {
+  if (newValue && newValue !== '-' && newValue.length >= 3) {
+    dataFiltered.value = data.value.filter(
+      (item: any) =>
+        item.patientName.toLowerCase().includes(newValue.toLowerCase()) ||
+        item.letterNumber.toLowerCase().includes(newValue.toLowerCase()) ||
+        item.cardNumber.toLowerCase().includes(newValue.toLowerCase()),
+    )
+  }
+})
 
 watch(
   () => dateSelection.value,
-  (val) => {
+  async (val) => {
     if (!val) return
     setDateRange()
-    getSepList()
+    await getSepList()
+    dataFiltered.value = [...data.value]
   },
   { deep: true },
 )
@@ -77,9 +92,10 @@ watch(
   },
 )
 
-onMounted(() => {
+onMounted(async () => {
   setServiceTypes()
-  getSepList()
+  await getSepList()
+  dataFiltered.value = [...data.value]
 })
 </script>
 
@@ -89,20 +105,35 @@ onMounted(() => {
     <!-- 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"
+      />
 
       <!-- Filter -->
       <div class="w-72">
-        <Select id="serviceType" icon-name="i-lucide-chevron-down" v-model="serviceType" :items="serviceTypesList"
-          placeholder="Pilih Pelayanan" />
+        <Select
+          id="serviceType"
+          icon-name="i-lucide-chevron-down"
+          v-model="serviceType"
+          :items="serviceTypesList"
+          placeholder="Pilih Pelayanan"
+        />
       </div>
 
       <!-- 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">
@@ -113,9 +144,14 @@ onMounted(() => {
       <!-- Export -->
       <DropdownMenu>
         <DropdownMenuTrigger as-child>
-          <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" />
+          <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>
         </DropdownMenuTrigger>
@@ -127,13 +163,20 @@ onMounted(() => {
     </div>
 
     <div class="mt-4">
-      <AppSepList v-if="!isLoading.dataListLoading" :data="data" @update:modelValue="handleRowSelected" />
+      <AppSepList
+        v-if="!isLoading.dataListLoading"
+        :data="dataFiltered"
+        @update:modelValue="handleRowSelected"
+      />
     </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>
 
@@ -146,20 +189,39 @@ onMounted(() => {
         </DialogHeader>
         <DialogDescription class="text-gray-700">Apakah anda yakin ingin menghapus SEP dengan data:</DialogDescription>
         <div class="mt-4 space-y-2 text-sm">
-          <p><strong>No. SEP:</strong> {{ sepData.sepNumber }}</p>
-          <p><strong>No. Kartu BPJS:</strong> {{ sepData.cardNumber }}</p>
-          <p><strong>Nama Pasien:</strong> {{ sepData.patientName }}</p>
+          <p>
+            <strong>No. SEP:</strong>
+            {{ sepData.sepNumber }}
+          </p>
+          <p>
+            <strong>No. Kartu BPJS:</strong>
+            {{ sepData.cardNumber }}
+          </p>
+          <p>
+            <strong>Nama Pasien:</strong>
+            {{ sepData.patientName }}
+          </p>
         </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="() => {
-            recId = 0
-            recAction = ''
-            open = false
-          }">
+          <Button
+            variant="outline"
+            class="border-green-600 text-green-600 hover:bg-green-50"
+            @click="
+              () => {
+                recId = 0
+                recAction = ''
+                open = false
+              }
+            "
+          >
             <X class="mr-1 h-4 w-4" />
             Tidak
           </Button>
-          <Button variant="destructive" class="bg-red-600 hover:bg-red-700" @click="handleRemove">
+          <Button
+            variant="destructive"
+            class="bg-red-600 hover:bg-red-700"
+            @click="handleRemove"
+          >
             <Check class="mr-1 h-4 w-4" />
             Ya
           </Button>

app/handlers/integration-sep-detail.handler.ts

@@ -67,8 +67,8 @@ export function useIntegrationSepDetail() {
           purposeOfVisitName: response.tujuanKunj?.nama || '-',
           serviceAssessment: response.assestmenPel?.kode || '-',
           serviceAssessmentName: response.assestmenPel?.nama || '-',
-          trafficAccident: response.nmstatusKecelakaan || '',
-          trafficAccidentCode: response.kdStatusKecelakaan || '',
+          trafficAccident: response.kdStatusKecelakaan || '',
+          trafficAccidentName: response.nmstatusKecelakaan || '',
           lpNumber: response.kontrol?.noSurat || '-',
           accidentDate: response.lokasiKejadian?.tglKejadian || '-',
           accidentNote: response.lokasiKejadian?.ketKejadian || '-',