feat: add branch card component

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

@@ -0,0 +1,120 @@
+<script lang="ts" setup>
+defineProps<{
+  data: {
+    id: string;
+    hq: boolean;
+    branchLabelCode: string;
+    branchLabelName: string;
+    branchLabelTel: string;
+    branchLabelAddress: string;
+    branchLabelType: string;
+    branchLabelStatus: string;
+  };
+  fieldSelected?: string[];
+}>();
+</script>
+
+<template>
+  <div
+    class="branch-card rounded bordered"
+    :class="{
+      'branch-card__hq': data.hq,
+      'branch-card__br': !data.hq,
+    }"
+  >
+    <div
+      class="branch-card__row"
+      :class="{ 'branch-card__header': i === 0 }"
+      v-for="([k, v], i) in Object.entries(data)
+        .slice(2)
+        .filter(
+          ([key], idx) =>
+            idx === 0 || (fieldSelected ? fieldSelected.includes(key) : true),
+        )"
+      :key="k"
+    >
+      <div class="branch-card__label">
+        <span>{{ $t(k) }}</span>
+      </div>
+      <div
+        class="branch-card__value"
+        :class="{ 'branch-card__badge': k === 'branchLabelStatus' }"
+        style="justify-content: space-between"
+      >
+        <span>{{ v }}</span>
+        <q-btn
+          @click="$emit('view-detail', data)"
+          :label="$t('viewDetail')"
+          outline
+          v-if="i === 0"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.branch-card {
+  --_branch-card-row-fg: 0 0% 100%;
+  --_branch-card-row-bg: var(--blue-5-hsl);
+
+  &.branch-card__hq {
+    --_branch-card-row-bg: var(--pink-6-hsl);
+  }
+
+  &.branch-card__br {
+    --_branch-card-row-bg: var(--violet-11-hsl);
+  }
+
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  box-shadow: var(--shadow-2);
+
+  & > .branch-card__row {
+    display: flex;
+    flex-wrap: nowrap;
+    padding-inline: var(--size-4);
+    padding-block: var(--size-2);
+
+    &:last-child {
+      flex-grow: 1;
+    }
+
+    &:not(:first-child):nth-child(2n + 1) {
+      background-color: hsla(var(--_branch-card-row-bg) / 0.1);
+    }
+
+    &.branch-card__header {
+      color: hsl(var(--_branch-card-row-fg));
+      background-color: hsl(var(--_branch-card-row-bg));
+      font-weight: bold;
+    }
+
+    & > * {
+      display: flex;
+      align-items: center;
+    }
+
+    & > .branch-card__label {
+      min-width: 120px;
+      width: 30%;
+    }
+
+    &:not(.branch-card__header) .branch-card__label {
+      color: hsl(var(--stone-7-hsl));
+    }
+
+    & > .branch-card__value {
+      width: 70%;
+
+      &.branch-card__badge > span {
+        display: inline-block;
+        border-radius: 999rem;
+        padding-inline: var(--size-2);
+        background-color: hsla(var(--_branch-card-row-bg) / 0.1);
+      }
+    }
+  }
+}
+</style>