Feature/dynamic module loader

src/app.tsx

@@ -16,6 +16,7 @@ import { TranslationDraftProvider } from "@providers/translation-draft-provider"
 import { LayoutProvider, useLayout } from "@providers/layout-provider";
 import "react-toastify/dist/ReactToastify.css";
 import { Auth } from "./features/auth/auth";
+import { DynamicGenericModuleRoutes } from "@features/dynamic-module-loader";
 
 export const App = () => {
   // Define menu categories for breadcrumbs
@@ -56,7 +57,20 @@ export const App = () => {
     const firstPath = paths[0];
     const breadcrumbs: Breadcrumb[] = [];
     let currentBreadcrumb = "";
-    if (firstPath && menuCategories[firstPath]) {
+
+    if (paths[0] === "modules" && paths[1]) {
+      const moduleName = paths[1];
+      const displayName = moduleName
+        .split("-")
+        .map((s) => s.charAt(0).toUpperCase() + s.slice(1))
+        .join(" ");
+      breadcrumbs.push({
+        linkText: "DYNAMIC",
+        toRoute: `/modules/${moduleName}`,
+        isCategory: true,
+      });
+      currentBreadcrumb = displayName;
+    } else if (firstPath && menuCategories[firstPath]) {
       breadcrumbs.push({
         linkText: menuCategories[firstPath].category,
         toRoute: `/${firstPath}`,
@@ -124,7 +138,11 @@ export const App = () => {
                                 path={`${coreModuleRoute.template}/*`}
                                 element={<ModuleLoader />}
                               />
-                            </Route>
+                              <Route
+                              path="/modules/:moduleName/*"
+                              element={<DynamicGenericModuleRoutes />}
+                            />
+                          </Route>
                           </Routes>
                         </BrowserRouter>
                       </ErrorDetailsModalProvider>

src/components/app-layout/index.tsx

@@ -17,15 +17,17 @@ interface AppLayoutProps {
   fullWidth?: boolean;
 }
 
-type MenuItem = {
+export type MenuItem = {
   id: string;
   label: string;
-  icon: React.ReactNode;
-  onClick: () => void;
+  icon: React.ReactNode | string;
+  entity: string;
+  route: string;
+  onClick: (navigate: (to: string) => void) => void;
   isSelected: boolean;
 };
 
-interface SidebarMenuSection {
+export interface SidebarMenuSection {
   header: string;
   items: MenuItem[];
 }
@@ -43,7 +45,11 @@ export const AppLayout = ({
   const { moduleName } = useRouteParams(coreModuleRoute);
   const { config, loading: configLoading } = useConfig();
 
-  const menuItems = buildMenuItems(config?.entities, moduleName) as SidebarMenuSection[];
+  const menuItems = buildMenuItems(
+    config?.entities,
+    moduleName,
+    config?.modules ?? undefined
+  ) as SidebarMenuSection[];
   const menuLoading = configLoading;
 
   // Pass drawer state to Sidebar and update container class

src/components/data-management/index.tsx

@@ -15,7 +15,11 @@ import {
 } from "@mui/material";
 import { DeleteButtonContainer } from "./index.styled";
 import { Trash2, Edit } from "lucide-react";
-import { useCoreModuleNavigation, useNotificationsService } from "@hooks";
+import {
+  useCoreModuleNavigation,
+  useDynamicModuleNavigation,
+  useNotificationsService,
+} from "@hooks";
 import { HttpResponse, ProblemDetails } from "@lib/network/swagger-client";
 import { useErrorDetailsModal } from "@providers/error-details-modal-provider";
 import { execDeleteWithToast } from "utils/general-helper";
@@ -100,6 +104,7 @@ export const DataManagementBlock = ({
   const { notificationsService } = useNotificationsService();
   const { Show: showErrorModal } = useErrorDetailsModal();
   const handleNavigation = useCoreModuleNavigation();
+  const handleDynamicModuleNavigation = useDynamicModuleNavigation();
   const navigate = useNavigate();
   const { moduleName } = useRouteParams(coreModuleRoute);
 
@@ -122,19 +127,26 @@ export const DataManagementBlock = ({
   const deleteRecord = async () => {
     try {
       setIsDeleting(true);
-      await handleDeleteAsync(itemId);
-      if (onDeleted) {
-        onDeleted();
+      await handleDeleteAsync(itemId!);
+      const pathSegments = window.location.pathname.split("/");
+      if (pathSegments[1] === "modules") {
+        handleDynamicModuleNavigation(successNavigationRoute);
+      } else {
+        handleNavigation(successNavigationRoute);
       }
-      handleNavigation(successNavigationRoute);
     } catch (error) {
       setIsDeleting(false);
       throw error;
     }
   };
 
   const editRecord = async () => {
-    navigate(`/${moduleName}/${itemId}/edit`);
+    const pathSegments = window.location.pathname.split("/");
+    if (pathSegments[1] === "modules") {
+      navigate(`/modules/${moduleName}/${itemId}/edit`);
+    } else {
+      navigate(`/${moduleName}/${itemId}/edit`);
+    }
   };
 
   return (

src/components/generic-components/common.ts

@@ -63,7 +63,7 @@ export interface BasicTypeForGeneric {
 
 export const getBreadcrumbLinks = (
   moduleName: string,
-  modulePath: CoreModule
+  modulePath: CoreModule | string
 ): BreadcrumbLink[] => {
   return [
     ...dataListBreadcrumbLinks,

src/components/generic-components/edit-components/datetime-edit.tsx

@@ -19,7 +19,7 @@ export const DatetimeEdit = ({
         size={"small"}
         fullWidth
         variant="outlined"
-        value={dayjs(value)}
+        value={value ? dayjs(value) : null}
         onChange={(newValue) => {
           onChangeValue && onChangeValue(newValue ? newValue.toDate() : null);
         }}

src/components/generic-components/generic-form.tsx

@@ -21,7 +21,7 @@ import {
 import { validate } from "@components/generic-components/edit-components/validator";
 import { ArrayEdit } from "./edit-components/array-edit";
 import { StyledDivider } from "./index.styled";
-import { useCoreModuleNavigation } from "@hooks";
+import { useCoreModuleNavigation, useDynamicModuleNavigation } from "@hooks";
 import { TextView } from "./view-components/text-view";
 import { BoolView } from "./view-components/bool-view";
 import { DateTimeView } from "./view-components/datetime-view";
@@ -112,6 +112,7 @@ export function GenericForm<TView extends BasicTypeForGeneric, TCreate, TUpdate>
 }: GenericFormProps<TView, TCreate, TUpdate>) {
   const { setBusy, setSaving } = useModuleWrapperContext();
   const handleCoreNavigation = useCoreModuleNavigation();
+  const handleDynamicModuleNavigation = useDynamicModuleNavigation();
   const [validationResult, setValidationResult] = useState<ValidationResult>();
   const itemId = getItemId();
 
@@ -195,6 +196,13 @@ export function GenericForm<TView extends BasicTypeForGeneric, TCreate, TUpdate>
         case "number":
           initValues[field.name] = 0;
           break;
+        case "string":
+          if (field.format === "date-time") {
+            initValues[field.name] = null;
+          } else {
+            initValues[field.name] = "";
+          }
+          break;
         default:
           initValues[field.name] = "";
           break;
@@ -258,11 +266,22 @@ export function GenericForm<TView extends BasicTypeForGeneric, TCreate, TUpdate>
   };
 
   const cancel = () => {
-    const currentPath = window.location.pathname;
-    const modulePath = currentPath.split("/")[1];
-    handleCoreNavigation(modulePath);
+    navigateToListView();
   };
 
+  function navigateToListView() {
+    const currentPath = window.location.pathname;
+    const pathSegments = currentPath.split("/");
+    let modulePath;
+    if (pathSegments[1] === "modules") {
+      modulePath = pathSegments[2];
+      handleDynamicModuleNavigation(modulePath);
+    } else {
+      modulePath = pathSegments[1];
+      handleCoreNavigation(modulePath);
+    }
+  }
+
   const isValidUpdate = (field: DtoField) => {
     if (field.type == "boolean" && (values[field.name] === true || values[field.name] === false))
       return true;

src/components/generic-components/generic-module.tsx

@@ -61,9 +61,9 @@ interface ExtraActions {
   showFiltersPanel?: boolean;
 }
 
-interface GenericModuleProps<TView extends BasicTypeForGeneric, TCreate, TUpdate> {
+export interface GenericModuleProps<TView extends BasicTypeForGeneric, TCreate, TUpdate> {
   moduleName: string;
-  modulePath: CoreModule;
+  modulePath: CoreModule | string;
   addButtonContent?: string | ReactNode | undefined;
   extraActions?: ExtraActions | undefined;
   tableProps?: GenericDataGridProps<TView>;

src/components/icon-map/icon-fuzzy-search.ts

@@ -1,4 +1,4 @@
-import { iconKeywordMap, defaultIcon } from "./icon-map";
+import { iconKeywordMap, defaultIcon, defaultIconKey } from "./icon-map";
 
 export function getSectionIcon(title: string) {
   if (!title) return defaultIcon;
@@ -11,3 +11,14 @@ export function getSectionIcon(title: string) {
   }
   return defaultIcon;
 }
+
+export function getSectionIconKey(title: string): string {
+  if (!title) return defaultIconKey;
+  const lowerTitle = title.toLowerCase();
+  for (const { keywords, key } of iconKeywordMap) {
+    if (keywords.some((kw) => lowerTitle.includes(kw))) {
+      return key;
+    }
+  }
+  return defaultIconKey;
+}

src/components/icon-map/icon-map.ts

@@ -1,21 +1,32 @@
-import { User, HelpCircle, MessageCircle, Info, Code2 } from "lucide-react";
+import { User, HelpCircle, MessageCircle, Info, Code2, School } from "lucide-react";
 
 export const iconKeywordMap = [
   {
     keywords: ["author details", "author", "user", "creator", "writer"],
     icon: User,
+    key: "user",
   },
   {
     keywords: ["comment body", "comment", "body", "text", "message"],
     icon: MessageCircle,
+    key: "message",
   },
   {
     keywords: ["context", "background", "about", "reference"],
     icon: Info,
+    key: "info",
   },
   {
     keywords: ["meta", "metadata", "details", "info"],
     icon: Code2,
+    key: "code2",
+  },
+  {
+    keywords: ["student", "school"],
+    icon: School,
+    key: "student",
   },
 ];
 export const defaultIcon = HelpCircle;
+
+export const defaultIconKey = "help";

src/components/spreadsheet-import/index.tsx

@@ -3,7 +3,11 @@ import { Fragment, useState } from "react";
 import { ReactSpreadsheetImport } from "react-spreadsheet-import";
 import { Result } from "react-spreadsheet-import/types/types";
 import { StyledBackdrop } from "./index.styled";
-import { useCoreModuleNavigation, useNotificationsService } from "@hooks";
+import {
+  useCoreModuleNavigation,
+  useDynamicModuleNavigation,
+  useNotificationsService,
+} from "@hooks";
 import { getImportFields } from "utils/import-file-helper";
 
 interface csvImportPorps {
@@ -16,6 +20,7 @@ interface csvImportPorps {
 
 export const CsvImport = ({ isOpen, onClose, onUpload, object, endRoute }: csvImportPorps) => {
   const handleNavigation = useCoreModuleNavigation();
+  const handleDynamicModuleNavigation = useDynamicModuleNavigation();
   const { notificationsService } = useNotificationsService();
   const [isUploading, setIsUploading] = useState(false);
 
@@ -37,9 +42,19 @@ export const CsvImport = ({ isOpen, onClose, onUpload, object, endRoute }: csvIm
 
   const handleSuccess = () => {
     notificationsService.success("Data import completed.");
-    handleNavigation(endRoute);
+    navigateToView();
   };
 
+  function navigateToView() {
+    const currentPath = window.location.pathname;
+    const pathSegments = currentPath.split("/");
+    if (pathSegments[1] === "modules") {
+      handleDynamicModuleNavigation(endRoute);
+    } else {
+      handleNavigation(endRoute);
+    }
+  }
+
   return (
     <Fragment key={"spreadsheet-import"}>
       <ReactSpreadsheetImport