Initial commit

resources/js/plugins/1.router/additional-routes.js

@@ -0,0 +1,71 @@
+const emailRouteComponent = () => import('@/pages/apps/email/index.vue')
+
+// 👉 Redirects
+export const redirects = [
+  // ℹ️ We are redirecting to different pages based on role.
+  // NOTE: Role is just for UI purposes. ACL is based on abilities.
+  {
+    path: '/',
+    name: 'index',
+    redirect: to => {
+      // TODO: Get type from backend
+      const userData = useCookie('userData')
+      const userRole = userData.value?.role
+      if (userRole === 'admin')
+        return { name: 'dashboards-crm' }
+      if (userRole === 'client')
+        return { name: 'access-control' }
+      
+      return { name: 'login', query: to.query }
+    },
+  },
+  {
+    path: '/pages/user-profile',
+    name: 'pages-user-profile',
+    redirect: () => ({ name: 'pages-user-profile-tab', params: { tab: 'profile' } }),
+  },
+  {
+    path: '/pages/account-settings',
+    name: 'pages-account-settings',
+    redirect: () => ({ name: 'pages-account-settings-tab', params: { tab: 'account' } }),
+  },
+]
+export const routes = [
+  // Email filter
+  {
+    path: '/apps/email/filter/:filter',
+    name: 'apps-email-filter',
+    component: emailRouteComponent,
+    meta: {
+      navActiveLink: 'apps-email',
+      layoutWrapperClasses: 'layout-content-height-fixed',
+    },
+  },
+
+  // Email label
+  {
+    path: '/apps/email/label/:label',
+    name: 'apps-email-label',
+    component: emailRouteComponent,
+    meta: {
+      // contentClass: 'email-application',
+      navActiveLink: 'apps-email',
+      layoutWrapperClasses: 'layout-content-height-fixed',
+    },
+  },
+  {
+    path: '/dashboards/logistics',
+    name: 'dashboards-logistics',
+    component: () => import('@/pages/apps/logistics/dashboard.vue'),
+  },
+  {
+    path: '/dashboards/academy',
+    name: 'dashboards-academy',
+    component: () => import('@/pages/apps/academy/dashboard.vue'),
+  },
+  {
+    path: '/apps/ecommerce/dashboard',
+    name: 'apps-ecommerce-dashboard',
+    component: () => import('@/pages/dashboards/ecommerce.vue'),
+  },
+]

resources/js/plugins/1.router/guards.js

@@ -0,0 +1,45 @@
+import { canNavigate } from '@layouts/plugins/casl'
+
+export const setupGuards = router => {
+  // 👉 router.beforeEach
+  // Docs: https://router.vuejs.org/guide/advanced/navigation-guards.html#global-before-guards
+  router.beforeEach(to => {
+    /*
+         * If it's a public route, continue navigation. This kind of pages are allowed to visited by login & non-login users. Basically, without any restrictions.
+         * Examples of public routes are, 404, under maintenance, etc.
+         */
+    if (to.meta.public)
+      return
+
+    /**
+         * Check if user is logged in by checking if token & user data exists in local storage
+         * Feel free to update this logic to suit your needs
+         */
+    const isLoggedIn = !!(useCookie('userData').value && useCookie('accessToken').value)
+
+    /*
+          If user is logged in and is trying to access login like page, redirect to home
+          else allow visiting the page
+          (WARN: Don't allow executing further by return statement because next code will check for permissions)
+         */
+    if (to.meta.unauthenticatedOnly) {
+      if (isLoggedIn)
+        return '/'
+      else
+        return undefined
+    }
+    if (!canNavigate(to) && to.matched.length) {
+      /* eslint-disable indent */
+            return isLoggedIn
+                ? { name: 'not-authorized' }
+                : {
+                    name: 'login',
+                    query: {
+                        ...to.query,
+                        to: to.fullPath !== '/' ? to.path : undefined,
+                    },
+                }
+            /* eslint-enable indent */
+    }
+  })
+}

resources/js/plugins/1.router/index.js

@@ -0,0 +1,38 @@
+import { setupLayouts } from 'virtual:generated-layouts'
+import { createRouter, createWebHistory } from 'vue-router/auto'
+import { redirects, routes } from './additional-routes'
+import { setupGuards } from './guards'
+
+function recursiveLayouts(route) {
+  if (route.children) {
+    for (let i = 0; i < route.children.length; i++)
+      route.children[i] = recursiveLayouts(route.children[i])
+    
+    return route
+  }
+  
+  return setupLayouts([route])[0]
+}
+
+const router = createRouter({
+  history: createWebHistory(import.meta.env.BASE_URL),
+  scrollBehavior(to) {
+    if (to.hash)
+      return { el: to.hash, behavior: 'smooth', top: 60 }
+    
+    return { top: 0 }
+  },
+  extendRoutes: pages => [
+    ...redirects,
+    ...[
+      ...pages,
+      ...routes,
+    ].map(route => recursiveLayouts(route)),
+  ],
+})
+
+setupGuards(router)
+export { router }
+export default function (app) {
+  app.use(router)
+}

resources/js/plugins/2.pinia.js

@@ -0,0 +1,6 @@
+import { createPinia } from 'pinia'
+
+export const store = createPinia()
+export default function (app) {
+  app.use(store)
+}

resources/js/plugins/casl/ability.js

@@ -0,0 +1,3 @@
+import { createMongoAbility } from '@casl/ability'
+
+export const ability = createMongoAbility()

resources/js/plugins/casl/composables/useAbility.js

@@ -0,0 +1,3 @@
+import { useAbility as useCaslAbility } from '@casl/vue'
+
+export const useAbility = () => useCaslAbility()

resources/js/plugins/casl/index.js

@@ -0,0 +1,11 @@
+import { createMongoAbility } from '@casl/ability'
+import { abilitiesPlugin } from '@casl/vue'
+
+export default function (app) {
+  const userAbilityRules = useCookie('userAbilityRules')
+  const initialAbility = createMongoAbility(userAbilityRules.value ?? [])
+
+  app.use(abilitiesPlugin, initialAbility, {
+    useGlobalProperties: true,
+  })
+}

resources/js/plugins/fake-api/handlers/app-bar-search/db.js

@@ -0,0 +1,620 @@
+export const db = {
+  searchItems: [
+    {
+      title: 'Dashboards',
+      category: 'dashboards',
+      children: [
+        {
+          url: { name: 'dashboards-analytics' },
+          icon: 'tabler-timeline',
+          title: 'Analytics Dashboard',
+        },
+        {
+          url: { name: 'dashboards-crm' },
+          icon: 'tabler-file-analytics',
+          title: 'CRM Dashboard',
+        },
+        {
+          url: { name: 'dashboards-ecommerce' },
+          icon: 'tabler-shopping-cart',
+          title: 'ECommerce Dashboard',
+        },
+        {
+          url: { name: 'dashboards-academy' },
+          icon: 'tabler-book',
+          title: 'Academy Dashboard',
+        },
+        {
+          url: { name: 'dashboards-logistics' },
+          icon: 'tabler-truck',
+          title: 'Logistics Dashboard',
+        },
+      ],
+    },
+    {
+      title: 'Front Pages',
+      category: 'frontPages',
+      children: [
+        {
+          url: { name: 'front-pages-landing-page' },
+          icon: 'tabler-file-description',
+          title: 'Landing Front',
+        },
+        {
+          url: { name: 'front-pages-pricing' },
+          icon: 'tabler-file-description',
+          title: 'Pricing Front',
+        },
+        {
+          url: { name: 'front-pages-payment' },
+          icon: 'tabler-file-description',
+          title: 'Payment Front',
+        },
+        {
+          url: { name: 'front-pages-checkout' },
+          icon: 'tabler-file-description',
+          title: 'Checkout Front',
+        },
+        {
+          url: { name: 'front-pages-help-center' },
+          icon: 'tabler-file-description',
+          title: 'Help Center Front',
+        },
+      ],
+    },
+    {
+      title: 'Apps & Pages',
+      category: 'appsPages',
+      children: [
+        {
+          url: { name: 'apps-email' },
+          icon: 'tabler-mail',
+          title: 'Email',
+        },
+        {
+          url: { name: 'apps-chat' },
+          icon: 'tabler-message',
+          title: 'Chat',
+        },
+        {
+          url: { name: 'apps-calendar' },
+          icon: 'tabler-calendar',
+          title: 'Calendar',
+        },
+        {
+          title: 'Kanban',
+          icon: 'tabler-layout-kanban',
+          url: { name: 'apps-kanban' },
+        },
+        {
+          url: { name: 'apps-ecommerce-dashboard' },
+          icon: 'tabler-shopping-cart',
+          title: 'ECommerce Dashboard',
+        },
+        {
+          url: { name: 'apps-ecommerce-product-list' },
+          icon: 'tabler-list',
+          title: 'Ecommerce - Product List',
+        },
+        {
+          url: { name: 'apps-ecommerce-product-add' },
+          icon: 'tabler-circle-plus',
+          title: 'Ecommerce - Add Product',
+        },
+        {
+          url: { name: 'apps-ecommerce-product-category-list' },
+          icon: 'tabler-list',
+          title: 'Ecommerce - Category List',
+        },
+        {
+          url: { name: 'apps-ecommerce-order-list' },
+          icon: 'tabler-list',
+          title: 'Ecommerce - Order List',
+        },
+        {
+          url: { name: 'apps-ecommerce-order-details-id', params: { id: '9042' } },
+          icon: 'tabler-list-check',
+          title: 'Ecommerce - Order Details',
+        },
+        {
+          url: { name: 'apps-ecommerce-customer-list' },
+          icon: 'tabler-user',
+          title: 'Ecommerce - Customer List',
+        },
+        {
+          url: { name: 'apps-ecommerce-customer-details-id', params: { id: '478426', tab: 'security' } },
+          icon: 'tabler-list',
+          title: 'Ecommerce - Customer Details',
+        },
+        {
+          url: { name: 'apps-ecommerce-manage-review' },
+          icon: 'tabler-quote',
+          title: 'Ecommerce - Manage Review',
+        },
+        {
+          url: { name: 'apps-ecommerce-referrals' },
+          icon: 'tabler-users-group',
+          title: 'Ecommerce - Referrals',
+        },
+        {
+          url: { name: 'apps-ecommerce-settings' },
+          icon: 'tabler-settings',
+          title: 'Ecommerce - Settings',
+        },
+        {
+          url: { name: 'apps-academy-dashboard' },
+          icon: 'tabler-book',
+          title: 'Academy - Dashboard',
+        },
+        {
+          url: { name: 'apps-academy-my-course' },
+          icon: 'tabler-list',
+          title: 'Academy - My Courses',
+        },
+        {
+          url: { name: 'apps-academy-course-details' },
+          icon: 'tabler-list',
+          title: 'Academy - Course Details',
+        },
+        {
+          url: { name: 'apps-logistics-dashboard' },
+          icon: 'tabler-book',
+          title: 'Logistics - Dashboard',
+        },
+        {
+          url: { name: 'apps-logistics-fleet' },
+          icon: 'tabler-car',
+          title: 'Logistics - fleet',
+        },
+        {
+          url: { name: 'apps-invoice-list' },
+          icon: 'tabler-list',
+          title: 'Invoice List',
+        },
+        {
+          url: { name: 'apps-invoice-preview-id', params: { id: '5036' } },
+          icon: 'tabler-file-description',
+          title: 'Invoice Preview',
+        },
+        {
+          url: { name: 'apps-invoice-edit-id', params: { id: '5036' } },
+          icon: 'tabler-file-pencil',
+          title: 'Invoice Edit',
+        },
+        {
+          url: { name: 'apps-invoice-add' },
+          icon: 'tabler-file-plus',
+          title: 'Invoice Add',
+        },
+        {
+          url: { name: 'apps-user-list' },
+          icon: 'tabler-users-group',
+          title: 'User List',
+        },
+        {
+          url: { name: 'apps-user-view-id', params: { id: 21 } },
+          icon: 'tabler-eye',
+          title: 'User View',
+        },
+        {
+          url: { name: 'pages-user-profile-tab', params: { tab: 'profile' } },
+          icon: 'tabler-user-circle',
+          title: 'User Profile - Profile',
+        },
+        {
+          url: { name: 'pages-account-settings-tab', params: { tab: 'account' } },
+          icon: 'tabler-user-circle',
+          title: 'Account Settings - Account',
+        },
+        {
+          url: { name: 'pages-account-settings-tab', params: { tab: 'security' } },
+          icon: 'tabler-lock-open',
+          title: 'Account Settings - Security',
+        },
+        {
+          url: { name: 'pages-account-settings-tab', params: { tab: 'billing-plans' } },
+          icon: 'tabler-currency-dollar',
+          title: 'Account Settings - Billing',
+        },
+        {
+          url: { name: 'pages-account-settings-tab', params: { tab: 'notification' } },
+          icon: 'tabler-bell',
+          title: 'Account Settings - Notifications',
+        },
+        {
+          url: { name: 'pages-account-settings-tab', params: { tab: 'connection' } },
+          icon: 'tabler-link',
+          title: 'Account Settings - Connections',
+        },
+        {
+          url: { name: 'pages-pricing' },
+          icon: 'tabler-currency-dollar',
+          title: 'Pricing',
+        },
+        {
+          url: { name: 'pages-faq' },
+          icon: 'tabler-help-circle',
+          title: 'FAQ',
+        },
+        {
+          url: { name: 'pages-misc-coming-soon' },
+          icon: 'tabler-clock',
+          title: 'Coming Soon',
+        },
+        {
+          url: { name: 'pages-misc-under-maintenance' },
+          icon: 'tabler-settings',
+          title: 'Under Maintenance',
+        },
+        {
+          url: { path: '/pages/misc/page-not-found' },
+          icon: 'tabler-alert-circle',
+          title: 'Page Not Found - 404',
+        },
+        {
+          url: { path: '/pages/misc/not-authorized' },
+          icon: 'tabler-user-x',
+          title: 'Not Authorized - 401',
+        },
+        {
+          url: { name: 'pages-authentication-login-v1' },
+          icon: 'tabler-login',
+          title: 'Login V1',
+        },
+        {
+          url: { name: 'pages-authentication-login-v2' },
+          icon: 'tabler-login',
+          title: 'Login V2',
+        },
+        {
+          url: { name: 'pages-authentication-register-v1' },
+          icon: 'tabler-user-plus',
+          title: 'Register V1',
+        },
+        {
+          url: { name: 'pages-authentication-register-v2' },
+          icon: 'tabler-user-plus',
+          title: 'Register V2',
+        },
+        {
+          icon: 'tabler-mail',
+          title: 'Verify Email V1',
+          url: { name: 'pages-authentication-verify-email-v1' },
+        },
+        {
+          icon: 'tabler-mail',
+          title: 'Verify Email V2',
+          url: { name: 'pages-authentication-verify-email-v2' },
+        },
+        {
+          url: { name: 'pages-authentication-forgot-password-v1' },
+          icon: 'tabler-lock-exclamation',
+          title: 'Forgot Password V1',
+        },
+        {
+          url: { name: 'pages-authentication-forgot-password-v2' },
+          icon: 'tabler-lock-exclamation',
+          title: 'Forgot Password V2',
+        },
+        {
+          url: { name: 'pages-authentication-reset-password-v1' },
+          icon: 'tabler-help-circle',
+          title: 'Reset Password V1',
+        },
+        {
+          url: { name: 'pages-authentication-reset-password-v2' },
+          icon: 'tabler-help-circle',
+          title: 'Reset Password V2',
+        },
+        {
+          icon: 'tabler-devices',
+          title: 'Two Steps V1',
+          url: { name: 'pages-authentication-two-steps-v1' },
+        },
+        {
+          icon: 'tabler-devices',
+          title: 'Two Steps V2',
+          url: { name: 'pages-authentication-two-steps-v2' },
+        },
+        {
+          url: { name: 'pages-dialog-examples' },
+          icon: 'tabler-square',
+          title: 'Dialog Examples',
+        },
+        {
+          url: { name: 'pages-authentication-register-multi-steps' },
+          icon: 'tabler-user-plus',
+          title: 'Register Multi-Steps',
+        },
+        {
+          url: { name: 'wizard-examples-checkout' },
+          icon: 'tabler-shopping-cart',
+          title: 'Wizard - Checkout',
+        },
+        {
+          url: { name: 'wizard-examples-create-deal' },
+          icon: 'tabler-gift',
+          title: 'Wizard - create deal',
+        },
+        {
+          url: { name: 'wizard-examples-property-listing' },
+          icon: 'tabler-home',
+          title: 'Wizard - Property Listing',
+        },
+        {
+          url: { name: 'apps-roles' },
+          icon: 'tabler-shield-checkered',
+          title: 'Roles',
+        },
+        {
+          url: { name: 'apps-permissions' },
+          icon: 'tabler-shield-checkered',
+          title: 'Permissions',
+        },
+      ],
+    },
+    {
+      title: 'User Interface',
+      category: 'userInterface',
+      children: [
+        {
+          url: { name: 'pages-typography' },
+          icon: 'tabler-letter-case',
+          title: 'Typography',
+        },
+        {
+          url: { name: 'pages-icons' },
+          icon: 'tabler-icons',
+          title: 'Icons',
+        },
+        {
+          url: { name: 'pages-cards-card-basic' },
+          icon: 'tabler-id',
+          title: 'Card Basic',
+        },
+        {
+          url: { name: 'pages-cards-card-advance' },
+          icon: 'tabler-square-plus',
+          title: 'Card Advance',
+        },
+        {
+          url: { name: 'pages-cards-card-statistics' },
+          icon: 'tabler-chart-bar',
+          title: 'Card Statistics',
+        },
+        {
+          url: { name: 'pages-cards-card-widgets' },
+          icon: 'tabler-chart-bar',
+          title: 'Card widgets',
+        },
+        {
+          url: { name: 'pages-cards-card-actions' },
+          icon: 'tabler-square-plus',
+          title: 'Card Actions',
+        },
+        {
+          url: { name: 'components-alert' },
+          icon: 'tabler-alert-triangle',
+          title: 'Alerts',
+        },
+        {
+          url: { name: 'components-avatar' },
+          icon: 'tabler-user-circle',
+          title: 'Avatars',
+        },
+        {
+          url: { name: 'components-badge' },
+          icon: 'tabler-badge',
+          title: 'Badges',
+        },
+        {
+          url: { name: 'components-button' },
+          icon: 'tabler-circle-plus',
+          title: 'Buttons',
+        },
+        {
+          url: { name: 'components-chip' },
+          icon: 'tabler-square',
+          title: 'Chips',
+        },
+        {
+          url: { name: 'components-dialog' },
+          icon: 'tabler-square',
+          title: 'Dialogs',
+        },
+        {
+          url: { name: 'components-list' },
+          icon: 'tabler-list',
+          title: 'List',
+        },
+        {
+          url: { name: 'components-menu' },
+          icon: 'tabler-menu-2',
+          title: 'Menu',
+        },
+        {
+          url: { name: 'components-pagination' },
+          icon: 'tabler-skip-forward',
+          title: 'Pagination',
+        },
+        {
+          url: { name: 'components-progress-circular' },
+          icon: 'tabler-progress',
+          title: 'Progress Circular',
+        },
+        {
+          url: { name: 'components-progress-linear' },
+          icon: 'tabler-progress',
+          title: 'Progress Linear',
+        },
+        {
+          url: { name: 'components-expansion-panel' },
+          icon: 'tabler-align-center',
+          title: 'Expansion Panel',
+        },
+        {
+          url: { name: 'components-snackbar' },
+          icon: 'tabler-message-dots',
+          title: 'Snackbar',
+        },
+        {
+          url: { name: 'components-tabs' },
+          icon: 'tabler-app-window',
+          title: 'Tabs',
+        },
+        {
+          url: { name: 'components-timeline' },
+          icon: 'tabler-timeline',
+          title: 'Timeline',
+        },
+        {
+          url: { name: 'components-tooltip' },
+          icon: 'tabler-message-2',
+          title: 'Tooltip',
+        },
+        {
+          url: { name: 'extensions-tour' },
+          icon: 'tabler-box',
+          title: 'Tour',
+        },
+        {
+          url: { name: 'extensions-swiper' },
+          icon: 'tabler-photo',
+          title: 'Swiper',
+        },
+      ],
+    },
+    {
+      title: 'Forms & Tables',
+      category: 'formsTables',
+      children: [
+        {
+          url: { name: 'forms-textfield' },
+          icon: 'tabler-text-caption',
+          title: 'TextField',
+        },
+        {
+          url: { name: 'forms-select' },
+          icon: 'tabler-list-check',
+          title: 'Select',
+        },
+        {
+          url: { name: 'forms-checkbox' },
+          icon: 'tabler-square-check',
+          title: 'Checkbox',
+        },
+        {
+          url: { name: 'forms-radio' },
+          icon: 'tabler-circle-dot',
+          title: 'Radio',
+        },
+        {
+          url: { name: 'forms-combobox' },
+          icon: 'tabler-square-check',
+          title: 'Combobox',
+        },
+        {
+          url: { name: 'forms-date-time-picker' },
+          icon: 'tabler-calendar',
+          title: 'Date Time picker',
+        },
+        {
+          url: { name: 'forms-textarea' },
+          icon: 'tabler-notes',
+          title: 'Textarea',
+        },
+        {
+          url: { name: 'forms-switch' },
+          icon: 'tabler-toggle-right',
+          title: 'Switch',
+        },
+        {
+          url: { name: 'forms-file-input' },
+          icon: 'tabler-upload',
+          title: 'File Input',
+        },
+        {
+          url: { name: 'forms-editors' },
+          icon: 'tabler-file-pencil',
+          title: 'Editors',
+        },
+        {
+          url: { name: 'forms-rating' },
+          icon: 'tabler-star',
+          title: 'Form Rating',
+        },
+        {
+          url: { name: 'forms-slider' },
+          icon: 'tabler-hand-move',
+          title: 'Slider',
+        },
+        {
+          url: { name: 'forms-range-slider' },
+          icon: 'tabler-adjustments-horizontal',
+          title: 'Range Slider',
+        },
+        {
+          url: { name: 'forms-form-layouts' },
+          icon: 'tabler-box',
+          title: 'Form Layouts',
+        },
+        {
+          url: { name: 'forms-form-validation' },
+          icon: 'tabler-circle-check',
+          title: 'Form Validation',
+        },
+        {
+          url: { name: 'forms-custom-input' },
+          icon: 'tabler-list-details',
+          title: 'Custom Input',
+        },
+        {
+          url: { name: 'forms-autocomplete' },
+          icon: 'tabler-align-left',
+          title: 'Autocomplete',
+        },
+        {
+          url: { name: 'tables-data-table' },
+          icon: 'tabler-table',
+          title: 'Data Table',
+        },
+        {
+          url: { name: 'tables-simple-table' },
+          icon: 'tabler-table',
+          title: 'Simple Table',
+        },
+        {
+          url: { name: 'forms-form-wizard-numbered' },
+          icon: 'tabler-align-center',
+          title: 'Form Wizard Numbered',
+        },
+        {
+          url: { name: 'forms-form-wizard-icons' },
+          icon: 'tabler-align-center',
+          title: 'Form Wizard Icons',
+        },
+      ],
+    },
+    {
+      title: 'Chart & Misc',
+      category: 'chartsMisc',
+      children: [
+        {
+          url: { name: 'charts-apex-chart' },
+          icon: 'tabler-chart-area-line',
+          title: 'Apex Charts',
+        },
+        {
+          url: { name: 'charts-chartjs' },
+          icon: 'tabler-chart-histogram',
+          title: 'ChartJS',
+        },
+        {
+          url: { name: 'access-control' },
+          icon: 'tabler-shield',
+          title: 'Access Control (ACL)',
+        },
+      ],
+    },
+  ],
+}

resources/js/plugins/fake-api/handlers/app-bar-search/index.js

@@ -0,0 +1,37 @@
+import is from '@sindresorhus/is'
+import { HttpResponse, http } from 'msw'
+import { db } from '@db/app-bar-search/db'
+
+export const handlerAppBarSearch = [
+  // Get Search Items
+  http.get('/api/app-bar/search', ({ request }) => {
+    const url = new URL(request.url)
+    const q = url.searchParams.get('q') ?? ''
+    const searchQuery = is.string(q) ? q : undefined
+    const queryLowered = (searchQuery ?? '').toString().toLowerCase()
+    const filteredSearchData = []
+
+    db.searchItems.forEach(item => {
+      if (item.children) {
+        const matchingChildren = item.children.filter(child => child.title.toLowerCase().includes(queryLowered))
+        if (matchingChildren.length > 0) {
+          const parentCopy = { ...item }
+          if (matchingChildren.length > 5)
+            parentCopy.children = matchingChildren.slice(0, 5)
+          else
+            parentCopy.children = matchingChildren
+          filteredSearchData.push(parentCopy)
+        }
+      }
+    })
+
+    // ℹ️ Enable this comment if you want to limit length of search results.
+    // if (filteredSearchData.length > 1) {
+    //   filteredSearchData.forEach((item, index) => {
+    //     if (item.children.length > 3)
+    //       filteredSearchData[index].children.splice(0, 3)
+    //   })
+    // }
+    return HttpResponse.json([...filteredSearchData], { status: 200 })
+  }),
+]

resources/js/plugins/fake-api/handlers/app-bar-search/types.js

@@ -0,0 +1 @@
+export {}

resources/js/plugins/fake-api/handlers/apps/academy/db.js

@@ -0,0 +1,574 @@
+import avatar1 from '@images/avatars/avatar-1.png'
+import avatar12 from '@images/avatars/avatar-12.png'
+import avatar13 from '@images/avatars/avatar-13.png'
+import avatar14 from '@images/avatars/avatar-14.png'
+import avatar15 from '@images/avatars/avatar-15.png'
+import avatar2 from '@images/avatars/avatar-2.png'
+import avatar3 from '@images/avatars/avatar-3.png'
+import avatar5 from '@images/avatars/avatar-5.png'
+import avatar6 from '@images/avatars/avatar-6.png'
+import avatar8 from '@images/avatars/avatar-8.png'
+import avatar9 from '@images/avatars/avatar-9.png'
+import tutorImg1 from '@images/pages/app-academy-tutor-1.png'
+import tutorImg2 from '@images/pages/app-academy-tutor-2.png'
+import tutorImg3 from '@images/pages/app-academy-tutor-3.png'
+import tutorImg4 from '@images/pages/app-academy-tutor-4.png'
+import tutorImg5 from '@images/pages/app-academy-tutor-5.png'
+import tutorImg6 from '@images/pages/app-academy-tutor-6.png'
+
+export const db = {
+  courses: [
+    {
+      id: 1,
+      user: 'Lauretta Coie',
+      image: avatar1,
+      tutorImg: tutorImg1,
+      completedTasks: 19,
+      totalTasks: 25,
+      userCount: 18,
+      note: 20,
+      view: 83,
+      time: '17h 34m',
+      logo: 'tabler-brand-angular',
+      color: 'error',
+      courseTitle: 'Basics of Angular',
+      desc: 'Introductory course for Angular and framework basics.Master Angular and build awesome apps.',
+      tags: 'Web',
+      rating: 4.4,
+      ratingCount: 8,
+    },
+    {
+      id: 2,
+      user: 'Maybelle Zmitrovich',
+      tutorImg: tutorImg2,
+      image: avatar2,
+      completedTasks: 48,
+      totalTasks: 52,
+      userCount: 14,
+      note: 48,
+      view: 43,
+      time: '19h 17m',
+      logo: 'tabler-color-swatch',
+      color: 'warning',
+      desc: 'Learn how to design a beautiful & engaging mobile app with Figma',
+      courseTitle: 'UI/UX Design',
+      tags: 'Design',
+      rating: 4.9,
+      ratingCount: 10,
+    },
+    {
+      id: 3,
+      user: 'Gertie Langwade',
+      image: avatar2,
+      tutorImg: tutorImg3,
+      completedTasks: 87,
+      totalTasks: 100,
+      userCount: 19,
+      note: 81,
+      view: 88,
+      time: '16h 16m',
+      logo: 'tabler-brand-react',
+      color: 'info',
+      desc: 'Master React.js: Build dynamic web apps with front-end technology',
+      courseTitle: 'React Native',
+      tags: 'Web',
+      rating: 4.8,
+      ratingCount: 9,
+    },
+    {
+      id: 4,
+      user: 'Estella Chace',
+      image: avatar3,
+      completedTasks: 33,
+      tutorImg: tutorImg4,
+      totalTasks: 50,
+      userCount: 28,
+      note: 21,
+      view: 87,
+      time: '15h 49m',
+      logo: 'tabler-edit',
+      color: 'success',
+      courseTitle: 'Art & Drawing',
+      desc: 'Easy-to-follow video & guides show you how to draw animals & people.',
+      tags: 'Design',
+      rating: 4.7,
+      ratingCount: 18,
+    },
+    {
+      id: 5,
+      user: 'Euell Bownass',
+      tutorImg: tutorImg5,
+      image: avatar14,
+      completedTasks: 100,
+      totalTasks: 100,
+      userCount: 13,
+      note: 19,
+      view: 13,
+      time: '12h 42m',
+      logo: 'tabler-star',
+      color: 'primary',
+      courseTitle: 'Basic Fundamentals',
+      desc: 'Learn the basics of the most popular programming language.',
+      tags: 'Web',
+      rating: 4.6,
+      ratingCount: 11,
+    },
+    {
+      id: 6,
+      user: 'Terrye Etches',
+      tutorImg: tutorImg6,
+      image: avatar3,
+      completedTasks: 23,
+      totalTasks: 25,
+      userCount: 78,
+      note: 36,
+      view: 36,
+      time: '1h 42m',
+      logo: 'tabler-brand-react',
+      color: 'info',
+      courseTitle: 'React for Beginners',
+      desc: 'Learn React in just a couple of afternoons with this immersive course',
+      tags: 'Web',
+      rating: 4.5,
+      ratingCount: 68,
+    },
+    {
+      id: 7,
+      user: 'Papageno Sloy',
+      tutorImg: tutorImg1,
+      image: avatar14,
+      completedTasks: 11,
+      totalTasks: 20,
+      userCount: 74,
+      note: 21,
+      view: 60,
+      time: '4h 59m',
+      logo: 'tabler-star',
+      color: 'primary',
+      courseTitle: 'The Science of Critical Thinking',
+      desc: 'Learn how to improve your arguments & make better decisions',
+      tags: 'Psychology',
+      rating: 4.4,
+      ratingCount: 64,
+    },
+    {
+      id: 8,
+      user: 'Aviva Penvarden',
+      tutorImg: tutorImg2,
+      image: avatar1,
+      completedTasks: 6,
+      totalTasks: 25,
+      userCount: 44,
+      note: 28,
+      view: 13,
+      time: '2h 09m',
+      logo: 'tabler-color-swatch',
+      color: 'warning',
+      courseTitle: 'The Complete Figma UI/UX Course',
+      desc: 'Learn how to design a beautiful & engaging mobile app with Figma',
+      tags: 'UI/UX',
+      rating: 4.3,
+      ratingCount: 34,
+    },
+    {
+      id: 9,
+      user: 'Reggi Tuddenham',
+      tutorImg: tutorImg3,
+      image: avatar8,
+      completedTasks: 67,
+      totalTasks: 100,
+      userCount: 95,
+      note: 34,
+      view: 26,
+      time: '22h 21m',
+      logo: 'tabler-star',
+      color: 'primary',
+      courseTitle: 'Advanced Problem Solving Techniques',
+      desc: 'Learn how to solve problems like a professional.Solve your problems easily.',
+      tags: 'Psychology',
+      rating: 4.2,
+      ratingCount: 85,
+    },
+    {
+      id: 10,
+      user: 'Aluin Leveritt',
+      image: avatar1,
+      completedTasks: 49,
+      totalTasks: 50,
+      tutorImg: tutorImg4,
+      userCount: 98,
+      note: 51,
+      view: 37,
+      time: '22h 22m',
+      logo: 'tabler-brand-react',
+      color: 'info',
+      courseTitle: 'Advanced React Native',
+      desc: 'Learn how to build the world\'s most popular mobile OS.Use react native like pro.',
+      tags: 'Web',
+      rating: 4.1,
+      ratingCount: 88,
+    },
+    {
+      id: 11,
+      user: 'Ardys Deakin',
+      image: avatar9,
+      completedTasks: 87,
+      totalTasks: 100,
+      tutorImg: tutorImg5,
+      userCount: 19,
+      note: 40,
+      view: 32,
+      time: '15h 25m',
+      logo: 'tabler-brand-react',
+      color: 'info',
+      courseTitle: 'Building Web Applications with React',
+      desc: 'Learn how to build modern web apps with React and Redux',
+      tags: 'Web',
+      rating: 4.0,
+      ratingCount: 9,
+    },
+    {
+      id: 12,
+      user: 'Camel Scown',
+      image: avatar1,
+      tutorImg: tutorImg6,
+      completedTasks: 22,
+      totalTasks: 25,
+      userCount: 26,
+      note: 22,
+      view: 77,
+      time: '4h 33m',
+      logo: 'tabler-brand-angular',
+      color: 'error',
+      courseTitle: 'Angular Routing and Navigation',
+      desc: 'Learn how to build single page applications like a pro.Learn everything about router.',
+      tags: 'Web',
+      rating: 3.9,
+      ratingCount: 16,
+    },
+    {
+      id: 13,
+      user: 'Bertina Honnan',
+      image: avatar15,
+      tutorImg: tutorImg1,
+      completedTasks: 11,
+      totalTasks: 50,
+      userCount: 78,
+      note: 75,
+      view: 87,
+      time: '16h 38m',
+      logo: 'tabler-star',
+      color: 'primary',
+      courseTitle: 'Creative Problem Solving',
+      desc: 'Learn how to solve problems creatively and effectively.Solve your problems easily.',
+      tags: 'Psychology',
+      rating: 3.8,
+      ratingCount: 68,
+    },
+    {
+      id: 14,
+      user: 'Hillyer Wooster',
+      image: avatar2,
+      tutorImg: tutorImg2,
+      completedTasks: 11,
+      totalTasks: 25,
+      userCount: 92,
+      note: 39,
+      view: 60,
+      time: '22h 43m',
+      logo: 'tabler-brand-angular',
+      color: 'error',
+      courseTitle: 'Building Web Applications with Angular',
+      desc: 'Learn how to build complex modern web applications with Angular',
+      tags: 'Web',
+      rating: 3.7,
+      ratingCount: 82,
+    },
+    {
+      id: 15,
+      user: 'Emerson Hance',
+      image: avatar12,
+      tutorImg: tutorImg3,
+      completedTasks: 4,
+      totalTasks: 5,
+      userCount: 14,
+      note: 22,
+      view: 51,
+      time: '2h 29m',
+      logo: 'tabler-brand-angular',
+      color: 'error',
+      courseTitle: 'Advanced Angular',
+      desc: 'Learn how to build complex modern web application with Angular',
+      tags: 'Web',
+      rating: 3.6,
+      ratingCount: 12,
+    },
+    {
+      id: 16,
+      user: 'Ginger Cruft',
+      image: avatar1,
+      tutorImg: tutorImg4,
+      completedTasks: 22,
+      totalTasks: 25,
+      userCount: 20,
+      note: 12,
+      view: 95,
+      time: '20h 10m',
+      logo: 'tabler-brand-react',
+      color: 'info',
+      courseTitle: 'Testing React with Jest and Enzyme',
+      desc: 'Learn how to build modern web apps with React and Redux',
+      tags: 'Web',
+      rating: 3.5,
+      ratingCount: 10,
+    },
+    {
+      id: 17,
+      user: 'Rollie Parsons',
+      image: avatar13,
+      tutorImg: tutorImg5,
+      completedTasks: 11,
+      totalTasks: 50,
+      userCount: 29,
+      note: 20,
+      view: 98,
+      time: '16h 15m',
+      logo: 'tabler-color-swatch',
+      color: 'wa',
+      courseTitle: 'Typography Theory',
+      desc: 'Learn how to build modern web apps with React and Redux',
+      tags: 'Design',
+      rating: 3.4,
+      ratingCount: 19,
+    },
+    {
+      id: 18,
+      user: 'Randy Foister',
+      image: avatar1,
+      completedTasks: 23,
+      tutorImg: tutorImg6,
+      totalTasks: 100,
+      userCount: 20,
+      note: 16,
+      view: 77,
+      time: '4h 31m',
+      logo: 'tabler-brand-angular',
+      color: 'error',
+      courseTitle: 'Angular Testing',
+      desc: 'Learn everything about testing web application with Angular',
+      tags: 'Web',
+      rating: 4.3,
+      ratingCount: 10,
+    },
+    {
+      id: 19,
+      user: 'Ashleigh Bartkowiak',
+      image: avatar8,
+      completedTasks: 17,
+      tutorImg: tutorImg1,
+      totalTasks: 50,
+      userCount: 28,
+      note: 91,
+      view: 31,
+      time: '1h 52m',
+      logo: 'tabler-brand-react',
+      color: 'info',
+      courseTitle: 'React for Professional',
+      desc: 'Learn how to build modern web apps with React and Redux',
+      tags: 'Web',
+      rating: 4.2,
+      ratingCount: 18,
+    },
+    {
+      id: 20,
+      user: 'Bernarr Markie',
+      image: avatar12,
+      tutorImg: tutorImg2,
+      completedTasks: 1,
+      totalTasks: 10,
+      userCount: 11,
+      note: 33,
+      view: 53,
+      time: '16h 24m',
+      logo: 'tabler-edit',
+      color: 'success',
+      courseTitle: 'The Ultimate Drawing Course',
+      desc: 'Learn how to draw like a professional with this immersive course',
+      tags: 'Art',
+      rating: 4.1,
+      ratingCount: 9,
+    },
+    {
+      id: 21,
+      user: 'Merrilee Whitnell',
+      image: avatar2,
+      completedTasks: 91,
+      totalTasks: 100,
+      tutorImg: tutorImg3,
+      userCount: 11,
+      note: 17,
+      view: 74,
+      time: '5h 57m',
+      logo: 'tabler-brand-angular',
+      color: 'error',
+      courseTitle: 'Basics of Angular',
+      desc: 'Introductory course for Angular and framework basics.Master Angular and build awesome apps.',
+      tags: 'Web',
+      rating: 4.0,
+      ratingCount: 7,
+    },
+    {
+      id: 22,
+      user: 'Thekla Dineges',
+      image: avatar1,
+      tutorImg: tutorImg4,
+      completedTasks: 49,
+      totalTasks: 50,
+      userCount: 28,
+      note: 30,
+      view: 54,
+      time: '4h 40m',
+      logo: 'tabler-edit',
+      color: 'success',
+      courseTitle: 'Introduction to Digital Painting',
+      desc: 'Learn how to draw like a professional with this immersive course',
+      tags: 'Art',
+      rating: 3.9,
+      ratingCount: 18,
+    },
+    {
+      id: 23,
+      user: 'Freda Garham',
+      image: avatar5,
+      tutorImg: tutorImg5,
+      completedTasks: 81,
+      totalTasks: 100,
+      userCount: 79,
+      note: 46,
+      view: 27,
+      time: '8h 44m',
+      logo: 'tabler-star',
+      color: 'primary',
+      courseTitle: 'The Science of Everyday Thinking',
+      desc: 'Learn how to think better, argue better, and choose better',
+      tags: 'Psychology',
+      rating: 3.8,
+      ratingCount: 69,
+    },
+    {
+      id: 24,
+      user: 'Leyla Bourley',
+      image: avatar13,
+      completedTasks: 6,
+      tutorImg: tutorImg6,
+      totalTasks: 25,
+      userCount: 28,
+      note: 11,
+      view: 77,
+      time: '22h 36m',
+      logo: 'tabler-edit',
+      color: 'success',
+      courseTitle: 'Color Theory',
+      desc: 'Learn how to use the powerful techniques in Colour Therapy',
+      tags: 'Design',
+      rating: 3.7,
+      ratingCount: 18,
+    },
+    {
+      id: 25,
+      user: 'Nevsa Lawey',
+      image: avatar6,
+      completedTasks: 13,
+      totalTasks: 100,
+      tutorImg: tutorImg1,
+      userCount: 93,
+      note: 73,
+      view: 67,
+      time: '19h 21m',
+      logo: 'tabler-color-swatch',
+      color: 'warning',
+      courseTitle: 'The Complete Figma Course',
+      desc: 'Learn how to design a beautiful & engaging mobile app with Figma',
+      tags: 'UI/UX',
+      rating: 3.6,
+      ratingCount: 83,
+    },
+  ],
+  courseDetails: {
+    title: 'UI/UX Basic Fundamentals',
+    about: 'Learn web design in 1 hour with 25+ simple-to-use rules and guidelines — tons of amazing web design resources included!',
+    instructor: 'Devonne Wallbridge',
+    instructorAvatar: avatar3,
+    instructorPosition: 'Web Developer, Designer, and Teacher',
+    skillLevel: 'All Level',
+    totalStudents: 38815,
+    language: 'English',
+    isCaptions: true,
+    length: '1.5 total hours',
+    totalLectures: 19,
+    description: `
+        <p class="text-body-1">
+          The material of this course is also covered in my other course about web design and development with HTML5 & CSS3. Scroll to the bottom of this page to check out that course, too! If you're already taking my other course, you already have all it takes to start designing beautiful websites today!
+        </p>
+      
+        <p class="text-body-1">
+          "Best web design course: If you're interested in web design, but want more than just a "how to use WordPress" course, I highly recommend this one." — Florian Giusti
+        </p>
+      
+        <p class="text-body-1">
+          "Very helpful to us left-brained people: I am familiar with HTML, CSS, jQuery, and Twitter Bootstrap, but I needed instruction in web design. This course gave me practical, impactful techniques for making websites more beautiful and engaging." — Susan Darlene Cain
+        </p>`,
+    content: [
+      {
+        title: 'Course Content',
+        status: '2/5',
+        time: '4.4 min',
+        id: 'section1',
+        topics: [
+          { title: 'Welcome to this course', time: '2.4 min', isCompleted: true },
+          { title: 'Watch before you start', time: '4.8 min', isCompleted: true },
+          { title: 'Basic Design theory', time: '5.9 min', isCompleted: false },
+          { title: 'Basic Fundamentals', time: '3.6 min', isCompleted: false },
+          { title: 'What is ui/ux', time: '10.6 min', isCompleted: false },
+        ],
+      },
+      {
+        title: 'Web design for Developers',
+        status: '0/4',
+        time: '4.8 min',
+        id: 'section2',
+        topics: [
+          { title: 'How to use Pages in Figma', time: '8:31 min', isCompleted: false },
+          { title: 'What is Lo Fi Wireframe', time: '2 min', isCompleted: false },
+          { title: 'How to use color in Figma', time: '5.9 min', isCompleted: false },
+          { title: 'Frames vs Groups in Figma', time: '3.6 min', isCompleted: false },
+        ],
+      },
+      {
+        title: 'Build Beautiful Websites!',
+        status: '0/4',
+        time: '4.4 min',
+        id: 'section3',
+        topics: [
+          { title: 'Section & Div Block', time: '3:53 min', isCompleted: false },
+          { title: 'Read-Only Version of Chat App', time: '2:03 min', isCompleted: false },
+          { title: 'Webflow Autosave', time: '8 min', isCompleted: false },
+          { title: 'Canvas Settings', time: '3 min', isCompleted: false },
+          { title: 'HTML Tags', time: '10 min', isCompleted: false },
+          { title: 'Footer (Chat App)', time: '9:10 min', isCompleted: false },
+        ],
+      },
+      {
+        title: 'Final Project',
+        status: '0/3',
+        time: '4.4 min',
+        id: 'section4',
+        topics: [
+          { title: 'Responsive Blog Site', time: '10:00 min', isCompleted: false },
+          { title: 'Responsive Portfolio', time: '13:00 min', isCompleted: false },
+          { title: 'Basic Design theory', time: '15 min', isCompleted: false },
+        ],
+      },
+    ],
+  },
+}

resources/js/plugins/fake-api/handlers/apps/academy/index.js

@@ -0,0 +1,68 @@
+import is from '@sindresorhus/is'
+import { destr } from 'destr'
+import { HttpResponse, http } from 'msw'
+import { db } from '@db/apps/academy/db'
+import { paginateArray } from '@api-utils/paginateArray'
+
+export const handlerAppsAcademy = [
+  // 👉 Course
+  http.get(('/api/apps/academy/courses'), ({ request }) => {
+    const url = new URL(request.url)
+    const q = url.searchParams.get('q')
+    const label = url.searchParams.get('label') || 'All Courses'
+    const hideCompleted = url.searchParams.get('hideCompleted')
+    const page = url.searchParams.get('page')
+    const itemsPerPage = url.searchParams.get('itemsPerPage')
+    const sortBy = url.searchParams.get('sortBy')
+    const orderBy = url.searchParams.get('orderBy')
+    const searchQuery = is.string(q) ? q : undefined
+    const queryLowered = (searchQuery ?? '').toString().toLowerCase()
+    const parsedHideCompleted = destr(hideCompleted)
+    const hideCompletedLocal = is.boolean(parsedHideCompleted) ? parsedHideCompleted : false
+    const parsedSortBy = destr(sortBy)
+    const sortByLocal = is.string(parsedSortBy) ? parsedSortBy : ''
+    const parsedOrderBy = destr(orderBy)
+    const orderByLocal = is.string(parsedOrderBy) ? parsedOrderBy : ''
+    const parsedItemsPerPage = destr(itemsPerPage)
+    const parsedPage = destr(page)
+    const itemsPerPageLocal = is.number(parsedItemsPerPage) ? parsedItemsPerPage : 10
+    const pageLocal = is.number(parsedPage) ? parsedPage : 1
+
+    const filteredCourses = db.courses.filter(course => {
+      return ((course.courseTitle.toLowerCase().includes(queryLowered)
+                || course.user.toLowerCase().includes(queryLowered))
+                && !((course.completedTasks === course.totalTasks) && hideCompletedLocal)
+                && (label !== 'All Courses' ? course.tags.toLocaleLowerCase() === label?.toLowerCase() : true))
+    })
+
+    if (sortByLocal) {
+      if (sortByLocal === 'courseName') {
+        filteredCourses.sort((a, b) => {
+          if (orderByLocal === 'asc')
+            return a.courseTitle.localeCompare(b.courseTitle)
+          else
+            return b.courseTitle.localeCompare(a.courseTitle)
+        })
+      }
+      if (sortByLocal === 'progress') {
+        filteredCourses.sort((a, b) => {
+          if (orderByLocal === 'asc')
+            return (a.completedTasks / a.totalTasks) - (b.completedTasks / b.totalTasks)
+          else
+            return (b.completedTasks / b.totalTasks) - (a.completedTasks / a.totalTasks)
+        })
+      }
+    }
+    
+    return HttpResponse.json({
+      totalCourse: filteredCourses,
+      courses: paginateArray(filteredCourses, itemsPerPageLocal, pageLocal),
+      total: filteredCourses.length,
+    }, { status: 200 })
+  }),
+
+  // 👉 Course Details
+  http.get(('/api/apps/academy/course-details'), () => {
+    return HttpResponse.json(db.courseDetails, { status: 200 })
+  }),
+]

resources/js/plugins/fake-api/handlers/apps/academy/types.js

@@ -0,0 +1 @@
+export {}

resources/js/plugins/fake-api/handlers/apps/calendar/db.js

@@ -0,0 +1,118 @@
+const date = new Date()
+const nextDay = new Date(new Date().getTime() + 24 * 60 * 60 * 1000)
+const nextMonth = date.getMonth() === 11 ? new Date(date.getFullYear() + 1, 0, 1) : new Date(date.getFullYear(), date.getMonth() + 1, 1)
+const prevMonth = date.getMonth() === 11 ? new Date(date.getFullYear() - 1, 0, 1) : new Date(date.getFullYear(), date.getMonth() - 1, 1)
+export const db = {
+  events: [
+    {
+      id: 1,
+      url: '',
+      title: 'Design Review',
+      start: date,
+      end: nextDay,
+      allDay: false,
+      extendedProps: {
+        calendar: 'Business',
+      },
+    },
+    {
+      id: 2,
+      url: '',
+      title: 'Meeting With Client',
+      start: new Date(date.getFullYear(), date.getMonth() + 1, -11),
+      end: new Date(date.getFullYear(), date.getMonth() + 1, -10),
+      allDay: true,
+      extendedProps: {
+        calendar: 'Business',
+      },
+    },
+    {
+      id: 3,
+      url: '',
+      title: 'Family Trip',
+      allDay: true,
+      start: new Date(date.getFullYear(), date.getMonth() + 1, -9),
+      end: new Date(date.getFullYear(), date.getMonth() + 1, -7),
+      extendedProps: {
+        calendar: 'Holiday',
+      },
+    },
+    {
+      id: 4,
+      url: '',
+      title: 'Doctor\'s Appointment',
+      start: new Date(date.getFullYear(), date.getMonth() + 1, -11),
+      end: new Date(date.getFullYear(), date.getMonth() + 1, -10),
+      allDay: true,
+      extendedProps: {
+        calendar: 'Personal',
+      },
+    },
+    {
+      id: 5,
+      url: '',
+      title: 'Dart Game?',
+      start: new Date(date.getFullYear(), date.getMonth() + 1, -13),
+      end: new Date(date.getFullYear(), date.getMonth() + 1, -12),
+      allDay: true,
+      extendedProps: {
+        calendar: 'ETC',
+      },
+    },
+    {
+      id: 6,
+      url: '',
+      title: 'Meditation',
+      start: new Date(date.getFullYear(), date.getMonth() + 1, -13),
+      end: new Date(date.getFullYear(), date.getMonth() + 1, -12),
+      allDay: true,
+      extendedProps: {
+        calendar: 'Personal',
+      },
+    },
+    {
+      id: 7,
+      url: '',
+      title: 'Dinner',
+      start: new Date(date.getFullYear(), date.getMonth() + 1, -13),
+      end: new Date(date.getFullYear(), date.getMonth() + 1, -12),
+      allDay: true,
+      extendedProps: {
+        calendar: 'Family',
+      },
+    },
+    {
+      id: 8,
+      url: '',
+      title: 'Product Review',
+      start: new Date(date.getFullYear(), date.getMonth() + 1, -13),
+      end: new Date(date.getFullYear(), date.getMonth() + 1, -12),
+      allDay: true,
+      extendedProps: {
+        calendar: 'Business',
+      },
+    },
+    {
+      id: 9,
+      url: '',
+      title: 'Monthly Meeting',
+      start: nextMonth,
+      end: nextMonth,
+      allDay: true,
+      extendedProps: {
+        calendar: 'Business',
+      },
+    },
+    {
+      id: 10,
+      url: '',
+      title: 'Monthly Checkup',
+      start: prevMonth,
+      end: prevMonth,
+      allDay: true,
+      extendedProps: {
+        calendar: 'Personal',
+      },
+    },
+  ],
+}

resources/js/plugins/fake-api/handlers/apps/calendar/index.js

@@ -0,0 +1,68 @@
+import is from '@sindresorhus/is'
+import { destr } from 'destr'
+import { HttpResponse, http } from 'msw'
+import { db } from '@db/apps/calendar/db'
+import { genId } from '@api-utils/genId'
+
+export const handlerAppsCalendar = [
+  // 👉 Get Calendar Events
+  http.get(('/api/apps/calendar'), ({ request }) => {
+    const url = new URL(request.url)
+    const queries = url.searchParams.getAll('calendars')
+    const parsedCalendars = destr(queries)
+    const calendars = is.array(parsedCalendars) ? parsedCalendars : undefined
+    const events = db.events.filter(event => calendars?.includes(event.extendedProps.calendar))
+    
+    return HttpResponse.json(events, { status: 200 })
+  }),
+
+  // 👉 Add Calendar Event
+  http.post(('/api/apps/calendar'), async ({ request }) => {
+    const event = await request.json()
+
+    db.events.push({
+      ...event,
+      id: genId(db.events),
+    })
+    
+    return HttpResponse.json(event, { status: 201 })
+  }),
+
+  // 👉 Update Calendar Event
+  http.put(('/api/apps/calendar/:id'), async ({ request, params }) => {
+    const updatedEvent = await request.json()
+
+    updatedEvent.id = Number(updatedEvent.id)
+
+    const eventId = Number(params.id)
+
+    // Find the index of the event in the database
+    const currentEvent = db.events.find(e => e.id === eventId)
+
+    // update event
+    if (currentEvent) {
+      Object.assign(currentEvent, updatedEvent)
+      
+      return HttpResponse.json(currentEvent, {
+        status: 201,
+      })
+    }
+    
+    return new HttpResponse('Something Went Wrong', { status: 400 })
+  }),
+
+  // 👉 Delete Calendar Event
+  http.delete(('/api/apps/calendar/:id'), ({ params }) => {
+    const eventId = Number(params.id)
+    const eventIndex = db.events.findIndex(e => e.id === eventId)
+    if (eventIndex !== -1) {
+      db.events.splice(eventIndex, 1)
+      
+      return new HttpResponse(null, {
+        status: 204,
+      })
+    }
+    
+    return new HttpResponse('Something Went Wrong', { status: 400 })
+  }),
+]

resources/js/plugins/fake-api/handlers/apps/calendar/types.js

@@ -0,0 +1 @@
+export {}

resources/js/plugins/fake-api/handlers/apps/chat/db.js

@@ -0,0 +1,282 @@
+import avatar1 from '@images/avatars/avatar-1.png'
+import avatar2 from '@images/avatars/avatar-2.png'
+import avatar3 from '@images/avatars/avatar-3.png'
+import avatar4 from '@images/avatars/avatar-4.png'
+import avatar5 from '@images/avatars/avatar-5.png'
+import avatar6 from '@images/avatars/avatar-6.png'
+import avatar8 from '@images/avatars/avatar-8.png'
+
+const previousDay = new Date(new Date().getTime() - 24 * 60 * 60 * 1000)
+const dayBeforePreviousDay = new Date(new Date().getTime() - 24 * 60 * 60 * 1000 * 2)
+export const db = {
+  profileUser: {
+    id: 11,
+    avatar: avatar1,
+    fullName: 'John Doe',
+    role: 'admin',
+    about: 'Dessert chocolate cake lemon drops jujubes. Biscuit cupcake ice cream bear claw brownie marshmallow.',
+    status: 'online',
+    settings: {
+      isTwoStepAuthVerificationEnabled: true,
+      isNotificationsOn: false,
+    },
+  },
+  contacts: [
+    {
+      id: 1,
+      fullName: 'Gavin Griffith',
+      role: 'Frontend Developer',
+      about: 'Cake pie jelly jelly beans. Marzipan lemon drops halvah cake. Pudding cookie lemon drops icing',
+      avatar: avatar5,
+      status: 'offline',
+    },
+    {
+      id: 2,
+      fullName: 'Harriet McBride',
+      role: 'UI/UX Designer',
+      about: 'Toffee caramels jelly-o tart gummi bears cake I love ice cream lollipop. Sweet liquorice croissant candy danish dessert icing. Cake macaroon gingerbread toffee sweet.',
+      avatar: avatar2,
+      status: 'busy',
+    },
+    {
+      id: 3,
+      fullName: 'Danny Conner',
+      role: 'Town planner',
+      about: 'Soufflé soufflé caramels sweet roll. Jelly lollipop sesame snaps bear claw jelly beans sugar plum sugar plum.',
+      avatar: '',
+      status: 'away',
+    },
+    {
+      id: 4,
+      fullName: 'Janie West',
+      role: 'Data scientist',
+      about: 'Chupa chups candy canes chocolate bar marshmallow liquorice muffin. Lemon drops oat cake tart liquorice tart cookie. Jelly-o cookie tootsie roll halvah.',
+      avatar: '',
+      status: 'online',
+    },
+    {
+      id: 5,
+      fullName: 'Bryan Murray',
+      role: 'Dietitian',
+      about: 'Cake pie jelly jelly beans. Marzipan lemon drops halvah cake. Pudding cookie lemon drops icing',
+      avatar: avatar5,
+      status: 'busy',
+    },
+    {
+      id: 6,
+      fullName: 'Albert Underwood',
+      role: 'Marketing executive',
+      about: 'Toffee caramels jelly-o tart gummi bears cake I love ice cream lollipop. Sweet liquorice croissant candy danish dessert icing. Cake macaroon gingerbread toffee sweet.',
+      avatar: avatar6,
+      status: 'online',
+    },
+    {
+      id: 7,
+      fullName: 'Adele Ross',
+      role: 'Special educational needs teacher',
+      about: 'Biscuit powder oat cake donut brownie ice cream I love soufflé. I love tootsie roll I love powder tootsie roll.',
+      avatar: '',
+      status: 'online',
+    },
+    {
+      id: 8,
+      fullName: 'Mark Berry',
+      role: 'Advertising copywriter',
+      about: 'Bear claw ice cream lollipop gingerbread carrot cake. Brownie gummi bears chocolate muffin croissant jelly I love marzipan wafer.',
+      avatar: avatar3,
+      status: 'away',
+    },
+    {
+      id: 9,
+      fullName: 'Joseph Evans',
+      role: 'Designer, television/film set',
+      about: 'Gummies gummi bears I love candy icing apple pie I love marzipan bear claw. I love tart biscuit I love candy canes pudding chupa chups liquorice croissant.',
+      avatar: avatar8,
+      status: 'offline',
+    },
+    {
+      id: 10,
+      fullName: 'Blake Carter',
+      role: 'Building surveyor',
+      about: 'Cake pie jelly jelly beans. Marzipan lemon drops halvah cake. Pudding cookie lemon drops icing',
+      avatar: avatar4,
+      status: 'away',
+    },
+  ],
+  chats: [
+    {
+      id: 1,
+      userId: 2,
+      unseenMsgs: 0,
+      messages: [
+        {
+          message: 'Hi',
+          time: 'Mon Dec 10 2018 07:45:00 GMT+0000 (GMT)',
+          senderId: 11,
+          feedback: {
+            isSent: true,
+            isDelivered: true,
+            isSeen: true,
+          },
+        },
+        {
+          message: 'Hello. How can I help You?',
+          time: 'Mon Dec 11 2018 07:45:15 GMT+0000 (GMT)',
+          senderId: 2,
+          feedback: {
+            isSent: true,
+            isDelivered: true,
+            isSeen: true,
+          },
+        },
+        {
+          message: 'Can I get details of my last transaction I made last month? 🤔',
+          time: 'Mon Dec 11 2018 07:46:10 GMT+0000 (GMT)',
+          senderId: 11,
+          feedback: {
+            isSent: true,
+            isDelivered: true,
+            isSeen: true,
+          },
+        },
+        {
+          message: 'We need to check if we can provide you such information.',
+          time: 'Mon Dec 11 2018 07:45:15 GMT+0000 (GMT)',
+          senderId: 2,
+          feedback: {
+            isSent: true,
+            isDelivered: true,
+            isSeen: true,
+          },
+        },
+        {
+          message: 'I will inform you as I get update on this.',
+          time: 'Mon Dec 11 2018 07:46:15 GMT+0000 (GMT)',
+          senderId: 2,
+          feedback: {
+            isSent: true,
+            isDelivered: true,
+            isSeen: true,
+          },
+        },
+        {
+          message: 'If it takes long you can mail me at my mail address.',
+          time: String(dayBeforePreviousDay),
+          senderId: 11,
+          feedback: {
+            isSent: true,
+            isDelivered: false,
+            isSeen: false,
+          },
+        },
+      ],
+    },
+    {
+      id: 2,
+      userId: 1,
+      unseenMsgs: 1,
+      messages: [
+        {
+          message: 'How can we help? We\'re here for you!',
+          time: 'Mon Dec 10 2018 07:45:00 GMT+0000 (GMT)',
+          senderId: 11,
+          feedback: {
+            isSent: true,
+            isDelivered: true,
+            isSeen: true,
+          },
+        },
+        {
+          message: 'Hey John, I am looking for the best admin template. Could you please help me to find it out?',
+          time: 'Mon Dec 10 2018 07:45:23 GMT+0000 (GMT)',
+          senderId: 1,
+          feedback: {
+            isSent: true,
+            isDelivered: true,
+            isSeen: true,
+          },
+        },
+        {
+          message: 'It should use nice Framework.',
+          time: 'Mon Dec 10 2018 07:45:55 GMT+0000 (GMT)',
+          senderId: 1,
+          feedback: {
+            isSent: true,
+            isDelivered: true,
+            isSeen: true,
+          },
+        },
+        {
+          message: 'Absolutely!',
+          time: 'Mon Dec 10 2018 07:46:00 GMT+0000 (GMT)',
+          senderId: 11,
+          feedback: {
+            isSent: true,
+            isDelivered: true,
+            isSeen: true,
+          },
+        },
+        {
+          message: 'Our admin is the responsive admin template.!',
+          time: 'Mon Dec 10 2018 07:46:05 GMT+0000 (GMT)',
+          senderId: 11,
+          feedback: {
+            isSent: true,
+            isDelivered: true,
+            isSeen: true,
+          },
+        },
+        {
+          message: 'Looks clean and fresh UI. 😍',
+          time: 'Mon Dec 10 2018 07:46:23 GMT+0000 (GMT)',
+          senderId: 1,
+          feedback: {
+            isSent: true,
+            isDelivered: true,
+            isSeen: true,
+          },
+        },
+        {
+          message: 'It\'s perfect for my next project.',
+          time: 'Mon Dec 10 2018 07:46:33 GMT+0000 (GMT)',
+          senderId: 1,
+          feedback: {
+            isSent: true,
+            isDelivered: true,
+            isSeen: true,
+          },
+        },
+        {
+          message: 'How can I purchase it?',
+          time: 'Mon Dec 10 2018 07:46:43 GMT+0000 (GMT)',
+          senderId: 1,
+          feedback: {
+            isSent: true,
+            isDelivered: true,
+            isSeen: true,
+          },
+        },
+        {
+          message: 'Thanks, From our official site  😇',
+          time: 'Mon Dec 10 2018 07:46:53 GMT+0000 (GMT)',
+          senderId: 11,
+          feedback: {
+            isSent: true,
+            isDelivered: true,
+            isSeen: true,
+          },
+        },
+        {
+          message: 'I will purchase it for sure. 👍',
+          time: String(previousDay),
+          senderId: 1,
+          feedback: {
+            isSent: true,
+            isDelivered: true,
+            isSeen: true,
+          },
+        },
+      ],
+    },
+  ],
+}

resources/js/plugins/fake-api/handlers/apps/chat/index.js

@@ -0,0 +1,84 @@
+import { HttpResponse, http } from 'msw'
+import { db } from '@db/apps/chat/db'
+
+export const handlerAppsChat = [
+  http.get(('/api/apps/chat/chats-and-contacts'), ({ request }) => {
+    const url = new URL(request.url)
+    const q = url.searchParams.get('q') || ''
+    const qLowered = q.toLowerCase()
+
+    const chatsContacts = db.chats
+      .map(chat => {
+        const contact = JSON.parse(JSON.stringify(db.contacts.find(c => c.id === chat.userId)))
+
+        contact.chat = { id: chat.id, unseenMsgs: chat.unseenMsgs, lastMessage: chat.messages.at(-1) }
+        
+        return contact
+      })
+      .reverse()
+
+    const profileUserData = db.profileUser
+
+    const response = {
+      chatsContacts: chatsContacts.filter(c => c.fullName.toLowerCase().includes(qLowered)),
+      contacts: db.contacts.filter(c => c.fullName.toLowerCase().includes(qLowered)),
+      profileUser: profileUserData,
+    }
+
+    return HttpResponse.json(response, { status: 200 })
+  }),
+  http.get(('/api/apps/chat/chats/:userId'), ({ params }) => {
+    const userId = Number(params.userId)
+    const chat = db.chats.find(e => e.userId === userId)
+    if (chat)
+      chat.unseenMsgs = 0
+    
+    return HttpResponse.json({
+      chat,
+      contact: db.contacts.find(c => c.id === userId),
+    }, {
+      status: 200,
+    })
+  }),
+  http.post(('/api/apps/chat/chats/:userId'), async ({ request, params }) => {
+    // Get user id from URL
+    const chatId = Number(params.userId)
+
+    // Get message from post data
+    const { message, senderId } = await request.json()
+    let activeChat = db.chats.find(chat => chat.userId === chatId)
+
+    const newMessageData = {
+      message,
+      time: String(new Date()),
+      senderId,
+      feedback: {
+        isSent: true,
+        isDelivered: false,
+        isSeen: false,
+      },
+    }
+
+
+    // If there's new chat for user create one
+    let isNewChat = false
+    if (activeChat === undefined) {
+      isNewChat = true
+      db.chats.push({
+        id: db.chats.length + 1,
+        userId: chatId,
+        unseenMsgs: 0,
+        messages: [newMessageData],
+      })
+      activeChat = db.chats.at(-1)
+    }
+    else {
+      activeChat.messages.push(newMessageData)
+    }
+    const response = { msg: newMessageData }
+    if (isNewChat)
+      response.chat = activeChat
+    
+    return HttpResponse.json(response, { status: 201 })
+  }),
+]

resources/js/plugins/fake-api/handlers/apps/chat/types.js

@@ -0,0 +1 @@
+export {}

resources/js/plugins/fake-api/handlers/apps/ecommerce/index.js

@@ -0,0 +1,507 @@
+import is from '@sindresorhus/is'
+import { destr } from 'destr'
+import { HttpResponse, http } from 'msw'
+import { db } from '@db/apps/ecommerce/db'
+import { paginateArray } from '@api-utils/paginateArray'
+
+export const handlerAppsEcommerce = [
+  // 👉 Products
+  // Get Product List
+  http.get('/api/apps/ecommerce/products', ({ request }) => {
+    const url = new URL(request.url)
+    const q = url.searchParams.get('q')
+    const stock = url.searchParams.get('stock')
+    const category = url.searchParams.get('category')
+    const status = url.searchParams.get('status')
+    const sortBy = url.searchParams.get('sortBy')
+    const orderBy = url.searchParams.get('orderBy')
+    const itemsPerPage = url.searchParams.get('itemsPerPage')
+    const page = url.searchParams.get('page')
+    const searchQuery = is.string(q) ? q : undefined
+    const queryLower = (searchQuery ?? '').toString().toLowerCase()
+    const parsedStock = destr(stock)
+    const stockLocal = is.boolean(parsedStock) ? parsedStock : undefined
+    const parsedSortBy = destr(sortBy)
+    const sortByLocal = is.string(parsedSortBy) ? parsedSortBy : ''
+    const parsedOrderBy = destr(orderBy)
+    const orderByLocal = is.string(parsedOrderBy) ? parsedOrderBy : ''
+    const parsedItemsPerPage = destr(itemsPerPage)
+    const parsedPage = destr(page)
+    const itemsPerPageLocal = is.number(parsedItemsPerPage) ? parsedItemsPerPage : 10
+    const pageLocal = is.number(parsedPage) ? parsedPage : 1
+
+    // Filtering Products
+    let filteredProducts = db.products.filter(product => ((product.productName.toLowerCase().includes(queryLower) || product.productBrand.toLowerCase().includes(queryLower))
+            && product.category === (category || product.category)
+            && (product.status === (status || product.status))
+            && (typeof stockLocal === 'undefined' ? true : (product.stock === stockLocal)))).reverse()
+
+    // Sort
+    if (sortByLocal) {
+      if (sortByLocal === 'product') {
+        filteredProducts = filteredProducts.sort((a, b) => {
+          if (orderByLocal === 'asc')
+            return a.productName.toLowerCase() > b.productName.toLowerCase() ? 1 : -1
+          else if (orderByLocal === 'desc')
+            return a.productName.toLowerCase() < b.productName.toLowerCase() ? 1 : -1
+          
+          return 0
+        })
+      }
+      if (sortByLocal === 'category') {
+        filteredProducts = filteredProducts.sort((a, b) => {
+          if (orderByLocal === 'asc')
+            return a.category > b.category ? 1 : -1
+          else if (orderByLocal === 'desc')
+            return a.category < b.category ? 1 : -1
+          
+          return 0
+        })
+      }
+      if (sortByLocal === 'status') {
+        filteredProducts = filteredProducts.sort((a, b) => {
+          if (orderByLocal === 'asc')
+            return a.status > b.status ? 1 : -1
+          else if (orderByLocal === 'desc')
+            return a.status < b.status ? 1 : -1
+          
+          return 0
+        })
+      }
+      if (sortByLocal === 'price') {
+        filteredProducts = filteredProducts.sort((a, b) => {
+          if (orderByLocal === 'asc')
+            return Number(a.price.slice(1)) > Number(b.price.slice(1)) ? 1 : -1
+          else if (orderByLocal === 'desc')
+            return Number(a.price.slice(1)) < Number(b.price.slice(1)) ? 1 : -1
+          
+          return 0
+        })
+      }
+      if (sortByLocal === 'qty') {
+        filteredProducts = filteredProducts.sort((a, b) => {
+          if (orderByLocal === 'asc')
+            return a.qty > b.qty ? 1 : -1
+          else if (orderByLocal === 'desc')
+            return a.qty < b.qty ? 1 : -1
+          
+          return 0
+        })
+      }
+      if (sortByLocal === 'sku') {
+        filteredProducts = filteredProducts.sort((a, b) => {
+          if (orderByLocal === 'asc')
+            return a.sku > b.sku ? 1 : -1
+          else if (orderByLocal === 'desc')
+            return a.sku < b.sku ? 1 : -1
+          
+          return 0
+        })
+      }
+    }
+    
+    return HttpResponse.json({
+      products: paginateArray(filteredProducts, itemsPerPageLocal, pageLocal), total: filteredProducts.length,
+    }, {
+      status: 200,
+    })
+  }),
+
+  // 👉 Delete Product
+  http.delete('/api/apps/ecommerce/products/:id', ({ params }) => {
+    const id = Number(params.id)
+    const productIndex = db.products.findIndex(e => e.id === id)
+    if (productIndex >= 0) {
+      db.products.splice(productIndex, 1)
+
+      // return res(
+      //   ctx.status(204),
+      // )
+      return new HttpResponse(null, {
+        status: 204,
+      })
+    }
+    
+    return new HttpResponse(null, {
+      status: 404,
+    })
+  }),
+
+  // 👉 Orders
+  // Get single Customer
+  http.get(('/api/apps/ecommerce/orders/:id'), ({ params }) => {
+    const orderId = Number(params.id)
+    try {
+      const order = db.orderData.find(e => e.order === orderId)
+      if (order)
+        return HttpResponse.json(order, { status: 200 })
+    }
+    catch (error) {
+      return new HttpResponse(null, {
+        status: 404,
+      })
+    }
+  }),
+
+  // Get Order List
+  http.get('/api/apps/ecommerce/orders', ({ request }) => {
+    const url = new URL(request.url)
+    const q = url.searchParams.get('q')
+    const sortBy = url.searchParams.get('sortBy')
+    const orderBy = url.searchParams.get('orderBy')
+    const itemsPerPage = url.searchParams.get('itemsPerPage')
+    const page = url.searchParams.get('page')
+    const searchQuery = is.string(q) ? q : undefined
+    const queryLower = (searchQuery ?? '').toString().toLowerCase()
+    const parsedSortBy = destr(sortBy)
+    const sortByLocal = is.string(parsedSortBy) ? parsedSortBy : ''
+    const parsedOrderBy = destr(orderBy)
+    const orderByLocal = is.string(parsedOrderBy) ? parsedOrderBy : ''
+    const parsedItemsPerPage = destr(itemsPerPage)
+    const parsedPage = destr(page)
+    const itemsPerPageLocal = is.number(parsedItemsPerPage) ? parsedItemsPerPage : 10
+    const pageLocal = is.number(parsedPage) ? parsedPage : 1
+
+    const filterOrders = db.orderData.filter(order => {
+      return (order.customer.toLowerCase().includes(queryLower)
+                || order.email.toLowerCase().includes(queryLower)
+                || order.order.toString().includes(queryLower))
+    }).reverse()
+
+    if (sortByLocal) {
+      console.log(sortByLocal)
+      if (sortByLocal === 'order') {
+        filterOrders.sort((a, b) => {
+          if (orderByLocal === 'desc')
+            return b.order - a.order
+          else
+            return a.order - b.order
+        })
+      }
+      if (sortByLocal === 'customers') {
+        filterOrders.sort((a, b) => {
+          if (orderByLocal === 'desc')
+            return b.customer.localeCompare(a.customer)
+          else
+            return a.customer.localeCompare(b.customer)
+        })
+      }
+      if (sortByLocal === 'date') {
+        filterOrders.sort((a, b) => {
+          if (orderByLocal === 'desc')
+            return Number(new Date(b.date)) - Number(new Date(a.date))
+          else
+            return Number(new Date(a.date)) - Number(new Date(b.date))
+        })
+      }
+      if (sortByLocal === 'status') {
+        filterOrders.sort((a, b) => {
+          if (orderByLocal === 'desc')
+            return b.status.localeCompare(a.status)
+          else
+            return a.status.localeCompare(b.status)
+        })
+      }
+      if (sortByLocal === 'spent') {
+        filterOrders.sort((a, b) => {
+          if (orderByLocal === 'desc')
+            return Number(b.spent) - Number(a.spent)
+          else
+            return Number(a.spent) - Number(b.spent)
+        })
+      }
+    }
+    
+    return HttpResponse.json({
+      orders: paginateArray(filterOrders, itemsPerPageLocal, pageLocal), total: filterOrders.length,
+    }, {
+      status: 200,
+    })
+  }),
+
+  // Delete Order
+  http.delete('/api/apps/ecommerce/orders/:id', ({ params }) => {
+    const id = Number(params.id)
+    const orderIndex = db.orderData.findIndex(e => e.id === id)
+    if (orderIndex >= 0)
+      db.orderData.splice(orderIndex, 1)
+    
+    return new HttpResponse(null, {
+      status: 204,
+    })
+  }),
+
+  // 👉 Customers
+  // Get single Customer
+  http.get(('/api/apps/ecommerce/customers/:id'), ({ params }) => {
+    const customerId = Number(params.id)
+    try {
+      const customerIndex = db.customerData.findIndex(e => e.customerId === customerId)
+      const customer = db.customerData[customerIndex]
+
+      Object.assign(customer, {
+        status: 'Active',
+        contact: '+1 (234) 567 890',
+      })
+      if (customer)
+        return HttpResponse.json(customer, { status: 200 })
+    }
+    catch (error) {
+      return new HttpResponse(null, {
+        status: 404,
+      })
+    }
+  }),
+
+  // Get Customer List
+  http.get(('/api/apps/ecommerce/customers'), ({ request }) => {
+    const url = new URL(request.url)
+    const q = url.searchParams.get('q')
+    const sortBy = url.searchParams.get('sortBy')
+    const orderBy = url.searchParams.get('orderBy')
+    const itemsPerPage = url.searchParams.get('itemsPerPage')
+    const page = url.searchParams.get('page')
+    const parsedSortBy = destr(sortBy)
+    const sortByLocal = is.string(parsedSortBy) ? parsedSortBy : ''
+    const parsedOrderBy = destr(orderBy)
+    const orderByLocal = is.string(parsedOrderBy) ? parsedOrderBy : ''
+    const parsedItemsPerPage = destr(itemsPerPage)
+    const parsedPage = destr(page)
+    const itemsPerPageLocal = is.number(parsedItemsPerPage) ? parsedItemsPerPage : 10
+    const pageLocal = is.number(parsedPage) ? parsedPage : 1
+    const searchQuery = is.string(q) ? q : undefined
+    const queryLowered = (searchQuery ?? '').toString().toLowerCase()
+
+    const filteredCustomers = db.customerData.filter(customer => {
+      return (customer.customer.toLowerCase().includes(queryLowered)
+                || customer.country.toLowerCase().includes(queryLowered)
+                || customer.email.toLowerCase().includes(queryLowered))
+    }).reverse()
+
+
+    // Sort Customers
+    if (sortByLocal) {
+      if (sortByLocal === 'customer') {
+        filteredCustomers.sort((a, b) => {
+          if (orderByLocal === 'asc')
+            return a.customer.localeCompare(b.customer)
+          
+          return b.customer.localeCompare(a.customer)
+        })
+      }
+      if (sortByLocal === 'country') {
+        filteredCustomers.sort((a, b) => {
+          if (orderByLocal === 'asc')
+            return a.country.localeCompare(b.country)
+          
+          return b.country.localeCompare(a.country)
+        })
+      }
+      if (sortByLocal === 'customerId') {
+        filteredCustomers.sort((a, b) => {
+          if (orderByLocal === 'asc')
+            return a.customerId - b.customerId
+          
+          return b.customerId - a.customerId
+        })
+      }
+      if (sortByLocal === 'orders') {
+        filteredCustomers.sort((a, b) => {
+          if (orderByLocal === 'asc')
+            return a.order - b.order
+          
+          return b.order - a.order
+        })
+      }
+    }
+    if (sortByLocal === 'totalSpent') {
+      filteredCustomers.sort((a, b) => {
+        if (orderByLocal === 'asc')
+          return a.totalSpent - b.totalSpent
+        
+        return b.totalSpent - a.totalSpent
+      })
+    }
+    
+    return HttpResponse.json({
+      customers: paginateArray(filteredCustomers, itemsPerPageLocal, pageLocal), total: filteredCustomers.length,
+    }, {
+      status: 200,
+    })
+  }),
+
+  // 👉 Manage Reviews.
+  // Get Reviews
+  http.get(('/api/apps/ecommerce/reviews'), ({ request }) => {
+    const url = new URL(request.url)
+    const q = url.searchParams.get('q')
+    const sortBy = url.searchParams.get('sortBy')
+    const orderBy = url.searchParams.get('orderBy')
+    const itemsPerPage = url.searchParams.get('itemsPerPage')
+    const status = url.searchParams.get('status')
+    const page = url.searchParams.get('page')
+    const parsedSortBy = destr(sortBy)
+    const sortByLocal = is.string(parsedSortBy) ? parsedSortBy : ''
+    const parsedOrderBy = destr(orderBy)
+    const orderByLocal = is.string(parsedOrderBy) ? parsedOrderBy : ''
+    const parsedItemsPerPage = destr(itemsPerPage)
+    const parsedPage = destr(page)
+    const itemsPerPageLocal = is.number(parsedItemsPerPage) ? parsedItemsPerPage : 10
+    const pageLocal = is.number(parsedPage) ? parsedPage : 1
+    const searchQuery = is.string(q) ? q : undefined
+    const queryLower = (searchQuery ?? '').toString().toLowerCase()
+
+
+    // Filtering Reviews
+    const filteredReviews = db.reviews.filter(review => {
+      const { product, reviewer, email } = review
+      
+      return ((product.toLowerCase().includes(queryLower) || reviewer.toLowerCase().includes(queryLower) || email.toLowerCase().includes(queryLower) || review.head.toLowerCase().includes(queryLower) || review.para.toLowerCase().includes(queryLower))
+                && (review.status === status || status === 'All'))
+    })
+
+
+    // Sort
+    if (sortByLocal) {
+      if (sortByLocal === 'product') {
+        filteredReviews.sort((a, b) => {
+          if (orderByLocal === 'asc')
+            return a.product.toLowerCase() > b.product.toLowerCase() ? 1 : -1
+          else if (orderByLocal === 'desc')
+            return a.product.toLowerCase() < b.product.toLowerCase() ? 1 : -1
+          
+          return 0
+        })
+      }
+      if (sortByLocal === 'reviewer') {
+        filteredReviews.sort((a, b) => {
+          if (orderByLocal === 'asc')
+            return a.reviewer.toLowerCase() > b.reviewer.toLowerCase() ? 1 : -1
+          else if (orderByLocal === 'desc')
+            return a.reviewer.toLowerCase() < b.reviewer.toLowerCase() ? 1 : -1
+          
+          return 0
+        })
+      }
+      if (sortByLocal === 'date') {
+        filteredReviews.sort((a, b) => {
+          if (orderByLocal === 'desc')
+            return Number(new Date(b.date)) - Number(new Date(a.date))
+          else if (orderByLocal === 'asc')
+            return Number(new Date(a.date)) - Number(new Date(b.date))
+          
+          return 0
+        })
+      }
+    }
+    if (sortByLocal === 'status') {
+      filteredReviews.sort((a, b) => {
+        if (orderByLocal === 'asc')
+          return a.status.toLowerCase() > b.status.toLowerCase() ? 1 : -1
+        else if (orderByLocal === 'desc')
+          return a.status.toLowerCase() < b.status.toLowerCase() ? 1 : -1
+        else
+          return 0
+      })
+    }
+    
+    return HttpResponse.json({
+      reviews: paginateArray(filteredReviews, itemsPerPageLocal, pageLocal), total: filteredReviews.length,
+    }, {
+      status: 200,
+    })
+  }),
+
+  // Delete Review
+  http.delete(('/api/apps/ecommerce/reviews/:id'), ({ params }) => {
+    const id = Number(params.id)
+    const reviewIndex = db.reviews.findIndex(e => e.id === id)
+    if (reviewIndex !== -1) {
+      db.reviews.splice(reviewIndex, 1)
+      
+      return new HttpResponse(null, {
+        status: 204,
+      })
+    }
+    
+    return new HttpResponse(null, {
+      status: 404,
+    })
+  }),
+
+  // 👉 Referrals
+  // Get Referrals
+  http.get(('/api/apps/ecommerce/referrals'), ({ request }) => {
+    const url = new URL(request.url)
+    const sortBy = url.searchParams.get('sortBy')
+    const orderBy = url.searchParams.get('orderBy')
+    const itemsPerPage = url.searchParams.get('itemsPerPage')
+    const page = url.searchParams.get('page')
+    const parsedSortBy = destr(sortBy)
+    const sortByLocal = is.string(parsedSortBy) ? parsedSortBy : ''
+    const parsedOrderBy = destr(orderBy)
+    const orderByLocal = is.string(parsedOrderBy) ? parsedOrderBy : ''
+    const parsedItemsPerPage = destr(itemsPerPage)
+    const parsedPage = destr(page)
+    const itemsPerPageLocal = is.number(parsedItemsPerPage) ? parsedItemsPerPage : 10
+    const pageLocal = is.number(parsedPage) ? parsedPage : 1
+    const filteredReferrals = [...db.referrals]
+    if (sortByLocal) {
+      if (sortByLocal === 'users') {
+        filteredReferrals.sort((a, b) => {
+          if (orderByLocal === 'asc')
+            return a.user.localeCompare(b.user)
+          else
+            return b.user.localeCompare(a.user)
+        })
+      }
+      if (sortByLocal === 'referred-id') {
+        filteredReferrals.sort((a, b) => {
+          if (orderByLocal === 'asc')
+            return a.referredId - b.referredId
+          else if (orderByLocal === 'desc')
+            return b.referredId - a.referredId
+          
+          return 0
+        })
+      }
+      if (sortByLocal === 'earning') {
+        filteredReferrals.sort((a, b) => {
+          if (orderByLocal === 'asc')
+            return Number(a.earning.slice(1)) - Number(b.earning.slice(1))
+          else if (orderByLocal === 'desc')
+            return Number(b.earning.slice(1)) - Number(a.earning.slice(1))
+          
+          return 0
+        })
+      }
+      if (sortByLocal === 'value') {
+        filteredReferrals.sort((a, b) => {
+          if (orderByLocal === 'asc')
+            return Number(a.value.slice(1)) - Number(b.value.slice(1))
+          else if (orderByLocal === 'desc')
+            return Number(b.value.slice(1)) - Number(a.value.slice(1))
+          
+          return 0
+        })
+      }
+      if (sortByLocal === 'status') {
+        filteredReferrals.sort((a, b) => {
+          if (orderByLocal === 'asc')
+            return a.status.toLowerCase() > b.status.toLowerCase() ? 1 : -1
+          else if (orderByLocal === 'desc')
+            return a.status.toLowerCase() < b.status.toLowerCase() ? 1 : -1
+          
+          return 0
+        })
+      }
+    }
+    
+    return HttpResponse.json({
+      referrals: paginateArray(filteredReferrals, itemsPerPageLocal, pageLocal),
+      total: filteredReferrals.length,
+    }, {
+      status: 200,
+    })
+  }),
+]

resources/js/plugins/fake-api/handlers/apps/ecommerce/types.js

@@ -0,0 +1 @@
+export {}

resources/js/plugins/fake-api/handlers/apps/email/index.js

@@ -0,0 +1,72 @@
+import { destr } from 'destr'
+import { HttpResponse, http } from 'msw'
+import { db } from '@db/apps/email/db'
+
+export const handlerAppsEmail = [
+  // 👉 Get Email List
+  http.get(('/api/apps/email'), ({ request }) => {
+    const url = new URL(request.url)
+    const q = url.searchParams.get('q') || ''
+    const filter = url.searchParams.get('filter') || 'inbox'
+    const label = url.searchParams.get('label') || ''
+    const queryLowered = q.toLowerCase()
+    function isInFolder(email) {
+      if (filter === 'trashed')
+        return email.isDeleted
+      if (filter === 'starred')
+        return email.isStarred && !email.isDeleted
+      
+      return email.folder === (filter || email.folder) && !email.isDeleted
+    }
+
+    const filteredData = db.emails.filter(email => (email.from.name.toLowerCase().includes(queryLowered) || email.subject.toLowerCase().includes(queryLowered))
+            && isInFolder(email)
+            && (label ? email.labels.includes(label) : true))
+
+
+    // ------------------------------------------------
+    // Email Meta
+    // ------------------------------------------------
+    const emailsMeta = {
+      inbox: db.emails.filter(email => !email.isDeleted && !email.isRead && email.folder === 'inbox').length,
+      draft: db.emails.filter(email => !email.isDeleted && email.folder === 'draft').length,
+      spam: db.emails.filter(email => !email.isDeleted && !email.isRead && email.folder === 'spam').length,
+      star: db.emails.filter(email => !email.isDeleted && email.isStarred).length,
+    }
+
+    return HttpResponse.json({ emails: filteredData, emailsMeta }, { status: 200 })
+  }),
+
+  // 👉 Update Email Meta
+  http.post(('/api/apps/email'), async ({ request }) => {
+    const { ids, data, label } = await request.json()
+    const labelLocal = destr(label)
+    if (!labelLocal) {
+      const emailIdsLocal = destr(ids)
+      function updateMailData(email) {
+        Object.assign(email, data)
+      }
+      db.emails.forEach(email => {
+        if (emailIdsLocal.includes(email.id))
+          updateMailData(email)
+      })
+      
+      return new HttpResponse(null, { status: 201 })
+    }
+    else {
+      function updateMailLabels(email) {
+        const labelIndex = email.labels.indexOf(label)
+        if (labelIndex === -1)
+          email.labels.push(label)
+        else
+          email.labels.splice(labelIndex, 1)
+      }
+      db.emails.forEach(email => {
+        if (Array.isArray(ids) ? ids.includes(email.id) : ids === email.id)
+          updateMailLabels(email)
+      })
+      
+      return new HttpResponse(null, { status: 201 })
+    }
+  }),
+]

resources/js/plugins/fake-api/handlers/apps/email/types.js

@@ -0,0 +1 @@
+export {}

resources/js/plugins/fake-api/handlers/apps/invoice/db.js

@@ -0,0 +1,913 @@
+import avatar1 from '@images/avatars/avatar-1.png'
+import avatar2 from '@images/avatars/avatar-2.png'
+import avatar3 from '@images/avatars/avatar-3.png'
+import avatar4 from '@images/avatars/avatar-4.png'
+import avatar5 from '@images/avatars/avatar-5.png'
+import avatar6 from '@images/avatars/avatar-6.png'
+import avatar7 from '@images/avatars/avatar-7.png'
+import avatar8 from '@images/avatars/avatar-8.png'
+
+const now = new Date()
+const currentMonth = now.toLocaleString('default', { month: '2-digit' })
+export const database = [
+  {
+    id: 4987,
+    issuedDate: `${now.getFullYear()}-${currentMonth}-13`,
+    client: {
+      address: '7777 Mendez Plains',
+      company: 'Hall-Robbins PLC',
+      companyEmail: 'don85@johnson.com',
+      country: 'USA',
+      contact: '(616) 865-4180',
+      name: 'Jordan Stevenson',
+    },
+    service: 'Software Development',
+    total: 3428,
+    avatar: '',
+    invoiceStatus: 'Paid',
+    balance: 724,
+    dueDate: `${now.getFullYear()}-${currentMonth}-23`,
+  },
+  {
+    id: 4988,
+    issuedDate: `${now.getFullYear()}-${currentMonth}-17`,
+    client: {
+      address: '04033 Wesley Wall Apt. 961',
+      company: 'Mccann LLC and Sons',
+      companyEmail: 'brenda49@taylor.info',
+      country: 'Haiti',
+      contact: '(226) 204-8287',
+      name: 'Stephanie Burns',
+    },
+    service: 'UI/UX Design & Development',
+    total: 5219,
+    avatar: avatar1,
+    invoiceStatus: 'Downloaded',
+    balance: 0,
+    dueDate: `${now.getFullYear()}-${currentMonth}-15`,
+  },
+  {
+    id: 4989,
+    issuedDate: `${now.getFullYear()}-${currentMonth}-19`,
+    client: {
+      address: '5345 Robert Squares',
+      company: 'Leonard-Garcia and Sons',
+      companyEmail: 'smithtiffany@powers.com',
+      country: 'Denmark',
+      contact: '(955) 676-1076',
+      name: 'Tony Herrera',
+    },
+    service: 'Unlimited Extended License',
+    total: 3719,
+    invoiceStatus: 'Paid',
+    avatar: avatar2,
+    balance: 0,
+    dueDate: `${now.getFullYear()}-${currentMonth}-03`,
+  },
+  {
+    id: 4990,
+    issuedDate: `${now.getFullYear()}-${currentMonth}-06`,
+    client: {
+      address: '19022 Clark Parks Suite 149',
+      company: 'Smith, Miller and Henry LLC',
+      companyEmail: 'mejiageorge@lee-perez.com',
+      country: 'Cambodia',
+      contact: '(832) 323-6914',
+      name: 'Kevin Patton',
+    },
+    service: 'Software Development',
+    total: 4749,
+    avatar: avatar3,
+    invoiceStatus: 'Sent',
+    balance: 0,
+    dueDate: `${now.getFullYear()}-${currentMonth}-11`,
+  },
+  {
+    id: 4991,
+    issuedDate: `${now.getFullYear()}-${currentMonth}-08`,
+    client: {
+      address: '8534 Saunders Hill Apt. 583',
+      company: 'Garcia-Cameron and Sons',
+      companyEmail: 'brandon07@pierce.com',
+      country: 'Martinique',
+      contact: '(970) 982-3353',
+      name: 'Mrs. Julie Donovan MD',
+    },
+    service: 'UI/UX Design & Development',
+    total: 4056,
+    avatar: avatar4,
+    invoiceStatus: 'Draft',
+    balance: 815,
+    dueDate: `${now.getFullYear()}-${currentMonth}-30`,
+  },
+  {
+    id: 4992,
+    issuedDate: `${now.getFullYear()}-${currentMonth}-26`,
+    client: {
+      address: '661 Perez Run Apt. 778',
+      company: 'Burnett-Young PLC',
+      companyEmail: 'guerrerobrandy@beasley-harper.com',
+      country: 'Botswana',
+      contact: '(511) 938-9617',
+      name: 'Amanda Phillips',
+    },
+    service: 'UI/UX Design & Development',
+    total: 2771,
+    avatar: '',
+    invoiceStatus: 'Paid',
+    balance: 2771,
+    dueDate: `${now.getFullYear()}-${currentMonth}-24`,
+  },
+  {
+    id: 4993,
+    issuedDate: `${now.getFullYear()}-${currentMonth}-17`,
+    client: {
+      address: '074 Long Union',
+      company: 'Wilson-Lee LLC',
+      companyEmail: 'williamshenry@moon-smith.com',
+      country: 'Montserrat',
+      contact: '(504) 859-2893',
+      name: 'Christina Collier',
+    },
+    service: 'UI/UX Design & Development',
+    total: 2713,
+    avatar: '',
+    invoiceStatus: 'Draft',
+    balance: 407,
+    dueDate: `${now.getFullYear()}-${currentMonth}-22`,
+  },
+  {
+    id: 4994,
+    issuedDate: `${now.getFullYear()}-${currentMonth}-11`,
+    client: {
+      address: '5225 Ford Cape Apt. 840',
+      company: 'Schwartz, Henry and Rhodes Group',
+      companyEmail: 'margaretharvey@russell-murray.com',
+      country: 'Oman',
+      contact: '(758) 403-7718',
+      name: 'David Flores',
+    },
+    service: 'Template Customization',
+    total: 4309,
+    avatar: avatar5,
+    invoiceStatus: 'Paid',
+    balance: -205,
+    dueDate: `${now.getFullYear()}-${currentMonth}-13`,
+  },
+  {
+    id: 4995,
+    issuedDate: `${now.getFullYear()}-${currentMonth}-16`,
+    client: {
+      address: '23717 James Club Suite 277',
+      company: 'Henderson-Holder PLC',
+      companyEmail: 'dianarodriguez@villegas.com',
+      country: 'Cambodia',
+      contact: '(292) 873-8254',
+      name: 'Valerie Perez',
+    },
+    service: 'Software Development',
+    total: 3367,
+    avatar: avatar6,
+    invoiceStatus: 'Downloaded',
+    balance: 3367,
+    dueDate: `${now.getFullYear()}-${currentMonth}-24`,
+  },
+  {
+    id: 4996,
+    issuedDate: `${now.getFullYear()}-${currentMonth}-15`,
+    client: {
+      address: '4528 Myers Gateway',
+      company: 'Page-Wise PLC',
+      companyEmail: 'bwilson@norris-brock.com',
+      country: 'Guam',
+      contact: '(956) 803-2008',
+      name: 'Susan Dickerson',
+    },
+    service: 'Software Development',
+    total: 4776,
+    avatar: avatar7,
+    invoiceStatus: 'Downloaded',
+    balance: 305,
+    dueDate: `${now.getFullYear()}-${currentMonth}-02`,
+  },
+  {
+    id: 4997,
+    issuedDate: `${now.getFullYear()}-${currentMonth}-27`,
+    client: {
+      address: '4234 Mills Club Suite 107',
+      company: 'Turner PLC Inc',
+      companyEmail: 'markcampbell@bell.info',
+      country: 'United States Virgin Islands',
+      contact: '(716) 962-8635',
+      name: 'Kelly Smith',
+    },
+    service: 'Unlimited Extended License',
+    total: 3789,
+    avatar: avatar8,
+    invoiceStatus: 'Partial Payment',
+    balance: 666,
+    dueDate: `${now.getFullYear()}-${currentMonth}-18`,
+  },
+  {
+    id: 4998,
+    issuedDate: `${now.getFullYear()}-${currentMonth}-31`,
+    client: {
+      address: '476 Keith Meadow',
+      company: 'Levine-Dorsey PLC',
+      companyEmail: 'mary61@rosario.com',
+      country: 'Syrian Arab Republic',
+      contact: '(523) 449-0782',
+      name: 'Jamie Jones',
+    },
+    service: 'Unlimited Extended License',
+    total: 5200,
+    avatar: avatar2,
+    invoiceStatus: 'Partial Payment',
+    balance: 0,
+    dueDate: `${now.getFullYear()}-${currentMonth}-17`,
+  },
+  {
+    id: 4999,
+    issuedDate: `${now.getFullYear()}-${currentMonth}-14`,
+    client: {
+      address: '56381 Ashley Village Apt. 332',
+      company: 'Hall, Thompson and Ramirez LLC',
+      companyEmail: 'sean22@cook.com',
+      country: 'Ukraine',
+      contact: '(583) 470-8356',
+      name: 'Ruben Garcia',
+    },
+    service: 'Software Development',
+    total: 4558,
+    avatar: avatar1,
+    invoiceStatus: 'Paid',
+    balance: 0,
+    dueDate: `${now.getFullYear()}-${currentMonth}-01`,
+  },
+  {
+    id: 5000,
+    issuedDate: `${now.getFullYear()}-${currentMonth}-21`,
+    client: {
+      address: '6946 Gregory Plaza Apt. 310',
+      company: 'Lambert-Thomas Group',
+      companyEmail: 'mccoymatthew@lopez-jenkins.net',
+      country: 'Vanuatu',
+      contact: '(366) 906-6467',
+      name: 'Ryan Meyer',
+    },
+    service: 'Template Customization',
+    total: 3503,
+    avatar: avatar7,
+    invoiceStatus: 'Paid',
+    balance: 0,
+    dueDate: `${now.getFullYear()}-${currentMonth}-22`,
+  },
+  {
+    id: 5001,
+    issuedDate: `${now.getFullYear()}-${currentMonth}-30`,
+    client: {
+      address: '64351 Andrew Lights',
+      company: 'Gregory-Haynes PLC',
+      companyEmail: 'novakshannon@mccarty-murillo.com',
+      country: 'Romania',
+      contact: '(320) 616-3915',
+      name: 'Valerie Valdez',
+    },
+    service: 'Unlimited Extended License',
+    total: 5285,
+    avatar: avatar6,
+    invoiceStatus: 'Partial Payment',
+    balance: -202,
+    dueDate: `${now.getFullYear()}-${currentMonth}-02`,
+  },
+  {
+    id: 5002,
+    issuedDate: `${now.getFullYear()}-${currentMonth}-21`,
+    client: {
+      address: '5702 Sarah Heights',
+      company: 'Wright-Schmidt LLC',
+      companyEmail: 'smithrachel@davis-rose.net',
+      country: 'Costa Rica',
+      contact: '(435) 899-1963',
+      name: 'Melissa Wheeler',
+    },
+    service: 'UI/UX Design & Development',
+    total: 3668,
+    avatar: avatar5,
+    invoiceStatus: 'Downloaded',
+    balance: 731,
+    dueDate: `${now.getFullYear()}-${currentMonth}-15`,
+  },
+  {
+    id: 5003,
+    issuedDate: `${now.getFullYear()}-${currentMonth}-30`,
+    client: {
+      address: '668 Robert Flats',
+      company: 'Russell-Abbott Ltd',
+      companyEmail: 'scott96@mejia.net',
+      country: 'Congo',
+      contact: '(254) 399-4728',
+      name: 'Alan Jimenez',
+    },
+    service: 'Unlimited Extended License',
+    total: 4372,
+    avatar: '',
+    invoiceStatus: 'Sent',
+    balance: -344,
+    dueDate: `${now.getFullYear()}-${currentMonth}-17`,
+  },
+  {
+    id: 5004,
+    issuedDate: `${now.getFullYear()}-${currentMonth}-27`,
+    client: {
+      address: '55642 Chang Extensions Suite 373',
+      company: 'Williams LLC Inc',
+      companyEmail: 'cramirez@ross-bass.biz',
+      country: 'Saint Pierre and Miquelon',
+      contact: '(648) 500-4338',
+      name: 'Jennifer Morris',
+    },
+    service: 'Template Customization',
+    total: 3198,
+    avatar: avatar4,
+    invoiceStatus: 'Partial Payment',
+    balance: -253,
+    dueDate: `${now.getFullYear()}-${currentMonth}-16`,
+  },
+  {
+    id: 5005,
+    issuedDate: `${now.getFullYear()}-${currentMonth}-30`,
+    client: {
+      address: '56694 Eric Orchard',
+      company: 'Hudson, Bell and Phillips PLC',
+      companyEmail: 'arielberg@wolfe-smith.com',
+      country: 'Uruguay',
+      contact: '(896) 544-3796',
+      name: 'Timothy Stevenson',
+    },
+    service: 'Unlimited Extended License',
+    total: 5293,
+    avatar: '',
+    invoiceStatus: 'Past Due',
+    balance: 0,
+    dueDate: `${now.getFullYear()}-${currentMonth}-01`,
+  },
+  {
+    id: 5006,
+    issuedDate: `${now.getFullYear()}-${currentMonth}-10`,
+    client: {
+      address: '3727 Emma Island Suite 879',
+      company: 'Berry, Gonzalez and Heath Inc',
+      companyEmail: 'yrobinson@nichols.com',
+      country: 'Israel',
+      contact: '(236) 784-5142',
+      name: 'Erik Hayden',
+    },
+    service: 'Template Customization',
+    total: 5612,
+    avatar: avatar3,
+    invoiceStatus: 'Downloaded',
+    balance: 883,
+    dueDate: `${now.getFullYear()}-${currentMonth}-12`,
+  },
+  {
+    id: 5007,
+    issuedDate: `${now.getFullYear()}-${currentMonth}-01`,
+    client: {
+      address: '953 Miller Common Suite 580',
+      company: 'Martinez, Fuller and Chavez and Sons',
+      companyEmail: 'tatejennifer@allen.net',
+      country: 'Cook Islands',
+      contact: '(436) 717-2419',
+      name: 'Katherine Kennedy',
+    },
+    service: 'Software Development',
+    total: 2230,
+    avatar: avatar2,
+    invoiceStatus: 'Sent',
+    balance: 0,
+    dueDate: `${now.getFullYear()}-${currentMonth}-19`,
+  },
+  {
+    id: 5008,
+    issuedDate: `${now.getFullYear()}-${currentMonth}-22`,
+    client: {
+      address: '808 Sullivan Street Apt. 135',
+      company: 'Wilson and Sons LLC',
+      companyEmail: 'gdurham@lee.com',
+      country: 'Nepal',
+      contact: '(489) 946-3041',
+      name: 'Monica Fuller',
+    },
+    service: 'Unlimited Extended License',
+    total: 2032,
+    avatar: avatar1,
+    invoiceStatus: 'Partial Payment',
+    balance: 0,
+    dueDate: `${now.getFullYear()}-${currentMonth}-30`,
+  },
+  {
+    id: 5009,
+    issuedDate: `${now.getFullYear()}-${currentMonth}-30`,
+    client: {
+      address: '25135 Christopher Creek',
+      company: 'Hawkins, Johnston and Mcguire PLC',
+      companyEmail: 'jenny96@lawrence-thompson.com',
+      country: 'Kiribati',
+      contact: '(274) 246-3725',
+      name: 'Stacey Carter',
+    },
+    service: 'UI/UX Design & Development',
+    total: 3128,
+    avatar: avatar8,
+    invoiceStatus: 'Paid',
+    balance: 0,
+    dueDate: `${now.getFullYear()}-${currentMonth}-10`,
+  },
+  {
+    id: 5010,
+    issuedDate: `${now.getFullYear()}-${currentMonth}-06`,
+    client: {
+      address: '81285 Rebecca Estates Suite 046',
+      company: 'Huynh-Mills and Sons',
+      companyEmail: 'jgutierrez@jackson.com',
+      country: 'Swaziland',
+      contact: '(258) 211-5970',
+      name: 'Chad Davis',
+    },
+    service: 'Software Development',
+    total: 2060,
+    avatar: avatar7,
+    invoiceStatus: 'Downloaded',
+    balance: 0,
+    dueDate: `${now.getFullYear()}-${currentMonth}-08`,
+  },
+  {
+    id: 5011,
+    issuedDate: `${now.getFullYear()}-${currentMonth}-01`,
+    client: {
+      address: '3102 Briggs Dale Suite 118',
+      company: 'Jones-Cooley and Sons',
+      companyEmail: 'hunter14@jones.com',
+      country: 'Congo',
+      contact: '(593) 965-4100',
+      name: 'Chris Reyes',
+    },
+    service: 'UI/UX Design & Development',
+    total: 4077,
+    avatar: '',
+    invoiceStatus: 'Draft',
+    balance: 0,
+    dueDate: `${now.getFullYear()}-${currentMonth}-01`,
+  },
+  {
+    id: 5012,
+    issuedDate: `${now.getFullYear()}-${currentMonth}-30`,
+    client: {
+      address: '811 Jill Skyway',
+      company: 'Jones PLC Ltd',
+      companyEmail: 'pricetodd@johnson-jenkins.com',
+      country: 'Brazil',
+      contact: '(585) 829-2603',
+      name: 'Laurie Summers',
+    },
+    service: 'Template Customization',
+    total: 2872,
+    avatar: avatar6,
+    invoiceStatus: 'Partial Payment',
+    balance: 0,
+    dueDate: `${now.getFullYear()}-${currentMonth}-18`,
+  },
+  {
+    id: 5013,
+    issuedDate: `${now.getFullYear()}-${currentMonth}-05`,
+    client: {
+      address: '2223 Brandon Inlet Suite 597',
+      company: 'Jordan, Gomez and Ross Group',
+      companyEmail: 'perrydavid@chapman-rogers.com',
+      country: 'Congo',
+      contact: '(527) 351-5517',
+      name: 'Lindsay Wilson',
+    },
+    service: 'Software Development',
+    total: 3740,
+    avatar: avatar4,
+    invoiceStatus: 'Draft',
+    balance: 0,
+    dueDate: `${now.getFullYear()}-${currentMonth}-01`,
+  },
+  {
+    id: 5014,
+    issuedDate: `${now.getFullYear()}-${currentMonth}-01`,
+    client: {
+      address: '08724 Barry Causeway',
+      company: 'Gonzalez, Moody and Glover LLC',
+      companyEmail: 'leahgriffin@carpenter.com',
+      country: 'Equatorial Guinea',
+      contact: '(628) 903-0132',
+      name: 'Jenna Castro',
+    },
+    service: 'Unlimited Extended License',
+    total: 3623,
+    avatar: '',
+    invoiceStatus: 'Downloaded',
+    balance: 0,
+    dueDate: `${now.getFullYear()}-${currentMonth}-23`,
+  },
+  {
+    id: 5015,
+    issuedDate: `${now.getFullYear()}-${currentMonth}-16`,
+    client: {
+      address: '073 Holt Ramp Apt. 755',
+      company: 'Ashley-Pacheco Ltd',
+      companyEmail: 'esparzadaniel@allen.com',
+      country: 'Seychelles',
+      contact: '(847) 396-9904',
+      name: 'Wendy Weber',
+    },
+    service: 'Software Development',
+    total: 2477,
+    avatar: avatar5,
+    invoiceStatus: 'Draft',
+    balance: 0,
+    dueDate: `${now.getFullYear()}-${currentMonth}-01`,
+  },
+  {
+    id: 5016,
+    issuedDate: `${now.getFullYear()}-${currentMonth}-24`,
+    client: {
+      address: '984 Sherry Trail Apt. 953',
+      company: 'Berry PLC Group',
+      companyEmail: 'todd34@owens-morgan.com',
+      country: 'Ireland',
+      contact: '(852) 249-4539',
+      name: 'April Yates',
+    },
+    service: 'Unlimited Extended License',
+    total: 3904,
+    avatar: '',
+    invoiceStatus: 'Paid',
+    balance: 951,
+    dueDate: `${now.getFullYear()}-${currentMonth}-30`,
+  },
+  {
+    id: 5017,
+    issuedDate: `${now.getFullYear()}-${currentMonth}-24`,
+    client: {
+      address: '093 Jonathan Camp Suite 953',
+      company: 'Allen Group Ltd',
+      companyEmail: 'roydavid@bailey.com',
+      country: 'Netherlands',
+      contact: '(917) 984-2232',
+      name: 'Daniel Marshall PhD',
+    },
+    service: 'UI/UX Design & Development',
+    total: 3102,
+    avatar: avatar3,
+    invoiceStatus: 'Partial Payment',
+    balance: -153,
+    dueDate: `${now.getFullYear()}-${currentMonth}-25`,
+  },
+  {
+    id: 5018,
+    issuedDate: `${now.getFullYear()}-${currentMonth}-29`,
+    client: {
+      address: '4735 Kristie Islands Apt. 259',
+      company: 'Chapman-Schneider LLC',
+      companyEmail: 'baldwinjoel@washington.com',
+      country: 'Cocos (Keeling) Islands',
+      contact: '(670) 409-3703',
+      name: 'Randy Rich',
+    },
+    service: 'UI/UX Design & Development',
+    total: 2483,
+    avatar: avatar2,
+    invoiceStatus: 'Draft',
+    balance: 0,
+    dueDate: `${now.getFullYear()}-${currentMonth}-10`,
+  },
+  {
+    id: 5019,
+    issuedDate: `${now.getFullYear()}-${currentMonth}-07`,
+    client: {
+      address: '92218 Andrew Radial',
+      company: 'Mcclure, Hernandez and Simon Ltd',
+      companyEmail: 'psmith@morris.info',
+      country: 'Macao',
+      contact: '(646) 263-0257',
+      name: 'Mrs. Jodi Chapman',
+    },
+    service: 'Unlimited Extended License',
+    total: 2825,
+    avatar: avatar1,
+    invoiceStatus: 'Partial Payment',
+    balance: -459,
+    dueDate: `${now.getFullYear()}-${currentMonth}-14`,
+  },
+  {
+    id: 5020,
+    issuedDate: `${now.getFullYear()}-${currentMonth}-10`,
+    client: {
+      address: '2342 Michelle Valley',
+      company: 'Hamilton PLC and Sons',
+      companyEmail: 'lori06@morse.com',
+      country: 'Somalia',
+      contact: '(751) 213-4288',
+      name: 'Steven Myers',
+    },
+    service: 'Unlimited Extended License',
+    total: 2029,
+    avatar: avatar2,
+    invoiceStatus: 'Past Due',
+    balance: 0,
+    dueDate: `${now.getFullYear()}-${currentMonth}-28`,
+  },
+  {
+    id: 5021,
+    issuedDate: `${now.getFullYear()}-${currentMonth}-02`,
+    client: {
+      address: '16039 Brittany Terrace Apt. 128',
+      company: 'Silva-Reeves LLC',
+      companyEmail: 'zpearson@miller.com',
+      country: 'Slovakia (Slovak Republic)',
+      contact: '(655) 649-7872',
+      name: 'Charles Alexander',
+    },
+    service: 'Software Development',
+    total: 3208,
+    avatar: '',
+    invoiceStatus: 'Sent',
+    balance: 0,
+    dueDate: `${now.getFullYear()}-${currentMonth}-06`,
+  },
+  {
+    id: 5022,
+    issuedDate: `${now.getFullYear()}-${currentMonth}-02`,
+    client: {
+      address: '37856 Olsen Lakes Apt. 852',
+      company: 'Solis LLC Ltd',
+      companyEmail: 'strongpenny@young.net',
+      country: 'Brazil',
+      contact: '(402) 935-0735',
+      name: 'Elizabeth Jones',
+    },
+    service: 'Software Development',
+    total: 3077,
+    avatar: '',
+    invoiceStatus: 'Sent',
+    balance: 0,
+    dueDate: `${now.getFullYear()}-${currentMonth}-09`,
+  },
+  {
+    id: 5023,
+    issuedDate: `${now.getFullYear()}-${currentMonth}-23`,
+    client: {
+      address: '11489 Griffin Plaza Apt. 927',
+      company: 'Munoz-Peters and Sons',
+      companyEmail: 'carrietorres@acosta.com',
+      country: 'Argentina',
+      contact: '(915) 448-6271',
+      name: 'Heidi Walton',
+    },
+    service: 'Software Development',
+    total: 5578,
+    avatar: avatar4,
+    invoiceStatus: 'Draft',
+    balance: 0,
+    dueDate: `${now.getFullYear()}-${currentMonth}-23`,
+  },
+  {
+    id: 5024,
+    issuedDate: `${now.getFullYear()}-${currentMonth}-28`,
+    client: {
+      address: '276 Michael Gardens Apt. 004',
+      company: 'Shea, Velez and Garcia LLC',
+      companyEmail: 'zjohnson@nichols-powers.com',
+      country: 'Philippines',
+      contact: '(817) 700-2984',
+      name: 'Christopher Allen',
+    },
+    service: 'Software Development',
+    total: 2787,
+    avatar: avatar5,
+    invoiceStatus: 'Partial Payment',
+    balance: 0,
+    dueDate: `${now.getFullYear()}-${currentMonth}-25`,
+  },
+  {
+    id: 5025,
+    issuedDate: `${now.getFullYear()}-${currentMonth}-21`,
+    client: {
+      address: '633 Bell Well Apt. 057',
+      company: 'Adams, Simmons and Brown Group',
+      companyEmail: 'kayla09@thomas.com',
+      country: 'Martinique',
+      contact: '(266) 611-9482',
+      name: 'Joseph Oliver',
+    },
+    service: 'UI/UX Design & Development',
+    total: 5591,
+    avatar: '',
+    invoiceStatus: 'Downloaded',
+    balance: 0,
+    dueDate: `${now.getFullYear()}-${currentMonth}-07`,
+  },
+  {
+    id: 5026,
+    issuedDate: `${now.getFullYear()}-${currentMonth}-24`,
+    client: {
+      address: '1068 Lopez Fall',
+      company: 'Williams-Lawrence and Sons',
+      companyEmail: 'melvindavis@allen.info',
+      country: 'Mexico',
+      contact: '(739) 745-9728',
+      name: 'Megan Roberts',
+    },
+    service: 'Template Customization',
+    total: 2783,
+    avatar: avatar6,
+    invoiceStatus: 'Draft',
+    balance: 0,
+    dueDate: `${now.getFullYear()}-${currentMonth}-22`,
+  },
+  {
+    id: 5027,
+    issuedDate: `${now.getFullYear()}-${currentMonth}-13`,
+    client: {
+      address: '86691 Mackenzie Light Suite 568',
+      company: 'Deleon Inc LLC',
+      companyEmail: 'gjordan@fernandez-coleman.com',
+      country: 'Costa Rica',
+      contact: '(682) 804-6506',
+      name: 'Mary Garcia',
+    },
+    service: 'Template Customization',
+    total: 2719,
+    avatar: '',
+    invoiceStatus: 'Sent',
+    balance: 0,
+    dueDate: `${now.getFullYear()}-${currentMonth}-04`,
+  },
+  {
+    id: 5028,
+    issuedDate: `${now.getFullYear()}-${currentMonth}-18`,
+    client: {
+      address: '86580 Sarah Bridge',
+      company: 'Farmer, Johnson and Anderson Group',
+      companyEmail: 'robertscott@garcia.com',
+      country: 'Cameroon',
+      contact: '(775) 366-0411',
+      name: 'Crystal Mays',
+    },
+    service: 'Template Customization',
+    total: 3325,
+    avatar: '',
+    invoiceStatus: 'Paid',
+    balance: 361,
+    dueDate: `${now.getFullYear()}-${currentMonth}-02`,
+  },
+  {
+    id: 5029,
+    issuedDate: `${now.getFullYear()}-${currentMonth}-29`,
+    client: {
+      address: '49709 Edwin Ports Apt. 353',
+      company: 'Sherman-Johnson PLC',
+      companyEmail: 'desiree61@kelly.com',
+      country: 'Macedonia',
+      contact: '(510) 536-6029',
+      name: 'Nicholas Tanner',
+    },
+    service: 'Template Customization',
+    total: 3851,
+    avatar: '',
+    invoiceStatus: 'Paid',
+    balance: 0,
+    dueDate: `${now.getFullYear()}-${currentMonth}-25`,
+  },
+  {
+    id: 5030,
+    issuedDate: `${now.getFullYear()}-${currentMonth}-07`,
+    client: {
+      address: '3856 Mathis Squares Apt. 584',
+      company: 'Byrd LLC PLC',
+      companyEmail: 'jeffrey25@martinez-hodge.com',
+      country: 'Congo',
+      contact: '(253) 230-4657',
+      name: 'Justin Richardson',
+    },
+    service: 'Template Customization',
+    total: 5565,
+    avatar: '',
+    invoiceStatus: 'Draft',
+    balance: 0,
+    dueDate: `${now.getFullYear()}-${currentMonth}-06`,
+  },
+  {
+    id: 5031,
+    issuedDate: `${now.getFullYear()}-${currentMonth}-21`,
+    client: {
+      address: '141 Adrian Ridge Suite 550',
+      company: 'Stone-Zimmerman Group',
+      companyEmail: 'john77@anderson.net',
+      country: 'Falkland Islands (Malvinas)',
+      contact: '(612) 546-3485',
+      name: 'Jennifer Summers',
+    },
+    service: 'Template Customization',
+    total: 3313,
+    avatar: avatar7,
+    invoiceStatus: 'Partial Payment',
+    balance: 0,
+    dueDate: `${now.getFullYear()}-${currentMonth}-09`,
+  },
+  {
+    id: 5032,
+    issuedDate: `${now.getFullYear()}-${currentMonth}-31`,
+    client: {
+      address: '01871 Kristy Square',
+      company: 'Yang, Hansen and Hart PLC',
+      companyEmail: 'ywagner@jones.com',
+      country: 'Germany',
+      contact: '(203) 601-8603',
+      name: 'Richard Payne',
+    },
+    service: 'Template Customization',
+    total: 5181,
+    avatar: '',
+    invoiceStatus: 'Past Due',
+    balance: 0,
+    dueDate: `${now.getFullYear()}-${currentMonth}-29`,
+  },
+  {
+    id: 5033,
+    issuedDate: `${now.getFullYear()}-${currentMonth}-12`,
+    client: {
+      address: '075 Smith Views',
+      company: 'Jenkins-Rosales Inc',
+      companyEmail: 'calvin07@joseph-edwards.org',
+      country: 'Colombia',
+      contact: '(895) 401-4255',
+      name: 'Lori Wells',
+    },
+    service: 'Template Customization',
+    total: 2869,
+    avatar: avatar4,
+    invoiceStatus: 'Partial Payment',
+    balance: 0,
+    dueDate: `${now.getFullYear()}-${currentMonth}-22`,
+  },
+  {
+    id: 5034,
+    issuedDate: `${now.getFullYear()}-${currentMonth}-10`,
+    client: {
+      address: '2577 Pearson Overpass Apt. 314',
+      company: 'Mason-Reed PLC',
+      companyEmail: 'eric47@george-castillo.com',
+      country: 'Paraguay',
+      contact: '(602) 336-9806',
+      name: 'Tammy Sanchez',
+    },
+    service: 'Unlimited Extended License',
+    total: 4836,
+    avatar: '',
+    invoiceStatus: 'Paid',
+    balance: 0,
+    dueDate: `${now.getFullYear()}-${currentMonth}-22`,
+  },
+  {
+    id: 5035,
+    issuedDate: `${now.getFullYear()}-${currentMonth}-20`,
+    client: {
+      address: '1770 Sandra Mountains Suite 636',
+      company: 'Foster-Pham PLC',
+      companyEmail: 'jamesjoel@chapman.net',
+      country: 'Western Sahara',
+      contact: '(936) 550-1638',
+      name: 'Dana Carey',
+    },
+    service: 'UI/UX Design & Development',
+    total: 4263,
+    avatar: '',
+    invoiceStatus: 'Draft',
+    balance: 762,
+    dueDate: `${now.getFullYear()}-${currentMonth}-12`,
+  },
+  {
+    id: 5036,
+    issuedDate: `${now.getFullYear()}-${currentMonth}-19`,
+    client: {
+      address: '78083 Laura Pines',
+      company: 'Richardson and Sons LLC',
+      companyEmail: 'pwillis@cross.org',
+      country: 'Bhutan',
+      contact: '(687) 660-2473',
+      name: 'Andrew Burns',
+    },
+    service: 'Unlimited Extended License',
+    total: 3171,
+    avatar: avatar3,
+    invoiceStatus: 'Paid',
+    balance: -205,
+    dueDate: `${now.getFullYear()}-${currentMonth}-25`,
+  },
+]

resources/js/plugins/fake-api/handlers/apps/invoice/index.js

@@ -0,0 +1,146 @@
+import is from '@sindresorhus/is'
+import { destr } from 'destr'
+import { HttpResponse, http } from 'msw'
+import { database } from '@db/apps/invoice/db'
+import { paginateArray } from '@api-utils/paginateArray'
+
+export const handlerAppsInvoice = [
+  // 👉 Client
+  // Get Clients
+  http.get(('/api/apps/invoice/clients'), () => {
+    const clients = database.map(invoice => invoice.client)
+    
+    return HttpResponse.json(clients.splice(0, 5), { status: 200 })
+  }),
+
+  // 👉 Invoice
+  // Get Invoice List
+  http.get(('/api/apps/invoice'), ({ request }) => {
+    const url = new URL(request.url)
+    const q = url.searchParams.get('q')
+    const status = url.searchParams.get('status')
+    const selectedDateRange = url.searchParams.get('selectedDateRange')
+    const page = url.searchParams.get('page')
+    const itemsPerPage = url.searchParams.get('itemsPerPage')
+    const sortBy = url.searchParams.get('sortBy')
+    const orderBy = url.searchParams.get('orderBy')
+    const searchQuery = is.string(q) ? q : undefined
+    const queryLowered = (searchQuery ?? '').toString().toLowerCase()
+    const parsedSortBy = destr(sortBy)
+    const sortByLocal = is.string(parsedSortBy) ? parsedSortBy : ''
+    const parsedOrderBy = destr(orderBy)
+    const orderByLocal = is.string(parsedOrderBy) ? parsedOrderBy : ''
+    const parsedItemsPerPage = destr(itemsPerPage)
+    const parsedPage = destr(page)
+    const itemsPerPageLocal = is.number(parsedItemsPerPage) ? parsedItemsPerPage : 10
+    const pageLocal = is.number(parsedPage) ? parsedPage : 1
+    const parsedDateRange = destr(selectedDateRange)
+    const startDateLocal = parsedDateRange?.start
+    const endDateLocal = parsedDateRange?.end
+
+    // Filtering invoices
+    let filteredInvoices = database.filter(invoice => ((invoice.client.name.toLowerCase().includes(queryLowered)
+            || invoice.client.companyEmail.toLowerCase().includes(queryLowered) || invoice.id.toString().includes(queryLowered))
+            && invoice.invoiceStatus === (status || invoice.invoiceStatus))).reverse()
+
+    // Sorting invoices
+    if (sortByLocal) {
+      if (sortByLocal === 'client') {
+        filteredInvoices = filteredInvoices.sort((a, b) => {
+          if (orderByLocal === 'asc')
+            return a.client.name.localeCompare(b.client.name)
+          
+          return b.client.name.localeCompare(a.client.name)
+        })
+      }
+      else if (sortByLocal === 'total') {
+        filteredInvoices = filteredInvoices.sort((a, b) => {
+          if (orderByLocal === 'asc')
+            return a.total - b.total
+          
+          return b.total - a.total
+        })
+      }
+      else if (sortByLocal === 'id') {
+        filteredInvoices = filteredInvoices.sort((a, b) => {
+          if (orderByLocal === 'asc')
+            return a.id - b.id
+          
+          return b.id - a.id
+        })
+      }
+      else if (sortByLocal === 'date') {
+        filteredInvoices = filteredInvoices.sort((a, b) => {
+          if (orderByLocal === 'asc')
+            return new Date(a.issuedDate).getTime() - new Date(b.issuedDate).getTime()
+          
+          return new Date(b.issuedDate).getTime() - new Date(a.issuedDate).getTime()
+        })
+      }
+      else if (sortByLocal === 'balance') {
+        filteredInvoices = filteredInvoices.sort((a, b) => {
+          if (orderByLocal === 'asc')
+            return a.balance - b.balance
+          
+          return b.balance - a.balance
+        })
+      }
+    }
+
+    // filtering invoices by date
+    if (startDateLocal && endDateLocal) {
+      filteredInvoices = filteredInvoices.filter(invoiceObj => {
+        const start = new Date(startDateLocal).getTime()
+        const end = new Date(endDateLocal).getTime()
+        const issuedDate = new Date(invoiceObj.issuedDate).getTime()
+        
+        return issuedDate >= start && issuedDate <= end
+      })
+    }
+    const totalInvoices = filteredInvoices.length
+    
+    return HttpResponse.json({
+      invoices: paginateArray(filteredInvoices, itemsPerPageLocal, pageLocal),
+      totalInvoices,
+    }, {
+      status: 200,
+    })
+  }),
+
+  // Get Single Invoice
+  http.get(('/api/apps/invoice/:id'), ({ params }) => {
+    const invoiceId = params.id
+    const invoice = database.find(e => e.id === Number(invoiceId))
+    if (!invoice) {
+      return HttpResponse.json('No invoice found with this id', { status: 404 })
+    }
+
+    const responseData = {
+      invoice,
+      paymentDetails: {
+        totalDue: '$12,110.55',
+        bankName: 'American Bank',
+        country: 'United States',
+        iban: 'ETD95476213874685',
+        swiftCode: 'BR91905',
+      },
+    }
+
+    return HttpResponse.json(responseData, { status: 200 })
+  }),
+
+  // Delete Invoice
+  http.delete(('/api/apps/invoice/:id'), ({ params }) => {
+    const invoiceId = params.id
+    const invoiceIndex = database.findIndex(e => e.id === Number(invoiceId))
+    if (invoiceIndex >= 0) {
+      database.splice(invoiceIndex, 1)
+      
+      return new HttpResponse(null, {
+        status: 204,
+      })
+    }
+    
+    return HttpResponse.json({ error: 'Something went wrong' }, { status: 404 })
+  }),
+]

resources/js/plugins/fake-api/handlers/apps/invoice/types.js

@@ -0,0 +1 @@
+export {}

resources/js/plugins/fake-api/handlers/apps/kanban/db.js

@@ -0,0 +1,92 @@
+import avatar1 from '@images/avatars/avatar-1.png'
+import avatar2 from '@images/avatars/avatar-2.png'
+import avatar3 from '@images/avatars/avatar-3.png'
+import treePot from '@images/pages/tree-pot.png'
+
+export const database = {
+  boards: [
+    {
+      id: 1,
+      title: 'In Progress',
+      itemsIds: [1, 2],
+    },
+    {
+      id: 2,
+      title: 'In Review',
+      itemsIds: [3, 4],
+    },
+    {
+      id: 3,
+      title: 'Done',
+      itemsIds: [5, 6],
+    },
+  ],
+  items: [
+    {
+      id: 1,
+      title: 'Research FAQ page UX',
+      dueDate: '',
+      labels: ['UX'],
+      members: [{ img: avatar1, name: 'John Doe' }, { img: avatar2, name: 'Jane Smith' }, { img: avatar3, name: 'Robert Johnson' }],
+      comments: 'FAQ page design is ready and needs to be implemented.',
+      attachments: 2,
+      commentsCount: 1,
+      image: '',
+    },
+    {
+      id: 2,
+      title: 'Review JavaScript code',
+      dueDate: '',
+      labels: ['Code Review'],
+      members: [{ img: avatar1, name: 'John Doe' }, { img: avatar2, name: 'Jane Smith' }],
+      comments: 'JavaScript code needs to be reviewed and refactored.',
+      attachments: 2,
+      commentsCount: 4,
+      image: '',
+    },
+    {
+      id: 3,
+      title: 'Review completed Apps',
+      dueDate: '',
+      labels: ['Dashboard'],
+      members: [{ img: avatar1, name: 'John Doe' }, { img: avatar2, name: 'Jane Smith' }],
+      comments: 'Apps design is ready and needs to be implemented.',
+      image: '',
+      attachments: 5,
+      commentsCount: 10,
+    },
+    {
+      id: 4,
+      title: 'Find new images for pages',
+      dueDate: '',
+      labels: ['Image'],
+      members: [{ img: avatar1, name: 'John Doe' }, { img: avatar2, name: 'Jane Smith' }, { img: avatar3, name: 'Robert Johnson' }],
+      comments: 'New images need to be found for the new pages.',
+      image: treePot,
+      attachments: 5,
+      commentsCount: 4,
+    },
+    {
+      id: 5,
+      title: 'Forms & tables section',
+      dueDate: '',
+      labels: ['App'],
+      members: [{ img: avatar1, name: 'John Doe' }, { img: avatar2, name: 'Jane Smith' }],
+      comments: 'Forms and tables need to be updated.',
+      attachments: 7,
+      commentsCount: 2,
+      image: '',
+    },
+    {
+      id: 6,
+      title: 'Completed charts & maps',
+      dueDate: '',
+      labels: ['Charts & Maps'],
+      members: [{ img: avatar1, name: 'John Doe' }],
+      comments: 'Charts and maps need to be updated.',
+      attachments: 1,
+      commentsCount: 10,
+      image: '',
+    },
+  ],
+}

resources/js/plugins/fake-api/handlers/apps/kanban/index.js

@@ -0,0 +1,148 @@
+import { HttpResponse, http } from 'msw'
+import { database } from '@db/apps/kanban/db'
+
+export const handlerAppsKanban = [
+  // 👉 get all kanban data
+  http.get('/api/apps/kanban', () => {
+    return HttpResponse.json(database, { status: 200 })
+  }),
+
+  // 👉 rename board
+  http.put('/api/apps/kanban/board/rename', async ({ request }) => {
+    const boardData = await request.json()
+
+    database.boards = database.boards.map(board => {
+      if (board.id === boardData.boardId)
+        board.title = boardData.newName
+      
+      return board
+    })
+    
+    return new HttpResponse(null, { status: 201 })
+  }),
+
+  // 👉 delete board
+  http.delete('/api/apps/kanban/board/:id', async ({ params }) => {
+    const boardId = Number(params.id)
+
+    database.boards = database.boards.filter(board => board.id !== boardId)
+    
+    return new HttpResponse(null, { status: 204 })
+  }),
+
+  // 👉 add new board
+  http.post('/api/apps/kanban/board/add', async ({ request }) => {
+    const boardName = await request.json()
+
+    const getNewBoardId = () => {
+      const newBoardId = database.boards.length + 1
+      if (!(database.boards.some(board => board.id === newBoardId)))
+        return newBoardId
+      else
+        return newBoardId + 1
+    }
+
+    if (database.boards.some(board => board.title === boardName.title)) {
+      return HttpResponse.error()
+    }
+    else {
+      database.boards.push({
+        id: getNewBoardId(),
+        title: boardName.title,
+        itemsIds: [],
+      })
+      
+      return new HttpResponse(null, { status: 201 })
+    }
+  }),
+
+  // 👉 add new item
+  http.post('/api/apps/kanban/item/add', async ({ request }) => {
+    const newItem = await request.json()
+    const itemId = database.items[database.items.length - 1].id + 1
+    if (newItem.itemTitle && newItem.boardName) {
+      // Add the new item to the items list
+      database.items.push({
+        id: itemId,
+        title: newItem.itemTitle,
+        attachments: 0,
+        comments: '',
+        commentsCount: 0,
+        dueDate: '',
+        labels: [],
+        members: [],
+      })
+
+
+      // find the index of board in the database
+      const boardId = database.boards.findIndex(board => board.id === newItem.boardId)
+
+
+      // Add the new item to the board
+      database.boards[boardId].itemsIds.push(itemId)
+    }
+    else {
+      return HttpResponse.error()
+    }
+    
+    return new HttpResponse(null, { status: 201 })
+  }),
+
+  // 👉 update item
+  http.put('/api/apps/kanban/item/update', async ({ request }) => {
+    const itemData = await request.json()
+
+    database.items.forEach(item => {
+      if (itemData.item && item.id === itemData.item.id) {
+        item.title = itemData.item.title
+        item.attachments = itemData.item.attachments
+        item.comments = itemData.item.comments
+        item.commentsCount = itemData.item.commentsCount
+        item.dueDate = itemData.item.dueDate
+        item.labels = itemData.item.labels
+        item.members = itemData.item.members
+      }
+    })
+    
+    return new HttpResponse(null, { status: 201 })
+  }),
+
+  // 👉 delete item
+  http.delete('/api/apps/kanban/item/:id', async ({ params }) => {
+    const itemId = Number(params.id)
+
+    database.items = database.items.filter(item => item.id !== itemId)
+    database.boards.forEach(board => {
+      board.itemsIds = board.itemsIds.filter(id => id !== itemId)
+    })
+    
+    return new HttpResponse(null, { status: 204 })
+  }),
+
+  // 👉 update item state
+  http.put('/api/apps/kanban/item/state-update', async ({ request }) => {
+    const stateData = await request.json()
+
+    database.boards.forEach(board => {
+      if (board.id === stateData.boardId)
+        board.itemsIds = stateData.ids
+    })
+    
+    return new HttpResponse(null, { status: 201 })
+  }),
+
+  // 👉 update board state
+  http.put('/api/apps/kanban/board/state-update', async ({ request }) => {
+    const boardState = await request.json()
+
+
+    // sort board as per boardState
+    const sortedBoards = boardState.map(boardId => {
+      return database.boards.find(board => board.id === boardId)
+    })
+
+    database.boards = sortedBoards
+    
+    return new HttpResponse(null, { status: 201 })
+  }),
+]

resources/js/plugins/fake-api/handlers/apps/kanban/types.js

@@ -0,0 +1 @@
+export {}

resources/js/plugins/fake-api/handlers/apps/logistics/db.js

@@ -0,0 +1,254 @@
+export const db = {
+  vehicles: [
+    {
+      id: 1,
+      location: 468031,
+      startCity: 'Cagnes-sur-Mer',
+      startCountry: 'France',
+      endCity: 'Catania',
+      endCountry: 'Italy',
+      warnings: 'No Warnings',
+      progress: 49,
+    },
+    {
+      id: 2,
+      location: 302781,
+      startCity: 'Köln',
+      startCountry: 'Germany',
+      endCity: 'Laspezia',
+      endCountry: 'Italy',
+      warnings: 'Ecu Not Responding',
+      progress: 24,
+    },
+    {
+      id: 3,
+      location: 715822,
+      startCity: 'Chambray-lès-Tours',
+      startCountry: 'France',
+      endCity: 'Hamm',
+      endCountry: 'Germany',
+      warnings: 'Oil Leakage',
+      progress: 7,
+    },
+    {
+      id: 4,
+      location: 451430,
+      startCity: 'Berlin',
+      startCountry: 'Germany',
+      endCity: 'Gelsenkirchen',
+      endCountry: 'Germany',
+      warnings: 'No Warnings',
+      progress: 95,
+    },
+    {
+      id: 5,
+      location: 921577,
+      startCity: 'Cergy-Pontoise',
+      startCountry: 'France',
+      endCity: 'Berlin',
+      endCountry: 'Germany',
+      warnings: 'No Warnings',
+      progress: 65,
+    },
+    {
+      id: 6,
+      location: 480957,
+      startCity: 'Villefranche-sur-Saône',
+      startCountry: 'France',
+      endCity: 'Halle',
+      endCountry: 'Germany',
+      warnings: 'Ecu Not Responding',
+      progress: 55,
+    },
+    {
+      id: 7,
+      location: 330178,
+      startCity: 'Mâcon',
+      startCountry: 'France',
+      endCity: 'Bochum',
+      endCountry: 'Germany',
+      warnings: 'Fuel Problems',
+      progress: 74,
+    },
+    {
+      id: 8,
+      location: 595525,
+      startCity: 'Fullerton',
+      startCountry: 'USA',
+      endCity: 'Lübeck',
+      endCountry: 'Germany',
+      warnings: 'No Warnings',
+      progress: 100,
+    },
+    {
+      id: 9,
+      location: 182964,
+      startCity: 'Saintes',
+      startCountry: 'France',
+      endCity: 'Roma',
+      endCountry: 'Italy',
+      warnings: 'Oil Leakage',
+      progress: 82,
+    },
+    {
+      id: 10,
+      location: 706085,
+      startCity: 'Fort Wayne',
+      startCountry: 'USA',
+      endCity: 'Mülheim an der Ruhr',
+      endCountry: 'Germany',
+      warnings: 'Oil Leakage',
+      progress: 49,
+    },
+    {
+      id: 11,
+      location: 523708,
+      startCity: 'Albany',
+      startCountry: 'USA',
+      endCity: 'Wuppertal',
+      endCountry: 'Germany',
+      warnings: 'Temperature not optimal',
+      progress: 66,
+    },
+    {
+      id: 12,
+      location: 676485,
+      startCity: 'Toledo',
+      startCountry: 'USA',
+      endCity: 'Magdeburg',
+      endCountry: 'Germany',
+      warnings: 'Temperature not optimal',
+      progress: 7,
+    },
+    {
+      id: 13,
+      location: 514437,
+      startCity: 'Houston',
+      startCountry: 'USA',
+      endCity: 'Wiesbaden',
+      endCountry: 'Germany',
+      warnings: 'Fuel Problems',
+      progress: 27,
+    },
+    {
+      id: 14,
+      location: 300198,
+      startCity: 'West Palm Beach',
+      startCountry: 'USA',
+      endCity: 'Dresden',
+      endCountry: 'Germany',
+      warnings: 'Temperature not optimal',
+      progress: 90,
+    },
+    {
+      id: 15,
+      location: 960090,
+      startCity: 'Fort Lauderdale',
+      startCountry: 'USA',
+      endCity: 'Kiel',
+      endCountry: 'Germany',
+      warnings: 'No Warnings',
+      progress: 81,
+    },
+    {
+      id: 16,
+      location: 878423,
+      startCity: 'Schaumburg',
+      startCountry: 'USA',
+      endCity: 'Berlin',
+      endCountry: 'Germany',
+      warnings: 'Fuel Problems',
+      progress: 21,
+    },
+    {
+      id: 17,
+      location: 318119,
+      startCity: 'Mundolsheim',
+      startCountry: 'France',
+      endCity: 'München',
+      endCountry: 'Germany',
+      warnings: 'No Warnings',
+      progress: 26,
+    },
+    {
+      id: 18,
+      location: 742500,
+      startCity: 'Fargo',
+      startCountry: 'USA',
+      endCity: 'Salerno',
+      endCountry: 'Italy',
+      warnings: 'Temperature not optimal',
+      progress: 80,
+    },
+    {
+      id: 19,
+      location: 469399,
+      startCity: 'München',
+      startCountry: 'Germany',
+      endCity: 'Ath',
+      endCountry: 'Belgium',
+      warnings: 'Ecu Not Responding',
+      progress: 50,
+    },
+    {
+      id: 20,
+      location: 411175,
+      startCity: 'Chicago',
+      startCountry: 'USA',
+      endCity: 'Neuss',
+      endCountry: 'Germany',
+      warnings: 'Oil Leakage',
+      progress: 44,
+    },
+    {
+      id: 21,
+      location: 753525,
+      startCity: 'Limoges',
+      startCountry: 'France',
+      endCity: 'Messina',
+      endCountry: 'Italy',
+      warnings: 'Temperature not optimal',
+      progress: 55,
+    },
+    {
+      id: 22,
+      location: 882341,
+      startCity: 'Cesson-Sévigné',
+      startCountry: 'France',
+      endCity: 'Napoli',
+      endCountry: 'Italy',
+      warnings: 'No Warnings',
+      progress: 48,
+    },
+    {
+      id: 23,
+      location: 408270,
+      startCity: 'Leipzig',
+      startCountry: 'Germany',
+      endCity: 'Tournai',
+      endCountry: 'Belgium',
+      warnings: 'Ecu Not Responding',
+      progress: 73,
+    },
+    {
+      id: 24,
+      location: 276904,
+      startCity: 'Aulnay-sous-Bois',
+      startCountry: 'France',
+      endCity: 'Torino',
+      endCountry: 'Italy',
+      warnings: 'Fuel Problems',
+      progress: 30,
+    },
+    {
+      id: 25,
+      location: 159145,
+      startCity: 'Paris 19',
+      startCountry: 'France',
+      endCity: 'Dresden',
+      endCountry: 'Germany',
+      warnings: 'No Warnings',
+      progress: 60,
+    },
+  ],
+}

resources/js/plugins/fake-api/handlers/apps/logistics/index.js

@@ -0,0 +1,73 @@
+import is from '@sindresorhus/is'
+import { destr } from 'destr'
+import { HttpResponse, http } from 'msw'
+import { db } from '@db/apps/logistics/db'
+import { paginateArray } from '@api-utils/paginateArray'
+
+export const handlerAppLogistics = [
+  http.get(('/api/apps/logistics/vehicles'), ({ request }) => {
+    const url = new URL(request.url)
+    const sortBy = url.searchParams.get('sortBy')
+    const page = url.searchParams.get('page') ?? 1
+    const itemsPerPage = url.searchParams.get('itemsPerPage') ?? 10
+    const orderBy = url.searchParams.get('orderBy')
+    const parsedSortBy = destr(sortBy)
+    const sortByLocal = is.string(parsedSortBy) ? parsedSortBy : ''
+    const parsedOrderBy = destr(orderBy)
+    const orderByLocal = is.string(parsedOrderBy) ? parsedOrderBy : ''
+    const parsedItemsPerPage = destr(itemsPerPage)
+    const parsedPage = destr(page)
+    const itemsPerPageLocal = is.number(parsedItemsPerPage) ? parsedItemsPerPage : 10
+    const pageLocal = is.number(parsedPage) ? parsedPage : 1
+
+    // Sorting Vehicles
+    let vehicles = [...db.vehicles]
+    if (sortBy) {
+      if (sortByLocal === 'location') {
+        vehicles = vehicles.sort((a, b) => {
+          if (orderByLocal === 'asc')
+            return a.location - b.location
+          
+          return b.location - a.location
+        })
+      }
+      if (sortByLocal === 'startRoute') {
+        vehicles = vehicles.sort((a, b) => {
+          if (orderByLocal === 'asc')
+            return a.startCity.localeCompare(b.startCity)
+          
+          return b.startCity.localeCompare(a.startCity)
+        })
+      }
+      if (sortByLocal === 'endRoute') {
+        vehicles = vehicles.sort((a, b) => {
+          if (orderByLocal === 'asc')
+            return a.endCity.localeCompare(b.endCity)
+          
+          return b.endCity.localeCompare(a.endCity)
+        })
+      }
+      if (sortByLocal === 'warnings') {
+        vehicles = vehicles.sort((a, b) => {
+          if (orderByLocal === 'asc')
+            return a.warnings.localeCompare(b.warnings)
+          
+          return b.warnings.localeCompare(a.warnings)
+        })
+      }
+      if (sortByLocal === 'progress') {
+        vehicles = vehicles.sort((a, b) => {
+          if (orderByLocal === 'asc')
+            return a.progress - b.progress
+          
+          return b.progress - a.progress
+        })
+      }
+    }
+    
+    return HttpResponse.json({
+      vehicles: paginateArray(vehicles, itemsPerPageLocal, pageLocal),
+      totalVehicles: vehicles.length,
+    }, { status: 200 })
+  }),
+]

resources/js/plugins/fake-api/handlers/apps/logistics/types.js

@@ -0,0 +1 @@
+export {}

resources/js/plugins/fake-api/handlers/apps/permission/db.js

@@ -0,0 +1,58 @@
+export const db = {
+  permissions: [
+    {
+      id: 1,
+      name: 'Management',
+      assignedTo: ['administrator'],
+      createdDate: '14 Apr 2021, 8:43 PM',
+    },
+    {
+      id: 2,
+      assignedTo: ['administrator'],
+      name: 'Manage Billing & Roles',
+      createdDate: '16 Sep 2021, 5:20 PM',
+    },
+    {
+      id: 3,
+      name: 'Add & Remove Users',
+      createdDate: '14 Oct 2021, 10:20 AM',
+      assignedTo: ['administrator', 'manager'],
+    },
+    {
+      id: 4,
+      name: 'Project Planning',
+      createdDate: '14 Oct 2021, 10:20 AM',
+      assignedTo: ['administrator', 'users', 'support'],
+    },
+    {
+      id: 5,
+      name: 'Manage Email Sequences',
+      createdDate: '23 Aug 2021, 2:00 PM',
+      assignedTo: ['administrator', 'users', 'support'],
+    },
+    {
+      id: 6,
+      name: 'Client Communication',
+      createdDate: '15 Apr 2021, 11:30 AM',
+      assignedTo: ['administrator', 'manager'],
+    },
+    {
+      id: 7,
+      name: 'Only View',
+      createdDate: '04 Dec 2021, 8:15 PM',
+      assignedTo: ['administrator', 'restricted-user'],
+    },
+    {
+      id: 8,
+      name: 'Financial Management',
+      createdDate: '25 Feb 2021, 10:30 AM',
+      assignedTo: ['administrator', 'manager'],
+    },
+    {
+      id: 9,
+      name: 'Manage Others\' Tasks',
+      createdDate: '04 Nov 2021, 11:45 AM',
+      assignedTo: ['administrator', 'support'],
+    },
+  ],
+}

resources/js/plugins/fake-api/handlers/apps/permission/index.js

@@ -0,0 +1,48 @@
+import is from '@sindresorhus/is'
+import { destr } from 'destr'
+import { HttpResponse, http } from 'msw'
+import { db } from '@db/apps/permission/db'
+import { paginateArray } from '@api-utils/paginateArray'
+
+export const handlerAppsPermission = [
+  // 👉 Get Permission List
+  http.get(('/api/apps/permissions'), ({ request }) => {
+    const url = new URL(request.url)
+    const q = url.searchParams.get('q') || ''
+    const sortBy = url.searchParams.get('sortBy')
+    const page = url.searchParams.get('page') || 1
+    const itemsPerPage = url.searchParams.get('itemsPerPage') || 10
+    const orderBy = url.searchParams.get('orderBy')
+    const parsedSortBy = destr(sortBy)
+    const sortByLocal = is.string(parsedSortBy) ? parsedSortBy : ''
+    const parsedOrderBy = destr(orderBy)
+    const orderByLocal = is.string(parsedOrderBy) ? parsedOrderBy : ''
+    const parsedItemsPerPage = destr(itemsPerPage)
+    const parsedPage = destr(page)
+    const itemsPerPageLocal = is.number(parsedItemsPerPage) ? parsedItemsPerPage : 10
+    const pageLocal = is.number(parsedPage) ? parsedPage : 1
+    const searchQuery = is.string(q) ? q : undefined
+    const queryLower = (searchQuery ?? '').toString().toLowerCase()
+    let filteredPermissions = db.permissions.filter(permissions => permissions.name.toLowerCase().includes(queryLower)
+            || permissions.createdDate.toLowerCase().includes(queryLower)
+            || permissions.assignedTo.some(i => i.toLowerCase().startsWith(queryLower)))
+
+    // Sorting Permissions
+    if (sortByLocal && sortByLocal === 'name') {
+      filteredPermissions = filteredPermissions.sort((a, b) => {
+        if (orderByLocal === 'asc')
+          return a.name.localeCompare(b.name)
+        
+        return b.name.localeCompare(a.name)
+      })
+    }
+
+    // return response with paginated data
+    return HttpResponse.json({
+      permissions: paginateArray(filteredPermissions, itemsPerPageLocal, pageLocal),
+      totalPermissions: filteredPermissions.length,
+    }, {
+      status: 200,
+    })
+  }),
+]

resources/js/plugins/fake-api/handlers/apps/permission/types.js

@@ -0,0 +1 @@
+export {}

resources/js/plugins/fake-api/handlers/apps/users/db.js

@@ -0,0 +1,711 @@
+import avatar1 from '@images/avatars/avatar-1.png'
+import avatar2 from '@images/avatars/avatar-2.png'
+import avatar3 from '@images/avatars/avatar-3.png'
+import avatar4 from '@images/avatars/avatar-4.png'
+import avatar5 from '@images/avatars/avatar-5.png'
+import avatar6 from '@images/avatars/avatar-6.png'
+
+export const db = {
+  users: [
+    {
+      id: 1,
+      fullName: 'Galasasen Slixby',
+      company: 'Yotz PVT LTD',
+      role: 'editor',
+      username: 'gslixby0',
+      country: 'El Salvador',
+      contact: '(479) 232-9151',
+      email: 'gslixby0@abc.net.au',
+      currentPlan: 'enterprise',
+      status: 'inactive',
+      avatar: avatar1,
+      billing: 'Manual-Credit Card',
+    },
+    {
+      id: 2,
+      fullName: 'Halsey Redmore',
+      company: 'Skinder PVT LTD',
+      role: 'author',
+      username: 'hredmore1',
+      country: 'Albania',
+      contact: '(472) 607-9137',
+      email: 'hredmore1@imgur.com',
+      currentPlan: 'team',
+      status: 'pending',
+      avatar: avatar2,
+      billing: 'Auto debit',
+    },
+    {
+      id: 3,
+      fullName: 'Marjory Sicely',
+      company: 'Oozz PVT LTD',
+      role: 'maintainer',
+      username: 'msicely2',
+      country: 'Russia',
+      contact: '(321) 264-4599',
+      email: 'msicely2@who.int',
+      currentPlan: 'enterprise',
+      status: 'active',
+      avatar: avatar3,
+      billing: 'Manual-Credit Card',
+    },
+    {
+      id: 4,
+      fullName: 'Cyrill Risby',
+      company: 'Oozz PVT LTD',
+      role: 'maintainer',
+      username: 'crisby3',
+      country: 'China',
+      contact: '(923) 690-6806',
+      email: 'crisby3@wordpress.com',
+      currentPlan: 'team',
+      status: 'inactive',
+      avatar: '',
+      billing: 'Auto debit',
+    },
+    {
+      id: 5,
+      fullName: 'Maggy Hurran',
+      company: 'Aimbo PVT LTD',
+      role: 'subscriber',
+      username: 'mhurran4',
+      country: 'Pakistan',
+      contact: '(669) 914-1078',
+      email: 'mhurran4@yahoo.co.jp',
+      currentPlan: 'enterprise',
+      status: 'pending',
+      avatar: avatar5,
+      billing: 'Manual-Cash',
+    },
+    {
+      id: 6,
+      fullName: 'Silvain Halstead',
+      company: 'Jaxbean PVT LTD',
+      role: 'author',
+      username: 'shalstead5',
+      country: 'China',
+      contact: '(958) 973-3093',
+      email: 'shalstead5@shinystat.com',
+      currentPlan: 'company',
+      status: 'active',
+      avatar: '',
+      billing: 'Manual-Credit Card',
+    },
+    {
+      id: 7,
+      fullName: 'Breena Gallemore',
+      company: 'Jazzy PVT LTD',
+      role: 'subscriber',
+      username: 'bgallemore6',
+      country: 'Canada',
+      contact: '(825) 977-8152',
+      email: 'bgallemore6@boston.com',
+      currentPlan: 'company',
+      status: 'pending',
+      avatar: avatar1,
+      billing: 'Manual-PayPal',
+    },
+    {
+      id: 8,
+      fullName: 'Kathryne Liger',
+      company: 'Pixoboo PVT LTD',
+      role: 'author',
+      username: 'kliger7',
+      country: 'France',
+      contact: '(187) 440-0934',
+      email: 'kliger7@vinaora.com',
+      currentPlan: 'enterprise',
+      status: 'pending',
+      avatar: '',
+      billing: 'Auto debit',
+    },
+    {
+      id: 9,
+      fullName: 'Franz Scotfurth',
+      company: 'Tekfly PVT LTD',
+      role: 'subscriber',
+      username: 'fscotfurth8',
+      country: 'China',
+      contact: '(978) 146-5443',
+      email: 'fscotfurth8@dailymotion.com',
+      currentPlan: 'team',
+      status: 'pending',
+      avatar: avatar1,
+      billing: 'Manual-Credit Card',
+    },
+    {
+      id: 10,
+      fullName: 'Jillene Bellany',
+      company: 'Gigashots PVT LTD',
+      role: 'maintainer',
+      username: 'jbellany9',
+      country: 'Jamaica',
+      contact: '(589) 284-6732',
+      email: 'jbellany9@kickstarter.com',
+      currentPlan: 'company',
+      status: 'inactive',
+      avatar: avatar3,
+      billing: 'Manual-Credit Card',
+    },
+    {
+      id: 11,
+      fullName: 'Jonah Wharlton',
+      company: 'Eare PVT LTD',
+      role: 'subscriber',
+      username: 'jwharltona',
+      country: 'United States',
+      contact: '(176) 532-6824',
+      email: 'jwharltona@oakley.com',
+      currentPlan: 'team',
+      status: 'inactive',
+      avatar: '',
+      billing: 'Manual-Cash',
+    },
+    {
+      id: 12,
+      fullName: 'Seth Hallam',
+      company: 'Yakitri PVT LTD',
+      role: 'subscriber',
+      username: 'shallamb',
+      country: 'Peru',
+      contact: '(234) 464-0600',
+      email: 'shallamb@hugedomains.com',
+      currentPlan: 'team',
+      status: 'pending',
+      avatar: avatar3,
+      billing: 'Manual-PayPal',
+    },
+    {
+      id: 13,
+      fullName: 'Yoko Pottie',
+      company: 'Leenti PVT LTD',
+      role: 'subscriber',
+      username: 'ypottiec',
+      country: 'Philippines',
+      contact: '(907) 284-5083',
+      email: 'ypottiec@privacy.gov.au',
+      currentPlan: 'basic',
+      status: 'inactive',
+      avatar: avatar6,
+      billing: 'Manual-PayPal',
+    },
+    {
+      id: 14,
+      fullName: 'Maximilianus Krause',
+      company: 'Digitube PVT LTD',
+      role: 'author',
+      username: 'mkraused',
+      country: 'Democratic Republic of the Congo',
+      contact: '(167) 135-7392',
+      email: 'mkraused@stanford.edu',
+      currentPlan: 'team',
+      status: 'active',
+      avatar: '',
+      billing: 'Manual-PayPal',
+    },
+    {
+      id: 15,
+      fullName: 'Zsazsa McCleverty',
+      company: 'Kaymbo PVT LTD',
+      role: 'maintainer',
+      username: 'zmcclevertye',
+      country: 'France',
+      contact: '(317) 409-6565',
+      email: 'zmcclevertye@soundcloud.com',
+      currentPlan: 'enterprise',
+      status: 'active',
+      avatar: avatar3,
+      billing: 'Manual-PayPal',
+    },
+    {
+      id: 16,
+      fullName: 'Bentlee Emblin',
+      company: 'Yambee PVT LTD',
+      role: 'author',
+      username: 'bemblinf',
+      country: 'Spain',
+      contact: '(590) 606-1056',
+      email: 'bemblinf@wired.com',
+      currentPlan: 'company',
+      status: 'active',
+      avatar: avatar4,
+      billing: 'Manual-PayPal',
+    },
+    {
+      id: 17,
+      fullName: 'Brockie Myles',
+      company: 'Wikivu PVT LTD',
+      role: 'maintainer',
+      username: 'bmylesg',
+      country: 'Poland',
+      contact: '(553) 225-9905',
+      email: 'bmylesg@amazon.com',
+      currentPlan: 'basic',
+      status: 'active',
+      avatar: avatar1,
+      billing: 'Manual-Credit Card',
+    },
+    {
+      id: 18,
+      fullName: 'Bertha Biner',
+      company: 'Twinte PVT LTD',
+      role: 'editor',
+      username: 'bbinerh',
+      country: 'Yemen',
+      contact: '(901) 916-9287',
+      email: 'bbinerh@mozilla.com',
+      currentPlan: 'team',
+      status: 'active',
+      avatar: avatar3,
+      billing: 'Manual-Credit Card',
+    },
+    {
+      id: 19,
+      fullName: 'Travus Bruntjen',
+      company: 'Cogidoo PVT LTD',
+      role: 'admin',
+      username: 'tbruntjeni',
+      country: 'France',
+      contact: '(524) 586-6057',
+      email: 'tbruntjeni@sitemeter.com',
+      currentPlan: 'enterprise',
+      status: 'active',
+      avatar: '',
+      billing: 'Manual-Cash',
+    },
+    {
+      id: 20,
+      fullName: 'Wesley Burland',
+      company: 'Bubblemix PVT LTD',
+      role: 'editor',
+      username: 'wburlandj',
+      country: 'Honduras',
+      contact: '(569) 683-1292',
+      email: 'wburlandj@uiuc.edu',
+      currentPlan: 'team',
+      status: 'inactive',
+      avatar: avatar5,
+      billing: 'Manual-Cash',
+    },
+    {
+      id: 21,
+      fullName: 'Selina Kyle',
+      company: 'Wayne Enterprises',
+      role: 'admin',
+      username: 'catwomen1940',
+      country: 'USA',
+      contact: '(829) 537-0057',
+      email: 'irena.dubrovna@wayne.com',
+      currentPlan: 'team',
+      status: 'active',
+      avatar: avatar1,
+      billing: 'Manual-Cash',
+    },
+    {
+      id: 22,
+      fullName: 'Jameson Lyster',
+      company: 'Quaxo PVT LTD',
+      role: 'editor',
+      username: 'jlysterl',
+      country: 'Ukraine',
+      contact: '(593) 624-0222',
+      email: 'jlysterl@guardian.co.uk',
+      currentPlan: 'company',
+      status: 'inactive',
+      avatar: avatar6,
+      billing: 'Manual-Cash',
+    },
+    {
+      id: 23,
+      fullName: 'Kare Skitterel',
+      company: 'Ainyx PVT LTD',
+      role: 'maintainer',
+      username: 'kskitterelm',
+      country: 'Poland',
+      contact: '(254) 845-4107',
+      email: 'kskitterelm@ainyx.com',
+      currentPlan: 'basic',
+      status: 'pending',
+      avatar: avatar2,
+      billing: 'Manual-Credit Card',
+    },
+    {
+      id: 24,
+      fullName: 'Cleavland Hatherleigh',
+      company: 'Flipopia PVT LTD',
+      role: 'admin',
+      username: 'chatherleighn',
+      country: 'Brazil',
+      contact: '(700) 783-7498',
+      email: 'chatherleighn@washington.edu',
+      currentPlan: 'team',
+      status: 'pending',
+      avatar: '',
+      billing: 'Manual-Credit Card',
+    },
+    {
+      id: 25,
+      fullName: 'Adeline Micco',
+      company: 'Topicware PVT LTD',
+      role: 'admin',
+      username: 'amiccoo',
+      country: 'France',
+      contact: '(227) 598-1841',
+      email: 'amiccoo@whitehouse.gov',
+      currentPlan: 'enterprise',
+      status: 'pending',
+      avatar: '',
+      billing: 'Auto Debit',
+    },
+    {
+      id: 26,
+      fullName: 'Hugh Hasson',
+      company: 'Skinix PVT LTD',
+      role: 'admin',
+      username: 'hhassonp',
+      country: 'China',
+      contact: '(582) 516-1324',
+      email: 'hhassonp@bizjournals.com',
+      currentPlan: 'basic',
+      status: 'inactive',
+      avatar: avatar6,
+      billing: 'Auto Debit',
+    },
+    {
+      id: 27,
+      fullName: 'Germain Jacombs',
+      company: 'Youopia PVT LTD',
+      role: 'editor',
+      username: 'gjacombsq',
+      country: 'Zambia',
+      contact: '(137) 467-5393',
+      email: 'gjacombsq@jigsy.com',
+      currentPlan: 'enterprise',
+      status: 'active',
+      avatar: '',
+      billing: 'Auto Debit',
+    },
+    {
+      id: 28,
+      fullName: 'Bree Kilday',
+      company: 'Jetpulse PVT LTD',
+      role: 'maintainer',
+      username: 'bkildayr',
+      country: 'Portugal',
+      contact: '(412) 476-0854',
+      email: 'bkildayr@mashable.com',
+      currentPlan: 'team',
+      status: 'active',
+      avatar: '',
+      billing: 'Auto Debit',
+    },
+    {
+      id: 29,
+      fullName: 'Candice Pinyon',
+      company: 'Kare PVT LTD',
+      role: 'maintainer',
+      username: 'cpinyons',
+      country: 'Sweden',
+      contact: '(170) 683-1520',
+      email: 'cpinyons@behance.net',
+      currentPlan: 'team',
+      status: 'active',
+      avatar: avatar1,
+      billing: 'Manual-Cash',
+    },
+    {
+      id: 30,
+      fullName: 'Isabel Mallindine',
+      company: 'Voomm PVT LTD',
+      role: 'subscriber',
+      username: 'imallindinet',
+      country: 'Slovenia',
+      contact: '(332) 803-1983',
+      email: 'imallindinet@shinystat.com',
+      currentPlan: 'team',
+      status: 'pending',
+      avatar: avatar5,
+      billing: 'Manual-Cash',
+    },
+    {
+      id: 31,
+      fullName: 'Gwendolyn Meineken',
+      company: 'Oyondu PVT LTD',
+      role: 'admin',
+      username: 'gmeinekenu',
+      country: 'Moldova',
+      contact: '(551) 379-7460',
+      email: 'gmeinekenu@hc360.com',
+      currentPlan: 'basic',
+      status: 'pending',
+      avatar: avatar2,
+      billing: 'Manual-Cash',
+    },
+    {
+      id: 32,
+      fullName: 'Rafaellle Snowball',
+      company: 'Fivespan PVT LTD',
+      role: 'editor',
+      username: 'rsnowballv',
+      country: 'Philippines',
+      contact: '(974) 829-0911',
+      email: 'rsnowballv@indiegogo.com',
+      currentPlan: 'basic',
+      status: 'pending',
+      avatar: avatar6,
+      billing: 'Manual-Cash',
+    },
+    {
+      id: 33,
+      fullName: 'Rochette Emer',
+      company: 'Thoughtworks PVT LTD',
+      role: 'admin',
+      username: 'remerw',
+      country: 'North Korea',
+      contact: '(841) 889-3339',
+      email: 'remerw@blogtalkradio.com',
+      currentPlan: 'basic',
+      status: 'active',
+      avatar: '',
+      billing: 'Manual-Cash',
+    },
+    {
+      id: 34,
+      fullName: 'Ophelie Fibbens',
+      company: 'Jaxbean PVT LTD',
+      role: 'subscriber',
+      username: 'ofibbensx',
+      country: 'Indonesia',
+      contact: '(764) 885-7351',
+      email: 'ofibbensx@booking.com',
+      currentPlan: 'company',
+      status: 'active',
+      avatar: avatar3,
+      billing: 'Manual-Cash',
+    },
+    {
+      id: 35,
+      fullName: 'Stephen MacGilfoyle',
+      company: 'Browseblab PVT LTD',
+      role: 'maintainer',
+      username: 'smacgilfoyley',
+      country: 'Japan',
+      contact: '(350) 589-8520',
+      email: 'smacgilfoyley@bigcartel.com',
+      currentPlan: 'company',
+      status: 'pending',
+      avatar: avatar2,
+      billing: 'Manual-Cash',
+    },
+    {
+      id: 36,
+      fullName: 'Bradan Rosebotham',
+      company: 'Agivu PVT LTD',
+      role: 'subscriber',
+      username: 'brosebothamz',
+      country: 'Belarus',
+      contact: '(882) 933-2180',
+      email: 'brosebothamz@tripadvisor.com',
+      currentPlan: 'team',
+      status: 'inactive',
+      avatar: '',
+      billing: 'Manual-Credit Card',
+    },
+    {
+      id: 37,
+      fullName: 'Skip Hebblethwaite',
+      company: 'Katz PVT LTD',
+      role: 'admin',
+      username: 'shebblethwaite10',
+      country: 'Canada',
+      contact: '(610) 343-1024',
+      email: 'shebblethwaite10@arizona.edu',
+      currentPlan: 'company',
+      status: 'inactive',
+      avatar: avatar1,
+      billing: 'Manual-Credit Card',
+    },
+    {
+      id: 38,
+      fullName: 'Moritz Piccard',
+      company: 'Twitternation PVT LTD',
+      role: 'maintainer',
+      username: 'mpiccard11',
+      country: 'Croatia',
+      contact: '(365) 277-2986',
+      email: 'mpiccard11@vimeo.com',
+      currentPlan: 'enterprise',
+      status: 'inactive',
+      avatar: avatar2,
+      billing: 'Manual-Credit Card',
+    },
+    {
+      id: 39,
+      fullName: 'Tyne Widmore',
+      company: 'Yombu PVT LTD',
+      role: 'subscriber',
+      username: 'twidmore12',
+      country: 'Finland',
+      contact: '(531) 731-0928',
+      email: 'twidmore12@bravesites.com',
+      currentPlan: 'team',
+      status: 'pending',
+      avatar: '',
+      billing: 'Auto Debit',
+    },
+    {
+      id: 40,
+      fullName: 'Florenza Desporte',
+      company: 'Kamba PVT LTD',
+      role: 'author',
+      username: 'fdesporte13',
+      country: 'Ukraine',
+      contact: '(312) 104-2638',
+      email: 'fdesporte13@omniture.com',
+      currentPlan: 'company',
+      status: 'active',
+      avatar: avatar1,
+      billing: 'Auto Debit',
+    },
+    {
+      id: 41,
+      fullName: 'Edwina Baldetti',
+      company: 'Dazzlesphere PVT LTD',
+      role: 'maintainer',
+      username: 'ebaldetti14',
+      country: 'Haiti',
+      contact: '(315) 329-3578',
+      email: 'ebaldetti14@theguardian.com',
+      currentPlan: 'team',
+      status: 'pending',
+      avatar: avatar5,
+      billing: 'Auto Debit',
+    },
+    {
+      id: 42,
+      fullName: 'Benedetto Rossiter',
+      company: 'Mybuzz PVT LTD',
+      role: 'editor',
+      username: 'brossiter15',
+      country: 'Indonesia',
+      contact: '(323) 175-6741',
+      email: 'brossiter15@craigslist.org',
+      currentPlan: 'team',
+      status: 'inactive',
+      avatar: avatar1,
+      billing: 'Auto Debit',
+    },
+    {
+      id: 43,
+      fullName: 'Micaela McNirlan',
+      company: 'Tambee PVT LTD',
+      role: 'admin',
+      username: 'mmcnirlan16',
+      country: 'Indonesia',
+      contact: '(242) 952-0916',
+      email: 'mmcnirlan16@hc360.com',
+      currentPlan: 'basic',
+      status: 'inactive',
+      avatar: avatar2,
+      billing: 'Auto Debit',
+    },
+    {
+      id: 44,
+      fullName: 'Vladamir Koschek',
+      company: 'Centimia PVT LTD',
+      role: 'author',
+      username: 'vkoschek17',
+      country: 'Guatemala',
+      contact: '(531) 758-8335',
+      email: 'vkoschek17@abc.net.au',
+      currentPlan: 'team',
+      status: 'active',
+      avatar: avatar1,
+      billing: 'Manual-Credit Card',
+    },
+    {
+      id: 45,
+      fullName: 'Corrie Perot',
+      company: 'Flipopia PVT LTD',
+      role: 'subscriber',
+      username: 'cperot18',
+      country: 'China',
+      contact: '(659) 385-6808',
+      email: 'cperot18@goo.ne.jp',
+      currentPlan: 'team',
+      status: 'pending',
+      avatar: avatar5,
+      billing: 'Manual-Credit Card',
+    },
+    {
+      id: 46,
+      fullName: 'Saunder Offner',
+      company: 'Skalith PVT LTD',
+      role: 'maintainer',
+      username: 'soffner19',
+      country: 'Poland',
+      contact: '(200) 586-2264',
+      email: 'soffner19@mac.com',
+      currentPlan: 'enterprise',
+      status: 'pending',
+      avatar: avatar4,
+      billing: 'Manual-Credit Card',
+    },
+    {
+      id: 47,
+      fullName: 'Karena Courtliff',
+      company: 'Feedfire PVT LTD',
+      role: 'admin',
+      username: 'kcourtliff1a',
+      country: 'China',
+      contact: '(478) 199-0020',
+      email: 'kcourtliff1a@bbc.co.uk',
+      currentPlan: 'basic',
+      status: 'active',
+      avatar: avatar6,
+      billing: 'Manual-Credit Card',
+    },
+    {
+      id: 48,
+      fullName: 'Onfre Wind',
+      company: 'Thoughtmix PVT LTD',
+      role: 'admin',
+      username: 'owind1b',
+      country: 'Ukraine',
+      contact: '(344) 262-7270',
+      email: 'owind1b@yandex.ru',
+      currentPlan: 'basic',
+      status: 'pending',
+      avatar: avatar3,
+      billing: 'Manual-PayPal',
+    },
+    {
+      id: 49,
+      fullName: 'Paulie Durber',
+      company: 'Babbleblab PVT LTD',
+      role: 'subscriber',
+      username: 'pdurber1c',
+      country: 'Sweden',
+      contact: '(694) 676-1275',
+      email: 'pdurber1c@gov.uk',
+      currentPlan: 'team',
+      status: 'inactive',
+      avatar: avatar2,
+      billing: 'Manual-PayPal',
+    },
+    {
+      id: 50,
+      fullName: 'Beverlie Krabbe',
+      company: 'Kaymbo PVT LTD',
+      role: 'editor',
+      username: 'bkrabbe1d',
+      country: 'China',
+      contact: '(397) 294-5153',
+      email: 'bkrabbe1d@home.pl',
+      currentPlan: 'company',
+      status: 'active',
+      avatar: avatar1,
+      billing: 'Manual-Cash',
+    },
+  ],
+}

resources/js/plugins/fake-api/handlers/apps/users/index.js

@@ -0,0 +1,145 @@
+import is from '@sindresorhus/is'
+import { destr } from 'destr'
+import { HttpResponse, http } from 'msw'
+import { db } from '@db/apps/users/db'
+import { paginateArray } from '@api-utils/paginateArray'
+
+export const handlerAppsUsers = [
+  // Get Users Details
+  http.get(('/api/apps/users'), ({ request }) => {
+    const url = new URL(request.url)
+    const q = url.searchParams.get('q')
+    const role = url.searchParams.get('role')
+    const plan = url.searchParams.get('plan')
+    const status = url.searchParams.get('status')
+    const sortBy = url.searchParams.get('sortBy')
+    const itemsPerPage = url.searchParams.get('itemsPerPage')
+    const page = url.searchParams.get('page')
+    const orderBy = url.searchParams.get('orderBy')
+    const searchQuery = is.string(q) ? q : undefined
+    const queryLower = (searchQuery ?? '').toString().toLowerCase()
+    const parsedSortBy = destr(sortBy)
+    const sortByLocal = is.string(parsedSortBy) ? parsedSortBy : ''
+    const parsedOrderBy = destr(orderBy)
+    const orderByLocal = is.string(parsedOrderBy) ? parsedOrderBy : ''
+    const parsedItemsPerPage = destr(itemsPerPage)
+    const parsedPage = destr(page)
+    const itemsPerPageLocal = is.number(parsedItemsPerPage) ? parsedItemsPerPage : 10
+    const pageLocal = is.number(parsedPage) ? parsedPage : 1
+
+    // filter users
+    let filteredUsers = db.users.filter(user => ((user.fullName.toLowerCase().includes(queryLower) || user.email.toLowerCase().includes(queryLower)) && user.role === (role || user.role) && user.currentPlan === (plan || user.currentPlan) && user.status === (status || user.status))).reverse()
+
+    // sort users
+    if (sortByLocal) {
+      console.log(sortByLocal)
+      if (sortByLocal === 'user') {
+        filteredUsers = filteredUsers.sort((a, b) => {
+          if (orderByLocal === 'asc')
+            return a.fullName.localeCompare(b.fullName)
+          else
+            return b.fullName.localeCompare(a.fullName)
+        })
+      }
+      if (sortByLocal === 'email') {
+        filteredUsers = filteredUsers.sort((a, b) => {
+          if (orderByLocal === 'asc')
+            return a.email.localeCompare(b.email)
+          else
+            return b.email.localeCompare(a.email)
+        })
+      }
+      if (sortByLocal === 'role') {
+        filteredUsers = filteredUsers.sort((a, b) => {
+          if (orderByLocal === 'asc')
+            return a.role.localeCompare(b.role)
+          else
+            return b.role.localeCompare(a.role)
+        })
+      }
+      if (sortByLocal === 'plan') {
+        filteredUsers = filteredUsers.sort((a, b) => {
+          if (orderByLocal === 'asc')
+            return a.currentPlan.localeCompare(b.currentPlan)
+          else
+            return b.currentPlan.localeCompare(a.currentPlan)
+        })
+      }
+      if (sortByLocal === 'status') {
+        filteredUsers = filteredUsers.sort((a, b) => {
+          if (orderByLocal === 'asc')
+            return a.status.localeCompare(b.status)
+          else
+            return b.status.localeCompare(a.status)
+        })
+      }
+      if (sortByLocal === 'billing') {
+        filteredUsers = filteredUsers.sort((a, b) => {
+          if (orderByLocal === 'asc')
+            return a.billing.localeCompare(b.billing)
+          else
+            return b.billing.localeCompare(a.billing)
+        })
+      }
+    }
+    const totalUsers = filteredUsers.length
+
+    // total pages
+    const totalPages = Math.ceil(totalUsers / itemsPerPageLocal)
+    
+    return HttpResponse.json({
+      users: paginateArray(filteredUsers, itemsPerPageLocal, pageLocal),
+      totalPages,
+      totalUsers,
+      page: pageLocal > Math.ceil(totalUsers / itemsPerPageLocal) ? 1 : page,
+    }, { status: 200 })
+  }),
+
+  // Get Single User Detail
+  http.get(('/api/apps/users/:id'), ({ params }) => {
+    const userId = Number(params.id)
+    const user = db.users.find(e => e.id === userId)
+    if (!user) {
+      return HttpResponse.json({ message: 'User not found' }, { status: 404 })
+    }
+    else {
+      return HttpResponse.json({
+        ...user,
+        ...{
+          taskDone: 1230,
+          projectDone: 568,
+          taxId: 'Tax-8894',
+          language: 'English',
+        },
+      }, { status: 200 })
+    }
+  }),
+
+  // Delete User
+  http.delete(('/api/apps/users/:id'), ({ params }) => {
+    const userId = Number(params.id)
+    const userIndex = db.users.findIndex(e => e.id === userId)
+    if (userIndex === -1) {
+      return HttpResponse.json('User not found', { status: 404 })
+    }
+    else {
+      db.users.splice(userIndex, 1)
+      
+      return new HttpResponse(null, {
+        status: 204,
+      })
+    }
+  }),
+
+  // 👉 Add user
+  http.post(('/api/apps/users'), async ({ request }) => {
+    const user = await request.json()
+
+    db.users.push({
+      ...user,
+      id: db.users.length + 1,
+    })
+    
+    return HttpResponse.json({ body: user }, { status: 201 })
+  }),
+]

resources/js/plugins/fake-api/handlers/apps/users/types.js

@@ -0,0 +1 @@
+export {}

resources/js/plugins/fake-api/handlers/auth/db.js

@@ -0,0 +1,49 @@
+export const db = {
+  // TODO: Use jsonwebtoken pkg
+  // ℹ️ Created from https://jwt.io/ using HS256 algorithm
+  // ℹ️ We didn't created it programmatically because jsonwebtoken package have issues with esm support. View Issues: https://github.com/auth0/node-jsonwebtoken/issues/655
+  userTokens: [
+    'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MX0.fhc3wykrAnRpcKApKhXiahxaOe8PSHatad31NuIZ0Zg',
+    'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6Mn0.cat2xMrZLn0FwicdGtZNzL7ifDTAKWB0k1RurSWjdnw',
+    'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6M30.PGOfMaZA_T9W05vMj5FYXG5d47soSPJD1WuxeUfw4L4',
+    'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6NH0.d_9aq2tpeA9-qpqO0X4AmW6gU2UpWkXwc04UJYFWiZE',
+    'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6NX0.ocO77FbjOSU1-JQ_BilEZq2G_M8bCiB10KYqtfkv1ss',
+    'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6Nn0.YgQILRqZy8oefhTZgJJfiEzLmhxQT_Bd2510OvrrwB8',
+    'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6N30.KH9RmOWIYv_HONxajg7xBIJXHEUvSdcBygFtS2if8Jk',
+    'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6OH0.shrp-oMHkVAkiMkv_aIvSx3k6Jk-X7TrH5UeufChz_g',
+    'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6OX0.9JD1MR3ZkwHzhl4mOHH6lGG8hOVNZqDNH6UkFzjCqSE',
+    'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MTB9.txWLuN4QT5PqTtgHmlOiNerIu5Do51PpYOiZutkyXYg',
+  ],
+  users: [
+    {
+      id: 1,
+      fullName: 'John Doe',
+      username: 'johndoe',
+      password: 'admin',
+      avatar: `${import.meta.env.BASE_URL.replace(/build\/$/g, '') ?? '/'}images/avatars/avatar-1.png`,
+      email: 'admin@demo.com',
+      role: 'admin',
+      abilityRules: [
+        {
+          action: 'manage',
+          subject: 'all',
+        },
+      ],
+    },
+    {
+      id: 2,
+      fullName: 'Jane Doe',
+      username: 'janedoe',
+      password: 'client',
+      avatar: `${import.meta.env.BASE_URL.replace(/build\/$/g, '') ?? '/'}images/avatars/avatar-2.png`,
+      email: 'client@demo.com',
+      role: 'client',
+      abilityRules: [
+        {
+          action: 'read',
+          subject: 'AclDemo',
+        },
+      ],
+    },
+  ],
+}

resources/js/plugins/fake-api/handlers/auth/index.js

@@ -0,0 +1,40 @@
+import { HttpResponse, http } from 'msw'
+import { db } from '@db/auth/db'
+
+// Handlers for auth
+export const handlerAuth = [
+  http.post(('/api/auth/login'), async ({ request }) => {
+    const { email, password } = await request.json()
+    let errors = {
+      email: ['Something went wrong'],
+    }
+    const user = db.users.find(u => u.email === email && u.password === password)
+    if (user) {
+      try {
+        const accessToken = db.userTokens[user.id]
+
+        // We are duplicating user here
+        const userData = { ...user }
+
+        const userOutData = Object.fromEntries(Object.entries(userData)
+          .filter(([key, _]) => !(key === 'password' || key === 'abilityRules')))
+
+        const response = {
+          userAbilityRules: userData.abilityRules,
+          accessToken,
+          userData: userOutData,
+        }
+
+        return HttpResponse.json(response, { status: 201 })
+      }
+      catch (e) {
+        errors = { email: [e] }
+      }
+    }
+    else {
+      errors = { email: ['Invalid email or password'] }
+    }
+    
+    return HttpResponse.json({ errors }, { status: 400 })
+  }),
+]

resources/js/plugins/fake-api/handlers/auth/types.js

@@ -0,0 +1 @@
+export {}

resources/js/plugins/fake-api/handlers/dashboard/db.js

@@ -0,0 +1,86 @@
+import avatar1 from '@images/avatars/avatar-1.png'
+import avatar2 from '@images/avatars/avatar-2.png'
+import avatar3 from '@images/avatars/avatar-3.png'
+import avatar4 from '@images/avatars/avatar-4.png'
+import avatar5 from '@images/avatars/avatar-5.png'
+import avatar6 from '@images/avatars/avatar-6.png'
+import avatar7 from '@images/avatars/avatar-7.png'
+import avatar8 from '@images/avatars/avatar-8.png'
+import figma from '@images/icons/project-icons/figma.png'
+import html5 from '@images/icons/project-icons/html5.png'
+import python from '@images/icons/project-icons/python.png'
+import react from '@images/icons/project-icons/react.png'
+import sketch from '@images/icons/project-icons/sketch.png'
+import vue from '@images/icons/project-icons/vue.png'
+import xamarin from '@images/icons/project-icons/xamarin.png'
+
+export const db = {
+  analytics: [
+    {
+      logo: react,
+      name: 'BGC eCommerce App',
+      project: 'React Project',
+      leader: 'Eileen',
+      progress: 78,
+      hours: '18:42',
+      team: [avatar1, avatar8, avatar6],
+      extraMembers: 3,
+    },
+    {
+      logo: figma,
+      name: 'Falcon Logo Design',
+      project: 'Figma Project',
+      leader: 'Owen',
+      progress: 25,
+      hours: '20:42',
+      team: [avatar5, avatar2],
+    },
+    {
+      logo: vue,
+      name: 'Dashboard Design',
+      project: 'Vuejs Project',
+      leader: 'Keith',
+      progress: 62,
+      hours: '120:87',
+      team: [avatar8, avatar2, avatar1],
+    },
+    {
+      logo: xamarin,
+      name: 'Foodista mobile app',
+      project: 'Xamarin Project',
+      leader: 'Merline',
+      progress: 8,
+      hours: '120:87',
+      team: [avatar3, avatar4, avatar7],
+      extraMembers: 8,
+    },
+    {
+      logo: python,
+      name: 'Dojo Email App',
+      project: 'Python Project',
+      leader: 'Harmonia',
+      progress: 51,
+      hours: '230:10',
+      team: [avatar4, avatar3, avatar1],
+      extraMembers: 5,
+    },
+    {
+      logo: sketch,
+      name: 'Blockchain Website',
+      project: 'Sketch Project',
+      leader: 'Allyson',
+      progress: 92,
+      hours: '342:41',
+      team: [avatar1, avatar8],
+    },
+    {
+      logo: html5,
+      name: 'Hoffman Website',
+      project: 'HTML Project',
+      leader: 'Georgie',
+      progress: 80,
+      hours: '12:45',
+      team: [avatar1, avatar8, avatar6],
+    },
+  ],
+}

resources/js/plugins/fake-api/handlers/dashboard/index.js

@@ -0,0 +1,63 @@
+import is from '@sindresorhus/is'
+import destr from 'destr'
+import { HttpResponse, http } from 'msw'
+import { db } from '@db/dashboard/db'
+import { paginateArray } from '@api-utils/paginateArray'
+
+export const handlerDashboard = [
+  http.get('/api/dashboard/analytics/projects', ({ request }) => {
+    const url = new URL(request.url)
+    const q = url.searchParams.get('q')
+    const sortBy = url.searchParams.get('sortBy')
+    const itemsPerPage = url.searchParams.get('itemsPerPage')
+    const page = url.searchParams.get('page')
+    const orderBy = url.searchParams.get('orderBy')
+    const searchQuery = is.string(q) ? q : undefined
+    const queryLower = (searchQuery ?? '').toString().toLowerCase()
+    const parsedSortBy = destr(sortBy)
+    const sortByLocal = is.string(parsedSortBy) ? parsedSortBy : ''
+    const parsedOrderBy = destr(orderBy)
+    const orderByLocal = is.string(parsedOrderBy) ? parsedOrderBy : ''
+    const parsedItemsPerPage = destr(itemsPerPage)
+    const parsedPage = destr(page)
+    const itemsPerPageLocal = is.number(parsedItemsPerPage) ? parsedItemsPerPage : 10
+    const pageLocal = is.number(parsedPage) ? parsedPage : 1
+    let filteredProjects = db.analytics.filter(project => ((project.name.toLowerCase().includes(queryLower) || project.leader.toLowerCase().includes(queryLower)) || project.project.toLowerCase().includes(queryLower))).reverse()
+    if (sortByLocal) {
+      console.log(sortByLocal)
+      if (sortByLocal === 'project') {
+        filteredProjects = filteredProjects.sort((a, b) => {
+          if (orderByLocal === 'asc')
+            return a.name.localeCompare(b.name)
+          else
+            return b.name.localeCompare(a.name)
+        })
+      }
+      if (sortByLocal === 'leader') {
+        filteredProjects = filteredProjects.sort((a, b) => {
+          if (orderByLocal === 'asc')
+            return a.leader.localeCompare(b.leader)
+          else
+            return b.leader.localeCompare(a.leader)
+        })
+      }
+      if (sortByLocal === 'progress') {
+        filteredProjects = filteredProjects.sort((a, b) => {
+          if (orderByLocal === 'asc')
+            return a.progress - b.progress
+          else
+            return b.progress - a.progress
+        })
+      }
+    }
+    const totalProjects = filteredProjects.length
+    const totalPages = Math.ceil(totalProjects / itemsPerPageLocal)
+    
+    return HttpResponse.json({
+      projects: paginateArray(filteredProjects, itemsPerPageLocal, pageLocal),
+      totalPages,
+      totalProjects,
+      page: pageLocal > Math.ceil(totalProjects / itemsPerPageLocal) ? 1 : page,
+    }, { status: 200 })
+  }),
+]

resources/js/plugins/fake-api/handlers/dashboard/type.js

@@ -0,0 +1 @@
+export {}

resources/js/plugins/fake-api/handlers/pages/datatable/index.js

@@ -0,0 +1,9 @@
+import { HttpResponse, http } from 'msw'
+import { db } from '@db/pages/datatable/db'
+
+// Handler for pages/datatable
+export const handlerPagesDatatable = [
+  http.get(('/api/pages/datatable'), () => {
+    return HttpResponse.json(db.salesDetails, { status: 200 })
+  }),
+]

resources/js/plugins/fake-api/handlers/pages/datatable/types.js

@@ -0,0 +1 @@
+export {}

resources/js/plugins/fake-api/handlers/pages/faq/db.js

@@ -0,0 +1,109 @@
+export const db = {
+  faqs: [
+    {
+      faqTitle: 'Payment',
+      faqIcon: 'tabler-credit-card',
+      faqSubtitle: 'Get help with payment',
+      faqs: [
+        {
+          question: 'When is payment taken for my order?',
+          answer: 'Payment is taken during the checkout process when you pay for your order. The order number that appears on the confirmation screen indicates payment has been successfully processed.',
+        },
+        {
+          question: 'How do I pay for my order?',
+          answer: 'We accept Visa®, MasterCard®, American Express®, and PayPal®. Our servers encrypt all information submitted to them, so you can be confident that your credit card information will be kept safe and secure.',
+        },
+        {
+          question: 'What should I do if I\'m having trouble placing an order?',
+          answer: 'For any technical difficulties you are experiencing with our website, please contact us at our support portal, or you can call us toll-free at 1-000-000-000, or email us at order@companymail.com',
+        },
+        {
+          question: 'Which license do I need for an end product that is only accessible to paying users?',
+          answer: 'If you have paying users or you are developing any SaaS products then you need an Extended License. For each products, you need a license. You can get free lifetime updates as well.',
+        },
+        {
+          question: 'Does my subscription automatically renew?',
+          answer: 'No, This is not subscription based item.Pastry pudding cookie toffee bonbon jujubes jujubes powder topping. Jelly beans gummi bears sweet roll bonbon muffin liquorice. Wafer lollipop sesame snaps.',
+        },
+      ],
+    },
+    {
+      faqTitle: 'Delivery',
+      faqIcon: 'tabler-briefcase',
+      faqSubtitle: 'Get help with delivery',
+      faqs: [
+        {
+          question: 'How would you ship my order?',
+          answer: 'For large products, we deliver your product via a third party logistics company offering you the “room of choice” scheduled delivery service. For small products, we offer free parcel delivery.',
+        },
+        {
+          question: 'What is the delivery cost of my order?',
+          answer: 'The cost of scheduled delivery is $69 or $99 per order, depending on the destination postal code. The parcel delivery is free.',
+        },
+        {
+          question: 'What to do if my product arrives damaged?',
+          answer: 'We will promptly replace any product that is damaged in transit. Just contact our support team, to notify us of the situation within 48 hours of product arrival.',
+        },
+      ],
+    },
+    {
+      faqTitle: 'Cancellation',
+      faqIcon: 'tabler-refresh',
+      faqSubtitle: 'Get help with cancellation & return',
+      faqs: [
+        {
+          question: 'Can I cancel my order?',
+          answer: 'Scheduled delivery orders can be cancelled 72 hours prior to your selected delivery date for full refund. Parcel delivery orders cannot be cancelled, however a free return label can be provided upon request.',
+        },
+        {
+          question: 'Can I return my product?',
+          answer: 'You can return your product within 15 days of delivery, by contacting our support team, All merchandise returned must be in the original packaging with all original items.',
+        },
+        {
+          question: 'Where can I view status of return?',
+          answer: 'Locate the item from Your Orders. Select Return/Refund status',
+        },
+      ],
+    },
+    {
+      faqTitle: 'My Orders',
+      faqIcon: 'tabler-box',
+      faqSubtitle: 'Order details',
+      faqs: [
+        {
+          question: 'Has my order been successful?',
+          answer: `All successful order transactions will receive an order confirmation email once the order has been processed. If you have not received your order confirmation email within 24 hours, check your junk email or spam folder.
+              Alternatively, log in to your account to check your order summary. If you do not have a account, you can contact our Customer Care Team on 1-000-000-000.
+              `,
+        },
+        {
+          question: 'My Promotion Code is not working, what can I do?',
+          answer: 'If you are having issues with a promotion code, please contact us at 1 000 000 000 for assistance.',
+        },
+        {
+          question: 'How do I track my Orders?',
+          answer: 'If you have an account just sign into your account from here and select “My Orders”. If you have a a guest account track your order from here using the order number and the email address.',
+        },
+      ],
+    },
+    {
+      faqTitle: 'Product & Services',
+      faqIcon: 'tabler-settings',
+      faqSubtitle: 'Get help with product & services',
+      faqs: [
+        {
+          question: 'Will I be notified once my order has shipped?',
+          answer: 'Yes, We will send you an email once your order has been shipped. This email will contain tracking and order information.',
+        },
+        {
+          question: 'Where can I find warranty information?',
+          answer: 'We are committed to quality products. For information on warranty period and warranty services, visit our Warranty section here.',
+        },
+        {
+          question: 'How can I purchase additional warranty coverage?',
+          answer: 'For the peace of your mind, we offer extended warranty plans that add additional year(s) of protection to the standard manufacturer\'s warranty provided by us. To purchase or find out more about the extended warranty program, visit Extended Warranty section here.',
+        },
+      ],
+    },
+  ],
+}

resources/js/plugins/fake-api/handlers/pages/faq/index.js

@@ -0,0 +1,25 @@
+import is from '@sindresorhus/is'
+import { HttpResponse, http } from 'msw'
+import { db } from '@db/pages/faq/db'
+
+// Handler for pages/faq
+export const handlerPagesFaq = [
+  http.get(('/api/pages/faq'), ({ request }) => {
+    const url = new URL(request.url)
+    const q = url.searchParams.get('q') ?? ''
+    const searchQuery = is.string(q) ? q : undefined
+    const queryLowered = (searchQuery ?? '').toString().toLowerCase()
+    const filteredData = []
+
+    Object.entries(db.faqs).forEach(([_, faqObj]) => {
+      const filteredQAndA = faqObj.faqs.filter(obj => {
+        return obj.question.toLowerCase().includes(queryLowered)
+      })
+
+      if (filteredQAndA.length)
+        filteredData.push({ ...faqObj, faqs: filteredQAndA })
+    })
+    
+    return HttpResponse.json(filteredData, { status: 200 })
+  }),
+]

resources/js/plugins/fake-api/handlers/pages/faq/types.js

@@ -0,0 +1 @@
+export {}

resources/js/plugins/fake-api/handlers/pages/help-center/db.js

@@ -0,0 +1,142 @@
+import checkoutImg from '@images/front-pages/misc/checkout-image.png'
+import productImg from '@images/front-pages/misc/product-image.png'
+
+export const db = {
+  popularArticles: [
+    {
+      slug: 'getting-started',
+      title: 'Getting Started',
+      img: '../images/svg/rocket.svg',
+      subtitle: 'Whether you\'re new or you\'re a power user, this article will',
+    },
+    {
+      slug: 'first-steps',
+      title: 'First Steps',
+      img: '../images/svg/gift.svg',
+      subtitle: 'Are you a new customer wondering how to get started?',
+    },
+    {
+      slug: 'external-content',
+      title: 'Add External Content',
+      img: '../images/svg/keyboard.svg',
+      subtitle: 'Article will show you how to expand functionality of App',
+    },
+  ],
+  allArticles: [
+    {
+      title: 'Buying',
+      icon: 'tabler-shopping-cart',
+      articles: [
+        { title: 'What are Favourites?' },
+        { title: 'How do I purchase an item?' },
+        { title: 'How do i add or change my details?' },
+        { title: 'How do refunds work?' },
+        { title: 'Can I Get A Refund?' },
+        { title: 'I\'m trying to find a specific item' },
+      ],
+    },
+    {
+      title: 'Item Support',
+      icon: 'tabler-help',
+      articles: [
+        { title: 'What is Item Support?' },
+        { title: 'How to contact an author?' },
+        { title: 'Where Is My Purchase Code?' },
+        { title: 'Extend or renew Item Support' },
+        { title: 'Item Support FAQ' },
+        { title: 'Why has my item been removed?' },
+      ],
+    },
+    {
+      title: 'Licenses',
+      icon: 'tabler-currency-dollar',
+      articles: [
+        { title: 'Can I use the same license for the...' },
+        { title: 'How to contact an author?' },
+        { title: 'I\'m making a test site - it\'s not for ...' },
+        { title: 'which license do I need?' },
+        { title: 'I want to make multiple end prod ...' },
+        { title: 'For logo what license do I need?' },
+      ],
+    },
+    {
+      title: 'Template Kits',
+      icon: 'tabler-color-swatch',
+      articles: [
+        { title: 'Template Kits' },
+        { title: 'Elementor Template Kits: PHP Zip ...' },
+        { title: 'Template Kits - Imported template ...' },
+        { title: 'Troubleshooting Import Problems' },
+        { title: 'How to use the WordPress Plugin ...' },
+        { title: 'How to use the Template Kit Import ...' },
+      ],
+    },
+    {
+      title: 'Account & Password',
+      icon: 'tabler-lock-open',
+      articles: [
+        { title: 'Signing in with a social account' },
+        { title: 'Locked Out of Account' },
+        { title: 'I\'m not receiving the verification email' },
+        { title: 'Forgotten Username Or Password' },
+        { title: 'New password not accepted' },
+        { title: 'What is Sign In Verification?' },
+      ],
+    },
+    {
+      title: 'Account Settings',
+      icon: 'tabler-user',
+      articles: [
+        { title: 'How do I change my password?' },
+        { title: 'How do I change my username?' },
+        { title: 'How do I close my account?' },
+        { title: 'How do I change my email address?' },
+        { title: 'How can I regain access to my a ...' },
+        { title: 'Are RSS feeds available on Market?' },
+      ],
+    },
+  ],
+  keepLearning: [
+    {
+      slug: 'blogging',
+      title: 'Blogging',
+      img: '../images/svg/laptop.svg',
+      subtitle: 'Expert tips & tools to improve your website or online store using blog.',
+    },
+    {
+      slug: 'inspiration-center',
+      title: 'Inspiration Center',
+      img: '../images/svg/lightbulb.svg',
+      subtitle: 'inspiration from experts to help you start and grow your big ideas.',
+    },
+    {
+      slug: 'community',
+      title: 'Community',
+      img: '../images/svg/discord.svg',
+      subtitle: 'A group of people living in the same place or having a particular.',
+    },
+  ],
+  articleData: {
+    title: 'How to add product in cart?',
+    lastUpdated: '1 month ago  -  Updated',
+    productContent: `
+            <p>
+              If you're after only one item, simply choose the 'Buy Now' option on the item page. This will take you directly to Checkout.
+            </p>
+            <p>
+              If you want several items, use the 'Add to Cart' button and then choose 'Keep Browsing' to continue shopping or 'Checkout' to finalize your purchase.
+            </p>
+        `,
+    checkoutContent: 'You can go back to your cart at any time by clicking on the shopping cart icon at the top right side of the page.',
+    articleList: [
+      'Template Kits',
+      'Elementor Template Kits: PHP Zip Extends',
+      'Envato Elements Template Kits',
+      'Envato Elements Template Kits',
+      'How to use the template in WordPress',
+      'How to use the Template Kit Import',
+    ],
+    checkoutImg,
+    productImg,
+  },
+}

resources/js/plugins/fake-api/handlers/pages/help-center/index.js

@@ -0,0 +1,12 @@
+import { HttpResponse, http } from 'msw'
+import { db } from '@db/pages/help-center/db'
+
+// Handler for pages/help-center
+export const handlerPagesHelpCenter = [
+  http.get(('/api/pages/help-center'), () => {
+    return HttpResponse.json({ allArticles: db.allArticles, popularArticles: db.popularArticles, keepLearning: db.keepLearning }, { status: 200 })
+  }),
+  http.get(('/api/pages/help-center/article'), () => {
+    return HttpResponse.json(db.articleData, { status: 200 })
+  }),
+]

resources/js/plugins/fake-api/handlers/pages/help-center/types.js

@@ -0,0 +1 @@
+export {}

resources/js/plugins/fake-api/handlers/pages/profile/db.js

@@ -0,0 +1,667 @@
+import avatar1 from '@images/avatars/avatar-1.png'
+import avatar2 from '@images/avatars/avatar-2.png'
+import avatar3 from '@images/avatars/avatar-3.png'
+import avatar4 from '@images/avatars/avatar-4.png'
+import avatar5 from '@images/avatars/avatar-5.png'
+import avatar6 from '@images/avatars/avatar-6.png'
+import avatar7 from '@images/avatars/avatar-7.png'
+import avatar8 from '@images/avatars/avatar-8.png'
+import eventLabel from '@images/icons/project-icons/event.png'
+import figmaLabel from '@images/icons/project-icons/figma.png'
+import htmlLabel from '@images/icons/project-icons/html5.png'
+import reactLabel from '@images/icons/project-icons/react.png'
+import socialLabel from '@images/icons/project-icons/social.png'
+import supportLabel from '@images/icons/project-icons/support.png'
+import twitterLabel from '@images/icons/project-icons/twitter.png'
+import vueLabel from '@images/icons/project-icons/vue.png'
+import xdLabel from '@images/icons/project-icons/xd.png'
+import UserProfileHeaderBg from '@images/pages/user-profile-header-bg.png'
+
+export const db = {
+  data: {
+    profileHeader: {
+      fullName: 'John Doe',
+      location: 'Vatican City',
+      joiningDate: 'Joined April 2021',
+      designation: 'UX Designer',
+      profileImg: avatar1,
+      coverImg: UserProfileHeaderBg,
+    },
+    profile: {
+      about: [
+        { property: 'Full Name', value: 'John Doe', icon: 'tabler-user' },
+        { property: 'Status', value: 'active', icon: 'tabler-check' },
+        { property: 'Role', value: 'Developer', icon: 'tabler-crown' },
+        { property: 'Country', value: 'USA', icon: 'tabler-flag' },
+        { property: 'Language', value: 'English', icon: 'tabler-language' },
+      ],
+      contacts: [
+        { property: 'Contact', value: '(123) 456-7890', icon: 'tabler-phone-call' },
+        { property: 'Skype', value: 'john.doe', icon: 'tabler-messages' },
+        { property: 'Email', value: 'john.doe@example.com', icon: 'tabler-mail' },
+      ],
+      teams: [
+        { property: 'Backend Developer', value: '(126 Members)', icon: 'tabler-brand-github', color: 'secondary' },
+        { property: 'VueJS Developer', value: '(98 Members)', icon: 'tabler-brand-vue', color: 'success' },
+      ],
+      overview: [
+        { property: 'Task Compiled', value: '13.5k', icon: 'tabler-check' },
+        { property: 'Connections', value: '897', icon: 'tabler-users' },
+        { property: 'Projects Compiled', value: '146', icon: 'tabler-layout-grid' },
+      ],
+      connections: [
+        {
+          isFriend: false,
+          connections: '45',
+          name: 'Cecilia Payne',
+          avatar: avatar2,
+        },
+        {
+          isFriend: true,
+          connections: '1.32k',
+          name: 'Curtis Fletcher',
+          avatar: avatar3,
+        },
+        {
+          isFriend: true,
+          connections: '125',
+          name: 'Alice Stone',
+          avatar: avatar4,
+        },
+        {
+          isFriend: false,
+          connections: '456',
+          name: 'Darrell Barnes',
+          avatar: avatar5,
+        },
+        {
+          isFriend: false,
+          connections: '1.2k',
+          name: 'Eugenia Moore',
+          avatar: avatar8,
+        },
+      ],
+      teamsTech: [
+        {
+          members: 72,
+          ChipColor: 'error',
+          chipText: 'Developer',
+          title: 'React Developers',
+          avatar: reactLabel,
+        },
+        {
+          members: 122,
+          chipText: 'Support',
+          ChipColor: 'primary',
+          title: 'Support Team',
+          avatar: supportLabel,
+        },
+        {
+          members: 7,
+          ChipColor: 'info',
+          chipText: 'Designer',
+          title: 'UI Designer',
+          avatar: figmaLabel,
+        },
+        {
+          members: 289,
+          ChipColor: 'error',
+          chipText: 'Developer',
+          title: 'Vue.js Developers',
+          avatar: vueLabel,
+        },
+        {
+          members: 24,
+          chipText: 'Marketing',
+          ChipColor: 'secondary',
+          title: 'Digital Marketing',
+          avatar: twitterLabel,
+        },
+      ],
+    },
+    teams: [
+      {
+        extraMembers: 25,
+        title: 'React Developers',
+        avatar: reactLabel,
+        avatarGroup: [
+          { avatar: avatar1, name: 'Vinnie Mostowy' },
+          { avatar: avatar2, name: 'Allen Rieske' },
+          { avatar: avatar3, name: 'Julee Rossignol' },
+          { avatar: avatar4, name: 'George Burrill' },
+        ],
+        description: 'We don\'t make assumptions about the rest of your technology stack, so you can develop new features in React.',
+        chips: [
+          {
+            title: 'React',
+            color: 'primary',
+          },
+          {
+            title: 'MUI',
+            color: 'info',
+          },
+        ],
+      },
+      {
+        extraMembers: 15,
+        title: 'Vue.js Dev Team',
+        avatar: vueLabel,
+        avatarGroup: [
+          { avatar: avatar5, name: 'Kaith D\'souza' },
+          { avatar: avatar6, name: 'John Doe' },
+          { avatar: avatar7, name: 'Alan Walker' },
+          { avatar: avatar8, name: 'Calvin Middleton' },
+        ],
+        description: 'The development of Vue and its ecosystem is guided by an international team, some of whom have chosen to be featured below.',
+        chips: [
+          {
+            title: 'Vuejs',
+            color: 'success',
+          },
+          {
+            color: 'error',
+            title: 'Developer',
+          },
+        ],
+      },
+      {
+        extraMembers: 55,
+        title: 'Creative Designers',
+        avatar: xdLabel,
+        avatarGroup: [
+          { avatar: avatar1, name: 'Jimmy Ressula' },
+          { avatar: avatar2, name: 'Kristi Lawker' },
+          { avatar: avatar3, name: 'Danny Paul' },
+          { avatar: avatar4, name: 'Alicia Littleton' },
+        ],
+        description: 'A design or product team is more than just the people on it. A team includes the people, the roles they play, and the collaboration they foster.',
+        chips: [
+          {
+            title: 'Sketch',
+            color: 'warning',
+          },
+          {
+            title: 'XD',
+            color: 'error',
+          },
+        ],
+      },
+      {
+        extraMembers: 35,
+        title: 'Support Team',
+        avatar: supportLabel,
+        avatarGroup: [
+          { avatar: avatar5, name: 'Andrew Tye' },
+          { avatar: avatar6, name: 'Rishi Swaat' },
+          { avatar: avatar7, name: 'Rossie Kim' },
+          { avatar: avatar8, name: 'Mary Hunter' },
+        ],
+        description: 'Support your team. Your customer support team is fielding the good, the bad, and the ugly day in and day out.',
+        chips: [
+          {
+            color: 'info',
+            title: 'Zendesk',
+          },
+        ],
+      },
+      {
+        extraMembers: 19,
+        title: 'Digital Marketing',
+        avatar: socialLabel,
+        avatarGroup: [
+          { avatar: avatar1, name: 'Kim Merchent' },
+          { avatar: avatar2, name: 'Sam D\'souza' },
+          { avatar: avatar3, name: 'Nurvi Karlos' },
+          { avatar: avatar4, name: 'Margorie Whitmire' },
+        ],
+        description: 'Digital marketing refers to advertising delivered through digital channels such as search engines, websites, and mobile apps.',
+        chips: [
+          {
+            color: 'primary',
+            title: 'Twitter',
+          },
+          {
+            title: 'Email',
+            color: 'success',
+          },
+        ],
+      },
+      {
+        title: 'Event',
+        extraMembers: 55,
+        avatar: eventLabel,
+        avatarGroup: [
+          { avatar: avatar5, name: 'Vinnie Mostowy' },
+          { avatar: avatar6, name: 'Allen Rieske' },
+          { avatar: avatar7, name: 'Julee Rossignol' },
+          { avatar: avatar8, name: 'Daniel Long' },
+        ],
+        description: 'Event is defined as a particular contest which is part of a program of contests. An example of an event is the long jump competition.',
+        chips: [
+          {
+            title: 'Hubilo',
+            color: 'success',
+          },
+        ],
+      },
+      {
+        extraMembers: 45,
+        title: 'Figma Resources',
+        avatar: figmaLabel,
+        avatarGroup: [
+          { avatar: avatar1, name: 'Andrew Mostowy' },
+          { avatar: avatar2, name: 'Micky Ressula' },
+          { avatar: avatar3, name: 'Michel Pal' },
+          { avatar: avatar4, name: 'Herman Lockard' },
+        ],
+        description: 'Explore, install, use, and remix thousands of plugins and files published to the Figma Community by designers and developers.',
+        chips: [
+          {
+            title: 'UI/UX',
+            color: 'success',
+          },
+          {
+            title: 'Figma',
+            color: 'secondary',
+          },
+        ],
+      },
+      {
+        extraMembers: 3,
+        title: 'Native Mobile App',
+        avatar: reactLabel,
+        avatarGroup: [
+          { avatar: avatar1, name: 'Andrew Mostowy' },
+          { avatar: avatar2, name: 'Micky Ressula' },
+          { avatar: avatar3, name: 'Michel Pal' },
+          { avatar: avatar4, name: 'Herman Lockard' },
+        ],
+        description: 'React Native lets you create user friendly native apps and doesn\'t compromise your users\' experiences. With its robust framework.',
+        chips: [
+          {
+            title: 'React',
+            color: 'primary',
+          },
+        ],
+      },
+      {
+        extraMembers: 50,
+        title: 'Only Beginners',
+        avatar: htmlLabel,
+        avatarGroup: [
+          { avatar: avatar5, name: 'Kim Karlos' },
+          { avatar: avatar6, name: 'Katy Turner' },
+          { avatar: avatar7, name: 'Peter Adward' },
+          { avatar: avatar8, name: 'Leona Miller' },
+        ],
+        description: 'Learn the basics of how websites work, front-end vs back-end, and using a code editor. Learn basic HTML, CSS, and…',
+        chips: [
+          {
+            title: 'CSS',
+            color: 'info',
+          },
+          {
+            title: 'HTML',
+            color: 'warning',
+          },
+        ],
+      },
+    ],
+    projects: [
+      {
+        daysLeft: 28,
+        comments: 15,
+        totalTask: 344,
+        hours: '380/244',
+        tasks: '290/344',
+        budget: '$18.2k',
+        completedTask: 328,
+        deadline: '28/2/22',
+        chipColor: 'success',
+        startDate: '14/2/21',
+        budgetSpent: '$24.8k',
+        members: '280 members',
+        title: 'Social Banners',
+        client: 'Christian Jimenez',
+        avatar: socialLabel,
+        description: 'We are Consulting, Software Development and Web Development Services.',
+        avatarGroup: [
+          { avatar: avatar1, name: 'Vinnie Mostowy' },
+          { avatar: avatar2, name: 'Allen Rieske' },
+          { avatar: avatar3, name: 'Julee Rossignol' },
+        ],
+      },
+      {
+        daysLeft: 15,
+        comments: 236,
+        totalTask: 90,
+        tasks: '12/90',
+        hours: '98/135',
+        budget: '$1.8k',
+        completedTask: 38,
+        deadline: '21/6/22',
+        budgetSpent: '$2.4k',
+        chipColor: 'warning',
+        startDate: '18/8/21',
+        members: '1.1k members',
+        title: 'Admin Template',
+        client: 'Jeffrey Phillips',
+        avatar: reactLabel,
+        avatarGroup: [
+          { avatar: avatar4, name: 'Kaith D\'souza' },
+          { avatar: avatar5, name: 'John Doe' },
+          { avatar: avatar6, name: 'Alan Walker' },
+        ],
+        description: 'Time is our most valuable asset, that\'s why we want to help you save it by creating…',
+      },
+      {
+        daysLeft: 45,
+        comments: 98,
+        budget: '$420',
+        totalTask: 140,
+        tasks: '22/140',
+        hours: '880/421',
+        completedTask: 95,
+        chipColor: 'error',
+        budgetSpent: '$980',
+        deadline: '8/10/21',
+        title: 'App Design',
+        startDate: '24/7/21',
+        members: '458 members',
+        client: 'Ricky McDonald',
+        avatar: vueLabel,
+        description: 'App design combines the user interface (UI) and user experience (UX).',
+        avatarGroup: [
+          { avatar: avatar7, name: 'Jimmy Ressula' },
+          { avatar: avatar8, name: 'Kristi Lawker' },
+          { avatar: avatar1, name: 'Danny Paul' },
+        ],
+      },
+      {
+        comments: 120,
+        daysLeft: 126,
+        totalTask: 420,
+        budget: '2.43k',
+        tasks: '237/420',
+        hours: '1.2k/820',
+        completedTask: 302,
+        deadline: '12/9/22',
+        budgetSpent: '$8.5k',
+        chipColor: 'warning',
+        startDate: '10/2/19',
+        members: '137 members',
+        client: 'Hulda Wright',
+        title: 'Create Website',
+        avatar: htmlLabel,
+        description: 'Your domain name should reflect your products or services so that your...',
+        avatarGroup: [
+          { avatar: avatar2, name: 'Andrew Tye' },
+          { avatar: avatar3, name: 'Rishi Swaat' },
+          { avatar: avatar4, name: 'Rossie Kim' },
+        ],
+      },
+      {
+        daysLeft: 5,
+        comments: 20,
+        totalTask: 285,
+        tasks: '29/285',
+        budget: '28.4k',
+        hours: '142/420',
+        chipColor: 'error',
+        completedTask: 100,
+        deadline: '25/12/21',
+        startDate: '12/12/20',
+        members: '82 members',
+        budgetSpent: '$52.7k',
+        client: 'Jerry Greene',
+        title: 'Figma Dashboard',
+        avatar: figmaLabel,
+        description: 'Use this template to organize your design project. Some of the key features are…',
+        avatarGroup: [
+          { avatar: avatar5, name: 'Kim Merchent' },
+          { avatar: avatar6, name: 'Sam D\'souza' },
+          { avatar: avatar7, name: 'Nurvi Karlos' },
+        ],
+      },
+      {
+        daysLeft: 4,
+        comments: 16,
+        budget: '$655',
+        totalTask: 290,
+        tasks: '29/290',
+        hours: '580/445',
+        completedTask: 290,
+        budgetSpent: '$1.3k',
+        chipColor: 'success',
+        deadline: '02/11/21',
+        startDate: '17/8/21',
+        title: 'Logo Design',
+        members: '16 members',
+        client: 'Olive Strickland',
+        avatar: xdLabel,
+        description: 'Premium logo designs created by top logo designers. Create the branding of business.',
+        avatarGroup: [
+          { avatar: avatar8, name: 'Kim Karlos' },
+          { avatar: avatar1, name: 'Katy Turner' },
+          { avatar: avatar2, name: 'Peter Adward' },
+        ],
+      },
+    ],
+    connections: [
+      {
+        tasks: '834',
+        projects: '18',
+        isConnected: true,
+        connections: '129',
+        name: 'Mark Gilbert',
+        designation: 'UI Designer',
+        avatar: avatar1,
+        chips: [
+          {
+            title: 'Figma',
+            color: 'secondary',
+          },
+          {
+            title: 'Sketch',
+            color: 'warning',
+          },
+        ],
+      },
+      {
+        tasks: '2.31k',
+        projects: '112',
+        isConnected: false,
+        connections: '1.28k',
+        name: 'Eugenia Parsons',
+        designation: 'Developer',
+        avatar: avatar2,
+        chips: [
+          {
+            color: 'error',
+            title: 'Angular',
+          },
+          {
+            color: 'info',
+            title: 'React',
+          },
+        ],
+      },
+      {
+        tasks: '1.25k',
+        projects: '32',
+        isConnected: false,
+        connections: '890',
+        name: 'Francis Byrd',
+        designation: 'Developer',
+        avatar: avatar3,
+        chips: [
+          {
+            title: 'HTML',
+            color: 'primary',
+          },
+          {
+            color: 'info',
+            title: 'React',
+          },
+        ],
+      },
+      {
+        tasks: '12.4k',
+        projects: '86',
+        isConnected: false,
+        connections: '890',
+        name: 'Leon Lucas',
+        designation: 'UI/UX Designer',
+        avatar: avatar4,
+        chips: [
+          {
+            title: 'Figma',
+            color: 'secondary',
+          },
+          {
+            title: 'Sketch',
+            color: 'warning',
+          },
+          {
+            color: 'primary',
+            title: 'Photoshop',
+          },
+        ],
+      },
+      {
+        tasks: '23.8k',
+        projects: '244',
+        isConnected: true,
+        connections: '2.14k',
+        name: 'Jayden Rogers',
+        designation: 'Full Stack Developer',
+        avatar: avatar5,
+        chips: [
+          {
+            color: 'info',
+            title: 'React',
+          },
+          {
+            title: 'HTML',
+            color: 'warning',
+          },
+          {
+            color: 'success',
+            title: 'Node.js',
+          },
+        ],
+      },
+      {
+        tasks: '1.28k',
+        projects: '32',
+        isConnected: false,
+        designation: 'SEO',
+        connections: '1.27k',
+        name: 'Jeanette Powell',
+        avatar: avatar6,
+        chips: [
+          {
+            title: 'Analysis',
+            color: 'secondary',
+          },
+          {
+            color: 'success',
+            title: 'Writing',
+          },
+        ],
+      },
+    ],
+  },
+  projectTable: [
+    {
+      id: 1,
+      status: 38,
+      leader: 'Eileen',
+      name: 'Website SEO',
+      date: '10 may 2021',
+      avatarColor: 'success',
+      avatarGroup: [avatar1, avatar2, avatar3, avatar4],
+    },
+    {
+      id: 2,
+      status: 45,
+      leader: 'Owen',
+      date: '03 Jan 2021',
+      name: 'Social Banners',
+      avatar: socialLabel,
+      avatarGroup: [avatar5, avatar6],
+    },
+    {
+      id: 3,
+      status: 92,
+      leader: 'Keith',
+      date: '12 Aug 2021',
+      name: 'Logo Designs',
+      avatar: '/images/icons/project-icons/sketch-label.png',
+      avatarGroup: [avatar7, avatar8, avatar1, avatar2],
+    },
+    {
+      id: 4,
+      status: 56,
+      leader: 'Merline',
+      date: '19 Apr 2021',
+      name: 'IOS App Design',
+      avatar: '/images/icons/project-icons/sketch-label.png',
+      avatarGroup: [avatar3, avatar4, avatar5, avatar6],
+    },
+    {
+      id: 5,
+      status: 25,
+      leader: 'Harmonia',
+      date: '08 Apr 2021',
+      name: 'Figma Dashboards',
+      avatar: figmaLabel,
+      avatarGroup: [avatar7, avatar8, avatar1],
+    },
+    {
+      id: 6,
+      status: 36,
+      leader: 'Allyson',
+      date: '29 Sept 2021',
+      name: 'Crypto Admin',
+      avatar: htmlLabel,
+      avatarGroup: [avatar2, avatar3, avatar4, avatar5],
+    },
+    {
+      id: 7,
+      status: 72,
+      leader: 'Georgie',
+      date: '20 Mar 2021',
+      name: 'Create Website',
+      avatar: reactLabel,
+      avatarGroup: [avatar6, avatar7, avatar8, avatar1],
+    },
+    {
+      id: 8,
+      status: 89,
+      leader: 'Fred',
+      date: '09 Feb 2021',
+      name: 'App Design',
+      avatar: xdLabel,
+      avatarGroup: [avatar2, avatar3, avatar4, avatar5],
+    },
+    {
+      id: 9,
+      status: 77,
+      leader: 'Richardo',
+      date: '17 June 2021',
+      name: 'Angular APIs',
+      avatar: figmaLabel,
+      avatarGroup: [avatar6, avatar7, avatar8, avatar1],
+    },
+    {
+      id: 10,
+      status: 100,
+      leader: 'Genevra',
+      date: '06 Oct 2021',
+      name: 'Admin Template',
+      avatar: vueLabel,
+      avatarGroup: [avatar2, avatar3, avatar4, avatar5],
+    },
+  ],
+}

resources/js/plugins/fake-api/handlers/pages/profile/index.js

@@ -0,0 +1,18 @@
+import { HttpResponse, http } from 'msw'
+import { db } from '@db/pages/profile/db'
+
+// Handler for pages/profile
+export const handlerPagesProfile = [
+  // GET /pages/profile
+  http.get(('/api/pages/profile'), ({ request }) => {
+    const url = new URL(request.url)
+    const tab = url.searchParams.get('tab') || ''
+    
+    return HttpResponse.json(db.data[tab], { status: 200 })
+  }),
+
+  // GET /pages/profile/header
+  http.get(('/api/pages/profile/header'), () => {
+    return HttpResponse.json(db.data.profileHeader, { status: 200 })
+  }),
+]

resources/js/plugins/fake-api/handlers/pages/profile/types.js

@@ -0,0 +1 @@
+export {}

resources/js/plugins/fake-api/index.js

@@ -0,0 +1,32 @@
+import { setupWorker } from 'msw/browser'
+
+// Handlers
+import { handlerAppBarSearch } from '@db/app-bar-search/index'
+import { handlerAppsAcademy } from '@db/apps/academy/index'
+import { handlerAppsCalendar } from '@db/apps/calendar/index'
+import { handlerAppsChat } from '@db/apps/chat/index'
+import { handlerAppsEcommerce } from '@db/apps/ecommerce/index'
+import { handlerAppsEmail } from '@db/apps/email/index'
+import { handlerAppsInvoice } from '@db/apps/invoice/index'
+import { handlerAppsKanban } from '@db/apps/kanban/index'
+import { handlerAppLogistics } from '@db/apps/logistics/index'
+import { handlerAppsPermission } from '@db/apps/permission/index'
+import { handlerAppsUsers } from '@db/apps/users/index'
+import { handlerAuth } from '@db/auth/index'
+import { handlerDashboard } from '@db/dashboard/index'
+import { handlerPagesDatatable } from '@db/pages/datatable/index'
+import { handlerPagesFaq } from '@db/pages/faq/index'
+import { handlerPagesHelpCenter } from '@db/pages/help-center/index'
+import { handlerPagesProfile } from '@db/pages/profile/index'
+
+const worker = setupWorker(...handlerAppsEcommerce, ...handlerAppsAcademy, ...handlerAppsInvoice, ...handlerAppsUsers, ...handlerAppsEmail, ...handlerAppsCalendar, ...handlerAppsChat, ...handlerAppsPermission, ...handlerPagesHelpCenter, ...handlerPagesProfile, ...handlerPagesFaq, ...handlerPagesDatatable, ...handlerAppBarSearch, ...handlerAppLogistics, ...handlerAuth, ...handlerAppsKanban, ...handlerDashboard)
+export default function () {
+  const workerUrl = `${import.meta.env.BASE_URL.replace(/build\/$/g, '') ?? '/'}mockServiceWorker.js`
+
+  worker.start({
+    serviceWorker: {
+      url: workerUrl,
+    },
+    onUnhandledRequest: 'bypass',
+  })
+}

resources/js/plugins/fake-api/utils/genId.js

@@ -0,0 +1,8 @@
+export const genId = array => {
+  const { length } = array
+  let lastIndex = 0
+  if (length)
+    lastIndex = Number(array[length - 1]?.id) + 1
+  
+  return lastIndex || (length + 1)
+}

resources/js/plugins/fake-api/utils/paginateArray.js

@@ -0,0 +1 @@
+export const paginateArray = (array, perPage, page) => array.slice((page - 1) * perPage, page * perPage)

resources/js/plugins/i18n/index.js

@@ -0,0 +1,23 @@
+import { createI18n } from 'vue-i18n'
+import { cookieRef } from '@layouts/stores/config'
+import { themeConfig } from '@themeConfig'
+
+const messages = Object.fromEntries(Object.entries(import.meta.glob('./locales/*.json', { eager: true }))
+  .map(([key, value]) => [key.slice(10, -5), value.default]))
+
+let _i18n = null
+export const getI18n = () => {
+  if (_i18n === null) {
+    _i18n = createI18n({
+      legacy: false,
+      locale: cookieRef('language', themeConfig.app.i18n.defaultLocale).value,
+      fallbackLocale: 'en',
+      messages,
+    })
+  }
+  
+  return _i18n
+}
+export default function (app) {
+  app.use(getI18n())
+}

resources/js/plugins/i18n/locales/ar.json

@@ -0,0 +1,213 @@
+{
+  "UI Elements": "عناصر واجهة المستخدم",
+  "Forms & Tables": "النماذج والجداول",
+  "Pages": "الصفحات",
+  "Charts & Maps": "الرسوم البيانية والخرائط",
+  "Others": "آحرون",
+  "Typography": "الطباعة",
+  "Cards": "البطاقات",
+  "Basic": "أساسي",
+  "Advance": "يتقدم",
+  "Widgets": "الحاجيات",
+  "Actions": "أجراءات",
+  "Components": "عناصر",
+  "Alert": "انذار",
+  "Close Alert": "أغلق التنبيه",
+  "Avatar": "الصورة الرمزية",
+  "Badge": "شارة",
+  "Button": "زر",
+  "Calendar": "تقويم",
+  "Kanban": "مجلس كانبان",
+  "Image": "صورة",
+  "Pagination": "ترقيم الصفحات",
+  "Progress Circular": "تقدم التعميم",
+  "Progress Linear": "تقدم خطي",
+  "Autocomplete": "الإكمال التلقائي",
+  "Tooltip": "تلميح",
+  "Slider": "المنزلق",
+  "Date Time Picker": "منتقي التاريخ والوقت",
+  "Select": "يختار",
+  "Switch": "يُحوّل",
+  "Checkbox": "خانة اختيار",
+  "Radio": "مذياع",
+  "Textarea": "تيكستاريا",
+  "Rating": "تقييم",
+  "File Input": "إدخال الملف",
+  "Otp Input": "إدخال أوتب",
+  "Form Layout": "تخطيط النموذج",
+  "Form Validation": "التحقق من صحة النموذج",
+  "Charts": "الرسوم البيانية",
+  "Apex Chart": "مخطط أبيكس",
+  "Chartjs": "تشارتجس",
+  "Account Settings": "إعدادت الحساب",
+  "User Profile": "ملف تعريفي للمستخدم",
+  "FAQ": "التعليمات",
+  "Dialog Examples": "أمثلة على الحوار",
+  "Pricing": "التسعير",
+  "List": "قائمة",
+  "Edit": "يحرر",
+  "Nav Levels": "مستويات التنقل",
+  "Level 2.1": "المستوى 2.1",
+  "Level 2.2": "مستوى 2.2",
+  "Level 3.1": "المستوى 3.1",
+  "Level 3.2": "المستوى 3.2",
+  "Raise Support": "رفع الدعم",
+  "Documentation": "توثيق",
+  "Dashboards": "لوحات القيادة",
+  "Apps & Pages": "التطبيقات والصفحات",
+  "Email": "البريد الإلكتروني",
+  "Chat": "دردشة",
+  "Invoice": "فاتورة",
+  "Preview": "معاينة",
+  "Add": "يضيف",
+  "User": "المستعمل",
+  "View": "رأي",
+  "Login v1": "تسجيل الدخول v1",
+  "Login v2": "تسجيل الدخول v2",
+  "Login": "تسجيل الدخول",
+  "Register v1": "تسجيل v1",
+  "Register v2": "تسجيل v2",
+  "Register": "تسجيل",
+  "Forget Password v1": "نسيت كلمة المرور v1",
+  "Forget Password v2": "نسيت كلمة المرور v2",
+  "Forgot Password v1": "نسيت كلمة المرور v1",
+  "Forgot Password v2": "نسيت كلمة المرور v2",
+  "Forgot Password": "نسيت كلمة المرور",
+  "Reset Password v1": "إعادة تعيين كلمة المرور v1",
+  "Reset Password v2": "إعادة تعيين كلمة المرور v2",
+  "Reset Password": "إعادة تعيين كلمة المرور",
+  "Miscellaneous": "متفرقات",
+  "Coming Soon": "قريبا",
+  "Not Authorized": "غير مخول",
+  "Under Maintenance": "تحت الصيانة",
+  "Error": "خطأ",
+  "Statistics": "إحصائيات",
+  "Analytics": "تحليلات",
+  "Access Control": "صلاحية التحكم صلاحية الدخول",
+  "User Interface": "واجهة المستخدم",
+  "CRM": "سي آر إم",
+  "Icons": "أيقونات",
+  "Chip": "رقاقة",
+  "Dialog": "حوار",
+  "Expansion Panel": "لوحة التوسع",
+  "Combobox": "صندوق التحرير",
+  "Textfield": "مجال التحرير مكان كتابة النص",
+  "Range Slider": "نطاق المنزلق",
+  "Menu": "قائمة الطعام",
+  "Snackbar": "مطعم الوجبات الخفيفة",
+  "Tabs": "نوافذ التبويب",
+  "Form Elements": "عناصر النموذج",
+  "Form Layouts": "تخطيطات النموذج",
+  "Authentication": "المصادقة",
+  "Page Not Found - 404": "الصفحة غير موجودة - 404",
+  "Not Authorized - 401": "غير مصرح - 401",
+  "Server Error - 500": "خطأ في الخادم - 500",
+  "2": "2",
+  "Forms": "نماذج",
+  "Timeline": "الجدول الزمني",
+  "Disabled Menu": "قائمة المعوقين",
+  "Help Center": "مركز المساعدة",
+  "Verify Email": "التحقق من البريد الإلكتروني",
+  "Verify Email v1": "تحقق من البريد الإلكتروني v1",
+  "Verify Email v2": "تحقق من البريد الإلكتروني v2",
+  "Two Steps": "خطوتين",
+  "Two Steps v1": "خطوتين v1.0",
+  "Two Steps v2": "خطوتين v2.0",
+  "Custom Input": "إدخال مخصص",
+  "Extensions": "ملحقات",
+  "Tour": "رحلة",
+  "Register Multi-Steps": "تسجيل خطوات متعددة",
+  "Wizard Examples": "أمثلة المعالج",
+  "Checkout": "الدفع",
+  "Create Deal": "إنشاء صفقة",
+  "Property Listing": "قائمة الممتلكات ",
+  "Roles & Permissions": "الأدوار والأذونات",
+  "Roles": "الأدوار",
+  "Permissions": "الأذونات",
+  "Simple Table": "جدول بسيط",
+  "Tables": "الجداول",
+  "DataTable": "جدول البيانات",
+  "Data Table": "جدول البيانات",
+  "Apps": "التطبيقات",
+  "Misc": "متفرقات",
+  "Wizard Pages": "صفحات المعالج",
+  "eCommerce": "التجارة الإلكترونية",
+  "Form Wizard": "معالج النموذج",
+  "Numbered": "مرقم",
+  "ecommerce": "التجارة الإلكترونية",
+  "Ecommerce": "التجارة الإلكترونية",
+  "Product": "المنتج",
+  "Category": "الفئة",
+  "Order": "طلب",
+  "Details": "تفاصيل",
+  "Customer": "الزبون",
+  "Manage Review": "إدارة المراجعة",
+  "Referrals": "الإحالات",
+  "Settings": "الإعدادات",
+  "Course Details": "تفاصيل الدورة التدريبية",
+  "My Course": "دورتي",
+  "Overview": "نظرة عامة",
+  "Academy": "أكاديمية",
+  "Logistics": "الخدمات اللوجستية",
+  "Dashboard": "لوحة القيادة",
+  "Fleet": "الأسطول",
+  "Editors": "المحررين",
+  "Front Pages": "الصفحات الأمامية",
+  "Landing": "المقصودة",
+  "checkout": "الدفع",
+  "Payment": "دفع",
+  "Swiper": "المنزلق",
+  "3": "3",
+  "5": "5",
+  "10": "10",
+  "20": "20",
+  "25": "25",
+  "50": "50",
+  "100": "100",
+  "$vuetify": {
+    "badge": "شارة",
+    "noDataText": "لا تتوافر بيانات",
+    "close": "قريب",
+    "open": "افتح",
+    "loading": "جار التحميل",
+    "carousel": {
+      "ariaLabel": {
+        "delimiter": "تحديد"
+      }
+    },
+    "dataFooter": {
+      "itemsPerPageText": "مواد لكل صفحة:",
+      "itemsPerPageAll": "الجميع",
+      "pageText": "{0} - {1} من {2}",
+      "firstPage": "الصفحة الأولى",
+      "prevPage": "الصفحة السابقة",
+      "nextPage": "الصفحة التالية",
+      "lastPage": "آخر صفحة"
+    },
+    "pagination": {
+      "ariaLabel": {
+        "root": "جذر",
+        "previous": "السابق",
+        "first": "أولاً",
+        "last": "آخر",
+        "next": "التالي",
+        "currentPage": "الصفحه الحاليه",
+        "page": "صفحة"
+      }
+    },
+    "input": {
+      "clear": "صافي",
+      "appendAction": "إلحاق الإجراء",
+      "prependAction": "قبل العمل",
+      "otp": "أوتب"
+    },
+    "fileInput": {
+      "counterSize": "حجم العداد"
+    },
+    "rating": {
+      "ariaLabel": {
+        "item": "العنصر"
+      }
+    }
+  }
+}

resources/js/plugins/i18n/locales/en.json

@@ -0,0 +1,213 @@
+{
+  "UI Elements": "UI Elements",
+  "Forms & Tables": "Forms & Tables",
+  "Pages": "Pages",
+  "Charts & Maps": "Charts & Maps",
+  "Others": "Others",
+  "Typography": "Typography",
+  "Cards": "Cards",
+  "Basic": "Basic",
+  "Advance": "Advance",
+  "Widgets": "Widgets",
+  "Components": "Components",
+  "Alert": "Alert",
+  "Close Alert": "Close Alert",
+  "Avatar": "Avatar",
+  "Badge": "Badge",
+  "Button": "Button",
+  "Calendar": "Calendar",
+  "Kanban": "Kanban",
+  "Image": "Image",
+  "Pagination": "Pagination",
+  "Progress Circular": "Progress Circular",
+  "Progress Linear": "Progress Linear",
+  "Autocomplete": "Autocomplete",
+  "Tooltip": "Tooltip",
+  "Slider": "Slider",
+  "Date Time Picker": "Date Time Picker",
+  "Select": "Select",
+  "Switch": "Switch",
+  "Checkbox": "Checkbox",
+  "Radio": "Radio",
+  "Textarea": "Textarea",
+  "Rating": "Rating",
+  "File Input": "File Input",
+  "Otp Input": "Otp Input",
+  "Form Layout": "Form Layout",
+  "Form Validation": "Form Validation",
+  "Charts": "Charts",
+  "Apex Chart": "Apex Chart",
+  "Chartjs": "Chartjs",
+  "Account Settings": "Account Settings",
+  "User Profile": "User Profile",
+  "FAQ": "FAQ",
+  "Dialog Examples": "Dialog Examples",
+  "Pricing": "Pricing",
+  "List": "List",
+  "Edit": "Edit",
+  "Nav Levels": "Nav Levels",
+  "Level 2.1": "Level 2.1",
+  "Level 2.2": "Level 2.2",
+  "Level 3.1": "Level 3.1",
+  "Level 3.2": "Level 3.2",
+  "Raise Support": "Raise Support",
+  "Documentation": "Documentation",
+  "Dashboards": "Dashboards",
+  "Analytics": "Analytics",
+  "Apps & Pages": "Apps & Pages",
+  "Email": "Email",
+  "Chat": "Chat",
+  "Invoice": "Invoice",
+  "Preview": "Preview",
+  "Add": "Add",
+  "User": "User",
+  "View": "View",
+  "Login v1": "Login v1",
+  "Login v2": "Login v2",
+  "Login": "Login",
+  "Register v1": "Register v1",
+  "Register v2": "Register v2",
+  "Register": "Register",
+  "Forget Password v1": "Forget Password v1",
+  "Forget Password v2": "Forget Password v2",
+  "Forgot Password v1": "Forgot Password v1",
+  "Forgot Password v2": "Forgot Password v2",
+  "Forgot Password": "Forgot Password",
+  "Reset Password v1": "Reset Password v1",
+  "Reset Password v2": "Reset Password v2",
+  "Reset Password": "Reset Password",
+  "Miscellaneous": "Miscellaneous",
+  "Coming Soon": "Coming Soon",
+  "Not Authorized": "Not Authorized",
+  "Under Maintenance": "Under Maintenance",
+  "Error": "Error",
+  "Statistics": "Statistics",
+  "Actions": "Actions",
+  "Access Control": "Access Control",
+  "User Interface": "User Interface",
+  "CRM": "CRM",
+  "eCommerce": "eCommerce",
+  "Icons": "Icons",
+  "Chip": "Chip",
+  "Dialog": "Dialog",
+  "Expansion Panel": "Expansion Panel",
+  "Combobox": "Combobox",
+  "Textfield": "Textfield",
+  "Range Slider": "Range Slider",
+  "Menu": "Menu",
+  "Snackbar": "Snackbar",
+  "Tabs": "Tabs",
+  "Form Elements": "Form Elements",
+  "Form Layouts": "Form Layouts",
+  "Authentication": "Authentication",
+  "Page Not Found - 404": "Page Not Found - 404",
+  "Not Authorized - 401": "Not Authorized - 401",
+  "Server Error - 500": "Server Error - 500",
+  "2": "2",
+  "Forms": "Forms",
+  "Timeline": "Timeline",
+  "Disabled Menu": "Disabled Menu",
+  "Help Center": "Help Center",
+  "Verify Email": "Verify Email",
+  "Verify Email v1": "Verify Email v1",
+  "Verify Email v2": "Verify Email v2",
+  "Two Steps": "Two Steps",
+  "Two Steps v1": "Two Steps v1",
+  "Two Steps v2": "Two Steps v2",
+  "Custom Input": "Custom Input",
+  "Extensions": "Extensions",
+  "Tour": "Tour",
+  "Register Multi-Steps": "Register Multi-Steps",
+  "Wizard Examples": "Wizard Examples",
+  "Checkout": "Checkout",
+  "Create Deal": "Create Deal",
+  "Property Listing": "Property Listing",
+  "Roles & Permissions": "Roles & Permissions",
+  "Roles": "Roles",
+  "Simple Table": "Simple Table",
+  "Tables": "Tables",
+  "Data Table": "Data Table",
+  "Permissions": "Permissions",
+  "Apps": "Apps",
+  "Misc": "Misc",
+  "Wizard Pages": "Wizard Pages",
+  "Form Wizard": "Form Wizard",
+  "Numbered": "Numbered",
+  "3": "3",
+  "ecommerce": "ecommerce",
+  "Ecommerce": "Ecommerce",
+  "Editors": "Editors",
+  "Front Pages": "Front Pages",
+  "Landing": "Landing",
+  "checkout": "checkout",
+  "Payment": "Payment",
+  "Swiper": "Swiper",
+  "Product": "Product",
+  "Category": "Category",
+  "Order": "Order",
+  "Details": "Details",
+  "Customer": "Customer",
+  "Manage Review": "Manage Review",
+  "Referrals": "Referrals",
+  "Settings": "Settings",
+  "Overview": "Overview",
+  "My Course": "My Course",
+  "Course Details": "Course Details",
+  "Academy": "Academy",
+  "Logistics": "Logistics",
+  "Dashboard": "Dashboard",
+  "Fleet": "Fleet",
+  "5": "5",
+  "10": "10",
+  "20": "20",
+  "25": "25",
+  "50": "50",
+  "100": "100",
+  "$vuetify": {
+    "badge": "Badge",
+    "noDataText": "No data available",
+    "close": "Close",
+    "open": "open",
+    "loading": "loading",
+    "carousel": {
+      "ariaLabel": {
+        "delimiter": "delimiter"
+      }
+    },
+    "dataFooter": {
+      "itemsPerPageText": "Items per page:",
+      "itemsPerPageAll": "All",
+      "pageText": "{0}-{1} of {2}",
+      "firstPage": "First Page",
+      "prevPage": "Previous Page",
+      "nextPage": "Next Page",
+      "lastPage": "Last Page"
+    },
+    "pagination": {
+      "ariaLabel": {
+        "root": "root",
+        "previous": "previous",
+        "first": "first",
+        "last": "last",
+        "next": "next",
+        "currentPage": "currentPage",
+        "page": "page"
+      }
+    },
+    "input": {
+      "clear": "clear",
+      "appendAction": "appendAction",
+      "prependAction": "prependAction",
+      "counterSize": "counterSize",
+      "otp": "otp"
+    },
+    "fileInput": {
+      "counterSize": "counterSize"
+    },
+    "rating": {
+      "ariaLabel": {
+        "item": "item"
+      }
+    }
+  }
+}

resources/js/plugins/i18n/locales/fr.json

@@ -0,0 +1,214 @@
+{
+  "UI Elements": "ÉLÉMENTS DE L'UI",
+  "Forms & Tables": "Formulaires et tableaux",
+  "Pages": "Des pages",
+  "Charts & Maps": "Graphiques et cartes",
+  "Others": "Autres",
+  "Typography": "Typographie",
+  "Cards": "Cartes",
+  "Basic": "De base",
+  "Advance": "Avance",
+  "Widgets": "Widget",
+  "Card Action": "Action de la carte",
+  "Components": "Composants",
+  "Alert": "Alerte",
+  "Close Alert": "Fermer l'alerte",
+  "Avatar": "Avatar",
+  "Badge": "Badge",
+  "Button": "Bouton",
+  "Calendar": "Calendrier",
+  "Kanban": "Tableau Kanban",
+  "Image": "Image",
+  "Pagination": "Pagination",
+  "Progress Circular": "Progrès circulaire",
+  "Progress Linear": "Progrès Linéaire",
+  "Autocomplete": "Saisie automatique",
+  "Tooltip": "Info-bulle",
+  "Slider": "Glissière",
+  "Date Time Picker": "Sélecteur de date et d'heure",
+  "Select": "Sélectionner",
+  "Switch": "Commutateur",
+  "Checkbox": "Case à cocher",
+  "Radio": "Radio",
+  "Textarea": "Textarea",
+  "Rating": "Évaluation",
+  "File Input": "Entrée de fichier",
+  "Otp Input": "Entrée Otp",
+  "Form Layout": "Disposition du formulaire",
+  "Form Validation": "Validation de formulaire",
+  "Charts": "Graphiques",
+  "Apex Chart": "Graphique Apex",
+  "Chartjs": "Chartjs",
+  "Account Settings": "Paramètres du compte",
+  "User Profile": "Profil de l'utilisateur",
+  "FAQ": "FAQ",
+  "Dialog Examples": "Exemples de dialogue",
+  "Pricing": "Tarification",
+  "List": "liste",
+  "Edit": "Éditer",
+  "Nav Levels": "Niveaux de navigation",
+  "Level 2.1": "Niveau 2.1",
+  "Level 2.2": "Niveau 2.2",
+  "Level 3.1": "Niveau 3.1",
+  "Level 3.2": "Niveau 3.2",
+  "Raise Support": "Augmenter le soutien",
+  "Documentation": "Documentation",
+  "Dashboards": "Tableaux de bord",
+  "Analytics": "Analytique",
+  "Apps & Pages": "Applications et pages",
+  "Email": "Email",
+  "Chat": "Bavarder",
+  "Invoice": "Facture d'achat",
+  "Preview": "Aperçu",
+  "Add": "Ajouter",
+  "User": "Utilisateur",
+  "View": "Vue",
+  "Login v1": "Connexion v1",
+  "Login v2": "Connexion v2",
+  "Login": "Connexion",
+  "Register v1": "S'inscrire v1",
+  "Register v2": "S'inscrire v2",
+  "Register": "S'inscrire",
+  "Forget Password v1": "Oubliez le mot de passe v1",
+  "Forget Password v2": "Oubliez le mot de passe v2",
+  "Forgot Password v1": "Oubliez le mot de passe v1",
+  "Forgot Password v2": "Oubliez le mot de passe v2",
+  "Forgot Password": "Oubliez le mot de passe",
+  "Reset Password v1": "Réinitialiser le mot de passe v1",
+  "Reset Password v2": "Réinitialiser le mot de passe v2",
+  "Reset Password": "Réinitialiser le mot de passe",
+  "Miscellaneous": "Divers",
+  "Coming Soon": "Bientôt disponible",
+  "Not Authorized": "Pas autorisé",
+  "Under Maintenance": "En maintenance",
+  "Error": "Erreur",
+  "Statistics": "Statistiques",
+  "Card Actions": "Actions de la carte",
+  "Actions": "Actions",
+  "Access Control": "Contrôle d'accès",
+  "User Interface": "Interface utilisateur",
+  "CRM": "CRM",
+  "eCommerce": "commerce électronique",
+  "Icons": "Icône",
+  "Chip": "Ébrécher",
+  "Dialog": "Dialogue",
+  "Expansion Panel": "Panneau d'extension",
+  "Combobox": "Boîte combo",
+  "Textfield": "Champ de texte",
+  "Range Slider": "Curseur Gamme",
+  "Menu": "Menu",
+  "Snackbar": "Casse-croûte",
+  "Tabs": "Onglets",
+  "Form Elements": "Éléments de formulaire",
+  "Form Layouts": "Dispositions de formulaire",
+  "Authentication": "Authentification",
+  "Page Not Found - 404": "Page introuvable - 404",
+  "Not Authorized - 401": "Non autorisé - 401",
+  "Server Error - 500": "Erreur de serveur - 500",
+  "2": "2",
+  "Forms": "Formes",
+  "Timeline": "Chronologie",
+  "Disabled Menu": "Menu désactivé",
+  "Help Center": "Centre d'aide",
+  "Verify Email": "Vérifier les courriels",
+  "Verify Email v1": "Vérifier l'e-mail v1",
+  "Verify Email v2": "Vérifier l'e-mail v2",
+  "Two Steps": "Deux étapes",
+  "Two Steps v1": "Deux étapes v1",
+  "Two Steps v2": "Deux étapes v2",
+  "Custom Input": "Entrée personnalisée",
+  "Extensions": "Rallonges",
+  "Tour": "Tour",
+  "Register Multi-Steps": "Enregistrer plusieurs étapes",
+  "Wizard Examples": "Exemples de guide",
+  "Checkout": "Check-out",
+  "Create Deal": "Créer une offre",
+  "Property Listing": "Liste des propriétés",
+  "Roles & Permissions": "Rôles et autorisations",
+  "Roles": "Rôles",
+  "Permissions": "Autorisations",
+  "Simple Table": "Table simple",
+  "Tables": "Tables",
+  "Data Table": "Table de données",
+  "Apps": "Applications",
+  "Misc": "Divers",
+  "Wizard Pages": "Pages de l'assistant",
+  "Form Wizard": "Assistant de formulaire",
+  "Numbered": "Numéroté",
+  "3": "3",
+  "ecommerce": "commerce électronique",
+  "Ecommerce": "Commerce électronique",
+  "Product": "Produit",
+  "Category": "Catégorie",
+  "Order": "Ordre",
+  "Details": "Détails",
+  "Customer": "Client",
+  "Manage Review": "Gérer la revue",
+  "Referrals": "Références",
+  "Settings": "Paramètres",
+  "Course Details": "Détails du cours",
+  "My Course": "Mon cours",
+  "Overview": "Aperçu",
+  "Academy": "Académie",
+  "Logistics": "Logistique",
+  "Dashboard": "Tableau de bord",
+  "Fleet": "Flotte",
+  "Editors": "Éditeurs",
+  "Front Pages": "Pages frontales",
+  "Landing": "d'atterrissage",
+  "checkout": "Check-out",
+  "Payment": "Paiement",
+  "Swiper": "Swiper",
+  "5": "5",
+  "10": "10",
+  "20": "20",
+  "25": "25",
+  "50": "50",
+  "100": "100",
+  "$vuetify": {
+    "badge": "Badge",
+    "loading": "Chargement",
+    "noDataText": "Pas de données disponibles",
+    "close": "Fermer",
+    "open": "Ouvert",
+    "carousel": {
+      "ariaLabel": {
+        "delimiter": "délimiteur"
+      }
+    },
+    "dataFooter": {
+      "itemsPerPageText": "Objets par page:",
+      "itemsPerPageAll": "Tout",
+      "pageText": "{0}-{1} of {2}",
+      "firstPage": "Première page",
+      "prevPage": "Page précédente",
+      "nextPage": "Page suivante",
+      "lastPage": "Dernière page"
+    },
+    "pagination": {
+      "ariaLabel": {
+        "root": "racine",
+        "previous": "précédente",
+        "first": "d'abord",
+        "last": "dernière",
+        "next": "suivante",
+        "currentPage": "page actuelle",
+        "page": "page"
+      }
+    },
+    "input": {
+      "clear": "dégager",
+      "appendAction": "ajouter une action",
+      "prependAction": "préfixer l'action",
+      "otp": "otp"
+    },
+    "fileInput": {
+      "counterSize": "Taille du compteur"
+    },
+    "rating": {
+      "ariaLabel": {
+        "item": "Objet"
+      }
+    }
+  }
+}

resources/js/plugins/iconify/build-icons.js

@@ -0,0 +1,209 @@
+/**
+ * This is an advanced example for creating icon bundles for Iconify SVG Framework.
+ *
+ * It creates a bundle from:
+ * - All SVG files in a directory.
+ * - Custom JSON files.
+ * - Iconify icon sets.
+ * - SVG framework.
+ *
+ * This example uses Iconify Tools to import and clean up icons.
+ * For Iconify Tools documentation visit https://docs.iconify.design/tools/tools2/
+ */
+import { promises as fs } from 'node:fs';
+import { dirname, join } from 'node:path';
+// Installation: npm install --save-dev @iconify/tools @iconify/utils @iconify/json @iconify/iconify
+import { cleanupSVG, importDirectory, isEmptyColor, parseColors, runSVGO } from '@iconify/tools';
+import { getIcons, getIconsCSS, stringToIcon } from '@iconify/utils';
+const sources = {
+    svg: [
+    // {
+    //   dir: 'resources/images/iconify-svg',
+    //   monotone: true,
+    //   prefix: 'custom',
+    // },
+    // {
+    //   dir: 'emojis',
+    //   monotone: false,
+    //   prefix: 'emoji',
+    // },
+    ],
+    icons: [
+    // 'mdi:home',
+    // 'mdi:account',
+    // 'mdi:login',
+    // 'mdi:logout',
+    // 'octicon:book-24',
+    // 'octicon:code-square-24',
+    ],
+    json: [
+        // Custom JSON file
+        // 'json/gg.json',
+        // Iconify JSON file (@iconify/json is a package name, /json/ is directory where files are, then filename)
+        require.resolve('@iconify-json/tabler/icons.json'),
+        {
+            filename: require.resolve('@iconify-json/mdi/icons.json'),
+            icons: [
+                'close-circle',
+                'language-javascript',
+                'language-typescript',
+            ],
+        },
+        {
+            filename: require.resolve('@iconify-json/fa/icons.json'),
+            icons: [
+                'circle',
+            ],
+        },
+        // Custom file with only few icons
+        // {
+        //   filename: require.resolve('@iconify-json/line-md/icons.json'),
+        //   icons: [
+        //     'home-twotone-alt',
+        //     'github',
+        //     'document-list',
+        //     'document-code',
+        //     'image-twotone',
+        //   ],
+        // },
+    ],
+};
+// File to save bundle to
+const target = join(__dirname, 'icons.css');
+(async function () {
+    // Create directory for output if missing
+    const dir = dirname(target);
+    try {
+        await fs.mkdir(dir, {
+            recursive: true,
+        });
+    }
+    catch (err) {
+        //
+    }
+    const allIcons = [];
+    /**
+     * Convert sources.icons to sources.json
+     */
+    if (sources.icons) {
+        const sourcesJSON = sources.json ? sources.json : (sources.json = []);
+        // Sort icons by prefix
+        const organizedList = organizeIconsList(sources.icons);
+        for (const prefix in organizedList) {
+            const filename = require.resolve(`@iconify/json/json/${prefix}.json`);
+            sourcesJSON.push({
+                filename,
+                icons: organizedList[prefix],
+            });
+        }
+    }
+    /**
+     * Bundle JSON files and collect icons
+     */
+    if (sources.json) {
+        for (let i = 0; i < sources.json.length; i++) {
+            const item = sources.json[i];
+            // Load icon set
+            const filename = typeof item === 'string' ? item : item.filename;
+            const content = JSON.parse(await fs.readFile(filename, 'utf8'));
+            for (const key in content) {
+                if (key === 'prefix' && content.prefix === 'tabler') {
+                    for (const k in content.icons)
+                        content.icons[k].body = content.icons[k].body.replace(/stroke-width="2"/g, 'stroke-width="1.5"');
+                }
+            }
+            // Filter icons
+            if (typeof item !== 'string' && item.icons?.length) {
+                const filteredContent = getIcons(content, item.icons);
+                if (!filteredContent)
+                    throw new Error(`Cannot find required icons in ${filename}`);
+                // Collect filtered icons
+                allIcons.push(filteredContent);
+            }
+            else {
+                // Collect all icons from the JSON file
+                allIcons.push(content);
+            }
+        }
+    }
+    /**
+     * Bundle custom SVG icons and collect icons
+     */
+    if (sources.svg) {
+        for (let i = 0; i < sources.svg.length; i++) {
+            const source = sources.svg[i];
+            // Import icons
+            const iconSet = await importDirectory(source.dir, {
+                prefix: source.prefix,
+            });
+            // Validate, clean up, fix palette, etc.
+            await iconSet.forEach(async (name, type) => {
+                if (type !== 'icon')
+                    return;
+                // Get SVG instance for parsing
+                const svg = iconSet.toSVG(name);
+                if (!svg) {
+                    // Invalid icon
+                    iconSet.remove(name);
+                    return;
+                }
+                // Clean up and optimise icons
+                try {
+                    // Clean up icon code
+                    await cleanupSVG(svg);
+                    if (source.monotone) {
+                        // Replace color with currentColor, add if missing
+                        // If icon is not monotone, remove this code
+                        await parseColors(svg, {
+                            defaultColor: 'currentColor',
+                            callback: (attr, colorStr, color) => {
+                                return !color || isEmptyColor(color) ? colorStr : 'currentColor';
+                            },
+                        });
+                    }
+                    // Optimise
+                    await runSVGO(svg);
+                }
+                catch (err) {
+                    // Invalid icon
+                    console.error(`Error parsing ${name} from ${source.dir}:`, err);
+                    iconSet.remove(name);
+                    return;
+                }
+                // Update icon from SVG instance
+                iconSet.fromSVG(name, svg);
+            });
+            // Collect the SVG icon
+            allIcons.push(iconSet.export());
+        }
+    }
+    // Generate CSS from collected icons
+    const cssContent = allIcons
+        .map(iconSet => getIconsCSS(iconSet, Object.keys(iconSet.icons), {
+        iconSelector: '.{prefix}-{name}',
+        mode: 'mask',
+    }))
+        .join('\n');
+    // Save the CSS to a file
+    await fs.writeFile(target, cssContent, 'utf8');
+    console.log(`Saved CSS to ${target}!`);
+})().catch(err => {
+    console.error(err);
+});
+/**
+ * Sort icon names by prefix
+ */
+function organizeIconsList(icons) {
+    const sorted = Object.create(null);
+    icons.forEach(icon => {
+        const item = stringToIcon(icon);
+        if (!item)
+            return;
+        const prefix = item.prefix;
+        const prefixList = sorted[prefix] ? sorted[prefix] : (sorted[prefix] = []);
+        const name = item.name;
+        if (!prefixList.includes(name))
+            prefixList.push(name);
+    });
+    return sorted;
+}

resources/js/plugins/iconify/index.js

@@ -0,0 +1,4 @@
+import './icons.css';
+export default function () {
+    // This plugin just requires icons import
+}

resources/js/plugins/iconify/package.json

@@ -0,0 +1,3 @@
+{
+  "type": "commonjs"
+}

resources/js/plugins/layouts.js

@@ -0,0 +1,10 @@
+import { createLayouts } from '@layouts'
+import { layoutConfig } from '@themeConfig'
+
+// Styles
+import '@layouts/styles/index.scss'
+
+export default function (app) {
+  // ℹ️ We generate layout config from our themeConfig so you don't have to write config twice
+  app.use(createLayouts(layoutConfig))
+}

resources/js/plugins/vuetify/defaults.js

@@ -0,0 +1,191 @@
+export default {
+  IconBtn: {
+    icon: true,
+    color: 'default',
+    variant: 'text',
+  },
+  VAlert: {
+    density: 'comfortable',
+    VBtn: {
+      color: undefined,
+    },
+  },
+  VAvatar: {
+    // ℹ️ Remove after next release
+    variant: 'flat',
+  },
+  VBadge: {
+    // set v-badge default color to primary
+    color: 'primary',
+  },
+  VBtn: {
+    // set v-btn default color to primary
+    color: 'primary',
+  },
+  VChip: {
+    label: true,
+  },
+  VDataTable: {
+    VPagination: {
+      showFirstLastPage: true,
+      firstIcon: 'tabler-chevrons-left',
+      lastIcon: 'tabler-chevrons-right',
+    },
+  },
+  VDataTableServer: {
+    VPagination: {
+      showFirstLastPage: true,
+      firstIcon: 'tabler-chevrons-left',
+      lastIcon: 'tabler-chevrons-right',
+    },
+  },
+  VExpansionPanel: {
+    expandIcon: 'tabler-chevron-right',
+    collapseIcon: 'tabler-chevron-right',
+  },
+  VExpansionPanelTitle: {
+    expandIcon: 'tabler-chevron-right',
+    collapseIcon: 'tabler-chevron-right',
+  },
+  VList: {
+    color: 'primary',
+    density: 'compact',
+    VCheckboxBtn: {
+      density: 'compact',
+    },
+    VListItem: {
+      ripple: false,
+      VAvatar: {
+        size: 40,
+      },
+    },
+  },
+  VMenu: {
+    offset: '2px',
+  },
+  VPagination: {
+    density: 'comfortable',
+    variant: 'tonal',
+  },
+  VTabs: {
+    // set v-tabs default color to primary
+    color: 'primary',
+    density: 'comfortable',
+    VSlideGroup: {
+      showArrows: true,
+    },
+  },
+  VTooltip: {
+    // set v-tooltip default location to top
+    location: 'top',
+  },
+  VCheckboxBtn: {
+    color: 'primary',
+  },
+  VCheckbox: {
+    // set v-checkbox default color to primary
+    color: 'primary',
+    density: 'comfortable',
+    hideDetails: 'auto',
+  },
+  VRadioGroup: {
+    color: 'primary',
+    density: 'comfortable',
+    hideDetails: 'auto',
+  },
+  VRadio: {
+    density: 'comfortable',
+    hideDetails: 'auto',
+  },
+  VSelect: {
+    variant: 'outlined',
+    color: 'primary',
+    density: 'comfortable',
+    hideDetails: 'auto',
+    VChip: {
+      label: true,
+    },
+  },
+  VRangeSlider: {
+    // set v-range-slider default color to primary
+    color: 'primary',
+    trackSize: 6,
+    thumbSize: 22,
+    density: 'comfortable',
+    thumbLabel: true,
+    hideDetails: 'auto',
+  },
+  VRating: {
+    // set v-rating default color to primary
+    color: 'warning',
+  },
+  VProgressLinear: {
+    height: 6,
+    roundedBar: true,
+    rounded: true,
+    bgColor: 'rgba(var(--v-track-bg))',
+  },
+  VSlider: {
+    // set v-range-slider default color to primary
+    color: 'primary',
+    thumbLabel: true,
+    hideDetails: 'auto',
+    thumbSize: 22,
+    trackSize: 6,
+    elevation: 4,
+  },
+  VTextField: {
+    variant: 'outlined',
+    density: 'comfortable',
+    color: 'primary',
+    hideDetails: 'auto',
+  },
+  VAutocomplete: {
+    variant: 'outlined',
+    color: 'primary',
+    density: 'comfortable',
+    hideDetails: 'auto',
+    menuProps: {
+      contentClass: 'app-autocomplete__content v-autocomplete__content',
+    },
+    VChip: {
+      label: true,
+    },
+  },
+  VCombobox: {
+    variant: 'outlined',
+    density: 'comfortable',
+    color: 'primary',
+    hideDetails: 'auto',
+    VChip: {
+      label: true,
+    },
+  },
+  VFileInput: {
+    variant: 'outlined',
+    density: 'comfortable',
+    color: 'primary',
+    hideDetails: 'auto',
+  },
+  VTextarea: {
+    variant: 'outlined',
+    density: 'comfortable',
+    color: 'primary',
+    hideDetails: 'auto',
+  },
+  VSnackbar: {
+    VBtn: {
+      density: 'comfortable',
+    },
+  },
+  VSwitch: {
+    // set v-switch default color to primary
+    inset: true,
+    color: 'primary',
+    hideDetails: 'auto',
+    ripple: false,
+  },
+  VNavigationDrawer: {
+    touchless: true,
+  },
+}

resources/js/plugins/vuetify/icons.js

@@ -0,0 +1,77 @@
+import checkboxChecked from '@images/svg/checkbox-checked.svg'
+import checkboxIndeterminate from '@images/svg/checkbox-indeterminate.svg'
+import checkboxUnchecked from '@images/svg/checkbox-unchecked.svg'
+import radioChecked from '@images/svg/radio-checked.svg'
+import radioUnchecked from '@images/svg/radio-unchecked.svg'
+
+const customIcons = {
+  'mdi-checkbox-blank-outline': checkboxUnchecked,
+  'mdi-checkbox-marked': checkboxChecked,
+  'mdi-minus-box': checkboxIndeterminate,
+  'mdi-radiobox-marked': radioChecked,
+  'mdi-radiobox-blank': radioUnchecked,
+}
+
+const aliases = {
+  calendar: 'tabler-calendar',
+  collapse: 'tabler-chevron-up',
+  complete: 'tabler-check',
+  cancel: 'tabler-x',
+  close: 'tabler-x',
+  delete: 'tabler-circle-x-filled',
+  clear: 'tabler-circle-x',
+  success: 'tabler-circle-check',
+  info: 'tabler-info-circle',
+  warning: 'tabler-alert-triangle',
+  error: 'tabler-alert-circle',
+  prev: 'tabler-chevron-left',
+  ratingEmpty: 'tabler-star',
+  ratingFull: 'tabler-star-filled',
+  ratingHalf: 'tabler-star-half-filled',
+  next: 'tabler-chevron-right',
+  delimiter: 'tabler-circle',
+  sort: 'tabler-arrow-up',
+  expand: 'tabler-chevron-down',
+  menu: 'tabler-menu-2',
+  subgroup: 'tabler-caret-down',
+  dropdown: 'tabler-chevron-down',
+  edit: 'tabler-pencil',
+  loading: 'tabler-refresh',
+  first: 'tabler-player-skip-back',
+  last: 'tabler-player-skip-forward',
+  unfold: 'tabler-arrows-move-vertical',
+  file: 'tabler-paperclip',
+  plus: 'tabler-plus',
+  minus: 'tabler-minus',
+  sortAsc: 'tabler-arrow-up',
+  sortDesc: 'tabler-arrow-down',
+}
+
+export const iconify = {
+  component: props => {
+    // Load custom SVG directly instead of going through icon component
+    if (typeof props.icon === 'string') {
+      const iconComponent = customIcons[props.icon]
+      if (iconComponent)
+        return h(iconComponent)
+    }
+    
+    return h(props.tag, {
+      ...props,
+
+      // As we are using class based icons
+      class: [props.icon],
+
+      // Remove used props from DOM rendering
+      tag: undefined,
+      icon: undefined,
+    })
+  },
+}
+export const icons = {
+  defaultSet: 'iconify',
+  aliases,
+  sets: {
+    iconify,
+  },
+}

resources/js/plugins/vuetify/index.js

@@ -0,0 +1,51 @@
+import { deepMerge } from '@antfu/utils'
+import { useI18n } from 'vue-i18n'
+import { createVuetify } from 'vuetify'
+import { VBtn } from 'vuetify/components/VBtn'
+import { createVueI18nAdapter } from 'vuetify/locale/adapters/vue-i18n'
+import defaults from './defaults'
+import { icons } from './icons'
+import { staticPrimaryColor, staticPrimaryDarkenColor, themes } from './theme'
+import { getI18n } from '@/plugins/i18n/index'
+import { themeConfig } from '@themeConfig'
+
+// Styles
+import { cookieRef } from '@/@layouts/stores/config'
+import '@core-scss/template/libs/vuetify/index.scss'
+import 'vuetify/styles'
+
+export default function (app) {
+  const cookieThemeValues = {
+    defaultTheme: resolveVuetifyTheme(themeConfig.app.theme),
+    themes: {
+      light: {
+        colors: {
+          'primary': cookieRef('lightThemePrimaryColor', staticPrimaryColor).value,
+          'primary-darken-1': cookieRef('lightThemePrimaryDarkenColor', staticPrimaryDarkenColor).value,
+        },
+      },
+      dark: {
+        colors: {
+          'primary': cookieRef('darkThemePrimaryColor', staticPrimaryColor).value,
+          'primary-darken-1': cookieRef('darkThemePrimaryDarkenColor', staticPrimaryDarkenColor).value,
+        },
+      },
+    },
+  }
+
+  const optionTheme = deepMerge({ themes }, cookieThemeValues)
+
+  const vuetify = createVuetify({
+    aliases: {
+      IconBtn: VBtn,
+    },
+    defaults,
+    icons,
+    theme: optionTheme,
+    locale: {
+      adapter: createVueI18nAdapter({ i18n: getI18n(), useI18n }),
+    },
+  })
+
+  app.use(vuetify)
+}

resources/js/plugins/vuetify/theme.js

@@ -0,0 +1,150 @@
+export const staticPrimaryColor = '#7367F0'
+export const staticPrimaryDarkenColor = '#675DD8'
+export const themes = {
+  light: {
+    dark: false,
+    colors: {
+      'primary': staticPrimaryColor,
+      'on-primary': '#fff',
+      'primary-darken-1': '#675DD8',
+      'secondary': '#808390',
+      'on-secondary': '#fff',
+      'secondary-darken-1': '#737682',
+      'success': '#28C76F',
+      'on-success': '#fff',
+      'success-darken-1': '#24B364',
+      'info': '#00BAD1',
+      'on-info': '#fff',
+      'info-darken-1': '#00A7BC',
+      'warning': '#FF9F43',
+      'on-warning': '#fff',
+      'warning-darken-1': '#E68F3C',
+      'error': '#FF4C51',
+      'on-error': '#fff',
+      'error-darken-1': '#E64449',
+      'background': '#F8F7FA',
+      'on-background': '#2F2B3D',
+      'surface': '#fff',
+      'on-surface': '#2F2B3D',
+      'grey-50': '#FAFAFA',
+      'grey-100': '#F5F5F5',
+      'grey-200': '#EEEEEE',
+      'grey-300': '#E0E0E0',
+      'grey-400': '#BDBDBD',
+      'grey-500': '#9E9E9E',
+      'grey-600': '#757575',
+      'grey-700': '#616161',
+      'grey-800': '#424242',
+      'grey-900': '#212121',
+      'grey-light': '#FAFAFA',
+      'perfect-scrollbar-thumb': '#DBDADE',
+      'skin-bordered-background': '#fff',
+      'skin-bordered-surface': '#fff',
+      'expansion-panel-text-custom-bg': '#fafafa',
+    },
+    variables: {
+      'code-color': '#d400ff',
+      'overlay-scrim-background': '#2F2B3D',
+      'tooltip-background': '#2F2B3D',
+      'overlay-scrim-opacity': 0.5,
+      'hover-opacity': 0.06,
+      'focus-opacity': 0.1,
+      'selected-opacity': 0.08,
+      'activated-opacity': 0.16,
+      'pressed-opacity': 0.14,
+      'dragged-opacity': 0.1,
+      'disabled-opacity': 0.4,
+      'border-color': '#2F2B3D',
+      'border-opacity': 0.12,
+      'table-header-color': '#EAEAEC',
+      'high-emphasis-opacity': 0.9,
+      'medium-emphasis-opacity': 0.7,
+      'switch-opacity': 0.2,
+      'switch-disabled-track-opacity': 0.3,
+      'switch-disabled-thumb-opacity': 0.4,
+      'switch-checked-disabled-opacity': 0.3,
+      'track-bg': '#F1F0F2',
+
+      // Shadows
+      'shadow-key-umbra-color': '#2F2B3D',
+      'shadow-xs-opacity': 0.10,
+      'shadow-sm-opacity': 0.12,
+      'shadow-md-opacity': 0.14,
+      'shadow-lg-opacity': 0.16,
+      'shadow-xl-opacity': 0.18,
+    },
+  },
+  dark: {
+    dark: true,
+    colors: {
+      'primary': staticPrimaryColor,
+      'on-primary': '#fff',
+      'primary-darken-1': '#675DD8',
+      'secondary': '#808390',
+      'on-secondary': '#fff',
+      'secondary-darken-1': '#737682',
+      'success': '#28C76F',
+      'on-success': '#fff',
+      'success-darken-1': '#24B364',
+      'info': '#00BAD1',
+      'on-info': '#fff',
+      'info-darken-1': '#00A7BC',
+      'warning': '#FF9F43',
+      'on-warning': '#fff',
+      'warning-darken-1': '#E68F3C',
+      'error': '#FF4C51',
+      'on-error': '#fff',
+      'error-darken-1': '#E64449',
+      'background': '#25293C',
+      'on-background': '#E1DEF5',
+      'surface': '#2F3349',
+      'on-surface': '#E1DEF5',
+      'grey-50': '#26293A',
+      'grey-100': '#2F3349',
+      'grey-200': '#26293A',
+      'grey-300': '#4A5072',
+      'grey-400': '#5E6692',
+      'grey-500': '#7983BB',
+      'grey-600': '#AAB3DE',
+      'grey-700': '#B6BEE3',
+      'grey-800': '#CFD3EC',
+      'grey-900': '#E7E9F6',
+      'grey-light': '#353A52',
+      'perfect-scrollbar-thumb': '#4A5072',
+      'skin-bordered-background': '#2F3349',
+      'skin-bordered-surface': '#2F3349',
+    },
+    variables: {
+      'code-color': '#d400ff',
+      'overlay-scrim-background': '#171925',
+      'tooltip-background': '#F7F4FF',
+      'overlay-scrim-opacity': 0.6,
+      'hover-opacity': 0.06,
+      'focus-opacity': 0.1,
+      'selected-opacity': 0.08,
+      'activated-opacity': 0.16,
+      'pressed-opacity': 0.14,
+      'dragged-opacity': 0.1,
+      'disabled-opacity': 0.4,
+      'border-color': '#E1DEF5',
+      'border-opacity': 0.12,
+      'table-header-color': '#535876',
+      'high-emphasis-opacity': 0.9,
+      'medium-emphasis-opacity': 0.7,
+      'switch-opacity': 0.4,
+      'switch-disabled-track-opacity': 0.4,
+      'switch-disabled-thumb-opacity': 0.8,
+      'switch-checked-disabled-opacity': 0.3,
+      'track-bg': '#3A3F57',
+
+      // Shadows
+      'shadow-key-umbra-color': '#131120',
+      'shadow-xs-opacity': 0.16,
+      'shadow-sm-opacity': 0.18,
+      'shadow-md-opacity': 0.2,
+      'shadow-lg-opacity': 0.22,
+      'shadow-xl-opacity': 0.24,
+    },
+  },
+}
+export default themes

resources/js/plugins/webfontloader.js

@@ -0,0 +1,17 @@
+/**
+ * plugins/webfontloader.js
+ *
+ * webfontloader documentation: https://github.com/typekit/webfontloader
+ */
+export async function loadFonts() {
+  const webFontLoader = await import(/* webpackChunkName: "webfontloader" */ 'webfontloader')
+
+  webFontLoader.load({
+    google: {
+      families: ['Public+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap'],
+    },
+  })
+}
+export default function () {
+  loadFonts()
+}