refactor: by virtual

src/pages/01_branch-management/MainPage.vue

@@ -55,7 +55,7 @@ const typeBranchItem = [
   {
     icon: 'mdi-home-group',
     text: 'Virtual Branch',
-    color: '#03A9F4',
+    color: 'var(--blue-6)',
   },
   {
     icon: 'mdi-home-group',
@@ -1639,13 +1639,13 @@ watch(currentHq, () => {
 
   <DrawerInfo
     ref="formDialogRef"
-    v-model:drawerOpen="modalDrawer"
+    v-model:drawer-open="modalDrawer"
     :category="changeTitle(formType, formTypeBranch)"
     :title="$i18n.locale === 'eng' ? formData.nameEN : formData.name"
-    :addressSeparator="true"
+    :address-separator="true"
     :undo="() => undo()"
-    :isEdit="formType === 'edit'"
-    :editData="() => drawerEdit()"
+    :is-edit="formType === 'edit'"
+    :edit-data="() => drawerEdit()"
     :submit="() => onSubmit()"
     :delete-data="() => triggerDelete(currentEdit.id)"
     :close="
@@ -1783,6 +1783,7 @@ watch(currentHq, () => {
           >
             <FormBranchInformation
               id="info-information"
+              v-model:virtual="formData.virtual"
               v-model:abbreviation="formData.code"
               v-model:code="formData.codeHeadOffice"
               v-model:code-sub-branch="currentEdit.code"
@@ -2047,7 +2048,7 @@ watch(currentHq, () => {
     :title="$t('general.typeBranch')"
     hide-footer
     no-app-box
-    width="60vw"
+    width="40vw"
     height="300px"
     :close="() => (modelCreateTypeBranch = false)"
   >
@@ -2179,4 +2180,19 @@ watch(currentHq, () => {
 * :deep(.q-icon.mdi-play) {
   display: none;
 }
+
+.badge-virtual {
+  --_badge-fg: var(--blue-8-hsl);
+  --_badge-bg: var(--blue-6-hsl);
+}
+
+.badge-branch {
+  --_badge-fg: var(--purple-8-hsl);
+  --_badge-bg: var(--purple-6-hsl);
+}
+
+.badge-color {
+  color: hsl(var(--_badge-fg));
+  background-color: hsla(var(--_badge-bg) / 0.1);
+}
 </style>