From 76c5e094f6880052531e1baf71e68a757b519d44 Mon Sep 17 00:00:00 2001
From: Net <93821485+somnetsak123@users.noreply.github.com>
Date: Fri, 5 Apr 2024 17:35:14 +0700
Subject: [PATCH] =?UTF-8?q?fix:=20=E0=B9=80=E0=B9=80=E0=B8=81=E0=B9=89?=
 =?UTF-8?q?=E0=B8=8A=E0=B8=B7=E0=B9=88=E0=B8=AD=20=E0=B8=9C=E0=B8=B4?=
 =?UTF-8?q?=E0=B8=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../01_branch-management/BtnAddComponent.vue  | 40 ++++++++
 src/components/StatCardComponent.vue          | 93 +++++++++++++++++++
 2 files changed, 133 insertions(+)
 create mode 100644 src/components/01_branch-management/BtnAddComponent.vue
 create mode 100644 src/components/StatCardComponent.vue

diff --git a/src/components/01_branch-management/BtnAddComponent.vue b/src/components/01_branch-management/BtnAddComponent.vue
new file mode 100644
index 00000000..1a864b1b
--- /dev/null
+++ b/src/components/01_branch-management/BtnAddComponent.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+defineProps<{
+  label?: string;
+}>();
+</script>
+
+<template>
+  <div class="column items-center box" :class="{ dark: $q.dark.isActive }">
+    <div class="row">
+      <q-btn
+        unelevated
+        @click="$emit('trigger')"
+        size="lg"
+        class="color-btn"
+        icon="mdi-plus"
+        round
+      />
+    </div>
+    <div class="row q-mt-sm color-text">{{ label }}</div>
+  </div>
+</template>
+
+<style scoped>
+.box {
+  --_btn-add-color: var(--cyan-6-hsl);
+
+  .color-btn {
+    color: hsl(var(--_btn-add-color));
+    background: hsla(var(--_btn-add-color) / 0.1) !important;
+  }
+
+  .color-text {
+    color: var(--stone-6);
+  }
+
+  &.dark {
+    --_btn-add-color: var(--cyan-5-hsl);
+  }
+}
+</style>
diff --git a/src/components/StatCardComponent.vue b/src/components/StatCardComponent.vue
new file mode 100644
index 00000000..e92f19b5
--- /dev/null
+++ b/src/components/StatCardComponent.vue
@@ -0,0 +1,93 @@
+<script setup lang="ts">
+import AppBox from 'components/app/AppBox.vue';
+
+const props = defineProps<{
+  branch: {
+    amount: number;
+    label: string;
+  }[];
+}>();
+
+const color = ['purple', 'pink', 'yellow', 'green', 'blue'];
+</script>
+
+<template>
+  <div
+    class="row"
+    style="gap: var(--size-4)"
+    :class="{ 'justify-between': $q.screen.lt.md }"
+  >
+    <app-box
+      v-for="(v, i) in props.branch"
+      :key="v.label"
+      class="bordered wave col-12"
+      :class="`color-${color[i % 5]}`"
+      style="
+        width: 200px;
+        min-width: 150px;
+        max-height: 95px;
+        box-shadow: var(--shadow-2);
+      "
+    >
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
+        <path
+          class="box-path"
+          d="M0,256L40,245.3C80,235,160,213,240,202.7C320,192,400,192,480,170.7C560,149,640,107,720,106.7C800,107,880,149,960,154.7C1040,160,1120,128,1200,96C1280,64,1360,32,1400,16L1440,0L1440,320L1400,320C1360,320,1280,320,1200,320C1120,320,1040,320,960,320C880,320,800,320,720,320C640,320,560,320,480,320C400,320,320,320,240,320C160,320,80,320,40,320L0,320Z"
+        ></path>
+      </svg>
+
+      <div class="column justify-around stat-card-content">
+        <div class="col-4 text-h5 text-weight-bold">{{ v.amount }}</div>
+        <div class="text-weight-bold">{{ v.label }}</div>
+      </div>
+    </app-box>
+  </div>
+</template>
+
+<style scoped>
+.wave {
+  background: #ffffff;
+  position: relative;
+  display: flex;
+}
+
+svg {
+  width: 200px;
+  position: absolute;
+  left: 0px;
+  top: 50px;
+  opacity: 0.1;
+}
+
+.box-path {
+  fill: var(--_color-stat-card);
+  fill-opacity: 1;
+}
+
+.stat-card-content {
+  z-index: 2;
+  color: var(--_color-stat-card);
+  height: 100%;
+  width: 200px;
+}
+
+.color-blue {
+  --_color-stat-card: var(--blue-5);
+}
+
+.color-purple {
+  --_color-stat-card: var(--purple-8);
+}
+
+.color-pink {
+  --_color-stat-card: var(--pink-8);
+}
+
+.color-yellow {
+  --_color-stat-card: var(--yellow-8);
+}
+
+.color-green {
+  --_color-stat-card: var(--green-8);
+}
+</style>