feat: Main => branch&personnel router

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>