complete up to request for storing azmayesh_sample and complete design of...

src/core/components/CustomDatePicker.jsx

@@ -0,0 +1,53 @@
+import React from "react";
+import { AdapterDateFnsJalali } from "@mui/x-date-pickers/AdapterDateFnsJalali";
+import { faIR } from "@mui/x-date-pickers/locales";
+import { LocalizationProvider, MobileDatePicker } from "@mui/x-date-pickers";
+import { IconButton, InputAdornment } from "@mui/material";
+import ClearIcon from "@mui/icons-material/Clear";
+
+const CustomDatePicker = ({ dateValue, setDateValue, placeholder = "انتخاب تاریخ", size = "small" }) => {
+    const handleDateChange = (newValue) => {
+        setDateValue(newValue);
+    };
+
+    return (
+        <LocalizationProvider
+            dateAdapter={AdapterDateFnsJalali}
+            localeText={faIR.components.MuiLocalizationProvider.defaultProps.localeText}
+        >
+            <MobileDatePicker
+                value={dateValue || null}
+                onChange={handleDateChange}
+                slotProps={{
+                    textField: {
+                        size: size,
+                        placeholder: placeholder,
+                        InputProps: {
+                            endAdornment: (
+                                <InputAdornment position="end">
+                                    <IconButton
+                                        size={size}
+                                        onClick={(event) => {
+                                            event.stopPropagation();
+                                            setDateValue(null);
+                                        }}
+                                        sx={{
+                                            color: "#bfbfbf",
+                                            "&:hover": {
+                                                backgroundColor: "rgba(189, 189, 189, 0.1)",
+                                                color: "#363434",
+                                            },
+                                        }}
+                                    >
+                                        <ClearIcon />
+                                    </IconButton>
+                                </InputAdornment>
+                            ),
+                        },
+                    },
+                }}
+            ></MobileDatePicker>
+        </LocalizationProvider>
+    );
+};
+export default CustomDatePicker;

src/core/components/DataTable/Main.js

@@ -22,6 +22,7 @@ const DataTable_Main = (props) => {
         TableToolbar,
         table_title,
         RowActions,
+        specific_data,
     } = props;
     const flatColumns = flattenArrayOfObjects(columns, "columns");
     const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 10 });
@@ -50,7 +51,11 @@ const DataTable_Main = (props) => {
     const fetcher = async (url) => {
         try {
             const response = await request(url);
-            return response.data;
+            if (specific_data) {
+                return specific_data(response.data);
+            } else {
+                return response.data?.data;
+            }
         } catch (error) {
             throw error;
         }
@@ -66,7 +71,7 @@ const DataTable_Main = (props) => {
     const table = useMaterialReactTable({
         localization: FA_DATATABLE_LOCALIZATION,
         columns,
-        data: data?.data ?? [],
+        data: data ?? [],
         initialState: {
             density: "compact",
             columnVisibility: flattenHideData,

src/core/components/DataTable/filter/FilterBody.jsx

@@ -81,7 +81,7 @@ function FilterBody({ columns, drawerState, setDrawerState, user_id, page_name,
         <Drawer
             open={drawerState}
             onClose={() => setDrawerState(false)}
-            sx={{ overflowY: "hidden", display: "flex", flexDirection: "column", height: "100%" }}
+            sx={{ overflowY: "hidden", display: "flex", flexDirection: "column", height: "100%", zIndex: "1300" }}
         >
             <FilterHeader setDrawerState={setDrawerState} />
             {Object.keys(initialValues).length > 0 && (

src/core/components/DataTable/hide/HideBody.jsx

@@ -30,7 +30,7 @@ function HideBody({ columns, drawerState, setDrawerState }) {
         <Drawer
             open={drawerState}
             onClose={() => setDrawerState(false)}
-            sx={{ overflowY: "hidden", display: "flex", flexDirection: "column", height: "100%" }}
+            sx={{ overflowY: "hidden", display: "flex", flexDirection: "column", height: "100%", zIndex: "1300" }}
         >
             <HideHeader setDrawerState={setDrawerState} />
             <HideOrShowAll hideData={hideData} setHideData={setHideData} />

src/core/components/FormMaker/DateType.jsx

@@ -0,0 +1,35 @@
+import { FormControl } from "@mui/material";
+import CustomDatePicker from "@/core/components/CustomDatePicker";
+import moment from "jalali-moment";
+import { useEffect, useState } from "react";
+
+const DateType = ({ itemInfo, defaultValues, setDefaultValues }) => {
+    const [dateValue, setDateValue] = useState(null);
+    const handleDateChange = (newValue) => {
+        const date = new Date(newValue);
+        const formattedDate = moment(date).locale("fa").format("YYYY/MM/DD");
+        setDefaultValues((prev) => ({
+            ...prev,
+            [itemInfo.id]: newValue ? formattedDate : "",
+        }));
+        setDateValue(moment(date).format("YYYY/MM/DD"));
+    };
+
+    useEffect(() => {
+        if (defaultValues[itemInfo.id]) {
+            setDateValue(moment.from(defaultValues[itemInfo.id], "fa", "YYYY/MM/DD"));
+        }
+    }, []);
+
+    return (
+        <FormControl fullWidth size="small" variant="outlined">
+            <CustomDatePicker
+                dateValue={dateValue ? new Date(dateValue) : null}
+                setDateValue={handleDateChange}
+                placeholder={itemInfo.name}
+            />
+        </FormControl>
+    );
+};
+
+export default DateType;

src/core/components/FormMaker/InputType.jsx

@@ -0,0 +1,30 @@
+import { FormControl, InputLabel, OutlinedInput } from "@mui/material";
+import React from "react";
+
+const InputType = ({ itemInfo, defaultValues, setDefaultValues }) => {
+    const handleChange = (event) => {
+        const { value } = event.target;
+        setDefaultValues((prevValues) => ({
+            ...prevValues,
+            [itemInfo.id]: value,
+        }));
+    };
+
+    return (
+        <FormControl size="small" fullWidth variant="outlined">
+            <InputLabel htmlFor={itemInfo.id}>{itemInfo.name}</InputLabel>
+            <OutlinedInput
+                id={itemInfo.id}
+                label={itemInfo.name}
+                autoComplete="off"
+                size="small"
+                fullWidth
+                type="text"
+                onChange={handleChange}
+                value={defaultValues[itemInfo.id] || ""}
+            />
+        </FormControl>
+    );
+};
+
+export default InputType;

src/core/components/FormMaker/SelectType.jsx

@@ -0,0 +1,34 @@
+import { FormControl, InputLabel, MenuItem, Select } from "@mui/material";
+import React from "react";
+
+const SelectType = ({ itemInfo, defaultValues, setDefaultValues }) => {
+    const handleChange = (event) => {
+        const newValue = event.target.value;
+        setDefaultValues((prev) => ({
+            ...prev,
+            [itemInfo.id]: newValue,
+        }));
+    };
+
+    return (
+        <FormControl size="small" fullWidth variant="outlined">
+            <InputLabel id={itemInfo.id}>{itemInfo.name}</InputLabel>
+            <Select
+                labelId={itemInfo.id}
+                id={itemInfo.id}
+                value={defaultValues[itemInfo.id] || ""}
+                label={itemInfo.name}
+                onChange={handleChange}
+            >
+                <MenuItem value="">{itemInfo.name}</MenuItem>
+                {itemInfo.option?.map((item, index) => (
+                    <MenuItem key={index} value={item}>
+                        {item}
+                    </MenuItem>
+                ))}
+            </Select>
+        </FormControl>
+    );
+};
+
+export default SelectType;

src/core/components/FormMaker/index.jsx

@@ -0,0 +1,33 @@
+import InputType from "./InputType";
+import SelectType from "./SelectType";
+import DateType from "./DateType";
+import { Grid } from "@mui/material";
+
+const componentMap = {
+    input: InputType,
+    select: SelectType,
+    date: DateType,
+};
+
+const FormMaker = ({ formInfo, defaultValues, setDefaultValues }) => {
+    return (
+        <Grid container spacing={1}>
+            {formInfo?.map((itemInfo) => {
+                const Component = componentMap[itemInfo.type] || null;
+                return (
+                    <Grid item xs={12} sm={6} md={4} key={itemInfo.id}>
+                        {Component ? (
+                            <Component
+                                itemInfo={itemInfo}
+                                defaultValues={defaultValues}
+                                setDefaultValues={setDefaultValues}
+                            />
+                        ) : null}
+                    </Grid>
+                );
+            })}
+        </Grid>
+    );
+};
+
+export default FormMaker;