jws-frontend/src/pages/MainPage.vue

<script setup lang="ts">
import MenuItem from 'components/00_home/MenuItem.vue';
import { useNavigator } from 'src/stores/navigator';
import { onMounted, ref } from 'vue';
import { getRole } from 'src/services/keycloak';

const navigatorStore = useNavigator();
const menu = ref<InstanceType<typeof MenuItem>['$props']['list']>([]);
const role = ref();

onMounted(() => {
  navigatorStore.current.title = '';
  navigatorStore.current.path = [{ text: '' }];

  role.value = getRole();
  menu.value = [
    {
      value: 'branch-management',
      icon: 'mdi-chart-donut',
      color: 'green',
      title: 'menu.branch',
      caption: 'menu.branchCaption',
      hidden:
        role.value.includes('admin') ||
        role.value.includes('branch_admin') ||
        role.value.includes('head_of_admin') ||
        role.value.includes('system') ||
        role.value.includes('owner')
          ? false
          : true,
    },
    {
      value: 'personnel-management',
      icon: 'fa6-solid:building-user',
      color: 'cyan',
      title: 'menu.user',
      caption: 'menu.userCaption',
      hidden:
        role.value.includes('admin') ||
        role.value.includes('branch_admin') ||
        role.value.includes('head_of_admin') ||
        role.value.includes('system') ||
        role.value.includes('owner') ||
        role.value.includes('branch_manager')
          ? false
          : true,
    },
    {
      value: 'customer-management',
      icon: 'isax-frame5',
      color: 'cyan',
      title: 'menu.customer',
      caption: 'menu.customerCaption',
      isax: true,
    },
    {
      value: 'product-service',
      icon: 'heroicons-truck-solid',
      color: 'orange',
      title: 'menu.product',
      caption: 'menu.productCaption',
    },
    {
      value: 'quotation',
      icon: 'mdi-file-document',
      color: 'violet',
      title: 'menu.quotation',
      caption: 'menu.quotationCaption',
    },
    {
      value: 'request-list',
      icon: 'isax-device-message5',
      color: 'purple',
      title: 'menu.requestList',
      caption: 'menu.requestListCaption',
      isax: true,
    },
    {
      value: 'task-order',
      icon: 'isax-receipt-2-15',
      color: 'red',
      title: 'menu.taskOrder',
      caption: 'menu.workOrderCaption',
      isax: true,
    },
    {
      value: '',
      icon: 'material-symbols:box',
      color: 'camo',
      title: 'menu.invoice',
      caption: 'menu.invoiceCaption',
      disabled: true,
    },
    {
      value: '',
      icon: 'isax-dollar-circle4',
      color: 'lime',
      title: 'menu.accountingLedger',
      caption: 'menu.accountingLedgerCaption',
      isax: true,
      disabled: true,
    },
    {
      value: '',
      icon: 'isax-element-35',
      color: 'cyan',
      title: 'menu.dashboard',
      caption: 'menu.dashboardCaption',
      isax: true,
      disabled: true,
    },
    {
      value: '',
      icon: 'mdi-file-document',
      color: 'indigo',
      title: 'menu.report',
      caption: 'menu.reportCaption',
      disabled: true,
    },
  ];
});
</script>

<template>
  <div class="q-pb-lg">
    <MenuItem :list="menu" />
  </div>
</template>

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