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 loadingMessage = 'Loading...'; const [users, setUsers] = React.useState(loadingMessage); const [roles, setRoles] = React.useState(loadingMessage); const [permissions, setPermissions] = React.useState(loadingMessage); const [businesses, setBusinesses] = React.useState(loadingMessage); const [customers, setCustomers] = React.useState(loadingMessage); const [transactions, setTransactions] = React.useState(loadingMessage); const [review_requests, setReview_requests] = React.useState(loadingMessage); const [stripe_events, setStripe_events] = React.useState(loadingMessage); const [email_delivery_logs, setEmail_delivery_logs] = React.useState(loadingMessage); const [cron_runs, setCron_runs] = 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); async function loadData() { const entities = ['users','roles','permissions','businesses','customers','transactions','review_requests','stripe_events','email_delivery_logs','cron_runs',]; const fns = [setUsers,setRoles,setPermissions,setBusinesses,setCustomers,setTransactions,setReview_requests,setStripe_events,setEmail_delivery_logs,setCron_runs,]; 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('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 &&
}
{hasPermission(currentUser, 'READ_USERS') &&
Users
{users}
} {hasPermission(currentUser, 'READ_ROLES') &&
Roles
{roles}
} {hasPermission(currentUser, 'READ_PERMISSIONS') &&
Permissions
{permissions}
} {hasPermission(currentUser, 'READ_BUSINESSES') &&
Businesses
{businesses}
} {hasPermission(currentUser, 'READ_CUSTOMERS') &&
Customers
{customers}
} {hasPermission(currentUser, 'READ_TRANSACTIONS') &&
Transactions
{transactions}
} {hasPermission(currentUser, 'READ_REVIEW_REQUESTS') &&
Review requests
{review_requests}
} {hasPermission(currentUser, 'READ_STRIPE_EVENTS') &&
Stripe events
{stripe_events}
} {hasPermission(currentUser, 'READ_EMAIL_DELIVERY_LOGS') &&
Email delivery logs
{email_delivery_logs}
} {hasPermission(currentUser, 'READ_CRON_RUNS') &&
Cron runs
{cron_runs}
}
) } Dashboard.getLayout = function getLayout(page: ReactElement) { return {page} } export default Dashboard