refactor: status badge

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

@@ -96,13 +96,28 @@ const filter = ref('');
 
               <div class="row items-center" style="flex-grow: 1">
                 <div style="flex-grow: 1">
-                  {{
-                    k !== 'type'
-                      ? v
-                      : (v && $t('branchHQLabel')) || $t('branchLabel')
-                  }}
+                  <template v-if="k === 'status'">
+                    <span
+                      class="q-px-sm"
+                      style="
+                        color: var(--teal-6);
+                        background: hsla(var(--teal-6-hsl) / 0.08);
+                        border-radius: 25px;
+                      "
+                    >
+                      {{ v }}
+                    </span>
+                  </template>
+                  <template v-else>
+                    {{
+                      k !== 'type'
+                        ? v
+                        : (v && $t('branchHQLabel')) || $t('branchLabel')
+                    }}
+                  </template>
                 </div>
                 <q-btn
+                  size=".75rem"
                   v-if="i === 0"
                   outline
                   no-caps