feat: personnel code on form

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>