feat: color adjustment

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

@@ -3,6 +3,7 @@ defineProps<{
   data: {
     id: string;
     hq: boolean;
+    status: string;
     branchLabelCode: string;
     branchLabelName: string;
     branchLabelTel: string;
@@ -28,7 +29,7 @@ defineProps<{
       class="branch-card__row"
       :class="{ 'branch-card__header': i === 0 }"
       v-for="([k, v], i) in Object.entries(data)
-        .slice(2)
+        .slice(3)
         .filter(
           ([key], idx) =>
             idx === 0 || (fieldSelected ? fieldSelected.includes(key) : true),
@@ -63,6 +64,8 @@ defineProps<{
 .branch-card {
   --_branch-card-row-fg: 0 0% 100%;
   --_branch-card-row-bg: var(--blue-5-hsl);
+  --_branch-badge-fg: var(--green-8-hsl);
+  --_branch-badge-bg: var(--green-6-hsl);
 
   &.branch-card__hq {
     --_branch-card-row-bg: var(--pink-6-hsl);
@@ -73,6 +76,8 @@ defineProps<{
   }
 
   &.branch-card__inactive {
+    --_branch-badge-fg: var(--red-4-hsl);
+    --_branch-badge-bg: var(--red-4-hsl);
     filter: grayscale(40%);
     opacity: 0.5;
   }
@@ -123,13 +128,8 @@ defineProps<{
         display: inline-block;
         border-radius: 999rem;
         padding-inline: var(--size-2);
-        text-transform: lowercase;
+        color: hsl(var(--_branch-badge-fg));
-        color: hsl(var(--green-8-hsl));
+        background-color: hsla(var(--_branch-badge-bg) / 0.1);
-        background-color: hsl(var(--green-1-hsl));
-
-        &::first-letter {
-          text-transform: uppercase;
-        }
       }
     }
   }

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

@@ -313,7 +313,7 @@ watch(locale, () => {
       </template>
       <template v-else>
         <div class="row" style="flex-grow: 1; flex-wrap: nowrap">
-          <div class="tree-container q-pa-md bordered-r">
+          <div class="tree-container q-pa-md bordered-r surface-2">
             <div class="row">
               <Icon
                 icon="ep:arrow-left-bold"
@@ -369,9 +369,9 @@ watch(locale, () => {
               />
             </div>
 
-            <div class="bordered rounded q-mt-md">
+            <div class="bordered rounded q-mt-md surface-1">
               <div
-                class="bordered-b q-pl-sm text-weight-bold surface-0"
+                class="bordered-b q-pl-sm text-weight-bold surface-3"
                 style="height: 50px; display: flex; align-items: center"
               >
                 <Icon icon="flowbite:home-solid" width="24px" class="q-mr-md" />
@@ -547,7 +547,7 @@ watch(locale, () => {
                   :options="
                     fieldDisplay.map((v) => ({ label: $t(v), value: v }))
                   "
-                  :display-value="$t('Fields')"
+                  :display-value="$t('displayField')"
                   v-model="fieldSelected"
                   option-label="label"
                   option-value="value"
@@ -580,6 +580,7 @@ watch(locale, () => {
                   .map((v) => ({
                     id: v.id,
                     hq: v.isHeadOffice,
+                    status: v.status,
                     branchLabelCode: v.code,
                     branchLabelName:
                       $i18n.locale === 'en-US' ? v.nameEN : v.name,
@@ -593,7 +594,7 @@ watch(locale, () => {
                     branchLabelType: $t(
                       v.isHeadOffice ? 'branchHQLabel' : 'branchLabel',
                     ),
-                    branchLabelStatus: v.status,
+                    branchLabelStatus: $t(`status${v.status}`),
                   }))"
                 @click="
                   () => {
@@ -614,7 +615,7 @@ watch(locale, () => {
                 :key="item.id"
                 :data="item"
                 :field-selected="fieldSelected"
-                :inactive="item.branchLabelStatus === 'INACTIVE'"
+                :inactive="item.status === 'INACTIVE'"
                 @view-detail="(b) => console.log(b)"
               />
             </div>