CFE-3 Merging

src/components/dashboard/change-password/change-password-form/__test__/index.test.js

@@ -0,0 +1,305 @@
+import { render, screen, waitFor, fireEvent , act } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import MockAppWithProviders from "../../../../../../mocks/AppWithProvider";
+import ChangePasswordForm from "@/components/dashboard/change-password/change-password-form";
+import {SET_USER_PASSWORD} from "@/core/data/apiRoutes";
+import {server} from "../../../../../../mocks/server";
+import {rest} from "msw";
+
+describe('Change Password Form Component From Change Password Page', () => {
+    describe('Rendering', () => {
+        it('Should see change password heading',() => {
+            render(<MockAppWithProviders><ChangePasswordForm /></MockAppWithProviders>);
+            const changePasswordElement = screen.getByRole('heading', { level: 4 });
+            expect(changePasswordElement).toHaveTextContent('تغییر رمز عبور');
+        });
+        it('Should see the label for current password field', () => {
+            render(<MockAppWithProviders><ChangePasswordForm /></MockAppWithProviders>);
+            const currentPasswordLabel = screen.queryByLabelText('رمز عبور فعلی');
+            expect(currentPasswordLabel).toBeInTheDocument();
+        });
+        it('Should see the label for new password field', () => {
+            render(<MockAppWithProviders><ChangePasswordForm /></MockAppWithProviders>);
+            const newPasswordLabel = screen.queryByLabelText('رمز عبور جدید');
+            expect(newPasswordLabel).toBeInTheDocument();
+        });
+        it('Should see the label for confirm password field', () => {
+            render(<MockAppWithProviders><ChangePasswordForm /></MockAppWithProviders>);
+            const confirmPasswordLabel = screen.queryByLabelText('تکرار رمز عبور جدید');
+            expect(confirmPasswordLabel).toBeInTheDocument();
+        });
+        it('Should see the submit button with the submit label and should be disable', () => {
+            render(<MockAppWithProviders><ChangePasswordForm /></MockAppWithProviders>);
+            const submitButton = screen.getByRole('button', { name: 'ثبت' });
+            expect(submitButton).toBeInTheDocument();
+            expect(submitButton).toBeDisabled();
+        });
+        it('Should have empty input fields and not see any validation error for current password, new password, and confirm password', () => {
+            render(<MockAppWithProviders><ChangePasswordForm /></MockAppWithProviders>);
+            const currentPasswordInput = screen.queryByLabelText('رمز عبور فعلی');
+            const newPasswordInput = screen.queryByLabelText('رمز عبور جدید');
+            const confirmPasswordInput = screen.queryByLabelText('تکرار رمز عبور جدید');
+
+            expect(currentPasswordInput).toHaveValue('');
+            expect(newPasswordInput).toHaveValue('');
+            expect(confirmPasswordInput).toHaveValue('');
+
+            expect(screen.queryByText("وارد کردن رمز عبور فعلی الزامیست!")).not.toBeInTheDocument();
+            expect(screen.queryByText("وارد کردن رمز عبور جدید الزامیست!")).not.toBeInTheDocument();
+            expect(screen.queryByText("وارد کردن تکرار رمز عبور جدید الزامیست!")).not.toBeInTheDocument();
+
+        });
+    });
+    describe("Behavior", ()=>{
+        it('Should fill the current password field and not see any error while its not empty', async () => {
+            render(<MockAppWithProviders><ChangePasswordForm /></MockAppWithProviders>);
+
+            const currentPasswordInput = screen.queryByLabelText('رمز عبور فعلی');
+
+            // Simulate typing something in the current password input
+            fireEvent.change(currentPasswordInput, { target: { value: 'witel@fani0' } });
+
+            await waitFor(() => {
+                expect(screen.queryByText("وارد کردن رمز عبور فعلی الزامیست!")).not.toBeInTheDocument();
+                expect(currentPasswordInput).toHaveValue('witel@fani0');
+            });
+        });
+        it('Should fill the new password field and not see any error while its not empty', async () => {
+            render(<MockAppWithProviders><ChangePasswordForm /></MockAppWithProviders>);
+
+            const newPasswordInput = screen.queryByLabelText('رمز عبور جدید');
+
+            // Simulate typing something in the new password input
+            fireEvent.change(newPasswordInput, { target: { value: 'witel@fani1' } });
+
+            await waitFor(() => {
+                expect(screen.queryByText("وارد کردن رمز عبور جدید الزامیست!")).not.toBeInTheDocument();
+                expect(newPasswordInput).toHaveValue('witel@fani1');
+            });
+        });
+        it('Should fill the confirm new password field and not see any error while its not empty', async () => {
+            render(<MockAppWithProviders><ChangePasswordForm /></MockAppWithProviders>);
+
+            const confirmPasswordInput = screen.queryByLabelText('تکرار رمز عبور جدید');
+
+            // Simulate typing something in the confirmation new password input
+            fireEvent.change(confirmPasswordInput, { target: { value: 'witel@fani1' } });
+
+            await waitFor(() => {
+                expect(screen.queryByText("وارد کردن تکرار رمز عبور جدید الزامیست!")).not.toBeInTheDocument();
+                expect(confirmPasswordInput).toHaveValue('witel@fani1');
+            });
+        });
+    });
+    describe("Validation", ()=>{
+        it('Should see error while current password is empty on blur event', async () => {
+            render(<MockAppWithProviders><ChangePasswordForm /></MockAppWithProviders>);
+
+            // Simulate blur event on the current password input
+            const currentPasswordInput = screen.queryByLabelText('رمز عبور فعلی');
+
+            // Clear the input field
+            fireEvent.change(currentPasswordInput, { target: { value: '' } });
+
+            fireEvent.blur(currentPasswordInput);
+
+            await waitFor(()=>{
+                expect(screen.queryByText("وارد کردن رمز عبور فعلی الزامیست!")).toBeInTheDocument()
+            });
+        });
+        it('Should see error while new password is empty on blur event', async () => {
+            render(<MockAppWithProviders><ChangePasswordForm /></MockAppWithProviders>);
+
+            // Simulate blur event on the new password input
+            const newPasswordInput = screen.queryByLabelText('رمز عبور جدید');
+
+            // Clear the input field
+            fireEvent.change(newPasswordInput, { target: { value: '' } });
+
+            fireEvent.blur(newPasswordInput);
+
+            await waitFor(()=>{
+                expect(screen.queryByText("وارد کردن رمز عبور جدید الزامیست!")).toBeInTheDocument()
+            });
+        });
+        it('Should see error while confirm new password is empty on blur event', async () => {
+            render(<MockAppWithProviders><ChangePasswordForm /></MockAppWithProviders>);
+
+            // Simulate blur event on the new password input
+            const confirmPasswordInput = screen.queryByLabelText('تکرار رمز عبور جدید');
+
+            // Clear the input field
+            fireEvent.change(confirmPasswordInput, { target: { value: '' } });
+
+            fireEvent.blur(confirmPasswordInput);
+
+            await waitFor(()=>{
+                expect(screen.queryByText("وارد کردن تکرار رمز عبور جدید الزامیست!")).toBeInTheDocument()
+            });
+        });
+        it('Should see error when new password is less than 8 characters', async () => {
+            render(<MockAppWithProviders><ChangePasswordForm /></MockAppWithProviders>);
+
+            const newPasswordInput = screen.queryByLabelText('رمز عبور جدید');
+            const submitButton = screen.getByRole('button', { name: 'ثبت' });
+
+            // Simulate entering a short new password
+            fireEvent.change(newPasswordInput, { target: { value: 'test' } });
+            fireEvent.blur(newPasswordInput);
+
+            await waitFor(() => {
+                expect(screen.queryByText("رمز عبور باید حداقل 8 کاراکتر باشد.")).toBeInTheDocument();
+            });
+
+            // Simulate clicking the submit button
+            fireEvent.click(submitButton);
+
+            await waitFor(() => {
+                expect(screen.queryByText("رمز عبور باید حداقل 8 کاراکتر باشد.")).toBeInTheDocument();
+            });
+        });
+        it('Should not see error when new password are 8 or more characters', async () => {
+            render(<MockAppWithProviders><ChangePasswordForm /></MockAppWithProviders>);
+
+            const newPasswordInput = screen.queryByLabelText('رمز عبور جدید');
+            const submitButton = screen.getByRole('button', { name: 'ثبت' });
+
+            // Simulate entering a valid new password
+            fireEvent.change(newPasswordInput, { target: { value: 'Witel@fani1' } });
+            fireEvent.blur(newPasswordInput);
+
+            await waitFor(() => {
+                expect(screen.queryByText("رمز عبور باید حداقل 8 کاراکتر باشد.")).not.toBeInTheDocument();
+            });
+
+            // Simulate clicking the submit button
+            fireEvent.click(submitButton);
+
+            await waitFor(() => {
+                expect(screen.queryByText("رمز عبور باید حداقل 8 کاراکتر باشد.")).not.toBeInTheDocument();
+            });
+        });
+        it('Should see error when new password and confirm password do not match on blur event and submit click', async () => {
+            render(<MockAppWithProviders><ChangePasswordForm /></MockAppWithProviders>);
+
+            const newPasswordInput = screen.queryByLabelText('رمز عبور جدید');
+            const confirmPasswordInput = screen.queryByLabelText('تکرار رمز عبور جدید');
+            const submitButton = screen.getByRole('button', { name: 'ثبت' });
+
+            // Simulate entering a valid new password
+            fireEvent.change(newPasswordInput, { target: { value: 'Witel@fani1' } });
+            fireEvent.blur(newPasswordInput);
+
+            // Simulate entering a different value in the confirm password field
+            fireEvent.change(confirmPasswordInput, { target: { value: 'MismatchedPassword' } });
+            fireEvent.blur(confirmPasswordInput);
+
+            await waitFor(() => {
+                expect(screen.queryByText("پسورد و تکرار رمز عبور باید یکسان باشد")).toBeInTheDocument();
+            });
+
+            // Simulate clicking the submit button
+            fireEvent.click(submitButton);
+
+            await waitFor(() => {
+                expect(screen.queryByText("پسورد و تکرار رمز عبور باید یکسان باشد")).toBeInTheDocument();
+            });
+        });
+        it('Should not see error when new password and confirm password match on blur event and submit click', async () => {
+            render(<MockAppWithProviders><ChangePasswordForm /></MockAppWithProviders>);
+
+            const newPasswordInput = screen.queryByLabelText('رمز عبور جدید');
+            const confirmPasswordInput = screen.queryByLabelText('تکرار رمز عبور جدید');
+            const submitButton = screen.getByRole('button', { name: 'ثبت' });
+
+            // Simulate entering a valid new password
+            fireEvent.change(newPasswordInput, { target: { value: 'Witel@fani1' } });
+            fireEvent.blur(newPasswordInput);
+
+            // Simulate entering the same value in the confirmation password field
+            fireEvent.change(confirmPasswordInput, { target: { value: 'Witel@fani1' } });
+            fireEvent.blur(confirmPasswordInput);
+
+            await waitFor(() => {
+                expect(screen.queryByText("پسورد و تکرار رمز عبور باید یکسان باشد")).not.toBeInTheDocument();
+            });
+
+            // Simulate clicking the submit button
+            fireEvent.click(submitButton);
+
+            await waitFor(() => {
+                expect(screen.queryByText("پسورد و تکرار رمز عبور باید یکسان باشد")).not.toBeInTheDocument();
+            });
+        });
+    });
+    describe("Form Submission", () => {
+        it('Should enable the submit button when the inputs are valid', async () => {
+            render(<MockAppWithProviders><ChangePasswordForm /></MockAppWithProviders>);
+
+            const submitButton = screen.getByRole('button', { name: 'ثبت' });
+
+            // Simulate entering valid values in the form fields
+            const currentPasswordInput = screen.queryByLabelText('رمز عبور فعلی');
+            const newPasswordInput = screen.queryByLabelText('رمز عبور جدید');
+            const confirmPasswordInput = screen.queryByLabelText('تکرار رمز عبور جدید');
+
+            fireEvent.change(currentPasswordInput, { target: { value: 'Witel@fani0' } });
+            fireEvent.change(newPasswordInput, { target: { value: 'Witel@fani1' } });
+            fireEvent.change(confirmPasswordInput, { target: { value: 'Witel@fani1' } });
+
+            // Check if the submit button is enabled
+            await waitFor(() => {
+                expect(submitButton).not.toBeDisabled();
+            });
+        });
+        it('Should request to api and resetform in success response', async () => {
+            // Render the component
+            render(<MockAppWithProviders><ChangePasswordForm /></MockAppWithProviders>);
+
+            // Fill in the form fields
+            const currentPasswordInput = screen.queryByLabelText('رمز عبور فعلی');
+            const newPasswordInput = screen.queryByLabelText('رمز عبور جدید');
+            const confirmPasswordInput = screen.queryByLabelText('تکرار رمز عبور جدید');
+
+            fireEvent.change(currentPasswordInput, { target: { value: 'Witel@fani0' } });
+            fireEvent.change(newPasswordInput, { target: { value: 'Witel@fani1' } });
+            fireEvent.change(confirmPasswordInput, { target: { value: 'Witel@fani1' } });
+
+            // Submit the form
+            const submitButton = screen.getByRole('button', { name: 'ثبت' });
+            await userEvent.click(submitButton);
+
+            await waitFor(() => {
+                expect(currentPasswordInput).toHaveValue('');
+                expect(newPasswordInput).toHaveValue('');
+                expect(confirmPasswordInput).toHaveValue('');
+            });
+        });
+        it('Should request to api and not resetform in error response', async () => {
+            // Render the component
+            render(<MockAppWithProviders><ChangePasswordForm /></MockAppWithProviders>);
+            server.use([rest.get(SET_USER_PASSWORD, (req, res, ctx) => {
+                return res(ctx.status(422))
+            })])
+
+            // Fill in the form fields wrong
+            const currentPasswordInput = screen.queryByLabelText('رمز عبور فعلی');
+            const newPasswordInput = screen.queryByLabelText('رمز عبور جدید');
+            const confirmPasswordInput = screen.queryByLabelText('تکرار رمز عبور جدید');
+
+            fireEvent.change(currentPasswordInput, { target: { value: 'incorrect' } });
+            fireEvent.change(newPasswordInput, { target: { value: 'Witel@fani1' } });
+            fireEvent.change(confirmPasswordInput, { target: { value: 'Witel@fani1' } });
+
+            // Submit the form
+            const submitButton = screen.getByRole('button', { name: 'ثبت' });
+            await userEvent.click(submitButton);
+
+            await waitFor(() => {
+                expect(currentPasswordInput.value).toBe('incorrect');
+                expect(newPasswordInput.value).toBe('Witel@fani1');
+                expect(confirmPasswordInput.value).toBe('Witel@fani1');
+            });
+        });
+    });
+})

src/components/dashboard/change-password/change-password-form/index.js

@@ -0,0 +1,137 @@
+import {Formik, Form} from "formik";
+import * as Yup from "yup";
+import {useTranslations} from "next-intl";
+import {Button, Paper, Stack, Typography} from "@mui/material";
+import PasswordField from "@/core/components/PasswordField";
+import StyledForm from "@/core/components/StyledForm";
+import useRequest from "@/lib/app/hooks/useRequest";
+import {SET_USER_PASSWORD} from "@/core/data/apiRoutes";
+
+const ChangePasswordForm = ({onSubmit}) => {
+    const t = useTranslations();
+    const requestServer = useRequest({auth: true})
+
+    const handleSubmit = (values, {setSubmitting, resetForm}) => {
+        requestServer(SET_USER_PASSWORD, 'post', {
+            data: {
+                current_password: values.current_password,
+                new_password: values.new_password,
+                new_password_confirmation: values.new_password_confirmation,
+            },
+        }).then((response) => {
+            resetForm();
+        }).catch(() => {
+        }).finally(() => {
+            setSubmitting(false);
+        });
+    };
+    const initialValues = {
+        current_password: "",
+        new_password: "",
+        new_password_confirmation: "",
+    };
+    const validationSchema = Yup.object().shape({
+        current_password: Yup.string().required(
+            t("ChangePassword.error_message_current_password_required")
+        ),
+        new_password: Yup.string()
+            .min(8, t("ChangePassword.error_message_password_length"))
+            .required(t("ChangePassword.error_message_new_password_required")),
+        new_password_confirmation: Yup.string()
+            .required(t("ChangePassword.error_message_confirm_password_required"))
+            .test(
+                t("ChangePassword.error_message_password_match"),
+                t("ChangePassword.error_message_password_not_match"), // Use the correct error message here
+                function (value) {
+                    return this.parent.new_password === value;
+                }
+            ),
+    });
+
+    return (
+        <Formik
+            initialValues={initialValues}
+            onSubmit={handleSubmit}
+            validationSchema={validationSchema}
+        >
+            {(props) => (
+                <StyledForm
+                    onSubmit={(e) => {
+                        e.preventDefault();
+                        props.handleSubmit();
+                    }}
+                >
+                    <Paper elevation={0}>
+                        <Stack spacing={3} sx={{p: 5}} component="div">
+                            <Typography margin={2} variant="h4" textAlign="center">
+                                {t("ChangePassword.typography_change_password")}
+                            </Typography>
+                            <Stack spacing={1} component="div">
+                                <PasswordField
+                                    name="current_password"
+                                    label={t("ChangePassword.label_current_password")}
+                                    error={
+                                        props.touched.current_password &&
+                                        props.errors.current_password
+                                            ? true
+                                            : false
+                                    }
+                                    helperText={
+                                        props.touched.current_password
+                                            ? props.errors.current_password
+                                            : null
+                                    }
+                                />
+                            </Stack>
+                            <Stack spacing={1} component="div">
+                                <PasswordField
+                                    name="new_password"
+                                    label={t("ChangePassword.label_new_password")}
+                                    error={
+                                        props.touched.new_password && props.errors.new_password
+                                            ? true
+                                            : false
+                                    }
+                                    helperText={
+                                        props.touched.new_password ? props.errors.new_password : null
+                                    }
+                                />
+                            </Stack>
+                            <Stack spacing={1} component="div">
+                                <PasswordField
+                                    name="new_password_confirmation"
+                                    label={t("ChangePassword.label_confirm_password")}
+                                    error={
+                                        props.touched.new_password_confirmation &&
+                                        props.errors.new_password_confirmation
+                                            ? true
+                                            : false
+                                    }
+                                    helperText={
+                                        props.touched.new_password_confirmation
+                                            ? props.errors.new_password_confirmation
+                                            : null
+                                    }
+                                />
+                            </Stack>
+                            <Button
+                                type="submit"
+                                fullWidth
+                                variant="contained"
+                                color="primary"
+                                size="large"
+                                disabled={props.isSubmitting || !(props.values.current_password && props.values.new_password && props.values.new_password_confirmation)}
+                            >
+                                {props.isSubmitting
+                                    ? t("SubmitButton.button_while_submit")
+                                    : t("SubmitButton.button_submit")}
+                            </Button>
+                        </Stack>
+                    </Paper>
+                </StyledForm>
+            )}
+        </Formik>
+    );
+};
+
+export default ChangePasswordForm;

src/components/dashboard/change-password/index.jsx

@@ -1,149 +1,18 @@
 import CenterLayout from "@/layouts/CenterLayout";
-import DashboardLayouts from "@/layouts/DashboardLayout";
-import {Button, Container, Paper, Stack, Typography,} from "@mui/material";
-import {Formik} from "formik";
-import * as Yup from "yup";
-import {useTranslations} from "next-intl";
-import PasswordField from "@/core/components/PasswordField";
-import StyledForm from "@/core/components/StyledForm";
-import {SET_USER_PASSWORD} from "@/core/data/apiRoutes";
-import SvgChangePassword from "@/core/components/svgs/SvgChangePassword";
-import useRequest from "@/lib/app/hooks/useRequest";
+import DashboardLayout from "@/layouts/DashboardLayout";
+import {Container} from "@mui/material";
+import ChangePasswordForm from "@/components/dashboard/change-password/change-password-form";
 
 const DashboardChangePasswordComponent = () => {
-    const t = useTranslations();
-    const requestServer = useRequest({auth: true})
-
-    const handleSubmit = (values, {setSubmitting, resetForm}) => {
-        requestServer(SET_USER_PASSWORD, 'post', {
-            data: {
-                current_password: values.current_password,
-                new_password: values.new_password,
-                new_password_confirmation: values.new_password_confirmation,
-            },
-        }).then((response) => {
-            resetForm();
-        }).catch(() => {
-        }).finally(() => {
-            setSubmitting(false);
-        });
-    };
-    const initialValues = {
-        current_password: "",
-        new_password: "",
-        new_password_confirmation: "",
-    };
-    const validationSchema = Yup.object().shape({
-        current_password: Yup.string().required(
-            t("ChangePassword.error_message_required")
-        ),
-        new_password: Yup.string()
-            .min(8, t("ChangePassword.error_message_password_length"))
-            .required(t("ChangePassword.error_message_required")),
-        new_password_confirmation: Yup.string()
-            .required(t("ChangePassword.error_message_required"))
-            .test(
-                t("ChangePassword.error_message_password_match"),
-                t("ChangePassword.error_message_password_not_match"),
-                function (value) {
-                    return this.parent.new_password === value;
-                }
-            ),
-    });
 
     return (
-        <DashboardLayouts>
+        <DashboardLayout>
             <CenterLayout>
                 <Container maxWidth="sm">
-                    <Formik
-                        initialValues={initialValues}
-                        onSubmit={handleSubmit}
-                        validationSchema={validationSchema}
-                    >
-                        {(props) => (
-                            <StyledForm
-                                onSubmit={(e) => {
-                                    e.preventDefault();
-                                    props.handleSubmit();
-                                }}
-                            >
-                                <Paper elevation={0}>
-                                    <Stack spacing={3} sx={{p: 5}} component="div">
-                                        <SvgChangePassword width={300} height={200}/>
-                                        <Typography margin={2} variant="h4" textAlign="center">
-                                            {t("ChangePassword.typography_change_password")}
-                                        </Typography>
-                                        <Stack spacing={1} component="div">
-                                            <PasswordField
-                                                name="current_password"
-                                                label={t("ChangePassword.label_current_password")}
-                                                error={
-                                                    props.touched.current_password &&
-                                                    props.errors.current_password
-                                                        ? true
-                                                        : false
-                                                }
-                                                helperText={
-                                                    props.touched.current_password
-                                                        ? props.errors.current_password
-                                                        : null
-                                                }
-                                            />
-                                        </Stack>
-                                        <Stack spacing={1} component="div">
-                                            <PasswordField
-                                                name="new_password"
-                                                label={t("ChangePassword.label_new_password")}
-                                                error={
-                                                    props.touched.new_password &&
-                                                    props.errors.new_password
-                                                        ? true
-                                                        : false
-                                                }
-                                                helperText={
-                                                    props.touched.new_password
-                                                        ? props.errors.new_password
-                                                        : null
-                                                }
-                                            />
-                                        </Stack>
-                                        <Stack spacing={1} component="div">
-                                            <PasswordField
-                                                name="new_password_confirmation"
-                                                label={t("ChangePassword.label_confirm_password")}
-                                                error={
-                                                    props.touched.new_password_confirmation &&
-                                                    props.errors.new_password_confirmation
-                                                        ? true
-                                                        : false
-                                                }
-                                                helperText={
-                                                    props.touched.new_password_confirmation
-                                                        ? props.errors.new_password_confirmation
-                                                        : null
-                                                }
-                                            />
-                                        </Stack>
-                                        <Button
-                                            type="submit"
-                                            fullWidth
-                                            variant="contained"
-                                            color="primary"
-                                            size="large"
-                                            disabled={props.isSubmitting}
-                                        >
-                                            {props.isSubmitting
-                                                ? t("SubmitButton.button_while_submit")
-                                                : t("SubmitButton.button_submit")}
-                                        </Button>
-                                    </Stack>
-                                </Paper>
-                            </StyledForm>
-                        )}
-                    </Formik>
+                    <ChangePasswordForm />
                 </Container>
             </CenterLayout>
-        </DashboardLayouts>
+        </DashboardLayout>
     );
 };
 export default DashboardChangePasswordComponent;

src/components/dashboard/edit-profile/index.jsx

@@ -1,6 +1,6 @@
 import StyledForm from "@/core/components/StyledForm";
 import CenterLayout from "@/layouts/CenterLayout";
-import DashboardLayouts from "@/layouts/DashboardLayout";
+import DashboardLayout from "@/layouts/DashboardLayout";
 import useUser from "@/lib/app/hooks/useUser";
 import {Box, Container, Grid, Paper, Stack, TextField, Typography,} from "@mui/material";
 import * as Yup from "yup";
@@ -54,7 +54,7 @@ const DashboardEditProfile = () => {
     const validationSchema = Yup.object().shape({});
 
     return (
-        <DashboardLayouts>
+        <DashboardLayout>
             <CenterLayout>
                 <Container maxWidth="sm">
                     <Formik
@@ -216,7 +216,7 @@ const DashboardEditProfile = () => {
                     </Formik>
                 </Container>
             </CenterLayout>
-        </DashboardLayouts>
+        </DashboardLayout>
     );
 };
 

src/components/dashboard/first/index.jsx

@@ -1,7 +1,7 @@
-import DashboardLayouts from "@/layouts/DashboardLayout";
+import DashboardLayout from "@/layouts/DashboardLayout";
 
 const DashboardFirstComponent = () => {
-    return <DashboardLayouts></DashboardLayouts>;
+    return <DashboardLayout></DashboardLayout>;
 };
 
 export default DashboardFirstComponent;

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

@@ -0,0 +1,148 @@
+import {
+    Button,
+    Checkbox, CircularProgress,
+    DialogActions,
+    DialogContent, DialogTitle,
+    FormControl,
+    FormControlLabel,
+    FormHelperText,
+    FormLabel,
+    Grid,
+    Stack,
+    TextField, Typography
+} from "@mui/material";
+import {useTranslations} from "next-intl";
+import useRequest from "@/lib/app/hooks/useRequest";
+import * as Yup from "yup";
+import {useFormik} from "formik";
+import {ADD_ROLE_MANAGEMENT} from "@/core/data/apiRoutes";
+import usePermissions from "@/lib/app/hooks/usePermissions";
+
+const CreateContent = ({mutate, fetchUrl, setOpenConfirmDialog}) => {
+    const t = useTranslations();
+    const requestServer = useRequest({auth: true})
+    const {permissions_list, isLoading} = usePermissions()
+    const validationSchema = Yup.object().shape({
+        name_en: Yup.string().required(t("AddDialog.name_en_error")),
+        name_fa: Yup.string().required(t("AddDialog.name_fa_error")),
+        permissions: Yup.array().min(1, t("AddDialog.permission_min_error")).required(t("AddDialog.permission")),
+    });
+    const formik = useFormik({
+        initialValues: {
+            name_en: "",
+            name_fa: "",
+            permissions: [],
+        }, validationSchema, onSubmit: (values, {setSubmitting}) => {
+            const formData = new FormData();
+            formData.append("name", values.name_en);
+            formData.append("name_fa", values.name_fa);
+            for (let i = 0; i < values.permissions.length; i++) {
+                formData.append(`permissions[${i}]`, values.permissions[i]);
+            }
+
+            requestServer(ADD_ROLE_MANAGEMENT, 'post', {
+                data: formData,
+            }).then(() => {
+                setOpenConfirmDialog(false)
+                mutate(fetchUrl)
+                update_notification()
+            }).catch(() => {
+            }).finally(() => {
+                setSubmitting(false);
+            });
+        },
+    });
+
+    return (
+        <>
+            <DialogTitle>{t("AddDialog.add")}</DialogTitle>
+            <DialogContent>
+                <Stack sx={{mt: 2}} spacing={2}>
+                    <Stack direction="row" spacing={2}>
+                        <TextField
+                            name="name_en"
+                            label={t("AddDialog.name_en")}
+                            type="text"
+                            value={formik.values.name}
+                            onChange={formik.handleChange}
+                            fullWidth
+                            variant="outlined"
+                            onBlur={formik.handleBlur("name_en")}
+                            error={formik.touched.name_en && Boolean(formik.errors.name_en)}
+                            helperText={formik.touched.name_en && formik.errors.name_en}
+
+                        />
+                        <TextField
+                            name="name_fa"
+                            label={t("AddDialog.name_fa")}
+                            value={formik.values.name_fa}
+                            onChange={formik.handleChange}
+                            fullWidth
+                            variant="outlined"
+                            onBlur={formik.handleBlur("name_fa")}
+                            error={formik.touched.name_fa && Boolean(formik.errors.name_fa)}
+                            helperText={formik.touched.name_fa && formik.errors.name_fa}
+
+                        />
+                    </Stack>
+                    <Stack>
+                        <FormLabel>{t("AddDialog.permission")}<br/>
+                            <FormControl
+                                name="permissions"
+                                error={formik.touched.permissions && Boolean(formik.errors.permissions)}
+                                onBlur={formik.handleBlur("permissions")}
+                                sx={{mt: 2}}
+                                fullWidth
+                            >
+                                <FormHelperText>{formik.touched.permissions && formik.errors.permissions}</FormHelperText>
+                                    {isLoading ?
+                                        <Stack direction={'row'} alignItems={'center'} spacing={2} justifyContent={'center'}>
+                                            <CircularProgress size={20}/>
+                                            <Typography variant={'caption'}>{t("AddDialog.loading_permissions_list")}</Typography>
+                                        </Stack>
+                                        :(
+                                            <Grid container spacing={2}>
+                                                <>
+                                                    {permissions_list.map((permission) => (
+                                                        <Grid key={permission.id} item xs={6}>
+                                                            <FormControlLabel
+                                                                control={
+                                                                    <Checkbox
+                                                                        data-testid="PermissionList-checkbox"
+                                                                        checked={formik.values.permissions.includes(permission.id)}
+                                                                        onChange={(e) => {
+                                                                            if (e.target.checked) {
+                                                                                formik.setFieldValue("permissions", [...formik.values.permissions, permission.id])
+                                                                            } else {
+                                                                                formik.setFieldValue("permissions", formik.values.permissions.filter((id) => id !== permission.id))
+                                                                            }
+                                                                        }}
+                                                                    />
+                                                                }
+                                                                label={permission.name_fa}
+                                                            />
+                                                        </Grid>
+                                                    ))}
+                                                </>
+                                            </Grid>
+                                        )
+                                    }
+                            </FormControl>
+                        </FormLabel>
+                    </Stack>
+                </Stack>
+            </DialogContent>
+            <DialogActions>
+                <Button onClick={() => setOpenConfirmDialog(false)} variant="outlined" color="secondary"
+                        disabled={formik.isSubmitting} autoFocus>
+                    {t("AddDialog.button-cancel")}
+                </Button>
+                <Button onClick={formik.handleSubmit} variant="contained" color="primary"
+                        disabled={formik.isSubmitting}>
+                    {t("AddDialog.button-add")}
+                </Button>
+            </DialogActions>
+        </>
+    )
+}
+export default CreateContent

src/components/dashboard/role-management/Form/CreateForm/__test__/CreateContent.test.js

@@ -0,0 +1,167 @@
+import {act, fireEvent, render, screen, waitFor} from "@testing-library/react";
+import MockAppWithProviders from "../../../../../../../mocks/AppWithProvider";
+import CreateContent from "@/components/dashboard/role-management/Form/CreateForm/CreateContent";
+
+describe("Create Content component from Create Form Component in Role Management Component",()=>{
+    describe("Rendering", ()=>{
+        it('should see AddDialog text in the top ', async () => {
+            render(
+                <MockAppWithProviders>
+                    <CreateContent/>
+                </MockAppWithProviders>
+            )
+            const textElement = screen.queryByText("افزودن")
+            await waitFor(()=>{
+                expect(textElement).toBeInTheDocument()
+            })
+        });
+        it('should see name_en text', async () => {
+            render(
+                <MockAppWithProviders>
+                    <CreateContent/>
+                </MockAppWithProviders>
+            )
+            const textElement = screen.queryByLabelText("نام انگلیسی")
+            await waitFor(()=>{
+                expect(textElement).toBeInTheDocument()
+            })
+        });
+        it('should see name_fa text', async () => {
+            render(
+                <MockAppWithProviders>
+                    <CreateContent/>
+                </MockAppWithProviders>
+            )
+            const textElement = screen.queryByLabelText("نام فارسی")
+            await waitFor(()=>{
+                expect(textElement).toBeInTheDocument()
+            })
+        });
+        it('should see name_fa text', async () => {
+            render(
+                <MockAppWithProviders>
+                    <CreateContent/>
+                </MockAppWithProviders>
+            )
+            const textElement = screen.queryByLabelText("نام فارسی")
+            await waitFor(()=>{
+                expect(textElement).toBeInTheDocument()
+            })
+        });
+    })
+    describe("Behavior",()=>{
+        it('should see what fill in the name_en input', async () => {
+            render(
+                <MockAppWithProviders>
+                    <CreateContent/>
+                </MockAppWithProviders>
+            )
+            const nameEnglishInput = screen.getByLabelText('نام انگلیسی');
+
+            fireEvent.change(nameEnglishInput, {target: {value: 'testuser'}});
+            await act(()=>{
+                // Simulate user input
+                expect(nameEnglishInput).toHaveValue('testuser');
+            })
+        });
+        it('should see what fill in the name_fa input', async () => {
+            render(
+                <MockAppWithProviders>
+                    <CreateContent/>
+                </MockAppWithProviders>
+            )
+            const nameFarsiInput = screen.getByLabelText('نام فارسی');
+
+            fireEvent.change(nameFarsiInput, {target: {value: 'testuser'}});
+            await act(()=>{
+                // Simulate user input
+                expect(nameFarsiInput).toHaveValue('testuser');
+            })
+        });
+        it('should return permissions_list', async () => {
+            render(
+                <MockAppWithProviders>
+                    <CreateContent/>
+                </MockAppWithProviders>
+            )
+            const checkboxElement = await screen.findAllByTestId("PermissionList-checkbox")
+            expect(checkboxElement).toHaveLength(2)
+        });
+        it('should get checked if permission list item get clicked', async () => {
+            render(
+                <MockAppWithProviders>
+                    <CreateContent/>
+                </MockAppWithProviders>
+            )
+            const checkboxElement = screen.getByLabelText("مدیریت کارتابل رییس اداره مسافری استان")
+
+            await waitFor(()=>{
+                expect(checkboxElement).not.toBeChecked();
+            })
+
+            fireEvent.click(checkboxElement);
+
+            await waitFor(()=>{
+                expect(checkboxElement).toBeChecked();
+            })
+        });
+    })
+    describe("Validation",()=>{
+        it('should see error text when name_fa input is empty', async () => {
+            render(
+                <MockAppWithProviders>
+                    <CreateContent/>
+                </MockAppWithProviders>
+            )
+            const name_faInput = screen.getByLabelText("نام فارسی")
+            expect(screen.queryByText("وارد کردن نام فارسی الزامیست")).not.toBeInTheDocument()
+            fireEvent.blur(name_faInput);
+
+            await waitFor(()=>{
+                expect(screen.queryByText("وارد کردن نام فارسی الزامیست")).toBeInTheDocument()
+            })
+            fireEvent.change(name_faInput, {target : {value : "نام فارسی"}})
+
+            await waitFor(()=>{
+                expect(screen.queryByText("وارد کردن نام فارسی الزامیست")).not.toBeInTheDocument()
+            })
+        })
+        it('should see error text when name_en input is empty', async () => {
+            render(
+                <MockAppWithProviders>
+                    <CreateContent/>
+                </MockAppWithProviders>
+            )
+            const name_enInput = screen.getByLabelText("نام انگلیسی")
+            expect(screen.queryByText("وارد کردن نام انگلیسی الزامیست")).not.toBeInTheDocument()
+            fireEvent.blur(name_enInput);
+
+            await waitFor(()=>{
+                expect(screen.queryByText("وارد کردن نام انگلیسی الزامیست")).toBeInTheDocument()
+            })
+            fireEvent.change(name_enInput, {target : {value : "english name"}})
+
+            await waitFor(()=>{
+                expect(screen.queryByText("وارد کردن نام انگلیسی الزامیست")).not.toBeInTheDocument()
+            })
+        })
+        it('should see errors when click on submit button and field not completed', async () => {
+            render(
+                <MockAppWithProviders>
+                    <CreateContent/>
+                </MockAppWithProviders>
+            )
+            const submitButtonElement = screen.queryByText("ثبت")
+            fireEvent.click(submitButtonElement)
+            await waitFor(()=>{
+                expect(screen.queryByText("وارد کردن نام انگلیسی الزامیست")).toBeInTheDocument()
+            })
+            await waitFor(()=>{
+                expect(screen.queryByText("وارد کردن نام فارسی الزامیست")).toBeInTheDocument()
+            })
+            await waitFor(()=>{
+                expect(screen.queryByText("حداقل باید یک دسترسی انتخاب شود")).toBeInTheDocument()
+            })
+        });
+    })
+})

src/components/dashboard/role-management/Form/CreateForm/__test__/index.test.js

@@ -0,0 +1,34 @@
+import {fireEvent, queryByText, render, screen, waitFor} from "@testing-library/react";
+import CreateForm from "@/components/dashboard/role-management/Form/CreateForm";
+import MockAppWithProviders from "../../../../../../../mocks/AppWithProvider";
+
+describe("Create Form Component from Role Management Component",()=>{
+    describe("Rendering",()=>{
+
+        it('should see Dialog text',  async () => {
+            render(
+                <MockAppWithProviders>
+                    <CreateForm />
+                </MockAppWithProviders>
+            )
+            const textElement = screen.queryByText("افزودن")
+            await waitFor(()=>{
+                expect(textElement).toBeInTheDocument()
+            })
+        });
+
+        it('should see Tooltip text when mouse over',  async () => {
+            render(
+                <MockAppWithProviders>
+                    <CreateForm />
+                </MockAppWithProviders>
+            )
+            const buttonElement = screen.getByText("افزودن");
+            fireEvent.mouseOver(buttonElement);
+            const tooltipTextElement = screen.getByText("افزودن");
+            await waitFor(()=>{
+                expect(tooltipTextElement).toBeInTheDocument()
+            })
+        });
+    })
+})

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

@@ -0,0 +1,34 @@
+import {Button, Dialog, DialogTitle, Stack, Tooltip} from "@mui/material";
+import DataSaverOnIcon from "@mui/icons-material/DataSaverOn";
+import {useTranslations} from "next-intl";
+import {useState} from "react";
+import CreateContent from "./CreateContent";
+
+const CreateForm = ({mutate, fetchUrl}) => {
+    const t = useTranslations();
+    const [openConfirmDialog, setOpenConfirmDialog] = useState(false);
+
+    return (
+        <Stack direction={"row"} spacing={2}>
+            <Tooltip title={t("AddDialog.add")} arrow placement="right">
+                <Button
+                    color="primary"
+                    variant="contained"
+                    size="small"
+                    sx={{textTransform: "unset", alignSelf: "center"}}
+                    startIcon={<DataSaverOnIcon/>}
+                    onClick={() => {
+                        setOpenConfirmDialog(true)
+                    }}
+                >
+                    {t("AddDialog.add")}
+                </Button>
+            </Tooltip>
+            <Dialog maxWidth={"lg"} 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'}}}>
+                <CreateContent mutate={mutate} fetchUrl={fetchUrl} setOpenConfirmDialog={setOpenConfirmDialog}/>
+            </Dialog>
+        </Stack>
+    )
+}
+export default CreateForm

src/components/dashboard/role-management/Form/DeleteForm/DeleteContent.jsx

@@ -0,0 +1,42 @@
+import {Button, DialogActions, DialogContent, DialogTitle, Typography} from "@mui/material";
+import {DELETE_ROLE_MANAGEMENT} from "@/core/data/apiRoutes";
+import {useState} from "react";
+import useRequest from "@/lib/app/hooks/useRequest";
+import useNotification from "@/lib/app/hooks/useNotification";
+import {useTranslations} from "next-intl";
+
+const DeleteContent = ({rowId, fetchUrl, mutate, setOpenConfirmDialog}) => {
+    const t = useTranslations();
+    const [isSubmitting, setIsSubmitting] = useState(false)
+    const requestServer = useRequest({auth: true})
+    const {update_notification} = useNotification()
+    const handleSubmit = () => {
+        setIsSubmitting(true)
+        requestServer(`${DELETE_ROLE_MANAGEMENT}/${rowId}`, 'delete').then((response) => {
+            mutate(fetchUrl)
+            update_notification()
+        }).catch(() => {
+        }).finally(() => {
+            setIsSubmitting(false)
+        });
+    }
+    return(
+        <>
+            <DialogTitle>{t("DeleteDialog.delete")}</DialogTitle>
+            <DialogContent>
+                <Typography>{t("DeleteDialog.typography")}</Typography>
+            </DialogContent>
+            <DialogActions>
+                <Button onClick={() => setOpenConfirmDialog(false)} variant="outlined" color="secondary"
+                        disabled={isSubmitting} autoFocus>
+                    {t("DeleteDialog.button-cancel")}
+                </Button>
+                <Button onClick={handleSubmit} variant="contained" color="primary"
+                        disabled={isSubmitting}>
+                    {t("DeleteDialog.button-delete")}
+                </Button>
+            </DialogActions>
+        </>
+    )
+}
+export  default DeleteContent

src/components/dashboard/role-management/Form/DeleteForm/__test__/DeleteContent.test.js

@@ -0,0 +1,53 @@
+import {act, render, screen} from "@testing-library/react";
+import MockAppWithProviders from "../../../../../../../mocks/AppWithProvider";
+import DeleteContent from "@/components/dashboard/role-management/Form/DeleteForm/DeleteContent";
+import UpdateContent from "@/components/dashboard/role-management/Form/UpdateForm/UpdateContent";
+
+describe("Create Content component from Create Form Component in Role Management Component",()=> {
+    describe("Rendering", () => {
+        it('should see DeleteDialog text in the top ', async () => {
+            render(
+                <MockAppWithProviders>
+                    <DeleteContent rowId={1}/>
+                </MockAppWithProviders>
+            )
+            const textElement = screen.queryByText("حذف")
+            act(()=>{
+                expect(textElement).toBeInTheDocument()
+            })
+        })
+        it('should see DeleteDialog text content ', async () => {
+            render(
+                <MockAppWithProviders>
+                    <DeleteContent rowId={1}/>
+                </MockAppWithProviders>
+            )
+            const textElement = screen.queryByText("آیا از حدف این مورد اطمینان دارید ؟")
+            act(()=>{
+                expect(textElement).toBeInTheDocument()
+            })
+        })
+        it('should see delete text in the delete button ', () => {
+            render(
+                <MockAppWithProviders>
+                    <DeleteContent rowId={1}/>
+                </MockAppWithProviders>
+            )
+            const buttonElement = screen.queryByText("حذف کردن")
+            act(()=>{
+                expect(buttonElement).toBeInTheDocument()
+            })
+        });
+        it('should see cancel text in the cancel button ', () => {
+            render(
+                <MockAppWithProviders>
+                    <DeleteContent rowId={1}/>
+                </MockAppWithProviders>
+            )
+            const buttonElement = screen.queryByText("انصراف")
+            act(()=>{
+                expect(buttonElement).toBeInTheDocument()
+            })
+        });
+    })
+})

src/components/dashboard/role-management/Form/DeleteForm/__test__/index.test.js

@@ -0,0 +1,21 @@
+import {fireEvent, render, screen, waitFor} from "@testing-library/react";
+import MockAppWithProviders from "../../../../../../../mocks/AppWithProvider";
+import DeleteForm from "@/components/dashboard/role-management/Form/DeleteForm";
+import UpdateForm from "@/components/dashboard/role-management/Form/UpdateForm";
+
+describe("Create Form Component from Role Management Component",()=> {
+    describe("Rendering", () => {
+        it('should see Dialog text when mouse is over', async () => {
+            render(
+                <MockAppWithProviders>
+                    <DeleteForm />
+                </MockAppWithProviders>
+            )
+            const textElement = screen.getByTestId("dialog_tooltip")
+            fireEvent.mouseOver(textElement)
+            await waitFor(()=>{
+                expect(screen.getByText("حذف")).toBeInTheDocument();
+            })
+        });
+    })
+})

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

@@ -0,0 +1,35 @@
+import {useTranslations} from "next-intl";
+import {useState} from "react";
+import {
+    Dialog, IconButton,
+    Tooltip,
+} from "@mui/material";
+import DeleteIcon from '@mui/icons-material/Delete';
+import DeleteContent from "@/components/dashboard/role-management/Form/DeleteForm/DeleteContent";
+
+const DeleteForm = ({rowId, fetchUrl, mutate}) => {
+    const t = useTranslations();
+    const [openConfirmDialog, setOpenConfirmDialog] = useState(false);
+
+
+    return (
+        <>
+            <Tooltip title={t("DeleteDialog.delete")}>
+                <IconButton
+                    data-testid="dialog_tooltip"
+                    color="primary"
+                    onClick={() => {
+                        setOpenConfirmDialog(true)
+                    }}
+                >
+                    <DeleteIcon/>
+                </IconButton>
+            </Tooltip>
+            <Dialog maxWidth="sm" 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'}}}>
+                <DeleteContent rowId={rowId} fetchUrl={fetchUrl} mutate={mutate} setOpenConfirmDialog={setOpenConfirmDialog} />
+            </Dialog>
+        </>
+    );
+};
+export default DeleteForm;

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

@@ -0,0 +1,147 @@
+import {
+    Box,
+    Button,
+    Checkbox, CircularProgress, DialogActions,
+    DialogContent, DialogTitle,
+    FormControl,
+    FormControlLabel,
+    FormHelperText,
+    FormLabel,
+    Grid,
+    Stack,
+    TextField, Typography
+} from "@mui/material";
+import {useFormik} from "formik";
+import {UPDATE_ROLE_MANAGEMENT} from "@/core/data/apiRoutes";
+import * as Yup from "yup";
+import usePermissions from "@/lib/app/hooks/usePermissions";
+import useNotification from "@/lib/app/hooks/useNotification";
+import useRequest from "@/lib/app/hooks/useRequest";
+import {useTranslations} from "next-intl";
+
+const UpdateContent = ({mutate, row, fetchUrl, setOpenConfirmDialog}) => {
+    const t = useTranslations();
+    const requestServer = useRequest({auth: true})
+    const {update_notification} = useNotification()
+    const {permissions_list, isLoading} = usePermissions()
+
+    const validationSchema = Yup.object().shape({
+        name_en: Yup.string().required(t("UpdateDialog.name_en_error")),
+        name_fa: Yup.string().required(t("UpdateDialog.name_fa_error")),
+        permissions: Yup.array().min(1, t("UpdateDialog.permission_min_error")).required(t("UpdateDialog.permission")),
+    });
+
+    const formik = useFormik({
+        initialValues: {
+            name_en: row.getValue("name"),
+            name_fa: row.getValue("name_fa"),
+            permissions: row.original.permissions.map((obj) => obj.id),
+        }, validationSchema, onSubmit: (values, {setSubmitting}) => {
+            const formData = new FormData();
+            formData.append("name", values.name_en);
+            formData.append("name_fa", values.name_fa);
+            for (let i = 0; i < values.permissions.length; i++) {
+                formData.append(`permissions[${i}]`, values.permissions[i]);
+            }
+
+            requestServer(`${UPDATE_ROLE_MANAGEMENT}/${row.getValue("id")}`, 'post', {
+                data: formData,
+            }).then((response) => {
+                mutate(fetchUrl)
+                update_notification()
+            }).catch(() => {
+            }).finally(() => {
+                setSubmitting(false);
+            });
+        },
+    });
+
+    return(
+        <>
+            <DialogTitle>{t("UpdateDialog.update")}</DialogTitle>
+            <DialogContent>
+                <Stack sx={{mt: 2}} spacing={2}>
+                    <Stack direction="row" spacing={2} sx={{mt: 1}}>
+                        <TextField
+                            name="name_en"
+                            label={t("UpdateDialog.name_en")}
+                            value={formik.values.name_en}
+                            onChange={formik.handleChange}
+                            fullWidth
+                            variant="outlined"
+                            onBlur={formik.handleBlur("name_en")}
+                            error={formik.touched.name_en && Boolean(formik.errors.name_en)}
+                            helperText={formik.touched.name_en && formik.errors.name_en}
+                        />
+                        <TextField
+                            name="name_fa"
+                            label={t("UpdateDialog.name_fa")}
+                            value={formik.values.name_fa}
+                            onChange={formik.handleChange}
+                            fullWidth
+                            variant="outlined"
+                            onBlur={formik.handleBlur("name_fa")}
+                            error={formik.touched.name_fa && Boolean(formik.errors.name_fa)}
+                            helperText={formik.touched.name_fa && formik.errors.name_fa}
+                        />
+                    </Stack>
+                    <Stack>
+                        <FormLabel>{t("UpdateDialog.permission")}<br/>
+                            <FormControl
+                                name="permissions"
+                                error={formik.touched.permissions && Boolean(formik.errors.permissions)}
+                                onBlur={formik.handleBlur("permissions")}
+                                sx={{mt: 2}}
+                                fullWidth
+                            >
+                                <FormHelperText>{formik.touched.permissions && formik.errors.permissions}</FormHelperText>
+                                {isLoading ?
+                                    <Stack direction={'row'} alignItems={'center'} spacing={2} justifyContent={'center'}>
+                                        <CircularProgress size={20}/>
+                                        <Typography variant={'caption'}>{t("UpdateDialog.loading_permissions_list")}</Typography>
+                                    </Stack>
+                                    :(
+                                        <Grid container spacing={2}>
+                                            <>
+                                                {permissions_list.map((permission) => (
+                                                    <Grid key={permission.id} item xs={6}>
+                                                        <FormControlLabel
+                                                            control={
+                                                                <Checkbox
+                                                                    data-testid="PermissionList-checkbox"
+                                                                    checked={formik.values.permissions.includes(permission.id)}
+                                                                    onChange={(e) => {
+                                                                        if (e.target.checked) {
+                                                                            formik.setFieldValue("permissions", [...formik.values.permissions, permission.id])
+                                                                        } else {
+                                                                            formik.setFieldValue("permissions", formik.values.permissions.filter((id) => id !== permission.id))
+                                                                        }
+                                                                    }}
+                                                                />
+                                                            }
+                                                            label={permission.name_fa}
+                                                        />
+                                                    </Grid>
+                                                ))}
+                                            </>
+                                        </Grid>
+                                    )}
+                            </FormControl>
+                        </FormLabel>
+                    </Stack>
+                </Stack>
+            </DialogContent>
+            <DialogActions>
+                <Button onClick={() => setOpenConfirmDialog(false)} variant="outlined" color="secondary"
+                        disabled={formik.isSubmitting} autoFocus>
+                    {t("UpdateDialog.button-cancel")}
+                </Button>
+                <Button onClick={formik.handleSubmit} variant="contained" color="primary"
+                        disabled={formik.isSubmitting}>
+                    {t("UpdateDialog.button-update")}
+                </Button>
+            </DialogActions>
+        </>
+    )
+}
+export default UpdateContent

src/components/dashboard/role-management/Form/UpdateForm/__test__/UpdateContent.test.js

@@ -0,0 +1,209 @@
+import {act, fireEvent, render, screen, waitFor} from "@testing-library/react";
+import MockAppWithProviders from "../../../../../../../mocks/AppWithProvider";
+import UpdateContent from "@/components/dashboard/role-management/Form/UpdateForm/UpdateContent";
+const row = {
+    id : 0,
+    getValue : name => {
+        if (name === "name") {
+            return "manage_passenger_office_navgan";
+        }
+        else if (name === "name_fa") {
+            return "مدیریت کارتابل رییس اداره مسافری استان";
+        }
+    },
+    original : {
+        permissions : [
+            {
+                id: 1,
+                name: "manage_passenger_office_navgan",
+                name_fa: "مدیریت کارتابل رییس اداره مسافری استان"
+            },
+            {
+                id: 2,
+                name: "manage_passenger_office_navgan",
+                name_fa: "مدیریت کارتابل رییس اداره مسافری استان"
+            }
+        ]
+    }
+}
+
+describe("Create Content component from Create Form Component in Role Management Component",()=>{
+    describe("Rendering", ()=>{
+        it('should see AddDialog text in the top ', async () => {
+            render(
+                <MockAppWithProviders>
+                    <UpdateContent row={row}/>
+                </MockAppWithProviders>
+            )
+            const textElement = screen.queryByText("ویرایش")
+            await waitFor(()=>{
+            expect(textElement).toBeInTheDocument()
+            })
+        });
+        it('should see name_en text', async () => {
+            render(
+                <MockAppWithProviders>
+                    <UpdateContent row={row}/>
+                </MockAppWithProviders>
+            )
+            const textElement = screen.queryByLabelText("نام انگلیسی")
+            await waitFor(()=>{
+            expect(textElement).toBeInTheDocument()
+            })
+        });
+        it('should see name_fa text', async () => {
+            render(
+                <MockAppWithProviders>
+                    <UpdateContent row={row}/>
+                </MockAppWithProviders>
+            )
+            const textElement = screen.queryByLabelText("نام فارسی")
+            await waitFor(()=>{
+            expect(textElement).toBeInTheDocument()
+            })
+        });
+        it('should see update text in the submit button ', async () => {
+            render(
+                <MockAppWithProviders>
+                    <UpdateContent row={row}/>
+                </MockAppWithProviders>
+            )
+            const buttonElement = screen.queryByText("ثبت")
+            await waitFor(()=>{
+                expect(buttonElement).toBeInTheDocument()
+            })
+        });
+        it('should see cancel text in the cancel button ', async () => {
+            render(
+                <MockAppWithProviders>
+                    <UpdateContent row={row}/>
+                </MockAppWithProviders>
+            )
+            const buttonElement = screen.queryByText("بستن")
+            await waitFor(()=>{
+                expect(buttonElement).toBeInTheDocument()
+            })
+        });
+    })
+
+    describe("Behavior", ()=>{
+        it('should see what fill in the name_en input', async () => {
+            render(
+                <MockAppWithProviders>
+                    <UpdateContent row={row}/>
+                </MockAppWithProviders>
+            )
+            const nameEnglishInput = screen.getByLabelText('نام انگلیسی');
+
+            fireEvent.change(nameEnglishInput, {target: {value: 'testuser'}});
+            await waitFor(()=>{
+                // Simulate user input
+                expect(nameEnglishInput).toHaveValue('testuser');
+            })
+        });
+        it('should see what fill in the name_fa input', async () => {
+            render(
+                <MockAppWithProviders>
+                    <UpdateContent row={row}/>
+                </MockAppWithProviders>
+            )
+            const nameFarsiInput = screen.getByLabelText('نام فارسی');
+
+            fireEvent.change(nameFarsiInput, {target: {value: 'testuser'}});
+            await waitFor(()=>{
+                // Simulate user input
+                expect(nameFarsiInput).toHaveValue('testuser');
+            })
+        });
+        it('should return permissions_list', async () => {
+            render(
+                <MockAppWithProviders>
+                    <UpdateContent row={row}/>
+                </MockAppWithProviders>
+            )
+            const checkboxElement = await screen.findAllByTestId("PermissionList-checkbox")
+            await waitFor(()=>{
+                expect(checkboxElement).toHaveLength(2)
+            })
+        });
+        it('should see the value of the name_en that pass to input value', async () => {
+            render(
+                <MockAppWithProviders>
+                    <UpdateContent row={row}/>
+                </MockAppWithProviders>
+            )
+            const name_enElement = screen.getByLabelText("نام انگلیسی")
+            await waitFor(()=>{
+                expect(name_enElement).toHaveValue("manage_passenger_office_navgan")
+            })
+        });
+        it('should see the value of the name_fa that pass to input value', async () => {
+            render(
+                <MockAppWithProviders>
+                    <UpdateContent row={row}/>
+                </MockAppWithProviders>
+            )
+            const name_enElement = screen.getByLabelText("نام فارسی")
+            await waitFor(()=>{
+                expect(name_enElement).toHaveValue("مدیریت کارتابل رییس اداره مسافری استان")
+            })
+        });
+        it('should get checked if the id exists in permission lists', async () => {
+            render(
+                <MockAppWithProviders>
+                    <UpdateContent row={row}/>
+                </MockAppWithProviders>
+            )
+            const checkboxElement = screen.getByLabelText("مدیریت کارتابل رییس اداره مسافری استان")
+            await waitFor(()=>{
+                expect(checkboxElement).toBeChecked();
+            })
+
+        });
+    })
+    describe("Validation", ()=>{
+        it('should see error text when name_fa input is empty', async () => {
+            render(
+                <MockAppWithProviders>
+                    <UpdateContent row={row}/>
+                </MockAppWithProviders>
+            )
+            const name_faInput = screen.getByLabelText("نام فارسی")
+            expect(screen.queryByText("وارد کردن نام فارسی الزامیست")).not.toBeInTheDocument()
+            fireEvent.change(name_faInput, {target : {value : ''}});
+
+            fireEvent.blur(name_faInput)
+
+            await waitFor(()=>{
+                expect(screen.queryByText("وارد کردن نام فارسی الزامیست")).toBeInTheDocument()
+            })
+            fireEvent.change(name_faInput, {target : {value : "نام فارسی"}})
+
+            await waitFor(()=>{
+                expect(screen.queryByText("وارد کردن نام فارسی الزامیست")).not.toBeInTheDocument()
+            })
+        })
+        it('should see error text when name_en input is empty', async () => {
+            render(
+                <MockAppWithProviders>
+                    <UpdateContent row={row}/>
+                </MockAppWithProviders>
+            )
+            const name_enInput = screen.getByLabelText("نام انگلیسی")
+            expect(screen.queryByText("وارد کردن نام انگلیسی الزامیست")).not.toBeInTheDocument()
+
+            fireEvent.change(name_enInput, {target : {value : null}});
+            fireEvent.blur(name_enInput)
+
+            await waitFor(()=>{
+
+                expect(screen.queryByText("وارد کردن نام انگلیسی الزامیست")).toBeInTheDocument()
+            })
+            fireEvent.change(name_enInput, {target : {value : "english name"}})
+
+            await waitFor(()=>{
+                expect(screen.queryByText("وارد کردن نام انگلیسی الزامیست")).not.toBeInTheDocument()
+            })
+        })
+    })
+})

src/components/dashboard/role-management/Form/UpdateForm/__test__/index.test.js

@@ -0,0 +1,22 @@
+import {fireEvent, render, screen, waitFor} from "@testing-library/react";
+import MockAppWithProviders from "../../../../../../../mocks/AppWithProvider";
+import UpdateContent from "@/components/dashboard/role-management/Form/UpdateForm/UpdateContent";
+import UpdateForm from "@/components/dashboard/role-management/Form/UpdateForm";
+import userEvent from "@testing-library/user-event";
+
+describe("Create Form Component from Role Management Component",()=>{
+    describe("Rendering",()=>{
+        it('should see Tooltip text when mouse over',  async () => {
+            render(
+                <MockAppWithProviders>
+                    <UpdateForm />
+                </MockAppWithProviders>
+            )
+            const buttonElement = screen.getByTestId("dialog_tooltip");
+            fireEvent.mouseOver(buttonElement);
+            await waitFor(()=>{
+                expect(screen.queryByText("ویرایش")).toBeVisible();
+            })
+        });
+    })
+})

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

@@ -0,0 +1,31 @@
+import {Dialog, IconButton, Stack, Tooltip} from "@mui/material";
+import {useTranslations} from "next-intl";
+import {useState} from "react";
+import UpdateContent from "@/components/dashboard/role-management/Form/UpdateForm/UpdateContent";
+import EditIcon from "@mui/icons-material/Edit";
+
+const UpdateForm = ({mutate, fetchUrl, row}) => {
+    const t = useTranslations();
+    const [openConfirmDialog, setOpenConfirmDialog] = useState(false);
+
+    return (
+        <Stack direction={"row"} spacing={2}>
+            <Tooltip  title={t("UpdateDialog.update")} arrow placement="right">
+                <IconButton
+                    data-testid="dialog_tooltip"
+                    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'}}}>
+                <UpdateContent mutate={mutate} row={row} fetchUrl={fetchUrl} setOpenConfirmDialog={setOpenConfirmDialog}/>
+            </Dialog>
+        </Stack>
+    )
+}
+export default UpdateForm

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

@@ -0,0 +1,94 @@
+import DataTable from "@/core/components/DataTable";
+import {GET_ROLE_MANAGEMENT} from "@/core/data/apiRoutes";
+import TableRowActions from "@/components/dashboard/role-management/TableRowActions";
+import {Box, Typography} from "@mui/material";
+import {useTranslations} from "next-intl";
+import {useMemo} from "react";
+import moment from "jalali-moment";
+import MuiDatePicker from "@/core/components/MuiDatePicker";
+import TableToolbar from "@/components/dashboard/role-management/TableToolbar";
+
+const RoleManagementComponent = () => {
+    const t = useTranslations();
+
+    const columns = useMemo(() => [{
+        accessorFn: (row) => row.id,
+        id: "id",
+        sortDescFirst: true,
+        header: t("RoleManagement.id"),
+        enableColumnFilter: true,
+        datatype: "numeric",
+        filterFn: "equals",
+        columnFilterModeOptions: ["equals", "notEquals", "contains", "lessThan", "greaterThan", "between",],
+        Cell: ({renderedCellValue}) => (<Typography variant="body2">{renderedCellValue}</Typography>),
+    },
+        {
+            accessorFn: (row) => row.name_fa,
+            id: "name_fa",
+            header: t("RoleManagement.name_fa"),
+            enableColumnFilter: true,
+            datatype: "text",
+            filterFn: "contains",
+            columnFilterModeOptions: ["contains", "equals", "notEquals"],
+            Cell: ({renderedCellValue}) => (<Typography variant="body2">{renderedCellValue}</Typography>),
+        },
+        {
+            accessorFn: (row) => row.name,
+            id: "name",
+            header: t("RoleManagement.name"),
+            enableColumnFilter: true,
+            datatype: "text",
+            filterFn: "contains",
+            columnFilterModeOptions: ["contains"],
+            Cell: ({renderedCellValue}) => (<Typography variant="body2">{renderedCellValue}</Typography>),
+        },
+        {
+            accessorFn: (row) => moment(row.created_at).locale("fa").format("HH:mm | yyyy/MM/DD"),
+            id: "created_at",
+            header: t("RoleManagement.created_at"),
+            enableColumnFilter: true,
+            datatype: "date",
+            filterFn: "lessThan",
+            columnFilterModeOptions: ["lessThan", "greaterThan"],
+            Cell: ({renderedCellValue}) => {
+                return <Typography variant="body2">{renderedCellValue}</Typography>;
+            },
+            Header: ({column}) => <>{column.columnDef.header}</>,
+            Filter: ({column}) => {
+                return (<MuiDatePicker column={column}/>);
+            },
+        }, {
+            accessorFn: (row) => moment(row.updated_at).locale("fa").format("HH:mm | yyyy/MM/DD"),
+            id: "updated_at",
+            header: t("RoleManagement.updated_at"),
+            enableColumnFilter: false,
+            datatype: "numeric",
+            Cell: ({renderedCellValue}) => (<Typography variant="body2">{renderedCellValue}</Typography>),
+        }], []);
+    return(
+        <Box sx={{px: 3}}>
+            <DataTable
+                tableUrl={GET_ROLE_MANAGEMENT}
+                columns={columns}
+                selectableRow={false}
+                enableCustomToolbar={true}
+                CustomToolbar={TableToolbar}
+                enableLastUpdate={true}
+                enablePinning={true}
+                enableDensityToggle={false}
+                sorting={[{
+                    id: 'id', desc: true
+                }]}
+                initialState={{density: 'compact'}} //compact (small) //comfortable (medium) //spacious (large)
+                enableColumnFilters={true}
+                enableHiding={true}
+                enableFullScreenToggle={false}
+                enableGlobalFilter={false}
+                enableColumnResizing={false} // if you want true this you should change renderRowActions props ** see https://www.material-react-table.com/docs/guides/row-actions
+                enableRowActions={true}
+                TableRowAction={TableRowActions}
+            />
+        </Box>
+    )
+}
+export default RoleManagementComponent

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

@@ -0,0 +1,24 @@
+import {Box} from "@mui/material";
+import UpdateForm from "@/components/dashboard/role-management/Form/UpdateForm";
+import DeleteForm from "@/components/dashboard/role-management/Form/DeleteForm";
+
+
+const TableRowActions = ({row, mutate, fetchUrl}) => {
+
+    return (
+        <Box sx={{display: "flex", flexWrap: "nowrap", gap: "8px"}}>
+            <UpdateForm
+                row={row}
+                mutate={mutate}
+                fetchUrl={fetchUrl}
+            />
+            <DeleteForm
+                rowId={row.getValue("id")}
+                fetchUrl={fetchUrl}
+                mutate={mutate}
+            />
+        </Box>
+    );
+};
+
+export default TableRowActions;

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

@@ -0,0 +1,11 @@
+import {useTranslations} from "next-intl";
+import CreateForm from "@/components/dashboard/role-management/Form/CreateForm";
+
+function TableToolbar({mutate, fetchUrl}) {
+    const t = useTranslations();
+
+    return <CreateForm mutate={mutate} fetchUrl={fetchUrl}/>
+
+}
+
+export default TableToolbar;

src/components/dashboard/role-management/__test__/RoleManagementComponent.test.js

@@ -0,0 +1,63 @@
+import {render, screen, waitFor} from "@testing-library/react";
+import MockAppWithProviders from "../../../../../mocks/AppWithProvider";
+import RoleManagementComponent from "@/components/dashboard/role-management/RoleManagementComponent";
+
+describe("Role Management", ()=>{
+    describe("Rendering", ()=>{
+        it('should see id title of data table', async () => {
+            render(
+                <MockAppWithProviders>
+                    <RoleManagementComponent />
+                </MockAppWithProviders>
+            )
+            const idEelement = screen.queryByText("کد یکتا")
+            await waitFor(()=>{
+                expect(idEelement).toBeInTheDocument()
+            })
+        });
+        it('should see name title of data table', async () => {
+            render(
+                <MockAppWithProviders>
+                    <RoleManagementComponent />
+                </MockAppWithProviders>
+            )
+            const nameEelement = screen.queryByText("نام انگلیسی")
+            await waitFor(()=>{
+                expect(nameEelement).toBeInTheDocument()
+            })
+        });
+        it('should see name_fa title of data table', async () => {
+            render(
+                <MockAppWithProviders>
+                    <RoleManagementComponent />
+                </MockAppWithProviders>
+            )
+            const name_faEelement = screen.queryByText("نام فارسی")
+            await waitFor(()=>{
+                expect(name_faEelement).toBeInTheDocument()
+            })
+        });
+        it('should see created at title of data table', async () => {
+            render(
+                <MockAppWithProviders>
+                    <RoleManagementComponent />
+                </MockAppWithProviders>
+            )
+            const createdEelement = screen.queryByText("تاریخ درخواست")
+            await waitFor(()=>{
+                expect(createdEelement).toBeInTheDocument()
+            })
+        });
+        it('should see updated at title of data table', async () => {
+            render(
+                <MockAppWithProviders>
+                    <RoleManagementComponent />
+                </MockAppWithProviders>
+            )
+            const updateEelement = screen.queryByText("تاریخ بروزرسانی")
+            await waitFor(()=>{
+                expect(updateEelement).toBeInTheDocument()
+            })
+        });
+    })
+})

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

@@ -0,0 +1,13 @@
+import RoleManagementComponent from "@/components/dashboard/role-management/RoleManagementComponent";
+import DashboardLayout from "@/layouts/DashboardLayout";
+
+function DashboardRoleManagementComponent() {
+
+    return (
+        <DashboardLayout>
+            <RoleManagementComponent />
+        </DashboardLayout>
+    );
+}
+
+export default DashboardRoleManagementComponent;

src/components/layouts/Dashboard/CallWidget/CallWidgetButton.jsx

@@ -1,13 +0,0 @@
-import PermPhoneMsgIcon from '@mui/icons-material/PermPhoneMsg';
-import StyledFab from "@/core/components/StyledFab";
-
-const CallWidgetButton = ({setOpen}) => {
-    return (
-        <StyledFab color="primary" aria-label="open-dialog"
-                   onClick={() => setOpen(true)}>
-            <PermPhoneMsgIcon/>
-        </StyledFab>
-    )
-}
-
-export default CallWidgetButton

src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallActions/index.jsx

@@ -0,0 +1,7 @@
+const CallActions = ({tab}) => {
+    return (
+        <>CallActions - {tab.id}</>
+    )
+}
+
+export default CallActions

src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallHistory/index.jsx

@@ -0,0 +1,7 @@
+const CallHistory = ({tab}) => {
+    return (
+        <>CallHistory - {tab.id}</>
+    )
+}
+
+export default CallHistory

src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/index.jsx

@@ -0,0 +1,19 @@
+import {Grid} from "@mui/material";
+import CallActions from "@/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallActions";
+import CallHistory from "@/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallHistory";
+
+const CallTabPanel = ({tab}) => {
+    return (
+        <Grid container columns={{xs: 3}} sx={{display: !tab.active && 'none'}} role="tabpanel"
+              id={`answer-tabpanel-${tab.id}`} aria-labelledby={`answer-tab-${tab.id}`}>
+            <Grid item xs={2}>
+                <CallActions tab={tab}/>
+            </Grid>
+            <Grid item xs={1}>
+                <CallHistory tab={tab}/>
+            </Grid>
+        </Grid>
+    )
+}
+
+export default CallTabPanel

src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabsList/CallTabLabel.jsx

@@ -0,0 +1,23 @@
+import {IconButton, Stack, Typography, Zoom} from "@mui/material";
+import CloseIcon from '@mui/icons-material/Close';
+import useAnswers from "@/lib/callWidget/hooks/useAnswers";
+
+const CallTabLabel = ({tab}) => {
+    const {closeAnswerTab} = useAnswers()
+    const handleCloseClick = (id) => {
+        closeAnswerTab(id)
+    };
+
+    return (
+        <Stack sx={{width: '100%'}} direction={'row'} alignItems={'center'} justifyContent={'space-between'}>
+            <Typography>{tab.phone_number} - {tab.id}</Typography>
+            <Zoom in={tab.active}>
+                <IconButton onClick={() => handleCloseClick(tab.id)}>
+                    <CloseIcon/>
+                </IconButton>
+            </Zoom>
+        </Stack>
+    )
+}
+
+export default CallTabLabel

src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabsList/index.jsx

@@ -0,0 +1,27 @@
+import {Box, Tab, Tabs} from "@mui/material";
+import CallTabLabel
+    from "@/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabsList/CallTabLabel";
+import useAnswers from "@/lib/callWidget/hooks/useAnswers";
+
+const CallTabsList = () => {
+    const {answersList, changeActiveTabAnswers, activeTab} = useAnswers()
+    const handleChange = (event, newValue) => {
+        changeActiveTabAnswers(newValue)
+    };
+
+    return (
+        <Box sx={{borderBottom: 1, borderColor: 'divider'}}>
+            <Tabs
+                value={activeTab}
+                onChange={handleChange}
+                variant={'fullWidth'}
+            >
+                {answersList.map((answer) => (
+                    <Tab component={'div'} sx={{py: 0.5, pr: 0}} label={<CallTabLabel tab={answer}/>} key={answer.id}/>
+                ))}
+            </Tabs>
+        </Box>
+    )
+}
+
+export default CallTabsList

src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/index.jsx

@@ -0,0 +1,17 @@
+import CallTabPanel from "@/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel";
+import useAnswers from "@/lib/callWidget/hooks/useAnswers";
+import CallTabsList from "src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabsList";
+
+const CallTabs = () => {
+    const {answersList} = useAnswers()
+
+    return (
+        <>
+            <CallTabsList/>
+            {answersList.map((answer) => (
+                <CallTabPanel key={answer.id} tab={answer}/>
+            ))}
+        </>
+    )
+}
+export default CallTabs

src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/index.jsx

@@ -1,23 +1,48 @@
 import {Dialog} from "@mui/material";
 import {DialogTransition} from "@/core/components/DialogTransition";
+import {useEffect} from "react";
+import useCallDialog from "@/lib/callWidget/hooks/useCallDialog";
+import useAnswers from "@/lib/callWidget/hooks/useAnswers";
+import useSocket from "@/lib/app/hooks/useSocket";
+import CallTabs from "@/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs";
 
-const CallWidgetDialog = ({open, setOpen}) => {
+const CallWidgetDialog = () => {
+    const {openCallDialog, setOpenCallDialog} = useCallDialog()
+    const {answersList, newAnswerTab} = useAnswers()
+    const socket = useSocket()
 
-    const handleClose = () => {
-        setOpen(false);
-    };
+    useEffect(() => {
+        const answerCall = (_data, act) => {
+            const data = JSON.parse(_data)
+            newAnswerTab({
+                id: data.call_id,
+                phone_number: data.phone_number
+            })
+            act()
+        }
+        socket.on('answer', answerCall)
+
+        return () => {
+            socket.off('answer', answerCall)
+        }
+    });
+
+    useEffect(() => {
+        if (answersList.length === 0) {
+            setOpenCallDialog(false)
+            return
+        }
+        setOpenCallDialog(true)
+    }, [answersList.length]);
 
     return (
-        <>
-            <Dialog
-                fullScreen
-                open={open}
-                onClose={handleClose}
-                TransitionComponent={DialogTransition}
-            >
-                
-            </Dialog>
-        </>
+        <Dialog
+            fullScreen
+            open={openCallDialog}
+            TransitionComponent={DialogTransition}
+        >
+            <CallTabs/>
+        </Dialog>
     )
 }
 

src/components/layouts/Dashboard/CallWidget/index.jsx

@@ -1,14 +1,25 @@
-import CallWidgetButton from "@/components/layouts/Dashboard/CallWidget/CallWidgetButton";
 import CallWidgetDialog from "@/components/layouts/Dashboard/CallWidget/CallWidgetDialog";
-import {useState} from "react";
+import {AnswersProvider} from "@/lib/callWidget/contexts/answers";
+import useSocket from "@/lib/app/hooks/useSocket";
+import {useEffect} from "react";
 
 const CallWidget = () => {
-    const [open, setOpen] = useState(false)
+    const socket = useSocket()
+
+    useEffect(() => {
+        if (socket.connected) return
+
+        socket.connect()
+
+        return () => {
+            socket.disconnect()
+        }
+    }, []);
+
     return (
-        <>
-            <CallWidgetButton setOpen={setOpen}/>
-            <CallWidgetDialog open={open} setOpen={setOpen}/>
-        </>
+        <AnswersProvider>
+            <CallWidgetDialog/>
+        </AnswersProvider>
     )
 }
 

src/components/layouts/Dashboard/Header/index.jsx

@@ -1,6 +1,8 @@
 import MenuIcon from "@mui/icons-material/Menu";
-import {AppBar, Box, Container, CssBaseline, IconButton, Stack, Toolbar, useTheme} from "@mui/material";
 import ProfileMenu from "./ProfileMenu";
+import {useTheme} from "@mui/material/styles";
+import CssBaseline from "@mui/material/CssBaseline";
+import {AppBar, Box, Container, IconButton, Stack, Toolbar} from "@mui/material";
 
 function Header({drawerWidth, handleDrawerToggle}) {
     const theme = useTheme();

src/components/login-expert/__test__/LoginExpertComponent.test.js

@@ -124,6 +124,7 @@ describe('Login expert component from login page', () => {
     })
     describe("validation", ()=>{
         it("Disabled submit button until fields completed", async ()=> {
+
             render(
                 <MockAppWithProviders>
                     <LoginExpertComponent/>