admin setting with fake data create update

public/locales/fa/app.json

@@ -44,6 +44,7 @@
     "dashboard": "داشبورد",
     "reports": "گزارشات",
     "passenger-office-chief": "اداره مسافر",
+    "admin-setting": "تنظیمات ",
     "machinery-expert": "کارتابل کارشناسی",
     "passenger-boss": "کارتابل کارگروه",
     "transportation-assistant": "بررسی وام های تبصره 18",
@@ -121,6 +122,7 @@
     "edit_profile": "ویرایش پروفایل",
     "expert_management": "مدیریت کارشناسان",
     "user_management_page": "مدیریت کاربر",
+    "admin_setting": "تنظیمات",
     "loan_history": "کارتابل نظارت",
     "total_number_loan_offers": "تعداد کل وام های پیشنهادی",
     "total_amount_proposed_loan": "مبلغ کل وام های پیشنهادی",
@@ -147,6 +149,12 @@
     "button_while_submit": "در حال ثبت",
     "button_submit": "ثبت"
   },
+  "AdminSetting": {
+    "id": "کد یکتا",
+    "edit": "ویرایش",
+    "name": "نام",
+    "value": "مقدار"
+  },
   "UpdateProfile": {
     "error_invalid_email": "ایمیل نامعتبر است",
     "typography_edit_profile": "پروفایل",
@@ -481,8 +489,14 @@
     "button-cancel": "بستن",
     "refahi": "رفاهی",
     "navgan": "ناوگان",
+    "setting_name": "نام",
+    "value": "مقدار",
     "phone_number": "شماره تلفن",
     "national_id": "کد ملی",
+    "name_string": "نام می بایست متن باشد",
+    "setting_name_error": "وارد کردن نام الزامیست",
+    "value_error": "وارد کردن مقدار الزامیست",
+    "value_string": "مقدار می بایست متن باشد",
     "name": "نام انگلیسی",
     "name_error": "وارد کردن نام انگلیسی الزامیست",
     "name_fa": "نام فارسی",
@@ -576,6 +590,8 @@
   },
   "AddDialog": {
     "add": "افزودن",
+    "setting_name": "نام",
+    "value": "مقدار",
     "name": "نام انگلیسی",
     "name_error": "وارد کردن نام انگلیسی الزامیست",
     "name_fa": "نام فارسی",
@@ -594,6 +610,10 @@
     "national_id_error": "وارد کردن کد ملی الزامیست",
     "type_id_error": "وارد کردن نوع کاربر الزامیست",
     "navgan_id_error": "وارد کردن کد ناوگان الزامیست",
+    "name_string": "نام می بایست متن باشد",
+    "setting_name_error": "وارد کردن نام الزامیست",
+    "value_error": "وارد کردن مقدار الزامیست",
+    "value_string": "مقدار می بایست متن باشد",
     "refahi": "رفاهی",
     "navgan": "ناوگان",
     "type_id": "نوع کاربر",

src/components/dashboard/admin-setting/Form/CreateForm/CreateContent.jsx

@@ -0,0 +1,88 @@
+import {Button, DialogActions, DialogContent, Stack, TextField} 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_USER_MANAGEMENT} from "@/core/data/apiRoutes";
+
+const CreateContent = ({mutate, setOpenConfirmDialog}) => {
+    const t = useTranslations();
+    const requestServer = useRequest({auth: true})
+    const validationSchema = Yup.object().shape({
+        name: Yup.string("AddDialog.name_string")
+            .required(t("AddDialog.setting_name_error")),
+        value: Yup.string("AddDialog.value_string")
+            .required(t("AddDialog.value_error")),
+    });
+
+    const formik = useFormik({
+        initialValues: {
+            name: "",
+            value: "",
+        }, validationSchema, onSubmit: (values, {setSubmitting}) => {
+            const formData = new FormData();
+            formData.append("name", values.name);
+            formData.append("value", values.value);
+
+            requestServer(ADD_USER_MANAGEMENT, 'post', {
+                data: formData,
+            }).then((response) => {
+                setOpenConfirmDialog(false)
+                mutate()
+                update_notification()
+            }).catch(() => {
+            }).finally(() => {
+                setSubmitting(false);
+            });
+        },
+    });
+
+    return (
+        <>
+            <DialogContent>
+                <Stack spacing={2}>
+                    <Stack>
+                        <TextField
+                            name="name"
+                            rows={8}
+                            label={t("AddDialog.setting_name")}
+                            value={formik.values.name}
+                            onChange={formik.handleChange}
+                            fullWidth
+                            variant="outlined"
+                            onBlur={formik.handleBlur("name")}
+                            error={formik.touched.name && Boolean(formik.errors.name)}
+                            helperText={formik.touched.name && formik.errors.name}
+                            sx={{mt: 1}}
+                        />
+                    </Stack>
+                    <Stack>
+                        <TextField
+                            name="value"
+                            label={t("AddDialog.value")}
+                            value={formik.values.value}
+                            onChange={formik.handleChange}
+                            fullWidth
+                            variant="outlined"
+                            onBlur={formik.handleBlur("value")}
+                            error={formik.touched.value && Boolean(formik.errors.value)}
+                            helperText={formik.touched.value && formik.errors.value}
+                            sx={{mt: 1}}
+                        />
+                    </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 || !formik.dirty || !formik.isValid}>
+                    {t("AddDialog.button-add")}
+                </Button>
+            </DialogActions>
+        </>
+    )
+}
+export default CreateContent

src/components/dashboard/admin-setting/Form/CreateForm/index.jsx

@@ -0,0 +1,35 @@
+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 "@/components/dashboard/admin-setting/Form/CreateForm/CreateContent";
+
+const CreateForm = ({mutate}) => {
+    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 fullWidth open={openConfirmDialog}
+                    PaperProps={{sx: {boxShadow: 'rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px'}}}>
+                <DialogTitle>{t("AddDialog.add")}</DialogTitle>
+                <CreateContent mutate={mutate} setOpenConfirmDialog={setOpenConfirmDialog}/>
+            </Dialog>
+        </Stack>
+    )
+}
+export default CreateForm

src/components/dashboard/admin-setting/Form/UpdateForm/UpdateContent.jsx

@@ -0,0 +1,90 @@
+import {UPDATE_USER_MANAGEMENT} from "@/core/data/apiRoutes";
+import useNotification from "@/lib/app/hooks/useNotification";
+import useRequest from "@/lib/app/hooks/useRequest";
+import {Button, DialogActions, DialogContent, Stack, TextField} from "@mui/material"
+import {useFormik} from "formik";
+import {useTranslations} from "next-intl";
+import * as Yup from "yup";
+
+const UpdateContent = ({row, mutate, setOpenConfirmDialog}) => {
+    const t = useTranslations();
+    const requestServer = useRequest({auth: true})
+    const {update_notification} = useNotification()
+
+    const validationSchema = Yup.object().shape({
+        name: Yup.string("AddDialog.name_string")
+            .required(t("AddDialog.setting_name_error")),
+        value: Yup.string("AddDialog.value_string")
+            .required(t("AddDialog.value_error")),
+    });
+
+    const formik = useFormik({
+        initialValues: {
+            name: row.getValue("name"),
+            value: row.getValue("value"),
+        }, validationSchema, onSubmit: (values, {setSubmitting}) => {
+            const formData = new FormData();
+            formData.append("name", values.name);
+            formData.append("value", values.value);
+            requestServer(`${UPDATE_USER_MANAGEMENT}/${row.getValue("id")}`, 'post', {
+                data: formData,
+            }).then((response) => {
+                setOpenConfirmDialog(false)
+                mutate()
+                update_notification()
+            }).catch(() => {
+            }).finally(() => {
+                setSubmitting(false);
+            });
+        },
+    });
+    return (
+        <>
+            <DialogContent>
+                <Stack spacing={2}>
+                    <Stack>
+                        <TextField
+                            name="name"
+                            rows={8}
+                            label={t("UpdateDialog.setting_name")}
+                            value={formik.values.name}
+                            onChange={formik.handleChange}
+                            fullWidth
+                            variant="outlined"
+                            onBlur={formik.handleBlur("name")}
+                            error={formik.touched.name && Boolean(formik.errors.name)}
+                            helperText={formik.touched.name && formik.errors.name}
+                            sx={{mt: 1}}
+                        />
+                    </Stack>
+                    <Stack>
+                        <TextField
+                            name="value"
+                            rows={8}
+                            label={t("UpdateDialog.value")}
+                            value={formik.values.value}
+                            onChange={formik.handleChange}
+                            fullWidth
+                            variant="outlined"
+                            onBlur={formik.handleBlur("value")}
+                            error={formik.touched.value && Boolean(formik.errors.value)}
+                            helperText={formik.touched.value && formik.errors.value}
+                            sx={{mt: 1}}
+                        />
+                    </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 || !formik.dirty || !formik.isValid}>
+                    {t("UpdateDialog.button-update")}
+                </Button>
+            </DialogActions>
+        </>
+    )
+}
+export default UpdateContent

src/components/dashboard/admin-setting/Form/UpdateForm/index.jsx

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

src/components/dashboard/admin-setting/TableRowActions.jsx

@@ -0,0 +1,15 @@
+import {Box} from "@mui/material";
+import Update from "src/components/dashboard/admin-setting/Form/UpdateForm";
+
+const TableRow = ({row, mutate}) => {
+    return (
+        <Box sx={{display: "flex", flexWrap: "nowrap", gap: "8px"}}>
+            <Update
+                row={row}
+                mutate={mutate}
+            />
+        </Box>
+    );
+};
+
+export default TableRow;

src/components/dashboard/admin-setting/TableToolbar.jsx

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

src/components/dashboard/admin-setting/index.jsx

@@ -0,0 +1,88 @@
+import {Box, Typography} from "@mui/material";
+import {useMemo} from "react";
+import {GET_MACHINARY_OFFICE} from "@/core/data/apiRoutes";
+import {useTranslations} from "next-intl";
+import DataTable from "@/core/components/DataTable";
+import TableRowActions from "@/components/dashboard/admin-setting/TableRowActions";
+import TableToolbar from "@/components/dashboard/admin-setting/TableToolbar";
+
+function DashboardAdminSettingComponent() {
+    const t = useTranslations();
+    const columns = useMemo(
+        () => [
+            {
+                accessorFn: (row) => row.id,
+                id: "id",
+                header: t("AdminSetting.id"),
+                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("AdminSetting.name"),
+                enableColumnFilter: true,
+                datatype: "text",
+                filterFn: "contains",
+                columnFilterModeOptions: ["contains", "equals", "notEquals"],
+                Cell: ({renderedCellValue}) => (
+                    <Typography variant="body2">{renderedCellValue}</Typography>
+                ),
+            },
+            {
+                accessorFn: (row) => row.value,
+                id: "value",
+                header: t("AdminSetting.value"),
+                enableColumnFilter: true,
+                datatype: "text",
+                filterFn: "equals",
+                columnFilterModeOptions: [
+                    "equals",
+                    "contains",
+                ],
+                Cell: ({renderedCellValue}) => (
+                    <Typography variant="body2">{renderedCellValue}</Typography>
+                ),
+            },
+        ],
+        []
+    );
+    const data = [{
+        id: 1,
+        name: "amin",
+        value: "hi"
+    }]
+    return (
+        <Box sx={{px: 3}}>
+            <DataTable
+                data={data}
+                tableUrl={GET_MACHINARY_OFFICE}
+                columns={columns}
+                selectableRow={false}
+                enableCustomToolbar={true}
+                CustomToolbar={TableToolbar}
+                enableLastUpdate={true}
+                sorting={[{
+                    id: 'name', desc: false
+                }]}
+                enablePinning={true}
+                enableDensityToggle={false}
+                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 DashboardAdminSettingComponent;

src/core/data/sidebarMenu.jsx

@@ -15,6 +15,7 @@ import PersonIcon from '@mui/icons-material/Person';
 import AccessibilityIcon from '@mui/icons-material/Accessibility';
 import AssessmentIcon from '@mui/icons-material/Assessment';
 import SecurityIcon from '@mui/icons-material/Security';
+import SettingsIcon from '@mui/icons-material/Settings';
 
 const sidebarMenu = [
     [
@@ -197,6 +198,16 @@ const sidebarMenu = [
             icon: <AccessibilityIcon sx={{width: 'inherit', height: 'inherit'}}/>,
             selected: false,
             permissions: ["manage_roles"],
+        },
+        {
+            key: "sidebar.admin-setting",
+            secondary: "secondary.admin-management",
+            name: "admin_setting",
+            type: "page",
+            route: "/dashboard/admin-setting",
+            icon: <SettingsIcon sx={{width: 'inherit', height: 'inherit'}}/>,
+            selected: false,
+            permissions: ["manage_roles"],
         }
     ],
 ];

src/pages/dashboard/admin-setting/index.jsx

@@ -0,0 +1,21 @@
+import {parse} from "next-useragent";
+import DashboardAdminSettingComponent from "@/components/dashboard/admin-setting";
+
+export default function AdminSetting() {
+    return (
+        <DashboardAdminSettingComponent/>
+    );
+}
+
+export async function getServerSideProps({req, locale}) {
+    const {isBot} = parse(req.headers["user-agent"]);
+    return {
+        props: {
+            messages: (await import(`&/locales/${locale}/app.json`)).default,
+            title: "Dashboard.admin_setting",
+            isBot,
+            locale,
+            layout: {name: 'DashboardLayout'}
+        },
+    };
+}