complete role page with store update and delete action

src/components/dashboard/Roles/DataTable.jsx

@@ -1,12 +1,11 @@
 "use client";
 import DataTableWithAuth from "@/core/components/DataTableWithAuth";
 import { GET_ROLE_LIST } from "@/core/utils/routes";
-import { Box, Stack, Typography } from "@mui/material";
+import { Box, Typography } from "@mui/material";
 import { useMemo } from "react";
-// import RowActions from "./RowActions";
 import Toolbar from "./Toolbar";
 import moment from "jalali-moment";
-import RowActions from "@/components/dashboard/Roles/RowAcctions";
+import RowActions from "./RowAcctions";
 
 const DataTable = () => {
     const columns = useMemo(

src/components/dashboard/Roles/RowAcctions/Edit/Form/index.jsx

@@ -0,0 +1,186 @@
+import LtrTextField from "@/core/components/LtrTextField";
+import StyledForm from "@/core/components/StyledForm";
+import { CREATE_ROLE } from "@/core/utils/routes";
+import useRequest from "@/lib/hooks/useRequest";
+import { yupResolver } from "@hookform/resolvers/yup";
+import {
+    Box,
+    Button,
+    Checkbox,
+    Chip,
+    DialogActions,
+    DialogContent,
+    Divider,
+    FormControlLabel,
+    FormHelperText,
+    Grid,
+    Skeleton,
+    Stack,
+} from "@mui/material";
+import { Controller, useForm } from "react-hook-form";
+import { array, object, string } from "yup";
+import usePermissionsList from "@/lib/hooks/usePermissionsList";
+
+const validationSchema = object().shape({
+    name: string().required("نام فارسی نقش را وارد کنید"),
+    name_fa: string().required("نام انگلیسی نقش را وارد کنید"),
+    permissions: array().min(1, "حداقل یک دسترسی را انتخاب نمایید")
+});
+
+const UpdateRoleForm = ({ values, setOpen, mutate }) => {
+    const requestServer = useRequest({ notificationSuccess: true });
+    const { permissions, loadingPermissions } = usePermissionsList();
+
+    const defaultValues = {
+        name: values.name,
+        name_fa: values.name_fa,
+        permissions: values.permissions?.map(p => p.id) || []
+    };
+
+    const {
+        control,
+        handleSubmit,
+        formState: { isSubmitting, errors },
+    } = useForm({ defaultValues, resolver: yupResolver(validationSchema) });
+
+    const onSubmit = async (data) => {
+        try {
+            await requestServer(`${CREATE_ROLE}/${values.id}`, "post", {
+                data: {
+                    permissions: data.permissions,
+                    name: data.name,
+                    name_fa: data.name_fa,
+                },
+            });
+            setOpen(false);
+            mutate();
+        } catch (error) {}
+    };
+
+    return (
+        <>
+            <DialogContent dividers>
+                <Divider sx={{ mb: 3 }}>
+                    <Chip color="primary" variant="outlined" label="کاربر جدید" />
+                </Divider>
+                <StyledForm
+                    id="UpdateRoleForm"
+                    onSubmit={handleSubmit(onSubmit)}
+                    style={{ width: "100%", height: "100%" }}
+                >
+                    <Stack spacing={2}>
+                        <Grid container spacing={2}>
+                            <Grid size={{ xs: 12, md: 6 }}>
+                                <Controller
+                                    control={control}
+                                    render={({ field, fieldState: { error } }) => {
+                                        return (
+                                            <LtrTextField
+                                                {...field}
+                                                label="نام انگلیسی نقش"
+                                                variant="outlined"
+                                                fullWidth
+                                                error={!!error}
+                                                helperText={!!error && error.message}
+                                            />
+                                        );
+                                    }}
+                                    name={"name"}
+                                />
+                            </Grid>
+                            <Grid size={{ xs: 12, md: 6 }}>
+                                <Controller
+                                    control={control}
+                                    render={({ field, fieldState: { error } }) => {
+                                        return (
+                                            <LtrTextField
+                                                {...field}
+                                                label="نام فارسی نقش"
+                                                variant="outlined"
+                                                fullWidth
+                                                error={!!error}
+                                                helperText={!!error && error.message}
+                                            />
+                                        );
+                                    }}
+                                    name={"name_fa"}
+                                />
+                            </Grid>
+                            <Box sx={{width: "100%"}}>
+                                <Divider>
+                                    <Chip label="سطوح دسترسی" size="medium" />
+                                </Divider>
+                            </Box>
+                            <Grid container spacing={1} sx={{width: "100%"}}>
+                                {!loadingPermissions ? (
+                                    <Controller
+                                        control={control}
+                                        name="permissions"
+                                        render={({ field, fieldState: {error} }) => (
+                                            <>
+                                                {permissions.map((permission) => (
+                                                    <Grid key={permission.id} size={{ xs: 12, md: 4 }}>
+                                                        <FormControlLabel
+                                                            control={
+                                                                <Checkbox
+                                                                    value={permission.id}
+                                                                    checked={field.value.includes(permission.id)}
+                                                                    onChange={(e) => {
+                                                                        const value = parseInt(e.target.value, 10);
+                                                                        if (e.target.checked) {
+                                                                            field.onChange([...field.value, value]);
+                                                                        } else {
+                                                                            field.onChange(field.value.filter((id) => id !== value));
+                                                                        }
+                                                                    }}
+                                                                />
+                                                            }
+                                                            label={permission.name_fa}
+                                                        />
+                                                    </Grid>
+                                                ))}
+                                                <FormHelperText sx={{color: "error.main"}}>{!!error && error.message}</FormHelperText>
+                                            </>
+                                        )}
+                                    />
+                                ) : (
+                                    <Grid container spacing={2} width="100%">
+                                        <Grid size={{ xs: 12, md: 4 }}><Skeleton animation="wave" /></Grid>
+                                        <Grid size={{ xs: 12, md: 4 }}><Skeleton animation="wave" /></Grid>
+                                        <Grid size={{ xs: 12, md: 4 }}><Skeleton animation="wave" /></Grid>
+                                        <Grid size={{ xs: 12, md: 4 }}><Skeleton animation="wave" /></Grid>
+                                        <Grid size={{ xs: 12, md: 4 }}><Skeleton animation="wave" /></Grid>
+                                        <Grid size={{ xs: 12, md: 4 }}><Skeleton animation="wave" /></Grid>
+                                    </Grid>
+                                )}
+                            </Grid>
+                        </Grid>
+                    </Stack>
+                </StyledForm>
+            </DialogContent>
+            <DialogActions>
+                <Button
+                    disabled={isSubmitting}
+                    variant="outlined"
+                    color="secondary"
+                    size="large"
+                    onClick={() => setOpen(false)}
+                >
+                    بستن
+                </Button>
+                <Button
+                    type="submit"
+                    disabled={isSubmitting}
+                    form="UpdateRoleForm"
+                    size="large"
+                    autoFocus
+                    variant="contained"
+                >
+                    {isSubmitting ? "در حال ویرایش کاربر..." : "ویرایش کاربر"}
+                </Button>
+            </DialogActions>
+        </>
+    );
+};
+
+export default UpdateRoleForm;

src/components/dashboard/Roles/RowAcctions/Edit/index.jsx

@@ -0,0 +1,27 @@
+"use client";
+import { Edit } from "@mui/icons-material";
+import { Dialog, IconButton, Tooltip } from "@mui/material";
+import { useState } from "react";
+import UpdateUserForm from "./Form";
+
+const UpdateUser = ({ values, mutate }) => {
+    const [open, setOpen] = useState(false);
+
+    const handleOpen = () => {
+        setOpen(true);
+    };
+
+    return (
+        <>
+            <Tooltip title="ویرایش">
+                <IconButton onClick={handleOpen}>
+                    <Edit />
+                </IconButton>
+            </Tooltip>
+            <Dialog maxWidth="sm" fullWidth={true} open={open}>
+                <UpdateUserForm open={open} setOpen={setOpen} mutate={mutate} values={values} />
+            </Dialog>
+        </>
+    );
+};
+export default UpdateUser;

src/components/dashboard/Roles/RowAcctions/index.jsx

@@ -1,11 +1,11 @@
 import { Box } from "@mui/material";
 import Delete from "./Delete";
-// import UpdateUser from "./Edit";
+import UpdateUser from "./Edit";
 const RowActions = ({ row, mutate }) => {
     return (
         <Box sx={{ display: "flex", gap: 1, alignItems: "center" }}>
             <Delete rowId={row.original.id} mutate={mutate} />
-            {/*<UpdateUser values={row.original} mutate={mutate} />*/}
+            <UpdateUser values={row.original} mutate={mutate} />
         </Box>
     );
 };

src/components/dashboard/Roles/Toolbar/Create/Form/index.jsx

@@ -39,7 +39,6 @@ const CreateRoleForm = ({ setOpen, mutate }) => {
         control,
         handleSubmit,
         formState: { isSubmitting, errors },
-        watch,
     } = useForm({ defaultValues, resolver: yupResolver(validationSchema) });
 
     const onSubmit = async (data) => {