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 class="row items-center">
-                  <div v-if="k !== 'type'">
+                  <div>
-                    {{ v }}
+                    {{
-                  </div>
+                      k !== 'type'
-                  <div v-else>
+                        ? v
-                    {{ (v && $t('branchHQLabel')) || $t('branchLabel') }}
+                        : (v && $t('branchHQLabel')) || $t('branchLabel')
+                    }}
                   </div>
 
                   <q-space />
-
+                  <q-btn
+                    v-if="i === 0"
+                    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"
-                    @click.stop="$emit('show-info', prop.row)"
                     />
+                  </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>