CRM_Montzar/apps/web/src/router/index.ts

import { createRouter, createWebHistory } from 'vue-router';
import type { UserRole } from '@mento/shared';
import { useAuthStore } from '@/stores/auth';

export const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/login',
      name: 'login',
      component: () => import('@/views/LoginView.vue'),
      meta: { public: true },
    },
    {
      path: '/register',
      name: 'register',
      component: () => import('@/views/RegisterView.vue'),
      meta: { public: true },
    },
    {
      path: '/f/:token',
      name: 'public-lead-form',
      component: () => import('@/views/LeadFormPublicView.vue'),
      meta: { public: true },
    },
    {
      path: '/p/:slug',
      name: 'portal',
      component: () => import('@/views/PortalView.vue'),
      meta: { public: true },
    },
    {
      path: '/',
      component: () => import('@/layouts/AppLayout.vue'),
      children: [
        {
          path: '',
          name: 'home',
          component: () => import('@/views/HomeView.vue'),
        },
        {
          path: 'profile',
          name: 'profile',
          component: () => import('@/views/ProfileView.vue'),
        },
        {
          path: 'reports',
          name: 'reports',
          component: () => import('@/views/ReportsView.vue'),
        },
        {
          path: 'sales/forecast',
          name: 'sales-forecast',
          component: () => import('@/views/SalesForecastView.vue'),
        },
        {
          path: 'tickets',
          name: 'tickets',
          component: () => import('@/views/TicketsView.vue'),
        },
        {
          path: 'tickets/new',
          name: 'ticket-new',
          component: () => import('@/views/TicketFormView.vue'),
        },
        {
          path: 'tickets/:id',
          name: 'ticket-detail',
          component: () => import('@/views/TicketFormView.vue'),
        },
        {
          path: 'activities',
          name: 'activities',
          component: () => import('@/views/ActivitiesView.vue'),
        },
        {
          path: 'activities/calendar',
          name: 'activities-calendar',
          component: () => import('@/views/ActivitiesCalendarView.vue'),
        },
        {
          path: 'activities/new',
          name: 'activity-new',
          component: () => import('@/views/ActivityFormView.vue'),
        },
        {
          path: 'activities/:id/edit',
          name: 'activity-edit',
          component: () => import('@/views/ActivityFormView.vue'),
        },
        {
          path: 'activities/:id',
          name: 'activity-detail',
          component: () => import('@/views/ActivityDetailView.vue'),
        },
        {
          path: 'quotes',
          name: 'quotes',
          component: () => import('@/views/QuotesView.vue'),
        },
        {
          path: 'quotes/new',
          name: 'quote-new',
          component: () => import('@/views/QuoteFormView.vue'),
        },
        {
          path: 'quotes/:id',
          name: 'quote-detail',
          component: () => import('@/views/QuoteFormView.vue'),
        },
        {
          path: 'invoices',
          name: 'invoices',
          component: () => import('@/views/InvoicesView.vue'),
        },
        {
          path: 'invoices/new',
          name: 'invoice-new',
          component: () => import('@/views/InvoiceFormView.vue'),
        },
        {
          path: 'invoices/:id',
          name: 'invoice-detail',
          component: () => import('@/views/InvoiceFormView.vue'),
        },
        {
          path: 'pipeline',
          name: 'pipeline',
          component: () => import('@/views/PipelineBoardView.vue'),
        },
        {
          path: 'projects',
          name: 'projects',
          component: () => import('@/views/ProjectBoardView.vue'),
        },
        {
          path: 'project-cards/new',
          name: 'project-card-new',
          component: () => import('@/views/ProjectCardFormView.vue'),
        },
        {
          path: 'project-cards/:id',
          name: 'project-card-detail',
          component: () => import('@/views/ProjectCardFormView.vue'),
        },
        {
          path: 'loyalty',
          name: 'loyalty',
          component: () => import('@/views/LoyaltyClubView.vue'),
        },
        {
          path: 'deals/new',
          name: 'deal-new',
          component: () => import('@/views/DealFormView.vue'),
        },
        {
          path: 'deals/:id',
          name: 'deal-detail',
          component: () => import('@/views/DealFormView.vue'),
        },
        {
          path: 'contacts',
          name: 'contacts',
          component: () => import('@/views/ContactsView.vue'),
        },
        {
          path: 'notes',
          name: 'notes',
          component: () => import('@/views/NotesView.vue'),
        },
        {
          path: 'settings/automations',
          name: 'automations',
          component: () => import('@/views/AutomationsSettingsView.vue'),
          meta: { roles: ['owner', 'admin'] as UserRole[] },
        },
        {
          path: 'settings/lead-forms',
          name: 'lead-forms',
          component: () => import('@/views/LeadFormsSettingsView.vue'),
          meta: { roles: ['owner', 'admin'] as UserRole[] },
        },
        {
          path: 'settings/team',
          name: 'team-settings',
          component: () => import('@/views/TeamSettingsView.vue'),
          meta: { roles: ['owner', 'admin'] as UserRole[] },
        },
        {
          path: 'settings/custom-fields',
          name: 'custom-fields',
          component: () => import('@/views/CustomFieldsSettingsView.vue'),
          meta: { roles: ['owner', 'admin'] as UserRole[] },
        },
        {
          path: 'settings/products',
          name: 'products',
          component: () => import('@/views/ProductsSettingsView.vue'),
          meta: { roles: ['owner', 'admin'] as UserRole[] },
        },
        {
          path: 'settings/products/new',
          name: 'product-new',
          component: () => import('@/views/ProductFormView.vue'),
          meta: { roles: ['owner', 'admin'] as UserRole[] },
        },
        {
          path: 'settings/products/:id/edit',
          name: 'product-edit',
          component: () => import('@/views/ProductFormView.vue'),
          meta: { roles: ['owner', 'admin'] as UserRole[] },
        },
        {
          path: 'settings/currencies',
          name: 'currencies',
          component: () => import('@/views/CurrencySettingsView.vue'),
          meta: { roles: ['owner', 'admin'] as UserRole[] },
        },
        {
          path: 'settings/tahesab',
          name: 'tahesab-settings',
          component: () => import('@/views/TahesabSettingsView.vue'),
          meta: { roles: ['owner', 'admin'] as UserRole[] },
        },
        {
          path: 'settings/faq',
          name: 'faq-settings',
          component: () => import('@/views/FaqSettingsView.vue'),
          meta: { roles: ['owner', 'admin'] as UserRole[] },
        },
        {
          path: 'contacts/people/new',
          name: 'person-new',
          component: () => import('@/views/PersonFormView.vue'),
        },
        {
          path: 'contacts/people/:id/edit',
          name: 'person-edit',
          component: () => import('@/views/PersonFormView.vue'),
        },
        {
          path: 'contacts/people/:id',
          name: 'person-detail',
          component: () => import('@/views/PersonProfileView.vue'),
        },
        {
          path: 'contacts/companies/new',
          name: 'company-new',
          component: () => import('@/views/CompanyFormView.vue'),
        },
        {
          path: 'contacts/companies/:id',
          name: 'company-detail',
          component: () => import('@/views/CompanyFormView.vue'),
        },
      ],
    },
  ],
});

router.beforeEach((to) => {
  const auth = useAuthStore();
  if (!to.meta.public && !auth.isAuthenticated) {
    return { name: 'login', query: { redirect: to.fullPath } };
  }
  if (
    to.meta.public &&
    auth.isAuthenticated &&
    (to.name === 'login' || to.name === 'register')
  ) {
    return { name: 'home' };
  }
  const roles = to.meta.roles as UserRole[] | undefined;
  if (roles?.length) {
    const role = auth.user?.role as UserRole | undefined;
    if (!role || !roles.includes(role)) {
      return { name: 'home' };
    }
  }
  return true;
});