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>