From fd110992cab5dbb7c07cc53f912453079c8b7556 Mon Sep 17 00:00:00 2001
From: Jefferson Silva <brnmouras@gmail.com>
Date: Tue, 3 Sep 2024 19:32:38 -0300
Subject: [PATCH 1/5] feat: implement page as crudmodule form container
 variation

---
 packages/react-material-ui/src/index.ts       |   1 +
 .../src/modules/crud/index.tsx                |  12 +-
 .../src/modules/form/index.tsx                | 234 ++++++++++++++++++
 .../src/components/AppBarContainer.tsx        |   2 +-
 .../src/components/DefaultRoute.tsx           |  31 ++-
 .../src/components/Resource.tsx               |   5 +-
 6 files changed, 271 insertions(+), 14 deletions(-)
 create mode 100644 packages/react-material-ui/src/modules/form/index.tsx

diff --git a/packages/react-material-ui/src/index.ts b/packages/react-material-ui/src/index.ts
index 60e76bf8..6d767b15 100644
--- a/packages/react-material-ui/src/index.ts
+++ b/packages/react-material-ui/src/index.ts
@@ -81,6 +81,7 @@ export {
 
 export { AuthModule, AuthModuleProps } from './modules/auth';
 export { default as CrudModule } from './modules/crud';
+export { default as FormModule } from './modules/form';
 export { default as UsersModule } from './modules/users';
 
 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 bf098038..1f068271 100644
--- a/packages/react-material-ui/src/modules/crud/index.tsx
+++ b/packages/react-material-ui/src/modules/crud/index.tsx
@@ -64,7 +64,7 @@ export interface ModuleProps {
   title?: string;
   resource: string;
   tableProps: TableProps;
-  formContainerVariation?: 'drawer' | 'modal';
+  formContainerVariation?: 'drawer' | 'modal' | 'page';
   detailsFormProps?: PropsWithChildren<FormProps>;
   createFormProps?: PropsWithChildren<FormProps>;
   editFormProps?: PropsWithChildren<FormProps>;
@@ -221,11 +221,21 @@ 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);
           }}
           onAddNew={() => {
+            if (props.formContainerVariation === 'page') {
+              props.navigate(`/${props.resource}/new`);
+            }
+
             setSelectedRow(null);
             setDrawerViewMode('creation');
             setCurrentViewIndex(0);
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..bf13aa62
--- /dev/null
+++ b/packages/react-material-ui/src/modules/form/index.tsx
@@ -0,0 +1,234 @@
+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 { 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 [, 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: onSuccess,
+      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,
+  };
+
+  return (
+    <Box>
+      <Box mt={4}>
+        <Breadcrumbs
+          routes={[
+            { href: '/', label: 'Home' },
+            { href: '#', label: props.title || 'Table' },
+          ]}
+        />
+      </Box>
+
+      {props.title ? (
+        <Text fontFamily="Inter" fontSize={20} fontWeight={800} mt={4} mb={4}>
+          {props.title}
+        </Text>
+      ) : 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={
+              viewMode === 'creation' ? 'flex-end' : 'space-between'
+            }
+            mt={4}
+          >
+            <Box
+              display="flex"
+              flexDirection="row"
+              alignItems="center"
+              mt={2}
+              gap={2}
+            >
+              {customFooterContent}
+              {viewMode === 'creation' && !hideCancelButton && (
+                <Button
+                  variant="outlined"
+                  onClick={() => null}
+                  sx={{ flex: 1 }}
+                >
+                  {cancelButtonTitle || 'Cancel'}
+                </Button>
+              )}
+              {viewMode === 'edit' && !hideCancelButton && (
+                <Button
+                  variant="contained"
+                  color="error"
+                  onClick={() => deleteItem(formData)}
+                  sx={{ flex: 1 }}
+                >
+                  {isLoadingDelete ? (
+                    <CircularProgress sx={{ color: 'white' }} size={24} />
+                  ) : (
+                    cancelButtonTitle || 'Delete'
+                  )}
+                </Button>
+              )}
+              {viewMode === 'details' && !hideCancelButton && (
+                <Button
+                  variant="outlined"
+                  onClick={() => null}
+                  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>
+    </Box>
+  );
+};
+
+export default FormModule;
diff --git a/packages/react-navigation/src/components/AppBarContainer.tsx b/packages/react-navigation/src/components/AppBarContainer.tsx
index 0b15e7e7..5a663492 100644
--- a/packages/react-navigation/src/components/AppBarContainer.tsx
+++ b/packages/react-navigation/src/components/AppBarContainer.tsx
@@ -49,7 +49,7 @@ export default function AppBarContainer({
       />
       <AppBar.Main>
         <AppBar.Nav
-          text={(user as any)?.username || ''}
+          text={(user as { username: string })?.username || ''}
           headerMenuOptions={(handleClose) => (
             <MenuItem onClick={() => onLogoutClick(handleClose)}>
               Sign Out
diff --git a/packages/react-navigation/src/components/DefaultRoute.tsx b/packages/react-navigation/src/components/DefaultRoute.tsx
index 92d146b7..f9a73e03 100644
--- a/packages/react-navigation/src/components/DefaultRoute.tsx
+++ b/packages/react-navigation/src/components/DefaultRoute.tsx
@@ -7,6 +7,7 @@ import {
   DrawerItemProps,
   DrawerProps,
   NavbarProps,
+  FormModule,
 } from '@concepta/react-material-ui/';
 import { ModuleProps } from '@concepta/react-material-ui/dist/modules/crud';
 
@@ -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={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 45994ca7..edbb20f1 100644
--- a/packages/react-navigation/src/components/Resource.tsx
+++ b/packages/react-navigation/src/components/Resource.tsx
@@ -4,13 +4,14 @@ import { ModuleProps } from '@concepta/react-material-ui/dist/modules/crud';
 
 type ResourceProps = {
   id: string;
-  name: string;
-  icon: ReactNode;
+  name?: string;
+  icon?: ReactNode;
   showDrawerItem?: boolean;
   isUnprotected?: boolean;
   showAppBar?: boolean;
   module?: Partial<ModuleProps>;
   page?: ReactNode;
+  isFormPage?: boolean;
 };
 
 const Resource = ({ id }: ResourceProps) => {

From 5033023bc93d22ff690114394273dd63d0777366 Mon Sep 17 00:00:00 2001
From: Jefferson Silva <brnmouras@gmail.com>
Date: Tue, 3 Sep 2024 22:04:44 -0300
Subject: [PATCH 2/5] feat: implement confirmation modal component

---
 .../submodules/ConfirmationModal/index.tsx    |  43 ++++++
 .../src/modules/form/index.tsx                | 133 +++++++++---------
 2 files changed, 112 insertions(+), 64 deletions(-)
 create mode 100644 packages/react-material-ui/src/components/submodules/ConfirmationModal/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..5e1a96b2
--- /dev/null
+++ b/packages/react-material-ui/src/components/submodules/ConfirmationModal/index.tsx
@@ -0,0 +1,43 @@
+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"
+        >
+          <ReportProblemOutlinedIcon />
+          <Typography variant="h5" sx={{ marginTop: 2 }}>
+            Alert Title
+          </Typography>
+          <Typography sx={{ marginTop: 2 }}>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut
+            lectus posuere, rutrum arcu non, blandit ipsum.
+          </Typography>
+        </Box>
+        <Box display="flex" justifyContent="center" sx={{ marginTop: 2 }}>
+          <Button onClick={onClose} variant="outlined" sx={{ marginRight: 2 }}>
+            Cancel
+          </Button>
+          <Button onClick={onConfirm} variant="contained">
+            Confirm
+          </Button>
+        </Box>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default ConfirmationModal;
diff --git a/packages/react-material-ui/src/modules/form/index.tsx b/packages/react-material-ui/src/modules/form/index.tsx
index bf13aa62..947e3ecb 100644
--- a/packages/react-material-ui/src/modules/form/index.tsx
+++ b/packages/react-material-ui/src/modules/form/index.tsx
@@ -8,6 +8,7 @@ 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';
 
@@ -17,6 +18,8 @@ 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('/');
 
@@ -156,77 +159,79 @@ const FormModule = (props: ModuleProps) => {
         readonly={viewMode === 'details'}
         {...otherProps}
       >
-        <>
-          {children}
+        {children}
+        <Box
+          display="flex"
+          flexDirection="row"
+          alignItems="center"
+          justifyContent="flex-start"
+          mt={4}
+        >
           <Box
             display="flex"
             flexDirection="row"
             alignItems="center"
-            justifyContent={
-              viewMode === 'creation' ? 'flex-end' : 'space-between'
-            }
-            mt={4}
+            mt={2}
+            gap={2}
           >
-            <Box
-              display="flex"
-              flexDirection="row"
-              alignItems="center"
-              mt={2}
-              gap={2}
-            >
-              {customFooterContent}
-              {viewMode === 'creation' && !hideCancelButton && (
-                <Button
-                  variant="outlined"
-                  onClick={() => null}
-                  sx={{ flex: 1 }}
-                >
-                  {cancelButtonTitle || 'Cancel'}
-                </Button>
-              )}
-              {viewMode === 'edit' && !hideCancelButton && (
-                <Button
-                  variant="contained"
-                  color="error"
-                  onClick={() => deleteItem(formData)}
-                  sx={{ flex: 1 }}
-                >
-                  {isLoadingDelete ? (
-                    <CircularProgress sx={{ color: 'white' }} size={24} />
-                  ) : (
-                    cancelButtonTitle || 'Delete'
-                  )}
-                </Button>
-              )}
-              {viewMode === 'details' && !hideCancelButton && (
-                <Button
-                  variant="outlined"
-                  onClick={() => null}
-                  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>
+            {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>
   );
 };

From 33566d559133be98c65dccb12af2add9d26b3b66 Mon Sep 17 00:00:00 2001
From: Jefferson Silva <brnmouras@gmail.com>
Date: Wed, 4 Sep 2024 14:07:56 -0300
Subject: [PATCH 3/5] refactor: modify confirmation modal styles

---
 .../submodules/ConfirmationModal/index.tsx    | 26 ++++++++++++++++---
 .../submodules/DrawerForm/index.tsx           | 15 +++++++++--
 .../components/submodules/ModalForm/index.tsx | 16 ++++++++++--
 .../src/modules/form/index.tsx                |  7 ++++-
 4 files changed, 56 insertions(+), 8 deletions(-)

diff --git a/packages/react-material-ui/src/components/submodules/ConfirmationModal/index.tsx b/packages/react-material-ui/src/components/submodules/ConfirmationModal/index.tsx
index 5e1a96b2..7454b021 100644
--- a/packages/react-material-ui/src/components/submodules/ConfirmationModal/index.tsx
+++ b/packages/react-material-ui/src/components/submodules/ConfirmationModal/index.tsx
@@ -18,7 +18,22 @@ const ConfirmationModal = ({ isOpen, onClose, onConfirm }: Props) => {
           alignItems="center"
           textAlign="center"
         >
-          <ReportProblemOutlinedIcon />
+          <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 }}>
             Alert Title
           </Typography>
@@ -28,10 +43,15 @@ const ConfirmationModal = ({ isOpen, onClose, onConfirm }: Props) => {
           </Typography>
         </Box>
         <Box display="flex" justifyContent="center" sx={{ marginTop: 2 }}>
-          <Button onClick={onClose} variant="outlined" sx={{ marginRight: 2 }}>
+          <Button
+            onClick={onClose}
+            variant="outlined"
+            color="error"
+            sx={{ marginRight: 2 }}
+          >
             Cancel
           </Button>
-          <Button onClick={onConfirm} variant="contained">
+          <Button onClick={onConfirm} variant="contained" color="error">
             Confirm
           </Button>
         </Box>
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 db862d7e..6899a284 100644
--- a/packages/react-material-ui/src/components/submodules/DrawerForm/index.tsx
+++ b/packages/react-material-ui/src/components/submodules/DrawerForm/index.tsx
@@ -18,7 +18,7 @@ import useDataProvider, { useQuery } from '@concepta/react-data-provider';
 import validator from '@rjsf/validator-ajv6';
 
 import { SchemaForm, SchemaFormProps } from '../../../components/SchemaForm';
-
+import ConfirmationModal from '../ConfirmationModal';
 import { CustomTextFieldWidget } from '../../../styles/CustomWidgets';
 
 type Action = 'creation' | 'edit' | 'details' | null;
@@ -64,6 +64,9 @@ type DrawerFormSubmoduleProps = PropsWithChildren<
 };
 
 const DrawerFormSubmodule = (props: DrawerFormSubmoduleProps) => {
+  const [isConfirmationModalOpen, setConfirmationModalOpen] =
+    useState<boolean>(false);
+
   const {
     queryResource,
     viewMode,
@@ -257,7 +260,7 @@ const DrawerFormSubmodule = (props: DrawerFormSubmoduleProps) => {
               <Button
                 variant="contained"
                 color="error"
-                onClick={() => deleteItem(formData)}
+                onClick={() => setConfirmationModalOpen(true)}
                 sx={{ flex: 1 }}
               >
                 {isLoadingDelete ? (
@@ -290,6 +293,14 @@ const DrawerFormSubmodule = (props: DrawerFormSubmoduleProps) => {
           </Box>
         </Box>
       </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 4224608a..488c3a4f 100644
--- a/packages/react-material-ui/src/components/submodules/ModalForm/index.tsx
+++ b/packages/react-material-ui/src/components/submodules/ModalForm/index.tsx
@@ -1,4 +1,4 @@
-import React, { PropsWithChildren, ReactNode } from 'react';
+import React, { PropsWithChildren, ReactNode, useState } from 'react';
 
 import type { RJSFSchema, UiSchema, CustomValidator } from '@rjsf/utils';
 import type { IChangeEvent, FormProps } from '@rjsf/core';
@@ -20,6 +20,7 @@ import validator from '@rjsf/validator-ajv6';
 
 import { SchemaForm, SchemaFormProps } from '../../../components/SchemaForm';
 import { CustomTextFieldWidget } from '../../../styles/CustomWidgets';
+import ConfirmationModal from '../ConfirmationModal';
 
 type Action = 'creation' | 'edit' | 'details' | null;
 
@@ -64,6 +65,9 @@ type ModalFormSubmoduleProps = PropsWithChildren<
 };
 
 const ModalFormSubmodule = (props: ModalFormSubmoduleProps) => {
+  const [isConfirmationModalOpen, setConfirmationModalOpen] =
+    useState<boolean>(false);
+
   const {
     queryResource,
     viewMode,
@@ -241,7 +245,7 @@ const ModalFormSubmodule = (props: ModalFormSubmoduleProps) => {
                   <Button
                     variant="contained"
                     color="error"
-                    onClick={() => deleteItem(formData)}
+                    onClick={() => setConfirmationModalOpen(true)}
                     sx={{ flex: 1 }}
                   >
                     {isLoadingDelete ? (
@@ -277,6 +281,14 @@ const ModalFormSubmodule = (props: ModalFormSubmoduleProps) => {
           </>
         </SchemaForm.Form>
       </DialogContent>
+      <ConfirmationModal
+        isOpen={isConfirmationModalOpen}
+        onClose={() => setConfirmationModalOpen(false)}
+        onConfirm={() => {
+          setConfirmationModalOpen(false);
+          deleteItem(formData);
+        }}
+      />
     </Dialog>
   );
 };
diff --git a/packages/react-material-ui/src/modules/form/index.tsx b/packages/react-material-ui/src/modules/form/index.tsx
index 947e3ecb..414fbcc8 100644
--- a/packages/react-material-ui/src/modules/form/index.tsx
+++ b/packages/react-material-ui/src/modules/form/index.tsx
@@ -101,7 +101,12 @@ const FormModule = (props: ModuleProps) => {
       }),
     false,
     {
-      onSuccess: onSuccess,
+      onSuccess: (data) => {
+        if (onSuccess) {
+          onSuccess(data);
+        }
+        window.history.back();
+      },
       onError: onError,
     },
   );

From ce0e3a9fb9f6ee465643df28f2b83a756a53489c Mon Sep 17 00:00:00 2001
From: Jefferson Silva <brnmouras@gmail.com>
Date: Wed, 4 Sep 2024 14:17:40 -0300
Subject: [PATCH 4/5] refactor: add formpage prop to router children

---
 packages/react-navigation/src/components/Router.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/react-navigation/src/components/Router.tsx b/packages/react-navigation/src/components/Router.tsx
index e699b3e7..0cf29032 100644
--- a/packages/react-navigation/src/components/Router.tsx
+++ b/packages/react-navigation/src/components/Router.tsx
@@ -134,6 +134,7 @@ const Router = ({
           name={child.props.name}
           showAppBar={child.props.showAppBar}
           module={child.props.module}
+          isFormPage={child.props.isFormPage}
           page={child.props.page}
           items={items}
           drawerProps={drawerProps}

From e77c55aca8869f52ae479c3629f128259b8487f3 Mon Sep 17 00:00:00 2001
From: Jefferson Silva <brnmouras@gmail.com>
Date: Fri, 6 Sep 2024 14:29:47 -0300
Subject: [PATCH 5/5] refactor: change confirmation modal strings

---
 .../src/components/submodules/ConfirmationModal/index.tsx    | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/packages/react-material-ui/src/components/submodules/ConfirmationModal/index.tsx b/packages/react-material-ui/src/components/submodules/ConfirmationModal/index.tsx
index 7454b021..817fd471 100644
--- a/packages/react-material-ui/src/components/submodules/ConfirmationModal/index.tsx
+++ b/packages/react-material-ui/src/components/submodules/ConfirmationModal/index.tsx
@@ -35,11 +35,10 @@ const ConfirmationModal = ({ isOpen, onClose, onConfirm }: Props) => {
             />
           </Box>
           <Typography variant="h5" sx={{ marginTop: 2 }}>
-            Alert Title
+            Delete Item
           </Typography>
           <Typography sx={{ marginTop: 2 }}>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut
-            lectus posuere, rutrum arcu non, blandit ipsum.
+            Are you sure you want to delete this item?
           </Typography>
         </Box>
         <Box display="flex" justifyContent="center" sx={{ marginTop: 2 }}>