Merge branch 'dev/phatt' into develop

src/components/SelectorList.vue

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import AppBox from 'components/app/AppBox.vue';
+
+const selector = defineModel('selector');
+
+defineProps<{
+  list: {
+    label: string;
+    count: number;
+  }[];
+}>();
+</script>
+<template>
+  <AppBox bordered class="col-4 q-mr-md">
+    <q-list>
+      <q-item
+        v-for="v in list"
+        :key="v.label"
+        clickable
+        :active="selector === v.label"
+        :active-class="
+          selector === v.label
+            ? $q.dark.isActive
+              ? 'active dark'
+              : 'active'
+            : ''
+        "
+        @click="selector = v.label"
+      >
+        <q-item-section>{{ v.label }}</q-item-section>
+        <div class="dot text-weight-bold">1</div>
+      </q-item>
+    </q-list>
+  </AppBox>
+</template>
+
+<style scoped>
+.active {
+  color: hsl(var(--main-fg)) !important;
+  background-color: hsl(var(--main-bg));
+  border-radius: var(--radius-3);
+
+  .dot {
+    color: var(--blue-6);
+    background-color: white;
+  }
+
+  &.dark {
+    background-color: transparent;
+    border: 1px solid hsl(var(--main-bg));
+  }
+}
+
+.q-item {
+  align-items: center;
+  border-radius: var(--radius-3);
+  color: hsl(var(--text-mute));
+  border: 1px solid transparent;
+}
+
+.dot {
+  height: 25px;
+  width: 25px;
+  background-color: hsl(var(--text-mute));
+  color: white;
+  border-radius: 50%;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+}
+</style>

src/components/StatCardComponet.vue

@@ -12,18 +12,21 @@ const color = ['purple', 'pink', 'yellow', 'green'];
 </script>
 
 <template>
-  <div class="row" :class="{ 'justify-center': $q.screen.lt.md }">
+  <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 q-ma-sm"
+      class="bordered wave col-12"
       :class="`color-${color[i % 5]}`"
       style="
         width: 200px;
         min-width: 150px;
-        box-shadow:
+        max-height: 95px;
-          0px 5px 5px 0 rgba(0, 0, 0, 0.2),
+        box-shadow: var(--shadow-2);
-          0px 5px 5px 0 rgba(0, 0, 0, 0.19);
       "
     >
       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">

src/css/app.scss

@@ -25,6 +25,9 @@ html {
   --surface-1: white;
   --surface-2: var(--gray-1);
   --surface-3: var(--gray-2);
+  --text-mute: var(--stone-4-hsl);
+  --main-fg: 0 0% 100%;
+  --main-bg: var(--blue-6-hsl);
 
   --gender-male: var(--blue-5-hsl);
   --gender-female: var(--pink-7-hsl);
@@ -43,6 +46,19 @@ html {
   --surface-1: var(--gray-11);
   --surface-2: var(--gray-10);
   --surface-3: var(--gray-9);
+  --text-mute: var(--stone-8-hsl);
+}
+
+::-webkit-scrollbar {
+  width: 0.5rem;
+  height: 0.5rem;
+}
+
+::-webkit-scrollbar-thumb {
+  border: 0.15rem solid rgba(0, 0, 0, 0);
+  background-color: hsla(0, 0%, 50%, 0.75);
+  background-clip: padding-box;
+  border-radius: 0.5rem;
 }
 
 .bordered {

src/layouts/MainLayout.vue

@@ -91,7 +91,7 @@ function setActive(button: NotificationButton) {
   }
 }
 
-function doLogout(confirm?: boolean = false) {
+function doLogout(confirm: boolean = false) {
   logoutModal.value = true;
   if (confirm) {
     logoutModal.value = false;

src/pages/02_personnel-management/MainPage.vue

@@ -1,6 +1,14 @@
 <script setup lang="ts">
+import { ref } from 'vue';
+
 import PersonCard from 'src/components/home/PersonCard.vue';
 import AppBox from 'components/app/AppBox.vue';
+import StatCardComponet from 'components/StatCardComponet.vue';
+import SelectorList from 'src/components/SelectorList.vue';
+// import BtnAddComponet from 'components/01_branch-management/BtnAddComponet.vue';
+// import TooltipComponet from 'src/components/TooltipComponet.vue';
+
+const selectorLabel = ref('');
 
 const person = [
   {
@@ -47,6 +55,7 @@ const person = [
       { label: 'ตำแหน่ง', value: '32 ปี' },
     ],
     female: true,
+    disabled: true,
   },
   {
     name: 'นางสาวสุขใจ แสนดี',
@@ -58,21 +67,78 @@ const person = [
       { label: 'ตำแหน่ง', value: '32 ปี' },
     ],
     female: true,
-    disabled: true,
   },
 ] satisfies InstanceType<typeof PersonCard>['$props']['list'];
+
+const branchStat = ref<
+  {
+    amount: string;
+    label: string;
+  }[]
+>([
+  {
+    amount: '1',
+    label: 'สำนักงานใหญ่ 1',
+  },
+
+  {
+    amount: '2',
+    label: 'สำนักงานใหญ่ 2',
+  },
+  {
+    amount: '3',
+    label: 'สำนักงานใหญ่ 3',
+  },
+  {
+    amount: '4',
+    label: 'สำนักงานใหญ่ 4',
+  },
+  {
+    amount: '5',
+    label: 'สำนักงานใหญ่ 5',
+  },
+]);
+
+const selectorList = [
+  {
+    label: 'พนักงาน',
+    count: 0,
+  },
+  {
+    label: 'พนักงานส่งเอกสาร',
+    count: 0,
+  },
+  {
+    label: 'ตัวแทน',
+    count: 0,
+  },
+  {
+    label: 'เอเจนซี่',
+    count: 0,
+  },
+] satisfies InstanceType<typeof SelectorList>['$props']['list'];
 </script>
 
 <template>
-  <div class="column">
+  <div class="column q-pb-lg">
-    <div class="row text-h6 text-weight-bold q-mb-md">จัดการบุคลากร</div>
+    <div class="text-h6 text-weight-bold q-mb-md">จัดการบุคลากร</div>
 
-    <AppBox bordered style="width: 100%; height: 580px">
+    <div class="row full-width q-mb-md no-wrap">
-      <q-scroll-area style="height: 100%">
+      <!-- selector -->
-        <div class="column" style="height: 100%">
+      <SelectorList :list="selectorList" v-model:selector="selectorLabel" />
-          <PersonCard :list="person" class="q-mb-md" />
+
-        </div>
+      <!-- stat -->
-      </q-scroll-area>
+      <AppBox bordered class="row col-glow" style="overflow-x: auto">
+        <span class="text-weight-bold text-subtitle1">
+          สรุปจำนวนข้อมูล{{ selectorLabel }}
+        </span>
+        <stat-card-componet :branch="branchStat" class="no-wrap" />
+      </AppBox>
+    </div>
+
+    <!-- main -->
+    <AppBox bordered style="width: 100%; height: 580px; overflow-y: auto">
+      <PersonCard :list="person" class="q-mb-md" />
     </AppBox>
   </div>
 </template>