feat: Main => i18n

src/pages/MainPage.vue

@@ -1,101 +1,100 @@
 <script setup lang="ts">
 import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+
 import MenuItem from 'components/home/MenuItem.vue';
-import PersonCard from 'src/components/home/PersonCard.vue';
-import UsersDetailCardComponent from 'components/UsersDetailCardComponent.vue';
+
+const { t, locale } = useI18n();
 
 const menu = [
   {
     value: 'branch-management',
     icon: 'mdi-chart-donut',
     color: 'green',
-    title: 'จัดการสาขา',
-    caption: 'จัดการสาขาภายในองค์กร',
+    title: 'mainBranchTitle',
+    caption: 'mainBranchCaption',
   },
   {
     value: 'personnel-management',
     icon: 'isax-frame5',
     color: 'cyan',
-    title: 'จัดการบุคลากร',
-    caption: 'จัดการคนภายในองค์กร',
+    title: 'mainPersonnelTitle',
+    caption: 'mainPersonnelCaption',
     isax: true,
   },
   {
     value: '',
     icon: 'isax-frame5',
     color: 'cyan',
-    title: 'จัดการลูกค้า',
-    caption: 'จัดการคนภายในองค์กร',
+    title: 'mainCustomerTitle',
+    caption: 'mainCustomerCaption',
     isax: true,
   },
   {
     value: '',
     icon: 'heroicons-truck-solid',
     color: 'orange',
-    title: 'สินค้าและบริการ',
-    caption: 'รายการสินค้าและบริการ',
+    title: 'mainProductTitle',
+    caption: 'mainProductCaption',
   },
   {
     value: '',
     icon: 'mdi-file-document',
     color: 'violet',
-    title: 'ใบเสนอราคา',
-    caption: 'รายการใบเสนอราคา',
+    title: 'mainQuotationTitle',
+    caption: 'mainQuotationCaption',
   },
   {
     value: '',
     icon: 'isax-device-message5',
     color: 'purple',
-    title: 'รายการคำขอ',
-    caption: 'แสดงรายการคำขอ',
+    title: 'mainRequestTitle',
+    caption: 'mainRequestCaption',
     isax: true,
   },
   {
     value: '',
     icon: 'isax-receipt-2-15',
     color: 'red',
-    title: 'ใบสั่งซื้อ',
-    caption: 'รายการใบสั่งซื้อ',
+    title: 'mainOrderTitle',
+    caption: 'mainOrderCaption',
     isax: true,
   },
   {
     value: '',
     icon: 'material-symbols:box',
     color: 'camo',
-    title: 'ใบรับสินค้า',
-    caption: 'รายการใบรับสินค้า',
+    title: 'mainReceiptTitle',
+    caption: 'mainReceiptCaption',
   },
   {
     value: '',
     icon: 'isax-dollar-circle4',
     color: 'lime',
-    title: 'การจัดการการเงิน',
-    caption: 'รายการบัญชีทั้งหมด',
+    title: 'mainFinanceTitle',
+    caption: 'mainFinanceCaption',
     isax: true,
   },
   {
     value: '',
     icon: 'isax-element-35',
     color: 'cyan',
-    title: 'Dashboard',
-    caption: 'แสดงข้อมูลสถิติ',
+    title: 'mainDashboardTitle',
+    caption: 'mainDashboardCaption',
     isax: true,
   },
   {
     value: '',
     icon: 'mdi-file-document',
     color: 'indigo',
-    title: 'รายงาน',
-    caption: 'แสดงรายงาน',
+    title: 'mainReportTitle',
+    caption: 'mainReportCaption',
   },
 ] satisfies InstanceType<typeof MenuItem>['$props']['list'];
 </script>
 
 <template>
   <MenuItem :list="menu" />
-  <!-- <div class="row">
-    <users-detail-card-component class="q-pa-md" v-for="v in [1, 2]" :key="v" />
-  </div> -->
 </template>
 
 <style scoped>