LFFE-1 role management structure enhancement

src/components/dashboard/refahi-province-manager/index.jsx

@@ -125,15 +125,11 @@ function DashboardRefahiProvinceManagerComponent() {
         ],
         []
     );
-    const data =[{
-        id : 1
-    }]
     
     return (
         <DashboardLayouts>
             <Box sx={{px: 3}}>
                 <DataTable
-                data={data}
                     tableUrl={GET_REFAHI_PROVINCE_MANAGER}
                     columns={columns}
                     selectableRow={false}

src/components/dashboard/role-management/Form/CreateForm/CreateContent.jsx

@@ -57,7 +57,7 @@ const CreateContent = ({mutate, fetchUrl, setOpenConfirmDialog}) => {
         <>
             <DialogContent>
                 <Stack spacing={2}>
-                    <Stack direction="row" spacing={2}>
+                    <Stack direction="row" spacing={2} sx={{mt : 1}}>
                         <TextField
                             name="name"
                             label={t("AddDialog.name")}

src/components/dashboard/role-management/Form/UpdateForm/UpdateContent.jsx

@@ -1,33 +1,14 @@
-import {useTranslations} from "next-intl";
-import {useState} from "react";
-import {
-    Button,
-    Checkbox,
-    Dialog,
-    DialogActions,
-    DialogContent,
-    DialogTitle,
-    FormControl,
-    FormControlLabel,
-    FormHelperText,
-    FormLabel,
-    Grid,
-    IconButton,
-    Stack,
-    TextField,
-    Tooltip
-} from "@mui/material";
-import {useFormik} from "formik";
-import EditIcon from '@mui/icons-material/Edit';
-import {UPDATE_ROLE_MANAGEMENT} from "@/core/data/apiRoutes";
-import useRequest from "@/lib/app/hooks/useRequest";
+import { UPDATE_ROLE_MANAGEMENT } from "@/core/data/apiRoutes";
 import useNotification from "@/lib/app/hooks/useNotification";
-import * as Yup from "yup";
 import usePermissions from "@/lib/app/hooks/usePermissions";
+import useRequest from "@/lib/app/hooks/useRequest";
+import { Button, Checkbox, DialogActions, DialogContent, FormControl, FormControlLabel, FormHelperText, FormLabel, Grid, Stack, TextField } from "@mui/material"
+import { useFormik } from "formik";
+import { useTranslations } from "next-intl";
+import * as Yup from "yup";
 
-const UpdateForm = ({row, fetchUrl, mutate}) => {
+const UpdateContent = ({row, fetchUrl, mutate, setOpenConfirmDialog}) => {
     const t = useTranslations();
-    const [openConfirmDialog, setOpenConfirmDialog] = useState(false);
     const requestServer = useRequest({auth: true})
     const {update_notification} = useNotification()
     const {permissions_list} = usePermissions()
@@ -62,24 +43,11 @@ const UpdateForm = ({row, fetchUrl, mutate}) => {
             });
         },
     });
-
-    return (<>
-        <Tooltip title={t("UpdateDialog.update-tooltip")}>
-            <IconButton
-                color="primary"
-                onClick={() => {
-                    setOpenConfirmDialog(true)
-                }}
-            >
-                <EditIcon/>
-            </IconButton>
-        </Tooltip>
-        <Dialog maxWidth={"md"} open={openConfirmDialog}
-                PaperProps={{sx: {boxShadow: 'rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px'}}}>
-            <DialogTitle>{t("UpdateDialog.update")}</DialogTitle>
+    return(
+        <>
             <DialogContent>
                 <Stack spacing={2}>
-                    <Stack direction="row" spacing={2} sx={{mt: 1}}>
+                    <Stack direction="row" spacing={2} sx={{mt : 1}}>
                         <TextField
                             name="name"
                             label={t("UpdateDialog.name")}
@@ -150,7 +118,7 @@ const UpdateForm = ({row, fetchUrl, mutate}) => {
                     {t("UpdateDialog.button-update")}
                 </Button>
             </DialogActions>
-        </Dialog>
-    </>);
-};
-export default UpdateForm;
+        </>
+    )
+}
+export default UpdateContent

src/components/dashboard/role-management/Form/UpdateForm/index.jsx

@@ -0,0 +1,31 @@
+import { Dialog, DialogTitle, IconButton, Tooltip } from "@mui/material"
+import { useTranslations } from "next-intl";
+import { useState } from "react";
+import EditIcon from '@mui/icons-material/Edit';
+import UpdateContent from "./UpdateContent";
+
+const Update = ({row, fetchUrl, mutate}) => {
+    const t = useTranslations();
+    const [openConfirmDialog, setOpenConfirmDialog] = useState(false);
+    
+    return (
+        <>
+            <Tooltip title={t("UpdateDialog.update-tooltip")}>
+                <IconButton
+                    color="primary"
+                    onClick={() => {
+                        setOpenConfirmDialog(true)
+                    }}
+                >
+                    <EditIcon/>
+                </IconButton>
+            </Tooltip>
+            <Dialog maxWidth={"md"} open={openConfirmDialog}
+                    PaperProps={{sx: {boxShadow: 'rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px'}}}>
+                <DialogTitle>{t("UpdateDialog.update")}</DialogTitle>
+                <UpdateContent row={row} fetchUrl={fetchUrl} mutate={mutate} setOpenConfirmDialog={setOpenConfirmDialog} />
+            </Dialog>
+        </>
+    )
+}
+export default Update

src/components/dashboard/role-management/TableRowActions.jsx

@@ -1,12 +1,12 @@
 import {Box} from "@mui/material";
 import DeleteForm from "./Form/DeleteForm"
-import UpdateForm from "./Form/UpdateForm"
+import Update from "./Form/UpdateForm";
 
 const TableRowActions = ({row, mutate, fetchUrl}) => {
 
     return (
         <Box sx={{display: "flex", flexWrap: "nowrap", gap: "8px"}}>
-            <UpdateForm
+            <Update
                 row={row}
                 mutate={mutate}
                 fetchUrl={fetchUrl}