From a179918322032b37e62f1258c5316c7d78e27fb6 Mon Sep 17 00:00:00 2001
From: Jefferson Silva <jefferson.bruno.c@conceptatech.com>
Date: Tue, 1 Apr 2025 11:52:10 -0300
Subject: [PATCH] feat: implement page as module on default router

---
 .../submodules/ConfirmationModal/index.tsx    |  62 +++++
 .../submodules/DrawerForm/index.tsx           |  13 +-
 .../components/submodules/ModalForm/index.tsx |  13 +-
 packages/react-material-ui/src/index.ts       |   5 +-
 .../src/modules/crud/index.tsx                |  12 +-
 .../src/modules/form/index.tsx                | 257 ++++++++++++++++++
 .../src/components/AuthRoute.tsx              |   2 +-
 .../src/components/ChildRoutes.tsx            |   3 +-
 .../src/components/DefaultRoute.tsx           |  35 ++-
 .../src/components/Resource.tsx               |   8 +-
 10 files changed, 387 insertions(+), 23 deletions(-)
 create mode 100644 packages/react-material-ui/src/components/submodules/ConfirmationModal/index.tsx
 create mode 100644 packages/react-material-ui/src/modules/form/index.tsx

diff --git a/packages/react-material-ui/src/components/submodules/ConfirmationModal/index.tsx b/packages/react-material-ui/src/components/submodules/ConfirmationModal/index.tsx
new file mode 100644
index 00000000..817fd471
--- /dev/null
+++ b/packages/react-material-ui/src/components/submodules/ConfirmationModal/index.tsx
@@ -0,0 +1,62 @@
+import React from 'react';
+import { Box, Button, Dialog, DialogContent, Typography } from '@mui/material';
+import ReportProblemOutlinedIcon from '@mui/icons-material/ReportProblemOutlined';
+
+type Props = {
+  isOpen: boolean;
+  onClose: () => void;
+  onConfirm: () => void;
+};
+
+const ConfirmationModal = ({ isOpen, onClose, onConfirm }: Props) => {
+  return (
+    <Dialog open={isOpen} onClose={onClose} maxWidth="xs">
+      <DialogContent>
+        <Box
+          display="flex"
+          flexDirection="column"
+          alignItems="center"
+          textAlign="center"
+        >
+          <Box
+            display="flex"
+            alignItems="center"
+            justifyContent="center"
+            sx={{
+              backgroundColor: '#FEE2E2',
+              width: '48px',
+              height: '48px',
+              borderRadius: '24px',
+            }}
+          >
+            <ReportProblemOutlinedIcon
+              color="error"
+              sx={{ width: '24px', height: '24px' }}
+            />
+          </Box>
+          <Typography variant="h5" sx={{ marginTop: 2 }}>
+            Delete Item
+          </Typography>
+          <Typography sx={{ marginTop: 2 }}>
+            Are you sure you want to delete this item?
+          </Typography>
+        </Box>
+        <Box display="flex" justifyContent="center" sx={{ marginTop: 2 }}>
+          <Button
+            onClick={onClose}
+            variant="outlined"
+            color="error"
+            sx={{ marginRight: 2 }}
+          >
+            Cancel
+          </Button>
+          <Button onClick={onConfirm} variant="contained" color="error">
+            Confirm
+          </Button>
+        </Box>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default ConfirmationModal;
diff --git a/packages/react-material-ui/src/components/submodules/DrawerForm/index.tsx b/packages/react-material-ui/src/components/submodules/DrawerForm/index.tsx
index 3dd58449..df209cf4 100644
--- a/packages/react-material-ui/src/components/submodules/DrawerForm/index.tsx
+++ b/packages/react-material-ui/src/components/submodules/DrawerForm/index.tsx
@@ -15,6 +15,7 @@ import { SchemaForm } from '../../../components/SchemaForm';
 import { CustomTextFieldWidget } from '../../../styles/CustomWidgets';
 import { FormSubmoduleProps } from '../types/Form';
 import TableRowControls from '../TableRowControls';
+import ConfirmationModal from '../ConfirmationModal';
 
 const DrawerFormSubmodule = (props: FormSubmoduleProps) => {
   const {
@@ -47,6 +48,8 @@ const DrawerFormSubmodule = (props: FormSubmoduleProps) => {
 
   const [fieldValues, setFieldValues] =
     useState<FormSubmoduleProps['formData']>(formData);
+  const [isConfirmationModalOpen, setConfirmationModalOpen] =
+    useState<boolean>(false);
 
   useEffect(() => {
     setFieldValues(formData);
@@ -158,7 +161,7 @@ const DrawerFormSubmodule = (props: FormSubmoduleProps) => {
             <Button
               variant="contained"
               color="error"
-              onClick={() => deleteItem(formData)}
+              onClick={() => setConfirmationModalOpen(true)}
               sx={{ flex: 1 }}
             >
               {isLoadingDelete ? (
@@ -293,6 +296,14 @@ const DrawerFormSubmodule = (props: FormSubmoduleProps) => {
           </SchemaForm.Form>
         )}
       </Box>
+      <ConfirmationModal
+        isOpen={isConfirmationModalOpen}
+        onClose={() => setConfirmationModalOpen(false)}
+        onConfirm={() => {
+          setConfirmationModalOpen(false);
+          deleteItem(formData);
+        }}
+      />
     </Drawer>
   );
 };
diff --git a/packages/react-material-ui/src/components/submodules/ModalForm/index.tsx b/packages/react-material-ui/src/components/submodules/ModalForm/index.tsx
index c3182db8..fd7d732a 100644
--- a/packages/react-material-ui/src/components/submodules/ModalForm/index.tsx
+++ b/packages/react-material-ui/src/components/submodules/ModalForm/index.tsx
@@ -17,6 +17,7 @@ import { SchemaForm } from '../../../components/SchemaForm';
 import { CustomTextFieldWidget } from '../../../styles/CustomWidgets';
 import { FormSubmoduleProps } from '../types/Form';
 import TableRowControls from '../TableRowControls';
+import ConfirmationModal from '../ConfirmationModal';
 
 const ModalFormSubmodule = (props: FormSubmoduleProps) => {
   const {
@@ -47,6 +48,8 @@ const ModalFormSubmodule = (props: FormSubmoduleProps) => {
 
   const [fieldValues, setFieldValues] =
     useState<FormSubmoduleProps['formData']>(formData);
+  const [isConfirmationModalOpen, setConfirmationModalOpen] =
+    useState<boolean>(false);
 
   useEffect(() => {
     setFieldValues(formData);
@@ -223,7 +226,7 @@ const ModalFormSubmodule = (props: FormSubmoduleProps) => {
                   <Button
                     variant="contained"
                     color="error"
-                    onClick={() => deleteItem(formData)}
+                    onClick={() => setConfirmationModalOpen(true)}
                     sx={{ flex: 1 }}
                   >
                     {isLoadingDelete ? (
@@ -259,6 +262,14 @@ const ModalFormSubmodule = (props: FormSubmoduleProps) => {
           </SchemaForm.Form>
         )}
       </DialogContent>
+      <ConfirmationModal
+        isOpen={isConfirmationModalOpen}
+        onClose={() => setConfirmationModalOpen(false)}
+        onConfirm={() => {
+          setConfirmationModalOpen(false);
+          deleteItem(formData);
+        }}
+      />
     </Dialog>
   );
 };
diff --git a/packages/react-material-ui/src/index.ts b/packages/react-material-ui/src/index.ts
index 1d6b27c2..1892c6ca 100644
--- a/packages/react-material-ui/src/index.ts
+++ b/packages/react-material-ui/src/index.ts
@@ -65,7 +65,7 @@ export { default as SearchField } from './components/SearchField';
 export { default as AutocompleteField } from './components/AutocompleteField';
 export { SelectField, SelectFieldProps } from './components/SelectField';
 export { MultiSelect, MultiSelectProps } from './components/MultiSelect';
-export { default as SimpleForm } from './components/SimpleForm';
+export { default as SimpleForm, FormType } from './components/SimpleForm';
 export {
   Filter,
   FilterVariant,
@@ -81,8 +81,9 @@ export {
 } from './components/FormFieldSkeleton';
 
 export { AuthModule, AuthModuleProps } from './modules/auth';
-export { default as CrudModule } from './modules/crud';
+export { default as CrudModule, ModuleProps } from './modules/crud';
 export { default as UsersModule } from './modules/users';
+export { default as FormModule } from './modules/form';
 
 export { default as OtpInput } from './components/OtpInput';
 
diff --git a/packages/react-material-ui/src/modules/crud/index.tsx b/packages/react-material-ui/src/modules/crud/index.tsx
index 8d6ac086..7629cc93 100644
--- a/packages/react-material-ui/src/modules/crud/index.tsx
+++ b/packages/react-material-ui/src/modules/crud/index.tsx
@@ -87,7 +87,7 @@ export interface ModuleProps {
   hideBreadcrumb?: boolean;
   resource: string;
   tableProps: TableProps;
-  formContainerVariation?: 'drawer' | 'modal';
+  formContainerVariation?: 'drawer' | 'modal' | 'page';
   additionalTableContent?: ReactNode;
   detailsFormProps?: PropsWithChildren<FormProps>;
   createFormProps?: PropsWithChildren<FormProps>;
@@ -296,12 +296,22 @@ const CrudModule = (props: ModuleProps) => {
         <TableSubmodule
           queryResource={props.resource}
           onAction={(payload) => {
+            if (props.formContainerVariation === 'page') {
+              props.navigate(
+                `/${props.resource}/${payload.action}/${payload.row.id}`,
+              );
+            }
+
             setSelectedRow(payload.row);
             setDrawerViewMode(payload.action);
             setCurrentViewIndex(payload.index);
             setFormVisible(true);
           }}
           onAddNew={() => {
+            if (props.formContainerVariation === 'page') {
+              props.navigate(`/${props.resource}/new`);
+            }
+
             setSelectedRow(null);
             setDrawerViewMode('creation');
             setFormVisible(true);
diff --git a/packages/react-material-ui/src/modules/form/index.tsx b/packages/react-material-ui/src/modules/form/index.tsx
new file mode 100644
index 00000000..0d5109e9
--- /dev/null
+++ b/packages/react-material-ui/src/modules/form/index.tsx
@@ -0,0 +1,257 @@
+import React, { useMemo, useState } from 'react';
+
+import { Box, Button, CircularProgress } from '@mui/material';
+import useDataProvider, { useQuery } from '@concepta/react-data-provider';
+import validator from '@rjsf/validator-ajv6';
+
+import type { IChangeEvent } from '@rjsf/core';
+
+import Text from '../../components/Text';
+import Breadcrumbs from '../../components/Breadcrumbs/Breadcrumbs';
+import ConfirmationModal from '../../components/submodules/ConfirmationModal';
+import { SchemaForm } from '../../components/SchemaForm';
+import { CustomTextFieldWidget } from '../../styles/CustomWidgets';
+
+import { ModuleProps } from '../crud';
+
+const FormModule = (props: ModuleProps) => {
+  const [formData, setFormData] = useState<Record<string, unknown> | null>(
+    null,
+  );
+  const [isConfirmationModalOpen, setConfirmationModalOpen] =
+    useState<boolean>(false);
+
+  const [, resource, viewMode, id] = window.location.pathname.split('/');
+
+  const formProps = useMemo(() => {
+    switch (viewMode) {
+      case 'new':
+        return props.createFormProps;
+      case 'edit':
+        return props.editFormProps;
+      case 'details':
+        return props.detailsFormProps;
+      default:
+        return props.createFormProps;
+    }
+  }, [
+    viewMode,
+    props.createFormProps,
+    props.detailsFormProps,
+    props.editFormProps,
+  ]);
+
+  const {
+    formSchema,
+    formUiSchema,
+    customValidate,
+    submitButtonTitle,
+    cancelButtonTitle,
+    children,
+    customFooterContent,
+    hideCancelButton,
+    onSuccess,
+    onError,
+    ...otherProps
+  } = formProps;
+
+  const { get, post, patch, del } = useDataProvider();
+
+  useQuery(
+    () =>
+      get({
+        uri: `/${resource}/${id}`,
+      }),
+    Boolean(id),
+    {
+      onSuccess: (data) => setFormData(data as Record<string, unknown>),
+    },
+  );
+
+  const { execute: createItem, isPending: isLoadingCreation } = useQuery(
+    (data: Record<string, unknown>) =>
+      post({
+        uri: `/${resource}`,
+        body: data,
+      }),
+    false,
+    {
+      onSuccess: onSuccess,
+      onError: onError,
+    },
+  );
+
+  const { execute: editItem, isPending: isLoadingEdit } = useQuery(
+    (data: Record<string, unknown>) =>
+      patch({
+        uri: `/${resource}/${id}`,
+        body: data,
+      }),
+    false,
+    {
+      onSuccess: onSuccess,
+      onError: onError,
+    },
+  );
+
+  const { execute: deleteItem, isPending: isLoadingDelete } = useQuery(
+    () =>
+      del({
+        uri: `/${resource}/${id}`,
+      }),
+    false,
+    {
+      onSuccess: (data) => {
+        if (onSuccess) {
+          onSuccess(data);
+        }
+        window.history.back();
+      },
+      onError: onError,
+    },
+  );
+
+  const handleFormSubmit = async (
+    values: IChangeEvent<Record<string, unknown>>,
+  ) => {
+    const fields = values.formData || {};
+
+    if (viewMode === 'new') {
+      await createItem(fields);
+    }
+
+    if (viewMode === 'edit') {
+      await editItem(fields);
+    }
+  };
+
+  const _widgets = {
+    TextWidget: CustomTextFieldWidget,
+  };
+
+  const titleName =
+    typeof props.title === 'string' ? props.title : props.title?.name;
+
+  return (
+    <Box>
+      <Box mt={4}>
+        <Breadcrumbs
+          routes={[
+            { href: '/', label: 'Home' },
+            {
+              href: '#',
+              label: titleName || 'Table',
+            },
+          ]}
+        />
+      </Box>
+
+      {typeof props.title === 'string' ? (
+        <Text fontFamily="Inter" fontSize={20} fontWeight={800} mt={4} mb={4}>
+          {props.title}
+        </Text>
+      ) : null}
+
+      {!!props.title && typeof props.title != 'string'
+        ? props.title.component
+        : null}
+
+      <SchemaForm.Form
+        schema={{
+          ...formSchema,
+          required: formSchema?.required || [],
+          properties: formSchema?.properties || {},
+          title: '',
+        }}
+        uiSchema={formUiSchema}
+        validator={validator}
+        onSubmit={handleFormSubmit}
+        noHtml5Validate={true}
+        showErrorList={false}
+        formData={formData}
+        widgets={_widgets}
+        customValidate={customValidate}
+        readonly={viewMode === 'details'}
+        {...otherProps}
+      >
+        {children}
+        <Box
+          display="flex"
+          flexDirection="row"
+          alignItems="center"
+          justifyContent="flex-start"
+          mt={4}
+        >
+          <Box
+            display="flex"
+            flexDirection="row"
+            alignItems="center"
+            mt={2}
+            gap={2}
+          >
+            {customFooterContent &&
+              (typeof customFooterContent === 'function'
+                ? customFooterContent(formData)
+                : customFooterContent)}
+            {viewMode === 'new' && !hideCancelButton && (
+              <Button
+                variant="outlined"
+                onClick={() => window.history.back()}
+                sx={{ flex: 1 }}
+              >
+                {cancelButtonTitle || 'Cancel'}
+              </Button>
+            )}
+            {viewMode === 'edit' && !hideCancelButton && (
+              <Button
+                variant="contained"
+                color="error"
+                onClick={() => setConfirmationModalOpen(true)}
+                sx={{ flex: 1 }}
+              >
+                {isLoadingDelete ? (
+                  <CircularProgress sx={{ color: 'white' }} size={24} />
+                ) : (
+                  cancelButtonTitle || 'Delete'
+                )}
+              </Button>
+            )}
+            {viewMode === 'details' && !hideCancelButton && (
+              <Button
+                variant="outlined"
+                onClick={() => window.history.back()}
+                sx={{ flex: 1 }}
+              >
+                {cancelButtonTitle || 'Close'}
+              </Button>
+            )}
+            {viewMode !== 'details' && (
+              <Button
+                type="submit"
+                variant="contained"
+                disabled={isLoadingCreation || isLoadingEdit || isLoadingDelete}
+                sx={{ flex: 1 }}
+              >
+                {isLoadingCreation || isLoadingEdit ? (
+                  <CircularProgress sx={{ color: 'white' }} size={24} />
+                ) : (
+                  submitButtonTitle || 'Save'
+                )}
+              </Button>
+            )}
+          </Box>
+        </Box>
+      </SchemaForm.Form>
+      <ConfirmationModal
+        isOpen={isConfirmationModalOpen}
+        onClose={() => setConfirmationModalOpen(false)}
+        onConfirm={() => {
+          setConfirmationModalOpen(false);
+          deleteItem(formData);
+        }}
+      />
+    </Box>
+  );
+};
+
+export default FormModule;
diff --git a/packages/react-navigation/src/components/AuthRoute.tsx b/packages/react-navigation/src/components/AuthRoute.tsx
index 7282476e..28150a12 100644
--- a/packages/react-navigation/src/components/AuthRoute.tsx
+++ b/packages/react-navigation/src/components/AuthRoute.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 
 import { Navigate } from 'react-router';
-import { AuthModule, AuthModuleProps } from '@concepta/react-material-ui/';
+import { AuthModule, AuthModuleProps } from '@concepta/react-material-ui';
 import { toast } from 'react-toastify';
 
 type Route = 'signIn' | 'signUp' | 'forgotPassword' | 'resetPassword';
diff --git a/packages/react-navigation/src/components/ChildRoutes.tsx b/packages/react-navigation/src/components/ChildRoutes.tsx
index 1d98e689..5eac20eb 100644
--- a/packages/react-navigation/src/components/ChildRoutes.tsx
+++ b/packages/react-navigation/src/components/ChildRoutes.tsx
@@ -5,7 +5,7 @@ import {
   AuthModuleProps,
   DrawerProps,
   NavbarProps,
-} from '@concepta/react-material-ui/';
+} from '@concepta/react-material-ui';
 
 import DefaultRoute from './DefaultRoute';
 import AuthRoute from './AuthRoute';
@@ -128,6 +128,7 @@ const ChildRoutes = ({
           name={child.props.name}
           showAppBar={child.props.showAppBar}
           module={child.props.module}
+          isFormPage={child.props.isFormPage}
           page={child.props.page}
           items={items}
           drawerProps={{
diff --git a/packages/react-navigation/src/components/DefaultRoute.tsx b/packages/react-navigation/src/components/DefaultRoute.tsx
index 1fbdc7d0..51a433e3 100644
--- a/packages/react-navigation/src/components/DefaultRoute.tsx
+++ b/packages/react-navigation/src/components/DefaultRoute.tsx
@@ -7,8 +7,9 @@ import {
   DrawerItemProps,
   DrawerProps,
   NavbarProps,
-} from '@concepta/react-material-ui/';
-import { ModuleProps } from '@concepta/react-material-ui/dist/modules/crud';
+  FormModule,
+  ModuleProps,
+} from '@concepta/react-material-ui';
 
 type DefaultRouteProps = {
   resource: string;
@@ -18,6 +19,7 @@ type DefaultRouteProps = {
   showAppBar?: boolean;
   module?: ModuleProps;
   page?: ReactNode;
+  isFormPage?: boolean;
   items: DrawerItemProps[];
   drawerProps?: DrawerProps;
   navbarProps?: NavbarProps;
@@ -35,6 +37,7 @@ const DefaultRoute = ({
   showAppBar = true,
   module,
   page,
+  isFormPage = false,
   items,
   drawerProps,
   navbarProps,
@@ -48,16 +51,24 @@ const DefaultRoute = ({
     onClick: () => item?.id && navigate(item.id),
   }));
 
-  const content = module ? (
-    <CrudModule
-      {...module}
-      resource={resourceName}
-      title={module.title || name}
-      navigate={useNavigateFilter ? navigate : undefined}
-    />
-  ) : (
-    page
-  );
+  const content =
+    module && !isFormPage ? (
+      <CrudModule
+        {...module}
+        resource={resourceName}
+        title={name}
+        navigate={useNavigateFilter ? navigate : undefined}
+      />
+    ) : isFormPage ? (
+      <FormModule
+        {...module}
+        resource={resourceName}
+        title={name}
+        navigate={useNavigateFilter ? navigate : undefined}
+      />
+    ) : (
+      page
+    );
 
   const wrappedContent = showAppBar ? (
     renderAppBar ? (
diff --git a/packages/react-navigation/src/components/Resource.tsx b/packages/react-navigation/src/components/Resource.tsx
index cf3947e6..708f2f34 100644
--- a/packages/react-navigation/src/components/Resource.tsx
+++ b/packages/react-navigation/src/components/Resource.tsx
@@ -1,17 +1,17 @@
 import React, { ReactNode } from 'react';
 import { Route } from 'react-router-dom';
-import { ModuleProps } from '@concepta/react-material-ui/dist/modules/crud';
-import { DrawerItemProps } from '@concepta/react-material-ui';
+import { ModuleProps } from '@concepta/react-material-ui';
 
 type ResourceProps = {
   id: string;
-  name: string;
-  icon: DrawerItemProps['icon'];
+  name?: string;
+  icon?: ReactNode;
   showDrawerItem?: boolean;
   isUnprotected?: boolean;
   showAppBar?: boolean;
   module?: Partial<ModuleProps>;
   page?: ReactNode;
+  isFormPage?: boolean;
 };
 
 const Resource = ({ id }: ResourceProps) => {