feat: personnel code on form

src/components/DrawerInfo.vue

@@ -1,11 +1,14 @@
 <script setup lang="ts">
 import { ref } from 'vue';
+import AppBox from './app/AppBox.vue';
 
 defineProps<{
   title: string;
   isEdit?: boolean;
   bgOn?: boolean;
   statusBranch?: string;
+  badgeLabel?: string;
+  badgeClass?: string;
   editData?: (...args: unknown[]) => void;
   deleteData?: (...args: unknown[]) => void;
   submit?: (...args: unknown[]) => void;
@@ -103,6 +106,13 @@ function reset() {
                   : $t('statusACTIVE')
               }}
             </text>
+            <text
+              v-if="badgeLabel"
+              class="badge-label q-px-sm text-caption"
+              :class="badgeClass"
+            >
+              {{ badgeLabel }}
+            </text>
           </div>
 
           <div style="width: 31.98px"></div>
@@ -214,4 +224,11 @@ function reset() {
     background-color: hsla(var(--_branch-badge-bg) / 0.1);
   }
 }
+
+.badge-label {
+  display: inline-block;
+  border-radius: var(--radius-6);
+  background-color: var(--surface-2);
+  text-wrap: nowrap;
+}
 </style>

src/components/FormDialog.vue

@@ -9,6 +9,8 @@ defineProps<{
   addressTitleEN?: string;
   addressSeparator?: boolean;
   branchStatus?: string;
+  badgeLabel?: string;
+  badgeClass?: string;
   submit?: (...args: unknown[]) => void;
   close?: (...args: unknown[]) => void;
 }>();
@@ -27,7 +29,7 @@ const zipCode = defineModel<string>('zipCode', { default: '' });
       style="
         padding: 0;
         border-radius: var(--radius-2);
-        max-width: 80%;
+        max-width: 85%;
         max-height: 100%;
       "
     >
@@ -39,7 +41,14 @@ const zipCode = defineModel<string>('zipCode', { default: '' });
             <div class="col text-subtitle1 text-weight-bold text-center">
               {{ title }}
 
-              <div>{{ branchStatus ? `(${branchStatus})` : '' }}</div>
+              <text>{{ branchStatus ? `(${branchStatus})` : '' }}</text>
+              <text
+                v-if="badgeLabel"
+                class="badge-label q-px-sm text-caption"
+                :class="badgeClass"
+              >
+                {{ badgeLabel }}
+              </text>
             </div>
             <q-btn
               round
@@ -169,4 +178,11 @@ const zipCode = defineModel<string>('zipCode', { default: '' });
 .form-footer {
   border-top: 1px solid var(--border-color);
 }
+
+.badge-label {
+  display: inline-block;
+  border-radius: var(--radius-6);
+  background-color: var(--surface-2);
+  text-wrap: nowrap;
+}
 </style>