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 { 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 dispatch = useAppDispatch(); const iconsColor = useAppSelector((state) => state.style.iconsColor); const corners = useAppSelector((state) => state.style.corners); const cardsStyle = useAppSelector((state) => state.style.cardsStyle); const [users, setUsers] = React.useState('Loading...'); const [budgets, setBudgets] = React.useState('Loading...'); const [guests, setGuests] = React.useState('Loading...'); const [schedules, setSchedules] = React.useState('Loading...'); const [vendors, setVendors] = React.useState('Loading...'); const [venues, setVenues] = React.useState('Loading...'); const [roles, setRoles] = React.useState('Loading...'); const [permissions, setPermissions] = React.useState('Loading...'); const [likes, setLikes] = React.useState('Loading...'); 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); async function loadData() { const entities = [ 'users', 'budgets', 'guests', 'schedules', 'vendors', 'venues', 'roles', 'permissions', 'likes', ]; const fns = [ setUsers, setBudgets, setGuests, setSchedules, setVendors, setVenues, setRoles, setPermissions, setLikes, ]; 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 ( <> {getPageTitle('Dashboard')} {''} {hasPermission(currentUser, 'CREATE_ROLES') && ( )} {!!rolesWidgets.length && hasPermission(currentUser, 'CREATE_ROLES') && (

{`${widgetsRole?.role?.label || 'Users'}'s widgets`}

)}
{(isFetchingQuery || loading) && (
{' '} Loading widgets...
)} {rolesWidgets && rolesWidgets.map((widget) => ( ))}
{!!rolesWidgets.length &&
}
{hasPermission(currentUser, 'READ_USERS') && (
Users
{users}
)} {hasPermission(currentUser, 'READ_BUDGETS') && (
Budgets
{budgets}
)} {hasPermission(currentUser, 'READ_GUESTS') && (
Guests
{guests}
)} {hasPermission(currentUser, 'READ_SCHEDULES') && (
Schedules
{schedules}
)} {hasPermission(currentUser, 'READ_VENDORS') && (
Vendors
{vendors}
)} {hasPermission(currentUser, 'READ_VENUES') && (
Venues
{venues}
)} {hasPermission(currentUser, 'READ_ROLES') && (
Roles
{roles}
)} {hasPermission(currentUser, 'READ_PERMISSIONS') && (
Permissions
{permissions}
)} {hasPermission(currentUser, 'READ_LIKES') && (
Likes
{likes}
)}
); }; Dashboard.getLayout = function getLayout(page: ReactElement) { return {page}; }; export default Dashboard;