Feat: efficient dashboard

package.json

@@ -13,6 +13,9 @@
     "prepare": "husky"
   },
   "dependencies": {
+    "@atlaskit/pragmatic-drag-and-drop": "^1.1.3",
+    "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.0.3",
+    "@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^1.1.0",
     "@axa-fr/react-oidc": "^7.21.0",
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
@@ -22,6 +25,7 @@
     "@types/react": "18.2.48",
     "@types/react-dom": "18.2.25",
     "autoprefixer": "10.4.19",
+    "jsoncrush": "^1.1.8",
     "next": "^14.1.4",
     "postcss": "8.4.38",
     "react": "^18.2.0",

src/app/(dashboard)/layout.tsx

@@ -0,0 +1,39 @@
+"use client";
+import * as React from "react";
+import CssBaseline from "@mui/material/CssBaseline";
+import { Box } from "@mui/material";
+import { ThemeProvider as MUIThemeProvider } from "@mui/material/styles";
+import { useMUITheme } from "@/hooks/theme";
+import Dashboard from "@/components/layout/Dashboard";
+import ApplicationsProvider from "@/contexts/ApplicationsProvider";
+import { OIDCSecure } from "@/components/layout/OIDCSecure";
+
+export default function DashboardLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const theme = useMUITheme();
+
+  return (
+    <section>
+      <ApplicationsProvider>
+        <OIDCSecure>
+          <Dashboard>
+            <MUIThemeProvider theme={theme}>
+              <CssBaseline />
+              <Box
+                sx={{
+                  ml: "5%",
+                  mr: "5%",
+                }}
+              >
+                {children}
+              </Box>
+            </MUIThemeProvider>
+          </Dashboard>
+        </OIDCSecure>
+      </ApplicationsProvider>
+    </section>
+  );
+}

src/app/(dashboard)/page.tsx

@@ -0,0 +1,25 @@
+"use client";
+import React from "react";
+import { useSearchParams } from "next/navigation";
+import UserDashboard from "@/components/applications/UserDashboard";
+import { ApplicationsContext } from "@/contexts/ApplicationsProvider";
+import { applicationList } from "@/components/applications/ApplicationList";
+
+export default function Page() {
+  const searchParams = useSearchParams();
+  const appId = searchParams.get("appId");
+  const [sections] = React.useContext(ApplicationsContext);
+
+  const appType = React.useMemo(() => {
+    const section = sections.find((section) =>
+      section.items.some((item) => item.id === appId),
+    );
+    return section?.items.find((item) => item.id === appId)?.type;
+  }, [sections, appId]);
+
+  const Component = React.useMemo(() => {
+    return applicationList.find((app) => app.name === appType)?.component;
+  }, [appType]);
+
+  return Component ? <Component /> : <UserDashboard />;
+}