46 lines
2.4 KiB
TypeScript
46 lines
2.4 KiB
TypeScript
'use client';
|
|
import { FC, Suspense } from "react";
|
|
import { MenuProps } from "@/validations/mutual/dashboard/props";
|
|
|
|
import UserProfileSection from "./userProfileSection";
|
|
import ClientSelectionSection from "./clientSelectionSection";
|
|
import MenuItemsSection from "./menuItemsSection";
|
|
import MenuLoadingState from "./menuLoadingState";
|
|
import MenuErrorState from "./menuErrorState";
|
|
import MenuEmptyState from "./menuEmptyState";
|
|
import LoadingContent from "@/components/mutual/loader/component";
|
|
|
|
const MenuComponent: FC<MenuProps> = ({
|
|
lang, activePageUrl, useReloadWindow, availableApplications,
|
|
onlineData, onlineLoading, onlineError,
|
|
userData, userLoading, userError,
|
|
selectionData, selectionLoading, selectionError,
|
|
menuData, menuLoading, menuError
|
|
}) => {
|
|
if (menuLoading) { return <MenuLoadingState /> } // Render loading state
|
|
if (menuError) { return <MenuErrorState error={menuError} />; } // Render error state
|
|
if (availableApplications.length === 0) { return <MenuEmptyState />; } // Render empty state
|
|
function handleClientSelection(client: any) { console.log('Client selected:', client) }
|
|
return (
|
|
<div className="fixed top-24 p-5 left-0 right-0 w-80 border-emerald-150 border-r-2 overflow-y-auto h-[calc(100vh-6rem)]">
|
|
<div className="flex flex-col">
|
|
{/* User Profile Section */}
|
|
<Suspense fallback={<div><LoadingContent height="h-16" size="w-36 h-48" key={"loading-conent"} plane="h-full w-full" /></div>}>
|
|
<UserProfileSection userData={userData} onlineData={onlineData} />
|
|
</Suspense>
|
|
{/* Client Selection Section */}
|
|
<Suspense fallback={<div><LoadingContent height="h-16" size="w-36 h-48" key={"loading-conent"} plane="h-full w-full" /></div>}>
|
|
<ClientSelectionSection selectionData={selectionData} initialSelectedClient={selectionData} onClientSelect={handleClientSelection} />
|
|
</Suspense>
|
|
|
|
{/* Menu Items Section */}
|
|
<Suspense fallback={<div><LoadingContent height="h-16" size="w-36 h-48" key={"loading-conent"} plane="h-full w-full" /></div>}>
|
|
<MenuItemsSection availableApplications={availableApplications} activePageUrl={activePageUrl} lang={lang} />
|
|
</Suspense>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default MenuComponent;
|