From c41367bda435499fb67a118f73f76d4b6ae84029 Mon Sep 17 00:00:00 2001
From: Net <93821485+somnetsak123@users.noreply.github.com>
Date: Tue, 2 Apr 2024 17:45:52 +0700
Subject: [PATCH 1/3] =?UTF-8?q?feat:=20=E0=B9=80=E0=B8=9E=E0=B8=B7?=
 =?UTF-8?q?=E0=B9=88=E0=B8=A1=20=20route=20=E0=B8=88=E0=B8=B1=E0=B8=94?=
 =?UTF-8?q?=E0=B8=81=E0=B8=B2=E0=B8=A3=E0=B8=9A=E0=B8=B8=E0=B8=84=E0=B8=A5?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=81=E0=B8=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/DrawerComponent.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/DrawerComponent.vue b/src/components/DrawerComponent.vue
index 14caee4d..7806ab15 100644
--- a/src/components/DrawerComponent.vue
+++ b/src/components/DrawerComponent.vue
@@ -15,7 +15,11 @@ const labelMenu: {
     icon: 'mdi-sitemap-outline',
     route: '/branch-management',
   },
-  { label: 'จัดการบุคลากร', icon: 'mdi-account-settings-outline', route: '' },
+  {
+    label: 'จัดการบุคลากร',
+    icon: 'mdi-account-settings-outline',
+    route: '/personnel-management',
+  },
   { label: 'จัดการลูกค้า', icon: 'mdi-account-settings-outline', route: '' },
   { label: 'สินค้าและบริการ', icon: 'mdi-package-variant', route: '' },
   { label: 'ใบเสนอราคา', icon: 'mdi-package-variant', route: '' },

From 71f73899ccbd6681815c9fd3f25b33e5e06069f5 Mon Sep 17 00:00:00 2001
From: Net <93821485+somnetsak123@users.noreply.github.com>
Date: Tue, 2 Apr 2024 17:46:24 +0700
Subject: [PATCH 2/3] =?UTF-8?q?feat:=20=E0=B8=AA=E0=B8=A3=E0=B9=89?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=87=E0=B8=9B=E0=B8=B8=E0=B9=88=E0=B8=A1=20=20tri?=
 =?UTF-8?q?gger?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../01_branch-management/BtnAddComponet.vue   | 39 +++++++++++++++++++
 1 file changed, 39 insertions(+)
 create mode 100644 src/components/01_branch-management/BtnAddComponet.vue

diff --git a/src/components/01_branch-management/BtnAddComponet.vue b/src/components/01_branch-management/BtnAddComponet.vue
new file mode 100644
index 00000000..c4f4e699
--- /dev/null
+++ b/src/components/01_branch-management/BtnAddComponet.vue
@@ -0,0 +1,39 @@
+<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
+        @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>

From 3bccb69dd8107c19ec328a6a50647554c2f07d37 Mon Sep 17 00:00:00 2001
From: Net <93821485+somnetsak123@users.noreply.github.com>
Date: Tue, 2 Apr 2024 17:47:32 +0700
Subject: [PATCH 3/3] =?UTF-8?q?feat:=E0=B8=88=E0=B8=B1=E0=B8=94=20layout?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/01_branch-management/MainPage.vue | 61 ++++++++++++++++++++-
 1 file changed, 59 insertions(+), 2 deletions(-)

diff --git a/src/pages/01_branch-management/MainPage.vue b/src/pages/01_branch-management/MainPage.vue
index 220b41ac..42ad0978 100644
--- a/src/pages/01_branch-management/MainPage.vue
+++ b/src/pages/01_branch-management/MainPage.vue
@@ -1,2 +1,59 @@
-<script setup lang="ts"></script>
-<template>Branch Management</template>
+<script setup lang="ts">
+import BtnAddComponet from 'components/01_branch-management/BtnAddComponet.vue';
+import AppBox from 'components/app/AppBox.vue';
+</script>
+<template>
+  <div class="column">
+    <div class="row text-h6 text-weight-bold q-mb-md">จัดการสาขา</div>
+
+    <app-box bordered style="width: 100%; height: 500px">
+      <div class="column" style="height: 100%">
+        <div class="col-1 self-end">
+          <q-btn
+            unelevated
+            class="color-btn-icon"
+            size="10px"
+            round
+            icon="mdi-exclamation"
+            :class="{ dark: $q.dark.isActive }"
+          >
+            <q-tooltip>test</q-tooltip>
+          </q-btn>
+        </div>
+        <div
+          class="col test self-center"
+          style="display: flex; align-items: center"
+        >
+          <btn-add-componet
+            :label="'สร้างสำนักงานใหญ่'"
+            @trigger="
+              () => {
+                console.log('test');
+              }
+            "
+          />
+        </div>
+      </div>
+    </app-box>
+  </div>
+</template>
+
+<style scoped>
+/* .test {
+  display: flex;
+  align-items: center;
+} */
+
+.color-btn-icon {
+  --_bg-color-btn-icon: var(--blue-5-hsl);
+  transform: rotate(180deg);
+  color: var(--gray-0);
+  background: hsl(var(--_bg-color-btn-icon));
+
+  &.dark {
+    --_bg-color-btn-icon: var(--surface-0);
+    border: 2px solid;
+    border-color: var(--brand-1);
+  }
+}
+</style>