feat: Main => i18n

src/components/home/MenuItem.vue

@@ -53,8 +53,8 @@ function navigateTo(destination: string) {
         />
       </AppCircle>
       <div class="column items-center q-mt-md text-center">
-        <span style="font-weight: var(--font-weight-8)">{{ v.title }}</span>
+        <span style="font-weight: var(--font-weight-8)">{{ $t(v.title) }}</span>
-        <span style="color: rgba(130 130 130 / 0.7)">{{ v.caption }}</span>
+        <span style="color: rgba(130 130 130 / 0.7)">{{ $t(v.caption) }}</span>
       </div>
     </AppBox>
   </div>

src/i18n/en-US/index.ts

@@ -2,6 +2,7 @@
 // so you can safely delete all default props below
 import drawerComponent from './drawer-component';
 import branchMainPage from './branch-main-page';
+import main from './main';
 
 export default {
   ok: 'Confirm',
@@ -13,4 +14,5 @@ export default {
   save: 'Save',
   ...drawerComponent,
   ...branchMainPage,
+  ...main,
 };

src/i18n/en-US/main.ts

@@ -0,0 +1,34 @@
+export default {
+  mainBranchTitle: 'Branch Management',
+  mainBranchCaption: 'Manage branches within the organization.',
+
+  mainPersonnelTitle: 'Personnel Management',
+  mainPersonnelCaption: 'Manage personnel within the organization.',
+
+  mainCustomerTitle: 'Customer Management',
+  mainCustomerCaption: 'Manage customer within the organization.',
+
+  mainProductTitle: 'Products & Services',
+  mainProductCaption: 'List of products and services.',
+
+  mainQuotationTitle: 'Quotation',
+  mainQuotationCaption: 'List of quotations.',
+
+  mainRequestTitle: 'Purchase Order',
+  mainRequestCaption: 'List of purchase order.',
+
+  mainOrderTitle: 'Request',
+  mainOrderCaption: 'List of requests.',
+
+  mainReceiptTitle: 'Bill of Lading',
+  mainReceiptCaption: 'Bill of lading list.',
+
+  mainFinanceTitle: 'Financial Management',
+  mainFinanceCaption: 'List of all accounts.',
+
+  mainDashboardTitle: 'Dashboard',
+  mainDashboardCaption: 'Statistical information.',
+
+  mainReportTitle: 'Report',
+  mainReportCaption: 'List of report.',
+};

src/i18n/th-th/index.ts

@@ -1,5 +1,6 @@
 import drawerComponent from './drawer-component';
 import branchMainPage from './branch-main-page';
+import main from './main';
 
 export default {
   ok: 'ยืนยัน',
@@ -11,4 +12,5 @@ export default {
   save: 'บันทึก',
   ...drawerComponent,
   ...branchMainPage,
+  ...main,
 };

src/i18n/th-th/main.ts

@@ -0,0 +1,34 @@
+export default {
+  mainBranchTitle: 'จัดการสาขา',
+  mainBranchCaption: 'จัดการสาขาภายในองค์กร',
+
+  mainPersonnelTitle: 'จัดการบุคลากร',
+  mainPersonnelCaption: 'จัดการคนภายในองค์กร',
+
+  mainCustomerTitle: 'จัดการลูกค้า',
+  mainCustomerCaption: 'จัดการคนภายในองค์กร',
+
+  mainProductTitle: 'สินค้าและบริการ',
+  mainProductCaption: 'รายการสินค้าและบริการ',
+
+  mainQuotationTitle: 'ใบเสนอราคา',
+  mainQuotationCaption: 'รายการใบเสนอราคา',
+
+  mainRequestTitle: 'รายการคำขอ',
+  mainRequestCaption: 'แสดงรายการคำขอ',
+
+  mainOrderTitle: 'ใบสั่งซื้อ',
+  mainOrderCaption: 'รายการใบสั่งซื้อ',
+
+  mainReceiptTitle: 'ใบรับสินค้า',
+  mainReceiptCaption: 'รายการใบรับสินค้า',
+
+  mainFinanceTitle: 'การจัดการการเงิน',
+  mainFinanceCaption: 'รายการบัญชีทั้งหมด',
+
+  mainDashboardTitle: 'Dashboard',
+  mainDashboardCaption: 'แสดงข้อมูลสถิติ',
+
+  mainReportTitle: 'รายงาน',
+  mainReportCaption: 'แสดงรายงาน',
+};

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: 'จัดการสาขา',
+    title: 'mainBranchTitle',
-    caption: 'จัดการสาขาภายในองค์กร',
+    caption: 'mainBranchCaption',
   },
   {
     value: 'personnel-management',
     icon: 'isax-frame5',
     color: 'cyan',
-    title: 'จัดการบุคลากร',
+    title: 'mainPersonnelTitle',
-    caption: 'จัดการคนภายในองค์กร',
+    caption: 'mainPersonnelCaption',
     isax: true,
   },
   {
     value: '',
     icon: 'isax-frame5',
     color: 'cyan',
-    title: 'จัดการลูกค้า',
+    title: 'mainCustomerTitle',
-    caption: 'จัดการคนภายในองค์กร',
+    caption: 'mainCustomerCaption',
     isax: true,
   },
   {
     value: '',
     icon: 'heroicons-truck-solid',
     color: 'orange',
-    title: 'สินค้าและบริการ',
+    title: 'mainProductTitle',
-    caption: 'รายการสินค้าและบริการ',
+    caption: 'mainProductCaption',
   },
   {
     value: '',
     icon: 'mdi-file-document',
     color: 'violet',
-    title: 'ใบเสนอราคา',
+    title: 'mainQuotationTitle',
-    caption: 'รายการใบเสนอราคา',
+    caption: 'mainQuotationCaption',
   },
   {
     value: '',
     icon: 'isax-device-message5',
     color: 'purple',
-    title: 'รายการคำขอ',
+    title: 'mainRequestTitle',
-    caption: 'แสดงรายการคำขอ',
+    caption: 'mainRequestCaption',
     isax: true,
   },
   {
     value: '',
     icon: 'isax-receipt-2-15',
     color: 'red',
-    title: 'ใบสั่งซื้อ',
+    title: 'mainOrderTitle',
-    caption: 'รายการใบสั่งซื้อ',
+    caption: 'mainOrderCaption',
     isax: true,
   },
   {
     value: '',
     icon: 'material-symbols:box',
     color: 'camo',
-    title: 'ใบรับสินค้า',
+    title: 'mainReceiptTitle',
-    caption: 'รายการใบรับสินค้า',
+    caption: 'mainReceiptCaption',
   },
   {
     value: '',
     icon: 'isax-dollar-circle4',
     color: 'lime',
-    title: 'การจัดการการเงิน',
+    title: 'mainFinanceTitle',
-    caption: 'รายการบัญชีทั้งหมด',
+    caption: 'mainFinanceCaption',
     isax: true,
   },
   {
     value: '',
     icon: 'isax-element-35',
     color: 'cyan',
-    title: 'Dashboard',
+    title: 'mainDashboardTitle',
-    caption: 'แสดงข้อมูลสถิติ',
+    caption: 'mainDashboardCaption',
     isax: true,
   },
   {
     value: '',
     icon: 'mdi-file-document',
     color: 'indigo',
-    title: 'รายงาน',
+    title: 'mainReportTitle',
-    caption: 'แสดงรายงาน',
+    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>