feat: Main => branch&personnel router

src/components/home/MenuItem.vue

@@ -1,9 +1,13 @@
 <script setup lang="ts">
+import { useRouter } from 'vue-router';
 import AppBox from 'components/app/AppBox.vue';
 import AppCircle from 'components/app/AppCircle.vue';
 
+const router = useRouter();
+
 defineProps<{
   list: {
+    value: string;
     icon: string;
     title: string;
     caption: string;
@@ -19,6 +23,10 @@ defineProps<{
       | 'lime';
   }[];
 }>();
+
+function navigateTo(destination: string) {
+  router.push(`${destination}`);
+}
 </script>
 
 <template>
@@ -28,6 +36,7 @@ defineProps<{
       v-for="(v, i) in list"
       :key="i"
       :bordered="$q.dark.isActive"
+      @click="navigateTo(v.value)"
     >
       <AppCircle
         :class="`q-pa-sm menu-icon menu-icon__${v.color}${($q.dark.isActive && ' dark') || ''}`"
@@ -53,6 +62,7 @@ defineProps<{
     border: 1px solid transparent;
 
     &:hover {
+      cursor: pointer;
       border-color: var(--brand-1);
     }
   }

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

@@ -0,0 +1,2 @@
+<script setup lang="ts"></script>
+<template>Branch Management</template>

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

@@ -0,0 +1,2 @@
+<script setup lang="ts"></script>
+<template>Personnel Management</template>

src/pages/MainPage.vue

@@ -6,101 +6,114 @@ import UsersDetailCardComponent from 'components/UsersDetailCardComponent.vue';
 
 const menu = [
   {
-    icon: 'mdi-home',
+    value: 'branch-management',
+    icon: 'mdi-chart-donut',
     color: 'green',
-    title: 'Home',
-    caption: 'Home Caption',
+    title: 'จัดการสาขา',
+    caption: 'จัดการสาขาภายในองค์กร',
   },
   {
-    icon: 'mdi-home',
-    color: 'red',
-    title: 'Home',
-    caption: 'Home Caption',
-  },
-  {
-    icon: 'mdi-home',
-    color: 'orange',
-    title: 'Home',
-    caption: 'Home Caption',
-  },
-  {
-    icon: 'mdi-home',
+    value: 'personnel-management',
+    icon: 'mdi-account',
     color: 'cyan',
-    title: 'Home',
-    caption: 'Home Caption',
+    title: 'จัดการบุคลากร',
+    caption: 'จัดการคนภายในองค์กร',
   },
   {
-    icon: 'mdi-home',
-    color: 'camo',
-    title: 'Home',
-    caption: 'Home Caption',
+    value: '',
+    icon: 'mdi-account',
+    color: 'cyan',
+    title: 'จัดการลูกค้า',
+    caption: 'จัดการคนภายในองค์กร',
   },
   {
-    icon: 'mdi-home',
-    color: 'purple',
-    title: 'Home',
-    caption: 'Home Caption',
+    value: '',
+    icon: 'mdi-truck',
+    color: 'orange',
+    title: 'สินค้าและบริการ',
+    caption: 'รายการสินค้าและบริการ',
   },
   {
-    icon: 'mdi-home',
+    value: '',
+    icon: 'mdi-file-document',
     color: 'violet',
-    title: 'Home',
-    caption: 'Home Caption',
+    title: 'ใบเสนอราคา',
+    caption: 'รายการใบเสนอราคา',
   },
   {
-    icon: 'mdi-home',
-    color: 'indigo',
-    title: 'Home',
-    caption: 'Home Caption',
+    value: '',
+    icon: 'mdi-monitor',
+    color: 'purple',
+    title: 'รายการคำขอ',
+    caption: 'แสดงรายการคำขอ',
   },
   {
-    icon: 'mdi-home',
+    value: '',
+    icon: 'mdi-receipt-text',
+    color: 'red',
+    title: 'ใบสั่งซื้อ',
+    caption: 'รายการใบสั่งซื้อ',
+  },
+  {
+    value: '',
+    icon: 'mdi-package',
+    color: 'camo',
+    title: 'ใบรับสินค้า',
+    caption: 'รายการใบรับสินค้า',
+  },
+  {
+    value: '',
+    icon: 'mdi-currency-usd',
     color: 'lime',
-    title: 'Home',
-    caption: 'Home Caption',
+    title: 'การจัดการการเงิน',
+    caption: 'รายการบัญชีทั้งหมด',
+  },
+  {
+    value: '',
+    icon: 'mdi-view-dashboard',
+    color: 'cyan',
+    title: 'Dashboard',
+    caption: 'แสดงข้อมูลสถิติ',
+  },
+  {
+    value: '',
+    icon: 'mdi-file-document',
+    color: 'indigo',
+    title: 'รายงาน',
+    caption: 'แสดงรายงาน',
   },
 ] satisfies InstanceType<typeof MenuItem>['$props']['list'];
 
-const person = [
-  {
-    name: 'Person 1',
-    badge: 'Badge 1',
-    detail: [
-      { label: 'Label 1', value: 'Detail 1' },
-      { label: 'Label 2', value: 'Detail 2' },
-    ],
-    male: true,
-  },
-  {
-    name: 'Person 1',
-    badge: 'Badge 1',
-    detail: [
-      { label: 'Label 1', value: 'Detail 1' },
-      { label: 'Label 2', value: 'Detail 2' },
-      { label: 'Label 3', value: 'Detail 3' },
-    ],
-    female: true,
-  },
-] satisfies InstanceType<typeof PersonCard>['$props']['list'];
-
-const input = ref('');
+// const person = [
+//   {
+//     name: 'Person 1',
+//     badge: 'Badge 1',
+//     detail: [
+//       { label: 'Label 1', value: 'Detail 1' },
+//       { label: 'Label 2', value: 'Detail 2' },
+//     ],
+//     male: true,
+//   },
+//   {
+//     name: 'Person 1',
+//     badge: 'Badge 1',
+//     detail: [
+//       { label: 'Label 1', value: 'Detail 1' },
+//       { label: 'Label 2', value: 'Detail 2' },
+//       { label: 'Label 3', value: 'Detail 3' },
+//     ],
+//     female: true,
+//   },
+// ] satisfies InstanceType<typeof PersonCard>['$props']['list'];
 </script>
 
 <template>
-  <q-input
-    label="test"
-    v-model="input"
-    :rules="[(v) => (!!v && v.length > 3) || 'Required']"
-    outlined
-  ></q-input>
-
-  <PersonCard :list="person" class="q-mb-md" />
-
+  <!-- <PersonCard :list="person" class="q-mb-md" /> -->
   <MenuItem :list="menu" />
 
-  <div class="row">
+  <!-- <div class="row">
     <users-detail-card-component class="q-pa-md" v-for="v in [1, 2]" :key="v" />
-  </div>
+  </div> -->
 </template>
 
 <style scoped>

src/router/routes.ts

@@ -11,6 +11,16 @@ const routes: RouteRecordRaw[] = [
         name: 'Home',
         component: () => import('pages/MainPage.vue'),
       },
+      {
+        path: '/branch-management',
+        name: 'BranchManagement',
+        component: () => import('pages/01_branch-management/MainPage.vue'),
+      },
+      {
+        path: '/personnel-management',
+        name: 'PersonnelManagement',
+        component: () => import('pages/02_personnel-management/MainPage.vue'),
+      },
     ],
   },