jws-frontend/src/pages/MainPage.vue

<script setup lang="ts">
import MenuItem from 'components/home/MenuItem.vue';

const menu = [
  {
    value: 'branch-management',
    icon: 'mdi-chart-donut',
    color: 'green',
    title: 'mainBranchTitle',
    caption: 'mainBranchCaption',
  },
  {
    value: 'personnel-management',
    icon: 'isax-frame5',
    color: 'cyan',
    title: 'mainPersonnelTitle',
    caption: 'mainPersonnelCaption',
    isax: true,
  },
  {
    value: 'customer-management',
    icon: 'isax-frame5',
    color: 'cyan',
    title: 'mainCustomerTitle',
    caption: 'mainCustomerCaption',
    isax: true,
  },
  {
    value: 'product-service',
    icon: 'heroicons-truck-solid',
    color: 'orange',
    title: 'mainProductTitle',
    caption: 'mainProductCaption',
  },
  {
    value: '',
    icon: 'mdi-file-document',
    color: 'violet',
    title: 'mainQuotationTitle',
    caption: 'mainQuotationCaption',
  },
  {
    value: '',
    icon: 'isax-device-message5',
    color: 'purple',
    title: 'mainRequestTitle',
    caption: 'mainRequestCaption',
    isax: true,
  },
  {
    value: '',
    icon: 'isax-receipt-2-15',
    color: 'red',
    title: 'mainOrderTitle',
    caption: 'mainOrderCaption',
    isax: true,
  },
  {
    value: '',
    icon: 'material-symbols:box',
    color: 'camo',
    title: 'mainReceiptTitle',
    caption: 'mainReceiptCaption',
  },
  {
    value: '',
    icon: 'isax-dollar-circle4',
    color: 'lime',
    title: 'mainFinanceTitle',
    caption: 'mainFinanceCaption',
    isax: true,
  },
  {
    value: '',
    icon: 'isax-element-35',
    color: 'cyan',
    title: 'mainDashboardTitle',
    caption: 'mainDashboardCaption',
    isax: true,
  },
  {
    value: '',
    icon: 'mdi-file-document',
    color: 'indigo',
    title: 'mainReportTitle',
    caption: 'mainReportCaption',
  },
] satisfies InstanceType<typeof MenuItem>['$props']['list'];
</script>

<template>
  <MenuItem :list="menu" />
</template>

<style scoped>
.person {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--size-6);
}
</style>