import * as icon from '@mdi/js'; import Head from 'next/head'; import React from 'react'; 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 { useDashboardCounts, EntityCountValue, } from '../hooks/useDashboardCounts'; import { useAppDispatch, useAppSelector } from '../stores/hooks'; /** * Dashboard card component for entity counts */ interface DashboardCardProps { href: string; label: string; count: EntityCountValue; iconKey: string; corners: string; cardsStyle: string; iconsColor: string; } const DashboardCard = ({ href, label, count, iconKey, corners, cardsStyle, iconsColor, }: DashboardCardProps) => { const iconPath = (icon as Record)[iconKey] ?? (icon as Record)['mdiFormatListBulleted']; return (
{label}
{count}
); }; 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 { currentUser } = useAppSelector((state) => state.auth); const { isFetchingQuery } = useAppSelector((state) => state.openAi); // Use the centralized dashboard counts hook const { getCount, getVisibleEntities } = useDashboardCounts(currentUser); const [widgetsRole, setWidgetsRole] = React.useState({ role: { value: '', label: '' }, }); const { rolesWidgets, loading } = useAppSelector((state) => state.roles) as { rolesWidgets: Array<{ id: string; [key: string]: unknown }>; loading: boolean; }; async function getWidgets(roleId: string) { await dispatch(fetchWidgets(roleId)); } React.useEffect(() => { if (!currentUser) return; 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]); // Get entities visible to current user const visibleEntities = getVisibleEntities(); return ( <> {getPageTitle('Overview')} {''} {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 &&
}
{visibleEntities.map((entity) => ( ))}
); }; Dashboard.getLayout = function getLayout(page: ReactElement) { return {page}; }; export default Dashboard;