refactor: add button view detail

src/components/01_branch-management/TableCardComponent.vue

@@ -47,7 +47,7 @@ const filter = ref('');
 </script>
 
 <template>
-  <div style="width: 100%">
+  <div v-if="rows.length > 0">
     <q-table
       :rows-per-page-options="[4]"
       flat
@@ -80,23 +80,32 @@ const filter = ref('');
               </q-item-section>
 
               <q-item-section>
-                <div class="row">
-                  <div v-if="k !== 'type'">
-                    {{ v }}
-                  </div>
-                  <div v-else>
-                    {{ (v && $t('branchHQLabel')) || $t('branchLabel') }}
+                <div class="row items-center">
+                  <div>
+                    {{
+                      k !== 'type'
+                        ? v
+                        : (v && $t('branchHQLabel')) || $t('branchLabel')
+                    }}
                   </div>
 
                   <q-space />
-
-                  <Icon
-                    icon="mdi:navigate-next"
-                    class="cursor-pointer"
+                  <q-btn
                     v-if="i === 0"
-                    width="20px"
-                    @click.stop="$emit('show-info', prop.row)"
-                  />
+                    outline
+                    no-caps
+                    class="q-px-md"
+                    dense
+                    :label="$t('viewDetail')"
+                    @click.stop="$emit('showInfo', prop.row)"
+                  >
+                    <Icon
+                      icon="mdi:navigate-next"
+                      class="cursor-pointer"
+                      v-if="i === 0"
+                      width="20px"
+                    />
+                  </q-btn>
                 </div>
               </q-item-section>
             </q-item>
@@ -105,6 +114,17 @@ const filter = ref('');
       </template>
     </q-table>
   </div>
+  <div
+    v-else
+    class="column items-center justify-center q-pb-xl"
+    style="opacity: 0.3; height: 40vh"
+  >
+    <q-img
+      src="/no-data.png"
+      style="object-fit: cover; width: 128px; height: 128px"
+    />
+    <span class="text-body1">{{ $t('noData') }}</span>
+  </div>
 </template>
 
 <style scoped>