import * as icon from '@mdi/js';
import Head from 'next/head';
import React from 'react';
import axios from 'axios';
import type { ReactElement } from 'react';
import LayoutAuthenticated from '../layouts/Authenticated';
import SectionMain from '../components/SectionMain';
import SectionTitleLineWithButton from '../components/SectionTitleLineWithButton';
import BaseIcon from '../components/BaseIcon';
import { getPageTitle } from '../config';
import Link from 'next/link';
import { useTranslation } from 'next-i18next';

import { hasPermission } from '../helpers/userPermissions';
import { fetchWidgets } from '../stores/roles/rolesSlice';
import { WidgetCreator } from '../components/WidgetCreator/WidgetCreator';
import { SmartWidget } from '../components/SmartWidget/SmartWidget';

import { useAppDispatch, useAppSelector } from '../stores/hooks';
const Dashboard = () => {
  const { t } = useTranslation('common');
  const dispatch = useAppDispatch();
  const iconsColor = useAppSelector((state) => state.style.iconsColor);
  const corners = useAppSelector((state) => state.style.corners);
  const cardsStyle = useAppSelector((state) => state.style.cardsStyle);

  const loadingMessage = t('pages.dashboard.loading', {
    defaultValue: 'Loading...',
  });

  const [users, setUsers] = React.useState(loadingMessage);
  const [app_accounts, setApp_accounts] = React.useState(loadingMessage);
  const [applications, setApplications] = React.useState(loadingMessage);
  const [approvals, setApprovals] = React.useState(loadingMessage);
  const [audit_logs, setAudit_logs] = React.useState(loadingMessage);
  const [benefit_plans, setBenefit_plans] = React.useState(loadingMessage);
  const [bills, setBills] = React.useState(loadingMessage);
  const [candidates, setCandidates] = React.useState(loadingMessage);
  const [cards, setCards] = React.useState(loadingMessage);
  const [compensations, setCompensations] = React.useState(loadingMessage);
  const [deductions, setDeductions] = React.useState(loadingMessage);
  const [devices, setDevices] = React.useState(loadingMessage);
  const [documents, setDocuments] = React.useState(loadingMessage);
  const [earnings, setEarnings] = React.useState(loadingMessage);
  const [employees, setEmployees] = React.useState(loadingMessage);
  const [employments, setEmployments] = React.useState(loadingMessage);
  const [enrollment_learnings, setEnrollment_learnings] =
    React.useState(loadingMessage);
  const [enrollments, setEnrollments] = React.useState(loadingMessage);
  const [expense_lines, setExpense_lines] = React.useState(loadingMessage);
  const [expense_reports, setExpense_reports] = React.useState(loadingMessage);
  const [goals, setGoals] = React.useState(loadingMessage);
  const [identity_accounts, setIdentity_accounts] =
    React.useState(loadingMessage);
  const [interviews, setInterviews] = React.useState(loadingMessage);
  const [inventory_events, setInventory_events] =
    React.useState(loadingMessage);
  const [job_requisitions, setJob_requisitions] =
    React.useState(loadingMessage);
  const [learning_courses, setLearning_courses] =
    React.useState(loadingMessage);
  const [leave_requests, setLeave_requests] = React.useState(loadingMessage);
  const [offers, setOffers] = React.useState(loadingMessage);
  const [payments, setPayments] = React.useState(loadingMessage);
  const [payroll_runs, setPayroll_runs] = React.useState(loadingMessage);
  const [policies, setPolicies] = React.useState(loadingMessage);
  const [positions, setPositions] = React.useState(loadingMessage);
  const [review_cycles, setReview_cycles] = React.useState(loadingMessage);
  const [reviews, setReviews] = React.useState(loadingMessage);
  const [schedule_shifts, setSchedule_shifts] = React.useState(loadingMessage);
  const [taxes, setTaxes] = React.useState(loadingMessage);
  const [time_entries, setTime_entries] = React.useState(loadingMessage);
  const [timecards, setTimecards] = React.useState(loadingMessage);
  const [travel_bookings, setTravel_bookings] = React.useState(loadingMessage);
  const [vendors, setVendors] = React.useState(loadingMessage);
  const [roles, setRoles] = React.useState(loadingMessage);
  const [permissions, setPermissions] = React.useState(loadingMessage);
  const [organizations, setOrganizations] = React.useState(loadingMessage);

  const [widgetsRole, setWidgetsRole] = React.useState({
    role: { value: '', label: '' },
  });
  const { currentUser } = useAppSelector((state) => state.auth);
  const { isFetchingQuery } = useAppSelector((state) => state.openAi);

  const { rolesWidgets, loading } = useAppSelector((state) => state.roles);

  const organizationId = currentUser?.organizations?.id;

  async function loadData() {
    const entities = [
      'users',
      'app_accounts',
      'applications',
      'approvals',
      'audit_logs',
      'benefit_plans',
      'bills',
      'candidates',
      'cards',
      'compensations',
      'deductions',
      'devices',
      'documents',
      'earnings',
      'employees',
      'employments',
      'enrollment_learnings',
      'enrollments',
      'expense_lines',
      'expense_reports',
      'goals',
      'identity_accounts',
      'interviews',
      'inventory_events',
      'job_requisitions',
      'learning_courses',
      'leave_requests',
      'offers',
      'payments',
      'payroll_runs',
      'policies',
      'positions',
      'review_cycles',
      'reviews',
      'schedule_shifts',
      'taxes',
      'time_entries',
      'timecards',
      'travel_bookings',
      'vendors',
      'roles',
      'permissions',
      'organizations',
    ];
    const fns = [
      setUsers,
      setApp_accounts,
      setApplications,
      setApprovals,
      setAudit_logs,
      setBenefit_plans,
      setBills,
      setCandidates,
      setCards,
      setCompensations,
      setDeductions,
      setDevices,
      setDocuments,
      setEarnings,
      setEmployees,
      setEmployments,
      setEnrollment_learnings,
      setEnrollments,
      setExpense_lines,
      setExpense_reports,
      setGoals,
      setIdentity_accounts,
      setInterviews,
      setInventory_events,
      setJob_requisitions,
      setLearning_courses,
      setLeave_requests,
      setOffers,
      setPayments,
      setPayroll_runs,
      setPolicies,
      setPositions,
      setReview_cycles,
      setReviews,
      setSchedule_shifts,
      setTaxes,
      setTime_entries,
      setTimecards,
      setTravel_bookings,
      setVendors,
      setRoles,
      setPermissions,
      setOrganizations,
    ];

    const requests = entities.map((entity, index) => {
      if (hasPermission(currentUser, `READ_${entity.toUpperCase()}`)) {
        return axios.get(`/${entity.toLowerCase()}/count`);
      } else {
        fns[index](null);
        return Promise.resolve({ data: { count: null } });
      }
    });

    Promise.allSettled(requests).then((results) => {
      results.forEach((result, i) => {
        if (result.status === 'fulfilled') {
          fns[i](result.value.data.count);
        } else {
          fns[i](result.reason.message);
        }
      });
    });
  }

  async function getWidgets(roleId) {
    await dispatch(fetchWidgets(roleId));
  }
  React.useEffect(() => {
    if (!currentUser) return;
    loadData().then();
    setWidgetsRole({
      role: {
        value: currentUser?.app_role?.id,
        label: currentUser?.app_role?.name,
      },
    });
  }, [currentUser]);

  React.useEffect(() => {
    if (!currentUser || !widgetsRole?.role?.value) return;
    getWidgets(widgetsRole?.role?.value || '').then();
  }, [widgetsRole?.role?.value]);

  return (
    <>
      <Head>
        <title>
          {getPageTitle(
            t('pages.dashboard.pageTitle', { defaultValue: 'Overview' }),
          )}
        </title>
      </Head>
      <SectionMain>
        <SectionTitleLineWithButton
          icon={icon.mdiChartTimelineVariant}
          title={t('pages.dashboard.overview', { defaultValue: 'Overview' })}
          main
        >
          {''}
        </SectionTitleLineWithButton>

        {hasPermission(currentUser, 'CREATE_ROLES') && (
          <WidgetCreator
            currentUser={currentUser}
            isFetchingQuery={isFetchingQuery}
            setWidgetsRole={setWidgetsRole}
            widgetsRole={widgetsRole}
          />
        )}
        {!!rolesWidgets.length &&
          hasPermission(currentUser, 'CREATE_ROLES') && (
            <p className='  text-gray-500 dark:text-gray-400 mb-4'>
              {`${widgetsRole?.role?.label || 'Users'}'s widgets`}
            </p>
          )}

        <div className='grid grid-cols-1 gap-6 lg:grid-cols-4 mb-6 grid-flow-dense'>
          {(isFetchingQuery || loading) && (
            <div
              className={` ${
                corners !== 'rounded-full' ? corners : 'rounded-3xl'
              } dark:bg-dark-900 text-lg leading-tight   text-gray-500 flex items-center ${cardsStyle} dark:border-dark-700 p-6`}
            >
              <BaseIcon
                className={`${iconsColor} animate-spin mr-5`}
                w='w-16'
                h='h-16'
                size={48}
                path={icon.mdiLoading}
              />{' '}
              {t('pages.dashboard.loadingWidgets', {
                defaultValue: 'Loading widgets...',
              })}
            </div>
          )}

          {rolesWidgets &&
            rolesWidgets.map((widget) => (
              <SmartWidget
                key={widget.id}
                userId={currentUser?.id}
                widget={widget}
                roleId={widgetsRole?.role?.value || ''}
                admin={hasPermission(currentUser, 'CREATE_ROLES')}
              />
            ))}
        </div>

        {!!rolesWidgets.length && <hr className='my-6  ' />}

        <div
          id='dashboard'
          className='grid grid-cols-1 gap-6 lg:grid-cols-3 mb-6'
        >
          {hasPermission(currentUser, 'READ_USERS') && (
            <Link href={'/users/users-list'}>
              <div
                className={`${
                  corners !== 'rounded-full' ? corners : 'rounded-3xl'
                } dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
              >
                <div className='flex justify-between align-center'>
                  <div>
                    <div className='text-lg leading-tight   text-gray-500 dark:text-gray-400'>
                      Users
                    </div>
                    <div className='text-3xl leading-tight font-semibold'>
                      {users}
                    </div>
                  </div>
                  <div>
                    <BaseIcon
                      className={`${iconsColor}`}
                      w='w-16'
                      h='h-16'
                      size={48}
                      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                      // @ts-ignore
                      path={icon.mdiAccountGroup || icon.mdiTable}
                    />
                  </div>
                </div>
              </div>
            </Link>
          )}

          {hasPermission(currentUser, 'READ_APP_ACCOUNTS') && (
            <Link href={'/app_accounts/app_accounts-list'}>
              <div
                className={`${
                  corners !== 'rounded-full' ? corners : 'rounded-3xl'
                } dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
              >
                <div className='flex justify-between align-center'>
                  <div>
                    <div className='text-lg leading-tight   text-gray-500 dark:text-gray-400'>
                      App accounts
                    </div>
                    <div className='text-3xl leading-tight font-semibold'>
                      {app_accounts}
                    </div>
                  </div>
                  <div>
                    <BaseIcon
                      className={`${iconsColor}`}
                      w='w-16'
                      h='h-16'
                      size={48}
                      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                      // @ts-ignore
                      path={
                        'mdiApplication' in icon
                          ? icon['mdiApplication' as keyof typeof icon]
                          : icon.mdiTable || icon.mdiTable
                      }
                    />
                  </div>
                </div>
              </div>
            </Link>
          )}

          {hasPermission(currentUser, 'READ_APPLICATIONS') && (
            <Link href={'/applications/applications-list'}>
              <div
                className={`${
                  corners !== 'rounded-full' ? corners : 'rounded-3xl'
                } dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
              >
                <div className='flex justify-between align-center'>
                  <div>
                    <div className='text-lg leading-tight   text-gray-500 dark:text-gray-400'>
                      Applications
                    </div>
                    <div className='text-3xl leading-tight font-semibold'>
                      {applications}
                    </div>
                  </div>
                  <div>
                    <BaseIcon
                      className={`${iconsColor}`}
                      w='w-16'
                      h='h-16'
                      size={48}
                      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                      // @ts-ignore
                      path={
                        'mdiFileDocumentEdit' in icon
                          ? icon['mdiFileDocumentEdit' as keyof typeof icon]
                          : icon.mdiTable || icon.mdiTable
                      }
                    />
                  </div>
                </div>
              </div>
            </Link>
          )}

          {hasPermission(currentUser, 'READ_APPROVALS') && (
            <Link href={'/approvals/approvals-list'}>
              <div
                className={`${
                  corners !== 'rounded-full' ? corners : 'rounded-3xl'
                } dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
              >
                <div className='flex justify-between align-center'>
                  <div>
                    <div className='text-lg leading-tight   text-gray-500 dark:text-gray-400'>
                      Approvals
                    </div>
                    <div className='text-3xl leading-tight font-semibold'>
                      {approvals}
                    </div>
                  </div>
                  <div>
                    <BaseIcon
                      className={`${iconsColor}`}
                      w='w-16'
                      h='h-16'
                      size={48}
                      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                      // @ts-ignore
                      path={
                        'mdiCheckCircleOutline' in icon
                          ? icon['mdiCheckCircleOutline' as keyof typeof icon]
                          : icon.mdiTable || icon.mdiTable
                      }
                    />
                  </div>
                </div>
              </div>
            </Link>
          )}

          {hasPermission(currentUser, 'READ_AUDIT_LOGS') && (
            <Link href={'/audit_logs/audit_logs-list'}>
              <div
                className={`${
                  corners !== 'rounded-full' ? corners : 'rounded-3xl'
                } dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
              >
                <div className='flex justify-between align-center'>
                  <div>
                    <div className='text-lg leading-tight   text-gray-500 dark:text-gray-400'>
                      Audit logs
                    </div>
                    <div className='text-3xl leading-tight font-semibold'>
                      {audit_logs}
                    </div>
                  </div>
                  <div>
                    <BaseIcon
                      className={`${iconsColor}`}
                      w='w-16'
                      h='h-16'
                      size={48}
                      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                      // @ts-ignore
                      path={
                        'mdiClipboardListOutline' in icon
                          ? icon['mdiClipboardListOutline' as keyof typeof icon]
                          : icon.mdiTable || icon.mdiTable
                      }
                    />
                  </div>
                </div>
              </div>
            </Link>
          )}

          {hasPermission(currentUser, 'READ_BENEFIT_PLANS') && (
            <Link href={'/benefit_plans/benefit_plans-list'}>
              <div
                className={`${
                  corners !== 'rounded-full' ? corners : 'rounded-3xl'
                } dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
              >
                <div className='flex justify-between align-center'>
                  <div>
                    <div className='text-lg leading-tight   text-gray-500 dark:text-gray-400'>
                      Benefit plans
                    </div>
                    <div className='text-3xl leading-tight font-semibold'>
                      {benefit_plans}
                    </div>
                  </div>
                  <div>
                    <BaseIcon
                      className={`${iconsColor}`}
                      w='w-16'
                      h='h-16'
                      size={48}
                      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                      // @ts-ignore
                      path={
                        'mdiMedicalBag' in icon
                          ? icon['mdiMedicalBag' as keyof typeof icon]
                          : icon.mdiTable || icon.mdiTable
                      }
                    />
                  </div>
                </div>
              </div>
            </Link>
          )}

          {hasPermission(currentUser, 'READ_BILLS') && (
            <Link href={'/bills/bills-list'}>
              <div
                className={`${
                  corners !== 'rounded-full' ? corners : 'rounded-3xl'
                } dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
              >
                <div className='flex justify-between align-center'>
                  <div>
                    <div className='text-lg leading-tight   text-gray-500 dark:text-gray-400'>
                      Bills
                    </div>
                    <div className='text-3xl leading-tight font-semibold'>
                      {bills}
                    </div>
                  </div>
                  <div>
                    <BaseIcon
                      className={`${iconsColor}`}
                      w='w-16'
                      h='h-16'
                      size={48}
                      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                      // @ts-ignore
                      path={
                        'mdiFileInvoice' in icon
                          ? icon['mdiFileInvoice' as keyof typeof icon]
                          : icon.mdiTable || icon.mdiTable
                      }
                    />
                  </div>
                </div>
              </div>
            </Link>
          )}

          {hasPermission(currentUser, 'READ_CANDIDATES') && (
            <Link href={'/candidates/candidates-list'}>
              <div
                className={`${
                  corners !== 'rounded-full' ? corners : 'rounded-3xl'
                } dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
              >
                <div className='flex justify-between align-center'>
                  <div>
                    <div className='text-lg leading-tight   text-gray-500 dark:text-gray-400'>
                      Candidates
                    </div>
                    <div className='text-3xl leading-tight font-semibold'>
                      {candidates}
                    </div>
                  </div>
                  <div>
                    <BaseIcon
                      className={`${iconsColor}`}
                      w='w-16'
                      h='h-16'
                      size={48}
                      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                      // @ts-ignore
                      path={
                        'mdiAccountSearch' in icon
                          ? icon['mdiAccountSearch' as keyof typeof icon]
                          : icon.mdiTable || icon.mdiTable
                      }
                    />
                  </div>
                </div>
              </div>
            </Link>
          )}

          {hasPermission(currentUser, 'READ_CARDS') && (
            <Link href={'/cards/cards-list'}>
              <div
                className={`${
                  corners !== 'rounded-full' ? corners : 'rounded-3xl'
                } dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
              >
                <div className='flex justify-between align-center'>
                  <div>
                    <div className='text-lg leading-tight   text-gray-500 dark:text-gray-400'>
                      Cards
                    </div>
                    <div className='text-3xl leading-tight font-semibold'>
                      {cards}
                    </div>
                  </div>
                  <div>
                    <BaseIcon
                      className={`${iconsColor}`}
                      w='w-16'
                      h='h-16'
                      size={48}
                      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                      // @ts-ignore
                      path={
                        'mdiCreditCardOutline' in icon
                          ? icon['mdiCreditCardOutline' as keyof typeof icon]
                          : icon.mdiTable || icon.mdiTable
                      }
                    />
                  </div>
                </div>
              </div>
            </Link>
          )}

          {hasPermission(currentUser, 'READ_COMPENSATIONS') && (
            <Link href={'/compensations/compensations-list'}>
              <div
                className={`${
                  corners !== 'rounded-full' ? corners : 'rounded-3xl'
                } dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
              >
                <div className='flex justify-between align-center'>
                  <div>
                    <div className='text-lg leading-tight   text-gray-500 dark:text-gray-400'>
                      Compensations
                    </div>
                    <div className='text-3xl leading-tight font-semibold'>
                      {compensations}
                    </div>
                  </div>
                  <div>
                    <BaseIcon
                      className={`${iconsColor}`}
                      w='w-16'
                      h='h-16'
                      size={48}
                      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                      // @ts-ignore
                      path={
                        'mdiCurrencyUsd' in icon
                          ? icon['mdiCurrencyUsd' as keyof typeof icon]
                          : icon.mdiTable || icon.mdiTable
                      }
                    />
                  </div>
                </div>
              </div>
            </Link>
          )}

          {hasPermission(currentUser, 'READ_DEDUCTIONS') && (
            <Link href={'/deductions/deductions-list'}>
              <div
                className={`${
                  corners !== 'rounded-full' ? corners : 'rounded-3xl'
                } dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
              >
                <div className='flex justify-between align-center'>
                  <div>
                    <div className='text-lg leading-tight   text-gray-500 dark:text-gray-400'>
                      Deductions
                    </div>
                    <div className='text-3xl leading-tight font-semibold'>
                      {deductions}
                    </div>
                  </div>
                  <div>
                    <BaseIcon
                      className={`${iconsColor}`}
                      w='w-16'
                      h='h-16'
                      size={48}
                      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                      // @ts-ignore
                      path={
                        'mdiMinusCircle' in icon
                          ? icon['mdiMinusCircle' as keyof typeof icon]
                          : icon.mdiTable || icon.mdiTable
                      }
                    />
                  </div>
                </div>
              </div>
            </Link>
          )}

          {hasPermission(currentUser, 'READ_DEVICES') && (
            <Link href={'/devices/devices-list'}>
              <div
                className={`${
                  corners !== 'rounded-full' ? corners : 'rounded-3xl'
                } dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
              >
                <div className='flex justify-between align-center'>
                  <div>
                    <div className='text-lg leading-tight   text-gray-500 dark:text-gray-400'>
                      Devices
                    </div>
                    <div className='text-3xl leading-tight font-semibold'>
                      {devices}
                    </div>
                  </div>
                  <div>
                    <BaseIcon
                      className={`${iconsColor}`}
                      w='w-16'
                      h='h-16'
                      size={48}
                      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                      // @ts-ignore
                      path={
                        'mdiDevices' in icon
                          ? icon['mdiDevices' as keyof typeof icon]
                          : icon.mdiTable || icon.mdiTable
                      }
                    />
                  </div>
                </div>
              </div>
            </Link>
          )}

          {hasPermission(currentUser, 'READ_DOCUMENTS') && (
            <Link href={'/documents/documents-list'}>
              <div
                className={`${
                  corners !== 'rounded-full' ? corners : 'rounded-3xl'
                } dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
              >
                <div className='flex justify-between align-center'>
                  <div>
                    <div className='text-lg leading-tight   text-gray-500 dark:text-gray-400'>
                      Documents
                    </div>
                    <div className='text-3xl leading-tight font-semibold'>
                      {documents}
                    </div>
                  </div>
                  <div>
                    <BaseIcon
                      className={`${iconsColor}`}
                      w='w-16'
                      h='h-16'
                      size={48}
                      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                      // @ts-ignore
                      path={
                        'mdiFileDocument' in icon
                          ? icon['mdiFileDocument' as keyof typeof icon]
                          : icon.mdiTable || icon.mdiTable
                      }
                    />
                  </div>
                </div>
              </div>
            </Link>
          )}

          {hasPermission(currentUser, 'READ_EARNINGS') && (
            <Link href={'/earnings/earnings-list'}>
              <div
                className={`${
                  corners !== 'rounded-full' ? corners : 'rounded-3xl'
                } dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
              >
                <div className='flex justify-between align-center'>
                  <div>
                    <div className='text-lg leading-tight   text-gray-500 dark:text-gray-400'>
                      Earnings
                    </div>
                    <div className='text-3xl leading-tight font-semibold'>
                      {earnings}
                    </div>
                  </div>
                  <div>
                    <BaseIcon
                      className={`${iconsColor}`}
                      w='w-16'
                      h='h-16'
                      size={48}
                      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                      // @ts-ignore
                      path={
                        'mdiCurrencyUsdCircle' in icon
                          ? icon['mdiCurrencyUsdCircle' as keyof typeof icon]
                          : icon.mdiTable || icon.mdiTable
                      }
                    />
                  </div>
                </div>
              </div>
            </Link>
          )}

          {hasPermission(currentUser, 'READ_EMPLOYEES') && (
            <Link href={'/employees/employees-list'}>
              <div
                className={`${
                  corners !== 'rounded-full' ? corners : 'rounded-3xl'
                } dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
              >
                <div className='flex justify-between align-center'>
                  <div>
                    <div className='text-lg leading-tight   text-gray-500 dark:text-gray-400'>
                      Employees
                    </div>
                    <div className='text-3xl leading-tight font-semibold'>
                      {employees}
                    </div>
                  </div>
                  <div>
                    <BaseIcon
                      className={`${iconsColor}`}
                      w='w-16'
                      h='h-16'
                      size={48}
                      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                      // @ts-ignore
                      path={
                        'mdiAccount' in icon
                          ? icon['mdiAccount' as keyof typeof icon]
                          : icon.mdiTable || icon.mdiTable
                      }
                    />
                  </div>
                </div>
              </div>
            </Link>
          )}

          {hasPermission(currentUser, 'READ_EMPLOYMENTS') && (
            <Link href={'/employments/employments-list'}>
              <div
                className={`${
                  corners !== 'rounded-full' ? corners : 'rounded-3xl'
                } dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
              >
                <div className='flex justify-between align-center'>
                  <div>
                    <div className='text-lg leading-tight   text-gray-500 dark:text-gray-400'>
                      Employments
                    </div>
                    <div className='text-3xl leading-tight font-semibold'>
                      {employments}
                    </div>
                  </div>
                  <div>
                    <BaseIcon
                      className={`${iconsColor}`}
                      w='w-16'
                      h='h-16'
                      size={48}
                      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                      // @ts-ignore
                      path={
                        'mdiBriefcase' in icon
                          ? icon['mdiBriefcase' as keyof typeof icon]
                          : icon.mdiTable || icon.mdiTable
                      }
                    />
                  </div>
                </div>
              </div>
            </Link>
          )}

          {hasPermission(currentUser, 'READ_ENROLLMENT_LEARNINGS') && (
            <Link href={'/enrollment_learnings/enrollment_learnings-list'}>
              <div
                className={`${
                  corners !== 'rounded-full' ? corners : 'rounded-3xl'
                } dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
              >
                <div className='flex justify-between align-center'>
                  <div>
                    <div className='text-lg leading-tight   text-gray-500 dark:text-gray-400'>
                      Enrollment learnings
                    </div>
                    <div className='text-3xl leading-tight font-semibold'>
                      {enrollment_learnings}
                    </div>
                  </div>
                  <div>
                    <BaseIcon
                      className={`${iconsColor}`}
                      w='w-16'
                      h='h-16'
                      size={48}
                      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                      // @ts-ignore
                      path={
                        'mdiSchoolOutline' in icon
                          ? icon['mdiSchoolOutline' as keyof typeof icon]
                          : icon.mdiTable || icon.mdiTable
                      }
                    />
                  </div>
                </div>
              </div>
            </Link>
          )}

          {hasPermission(currentUser, 'READ_ENROLLMENTS') && (
            <Link href={'/enrollments/enrollments-list'}>
              <div
                className={`${
                  corners !== 'rounded-full' ? corners : 'rounded-3xl'
                } dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
              >
                <div className='flex justify-between align-center'>
                  <div>
                    <div className='text-lg leading-tight   text-gray-500 dark:text-gray-400'>
                      Enrollments
                    </div>
                    <div className='text-3xl leading-tight font-semibold'>
                      {enrollments}
                    </div>
                  </div>
                  <div>
                    <BaseIcon
                      className={`${iconsColor}`}
                      w='w-16'
                      h='h-16'
                      size={48}
                      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                      // @ts-ignore
                      path={
                        'mdiAccountGroup' in icon
                          ? icon['mdiAccountGroup' as keyof typeof icon]
                          : icon.mdiTable || icon.mdiTable
                      }
                    />
                  </div>
                </div>
              </div>
            </Link>
          )}

          {hasPermission(currentUser, 'READ_EXPENSE_LINES') && (
            <Link href={'/expense_lines/expense_lines-list'}>
              <div
                className={`${
                  corners !== 'rounded-full' ? corners : 'rounded-3xl'
                } dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
              >
                <div className='flex justify-between align-center'>
                  <div>
                    <div className='text-lg leading-tight   text-gray-500 dark:text-gray-400'>
                      Expense lines
                    </div>
                    <div className='text-3xl leading-tight font-semibold'>
                      {expense_lines}
                    </div>
                  </div>
                  <div>
                    <BaseIcon
                      className={`${iconsColor}`}
                      w='w-16'
                      h='h-16'
                      size={48}
                      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                      // @ts-ignore
                      path={
                        'mdiReceipt' in icon
                          ? icon['mdiReceipt' as keyof typeof icon]
                          : icon.mdiTable || icon.mdiTable
                      }
                    />
                  </div>
                </div>
              </div>
            </Link>
          )}

          {hasPermission(currentUser, 'READ_EXPENSE_REPORTS') && (
            <Link href={'/expense_reports/expense_reports-list'}>
              <div
                className={`${
                  corners !== 'rounded-full' ? corners : 'rounded-3xl'
                } dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
              >
                <div className='flex justify-between align-center'>
                  <div>
                    <div className='text-lg leading-tight   text-gray-500 dark:text-gray-400'>
                      Expense reports
                    </div>
                    <div className='text-3xl leading-tight font-semibold'>
                      {expense_reports}
                    </div>
                  </div>
                  <div>
                    <BaseIcon
                      className={`${iconsColor}`}
                      w='w-16'
                      h='h-16'
                      size={48}
                      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                      // @ts-ignore
                      path={
                        'mdiFileDocument' in icon
                          ? icon['mdiFileDocument' as keyof typeof icon]
                          : icon.mdiTable || icon.mdiTable
                      }
                    />
                  </div>
                </div>
              </div>
            </Link>
          )}

          {hasPermission(currentUser, 'READ_GOALS') && (
            <Link href={'/goals/goals-list'}>
              <div
                className={`${
                  corners !== 'rounded-full' ? corners : 'rounded-3xl'
                } dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
              >
                <div className='flex justify-between align-center'>
                  <div>
                    <div className='text-lg leading-tight   text-gray-500 dark:text-gray-400'>
                      Goals
                    </div>
                    <div className='text-3xl leading-tight font-semibold'>
                      {goals}
                    </div>
                  </div>
                  <div>
                    <BaseIcon
                      className={`${iconsColor}`}
                      w='w-16'
                      h='h-16'
                      size={48}
                      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                      // @ts-ignore
                      path={
                        'mdiTarget' in icon
                          ? icon['mdiTarget' as keyof typeof icon]
                          : icon.mdiTable || icon.mdiTable
                      }
                    />
                  </div>
                </div>
              </div>
            </Link>
          )}

          {hasPermission(currentUser, 'READ_IDENTITY_ACCOUNTS') && (
            <Link href={'/identity_accounts/identity_accounts-list'}>
              <div
                className={`${
                  corners !== 'rounded-full' ? corners : 'rounded-3xl'
                } dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
              >
                <div className='flex justify-between align-center'>
                  <div>
                    <div className='text-lg leading-tight   text-gray-500 dark:text-gray-400'>
                      Identity accounts
                    </div>
                    <div className='text-3xl leading-tight font-semibold'>
                      {identity_accounts}
                    </div>
                  </div>
                  <div>
                    <BaseIcon
                      className={`${iconsColor}`}
                      w='w-16'
                      h='h-16'
                      size={48}
                      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                      // @ts-ignore
                      path={
                        'mdiAccountKey' in icon
                          ? icon['mdiAccountKey' as keyof typeof icon]
                          : icon.mdiTable || icon.mdiTable
                      }
                    />
                  </div>
                </div>
              </div>
            </Link>
          )}

          {hasPermission(currentUser, 'READ_INTERVIEWS') && (
            <Link href={'/interviews/interviews-list'}>
              <div
                className={`${
                  corners !== 'rounded-full' ? corners : 'rounded-3xl'
                } dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
              >
                <div className='flex justify-between align-center'>
                  <div>
                    <div className='text-lg leading-tight   text-gray-500 dark:text-gray-400'>
                      Interviews
                    </div>
                    <div className='text-3xl leading-tight font-semibold'>
                      {interviews}
                    </div>
                  </div>
                  <div>
                    <BaseIcon
                      className={`${iconsColor}`}
                      w='w-16'
                      h='h-16'
                      size={48}
                      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                      // @ts-ignore
                      path={
                        'mdiCalendarAccount' in icon
                          ? icon['mdiCalendarAccount' as keyof typeof icon]
                          : icon.mdiTable || icon.mdiTable
                      }
                    />
                  </div>
                </div>
              </div>
            </Link>
          )}

          {hasPermission(currentUser, 'READ_INVENTORY_EVENTS') && (
            <Link href={'/inventory_events/inventory_events-list'}>
              <div
                className={`${
                  corners !== 'rounded-full' ? corners : 'rounded-3xl'
                } dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
              >
                <div className='flex justify-between align-center'>
                  <div>
                    <div className='text-lg leading-tight   text-gray-500 dark:text-gray-400'>
                      Inventory events
                    </div>
                    <div className='text-3xl leading-tight font-semibold'>
                      {inventory_events}
                    </div>
                  </div>
                  <div>
                    <BaseIcon
                      className={`${iconsColor}`}
                      w='w-16'
                      h='h-16'
                      size={48}
                      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                      // @ts-ignore
                      path={
                        'mdiHistory' in icon
                          ? icon['mdiHistory' as keyof typeof icon]
                          : icon.mdiTable || icon.mdiTable
                      }
                    />
                  </div>
                </div>
              </div>
            </Link>
          )}

          {hasPermission(currentUser, 'READ_JOB_REQUISITIONS') && (
            <Link href={'/job_requisitions/job_requisitions-list'}>
              <div
                className={`${
                  corners !== 'rounded-full' ? corners : 'rounded-3xl'
                } dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
              >
                <div className='flex justify-between align-center'>
                  <div>
                    <div className='text-lg leading-tight   text-gray-500 dark:text-gray-400'>
                      Job requisitions
                    </div>
                    <div className='text-3xl leading-tight font-semibold'>
                      {job_requisitions}
                    </div>
                  </div>
                  <div>
                    <BaseIcon
                      className={`${iconsColor}`}
                      w='w-16'
                      h='h-16'
                      size={48}
                      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                      // @ts-ignore
                      path={
                        'mdiBriefcaseOutline' in icon
                          ? icon['mdiBriefcaseOutline' as keyof typeof icon]
                          : icon.mdiTable || icon.mdiTable
                      }
                    />
                  </div>
                </div>
              </div>
            </Link>
          )}

          {hasPermission(currentUser, 'READ_LEARNING_COURSES') && (
            <Link href={'/learning_courses/learning_courses-list'}>
              <div
                className={`${
                  corners !== 'rounded-full' ? corners : 'rounded-3xl'
                } dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
              >
                <div className='flex justify-between align-center'>
                  <div>
                    <div className='text-lg leading-tight   text-gray-500 dark:text-gray-400'>
                      Learning courses
                    </div>
                    <div className='text-3xl leading-tight font-semibold'>
                      {learning_courses}
                    </div>
                  </div>
                  <div>
                    <BaseIcon
                      className={`${iconsColor}`}
                      w='w-16'
                      h='h-16'
                      size={48}
                      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                      // @ts-ignore
                      path={
                        'mdiBookOpenPageVariant' in icon
                          ? icon['mdiBookOpenPageVariant' as keyof typeof icon]
                          : icon.mdiTable || icon.mdiTable
                      }
                    />
                  </div>
                </div>
              </div>
            </Link>
          )}

          {hasPermission(currentUser, 'READ_LEAVE_REQUESTS') && (
            <Link href={'/leave_requests/leave_requests-list'}>
              <div
                className={`${
                  corners !== 'rounded-full' ? corners : 'rounded-3xl'
                } dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
              >
                <div className='flex justify-between align-center'>
                  <div>
                    <div className='text-lg leading-tight   text-gray-500 dark:text-gray-400'>
                      Leave requests
                    </div>
                    <div className='text-3xl leading-tight font-semibold'>
                      {leave_requests}
                    </div>
                  </div>
                  <div>
                    <BaseIcon
                      className={`${iconsColor}`}
                      w='w-16'
                      h='h-16'
                      size={48}
                      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                      // @ts-ignore
                      path={
                        'mdiCalendarCheck' in icon
                          ? icon['mdiCalendarCheck' as keyof typeof icon]
                          : icon.mdiTable || icon.mdiTable
                      }
                    />
                  </div>
                </div>
              </div>
            </Link>
          )}

          {hasPermission(currentUser, 'READ_OFFERS') && (
            <Link href={'/offers/offers-list'}>
              <div
                className={`${
                  corners !== 'rounded-full' ? corners : 'rounded-3xl'
                } dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
              >
                <div className='flex justify-between align-center'>
                  <div>
                    <div className='text-lg leading-tight   text-gray-500 dark:text-gray-400'>
                      Offers
                    </div>
                    <div className='text-3xl leading-tight font-semibold'>
                      {offers}
                    </div>
                  </div>
                  <div>
                    <BaseIcon
                      className={`${iconsColor}`}
                      w='w-16'
                      h='h-16'
                      size={48}
                      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                      // @ts-ignore
                      path={
                        'mdiFileSend' in icon
                          ? icon['mdiFileSend' as keyof typeof icon]
                          : icon.mdiTable || icon.mdiTable
                      }
                    />
                  </div>
                </div>
              </div>
            </Link>
          )}

          {hasPermission(currentUser, 'READ_PAYMENTS') && (
            <Link href={'/payments/payments-list'}>
              <div
                className={`${
                  corners !== 'rounded-full' ? corners : 'rounded-3xl'
                } dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
              >
                <div className='flex justify-between align-center'>
                  <div>
                    <div className='text-lg leading-tight   text-gray-500 dark:text-gray-400'>
                      Payments
                    </div>
                    <div className='text-3xl leading-tight font-semibold'>
                      {payments}
                    </div>
                  </div>
                  <div>
                    <BaseIcon
                      className={`${iconsColor}`}
                      w='w-16'
                      h='h-16'
                      size={48}
                      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                      // @ts-ignore
                      path={
                        'mdiCashMultiple' in icon
                          ? icon['mdiCashMultiple' as keyof typeof icon]
                          : icon.mdiTable || icon.mdiTable
                      }
                    />
                  </div>
                </div>
              </div>
            </Link>
          )}

          {hasPermission(currentUser, 'READ_PAYROLL_RUNS') && (
            <Link href={'/payroll_runs/payroll_runs-list'}>
              <div
                className={`${
                  corners !== 'rounded-full' ? corners : 'rounded-3xl'
                } dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
              >
                <div className='flex justify-between align-center'>
                  <div>
                    <div className='text-lg leading-tight   text-gray-500 dark:text-gray-400'>
                      Payroll runs
                    </div>
                    <div className='text-3xl leading-tight font-semibold'>
                      {payroll_runs}
                    </div>
                  </div>
                  <div>
                    <BaseIcon
                      className={`${iconsColor}`}
                      w='w-16'
                      h='h-16'
                      size={48}
                      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                      // @ts-ignore
                      path={
                        'mdiCalendar' in icon
                          ? icon['mdiCalendar' as keyof typeof icon]
                          : icon.mdiTable || icon.mdiTable
                      }
                    />
                  </div>
                </div>
              </div>
            </Link>
          )}

          {hasPermission(currentUser, 'READ_POLICIES') && (
            <Link href={'/policies/policies-list'}>
              <div
                className={`${
                  corners !== 'rounded-full' ? corners : 'rounded-3xl'
                } dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
              >
                <div className='flex justify-between align-center'>
                  <div>
                    <div className='text-lg leading-tight   text-gray-500 dark:text-gray-400'>
                      Policies
                    </div>
                    <div className='text-3xl leading-tight font-semibold'>
                      {policies}
                    </div>
                  </div>
                  <div>
                    <BaseIcon
                      className={`${iconsColor}`}
                      w='w-16'
                      h='h-16'
                      size={48}
                      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                      // @ts-ignore
                      path={
                        'mdiShieldCheck' in icon
                          ? icon['mdiShieldCheck' as keyof typeof icon]
                          : icon.mdiTable || icon.mdiTable
                      }
                    />
                  </div>
                </div>
              </div>
            </Link>
          )}

          {hasPermission(currentUser, 'READ_POSITIONS') && (
            <Link href={'/positions/positions-list'}>
              <div
                className={`${
                  corners !== 'rounded-full' ? corners : 'rounded-3xl'
                } dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
              >
                <div className='flex justify-between align-center'>
                  <div>
                    <div className='text-lg leading-tight   text-gray-500 dark:text-gray-400'>
                      Positions
                    </div>
                    <div className='text-3xl leading-tight font-semibold'>
                      {positions}
                    </div>
                  </div>
                  <div>
                    <BaseIcon
                      className={`${iconsColor}`}
                      w='w-16'
                      h='h-16'
                      size={48}
                      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                      // @ts-ignore
                      path={
                        'mdiOfficeBuilding' in icon
                          ? icon['mdiOfficeBuilding' as keyof typeof icon]
                          : icon.mdiTable || icon.mdiTable
                      }
                    />
                  </div>
                </div>
              </div>
            </Link>
          )}

          {hasPermission(currentUser, 'READ_REVIEW_CYCLES') && (
            <Link href={'/review_cycles/review_cycles-list'}>
              <div
                className={`${
                  corners !== 'rounded-full' ? corners : 'rounded-3xl'
                } dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
              >
                <div className='flex justify-between align-center'>
                  <div>
                    <div className='text-lg leading-tight   text-gray-500 dark:text-gray-400'>
                      Review cycles
                    </div>
                    <div className='text-3xl leading-tight font-semibold'>
                      {review_cycles}
                    </div>
                  </div>
                  <div>
                    <BaseIcon
                      className={`${iconsColor}`}
                      w='w-16'
                      h='h-16'
                      size={48}
                      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                      // @ts-ignore
                      path={
                        'mdiCalendarRange' in icon
                          ? icon['mdiCalendarRange' as keyof typeof icon]
                          : icon.mdiTable || icon.mdiTable
                      }
                    />
                  </div>
                </div>
              </div>
            </Link>
          )}

          {hasPermission(currentUser, 'READ_REVIEWS') && (
            <Link href={'/reviews/reviews-list'}>
              <div
                className={`${
                  corners !== 'rounded-full' ? corners : 'rounded-3xl'
                } dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
              >
                <div className='flex justify-between align-center'>
                  <div>
                    <div className='text-lg leading-tight   text-gray-500 dark:text-gray-400'>
                      Reviews
                    </div>
                    <div className='text-3xl leading-tight font-semibold'>
                      {reviews}
                    </div>
                  </div>
                  <div>
                    <BaseIcon
                      className={`${iconsColor}`}
                      w='w-16'
                      h='h-16'
                      size={48}
                      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                      // @ts-ignore
                      path={
                        'mdiStarCircle' in icon
                          ? icon['mdiStarCircle' as keyof typeof icon]
                          : icon.mdiTable || icon.mdiTable
                      }
                    />
                  </div>
                </div>
              </div>
            </Link>
          )}

          {hasPermission(currentUser, 'READ_SCHEDULE_SHIFTS') && (
            <Link href={'/schedule_shifts/schedule_shifts-list'}>
              <div
                className={`${
                  corners !== 'rounded-full' ? corners : 'rounded-3xl'
                } dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
              >
                <div className='flex justify-between align-center'>
                  <div>
                    <div className='text-lg leading-tight   text-gray-500 dark:text-gray-400'>
                      Schedule shifts
                    </div>
                    <div className='text-3xl leading-tight font-semibold'>
                      {schedule_shifts}
                    </div>
                  </div>
                  <div>
                    <BaseIcon
                      className={`${iconsColor}`}
                      w='w-16'
                      h='h-16'
                      size={48}
                      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                      // @ts-ignore
                      path={
                        'mdiCalendarClock' in icon
                          ? icon['mdiCalendarClock' as keyof typeof icon]
                          : icon.mdiTable || icon.mdiTable
                      }
                    />
                  </div>
                </div>
              </div>
            </Link>
          )}

          {hasPermission(currentUser, 'READ_TAXES') && (
            <Link href={'/taxes/taxes-list'}>
              <div
                className={`${
                  corners !== 'rounded-full' ? corners : 'rounded-3xl'
                } dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
              >
                <div className='flex justify-between align-center'>
                  <div>
                    <div className='text-lg leading-tight   text-gray-500 dark:text-gray-400'>
                      Taxes
                    </div>
                    <div className='text-3xl leading-tight font-semibold'>
                      {taxes}
                    </div>
                  </div>
                  <div>
                    <BaseIcon
                      className={`${iconsColor}`}
                      w='w-16'
                      h='h-16'
                      size={48}
                      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                      // @ts-ignore
                      path={
                        'mdiGavel' in icon
                          ? icon['mdiGavel' as keyof typeof icon]
                          : icon.mdiTable || icon.mdiTable
                      }
                    />
                  </div>
                </div>
              </div>
            </Link>
          )}

          {hasPermission(currentUser, 'READ_TIME_ENTRIES') && (
            <Link href={'/time_entries/time_entries-list'}>
              <div
                className={`${
                  corners !== 'rounded-full' ? corners : 'rounded-3xl'
                } dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
              >
                <div className='flex justify-between align-center'>
                  <div>
                    <div className='text-lg leading-tight   text-gray-500 dark:text-gray-400'>
                      Time entries
                    </div>
                    <div className='text-3xl leading-tight font-semibold'>
                      {time_entries}
                    </div>
                  </div>
                  <div>
                    <BaseIcon
                      className={`${iconsColor}`}
                      w='w-16'
                      h='h-16'
                      size={48}
                      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                      // @ts-ignore
                      path={
                        'mdiClockTimeFourOutline' in icon
                          ? icon['mdiClockTimeFourOutline' as keyof typeof icon]
                          : icon.mdiTable || icon.mdiTable
                      }
                    />
                  </div>
                </div>
              </div>
            </Link>
          )}

          {hasPermission(currentUser, 'READ_TIMECARDS') && (
            <Link href={'/timecards/timecards-list'}>
              <div
                className={`${
                  corners !== 'rounded-full' ? corners : 'rounded-3xl'
                } dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
              >
                <div className='flex justify-between align-center'>
                  <div>
                    <div className='text-lg leading-tight   text-gray-500 dark:text-gray-400'>
                      Timecards
                    </div>
                    <div className='text-3xl leading-tight font-semibold'>
                      {timecards}
                    </div>
                  </div>
                  <div>
                    <BaseIcon
                      className={`${iconsColor}`}
                      w='w-16'
                      h='h-16'
                      size={48}
                      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                      // @ts-ignore
                      path={
                        'mdiClockOutline' in icon
                          ? icon['mdiClockOutline' as keyof typeof icon]
                          : icon.mdiTable || icon.mdiTable
                      }
                    />
                  </div>
                </div>
              </div>
            </Link>
          )}

          {hasPermission(currentUser, 'READ_TRAVEL_BOOKINGS') && (
            <Link href={'/travel_bookings/travel_bookings-list'}>
              <div
                className={`${
                  corners !== 'rounded-full' ? corners : 'rounded-3xl'
                } dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
              >
                <div className='flex justify-between align-center'>
                  <div>
                    <div className='text-lg leading-tight   text-gray-500 dark:text-gray-400'>
                      Travel bookings
                    </div>
                    <div className='text-3xl leading-tight font-semibold'>
                      {travel_bookings}
                    </div>
                  </div>
                  <div>
                    <BaseIcon
                      className={`${iconsColor}`}
                      w='w-16'
                      h='h-16'
                      size={48}
                      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                      // @ts-ignore
                      path={
                        'mdiAirplane' in icon
                          ? icon['mdiAirplane' as keyof typeof icon]
                          : icon.mdiTable || icon.mdiTable
                      }
                    />
                  </div>
                </div>
              </div>
            </Link>
          )}

          {hasPermission(currentUser, 'READ_VENDORS') && (
            <Link href={'/vendors/vendors-list'}>
              <div
                className={`${
                  corners !== 'rounded-full' ? corners : 'rounded-3xl'
                } dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
              >
                <div className='flex justify-between align-center'>
                  <div>
                    <div className='text-lg leading-tight   text-gray-500 dark:text-gray-400'>
                      Vendors
                    </div>
                    <div className='text-3xl leading-tight font-semibold'>
                      {vendors}
                    </div>
                  </div>
                  <div>
                    <BaseIcon
                      className={`${iconsColor}`}
                      w='w-16'
                      h='h-16'
                      size={48}
                      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                      // @ts-ignore
                      path={
                        'mdiStore' in icon
                          ? icon['mdiStore' as keyof typeof icon]
                          : icon.mdiTable || icon.mdiTable
                      }
                    />
                  </div>
                </div>
              </div>
            </Link>
          )}

          {hasPermission(currentUser, 'READ_ROLES') && (
            <Link href={'/roles/roles-list'}>
              <div
                className={`${
                  corners !== 'rounded-full' ? corners : 'rounded-3xl'
                } dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
              >
                <div className='flex justify-between align-center'>
                  <div>
                    <div className='text-lg leading-tight   text-gray-500 dark:text-gray-400'>
                      Roles
                    </div>
                    <div className='text-3xl leading-tight font-semibold'>
                      {roles}
                    </div>
                  </div>
                  <div>
                    <BaseIcon
                      className={`${iconsColor}`}
                      w='w-16'
                      h='h-16'
                      size={48}
                      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                      // @ts-ignore
                      path={
                        icon.mdiShieldAccountVariantOutline || icon.mdiTable
                      }
                    />
                  </div>
                </div>
              </div>
            </Link>
          )}

          {hasPermission(currentUser, 'READ_PERMISSIONS') && (
            <Link href={'/permissions/permissions-list'}>
              <div
                className={`${
                  corners !== 'rounded-full' ? corners : 'rounded-3xl'
                } dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
              >
                <div className='flex justify-between align-center'>
                  <div>
                    <div className='text-lg leading-tight   text-gray-500 dark:text-gray-400'>
                      Permissions
                    </div>
                    <div className='text-3xl leading-tight font-semibold'>
                      {permissions}
                    </div>
                  </div>
                  <div>
                    <BaseIcon
                      className={`${iconsColor}`}
                      w='w-16'
                      h='h-16'
                      size={48}
                      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                      // @ts-ignore
                      path={icon.mdiShieldAccountOutline || icon.mdiTable}
                    />
                  </div>
                </div>
              </div>
            </Link>
          )}

          {hasPermission(currentUser, 'READ_ORGANIZATIONS') && (
            <Link href={'/organizations/organizations-list'}>
              <div
                className={`${
                  corners !== 'rounded-full' ? corners : 'rounded-3xl'
                } dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
              >
                <div className='flex justify-between align-center'>
                  <div>
                    <div className='text-lg leading-tight   text-gray-500 dark:text-gray-400'>
                      Organizations
                    </div>
                    <div className='text-3xl leading-tight font-semibold'>
                      {organizations}
                    </div>
                  </div>
                  <div>
                    <BaseIcon
                      className={`${iconsColor}`}
                      w='w-16'
                      h='h-16'
                      size={48}
                      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                      // @ts-ignore
                      path={icon.mdiTable || icon.mdiTable}
                    />
                  </div>
                </div>
              </div>
            </Link>
          )}
        </div>
      </SectionMain>
    </>
  );
};

Dashboard.getLayout = function getLayout(page: ReactElement) {
  return <LayoutAuthenticated>{page}</LayoutAuthenticated>;
};

export default Dashboard;
