From e21e5f1e7aa8b393ddfa3f7ae12c649b932a47b3 Mon Sep 17 00:00:00 2001
From: Khafid Prayoga <khafidp@pm.me>
Date: Tue, 26 Aug 2025 15:15:14 +0700
Subject: [PATCH] refactor(ui): improve layout consistency and table styling

- Add container borders and padding for better visual hierarchy
- Standardize table cell borders across components
- Reset query params to defaults when changing resource type
- Clear data on fetch error to prevent stale data display
- Translate "No data available" to Indonesian
---
 app/components/flow/doctor/list.vue           |   8 +-
 app/components/flow/satusehat/list.vue        | 224 +++++++++---------
 .../pub/base/data-table/data-table.vue        |  12 +-
 3 files changed, 125 insertions(+), 119 deletions(-)

diff --git a/app/components/flow/doctor/list.vue b/app/components/flow/doctor/list.vue
index 03cdff79..e71096de 100644
--- a/app/components/flow/doctor/list.vue
+++ b/app/components/flow/doctor/list.vue
@@ -57,6 +57,10 @@ provide('table_data_loader', isLoading)
 </script>
 
 <template>
-  <Header :prep="{ ...headerPrep }" :ref-search-nav="refSearchNav" />
-  <AppDoctorList v-if="!isLoading.dataListLoading" :data="data" />
+  <div class="rounded-md border p-4">
+    <Header :prep="{ ...headerPrep }" :ref-search-nav="refSearchNav" />
+    <div class="rounded-md border p-4">
+      <AppDoctorList v-if="!isLoading.dataListLoading" :data="data" />
+    </div>
+  </div>
 </template>
diff --git a/app/components/flow/satusehat/list.vue b/app/components/flow/satusehat/list.vue
index 3d88b03c..48a4a775 100644
--- a/app/components/flow/satusehat/list.vue
+++ b/app/components/flow/satusehat/list.vue
@@ -36,6 +36,7 @@ const pagination = ref({
 async function fetchData() {
   try {
     isLoading.isTableLoading = true
+    data.value = []
     const response = await xfetch('/api/v1/satusehat/list', 'POST', {
       resource_type: params.value?.resource_type,
       date_from: params.value?.date_from,
@@ -51,6 +52,7 @@ async function fetchData() {
     }
   } catch (error) {
     console.error('Error fetching data:', error)
+    data.value = []
   } finally {
     isLoading.isTableLoading = false
   }
@@ -93,131 +95,131 @@ const activeTabFilter = computed({
   },
   set: (value) => {
     queryParams.resource_type = value
-    queryParams.q = ''
-    queryParams.page = 1
-    queryParams.limit = 10
-    queryParams.date_from = ''
-    queryParams.date_to = ''
+    queryParams.q = defaultQuery.q
+    queryParams.page = defaultQuery.page
+    queryParams.limit = defaultQuery.limit
+    queryParams.date_from = defaultQuery.date_from
+    queryParams.date_to = defaultQuery.date_to
   },
 })
 </script>
 
 <template>
-  <Header :prep="headerPrep" :ref-search-nav="refSearchNav" />
-  <div class="my-4 flex flex-1 flex-col gap-3 md:gap-4">
-    <PubBaseServiceStatus v-bind="service" />
-    <AppSatusehatCardSummary :is-loading="isLoading.satusehatConn!" :summary-data="summaryData" />
-  </div>
   <div class="rounded-md border p-4">
-    <h2 class="text-md font-semibold py-2">FHIR Resource</h2>
-    <Tabs v-model="activeTabFilter">
-      <div class="scrollbar-hide overflow-x-auto flex gap-2 justify-between">
-        <TabsList>
-          <TabsTrigger v-for="tab in tabs" :key="tab.value" :value="tab.value"
-            class="flex-shrink-0 px-4 py-2 text-sm font-medium data-[state=active]:bg-green-600 data-[state=inactive]:bg-gray-100 data-[state=active]:text-white data-[state=inactive]:text-gray-700">
-            {{ tab.label }}
-          </TabsTrigger>
-        </TabsList>
-        <div class="flex gap-2 items-center">
+    <Header :prep="headerPrep" :ref-search-nav="refSearchNav" />
+    <div class="my-4 flex flex-1 flex-col gap-3 md:gap-4">
+      <PubBaseServiceStatus v-bind="service" />
+      <AppSatusehatCardSummary :is-loading="isLoading.satusehatConn!" :summary-data="summaryData" />
+    </div>
+    <div class="rounded-md border p-4">
+      <h2 class="text-md font-semibold py-2">FHIR Resource</h2>
+      <Tabs v-model="activeTabFilter">
+        <div class="scrollbar-hide overflow-x-auto flex gap-2 justify-between">
+          <TabsList>
+            <TabsTrigger v-for="tab in tabs" :key="tab.value" :value="tab.value"
+              class="flex-shrink-0 px-4 py-2 text-sm font-medium data-[state=active]:bg-green-600 data-[state=inactive]:bg-gray-100 data-[state=active]:text-white data-[state=inactive]:text-gray-700">
+              {{ tab.label }}
+            </TabsTrigger>
+          </TabsList>
+          <div class="flex gap-2 items-center">
 
-          <!-- Search Input -->
+            <!-- Search Input -->
 
-          <div class="relative w-full max-w-sm">
+            <div class="relative w-full max-w-sm">
 
-            <Dialog>
-              <DialogTrigger>
-                <Input type="text" placeholder="Cari pasien..." class="pl-3 h-9" />
-              </DialogTrigger>
-              <DialogContent>
-                <DialogHeader class="border-b-1">
-                  <DialogTitle class="pb-2">Pencarian</DialogTitle>
-                </DialogHeader>
-                <Form>
-                  <FormField v-slot="{ componentField }" name="username">
-                    <FormItem>
-                      <FormLabel>Pasien</FormLabel>
-                      <FormControl>
-                        <Input type="text" placeholder="nama pasien, id pasien" v-bind="componentField" />
-                      </FormControl>
-                    </FormItem>
-                  </FormField>
-                  <FormField v-slot="{ componentField }" name="status">
-                    <FormItem>
-                      <FormLabel>Status</FormLabel>
-                      <FormControl>
-                        <Select>
-                          <SelectTrigger class="bg-white border border-gray-300">
-                            <SelectValue class="text-gray-400" placeholder="-- select item" />
-                          </SelectTrigger>
-                          <SelectContent class="bg-white ">
-                            <SelectItem value="0">
-                              Gagal
-                            </SelectItem>
-                            <SelectItem value="1">
-                              Pending
-                            </SelectItem>
-                            <SelectItem value="2">
-                              Terkirim
-                            </SelectItem>
-                          </SelectContent>
-                        </Select>
-                      </FormControl>
-                    </FormItem>
-                  </FormField>
-                  <FormField v-slot="{ componentField }" name="fhirId">
-                    <FormItem>
-                      <FormLabel>FHIR ID</FormLabel>
-                      <FormControl>
-                        <Input type="text" placeholder="fhir id" v-bind="componentField" />
-                      </FormControl>
-                    </FormItem>
-                  </FormField>
-                </Form>
+              <Dialog>
+                <DialogTrigger>
+                  <Input type="text" placeholder="Cari pasien..." class="pl-3 h-9" />
+                </DialogTrigger>
+                <DialogContent>
+                  <DialogHeader class="border-b-1">
+                    <DialogTitle class="pb-2">Pencarian</DialogTitle>
+                  </DialogHeader>
+                  <Form>
+                    <FormField v-slot="{ componentField }" name="username">
+                      <FormItem>
+                        <FormLabel>Pasien</FormLabel>
+                        <FormControl>
+                          <Input type="text" placeholder="nama pasien, id pasien" v-bind="componentField" />
+                        </FormControl>
+                      </FormItem>
+                    </FormField>
+                    <FormField v-slot="{ componentField }" name="status">
+                      <FormItem>
+                        <FormLabel>Status</FormLabel>
+                        <FormControl>
+                          <Select v-bind="componentField">
+                            <SelectTrigger class="bg-white border border-gray-300">
+                              <SelectValue class="text-gray-400" placeholder="-- select item" />
+                            </SelectTrigger>
+                            <SelectContent class="bg-white ">
+                              <SelectItem value="0">
+                                Gagal
+                              </SelectItem>
+                              <SelectItem value="1">
+                                Pending
+                              </SelectItem>
+                              <SelectItem value="2">
+                                Terkirim
+                              </SelectItem>
+                            </SelectContent>
+                          </Select>
+                        </FormControl>
+                      </FormItem>
+                    </FormField>
+                    <FormField v-slot="{ componentField }" name="fhirId">
+                      <FormItem>
+                        <FormLabel>FHIR ID</FormLabel>
+                        <FormControl>
+                          <Input type="text" placeholder="fhir id" v-bind="componentField" />
+                        </FormControl>
+                      </FormItem>
+                    </FormField>
+                  </Form>
 
-                <DialogFooter>
-                  <Button variant="outline">
-                    Reset
-                  </Button>
-                  <Button>
-                    Apply
-                  </Button>
-                </DialogFooter>
-              </DialogContent>
-            </Dialog>
+                  <DialogFooter>
+                    <Button variant="outline">
+                      Reset
+                    </Button>
+                    <Button>
+                      Apply
+                    </Button>
+                  </DialogFooter>
+                </DialogContent>
+              </Dialog>
+            </div>
+
+            <!-- Action Buttons -->
+            <AppSatusehatButtonAction v-for="action in actions" :key="action.value" :icon="action.icon"
+              :text="action.label" />
           </div>
-
-          <!-- Action Buttons -->
-          <AppSatusehatButtonAction v-for="action in actions" :key="action.value" :icon="action.icon"
-            :text="action.label" />
         </div>
-      </div>
-      <div class="mt-4">
-        <TabsContent v-for="tab in tabs" :key="`content-${tab.value}`" :value="tab.value">
-          <div class="rounded-md border p-4">
-            <!-- <Ellipsis v-if="isLoading.satusehatConn || isLoading.dataList" -->
-            <!-- class="size-6 animate-pulse text-muted-foreground mx-auto" /> -->
-            <AppSatusehatList v-if="!isLoading.satusehatConn" :data="data" />
+        <div class="mt-4">
+          <TabsContent v-for="tab in tabs" :key="`content-${tab.value}`" :value="tab.value">
+            <div class="rounded-md border p-4">
+              <AppSatusehatList v-if="!isLoading.satusehatConn" :data="data" />
 
-            <!-- Pagination -->
-            <div v-if="!isLoading.satusehatConn && !isLoading.isTableLoading && pagination.total > 0"
-              class="mt-4 flex justify-between items-center">
-              <div class="text-sm text-muted-foreground">
-                Menampilkan {{ ((pagination.page - 1) * pagination.limit) + 1 }} -
-                {{ Math.min(pagination.page * pagination.limit, pagination.total) }}
-                dari {{ pagination.total }} data
-              </div>
-              <div class="flex gap-2">
-                <Button v-if="pagination.has_prev" variant="outline" size="sm" @click="queryParams.page--">
-                  Sebelumnya
-                </Button>
-                <Button v-if="pagination.has_next" variant="outline" size="sm" @click="queryParams.page++">
-                  Selanjutnya
-                </Button>
+              <!-- Pagination -->
+              <div v-if="!isLoading.satusehatConn && !isLoading.isTableLoading && pagination.total > 0"
+                class="mt-4 flex justify-between items-center">
+                <div class="text-sm text-muted-foreground">
+                  Menampilkan {{ ((pagination.page - 1) * pagination.limit) + 1 }} -
+                  {{ Math.min(pagination.page * pagination.limit, pagination.total) }}
+                  dari {{ pagination.total }} data
+                </div>
+                <div class="flex gap-2">
+                  <Button v-if="pagination.has_prev" variant="outline" size="sm" @click="queryParams.page--">
+                    Sebelumnya
+                  </Button>
+                  <Button v-if="pagination.has_next" variant="outline" size="sm" @click="queryParams.page++">
+                    Selanjutnya
+                  </Button>
+                </div>
               </div>
             </div>
-          </div>
-        </TabsContent>
-      </div>
-    </Tabs>
+          </TabsContent>
+        </div>
+      </Tabs>
+    </div>
   </div>
 </template>
diff --git a/app/components/pub/base/data-table/data-table.vue b/app/components/pub/base/data-table/data-table.vue
index 16343193..257996f0 100644
--- a/app/components/pub/base/data-table/data-table.vue
+++ b/app/components/pub/base/data-table/data-table.vue
@@ -20,7 +20,7 @@ const loader = inject('table_data_loader') as DataTableLoader
   <Table>
     <TableHeader class="bg-gray-50">
       <TableRow>
-        <TableHead v-for="(h, idx) in header[0]" :key="`head-${idx}`"
+        <TableHead v-for="(h, idx) in header[0]" :key="`head-${idx}`" class="border"
           :style="{ width: cols[idx]?.width ? `${cols[idx].width}px` : undefined }">
           {{ h.label }}
         </TableHead>
@@ -30,24 +30,24 @@ const loader = inject('table_data_loader') as DataTableLoader
     <TableBody v-if="loader.isTableLoading">
       <!-- Loading state with 5 skeleton rows -->
       <TableRow v-for="n in 5" :key="`skeleton-${n}`">
-        <TableCell v-for="(key, cellIndex) in keys" :key="`cell-skel-${n}-${cellIndex}`">
+        <TableCell v-for="(key, cellIndex) in keys" :key="`cell-skel-${n}-${cellIndex}`" class="border">
           <Skeleton class="bg-gray-100 animate-pulse text-muted-foreground w-full h-6" />
         </TableCell>
       </TableRow>
     </TableBody>
-    <TableBody v-if="rows.length === 0 && !loader.isTableLoading">
+    <TableBody v-else-if="rows.length === 0">
       <TableRow>
-        <TableCell colspan="100%" class="text-center">
+        <TableCell :colspan="keys.length" class="text-center py-8">
           <div class="flex items-center justify-center">
             <Info class="size-5 text-muted-foreground" />
-            <span class="ml-2">No data available</span>
+            <span class="ml-2">Tidak ada data tersedia</span>
           </div>
         </TableCell>
       </TableRow>
     </TableBody>
     <TableBody v-else>
       <TableRow v-for="(row, rowIndex) in rows" :key="`row-${rowIndex}`">
-        <TableCell v-for="(key, cellIndex) in keys" :key="`cell-${rowIndex}-${cellIndex}`">
+        <TableCell v-for="(key, cellIndex) in keys" :key="`cell-${rowIndex}-${cellIndex}`" class="border">
           <!-- If funcComponent has a renderer -->
           <component :is="funcComponent[key](row, rowIndex).component" v-if="funcComponent[key]"
             v-bind="funcComponent[key](row, rowIndex)" />