Feature/user management

2025-05-10 05:31:24 +00:00
parent bc59952f7b
commit f07d27b273
101 changed files with 7136 additions and 14 deletions
--- a/src/core/components/CustomDatePicker.jsx
+++ b/src/core/components/CustomDatePicker.jsx
@@ -0,0 +1,60 @@
+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;
--- a/src/core/components/DataTable/Main.js
+++ b/src/core/components/DataTable/Main.js
@@ -0,0 +1,199 @@
+import DataTableFilterDataStructure from "@/core/utils/DataTableFilterDataStructure";
+import { flattenArrayOfObjects } from "@/core/utils/flattenArrayOfObjects";
+import { flattenObjectOfObjects } from "@/core/utils/flattenObjectOfObjects";
+import isArrayEmpty from "@/core/utils/isArrayEmpty";
+import useDataTable from "@/lib/hooks/useDataTable";
+import useRequest from "@/lib/hooks/useRequest";
+import { useMaterialReactTable } from "material-react-table";
+import { useCallback, useEffect, useReducer, useState } from "react";
+import useSWR from "swr";
+import { FA_DATATABLE_LOCALIZATION } from "./localization/fa/datatable";
+import DataTable_Paper from "./table/Paper";
+
+const rowSelectionReducer = (state, action) => {
+  switch (action.type) {
+    case "TOGGLE_ROW":
+      return { [action.payload]: true };
+    case "RESET":
+      return {};
+    default:
+      return state;
+  }
+};
+
+const DataTable_Main = (props) => {
+  const request = useRequest();
+  const [rowSelection, dispatchRowSelection] = useReducer(
+    rowSelectionReducer,
+    {},
+  );
+  const { filterData, sortData, setSortData, hideData } = useDataTable();
+  const {
+    need_filter,
+    table_url,
+    user_id,
+    page_name,
+    table_name,
+    columns,
+    initialStateProps,
+    TableToolbar,
+    table_title,
+    RowActions,
+    specific_data,
+    specialFilter,
+  } = props;
+  const flatColumns = flattenArrayOfObjects(columns, "columns");
+  const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 10 });
+  const [totalRowCount, setTotalRowCount] = useState(0);
+  const flattenHideData = flattenObjectOfObjects(hideData);
+  const onSortingChange = (event) => {
+    setSortData(event);
+  };
+
+  const fetchUrl = useCallback(() => {
+    const params = new URLSearchParams();
+    params.set("start", `${pagination.pageIndex * pagination.pageSize}`);
+    params.set("size", pagination.pageSize);
+    if (specialFilter) {
+      const filteredSpecialFilterData = Object.values(specialFilter).filter(
+        (filter) => !isArrayEmpty(filter.value),
+      );
+      params.set("filters", JSON.stringify(filteredSpecialFilterData || []));
+    } else {
+      const filteredFilterData = DataTableFilterDataStructure(
+        filterData,
+        isArrayEmpty,
+      );
+      params.set(
+        "filters",
+        JSON.stringify(
+          filteredFilterData.length === 0 ? [] : filteredFilterData,
+        ),
+      );
+    }
+    params.set(
+      "sorting",
+      JSON.stringify(
+        Object.values(sortData).map(({ id, ...rest }) => ({
+          ...rest,
+          id: id.replace(/__/g, "."),
+        })),
+      ),
+    );
+    return `${table_url}?${params}`;
+  }, [table_url, filterData, pagination, sortData, specialFilter]);
+
+  const fetcher = async (url) => {
+    try {
+      const response = await request(url);
+      setTotalRowCount(response.data?.meta?.totalRowCount);
+      if (specific_data) {
+        return specific_data(response.data);
+      } else {
+        return response.data?.data;
+      }
+    } catch (error) {
+      throw error;
+    }
+  };
+
+  const { data, isValidating, mutate } = useSWR(
+    props.data ? "" : fetchUrl(),
+    fetcher,
+    {
+      revalidateIfStale: true,
+      revalidateOnFocus: false,
+      revalidateOnReconnect: true,
+      keepPreviousData: true,
+    },
+  );
+
+  useEffect(() => {
+    if (!isValidating) return;
+    dispatchRowSelection({ type: "RESET" });
+  }, [isValidating]);
+
+  const table = useMaterialReactTable({
+    localization: FA_DATATABLE_LOCALIZATION,
+    columns,
+    data: data ?? [],
+    muiTableBodyRowProps: ({ row }) => ({
+      onClick: () =>
+        dispatchRowSelection({ type: "TOGGLE_ROW", payload: row.id }),
+      selected: !!rowSelection[row.id],
+    }),
+    initialState: {
+      density: "compact",
+      columnVisibility: flattenHideData,
+      sorting: sortData,
+      ...initialStateProps,
+    },
+    state: {
+      showProgressBars: isValidating || props.loading,
+      columnVisibility: flattenHideData,
+      sorting: sortData,
+      pagination,
+      rowSelection,
+    },
+    muiTableHeadProps: {
+      sx: {
+        borderTop: "1px solid #e1e1e1",
+        borderBottom: "2px solid #e1e1e1",
+      },
+    },
+    muiTableHeadCellProps: {
+      sx: {
+        color: "primary.main",
+        borderLeft: "1px solid #e1e1e1",
+        "&:first-of-type": {
+          borderLeft: "unset",
+        },
+      },
+    },
+    muiTableBodyCellProps: {
+      sx: {
+        borderLeft: "1px solid #e1e1e1",
+        "&:first-of-type": {
+          borderLeft: "unset",
+        },
+      },
+    },
+    manualFiltering: true,
+    manualPagination: true,
+    manualSorting: true,
+    onPaginationChange: setPagination,
+    onSortingChange: onSortingChange,
+    rowCount: totalRowCount,
+    renderTopToolbarCustomActions: ({ table }) => (
+      <>
+        {TableToolbar && (
+          <TableToolbar
+            table={table}
+            mutate={mutate}
+            filterData={specialFilter || filterData}
+          />
+        )}
+      </>
+    ),
+    renderRowActions: ({ row }) => <RowActions row={row} mutate={mutate} />,
+    ...props,
+  });
+
+  return (
+    <DataTable_Paper
+      table={table}
+      table_title={table_title}
+      need_filter={need_filter}
+      mutate={mutate}
+      table_url={table_url}
+      columns={flatColumns}
+      user_id={user_id}
+      page_name={page_name}
+      table_name={table_name}
+      special_data={props.data}
+      special_filter={specialFilter}
+      setFilterData={props.setFilterData}
+    />
+  );
+};
+export default DataTable_Main;
--- a/src/core/components/DataTable/body/TableBody.js
+++ b/src/core/components/DataTable/body/TableBody.js
@@ -0,0 +1,201 @@
+import { parseFromValuesOrFunc } from "@/core/utils/utils";
+import { TableBody, Typography } from "@mui/material";
+import { useMRT_RowVirtualizer, useMRT_Rows } from "material-react-table";
+import { memo, useMemo } from "react";
+import DataTable_TableBodyRow, {
+  Memo_DataTable_TableBodyRow,
+} from "./TableBodyRow";
+
+const DataTable_TableBody = ({ columnVirtualizer, table, ...rest }) => {
+  const {
+    getBottomRows,
+    getIsSomeRowsPinned,
+    getRowModel,
+    getState,
+    getTopRows,
+    options: {
+      enableStickyFooter,
+      enableStickyHeader,
+      layoutMode,
+      localization,
+      memoMode,
+      muiTableBodyProps,
+      renderDetailPanel,
+      renderEmptyRowsFallback,
+      rowPinningDisplayMode,
+    },
+    refs: { tableFooterRef, tableHeadRef, tablePaperRef },
+  } = table;
+  const { columnFilters, globalFilter, isFullScreen, rowPinning } = getState();
+
+  const tableBodyProps = {
+    ...parseFromValuesOrFunc(muiTableBodyProps, { table }),
+    ...rest,
+  };
+
+  const tableHeadHeight =
+    ((enableStickyHeader || isFullScreen) &&
+      tableHeadRef.current?.clientHeight) ||
+    0;
+  const tableFooterHeight =
+    (enableStickyFooter && tableFooterRef.current?.clientHeight) || 0;
+
+  const pinnedRowIds = useMemo(() => {
+    if (!rowPinning.bottom?.length && !rowPinning.top?.length) return [];
+    return getRowModel()
+      .rows.filter((row) => row.getIsPinned())
+      .map((r) => r.id);
+  }, [rowPinning, getRowModel().rows]);
+
+  const rows = useMRT_Rows(table);
+
+  const rowVirtualizer = useMRT_RowVirtualizer(table, rows);
+
+  const { virtualRows } = rowVirtualizer ?? {};
+
+  const commonRowProps = {
+    columnVirtualizer,
+    numRows: rows.length,
+    table,
+  };
+
+  return (
+    <>
+      {!rowPinningDisplayMode?.includes("sticky") &&
+        getIsSomeRowsPinned("top") && (
+          <TableBody
+            {...tableBodyProps}
+            sx={(theme) => ({
+              display: layoutMode?.startsWith("grid") ? "grid" : undefined,
+              position: "sticky",
+              top: tableHeadHeight - 1,
+              zIndex: 1,
+              ...parseFromValuesOrFunc(tableBodyProps?.sx, theme),
+            })}
+          >
+            {getTopRows().map((row, staticRowIndex) => {
+              const props = {
+                ...commonRowProps,
+                row,
+                staticRowIndex,
+              };
+              return memoMode === "rows" ? (
+                <Memo_DataTable_TableBodyRow key={row.id} {...props} />
+              ) : (
+                <DataTable_TableBodyRow key={row.id} {...props} />
+              );
+            })}
+          </TableBody>
+        )}
+      <TableBody
+        {...tableBodyProps}
+        sx={(theme) => ({
+          display: layoutMode?.startsWith("grid") ? "grid" : undefined,
+          height: rowVirtualizer
+            ? `${rowVirtualizer.getTotalSize()}px`
+            : undefined,
+          minHeight: !rows.length ? "100px" : undefined,
+          position: "relative",
+          ...parseFromValuesOrFunc(tableBodyProps?.sx, theme),
+        })}
+      >
+        {tableBodyProps?.children ??
+          (!rows.length ? (
+            <tr
+              style={{
+                display: layoutMode?.startsWith("grid") ? "grid" : undefined,
+              }}
+            >
+              <td
+                colSpan={table.getVisibleLeafColumns().length}
+                style={{
+                  display: layoutMode?.startsWith("grid") ? "grid" : undefined,
+                }}
+              >
+                {renderEmptyRowsFallback?.({ table }) ?? (
+                  <Typography
+                    sx={{
+                      color: "text.secondary",
+                      fontStyle: "italic",
+                      maxWidth: `min(100vw, ${tablePaperRef.current?.clientWidth ?? 360}px)`,
+                      py: "2rem",
+                      textAlign: "center",
+                      width: "100%",
+                    }}
+                  >
+                    {globalFilter || columnFilters.length
+                      ? localization.noResultsFound
+                      : localization.noRecordsToDisplay}
+                  </Typography>
+                )}
+              </td>
+            </tr>
+          ) : (
+            <>
+              {(virtualRows ?? rows).map((rowOrVirtualRow, staticRowIndex) => {
+                let row = rowOrVirtualRow;
+                if (rowVirtualizer) {
+                  if (renderDetailPanel) {
+                    if (rowOrVirtualRow.index % 2 === 1) {
+                      return null;
+                    } else {
+                      staticRowIndex = rowOrVirtualRow.index / 2;
+                    }
+                  } else {
+                    staticRowIndex = rowOrVirtualRow.index;
+                  }
+                  row = rows[staticRowIndex];
+                }
+                const props = {
+                  ...commonRowProps,
+                  pinnedRowIds,
+                  row,
+                  rowVirtualizer,
+                  staticRowIndex,
+                  virtualRow: rowVirtualizer ? rowOrVirtualRow : undefined,
+                };
+                const key = `${row.id}-${row.index}`;
+                return memoMode === "rows" ? (
+                  <Memo_DataTable_TableBodyRow key={key} {...props} />
+                ) : (
+                  <DataTable_TableBodyRow key={key} {...props} />
+                );
+              })}
+            </>
+          ))}
+      </TableBody>
+      {!rowPinningDisplayMode?.includes("sticky") &&
+        getIsSomeRowsPinned("bottom") && (
+          <TableBody
+            {...tableBodyProps}
+            sx={(theme) => ({
+              bottom: tableFooterHeight - 1,
+              display: layoutMode?.startsWith("grid") ? "grid" : undefined,
+              position: "sticky",
+              zIndex: 1,
+              ...parseFromValuesOrFunc(tableBodyProps?.sx, theme),
+            })}
+          >
+            {getBottomRows().map((row, staticRowIndex) => {
+              const props = {
+                ...commonRowProps,
+                row,
+                staticRowIndex,
+              };
+              return memoMode === "rows" ? (
+                <Memo_DataTable_TableBodyRow key={row.id} {...props} />
+              ) : (
+                <DataTable_TableBodyRow key={row.id} {...props} />
+              );
+            })}
+          </TableBody>
+        )}
+    </>
+  );
+};
+export default DataTable_TableBody;
+
+export const Memo_DataTable_TableBody = memo(
+  DataTable_TableBody,
+  (prev, next) => prev.table.options.data === next.table.options.data,
+);
--- a/src/core/components/DataTable/body/TableBodyCell.js
+++ b/src/core/components/DataTable/body/TableBodyCell.js
@@ -0,0 +1,308 @@
+import {
+  getCommonMRTCellStyles,
+  parseFromValuesOrFunc,
+} from "@/core/utils/utils";
+import { useTheme } from "@emotion/react";
+import { Skeleton, TableCell } from "@mui/material";
+import { isCellEditable, openEditingCell } from "material-react-table";
+import { memo, useEffect, useMemo, useState } from "react";
+import DataTable_CopyButton from "../buttons/CopyButton";
+import DataTable_TableBodyCellValue from "./TableBodyCellValue";
+
+const DataTable_TableBodyCell = ({
+  cell,
+  numRows,
+  rowRef,
+  staticColumnIndex,
+  staticRowIndex,
+  table,
+  ...rest
+}) => {
+  const theme = useTheme();
+  const {
+    getState,
+    options: {
+      columnResizeDirection,
+      columnResizeMode,
+      createDisplayMode,
+      editDisplayMode,
+      enableCellActions,
+      enableClickToCopy,
+      enableColumnOrdering,
+      enableColumnPinning,
+      enableGrouping,
+      layoutMode,
+      mrtTheme: { draggingBorderColor, baseBackgroundColor },
+      muiSkeletonProps,
+      muiTableBodyCellProps,
+    },
+    setHoveredColumn,
+  } = table;
+  const {
+    actionCell,
+    columnSizingInfo,
+    creatingRow,
+    density,
+    draggingColumn,
+    draggingRow,
+    editingCell,
+    editingRow,
+    hoveredColumn,
+    hoveredRow,
+    isLoading,
+    showSkeletons,
+  } = getState();
+  const { column, row } = cell;
+  const { columnDef } = column;
+  const { columnDefType } = columnDef;
+
+  const args = { cell, column, row, table };
+  const tableCellProps = {
+    ...parseFromValuesOrFunc(muiTableBodyCellProps, args),
+    ...parseFromValuesOrFunc(columnDef.muiTableBodyCellProps, args),
+    ...rest,
+  };
+
+  const skeletonProps = parseFromValuesOrFunc(muiSkeletonProps, {
+    cell,
+    column,
+    row,
+    table,
+  });
+
+  const [skeletonWidth, setSkeletonWidth] = useState(100);
+  useEffect(() => {
+    if ((!isLoading && !showSkeletons) || skeletonWidth !== 100) return;
+    const size = column.getSize();
+    setSkeletonWidth(
+      columnDefType === "display"
+        ? size / 2
+        : Math.round(Math.random() * (size - size / 3) + size / 3),
+    );
+  }, [isLoading, showSkeletons]);
+
+  const draggingBorders = useMemo(() => {
+    const isDraggingColumn = draggingColumn?.id === column.id;
+    const isHoveredColumn = hoveredColumn?.id === column.id;
+    const isDraggingRow = draggingRow?.id === row.id;
+    const isHoveredRow = hoveredRow?.id === row.id;
+    const isFirstColumn = column.getIsFirstColumn();
+    const isLastColumn = column.getIsLastColumn();
+    const isLastRow = numRows && staticRowIndex === numRows - 1;
+    const isResizingColumn = columnSizingInfo.isResizingColumn === column.id;
+    const showResizeBorder =
+      isResizingColumn && columnResizeMode === "onChange";
+
+    const borderStyle = showResizeBorder
+      ? `2px solid ${draggingBorderColor} !important`
+      : isDraggingColumn || isDraggingRow
+        ? `1px dashed ${theme.palette.grey[500]} !important`
+        : isHoveredColumn || isHoveredRow || isResizingColumn
+          ? `2px dashed ${draggingBorderColor} !important`
+          : undefined;
+
+    if (showResizeBorder) {
+      return columnResizeDirection === "ltr"
+        ? { borderRight: borderStyle }
+        : { borderLeft: borderStyle };
+    }
+
+    return borderStyle
+      ? {
+          borderBottom:
+            isDraggingRow || isHoveredRow || (isLastRow && !isResizingColumn)
+              ? borderStyle
+              : undefined,
+          borderLeft:
+            isDraggingColumn ||
+            isHoveredColumn ||
+            ((isDraggingRow || isHoveredRow) && isFirstColumn)
+              ? borderStyle
+              : undefined,
+          borderRight:
+            isDraggingColumn ||
+            isHoveredColumn ||
+            ((isDraggingRow || isHoveredRow) && isLastColumn)
+              ? borderStyle
+              : undefined,
+          borderTop: isDraggingRow || isHoveredRow ? borderStyle : undefined,
+        }
+      : undefined;
+  }, [
+    columnSizingInfo.isResizingColumn,
+    draggingColumn,
+    draggingRow,
+    hoveredColumn,
+    hoveredRow,
+    staticRowIndex,
+  ]);
+
+  const isColumnPinned =
+    enableColumnPinning &&
+    columnDef.columnDefType !== "group" &&
+    column.getIsPinned();
+
+  const isEditable = isCellEditable({ cell, table });
+
+  const isEditing =
+    isEditable &&
+    !["custom", "modal"].includes(editDisplayMode) &&
+    (editDisplayMode === "table" ||
+      editingRow?.id === row.id ||
+      editingCell?.id === cell.id) &&
+    !row.getIsGrouped();
+
+  const isCreating =
+    isEditable && createDisplayMode === "row" && creatingRow?.id === row.id;
+
+  const showClickToCopyButton =
+    (parseFromValuesOrFunc(enableClickToCopy, cell) === true ||
+      parseFromValuesOrFunc(columnDef.enableClickToCopy, cell) === true) &&
+    !["context-menu", false].includes(
+      // @ts-ignore
+      parseFromValuesOrFunc(columnDef.enableClickToCopy, cell),
+    );
+
+  const isRightClickable = parseFromValuesOrFunc(enableCellActions, cell);
+
+  const cellValueProps = {
+    cell,
+    table,
+  };
+
+  const handleDoubleClick = (event) => {
+    tableCellProps?.onDoubleClick?.(event);
+    openEditingCell({ cell, table });
+  };
+
+  const handleDragEnter = (e) => {
+    tableCellProps?.onDragEnter?.(e);
+    if (enableGrouping && hoveredColumn?.id === "drop-zone") {
+      setHoveredColumn(null);
+    }
+    if (enableColumnOrdering && draggingColumn) {
+      setHoveredColumn(
+        columnDef.enableColumnOrdering !== false ? column : null,
+      );
+    }
+  };
+
+  const handleDragOver = (e) => {
+    if (columnDef.enableColumnOrdering !== false) {
+      e.preventDefault();
+    }
+  };
+
+  const handleContextMenu = (e) => {
+    tableCellProps?.onContextMenu?.(e);
+    if (isRightClickable) {
+      e.preventDefault();
+      table.setActionCell(cell);
+      table.refs.actionCellRef.current = e.currentTarget;
+    }
+  };
+
+  return (
+    <TableCell
+      data-index={staticColumnIndex}
+      data-pinned={!!isColumnPinned || undefined}
+      {...tableCellProps}
+      onContextMenu={handleContextMenu}
+      onDoubleClick={handleDoubleClick}
+      onDragEnter={handleDragEnter}
+      onDragOver={handleDragOver}
+      sx={(theme) => ({
+        "&:hover": {
+          outline:
+            actionCell?.id === cell.id ||
+            (editDisplayMode === "cell" && isEditable) ||
+            (editDisplayMode === "table" && (isCreating || isEditing))
+              ? `1px solid ${theme.palette.grey[500]}`
+              : undefined,
+          textOverflow: "clip",
+        },
+        alignItems: layoutMode?.startsWith("grid") ? "center" : undefined,
+        cursor: isRightClickable
+          ? "context-menu"
+          : isEditable && editDisplayMode === "cell"
+            ? "pointer"
+            : "inherit",
+        outline:
+          actionCell?.id === cell.id
+            ? `1px solid ${theme.palette.grey[500]}`
+            : undefined,
+        outlineOffset: "-1px",
+        overflow: "hidden",
+        p:
+          density === "compact"
+            ? columnDefType === "display"
+              ? "0 0.5rem"
+              : "0.5rem"
+            : density === "comfortable"
+              ? columnDefType === "display"
+                ? "0.5rem 0.75rem"
+                : "1rem"
+              : columnDefType === "display"
+                ? "1rem 1.25rem"
+                : "1.5rem",
+
+        textOverflow: columnDefType !== "display" ? "ellipsis" : undefined,
+        whiteSpace:
+          row.getIsPinned() || density === "compact" ? "nowrap" : "normal",
+        ...getCommonMRTCellStyles({
+          column,
+          table,
+          tableCellProps,
+          theme,
+        }),
+        ...draggingBorders,
+        backgroundColor: baseBackgroundColor,
+      })}
+    >
+      {tableCellProps.children ?? (
+        <>
+          {cell.getIsPlaceholder() ? (
+            (columnDef.PlaceholderCell?.({ cell, column, row, table }) ?? null)
+          ) : showSkeletons !== false && (isLoading || showSkeletons) ? (
+            <Skeleton
+              animation="wave"
+              height={20}
+              width={skeletonWidth}
+              {...skeletonProps}
+            />
+          ) : columnDefType === "display" &&
+            (["mrt-row-expand", "mrt-row-numbers", "mrt-row-select"].includes(
+              column.id,
+            ) ||
+              !row.getIsGrouped()) ? (
+            columnDef.Cell?.({
+              cell,
+              column,
+              renderedCellValue: cell.renderValue(),
+              row,
+              rowRef,
+              staticColumnIndex,
+              staticRowIndex,
+              table,
+            })
+          ) : showClickToCopyButton && columnDef.enableClickToCopy !== false ? (
+            <DataTable_CopyButton cell={cell} table={table}>
+              <DataTable_TableBodyCellValue {...cellValueProps} />
+            </DataTable_CopyButton>
+          ) : (
+            <DataTable_TableBodyCellValue {...cellValueProps} />
+          )}
+          {cell.getIsGrouped() && !columnDef.GroupedCell && (
+            <> ({row.subRows?.length})</>
+          )}
+        </>
+      )}
+    </TableCell>
+  );
+};
+export default DataTable_TableBodyCell;
+
+export const Memo_DataTable_TableBodyCell = memo(
+  DataTable_TableBodyCell,
+  (prev, next) => next.cell === prev.cell,
+);
--- a/src/core/components/DataTable/body/TableBodyCellValue.js
+++ b/src/core/components/DataTable/body/TableBodyCellValue.js
@@ -0,0 +1,112 @@
+import { Box } from "@mui/material";
+
+const allowedTypes = ["string", "number"];
+
+const DataTable_TableBodyCellValue = ({
+  cell,
+  rowRef,
+  staticColumnIndex,
+  staticRowIndex,
+  table,
+}) => {
+  const {
+    getState,
+    options: {
+      enableFilterMatchHighlighting,
+      mrtTheme: { matchHighlightColor },
+    },
+  } = table;
+  const { column, row } = cell;
+  const { columnDef } = column;
+  const { globalFilter, globalFilterFn } = getState();
+  const filterValue = column.getFilterValue();
+
+  let renderedCellValue =
+    cell.getIsAggregated() && columnDef.AggregatedCell
+      ? columnDef.AggregatedCell({
+          cell,
+          column,
+          row,
+          table,
+        })
+      : row.getIsGrouped() && !cell.getIsGrouped()
+        ? null
+        : cell.getIsGrouped() && columnDef.GroupedCell
+          ? columnDef.GroupedCell({
+              cell,
+              column,
+              row,
+              table,
+            })
+          : undefined;
+
+  const isGroupedValue = renderedCellValue !== undefined;
+
+  if (!isGroupedValue) {
+    renderedCellValue = cell.renderValue();
+  }
+
+  if (
+    enableFilterMatchHighlighting &&
+    columnDef.enableFilterMatchHighlighting !== false &&
+    String(renderedCellValue) &&
+    allowedTypes.includes(typeof renderedCellValue) &&
+    ((filterValue &&
+      allowedTypes.includes(typeof filterValue) &&
+      ["autocomplete", "text"].includes(columnDef.filterVariant)) ||
+      (globalFilter &&
+        allowedTypes.includes(typeof globalFilter) &&
+        column.getCanGlobalFilter()))
+  ) {
+    const chunks = highlightWords?.({
+      matchExactly:
+        (filterValue ? columnDef._filterFn : globalFilterFn) !== "fuzzy",
+      query: (filterValue ?? globalFilter ?? "").toString(),
+      text: renderedCellValue?.toString(),
+    });
+    if (chunks?.length > 1 || chunks?.[0]?.match) {
+      renderedCellValue = (
+        <span aria-label={renderedCellValue} role="note">
+          {chunks?.map(({ key, match, text }) => (
+            <Box
+              aria-hidden="true"
+              component="span"
+              key={key}
+              sx={
+                match
+                  ? {
+                      backgroundColor: matchHighlightColor,
+                      borderRadius: "2px",
+                      color: (theme) =>
+                        theme.palette.mode === "dark"
+                          ? theme.palette.common.white
+                          : theme.palette.common.black,
+                      padding: "2px 1px",
+                    }
+                  : undefined
+              }
+            >
+              {text}
+            </Box>
+          )) ?? renderedCellValue}
+        </span>
+      );
+    }
+  }
+
+  if (columnDef.Cell && !isGroupedValue) {
+    renderedCellValue = columnDef.Cell({
+      cell,
+      column,
+      renderedCellValue,
+      row,
+      rowRef,
+      staticColumnIndex,
+      staticRowIndex,
+      table,
+    });
+  }
+
+  return renderedCellValue;
+};
+export default DataTable_TableBodyCellValue;
--- a/src/core/components/DataTable/body/TableBodyRow.js
+++ b/src/core/components/DataTable/body/TableBodyRow.js
@@ -0,0 +1,258 @@
+import {
+  commonCellBeforeAfterStyles,
+  getCommonPinnedCellStyles,
+  parseFromValuesOrFunc,
+} from "@/core/utils/utils";
+import { useTheme } from "@emotion/react";
+import { TableRow, alpha, darken, lighten } from "@mui/material";
+import { getIsRowSelected } from "material-react-table";
+import { memo, useMemo, useRef } from "react";
+import DataTable_TableBodyCell, {
+  Memo_DataTable_TableBodyCell,
+} from "./TableBodyCell";
+import DataTable_TableDetailPanel from "./TableDetailPanel";
+
+const DataTable_TableBodyRow = ({
+  columnVirtualizer,
+  numRows,
+  pinnedRowIds,
+  row,
+  rowVirtualizer,
+  staticRowIndex,
+  table,
+  virtualRow,
+  ...rest
+}) => {
+  const theme = useTheme();
+
+  const {
+    getState,
+    options: {
+      enableRowOrdering,
+      enableRowPinning,
+      enableStickyFooter,
+      enableStickyHeader,
+      layoutMode,
+      memoMode,
+      mrtTheme: {
+        baseBackgroundColor,
+        pinnedRowBackgroundColor,
+        selectedRowBackgroundColor,
+      },
+      muiTableBodyRowProps,
+      renderDetailPanel,
+      rowPinningDisplayMode,
+    },
+    refs: { tableFooterRef, tableHeadRef },
+    setHoveredRow,
+  } = table;
+  const {
+    density,
+    draggingColumn,
+    draggingRow,
+    editingCell,
+    editingRow,
+    hoveredRow,
+    isFullScreen,
+    rowPinning,
+  } = getState();
+
+  const visibleCells = row.getVisibleCells();
+
+  const { virtualColumns, virtualPaddingLeft, virtualPaddingRight } =
+    columnVirtualizer ?? {};
+
+  const isRowSelected = getIsRowSelected({ row, table });
+  const isRowPinned = enableRowPinning && row.getIsPinned();
+  const isDraggingRow = draggingRow?.id === row.id;
+  const isHoveredRow = hoveredRow?.id === row.id;
+
+  const tableRowProps = {
+    ...parseFromValuesOrFunc(muiTableBodyRowProps, {
+      row,
+      staticRowIndex,
+      table,
+    }),
+    ...rest,
+  };
+
+  const [bottomPinnedIndex, topPinnedIndex] = useMemo(() => {
+    if (
+      !enableRowPinning ||
+      !rowPinningDisplayMode?.includes("sticky") ||
+      !pinnedRowIds ||
+      !row.getIsPinned()
+    )
+      return [];
+    return [
+      [...pinnedRowIds].reverse().indexOf(row.id),
+      pinnedRowIds.indexOf(row.id),
+    ];
+  }, [pinnedRowIds, rowPinning]);
+
+  const tableHeadHeight =
+    ((enableStickyHeader || isFullScreen) &&
+      tableHeadRef.current?.clientHeight) ||
+    0;
+  const tableFooterHeight =
+    (enableStickyFooter && tableFooterRef.current?.clientHeight) || 0;
+
+  const sx = parseFromValuesOrFunc(tableRowProps?.sx, theme);
+
+  const defaultRowHeight =
+    density === "compact" ? 37 : density === "comfortable" ? 53 : 69;
+
+  const customRowHeight =
+    // @ts-ignore
+    parseInt(tableRowProps?.style?.height ?? sx?.height, 10) || undefined;
+
+  const rowHeight = customRowHeight || defaultRowHeight;
+
+  const handleDragEnter = (_e) => {
+    if (enableRowOrdering && draggingRow) {
+      setHoveredRow(row);
+    }
+  };
+
+  const handleDragOver = (e) => {
+    e.preventDefault();
+  };
+
+  const rowRef = useRef(null);
+
+  const cellHighlightColor = isRowSelected
+    ? selectedRowBackgroundColor
+    : isRowPinned
+      ? pinnedRowBackgroundColor
+      : undefined;
+
+  const cellHighlightColorHover =
+    tableRowProps?.hover !== false
+      ? isRowSelected
+        ? cellHighlightColor
+        : theme.palette.mode === "dark"
+          ? `${lighten(baseBackgroundColor, 0.2)}`
+          : `${darken(baseBackgroundColor, 0.2)}`
+      : undefined;
+
+  return (
+    <>
+      <TableRow
+        data-index={renderDetailPanel ? staticRowIndex * 2 : staticRowIndex}
+        data-pinned={!!isRowPinned || undefined}
+        data-selected={isRowSelected || undefined}
+        onDragEnter={handleDragEnter}
+        onDragOver={handleDragOver}
+        ref={(node) => {
+          if (node) {
+            rowRef.current = node;
+            rowVirtualizer?.measureElement(node);
+          }
+        }}
+        selected={isRowSelected}
+        {...tableRowProps}
+        style={{
+          transform: virtualRow
+            ? `translateY(${virtualRow.start}px)`
+            : undefined,
+          ...tableRowProps?.style,
+        }}
+        sx={(theme) => ({
+          "&:hover td:after": cellHighlightColorHover
+            ? {
+                backgroundColor: alpha(cellHighlightColorHover, 0.3),
+                ...commonCellBeforeAfterStyles,
+              }
+            : undefined,
+          bottom:
+            !virtualRow && bottomPinnedIndex !== undefined && isRowPinned
+              ? `${bottomPinnedIndex * rowHeight + (enableStickyFooter ? tableFooterHeight - 1 : 0)}px`
+              : undefined,
+          boxSizing: "border-box",
+          display: layoutMode?.startsWith("grid") ? "flex" : undefined,
+          opacity: isRowPinned ? 0.97 : isDraggingRow || isHoveredRow ? 0.5 : 1,
+          position: virtualRow
+            ? "absolute"
+            : rowPinningDisplayMode?.includes("sticky") && isRowPinned
+              ? "sticky"
+              : "relative",
+          td: {
+            ...getCommonPinnedCellStyles({ table, theme }),
+          },
+          "td:after": cellHighlightColor
+            ? {
+                backgroundColor: cellHighlightColor,
+                ...commonCellBeforeAfterStyles,
+              }
+            : undefined,
+          top: virtualRow
+            ? 0
+            : topPinnedIndex !== undefined && isRowPinned
+              ? `${
+                  topPinnedIndex * rowHeight +
+                  (enableStickyHeader || isFullScreen ? tableHeadHeight - 1 : 0)
+                }px`
+              : undefined,
+          transition: virtualRow ? "none" : "all 150ms ease-in-out",
+          width: "100%",
+          zIndex:
+            rowPinningDisplayMode?.includes("sticky") && isRowPinned ? 2 : 0,
+          ...sx,
+        })}
+      >
+        {virtualPaddingLeft ? (
+          <td style={{ display: "flex", width: virtualPaddingLeft }} />
+        ) : null}
+        {(virtualColumns ?? visibleCells).map(
+          (cellOrVirtualCell, staticColumnIndex) => {
+            let cell = cellOrVirtualCell;
+            if (columnVirtualizer) {
+              staticColumnIndex = cellOrVirtualCell.index;
+              cell = visibleCells[staticColumnIndex];
+            }
+            const props = {
+              cell,
+              numRows,
+              rowRef,
+              staticColumnIndex,
+              staticRowIndex,
+              table,
+            };
+            return cell ? (
+              memoMode === "cells" &&
+              cell.column.columnDef.columnDefType === "data" &&
+              !draggingColumn &&
+              !draggingRow &&
+              editingCell?.id !== cell.id &&
+              editingRow?.id !== row.id ? (
+                <Memo_DataTable_TableBodyCell key={cell.id} {...props} />
+              ) : (
+                <DataTable_TableBodyCell key={cell.id} {...props} />
+              )
+            ) : null;
+          },
+        )}
+        {virtualPaddingRight ? (
+          <td style={{ display: "flex", width: virtualPaddingRight }} />
+        ) : null}
+      </TableRow>
+      {renderDetailPanel && !row.getIsGrouped() && (
+        <DataTable_TableDetailPanel
+          parentRowRef={rowRef}
+          row={row}
+          rowVirtualizer={rowVirtualizer}
+          staticRowIndex={staticRowIndex}
+          table={table}
+          virtualRow={virtualRow}
+        />
+      )}
+    </>
+  );
+};
+export default DataTable_TableBodyRow;
+
+export const Memo_DataTable_TableBodyRow = memo(
+  DataTable_TableBodyRow,
+  (prev, next) =>
+    prev.row === next.row && prev.staticRowIndex === next.staticRowIndex,
+);
--- a/src/core/components/DataTable/body/TableDetailPanel.js
+++ b/src/core/components/DataTable/body/TableDetailPanel.js
@@ -0,0 +1,91 @@
+import { parseFromValuesOrFunc } from "@/core/utils/utils";
+import { Collapse, TableCell, TableRow } from "@mui/material";
+
+const DataTable_TableDetailPanel = ({
+  parentRowRef,
+  row,
+  rowVirtualizer,
+  staticRowIndex,
+  table,
+  virtualRow,
+  ...rest
+}) => {
+  const {
+    getState,
+    getVisibleLeafColumns,
+    options: {
+      layoutMode,
+      mrtTheme: { baseBackgroundColor },
+      muiDetailPanelProps,
+      muiTableBodyRowProps,
+      renderDetailPanel,
+    },
+  } = table;
+  const { isLoading } = getState();
+
+  const tableRowProps = parseFromValuesOrFunc(muiTableBodyRowProps, {
+    isDetailPanel: true,
+    row,
+    staticRowIndex,
+    table,
+  });
+
+  const tableCellProps = {
+    ...parseFromValuesOrFunc(muiDetailPanelProps, {
+      row,
+      table,
+    }),
+    ...rest,
+  };
+
+  const DetailPanel = !isLoading && renderDetailPanel?.({ row, table });
+
+  return (
+    <TableRow
+      className="Mui-TableBodyCell-DetailPanel"
+      data-index={renderDetailPanel ? staticRowIndex * 2 + 1 : staticRowIndex}
+      ref={(node) => {
+        if (node) {
+          rowVirtualizer?.measureElement?.(node);
+        }
+      }}
+      {...tableRowProps}
+      sx={(theme) => ({
+        display: layoutMode?.startsWith("grid") ? "flex" : undefined,
+        position: virtualRow ? "absolute" : undefined,
+        top: virtualRow
+          ? `${parentRowRef.current?.getBoundingClientRect()?.height}px`
+          : undefined,
+        transform: virtualRow
+          ? `translateY(${virtualRow?.start}px)`
+          : undefined,
+        width: "100%",
+        ...parseFromValuesOrFunc(tableRowProps?.sx, theme),
+      })}
+    >
+      <TableCell
+        className="Mui-TableBodyCell-DetailPanel"
+        colSpan={getVisibleLeafColumns().length}
+        {...tableCellProps}
+        sx={(theme) => ({
+          backgroundColor: virtualRow ? baseBackgroundColor : undefined,
+          borderBottom: !row.getIsExpanded() ? "none" : undefined,
+          display: layoutMode?.startsWith("grid") ? "flex" : undefined,
+          py: !!DetailPanel && row.getIsExpanded() ? "1rem" : 0,
+          transition: !virtualRow ? "all 150ms ease-in-out" : undefined,
+          width: `100%`,
+          ...parseFromValuesOrFunc(tableCellProps?.sx, theme),
+        })}
+      >
+        {virtualRow ? (
+          row.getIsExpanded() && DetailPanel
+        ) : (
+          <Collapse in={row.getIsExpanded()} mountOnEnter unmountOnExit>
+            {DetailPanel}
+          </Collapse>
+        )}
+      </TableCell>
+    </TableRow>
+  );
+};
+export default DataTable_TableDetailPanel;
--- a/src/core/components/DataTable/buttons/CopyButton.js
+++ b/src/core/components/DataTable/buttons/CopyButton.js
@@ -0,0 +1,74 @@
+import {
+  getCommonTooltipProps,
+  parseFromValuesOrFunc,
+} from "@/core/utils/utils";
+import { Button, Tooltip } from "@mui/material";
+import { useState } from "react";
+
+const DataTable_CopyButton = ({ cell, table, ...rest }) => {
+  const {
+    options: { localization, muiCopyButtonProps },
+  } = table;
+  const { column, row } = cell;
+  const { columnDef } = column;
+
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = (event, text) => {
+    event.stopPropagation();
+    navigator.clipboard.writeText(text);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 4000);
+  };
+
+  const buttonProps = {
+    ...parseFromValuesOrFunc(muiCopyButtonProps, {
+      cell,
+      column,
+      row,
+      table,
+    }),
+    ...parseFromValuesOrFunc(columnDef.muiCopyButtonProps, {
+      cell,
+      column,
+      row,
+      table,
+    }),
+    ...rest,
+  };
+
+  return (
+    <Tooltip
+      {...getCommonTooltipProps("top")}
+      title={
+        buttonProps?.title ??
+        (copied ? localization.copiedToClipboard : localization.clickToCopy)
+      }
+    >
+      <Button
+        onClick={(e) => handleCopy(e, cell.getValue())}
+        size="small"
+        type="button"
+        variant="text"
+        {...buttonProps}
+        sx={(theme) => ({
+          backgroundColor: "transparent",
+          border: "none",
+          color: "inherit",
+          cursor: "copy",
+          fontFamily: "inherit",
+          fontSize: "inherit",
+          letterSpacing: "inherit",
+          m: "-0.25rem",
+          minWidth: "unset",
+          py: 0,
+          textAlign: "inherit",
+          textTransform: "inherit",
+          ...parseFromValuesOrFunc(buttonProps?.sx, theme),
+        })}
+        title={undefined}
+      />
+    </Tooltip>
+  );
+};
+export default DataTable_CopyButton;
--- a/src/core/components/DataTable/buttons/GrabHandleButton.js
+++ b/src/core/components/DataTable/buttons/GrabHandleButton.js
@@ -0,0 +1,52 @@
+import {
+  getCommonTooltipProps,
+  parseFromValuesOrFunc,
+} from "@/core/utils/utils";
+import { IconButton, Tooltip } from "@mui/material";
+
+const DataTable_GrabHandleButton = ({ location, table, ...rest }) => {
+  const {
+    options: {
+      icons: { DragHandleIcon },
+      localization,
+    },
+  } = table;
+
+  return (
+    <Tooltip
+      {...getCommonTooltipProps("top")}
+      title={rest?.title ?? localization.move}
+    >
+      <IconButton
+        aria-label={rest.title ?? localization.move}
+        disableRipple
+        draggable="true"
+        size="small"
+        {...rest}
+        onClick={(e) => {
+          e.stopPropagation();
+          rest?.onClick?.(e);
+        }}
+        sx={(theme) => ({
+          "&:active": {
+            cursor: "grabbing",
+          },
+          "&:hover": {
+            backgroundColor: "transparent",
+            opacity: 1,
+          },
+          cursor: "grab",
+          m: "0 -0.1rem",
+          opacity: location === "row" ? 1 : 0.5,
+          p: "2px",
+          transition: "all 150ms ease-in-out",
+          ...parseFromValuesOrFunc(rest?.sx, theme),
+        })}
+        title={undefined}
+      >
+        <DragHandleIcon />
+      </IconButton>
+    </Tooltip>
+  );
+};
+export default DataTable_GrabHandleButton;
--- a/src/core/components/DataTable/buttons/ToggleFiltersButton.js
+++ b/src/core/components/DataTable/buttons/ToggleFiltersButton.js
@@ -0,0 +1,4 @@
+const DataTable_ToggleFiltersButton = ({ table, ...rest }) => {
+  return <></>;
+};
+export default DataTable_ToggleFiltersButton;
--- a/src/core/components/DataTable/filter/FilterBody.jsx
+++ b/src/core/components/DataTable/filter/FilterBody.jsx
@@ -0,0 +1,133 @@
+"use client";
+
+import FilterBodyControllerWithDependency from "@/core/components/DataTable/filter/FilterBodyControllerWithDependency";
+import FilterHeader from "@/core/components/DataTable/filter/FilterHeader";
+import useDataTable from "@/lib/hooks/useDataTable";
+import { yupResolver } from "@hookform/resolvers/yup";
+import { Box, Button } from "@mui/material";
+import { useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
+import * as Yup from "yup";
+import ScrollBox from "../../ScrollBox";
+import FilterBodyController from "./FilterBodyController";
+
+function FilterBody({ columns, drawerState, setDrawerState }) {
+  const { filterData, setFilterData } = useDataTable();
+  const [validationSchema, setValidationSchema] = useState(Yup.object({}));
+
+  console.log(filterData);
+
+  useEffect(() => {
+    const schema = Yup.object(
+      Object.keys(filterData).reduce((acc, key) => {
+        const initialValue = filterData[key];
+        if (initialValue.filterMode === "between") {
+          acc[key] = Yup.object().shape({
+            value: Yup.array()
+              .of(Yup.string().nullable())
+              .test({
+                test(value, ctx) {
+                  const [start, end] = value || ["", ""];
+                  if (
+                    initialValue.datatype === "numeric" &&
+                    parseInt(end, 10) <= parseInt(start, 10)
+                  ) {
+                    return ctx.createError({
+                      message: `مقدار وارده باید بیشتر از (${start}) باشد`,
+                    });
+                  } else if ((start && !end) || (!start && end)) {
+                    return ctx.createError({
+                      message: "این بخش را تکمیل نمایید",
+                    });
+                  }
+                  return true;
+                },
+              }),
+          });
+        }
+        return acc;
+      }, {}),
+    );
+
+    setValidationSchema(schema);
+  }, [filterData]);
+
+  const {
+    handleSubmit,
+    control,
+    reset,
+    formState: { errors, isDirty, isValid },
+  } = useForm({
+    defaultValues: filterData,
+    resolver: yupResolver(validationSchema),
+    mode: "all",
+  });
+
+  const onSubmit = (data) => {
+    setDrawerState(false);
+    setFilterData(data);
+  };
+
+  return (
+    <>
+      <FilterHeader setDrawerState={setDrawerState} />
+      {Object.keys(filterData).length > 0 && (
+        <ScrollBox>
+          <form onSubmit={handleSubmit(onSubmit)}>
+            <Box sx={{ px: 2, py: 3 }}>
+              {columns.map((column) =>
+                column.enableColumnFilter ? (
+                  column.dependencyId ? (
+                    <FilterBodyControllerWithDependency
+                      key={column.id}
+                      column={column}
+                      control={control}
+                      errors={errors}
+                      reset={reset}
+                    />
+                  ) : (
+                    <FilterBodyController
+                      key={column.id}
+                      column={column}
+                      control={control}
+                      errors={errors}
+                      reset={reset}
+                    />
+                  )
+                ) : null,
+              )}
+            </Box>
+            <Box
+              sx={{
+                display: "flex",
+                justifyContent: "center",
+                alignItems: "center",
+                pb: 2,
+              }}
+            >
+              <Button
+                type="submit"
+                variant="contained"
+                size="large"
+                disabled={!isDirty || !isValid}
+                sx={{
+                  px: 8,
+                  boxShadow:
+                    "rgba(0, 0, 0, 0.23) 0px 6px 6px, rgba(0, 0, 0, 0.19) 10px 0px 20px",
+                  backgroundColor: "primary2",
+                  ":hover": {
+                    backgroundColor: "primary2",
+                  },
+                }}
+              >
+                اعمال فیلتر
+              </Button>
+            </Box>
+          </form>
+        </ScrollBox>
+      )}
+    </>
+  );
+}
+
+export default FilterBody;
--- a/src/core/components/DataTable/filter/FilterBodyController.jsx
+++ b/src/core/components/DataTable/filter/FilterBodyController.jsx
@@ -0,0 +1,25 @@
+import { Controller, useWatch } from "react-hook-form";
+import FilterBodyField from "./FilterBodyField";
+
+const FilterBodyController = ({ column, control, reset, errors }) => {
+  return (
+    <Controller
+      name={`${column.id}`}
+      control={control}
+      render={({ field: { value, name, onBlur, onChange } }) => {
+        return (
+          <FilterBodyField
+            column={column}
+            filterParameters={value}
+            handleChange={onChange}
+            handleBlur={onBlur}
+            dependencyFieldValue={null}
+            resetForm={() => reset()}
+            errors={errors}
+          />
+        );
+      }}
+    />
+  );
+};
+export default FilterBodyController;
--- a/src/core/components/DataTable/filter/FilterBodyControllerWithDependency.jsx
+++ b/src/core/components/DataTable/filter/FilterBodyControllerWithDependency.jsx
@@ -0,0 +1,32 @@
+import { Controller, useWatch } from "react-hook-form";
+import FilterBodyField from "./FilterBodyField";
+
+const FilterBodyControllerWithDependency = ({
+  column,
+  control,
+  reset,
+  errors,
+}) => {
+  const dependencyField = useWatch({ control, name: column.dependencyId });
+
+  return (
+    <Controller
+      name={`${column.id}`}
+      control={control}
+      render={({ field: { value, name, onBlur, onChange } }) => {
+        return (
+          <FilterBodyField
+            column={column}
+            filterParameters={value}
+            handleChange={onChange}
+            handleBlur={onBlur}
+            dependencyFieldValue={dependencyField}
+            resetForm={() => reset()}
+            errors={errors}
+          />
+        );
+      }}
+    />
+  );
+};
+export default FilterBodyControllerWithDependency;
--- a/src/core/components/DataTable/filter/FilterBodyField.jsx
+++ b/src/core/components/DataTable/filter/FilterBodyField.jsx
@@ -0,0 +1,105 @@
+import FilterOptionList from "@/core/components/DataTable/filter/FilterOptionList";
+import CustomDatePicker from "@/core/components/DataTable/filter/fieldsType/CustomDate/CustomDatePicker";
+import CustomDatePickerRange from "@/core/components/DataTable/filter/fieldsType/CustomDate/CustomDatePickerRange";
+import CustomSelect from "@/core/components/DataTable/filter/fieldsType/CustomSelect";
+import CustomSelectMultiple from "@/core/components/DataTable/filter/fieldsType/CustomSelectMultiple";
+import CustomTextField from "@/core/components/DataTable/filter/fieldsType/CustomTextField";
+import CustomTextFieldRange from "@/core/components/DataTable/filter/fieldsType/CustomTextFieldRange";
+import { useState } from "react";
+
+const columnFilterModeOptionFa = {
+  equals: "برابر",
+  notEquals: "نابرابر",
+  contains: "شامل",
+  lessThan: "کوچکتر",
+  greaterThan: "بزرگتر",
+  fuzzy: "فازی",
+  between: "مابین",
+};
+
+function FilterBodyField({
+  column,
+  filterParameters,
+  handleChange,
+  handleBlur,
+  dependencyFieldValue,
+  setFieldValue,
+  resetForm,
+  errors,
+}) {
+  const [anchorEl, setAnchorEl] = useState(null);
+  const defaultFilterTranslation =
+    columnFilterModeOptionFa[filterParameters.filterMode] ||
+    filterParameters.filterMode;
+
+  const handleOpenFilterBox = (event) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const renderField = () => {
+    const commonProps = {
+      column,
+      filterParameters,
+      defaultFilterTranslation,
+      handleOpenFilterBox,
+      dependencyFieldValue,
+      setFieldValue,
+      handleChange,
+      handleBlur,
+      errors,
+    };
+
+    switch (filterParameters.datatype) {
+      case "numeric":
+        if (filterParameters.filterMode === "between") {
+          return <CustomTextFieldRange {...commonProps} />;
+        }
+        if (filterParameters.filterMode === "equals") {
+          return column.ColumnSelectComponent ? (
+            <column.ColumnSelectComponent {...commonProps} />
+          ) : (
+            <CustomSelect {...commonProps} />
+          );
+        }
+        break;
+      case "date":
+        if (filterParameters.filterMode === "equals") {
+          return <CustomDatePicker {...commonProps} />;
+        }
+        if (filterParameters.filterMode === "between") {
+          return <CustomDatePickerRange {...commonProps} />;
+        }
+        break;
+
+      case "array":
+        if (filterParameters.filterMode === "equals") {
+          return <CustomSelectMultiple {...commonProps} />;
+        }
+        break;
+
+      default:
+        return <CustomTextField {...commonProps} />;
+    }
+  };
+
+  return (
+    <>
+      {renderField()}
+      {Array.isArray(column.columnFilterModeOptions) && (
+        <FilterOptionList
+          column={column}
+          anchorEl={anchorEl}
+          setAnchorEl={setAnchorEl}
+          filterParameters={filterParameters}
+          filterType={filterParameters.filterMode}
+          handleChange={handleChange}
+          resetForm={resetForm}
+          filterOption={column.columnFilterModeOptions}
+          columnFilterModeOptionFa={columnFilterModeOptionFa}
+        />
+      )}
+    </>
+  );
+}
+
+export default FilterBodyField;
--- a/src/core/components/DataTable/filter/FilterButton.jsx
+++ b/src/core/components/DataTable/filter/FilterButton.jsx
@@ -0,0 +1,39 @@
+"use client";
+import FilterAltIcon from "@mui/icons-material/FilterAlt";
+import { IconButton, Tooltip, Badge } from "@mui/material";
+import useDataTable from "@/lib/hooks/useDataTable";
+
+function FilterButton({ drawerState, setDrawerState }) {
+  const { filterData } = useDataTable();
+  const isValueEmpty = (value) => {
+    if (Array.isArray(value)) {
+      return value.length === 0 || value.every((v) => v === "");
+    }
+    return value === "" || value === null || value === undefined;
+  };
+  const filteredFilterData = Object.values(filterData).filter(
+    (filter) => !isValueEmpty(filter.value),
+  );
+  return (
+    <Tooltip title="فیلتر">
+      <IconButton
+        onClick={() => {
+          setDrawerState(!drawerState);
+        }}
+        aria-label="filter table"
+      >
+        <Badge
+          badgeContent={filteredFilterData.length}
+          color="primary"
+          anchorOrigin={{
+            vertical: "top",
+            horizontal: "left",
+          }}
+        >
+          <FilterAltIcon />
+        </Badge>
+      </IconButton>
+    </Tooltip>
+  );
+}
+export default FilterButton;
--- a/src/core/components/DataTable/filter/FilterCustom.jsx
+++ b/src/core/components/DataTable/filter/FilterCustom.jsx
@@ -0,0 +1,38 @@
+import { useCallback, useState } from "react";
+import FilterButton from "./FilterButton";
+import { Box, Drawer } from "@mui/material";
+import FilterDrawer from "../../FilterDrawer";
+
+const FilterCustom = ({ filterData, setFilterData }) => {
+  const [open, setOpen] = useState(false);
+
+  const closeDrawer = useCallback(() => setOpen(false), []);
+
+  return (
+    <>
+      <FilterButton drawerState={open} setDrawerState={setOpen} />
+      <Drawer
+        open={open}
+        onClose={() => setOpen(false)}
+        sx={{
+          overflowY: "hidden",
+          display: "flex",
+          flexDirection: "column",
+          height: "100%",
+          zIndex: "1300",
+        }}
+      >
+        <Box sx={{ width: { xs: 300, sm: 450 } }}>
+          {open && (
+            <FilterDrawer
+              defaultValues={filterData}
+              setFilterData={setFilterData}
+              closeDrawer={closeDrawer}
+            />
+          )}
+        </Box>
+      </Drawer>
+    </>
+  );
+};
+export default FilterCustom;
--- a/src/core/components/DataTable/filter/FilterHeader.jsx
+++ b/src/core/components/DataTable/filter/FilterHeader.jsx
@@ -0,0 +1,35 @@
+"use client";
+
+import CancelIcon from "@mui/icons-material/Cancel";
+import FilterAltIcon from "@mui/icons-material/FilterAlt";
+import { Box, IconButton, Typography } from "@mui/material";
+
+function FilterHeader({ setDrawerState }) {
+  return (
+    <Box
+      sx={{
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        px: 2,
+        py: 1,
+        backgroundColor: (theme) => theme.palette.primary.main,
+        boxShadow:
+          "rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px",
+        maxWidth: "450px",
+      }}
+    >
+      <Box sx={{ display: "flex", alignItems: "center" }}>
+        <FilterAltIcon sx={{ color: "#fff", mr: 1 }} />
+        <Typography variant="h6" sx={{ color: "#fff" }}>
+          فیلتر
+        </Typography>
+      </Box>
+      <IconButton sx={{ color: "#fff" }} onClick={() => setDrawerState(false)}>
+        <CancelIcon sx={{ fontSize: "1em" }} />
+      </IconButton>
+    </Box>
+  );
+}
+
+export default FilterHeader;
--- a/src/core/components/DataTable/filter/FilterOptionList.jsx
+++ b/src/core/components/DataTable/filter/FilterOptionList.jsx
@@ -0,0 +1,58 @@
+"use client";
+
+import { ListItem, Menu } from "@mui/material";
+import { useState } from "react";
+
+function FilterOptionList({
+  filterType,
+  filterOption,
+  filterParameters,
+  anchorEl,
+  columnFilterModeOptionFa,
+  setAnchorEl,
+  handleChange,
+}) {
+  const [selectedFilter, setSelectedFilter] = useState(filterType);
+
+  const handleChangeItem = (event, index) => {
+    handleChange({
+      ...filterParameters,
+      value: filterOption[index] === "between" ? ["", ""] : "",
+      filterMode: filterOption[index],
+    });
+    setSelectedFilter(filterOption[index]);
+    setAnchorEl(null);
+  };
+
+  const handleCloseFilterBox = () => {
+    setAnchorEl(null);
+  };
+
+  return (
+    <Menu
+      id="simple-menu"
+      anchorEl={anchorEl}
+      keepMounted
+      open={Boolean(anchorEl)}
+      onClose={handleCloseFilterBox}
+    >
+      {filterOption.map((option, index) => (
+        <ListItem
+          key={index}
+          onClick={(event) => handleChangeItem(event, index)}
+          selected={option === selectedFilter}
+          sx={{
+            cursor: "pointer",
+            width: "100px",
+            display: "flex",
+            justifyContent: "center",
+          }}
+        >
+          {columnFilterModeOptionFa[option]}
+        </ListItem>
+      ))}
+    </Menu>
+  );
+}
+
+export default FilterOptionList;
--- a/src/core/components/DataTable/filter/fieldsType/CustomDate/CustomDatePicker.jsx
+++ b/src/core/components/DataTable/filter/fieldsType/CustomDate/CustomDatePicker.jsx
@@ -0,0 +1,31 @@
+import React from "react";
+import MuiDatePicker from "@/core/components/DataTable/filter/fieldsType/CustomDate/MuiDatePicker";
+import { Typography } from "@mui/material";
+
+function CustomDatePicker({
+  column,
+  filterParameters,
+  defaultFilterTranslation,
+  handleChange,
+}) {
+  return (
+    <MuiDatePicker
+      name={`${column.id}.value`}
+      value={filterParameters.value}
+      setFieldValue={(name, formattedDate) => {
+        handleChange({ ...filterParameters, value: formattedDate });
+      }}
+      placeholder={column.header}
+      helperText={
+        <Typography
+          variant="button"
+          sx={{ color: (theme) => theme.palette.primary.main }}
+        >
+          نوع فیلتر: {defaultFilterTranslation} (تاریخ)
+        </Typography>
+      }
+    />
+  );
+}
+
+export default CustomDatePicker;
--- a/src/core/components/DataTable/filter/fieldsType/CustomDate/CustomDatePickerRange.jsx
+++ b/src/core/components/DataTable/filter/fieldsType/CustomDate/CustomDatePickerRange.jsx
@@ -0,0 +1,60 @@
+"use client";
+
+import React from "react";
+import { Box, Typography } from "@mui/material";
+import MuiDatePicker from "@/core/components/DataTable/filter/fieldsType/CustomDate/MuiDatePicker";
+
+function CustomDatePickerRange({
+  column,
+  filterParameters,
+  defaultFilterTranslation,
+  handleChange,
+  errors,
+}) {
+  return (
+    <Box sx={{ display: "flex", gap: 1 }}>
+      <MuiDatePicker
+        label={column.header}
+        name={`${column.id}.value[0]`}
+        value={filterParameters.value[0]}
+        setFieldValue={(name, formattedDate) => {
+          handleChange({
+            ...filterParameters,
+            value: [formattedDate, filterParameters.value[1]],
+          });
+        }}
+        maxDate={filterParameters.value[1]}
+        placeholder={`از تاریخ`}
+        helperText={
+          <Typography
+            variant="button"
+            sx={{ color: (theme) => theme.palette.primary.main }}
+          >
+            نوع فیلتر: {defaultFilterTranslation} (تاریخ)
+          </Typography>
+        }
+      />
+      <MuiDatePicker
+        label={column.header}
+        name={`${column.id}.value[1]`}
+        value={filterParameters.value[1]}
+        setFieldValue={(name, formattedDate) => {
+          handleChange({
+            ...filterParameters,
+            value: [filterParameters.value[0], formattedDate],
+          });
+        }}
+        minDate={filterParameters.value[0]}
+        placeholder={`تا تاریخ`}
+        helperText={
+          errors?.[`${column.id}`]?.value
+            ? errors?.[`${column.id}`]?.value.message
+            : null
+        }
+        error={Boolean(errors?.[`${column.id}`]?.value)}
+      />
+    </Box>
+  );
+}
+
+export default CustomDatePickerRange;
--- a/src/core/components/DataTable/filter/fieldsType/CustomDate/MuiDatePicker.jsx
+++ b/src/core/components/DataTable/filter/fieldsType/CustomDate/MuiDatePicker.jsx
@@ -0,0 +1,86 @@
+import React from "react";
+import { LocalizationProvider, MobileDatePicker } from "@mui/x-date-pickers";
+import { AdapterDateFnsJalali } from "@mui/x-date-pickers/AdapterDateFnsJalali";
+import { faIR } from "@mui/x-date-pickers/locales";
+import { Box, FormHelperText, IconButton, InputAdornment } from "@mui/material";
+import ClearIcon from "@mui/icons-material/Clear";
+import moment from "jalali-moment";
+
+function MuiDatePicker({
+  label,
+  value,
+  setFieldValue,
+  name,
+  minDate,
+  maxDate,
+  helperText,
+  placeholder,
+  error,
+}) {
+  return (
+    <Box sx={{ display: "flex", flexDirection: "column", my: 1 }}>
+      <LocalizationProvider
+        dateAdapter={AdapterDateFnsJalali}
+        localeText={
+          faIR.components.MuiLocalizationProvider.defaultProps.localeText
+        }
+      >
+        <MobileDatePicker
+          value={value ? new Date(value) : null}
+          sx={{ width: "100%" }}
+          id={name}
+          label={label}
+          name={name}
+          closeOnSelect={true}
+          aria-describedby="component-helper-text"
+          onChange={(value) => {
+            const date = new Date(value);
+            const formattedDate = moment(date)
+              .locale("en")
+              .format("YYYY-MM-DD");
+            setFieldValue(name, formattedDate);
+          }}
+          minDate={minDate ? new Date(minDate) : null}
+          maxDate={maxDate ? new Date(maxDate) : null}
+          slotProps={{
+            textField: {
+              size: "small",
+              error: error,
+              placeholder: placeholder,
+              InputProps: {
+                endAdornment: (
+                  <InputAdornment position="end">
+                    <IconButton
+                      size="small"
+                      onClick={(event) => {
+                        event.stopPropagation();
+                        setFieldValue(name, "");
+                      }}
+                      sx={{
+                        color: "#bfbfbf",
+                        "&:hover": {
+                          backgroundColor: "rgba(189, 189, 189, 0.1)",
+                          color: "#363434",
+                        },
+                      }}
+                    >
+                      <ClearIcon />
+                    </IconButton>
+                  </InputAdornment>
+                ),
+              },
+              InputLabelProps: {
+                shrink: true,
+              },
+            },
+          }}
+        />
+        {/* <FormHelperText id="component-helper-text" variant="caption" sx={{ ml: 2, color: error ? "#d32f2f" : "unset", fontWeight: 'bold' }}>
+                    {helperText ? helperText : ""}
+                </FormHelperText> */}
+      </LocalizationProvider>
+    </Box>
+  );
+}
+
+export default MuiDatePicker;
--- a/src/core/components/DataTable/filter/fieldsType/CustomSelect.jsx
+++ b/src/core/components/DataTable/filter/fieldsType/CustomSelect.jsx
@@ -0,0 +1,38 @@
+"use client";
+
+import {
+  FormControl,
+  InputLabel,
+  MenuItem,
+  OutlinedInput,
+  Select,
+} from "@mui/material";
+function CustomSelect({ column, filterParameters, handleChange }) {
+  return (
+    <FormControl fullWidth sx={{ marginY: 1 }} size="small">
+      <InputLabel id={`label${column.id}`} shrink>
+        {column.header}
+      </InputLabel>
+      <Select
+        labelId={`label${column.id}`}
+        id={column.id}
+        name={`${column.id}.value`}
+        value={filterParameters.value}
+        input={<OutlinedInput label={column.header} />}
+        size="small"
+        onChange={(e) =>
+          handleChange({ ...filterParameters, value: e.target.value })
+        }
+        displayEmpty
+      >
+        {column.columnSelectOption().map((option) => (
+          <MenuItem key={option.value} value={option.value}>
+            {option.label}
+          </MenuItem>
+        ))}
+      </Select>
+    </FormControl>
+  );
+}
+
+export default CustomSelect;
--- a/src/core/components/DataTable/filter/fieldsType/CustomSelectByDependency.jsx
+++ b/src/core/components/DataTable/filter/fieldsType/CustomSelectByDependency.jsx
@@ -0,0 +1,49 @@
+"use client";
+
+import {
+  FormControl,
+  FormHelperText,
+  InputLabel,
+  MenuItem,
+  OutlinedInput,
+  Select,
+  Typography,
+} from "@mui/material";
+import { useCallback, useEffect } from "react";
+
+function CustomSelectByDependency({
+  column,
+  filterParameters,
+  value,
+  defaultFilterTranslation,
+  handleChange,
+  columnSelectOption,
+}) {
+  return (
+    <FormControl fullWidth sx={{ my: 1 }} size="small">
+      <InputLabel id={`label${column.id}`} shrink>
+        {column.header}
+      </InputLabel>
+      <Select
+        labelId={`label${column.id}`}
+        id={column.id}
+        name={`${column.id}.value`}
+        value={value}
+        size="small"
+        input={<OutlinedInput label={column.header} />}
+        onChange={(e) =>
+          handleChange({ ...filterParameters, value: e.target.value })
+        }
+        displayEmpty
+      >
+        {columnSelectOption.map((option) => (
+          <MenuItem key={option.value} value={option.value}>
+            {option.label}
+          </MenuItem>
+        ))}
+      </Select>
+    </FormControl>
+  );
+}
+
+export default CustomSelectByDependency;
--- a/src/core/components/DataTable/filter/fieldsType/CustomSelectMultiple.jsx
+++ b/src/core/components/DataTable/filter/fieldsType/CustomSelectMultiple.jsx
@@ -0,0 +1,62 @@
+"use client";
+
+import {
+  Box,
+  Chip,
+  FormControl,
+  FormHelperText,
+  InputLabel,
+  MenuItem,
+  OutlinedInput,
+  Select,
+  Typography,
+} from "@mui/material";
+
+function CustomSelectMultiple({
+  column,
+  filterParameters,
+  defaultFilterTranslation,
+  handleChange,
+}) {
+  const columnSelectOption = column.columnSelectOption;
+
+  const getLabelForValue = (value) => {
+    const option = columnSelectOption.find((opt) => opt.value === value);
+    return option ? option.label : value;
+  };
+
+  return (
+    <FormControl fullWidth sx={{ marginY: 1 }} size="small">
+      <InputLabel htmlFor="uncontrolled-native" id={`label${column.id}`}>
+        {column.header}
+      </InputLabel>
+      <Select
+        labelId={`label${column.id}`}
+        id={column.id}
+        value={filterParameters.value}
+        multiple
+        size="small"
+        onChange={(e) =>
+          handleChange({ ...filterParameters, value: e.target.value })
+        }
+        renderValue={(selected) => (
+          <Box sx={{ display: "flex", flexWrap: "wrap", gap: 0.5 }}>
+            {selected.map((value) => (
+              <Chip key={value} label={getLabelForValue(value)} />
+            ))}
+          </Box>
+        )}
+        input={<OutlinedInput label={column.header} />}
+        InputLabelProps={{ shrink: true }}
+      >
+        {columnSelectOption.map((option) => (
+          <MenuItem key={option.value} value={option.value}>
+            {option.label}
+          </MenuItem>
+        ))}
+      </Select>
+    </FormControl>
+  );
+}
+
+export default CustomSelectMultiple;
--- a/src/core/components/DataTable/filter/fieldsType/CustomTextField.jsx
+++ b/src/core/components/DataTable/filter/fieldsType/CustomTextField.jsx
@@ -0,0 +1,42 @@
+import { InputAdornment, TextField, Typography } from "@mui/material";
+import FilterListIcon from "@mui/icons-material/FilterList";
+
+function CustomTextField({
+  column,
+  defaultFilterTranslation,
+  filterParameters,
+  handleOpenFilterBox,
+  handleBlur,
+  handleChange,
+}) {
+  return (
+    <TextField
+      id={column.id}
+      name={column.id}
+      label={column.header}
+      value={filterParameters.value}
+      onChange={(e) =>
+        handleChange({ ...filterParameters, value: e.target.value })
+      }
+      onBlur={handleBlur}
+      fullWidth
+      variant="outlined"
+      size="small"
+      sx={{ my: 1 }}
+      InputProps={{
+        endAdornment: (
+          <InputAdornment
+            position="end"
+            sx={{ cursor: "pointer" }}
+            onClick={handleOpenFilterBox}
+          >
+            <FilterListIcon />
+          </InputAdornment>
+        ),
+      }}
+      InputLabelProps={{ shrink: true }}
+    />
+  );
+}
+
+export default CustomTextField;
--- a/src/core/components/DataTable/filter/fieldsType/CustomTextFieldRange.jsx
+++ b/src/core/components/DataTable/filter/fieldsType/CustomTextFieldRange.jsx
@@ -0,0 +1,85 @@
+import { Box, InputAdornment, TextField, Typography } from "@mui/material";
+import FilterListIcon from "@mui/icons-material/FilterList";
+
+function CustomTextFieldRange({
+  column,
+  defaultFilterTranslation,
+  handleOpenFilterBox,
+  handleChange,
+  filterParameters,
+  handleBlur,
+  errors,
+}) {
+  return (
+    <Box sx={{ display: "flex" }}>
+      <TextField
+        id={`${column.id}.value[0]`}
+        name={`${column.id}.value[0]`}
+        onChange={(e) =>
+          handleChange({
+            ...filterParameters,
+            value: [e.target.value, filterParameters.value[1]],
+          })
+        }
+        onBlur={handleBlur}
+        label={<Typography>از {column.header}</Typography>}
+        value={filterParameters.value[0]}
+        fullWidth
+        error={
+          touched?.[`${column.id}`]?.value &&
+          Boolean(errors?.[`${column.id}`]?.value)
+        }
+        helperText={
+          <Typography
+            variant="caption"
+            sx={{
+              color: (theme) => theme.palette.primary.main,
+              fontWeight: "bold",
+            }}
+          >
+            نوع فیلتر: {defaultFilterTranslation}
+          </Typography>
+        }
+        variant="outlined"
+        size="small"
+        sx={{ my: 1, marginRight: 1 }}
+      />
+      <TextField
+        id={`${column.id}.value[1]`}
+        name={`${column.id}.value[1]`}
+        onChange={(e) =>
+          handleChange({
+            ...filterParameters,
+            value: [filterParameters.value[0], e.target.value],
+          })
+        }
+        onBlur={handleBlur}
+        error={Boolean(errors?.[`${column.id}`]?.value)}
+        helperText={
+          errors?.[`${column.id}`]?.value
+            ? errors?.[`${column.id}`]?.value.message
+            : null
+        }
+        label={<Typography>تا {column.header}</Typography>}
+        value={filterParameters.value[1]}
+        fullWidth
+        variant="outlined"
+        size="small"
+        sx={{ my: 1 }}
+        InputProps={{
+          endAdornment: (
+            <InputAdornment
+              position="end"
+              sx={{ cursor: "pointer" }}
+              onClick={handleOpenFilterBox}
+            >
+              <FilterListIcon />
+            </InputAdornment>
+          ),
+        }}
+      />
+    </Box>
+  );
+}
+
+export default CustomTextFieldRange;
--- a/src/core/components/DataTable/filter/index.jsx
+++ b/src/core/components/DataTable/filter/index.jsx
@@ -0,0 +1,41 @@
+"use client";
+import { useState } from "react";
+import FilterButton from "@/core/components/DataTable/filter/FilterButton";
+import FilterBody from "@/core/components/DataTable/filter/FilterBody";
+import { Box, Drawer } from "@mui/material";
+
+function FilterColumn({ columns, user_id, page_name, table_name }) {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      <FilterButton drawerState={open} setDrawerState={setOpen} />
+      <Drawer
+        open={open}
+        onClose={() => setOpen(false)}
+        sx={{
+          overflowY: "hidden",
+          display: "flex",
+          flexDirection: "column",
+          height: "100%",
+          zIndex: "1300",
+        }}
+      >
+        <Box sx={{ width: { xs: 300, sm: 450 } }}>
+          {open && (
+            <FilterBody
+              columns={columns}
+              drawerState={open}
+              setDrawerState={setOpen}
+              user_id={user_id}
+              page_name={page_name}
+              table_name={table_name}
+            />
+          )}
+        </Box>
+      </Drawer>
+    </>
+  );
+}
+
+export default FilterColumn;
--- a/src/core/components/DataTable/head/TableHead.js
+++ b/src/core/components/DataTable/head/TableHead.js
@@ -0,0 +1,56 @@
+import { parseFromValuesOrFunc } from "@/core/utils/utils";
+import { TableHead } from "@mui/material";
+import DataTable_TableHeadRow from "./TableHeadRow";
+
+const DataTable_TableHead = ({ columnVirtualizer, table, ...rest }) => {
+  const {
+    getState,
+    options: {
+      enableStickyHeader,
+      layoutMode,
+      muiTableHeadProps,
+      positionToolbarAlertBanner,
+    },
+    refs: { tableHeadRef },
+  } = table;
+  const { isFullScreen, showAlertBanner } = getState();
+
+  const tableHeadProps = {
+    ...parseFromValuesOrFunc(muiTableHeadProps, { table }),
+    ...rest,
+  };
+
+  const stickyHeader = enableStickyHeader || isFullScreen;
+
+  return (
+    <TableHead
+      {...tableHeadProps}
+      ref={(ref) => {
+        tableHeadRef.current = ref;
+        if (tableHeadProps?.ref) {
+          // @ts-ignore
+          tableHeadProps.ref.current = ref;
+        }
+      }}
+      sx={(theme) => ({
+        display: layoutMode?.startsWith("grid") ? "grid" : undefined,
+        opacity: 0.97,
+        position: stickyHeader ? "sticky" : "relative",
+        top: stickyHeader && layoutMode?.startsWith("grid") ? 0 : undefined,
+        zIndex: stickyHeader ? 2 : undefined,
+        ...parseFromValuesOrFunc(tableHeadProps?.sx, theme),
+      })}
+    >
+      {table.getHeaderGroups().map((headerGroup, index) => (
+        <DataTable_TableHeadRow
+          columnVirtualizer={columnVirtualizer}
+          headerGroup={headerGroup}
+          key={headerGroup.id}
+          table={table}
+          index={index}
+        />
+      ))}
+    </TableHead>
+  );
+};
+export default DataTable_TableHead;
--- a/src/core/components/DataTable/head/TableHeadCell.js
+++ b/src/core/components/DataTable/head/TableHeadCell.js
@@ -0,0 +1,290 @@
+import {
+  getCommonMRTCellStyles,
+  parseFromValuesOrFunc,
+} from "@/core/utils/utils";
+import { useTheme } from "@emotion/react";
+import { Box, TableCell } from "@mui/material";
+import { MRT_TableHeadCellSortLabel } from "material-react-table";
+import { useMemo } from "react";
+
+const DataTable_TableHeadCell = ({
+  columnVirtualizer,
+  header,
+  staticColumnIndex,
+  backgroundColor,
+  table,
+  ...rest
+}) => {
+  const theme = useTheme();
+  const {
+    getState,
+    options: {
+      columnResizeDirection,
+      columnResizeMode,
+      enableColumnActions,
+      enableColumnDragging,
+      enableColumnOrdering,
+      enableColumnPinning,
+      enableGrouping,
+      enableMultiSort,
+      layoutMode,
+      mrtTheme: { draggingBorderColor },
+      muiTableHeadCellProps,
+    },
+    refs: { tableHeadCellRefs },
+    setHoveredColumn,
+  } = table;
+  const {
+    columnSizingInfo,
+    density,
+    draggingColumn,
+    grouping,
+    hoveredColumn,
+    showColumnFilters,
+  } = getState();
+  const { column } = header;
+  const { columnDef } = column;
+  const { columnDefType } = columnDef;
+
+  const tableCellProps = {
+    ...parseFromValuesOrFunc(muiTableHeadCellProps, { column, table }),
+    ...parseFromValuesOrFunc(columnDef.muiTableHeadCellProps, {
+      column,
+      table,
+    }),
+    ...rest,
+  };
+
+  const isColumnPinned =
+    enableColumnPinning &&
+    columnDef.columnDefType !== "group" &&
+    column.getIsPinned();
+
+  const showColumnActions =
+    (enableColumnActions || columnDef.enableColumnActions) &&
+    columnDef.enableColumnActions !== false;
+
+  const showDragHandle =
+    enableColumnDragging !== false &&
+    columnDef.enableColumnDragging !== false &&
+    (enableColumnDragging ||
+      (enableColumnOrdering && columnDef.enableColumnOrdering !== false) ||
+      (enableGrouping &&
+        columnDef.enableGrouping !== false &&
+        !grouping.includes(column.id)));
+
+  const headerPL = useMemo(() => {
+    let pl = 0;
+    if (column.getCanSort()) pl += 1;
+    if (showColumnActions) pl += 1.75;
+    if (showDragHandle) pl += 1.5;
+    return pl;
+  }, [showColumnActions, showDragHandle]);
+
+  const draggingBorders = useMemo(() => {
+    const showResizeBorder =
+      columnSizingInfo.isResizingColumn === column.id &&
+      columnResizeMode === "onChange" &&
+      !header.subHeaders.length;
+
+    const borderStyle = showResizeBorder
+      ? `2px solid ${draggingBorderColor} !important`
+      : draggingColumn?.id === column.id
+        ? `1px dashed ${theme.palette.grey[500]}`
+        : hoveredColumn?.id === column.id
+          ? `2px dashed ${draggingBorderColor}`
+          : undefined;
+
+    if (showResizeBorder) {
+      return columnResizeDirection === "ltr"
+        ? { borderRight: borderStyle }
+        : { borderLeft: borderStyle };
+    }
+    const draggingBorders = borderStyle
+      ? {
+          borderLeft: borderStyle,
+          borderRight: borderStyle,
+          borderTop: borderStyle,
+        }
+      : undefined;
+
+    return draggingBorders;
+  }, [draggingColumn, hoveredColumn, columnSizingInfo.isResizingColumn]);
+
+  const handleDragEnter = (_e) => {
+    if (enableGrouping && hoveredColumn?.id === "drop-zone") {
+      setHoveredColumn(null);
+    }
+    if (enableColumnOrdering && draggingColumn && columnDefType !== "group") {
+      setHoveredColumn(
+        columnDef.enableColumnOrdering !== false ? column : null,
+      );
+    }
+  };
+
+  const handleDragOver = (e) => {
+    if (columnDef.enableColumnOrdering !== false) {
+      e.preventDefault();
+    }
+  };
+
+  const HeaderElement =
+    parseFromValuesOrFunc(columnDef.Header, {
+      column,
+      header,
+      table,
+    }) ?? columnDef.header;
+
+  const columnRelativeDepth = header.depth - column.depth;
+
+  if (columnRelativeDepth > 1) {
+    return null;
+  }
+
+  let rowSpan = 1;
+  if (header.isPlaceholder) {
+    const leafs = header.getLeafHeaders();
+    rowSpan = leafs[leafs.length - 1].depth - header.depth;
+  }
+
+  return (
+    <TableCell
+      align={
+        columnDefType === "group"
+          ? "center"
+          : theme.direction === "rtl"
+            ? "right"
+            : "left"
+      }
+      colSpan={header.colSpan}
+      rowSpan={rowSpan}
+      data-index={staticColumnIndex}
+      data-pinned={!!isColumnPinned || undefined}
+      onDragEnter={handleDragEnter}
+      onDragOver={handleDragOver}
+      ref={(node) => {
+        if (node) {
+          tableHeadCellRefs.current[column.id] = node;
+          if (columnDefType !== "group") {
+            columnVirtualizer?.measureElement?.(node);
+          }
+        }
+      }}
+      {...tableCellProps}
+      sx={(theme) => ({
+        "& :hover": {
+          ".MuiButtonBase-root": {
+            opacity: 1,
+          },
+        },
+        flexDirection: layoutMode?.startsWith("grid") ? "column" : undefined,
+        fontWeight: "bold",
+        overflow: "visible",
+        p:
+          density === "compact"
+            ? "0.5rem"
+            : density === "comfortable"
+              ? columnDefType === "display"
+                ? "0.75rem"
+                : "1rem"
+              : columnDefType === "display"
+                ? "1rem 1.25rem"
+                : "1.5rem",
+        pb:
+          columnDefType === "display"
+            ? 0
+            : showColumnFilters || density === "compact"
+              ? "0.4rem"
+              : "0.6rem",
+        pt:
+          columnDefType === "group" || density === "compact"
+            ? "0.25rem"
+            : density === "comfortable"
+              ? ".75rem"
+              : "1.25rem",
+        userSelect: enableMultiSort && column.getCanSort() ? "none" : undefined,
+        verticalAlign: "middle",
+        ...getCommonMRTCellStyles({
+          column,
+          header,
+          table,
+          tableCellProps,
+          theme,
+        }),
+        ...draggingBorders,
+        backgroundColor: backgroundColor,
+      })}
+    >
+      {tableCellProps.children ?? (
+        <Box
+          className="Mui-TableHeadCell-Content"
+          sx={{
+            alignItems: "center",
+            display: "flex",
+            flexDirection:
+              tableCellProps?.align === "right" ? "row-reverse" : "row",
+            justifyContent:
+              columnDefType === "group" || tableCellProps?.align === "center"
+                ? "center"
+                : column.getCanResize()
+                  ? "space-between"
+                  : "flex-start",
+            position: "relative",
+            width: "100%",
+          }}
+        >
+          <Box
+            className="Mui-TableHeadCell-Content-Labels"
+            onClick={column.getToggleSortingHandler()}
+            sx={{
+              alignItems: "center",
+              cursor:
+                column.getCanSort() && columnDefType !== "group"
+                  ? "pointer"
+                  : undefined,
+              display: "flex",
+              flexDirection:
+                tableCellProps?.align === "right" ? "row-reverse" : "row",
+              overflow: columnDefType === "data" ? "hidden" : undefined,
+              pl:
+                tableCellProps?.align === "center"
+                  ? `${headerPL}rem`
+                  : undefined,
+            }}
+          >
+            <Box
+              className="Mui-TableHeadCell-Content-Wrapper"
+              sx={{
+                "&:hover": {
+                  textOverflow: "clip",
+                },
+                minWidth: `${Math.min(columnDef.header?.length ?? 0, 4)}ch`,
+                overflow: columnDefType === "data" ? "hidden" : undefined,
+                textOverflow: "ellipsis",
+                textAlign: "start",
+                color: "#fff",
+                fontWeight: "400",
+                whiteSpace: "nowrap",
+              }}
+            >
+              {HeaderElement}
+            </Box>
+            {column.getCanSort() && columnDefType !== "group" && (
+              <MRT_TableHeadCellSortLabel
+                sx={{
+                  width: 20,
+                  "& .MuiTableSortLabel-icon": {
+                    color: `#fff !important`,
+                  },
+                }}
+                header={header}
+                table={table}
+              />
+            )}
+          </Box>
+        </Box>
+      )}
+    </TableCell>
+  );
+};
+export default DataTable_TableHeadCell;
--- a/src/core/components/DataTable/head/TableHeadRow.js
+++ b/src/core/components/DataTable/head/TableHeadRow.js
@@ -0,0 +1,69 @@
+import { parseFromValuesOrFunc } from "@/core/utils/utils";
+import { TableRow, useTheme } from "@mui/material";
+import DataTable_TableHeadCell from "./TableHeadCell";
+
+const DataTable_TableHeadRow = ({
+  columnVirtualizer,
+  headerGroup,
+  table,
+  index, // Add index prop
+  ...rest
+}) => {
+  const { palette } = useTheme();
+
+  const {
+    options: { enableStickyHeader, layoutMode, muiTableHeadRowProps },
+  } = table;
+  const { virtualColumns, virtualPaddingLeft, virtualPaddingRight } =
+    columnVirtualizer ?? {};
+
+  const backgroundColor =
+    index % 2 === 0 ? palette.primary.main : palette.secondary.main;
+
+  const tableRowProps = {
+    ...parseFromValuesOrFunc(muiTableHeadRowProps, {
+      headerGroup,
+      table,
+    }),
+    ...rest,
+    sx: (theme) => ({
+      // Access theme from the sx function
+      ...(parseFromValuesOrFunc(muiTableHeadRowProps?.sx, theme) || {}),
+      display: layoutMode?.startsWith("grid") ? "flex" : undefined,
+      position:
+        enableStickyHeader && layoutMode === "semantic" ? "sticky" : "relative",
+      top: 0,
+    }),
+  };
+
+  return (
+    <TableRow {...tableRowProps}>
+      {virtualPaddingLeft && (
+        <th style={{ display: "flex", width: virtualPaddingLeft }} />
+      )}
+      {(virtualColumns ?? headerGroup.headers).map(
+        (headerOrVirtualHeader, staticColumnIndex) => {
+          const header = columnVirtualizer
+            ? headerGroup.headers[headerOrVirtualHeader.index]
+            : headerOrVirtualHeader;
+
+          return header ? (
+            <DataTable_TableHeadCell
+              columnVirtualizer={columnVirtualizer}
+              header={header}
+              backgroundColor={backgroundColor}
+              key={header.id}
+              staticColumnIndex={staticColumnIndex}
+              table={table}
+            />
+          ) : null;
+        },
+      )}
+      {virtualPaddingRight && (
+        <th style={{ display: "flex", width: virtualPaddingRight }} />
+      )}
+    </TableRow>
+  );
+};
+
+export default DataTable_TableHeadRow;
--- a/src/core/components/DataTable/hide/HideBody.jsx
+++ b/src/core/components/DataTable/hide/HideBody.jsx
@@ -0,0 +1,43 @@
+"use client";
+
+import { Box, Drawer, styled } from "@mui/material";
+import HideBodyField from "@/core/components/DataTable/hide/HideBodyField";
+import HideHeader from "@/core/components/DataTable/hide/HideHeader";
+import useDataTable from "@/lib/hooks/useDataTable";
+import HideOrShowAll from "@/core/components/DataTable/hide/HideOrShowAll";
+import ScrollBox from "../../ScrollBox";
+
+function HideBody({ columns, drawerState, setDrawerState }) {
+  const { hideData, setHideData } = useDataTable();
+
+  return (
+    <Drawer
+      open={drawerState}
+      onClose={() => setDrawerState(false)}
+      sx={{
+        overflowY: "hidden",
+        display: "flex",
+        flexDirection: "column",
+        height: "100%",
+        zIndex: "1300",
+      }}
+    >
+      <HideHeader setDrawerState={setDrawerState} />
+      <HideOrShowAll hideData={hideData} setHideData={setHideData} />
+      <ScrollBox>
+        <Box sx={{ px: 1, py: 2, display: "flex", flexDirection: "column" }}>
+          {columns.map((column) => (
+            <HideBodyField
+              key={column.id}
+              column={column}
+              hideData={hideData}
+              setHideData={setHideData}
+            />
+          ))}
+        </Box>
+      </ScrollBox>
+    </Drawer>
+  );
+}
+
+export default HideBody;
--- a/src/core/components/DataTable/hide/HideBodyField.jsx
+++ b/src/core/components/DataTable/hide/HideBodyField.jsx
@@ -0,0 +1,80 @@
+import { alpha, Box, Checkbox, styled, Typography } from "@mui/material";
+import { SimpleTreeView } from "@mui/x-tree-view";
+import { TreeItem, treeItemClasses } from "@mui/x-tree-view/TreeItem";
+
+const CustomTreeItem = styled(TreeItem)(({ theme }) => ({
+  [`& .${treeItemClasses.content}`]: {
+    padding: theme.spacing(0.5, 0.5),
+    margin: theme.spacing(0.2, 0),
+    gap: 0,
+  },
+  [`& .${treeItemClasses.iconContainer}`]: {
+    "& .close": {
+      opacity: 0.3,
+    },
+  },
+  [`& .${treeItemClasses.groupTransition}`]: {
+    marginLeft: 16,
+    paddingLeft: 16,
+    borderLeft: `1px dashed ${alpha(theme.palette.text.primary, 0.4)}`,
+  },
+}));
+
+function HideBodyField({ column, hideData, setHideData }) {
+  const handleCheckboxChange = () => {
+    setHideData((prevData) => {
+      const updateHideData = (data, id) => {
+        if (data.hasOwnProperty(id)) {
+          return { ...data, [id]: !data[id] };
+        }
+        const updatedData = { ...data };
+        for (const key in data) {
+          if (data[key] && typeof data[key] === "object") {
+            updatedData[key] = updateHideData(data[key], id);
+          }
+        }
+        return updatedData;
+      };
+
+      return updateHideData(prevData, column.id);
+    });
+  };
+
+  const labelContent = (() => {
+    if (typeof hideData[column.id] === "boolean") {
+      return (
+        <Box sx={{ display: "flex", alignItems: "center" }}>
+          <Checkbox
+            checked={hideData[column.id]}
+            onChange={handleCheckboxChange}
+            name={column.id}
+          />
+          <Typography variant="subtitle1">{column.header}</Typography>
+        </Box>
+      );
+    } else {
+      return (
+        <Box sx={{ display: "flex", alignItems: "center", p: 1 }}>
+          <Typography variant="subtitle1">{column.header}</Typography>
+        </Box>
+      );
+    }
+  })();
+
+  return (
+    <SimpleTreeView disableSelection>
+      <CustomTreeItem itemId={column.id} label={labelContent}>
+        {column.columns?.map((subColumn) => (
+          <HideBodyField
+            key={subColumn.id}
+            column={subColumn}
+            hideData={hideData[column.id]}
+            setHideData={setHideData}
+          />
+        ))}
+      </CustomTreeItem>
+    </SimpleTreeView>
+  );
+}
+
+export default HideBodyField;
--- a/src/core/components/DataTable/hide/HideButton.jsx
+++ b/src/core/components/DataTable/hide/HideButton.jsx
@@ -0,0 +1,37 @@
+"use client";
+import ViewColumnIcon from "@mui/icons-material/ViewColumn";
+import { IconButton, Tooltip, Badge } from "@mui/material";
+import useDataTable from "@/lib/hooks/useDataTable";
+import { flattenObjectOfObjects } from "@/core/utils/flattenObjectOfObjects";
+
+function HideButton({ drawerState, setDrawerState }) {
+  const { hideData } = useDataTable();
+  const flattenHideData = flattenObjectOfObjects(hideData);
+  const falseCount = Object.values(flattenHideData).filter(
+    (value) => value === false,
+  ).length;
+
+  return (
+    <Tooltip title="نمایش/مخفی کردن ستون ها">
+      <IconButton
+        onClick={() => {
+          setDrawerState(!drawerState);
+        }}
+        aria-label="hide table column"
+      >
+        <Badge
+          badgeContent={falseCount}
+          color="primary"
+          anchorOrigin={{
+            vertical: "top",
+            horizontal: "left",
+          }}
+        >
+          <ViewColumnIcon />
+        </Badge>
+      </IconButton>
+    </Tooltip>
+  );
+}
+
+export default HideButton;
--- a/src/core/components/DataTable/hide/HideHeader.jsx
+++ b/src/core/components/DataTable/hide/HideHeader.jsx
@@ -0,0 +1,35 @@
+"use client";
+
+import { Box, IconButton, Typography } from "@mui/material";
+import CancelIcon from "@mui/icons-material/Cancel";
+import ViewColumnIcon from "@mui/icons-material/ViewColumn";
+
+function FilterHeader({ setDrawerState }) {
+  return (
+    <Box
+      sx={{
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        px: 2,
+        py: 1,
+        backgroundColor: "#155175",
+        boxShadow:
+          "rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px",
+        maxWidth: "450px",
+      }}
+    >
+      <Box sx={{ display: "flex", alignItems: "center" }}>
+        <ViewColumnIcon sx={{ color: "#fff", mr: 1 }} />
+        <Typography variant="h6" sx={{ color: "#fff" }}>
+          نمایش/مخفی کردن ستون ها
+        </Typography>
+      </Box>
+      <IconButton sx={{ color: "#fff" }} onClick={() => setDrawerState(false)}>
+        <CancelIcon sx={{ fontSize: "1em" }} />
+      </IconButton>
+    </Box>
+  );
+}
+
+export default FilterHeader;
--- a/src/core/components/DataTable/hide/HideOrShowAll.jsx
+++ b/src/core/components/DataTable/hide/HideOrShowAll.jsx
@@ -0,0 +1,70 @@
+"use client";
+
+import { Box, Button } from "@mui/material";
+import VisibilityIcon from "@mui/icons-material/Visibility";
+import VisibilityOffIcon from "@mui/icons-material/VisibilityOff";
+
+const setAllValues = (obj, value) => {
+  const result = {};
+  for (const key in obj) {
+    if (typeof obj[key] === "object" && obj[key] !== null) {
+      result[key] = setAllValues(obj[key], value);
+    } else {
+      result[key] = value;
+    }
+  }
+  return result;
+};
+
+const allValuesAre = (obj, value) => {
+  for (const key in obj) {
+    if (typeof obj[key] === "object" && obj[key] !== null) {
+      if (!allValuesAre(obj[key], value)) {
+        return false;
+      }
+    } else if (obj[key] !== value) {
+      return false;
+    }
+  }
+  return true;
+};
+
+function HideOrShowAll({ hideData, setHideData }) {
+  const handleShowAll = () => {
+    const newHideData = setAllValues(hideData, true);
+    setHideData(newHideData);
+  };
+
+  const handleHideAll = () => {
+    const newHideData = setAllValues(hideData, false);
+    setHideData(newHideData);
+  };
+
+  const allHidden = allValuesAre(hideData, false);
+  const allVisible = allValuesAre(hideData, true);
+
+  return (
+    <Box sx={{ my: 1, display: "flex" }}>
+      <Button
+        sx={{ flex: 1 }}
+        color="info"
+        disabled={allVisible}
+        startIcon={<VisibilityIcon />}
+        onClick={handleShowAll}
+      >
+        نمایش همه
+      </Button>
+      <Button
+        sx={{ flex: 1 }}
+        color="error"
+        disabled={allHidden}
+        startIcon={<VisibilityOffIcon />}
+        onClick={handleHideAll}
+      >
+        مخفی کردن همه
+      </Button>
+    </Box>
+  );
+}
+
+export default HideOrShowAll;
--- a/src/core/components/DataTable/hide/index.jsx
+++ b/src/core/components/DataTable/hide/index.jsx
@@ -0,0 +1,24 @@
+"use client";
+
+import { useState } from "react";
+import HideButton from "@/core/components/DataTable/hide/HideButton";
+import HideBody from "@/core/components/DataTable/hide/HideBody";
+
+function HideColumn({ columns, user_id, page_name, table_name }) {
+  const [open, setOpen] = useState(false);
+  return (
+    <>
+      <HideButton drawerState={open} setDrawerState={setOpen} />
+      <HideBody
+        columns={columns}
+        drawerState={open}
+        setDrawerState={setOpen}
+        user_id={user_id}
+        page_name={page_name}
+        table_name={table_name}
+      />
+    </>
+  );
+}
+
+export default HideColumn;
--- a/src/core/components/DataTable/index.js
+++ b/src/core/components/DataTable/index.js
@@ -0,0 +1,18 @@
+import DataTable_Main from "./Main";
+import DataTableProvider from "@/lib/contexts/DataTable";
+
+const DataTable = (props) => {
+  return (
+    <DataTableProvider
+      user_id={props.user_id}
+      page_name={props.page_name}
+      table_name={props.table_name}
+      columns={props.columns}
+      initialSort={props.sorting}
+    >
+      <DataTable_Main {...props} />
+    </DataTableProvider>
+  );
+};
+
+export default DataTable;
--- a/src/core/components/DataTable/localization/fa/datatable.js
+++ b/src/core/components/DataTable/localization/fa/datatable.js
@@ -0,0 +1,92 @@
+export const FA_DATATABLE_LOCALIZATION = {
+  actions: "عملیات",
+  and: "و",
+  cancel: "لغو",
+  changeFilterMode: "تغییر حالت فیلتر",
+  changeSearchMode: "تغییر حالت جستجو",
+  clearFilter: "پاک کردن فیلتر",
+  clearSearch: "پاک کردن جستجو",
+  clearSort: "پاک کردن مرتب سازی",
+  clickToCopy: "کلیک برای کپی",
+  collapse: "جمع شدن",
+  collapseAll: "جمع شدن همه",
+  columnActions: "عملیات ستون",
+  copiedToClipboard: "کپی شد",
+  dropToGroupBy: "رها کردن برای گروه بندی بر اساس {column}",
+  edit: "ویرایش",
+  expand: "باز شدن",
+  expandAll: "باز شدن همه",
+  filterArrIncludes: "شامل",
+  filterArrIncludesAll: "شامل همه",
+  filterArrIncludesSome: "شامل",
+  filterBetween: "میان",
+  filterBetweenInclusive: "میان با احتساب هر دو",
+  filterByColumn: "فیلتر بر اساس {column}",
+  filterContains: "شامل",
+  filterEmpty: "خالی",
+  filterEndsWith: "به پایان می‌رسد با",
+  filterEquals: "برابر",
+  filterEqualsString: "برابر",
+  filterFuzzy: "نزدیک",
+  filterGreaterThan: "بزرگتر از",
+  filterGreaterThanOrEqualTo: "بزرگتر یا مساوی",
+  filterInNumberRange: "میان",
+  filterIncludesString: "شامل",
+  filterIncludesStringSensitive: "شامل",
+  filterLessThan: "کوچکتر از",
+  filterLessThanOrEqualTo: "کوچکتر یا مساوی",
+  filterMode: "حالت فیلتر: {filterType}",
+  filterNotEmpty: "غیر خالی",
+  filterNotEquals: "نا برابر",
+  filterStartsWith: "شروع می‌شود با",
+  filterWeakEquals: "برابر",
+  filteringByColumn: "فیلتر بر اساس {column} - {filterType} {filterValue}",
+  goToFirstPage: "رفتن به صفحه اول",
+  goToLastPage: "رفتن به صفحه آخر",
+  goToNextPage: "رفتن به صفحه بعدی",
+  goToPreviousPage: "رفتن به صفحه قبلی",
+  grab: "گرفتن",
+  groupByColumn: "گروه بندی بر اساس {column}",
+  groupedBy: "گروه بندی شده بر اساس",
+  hideAll: "پنهان کردن همه",
+  hideColumn: "پنهان کردن ستون {column}",
+  max: "حداکثر",
+  min: "حداقل",
+  move: "انتقال",
+  noRecordsToDisplay: "هیچ رکوردی برای نمایش وجود ندارد",
+  noResultsFound: "نتیجه‌ای یافت نشد",
+  of: "از",
+  or: "یا",
+  pinToLeft: "چسباندن به سمت چپ",
+  pinToRight: "چسباندن به سمت راست",
+  resetColumnSize: "بازنشانی اندازه ستون",
+  resetOrder: "بازنشانی ترتیب",
+  rowActions: "عملیات ردیف",
+  rowNumber: "#",
+  rowNumbers: "شماره ردیف",
+  rowsPerPage: "ردیف در هر صفحه",
+  save: "ذخیره",
+  search: "جستجو",
+  selectedCountOfRowCountRowsSelected:
+    "{selectedCount} از {rowCount} ردیف انتخاب شده",
+  select: "انتخاب",
+  showAll: "نمایش همه",
+  showAllColumns: "نمایش همه ستون‌ها",
+  showHideColumns: "نمایش/مخفی کردن ستون‌ها",
+  showHideFilters: "نمایش/مخفی کردن فیلترها",
+  showHideSearch: "نمایش/مخفی کردن جستجو",
+  sortByColumnAsc: "مرتب سازی بر اساس {column} صعودی",
+  sortByColumnDesc: "مرتب سازی بر اساس {column} نزولی",
+  sortedByColumnAsc: "مرتب شده بر اساس {column} صعودی",
+  sortedByColumnDesc: "مرتب شده بر اساس {column} نزولی",
+  thenBy: "، سپس بر اساس ",
+  toggleDensity: "تغییر تراکم",
+  toggleFullScreen: "تغییر حالت تمام صفحه",
+  toggleSelectAll: "انتخاب/عدم انتخاب همه",
+  toggleSelectRow: "انتخاب/عدم انتخاب ردیف",
+  toggleVisibility: "تغییر پیدا/پنهان",
+  ungroupByColumn: "لغو گروه بندی بر اساس {column}",
+  unpin: "رها کردن",
+  unpinAll: "رها کردن همه",
+  unsorted: "بدون مرتب سازی",
+};
--- a/src/core/components/DataTable/menus/ActionMenuItem.js
+++ b/src/core/components/DataTable/menus/ActionMenuItem.js
@@ -0,0 +1,49 @@
+import { Box, IconButton, ListItemIcon, MenuItem } from "@mui/material";
+
+const DataTable_ActionMenuItem = ({
+  icon,
+  label,
+  onOpenSubMenu,
+  table,
+  ...rest
+}) => {
+  const {
+    options: {
+      icons: { ArrowRightIcon },
+    },
+  } = table;
+
+  return (
+    <MenuItem
+      sx={{
+        alignItems: "center",
+        justifyContent: "space-between",
+        minWidth: "120px",
+        my: 0,
+        py: "6px",
+      }}
+      {...rest}
+    >
+      <Box
+        sx={{
+          alignItems: "center",
+          display: "flex",
+        }}
+      >
+        <ListItemIcon>{icon}</ListItemIcon>
+        {label}
+      </Box>
+      {onOpenSubMenu && (
+        <IconButton
+          onClick={onOpenSubMenu}
+          onMouseEnter={onOpenSubMenu}
+          size="small"
+          sx={{ p: 0 }}
+        >
+          <ArrowRightIcon />
+        </IconButton>
+      )}
+    </MenuItem>
+  );
+};
+export default DataTable_ActionMenuItem;
--- a/src/core/components/DataTable/menus/CellActionMenu.js
+++ b/src/core/components/DataTable/menus/CellActionMenu.js
@@ -0,0 +1,96 @@
+import { parseFromValuesOrFunc } from "@/core/utils/utils";
+import { Menu } from "@mui/material";
+import DataTable_ActionMenuItem from "./ActionMenuItem";
+
+const DataTable_CellActionMenu = ({ table, ...rest }) => {
+  const {
+    getState,
+    options: {
+      editDisplayMode,
+      enableClickToCopy,
+      enableEditing,
+      icons: { ContentCopy, EditIcon },
+      localization,
+      mrtTheme: { menuBackgroundColor },
+      renderCellActionMenuItems,
+    },
+    refs: { actionCellRef },
+  } = table;
+  const { actionCell, density } = getState();
+  const cell = actionCell || null;
+  const { row } = cell;
+  const { column } = cell;
+  const { columnDef } = column;
+
+  const handleClose = (event) => {
+    event?.stopPropagation();
+    table.setActionCell(null);
+    actionCellRef.current = null;
+  };
+
+  const internalMenuItems = [
+    (parseFromValuesOrFunc(enableClickToCopy, cell) === "context-menu" ||
+      parseFromValuesOrFunc(columnDef.enableClickToCopy, cell) ===
+        "context-menu") && (
+      <DataTable_ActionMenuItem
+        icon={<ContentCopy />}
+        key={"mrt-copy"}
+        label={localization.copy}
+        onClick={(event) => {
+          event.stopPropagation();
+          navigator.clipboard.writeText(cell.getValue());
+          handleClose();
+        }}
+        table={table}
+      />
+    ),
+    parseFromValuesOrFunc(enableEditing, row) && editDisplayMode === "cell" && (
+      <DataTable_ActionMenuItem
+        icon={<EditIcon />}
+        key={"mrt-edit"}
+        label={localization.edit}
+        onClick={() => {
+          openEditingCell({ cell, table });
+          handleClose();
+        }}
+        table={table}
+      />
+    ),
+  ].filter(Boolean);
+
+  const renderActionProps = {
+    cell,
+    closeMenu: handleClose,
+    column,
+    internalMenuItems,
+    row,
+    table,
+  };
+
+  const menuItems =
+    columnDef.renderCellActionMenuItems?.(renderActionProps) ??
+    renderCellActionMenuItems?.(renderActionProps);
+
+  return (
+    (!!menuItems?.length || !!internalMenuItems?.length) && (
+      <Menu
+        MenuListProps={{
+          dense: density === "compact",
+          sx: {
+            backgroundColor: menuBackgroundColor,
+          },
+        }}
+        anchorEl={actionCellRef.current}
+        disableScrollLock
+        onClick={(event) => event.stopPropagation()}
+        onClose={handleClose}
+        open={!!cell}
+        transformOrigin={{ horizontal: -100, vertical: 8 }}
+        {...rest}
+      >
+        {menuItems ?? internalMenuItems}
+      </Menu>
+    )
+  );
+};
+export default DataTable_CellActionMenu;
--- a/src/core/components/DataTable/reset/ResetStorage.jsx
+++ b/src/core/components/DataTable/reset/ResetStorage.jsx
@@ -0,0 +1,36 @@
+"use client";
+import { IconButton, Tooltip, Badge } from "@mui/material";
+import AutorenewIcon from "@mui/icons-material/Autorenew";
+import useTableSetting from "@/lib/hooks/useTableSetting";
+import useDataTable from "@/lib/hooks/useDataTable";
+
+function ResetStorage({ user_id, page_name, table_name }) {
+  const { resetAction } = useTableSetting();
+  const { isAnyDirty } = useDataTable();
+  const reset = () => {
+    resetAction(user_id, page_name, table_name);
+  };
+
+  return (
+    <Tooltip title="بازنشانی اطلاعات">
+      <IconButton onClick={reset} aria-label="reset table data">
+        {isAnyDirty ? (
+          <Badge
+            anchorOrigin={{
+              vertical: "top",
+              horizontal: "left",
+            }}
+            color="primary"
+            variant="dot"
+          >
+            <AutorenewIcon />
+          </Badge>
+        ) : (
+          <AutorenewIcon />
+        )}
+      </IconButton>
+    </Tooltip>
+  );
+}
+
+export default ResetStorage;
--- a/src/core/components/DataTable/table/Paper.js
+++ b/src/core/components/DataTable/table/Paper.js
@@ -0,0 +1,102 @@
+import { parseFromValuesOrFunc } from "@/core/utils/utils";
+import { Paper } from "@mui/material";
+import DataTable_BottomToolbar from "../toolbar/BottomToolbar";
+import DataTable_TopToolbar from "../toolbar/TopToolbar";
+import DataTable_TableContainer from "./TableContainer";
+
+const DataTable_Paper = ({
+  table,
+  table_name,
+  columns,
+  user_id,
+  page_name,
+  mutate,
+  need_filter,
+  table_url,
+  table_title,
+  setFilterData,
+  ...rest
+}) => {
+  const {
+    getState,
+    options: {
+      enableBottomToolbar,
+      enableTopToolbar,
+      mrtTheme: { baseBackgroundColor },
+      muiTablePaperProps,
+      renderBottomToolbar,
+      renderTopToolbar,
+    },
+    refs: { tablePaperRef },
+  } = table;
+
+  const { isFullScreen } = getState();
+
+  const paperProps = {
+    ...parseFromValuesOrFunc(muiTablePaperProps, { table }),
+    ...rest,
+  };
+
+  return (
+    <Paper
+      elevation={0}
+      {...paperProps}
+      ref={(ref) => {
+        tablePaperRef.current = ref;
+        if (paperProps?.ref) {
+          //@ts-ignore
+          paperProps.ref.current = ref;
+        }
+      }}
+      style={{
+        ...(isFullScreen
+          ? {
+              bottom: 0,
+              height: "100dvh",
+              left: 0,
+              margin: 0,
+              maxHeight: "100dvh",
+              maxWidth: "100dvw",
+              padding: 0,
+              position: "fixed",
+              right: 0,
+              top: 0,
+              width: "100dvw",
+              zIndex: 999,
+            }
+          : {}),
+        ...paperProps?.style,
+      }}
+      sx={(theme) => ({
+        backgroundColor: baseBackgroundColor,
+        backgroundImage: "unset",
+        overflow: "hidden",
+        transition: "all 100ms ease-in-out",
+        ...parseFromValuesOrFunc(paperProps?.sx, theme),
+      })}
+    >
+      {enableTopToolbar &&
+        (parseFromValuesOrFunc(renderTopToolbar, { table }) ?? (
+          <DataTable_TopToolbar
+            need_filter={need_filter}
+            table={table}
+            mutate={mutate}
+            columns={columns}
+            table_url={table_url}
+            user_id={user_id}
+            page_name={page_name}
+            table_name={table_name}
+            table_title={table_title}
+            setFilterData={setFilterData}
+            {...paperProps}
+          />
+        ))}
+      <DataTable_TableContainer table={table} />
+      {enableBottomToolbar &&
+        (parseFromValuesOrFunc(renderBottomToolbar, { table }) ?? (
+          <DataTable_BottomToolbar table={table} />
+        ))}
+    </Paper>
+  );
+};
+export default DataTable_Paper;
--- a/src/core/components/DataTable/table/Table.js
+++ b/src/core/components/DataTable/table/Table.js
@@ -0,0 +1,76 @@
+import { parseCSSVarId, parseFromValuesOrFunc } from "@/core/utils/utils";
+import { Table } from "@mui/material";
+import { useMRT_ColumnVirtualizer } from "material-react-table";
+import { useMemo } from "react";
+import DataTable_TableBody, {
+  Memo_DataTable_TableBody,
+} from "../body/TableBody";
+import DataTable_TableHead from "../head/TableHead";
+
+const DataTable_Table = ({ table, ...rest }) => {
+  const {
+    getFlatHeaders,
+    getState,
+    options: {
+      columns,
+      enableStickyHeader,
+      enableTableFooter,
+      enableTableHead,
+      layoutMode,
+      memoMode,
+      muiTableProps,
+      renderCaption,
+    },
+  } = table;
+  const { columnSizing, columnSizingInfo, columnVisibility, isFullScreen } =
+    getState();
+
+  const tableProps = {
+    ...parseFromValuesOrFunc(muiTableProps, { table }),
+    ...rest,
+  };
+
+  const Caption = parseFromValuesOrFunc(renderCaption, { table });
+
+  const columnSizeVars = useMemo(() => {
+    const headers = getFlatHeaders();
+    const colSizes = {};
+    for (let i = 0; i < headers.length; i++) {
+      const header = headers[i];
+      const colSize = header.getSize();
+      colSizes[`--header-${parseCSSVarId(header.id)}-size`] = colSize;
+      colSizes[`--col-${parseCSSVarId(header.column.id)}-size`] = colSize;
+    }
+    return colSizes;
+  }, [columns, columnSizing, columnSizingInfo, columnVisibility]);
+
+  const columnVirtualizer = useMRT_ColumnVirtualizer(table);
+
+  const commonTableGroupProps = {
+    columnVirtualizer,
+    table,
+  };
+
+  return (
+    <Table
+      stickyHeader={enableStickyHeader || isFullScreen}
+      {...tableProps}
+      style={{ ...columnSizeVars, ...tableProps?.style }}
+      sx={(theme) => ({
+        display: layoutMode?.startsWith("grid") ? "grid" : undefined,
+        position: "relative",
+        ...parseFromValuesOrFunc(tableProps?.sx, theme),
+      })}
+    >
+      {!!Caption && <caption>{Caption}</caption>}
+      {enableTableHead && <DataTable_TableHead {...commonTableGroupProps} />}
+      {memoMode === "table-body" || columnSizingInfo.isResizingColumn ? (
+        <Memo_DataTable_TableBody {...commonTableGroupProps} />
+      ) : (
+        <DataTable_TableBody {...commonTableGroupProps} />
+      )}
+      {/* {enableTableFooter && <MRT_TableFooter {...commonTableGroupProps} />} */}
+    </Table>
+  );
+};
+export default DataTable_Table;
--- a/src/core/components/DataTable/table/TableContainer.js
+++ b/src/core/components/DataTable/table/TableContainer.js
@@ -0,0 +1,84 @@
+import { parseFromValuesOrFunc } from "@/core/utils/utils";
+import { TableContainer } from "@mui/material";
+import { useEffect, useLayoutEffect, useState } from "react";
+import DataTable_CellActionMenu from "../menus/CellActionMenu";
+import DataTable_Table from "./Table";
+import DataTable_TableLoadingOverlay from "./TableLoadingOverlay";
+
+const useIsomorphicLayoutEffect =
+  typeof window !== "undefined" ? useLayoutEffect : useEffect;
+
+const DataTable_TableContainer = ({ table, ...rest }) => {
+  const {
+    getState,
+    options: { enableCellActions, enableStickyHeader, muiTableContainerProps },
+    refs: { bottomToolbarRef, tableContainerRef, topToolbarRef },
+  } = table;
+  const { actionCell, isFullScreen, isLoading, showLoadingOverlay } =
+    getState();
+
+  const loading =
+    showLoadingOverlay !== false && (isLoading || showLoadingOverlay);
+
+  const [totalToolbarHeight, setTotalToolbarHeight] = useState(0);
+
+  const tableContainerProps = {
+    ...parseFromValuesOrFunc(muiTableContainerProps, {
+      table,
+    }),
+    ...rest,
+  };
+
+  useIsomorphicLayoutEffect(() => {
+    const topToolbarHeight =
+      typeof document !== "undefined"
+        ? (topToolbarRef.current?.offsetHeight ?? 0)
+        : 0;
+
+    const bottomToolbarHeight =
+      typeof document !== "undefined"
+        ? (bottomToolbarRef?.current?.offsetHeight ?? 0)
+        : 0;
+
+    setTotalToolbarHeight(topToolbarHeight + bottomToolbarHeight);
+  });
+
+  return (
+    <TableContainer
+      aria-busy={loading}
+      aria-describedby={loading ? "mrt-progress" : undefined}
+      {...tableContainerProps}
+      ref={(node) => {
+        if (node) {
+          tableContainerRef.current = node;
+          if (tableContainerProps?.ref) {
+            //@ts-ignore
+            tableContainerProps.ref.current = node;
+          }
+        }
+      }}
+      style={{
+        maxHeight: isFullScreen
+          ? `calc(100vh - ${totalToolbarHeight}px)`
+          : undefined,
+        ...tableContainerProps?.style,
+      }}
+      sx={(theme) => ({
+        maxHeight: enableStickyHeader
+          ? `clamp(350px, calc(100vh - ${totalToolbarHeight}px), 9999px)`
+          : undefined,
+        maxWidth: "100%",
+        overflow: "auto",
+        position: "relative",
+        ...parseFromValuesOrFunc(tableContainerProps?.sx, theme),
+      })}
+    >
+      {loading ? <DataTable_TableLoadingOverlay table={table} /> : null}
+      <DataTable_Table table={table} />
+      {enableCellActions && actionCell && (
+        <DataTable_CellActionMenu table={table} />
+      )}
+    </TableContainer>
+  );
+};
+export default DataTable_TableContainer;
--- a/src/core/components/DataTable/table/TableLoadingOverlay.js
+++ b/src/core/components/DataTable/table/TableLoadingOverlay.js
@@ -0,0 +1,44 @@
+import { Box, CircularProgress } from "@mui/material";
+
+const DataTable_TableLoadingOverlay = ({ table, ...rest }) => {
+  const {
+    options: {
+      localization,
+      mrtTheme: { baseBackgroundColor },
+      muiCircularProgressProps,
+    },
+  } = table;
+
+  const circularProgressProps = {
+    ...parseFromValuesOrFunc(muiCircularProgressProps, { table }),
+    ...rest,
+  };
+
+  return (
+    <Box
+      sx={{
+        alignItems: "center",
+        backgroundColor: alpha(baseBackgroundColor, 0.5),
+        bottom: 0,
+        display: "flex",
+        justifyContent: "center",
+        left: 0,
+        maxHeight: "100vh",
+        position: "absolute",
+        right: 0,
+        top: 0,
+        width: "100%",
+        zIndex: 3,
+      }}
+    >
+      {circularProgressProps?.Component ?? (
+        <CircularProgress
+          aria-label={localization.noRecordsToDisplay}
+          id="mrt-progress"
+          {...circularProgressProps}
+        />
+      )}
+    </Box>
+  );
+};
+export default DataTable_TableLoadingOverlay;
--- a/src/core/components/DataTable/toolbar/BottomToolbar.js
+++ b/src/core/components/DataTable/toolbar/BottomToolbar.js
@@ -0,0 +1,85 @@
+import {
+  getCommonToolbarStyles,
+  parseFromValuesOrFunc,
+} from "@/core/utils/utils";
+import { Box, alpha, useMediaQuery } from "@mui/material";
+import DataTable_LinearProgressBar from "./LinearProgressBar";
+import DataTable_TablePagination from "./TablePagination";
+
+const DataTable_BottomToolbar = ({ table, ...rest }) => {
+  const {
+    getState,
+    options: {
+      enablePagination,
+      muiBottomToolbarProps,
+      positionPagination,
+      renderBottomToolbarCustomActions,
+    },
+    refs: { bottomToolbarRef },
+  } = table;
+  const { isFullScreen } = getState();
+
+  const isMobile = useMediaQuery("(max-width:720px)");
+  const toolbarProps = {
+    ...parseFromValuesOrFunc(muiBottomToolbarProps, { table }),
+    ...rest,
+  };
+
+  const stackAlertBanner = isMobile || !!renderBottomToolbarCustomActions;
+  return (
+    <Box
+      {...toolbarProps}
+      ref={(node) => {
+        if (node) {
+          bottomToolbarRef.current = node;
+          if (toolbarProps?.ref) {
+            // @ts-ignore
+            toolbarProps.ref.current = node;
+          }
+        }
+      }}
+      sx={(theme) => ({
+        ...getCommonToolbarStyles({ table, theme }),
+        bottom: isFullScreen ? "0" : undefined,
+        boxShadow: `0 1px 2px -1px ${alpha(theme.palette.grey[700], 0.5)} inset`,
+        left: 0,
+        position: isFullScreen ? "fixed" : "relative",
+        right: 0,
+        ...parseFromValuesOrFunc(toolbarProps?.sx, theme),
+      })}
+    >
+      <DataTable_LinearProgressBar isTopToolbar={false} table={table} />
+      <Box
+        sx={{
+          alignItems: "center",
+          boxSizing: "border-box",
+          display: "flex",
+          justifyContent: "space-between",
+          p: "0.5rem",
+          width: "100%",
+        }}
+      >
+        {renderBottomToolbarCustomActions ? (
+          renderBottomToolbarCustomActions({ table })
+        ) : (
+          <span />
+        )}
+        <Box
+          sx={{
+            display: "flex",
+            justifyContent: "flex-end",
+            position: stackAlertBanner ? "relative" : "absolute",
+            right: 0,
+            top: 0,
+          }}
+        >
+          {enablePagination &&
+            ["both", "bottom"].includes(positionPagination ?? "") && (
+              <DataTable_TablePagination position="bottom" table={table} />
+            )}
+        </Box>
+      </Box>
+    </Box>
+  );
+};
+export default DataTable_BottomToolbar;
--- a/src/core/components/DataTable/toolbar/LinearProgressBar.js
+++ b/src/core/components/DataTable/toolbar/LinearProgressBar.js
@@ -0,0 +1,40 @@
+import { parseFromValuesOrFunc } from "@/core/utils/utils";
+import { Collapse, LinearProgress } from "@mui/material";
+
+const DataTable_LinearProgressBar = ({ isTopToolbar, table, ...rest }) => {
+  const {
+    getState,
+    options: { muiLinearProgressProps },
+  } = table;
+  const { isSaving, showProgressBars } = getState();
+
+  const linearProgressProps = {
+    ...parseFromValuesOrFunc(muiLinearProgressProps, {
+      isTopToolbar,
+      table,
+    }),
+    ...rest,
+  };
+
+  return (
+    <Collapse
+      in={showProgressBars !== false && (showProgressBars || isSaving)}
+      mountOnEnter
+      sx={{
+        bottom: isTopToolbar ? 0 : undefined,
+        position: "absolute",
+        top: !isTopToolbar ? 0 : undefined,
+        width: "100%",
+      }}
+      unmountOnExit
+    >
+      <LinearProgress
+        aria-busy="true"
+        aria-label="Loading"
+        sx={{ position: "relative" }}
+        {...linearProgressProps}
+      />
+    </Collapse>
+  );
+};
+export default DataTable_LinearProgressBar;
--- a/src/core/components/DataTable/toolbar/TablePagination.js
+++ b/src/core/components/DataTable/toolbar/TablePagination.js
@@ -0,0 +1,228 @@
+import {
+  flipIconStyles,
+  getCommonTooltipProps,
+  parseFromValuesOrFunc,
+} from "@/core/utils/utils";
+import { useTheme } from "@emotion/react";
+import {
+  Box,
+  IconButton,
+  InputLabel,
+  MenuItem,
+  Pagination,
+  PaginationItem,
+  Select,
+  Tooltip,
+  Typography,
+  useMediaQuery,
+} from "@mui/material";
+
+const defaultRowsPerPage = [5, 10, 15, 20, 25, 30, 50, 100];
+
+const DataTable_TablePagination = ({ position = "bottom", table, ...rest }) => {
+  const theme = useTheme();
+  const isMobile = useMediaQuery("(max-width: 720px)");
+
+  const {
+    getState,
+    options: {
+      enableToolbarInternalActions,
+      icons: { ChevronLeftIcon, ChevronRightIcon, FirstPageIcon, LastPageIcon },
+      localization,
+      muiPaginationProps,
+      paginationDisplayMode,
+    },
+  } = table;
+
+  const {
+    pagination: { pageIndex = 0, pageSize = 10 },
+    showGlobalFilter,
+  } = getState();
+
+  const paginationProps = {
+    ...parseFromValuesOrFunc(muiPaginationProps, {
+      table,
+    }),
+    ...rest,
+  };
+
+  const totalRowCount = table.getRowCount();
+  const numberOfPages = table.getPageCount();
+  const showFirstLastPageButtons = numberOfPages > 2;
+  const firstRowIndex = pageIndex * pageSize;
+  const lastRowIndex = Math.min(pageIndex * pageSize + pageSize, totalRowCount);
+
+  const {
+    SelectProps = {},
+    disabled = false,
+    rowsPerPageOptions = defaultRowsPerPage,
+    showFirstButton = showFirstLastPageButtons,
+    showLastButton = showFirstLastPageButtons,
+    showRowsPerPage = true,
+    ...restPaginationProps
+  } = paginationProps ?? {};
+
+  const disableBack = pageIndex <= 0 || disabled;
+  const disableNext = lastRowIndex >= totalRowCount || disabled;
+
+  if (isMobile && SelectProps?.native !== false) {
+    SelectProps.native = true;
+  }
+
+  const tooltipProps = getCommonTooltipProps();
+
+  return (
+    <Box
+      className="MuiTablePagination-root"
+      sx={{
+        alignItems: "center",
+        display: "flex",
+        flexWrap: "wrap",
+        gap: "8px",
+        justifyContent: { md: "space-between", sm: "center" },
+        justifySelf: "flex-end",
+        mt:
+          position === "top" &&
+          enableToolbarInternalActions &&
+          !showGlobalFilter
+            ? "3rem"
+            : undefined,
+        position: "relative",
+        px: "8px",
+        py: "12px",
+        zIndex: 2,
+      }}
+    >
+      {showRowsPerPage && (
+        <Box sx={{ alignItems: "center", display: "flex", gap: "8px" }}>
+          <InputLabel htmlFor="mrt-rows-per-page" sx={{ mb: 0 }}>
+            {localization.rowsPerPage}
+          </InputLabel>
+          <Select
+            MenuProps={{ disableScrollLock: true }}
+            disableUnderline
+            disabled={disabled}
+            inputProps={{
+              "aria-label": localization.rowsPerPage,
+              id: "mrt-rows-per-page",
+            }}
+            label={localization.rowsPerPage}
+            onChange={(event) => table.setPageSize(+event.target.value)}
+            sx={{ mb: 0 }}
+            value={pageSize}
+            variant="standard"
+            {...SelectProps}
+          >
+            {rowsPerPageOptions.map((option) => {
+              const value = typeof option !== "number" ? option.value : option;
+              const label =
+                typeof option !== "number" ? option.label : `${option}`;
+              return (
+                SelectProps?.children ??
+                (SelectProps?.native ? (
+                  <option key={value} value={value}>
+                    {label}
+                  </option>
+                ) : (
+                  <MenuItem key={value} sx={{ m: 0 }} value={value}>
+                    {label}
+                  </MenuItem>
+                ))
+              );
+            })}
+          </Select>
+        </Box>
+      )}
+      {paginationDisplayMode === "pages" ? (
+        <Pagination
+          count={numberOfPages}
+          disabled={disabled}
+          onChange={(_e, newPageIndex) => table.setPageIndex(newPageIndex - 1)}
+          page={pageIndex + 1}
+          renderItem={(item) => (
+            <PaginationItem
+              slots={{
+                first: FirstPageIcon,
+                last: LastPageIcon,
+                next: ChevronRightIcon,
+                previous: ChevronLeftIcon,
+              }}
+              {...item}
+            />
+          )}
+          showFirstButton={showFirstButton}
+          showLastButton={showLastButton}
+          {...restPaginationProps}
+        />
+      ) : paginationDisplayMode === "default" ? (
+        <>
+          <Typography
+            align="center"
+            component="span"
+            sx={{ m: "0 4px", minWidth: "8ch" }}
+            variant="body2"
+          >{`${
+            lastRowIndex === 0 ? 0 : (firstRowIndex + 1).toLocaleString()
+          }-${lastRowIndex.toLocaleString()} ${
+            localization.of
+          } ${totalRowCount.toLocaleString()}`}</Typography>
+          <Box gap="xs">
+            {showFirstButton && (
+              <Tooltip {...tooltipProps} title={localization.goToFirstPage}>
+                <span>
+                  <IconButton
+                    aria-label={localization.goToFirstPage}
+                    disabled={disableBack}
+                    onClick={() => table.firstPage()}
+                    size="small"
+                  >
+                    <FirstPageIcon {...flipIconStyles(theme)} />
+                  </IconButton>
+                </span>
+              </Tooltip>
+            )}
+            <Tooltip {...tooltipProps} title={localization.goToPreviousPage}>
+              <span>
+                <IconButton
+                  aria-label={localization.goToPreviousPage}
+                  disabled={disableBack}
+                  onClick={() => table.previousPage()}
+                  size="small"
+                >
+                  <ChevronLeftIcon {...flipIconStyles(theme)} />
+                </IconButton>
+              </span>
+            </Tooltip>
+            <Tooltip {...tooltipProps} title={localization.goToNextPage}>
+              <span>
+                <IconButton
+                  aria-label={localization.goToNextPage}
+                  disabled={disableNext}
+                  onClick={() => table.nextPage()}
+                  size="small"
+                >
+                  <ChevronRightIcon {...flipIconStyles(theme)} />
+                </IconButton>
+              </span>
+            </Tooltip>
+            {showLastButton && (
+              <Tooltip {...tooltipProps} title={localization.goToLastPage}>
+                <span>
+                  <IconButton
+                    aria-label={localization.goToLastPage}
+                    disabled={disableNext}
+                    onClick={() => table.lastPage()}
+                    size="small"
+                  >
+                    <LastPageIcon {...flipIconStyles(theme)} />
+                  </IconButton>
+                </span>
+              </Tooltip>
+            )}
+          </Box>
+        </>
+      ) : null}
+    </Box>
+  );
+};
+export default DataTable_TablePagination;
--- a/src/core/components/DataTable/toolbar/TopToolbar.js
+++ b/src/core/components/DataTable/toolbar/TopToolbar.js
@@ -0,0 +1,156 @@
+import {
+  getCommonToolbarStyles,
+  parseFromValuesOrFunc,
+} from "@/core/utils/utils";
+import { Box, Typography, useMediaQuery } from "@mui/material";
+import DataTable_LinearProgressBar from "./LinearProgressBar";
+import DataTable_TablePagination from "./TablePagination";
+import FilterColumn from "@/core/components/DataTable/filter";
+import UpdateTable from "@/core/components/DataTable/update/UpdateTable";
+import ResetStorage from "@/core/components/DataTable/reset/ResetStorage";
+import HideColumn from "@/core/components/DataTable/hide";
+import FilterCustom from "../filter/FilterCustom";
+
+const DataTable_TopToolbar = ({
+  mutate,
+  need_filter,
+  table,
+  columns,
+  table_url,
+  user_id,
+  page_name,
+  table_name,
+  table_title,
+  special_data,
+  special_filter,
+  setFilterData,
+}) => {
+  const {
+    getState,
+    options: {
+      enablePagination,
+      enableToolbarInternalActions,
+      muiTopToolbarProps,
+      positionPagination,
+      renderTopToolbarCustomActions,
+    },
+    refs: { topToolbarRef },
+  } = table;
+  const { isFullScreen, showGlobalFilter } = getState();
+
+  const isMobile = useMediaQuery("(max-width:720px)");
+  const isTablet = useMediaQuery("(max-width:1024px)");
+
+  const toolbarProps = parseFromValuesOrFunc(muiTopToolbarProps, { table });
+
+  const stackAlertBanner =
+    isMobile ||
+    !!renderTopToolbarCustomActions ||
+    (showGlobalFilter && isTablet);
+
+  return (
+    <Box
+      {...toolbarProps}
+      ref={(ref) => {
+        topToolbarRef.current = ref;
+        if (toolbarProps?.ref) {
+          // @ts-ignore
+          toolbarProps.ref.current = ref;
+        }
+      }}
+      sx={(theme) => ({
+        ...getCommonToolbarStyles({ table, theme }),
+        position: isFullScreen ? "sticky" : "relative",
+        top: isFullScreen ? "0" : undefined,
+        ...parseFromValuesOrFunc(toolbarProps?.sx, theme),
+      })}
+    >
+      <Box
+        sx={{
+          flexWrap: { xs: "wrap", sm: "no-wrap" },
+          boxSizing: "border-box",
+          display: "flex",
+          gap: "0.5rem",
+          justifyContent: "space-between",
+          alignItems: "center",
+          p: "0.5rem",
+          position: stackAlertBanner ? "relative" : "absolute",
+          right: 0,
+          top: 0,
+          width: "100%",
+        }}
+      >
+        <Box
+          sx={{
+            display: "flex",
+            alignItems: "center",
+            order: { xs: 2, sm: 1 },
+          }}
+        >
+          {renderTopToolbarCustomActions?.({ table })}
+        </Box>
+        <Typography
+          sx={{
+            textAlign: "center",
+            order: { xs: 1, sm: 2 },
+            width: { xs: "100%", sm: "unset" },
+          }}
+          fontWeight={600}
+        >
+          {table_title || ""}
+        </Typography>
+        {enableToolbarInternalActions && (
+          <Box
+            sx={{
+              gap: "0.5rem",
+              flexWrap: "wrap-reverse",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "flex-end",
+              order: 3,
+            }}
+          >
+            {!special_data && (
+              <>
+                <ResetStorage
+                  user_id={user_id}
+                  page_name={page_name}
+                  table_name={table_name}
+                />
+                <UpdateTable mutate={mutate} />
+              </>
+            )}
+            <HideColumn
+              columns={table.options.columns}
+              user_id={user_id}
+              page_name={page_name}
+              table_name={table_name}
+            />
+            {need_filter && (
+              <FilterColumn
+                columns={columns}
+                table_url={table_url}
+                user_id={user_id}
+                page_name={page_name}
+                table_name={table_name}
+              />
+            )}
+            {special_filter && setFilterData && (
+              <FilterCustom
+                filterData={special_filter}
+                setFilterData={setFilterData}
+              />
+            )}
+          </Box>
+        )}
+      </Box>
+      {enablePagination &&
+        ["both", "top"].includes(positionPagination ?? "") && (
+          <DataTable_TablePagination position="top" table={table} />
+        )}
+      <DataTable_LinearProgressBar isTopToolbar table={table} />
+    </Box>
+  );
+};
+
+export default DataTable_TopToolbar;
--- a/src/core/components/DataTable/update/UpdateTable.jsx
+++ b/src/core/components/DataTable/update/UpdateTable.jsx
@@ -0,0 +1,19 @@
+"use client";
+import { IconButton, Tooltip } from "@mui/material";
+import RestartAltIcon from "@mui/icons-material/RestartAlt";
+
+function UpdateTable({ mutate }) {
+  const update = () => {
+    mutate();
+  };
+
+  return (
+    <Tooltip title="بروزرسانی اطلاعات">
+      <IconButton onClick={update} aria-label="refactor table">
+        <RestartAltIcon />
+      </IconButton>
+    </Tooltip>
+  );
+}
+
+export default UpdateTable;
--- a/src/core/components/DataTableWithAuth.jsx
+++ b/src/core/components/DataTableWithAuth.jsx
@@ -0,0 +1,8 @@
+import DataTable from "@/core/components/DataTable";
+import { useAuth } from "@/lib/contexts/auth";
+
+const DataTableWithAuth = (props) => {
+  const { user } = useAuth();
+  return <DataTable user_id={user.username} {...props} />;
+};
+export default DataTableWithAuth;
--- a/src/core/components/FilterDrawer/FilterController.jsx
+++ b/src/core/components/FilterDrawer/FilterController.jsx
@@ -0,0 +1,25 @@
+import { Controller } from "react-hook-form";
+import FilterField from "./FilterField";
+
+const FilterController = ({ item, control, reset, errors }) => {
+  return (
+    <Controller
+      name={`${item.id}`}
+      control={control}
+      render={({ field: { value, onBlur, onChange } }) => {
+        return (
+          <FilterField
+            item={item}
+            filterParameters={value}
+            handleChange={onChange}
+            handleBlur={onBlur}
+            dependencyFieldValue={null}
+            resetForm={() => reset()}
+            errors={errors}
+          />
+        );
+      }}
+    />
+  );
+};
+export default FilterController;
--- a/src/core/components/FilterDrawer/FilterControllerWithDependency.jsx
+++ b/src/core/components/FilterDrawer/FilterControllerWithDependency.jsx
@@ -0,0 +1,27 @@
+import { Controller, useWatch } from "react-hook-form";
+import FilterField from "./FilterField";
+
+const FilterControllerWithDependency = ({ item, control, reset, errors }) => {
+  const dependencyField = useWatch({ control, name: item.dependencyId });
+
+  return (
+    <Controller
+      name={`${item.id}`}
+      control={control}
+      render={({ field: { value, name, onBlur, onChange } }) => {
+        return (
+          <FilterField
+            item={item}
+            filterParameters={value}
+            handleChange={onChange}
+            handleBlur={onBlur}
+            dependencyFieldValue={dependencyField}
+            resetForm={() => reset()}
+            errors={errors}
+          />
+        );
+      }}
+    />
+  );
+};
+export default FilterControllerWithDependency;
--- a/src/core/components/FilterDrawer/FilterField.jsx
+++ b/src/core/components/FilterDrawer/FilterField.jsx
@@ -0,0 +1,105 @@
+import { useState } from "react";
+import CustomTextFieldRange from "./fieldsType/CustomTextFieldRange";
+import CustomSelect from "./fieldsType/CustomSelect";
+import CustomDatePicker from "../CustomDatePicker";
+import CustomDatePickerRange from "./fieldsType/CustomDate/CustomDatePickerRange";
+import CustomSelectMultiple from "./fieldsType/CustomSelectMultiple";
+import CustomTextField from "./fieldsType/CustomTextField";
+import FilterOptionList from "./FilterOptionList";
+
+const filterModeOptionFa = {
+  equals: "برابر",
+  notEquals: "نابرابر",
+  contains: "شامل",
+  lessThan: "کوچکتر",
+  greaterThan: "بزرگتر",
+  fuzzy: "فازی",
+  between: "مابین",
+};
+
+function FilterField({
+  item,
+  filterParameters,
+  handleChange,
+  handleBlur,
+  dependencyFieldValue,
+  setFieldValue,
+  resetForm,
+  errors,
+}) {
+  const [anchorEl, setAnchorEl] = useState(null);
+  const defaultFilterTranslation =
+    filterModeOptionFa[filterParameters.filterMode] ||
+    filterParameters.filterMode;
+
+  const handleOpenFilterBox = (event) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const renderField = () => {
+    const commonProps = {
+      item,
+      filterParameters,
+      defaultFilterTranslation,
+      handleOpenFilterBox,
+      dependencyFieldValue,
+      setFieldValue,
+      handleChange,
+      handleBlur,
+      errors,
+    };
+
+    switch (filterParameters.datatype) {
+      case "numeric":
+        if (filterParameters.filterMode === "between") {
+          return <CustomTextFieldRange {...commonProps} />;
+        }
+        if (filterParameters.filterMode === "equals") {
+          return item.SelectComponent ? (
+            <item.SelectComponent {...commonProps} />
+          ) : (
+            <CustomSelect {...commonProps} />
+          );
+        }
+        break;
+      case "date":
+        if (filterParameters.filterMode === "equals") {
+          return <CustomDatePicker {...commonProps} />;
+        }
+        if (filterParameters.filterMode === "between") {
+          return <CustomDatePickerRange {...commonProps} />;
+        }
+        break;
+
+      case "array":
+        if (filterParameters.filterMode === "equals") {
+          return <CustomSelectMultiple {...commonProps} />;
+        }
+        break;
+
+      default:
+        return <CustomTextField {...commonProps} />;
+    }
+  };
+
+  return (
+    <>
+      {renderField()}
+      {Array.isArray(item.filterModeOptions) && (
+        <FilterOptionList
+          item={item}
+          anchorEl={anchorEl}
+          setAnchorEl={setAnchorEl}
+          filterParameters={filterParameters}
+          filterType={filterParameters.filterMode}
+          handleChange={handleChange}
+          resetForm={resetForm}
+          filterOption={item.filterModeOptions}
+          filterModeOptionFa={filterModeOptionFa}
+        />
+      )}
+    </>
+  );
+}
+
+export default FilterField;
--- a/src/core/components/FilterDrawer/FilterOptionList.jsx
+++ b/src/core/components/FilterDrawer/FilterOptionList.jsx
@@ -0,0 +1,58 @@
+"use client";
+
+import { ListItem, Menu } from "@mui/material";
+import { useState } from "react";
+
+function FilterOptionList({
+  filterType,
+  filterOption,
+  filterParameters,
+  anchorEl,
+  filterModeOptionFa,
+  setAnchorEl,
+  handleChange,
+}) {
+  const [selectedFilter, setSelectedFilter] = useState(filterType);
+
+  const handleChangeItem = (event, index) => {
+    handleChange({
+      ...filterParameters,
+      value: filterOption[index] === "between" ? ["", ""] : "",
+      filterMode: filterOption[index],
+    });
+    setSelectedFilter(filterOption[index]);
+    setAnchorEl(null);
+  };
+
+  const handleCloseFilterBox = () => {
+    setAnchorEl(null);
+  };
+
+  return (
+    <Menu
+      id="simple-menu"
+      anchorEl={anchorEl}
+      keepMounted
+      open={Boolean(anchorEl)}
+      onClose={handleCloseFilterBox}
+    >
+      {filterOption.map((option, index) => (
+        <ListItem
+          key={index}
+          onClick={(event) => handleChangeItem(event, index)}
+          selected={option === selectedFilter}
+          sx={{
+            cursor: "pointer",
+            width: "100px",
+            display: "flex",
+            justifyContent: "center",
+          }}
+        >
+          {filterModeOptionFa[option]}
+        </ListItem>
+      ))}
+    </Menu>
+  );
+}
+
+export default FilterOptionList;
--- a/src/core/components/FilterDrawer/fieldsType/CustomDate/CustomDatePicker.jsx
+++ b/src/core/components/FilterDrawer/fieldsType/CustomDate/CustomDatePicker.jsx
@@ -0,0 +1,31 @@
+import React from "react";
+import MuiDatePicker from "@/core/components/DataTable/filter/fieldsType/CustomDate/MuiDatePicker";
+import { Typography } from "@mui/material";
+
+function CustomDatePicker({
+  column,
+  filterParameters,
+  defaultFilterTranslation,
+  handleChange,
+}) {
+  return (
+    <MuiDatePicker
+      name={`${column.id}.value`}
+      value={filterParameters.value}
+      setFieldValue={(name, formattedDate) => {
+        handleChange({ ...filterParameters, value: formattedDate });
+      }}
+      placeholder={column.header}
+      helperText={
+        <Typography
+          variant="button"
+          sx={{ color: (theme) => theme.palette.primary.main }}
+        >
+          نوع فیلتر: {defaultFilterTranslation} (تاریخ)
+        </Typography>
+      }
+    />
+  );
+}
+
+export default CustomDatePicker;
--- a/src/core/components/FilterDrawer/fieldsType/CustomDate/CustomDatePickerRange.jsx
+++ b/src/core/components/FilterDrawer/fieldsType/CustomDate/CustomDatePickerRange.jsx
@@ -0,0 +1,60 @@
+"use client";
+
+import React from "react";
+import { Box, Typography } from "@mui/material";
+import MuiDatePicker from "@/core/components/DataTable/filter/fieldsType/CustomDate/MuiDatePicker";
+
+function CustomDatePickerRange({
+  item,
+  filterParameters,
+  defaultFilterTranslation,
+  handleChange,
+  errors,
+}) {
+  return (
+    <Box sx={{ display: "flex", gap: 1 }}>
+      <MuiDatePicker
+        label={item.header}
+        name={`${item.id}.value[0]`}
+        value={filterParameters.value[0]}
+        setFieldValue={(name, formattedDate) => {
+          handleChange({
+            ...filterParameters,
+            value: [formattedDate, filterParameters.value[1]],
+          });
+        }}
+        maxDate={filterParameters.value[1]}
+        placeholder={`از تاریخ`}
+        helperText={
+          <Typography
+            variant="button"
+            sx={{ color: (theme) => theme.palette.primary.main }}
+          >
+            نوع فیلتر: {defaultFilterTranslation} (تاریخ)
+          </Typography>
+        }
+      />
+      <MuiDatePicker
+        label={item.header}
+        name={`${item.id}.value[1]`}
+        value={filterParameters.value[1]}
+        setFieldValue={(name, formattedDate) => {
+          handleChange({
+            ...filterParameters,
+            value: [filterParameters.value[0], formattedDate],
+          });
+        }}
+        minDate={filterParameters.value[0]}
+        placeholder={`تا تاریخ`}
+        helperText={
+          errors?.[`${item.id}`]?.value
+            ? errors?.[`${item.id}`]?.value.message
+            : null
+        }
+        error={Boolean(errors?.[`${item.id}`]?.value)}
+      />
+    </Box>
+  );
+}
+
+export default CustomDatePickerRange;
--- a/src/core/components/FilterDrawer/fieldsType/CustomDate/MuiDatePicker.jsx
+++ b/src/core/components/FilterDrawer/fieldsType/CustomDate/MuiDatePicker.jsx
@@ -0,0 +1,86 @@
+import React from "react";
+import { LocalizationProvider, MobileDatePicker } from "@mui/x-date-pickers";
+import { AdapterDateFnsJalali } from "@mui/x-date-pickers/AdapterDateFnsJalali";
+import { faIR } from "@mui/x-date-pickers/locales";
+import { Box, FormHelperText, IconButton, InputAdornment } from "@mui/material";
+import ClearIcon from "@mui/icons-material/Clear";
+import moment from "jalali-moment";
+
+function MuiDatePicker({
+  label,
+  value,
+  setFieldValue,
+  name,
+  minDate,
+  maxDate,
+  helperText,
+  placeholder,
+  error,
+}) {
+  return (
+    <Box sx={{ display: "flex", flexDirection: "column", my: 1 }}>
+      <LocalizationProvider
+        dateAdapter={AdapterDateFnsJalali}
+        localeText={
+          faIR.components.MuiLocalizationProvider.defaultProps.localeText
+        }
+      >
+        <MobileDatePicker
+          value={value ? new Date(value) : null}
+          sx={{ width: "100%" }}
+          id={name}
+          label={label}
+          name={name}
+          closeOnSelect={true}
+          aria-describedby="component-helper-text"
+          onChange={(value) => {
+            const date = new Date(value);
+            const formattedDate = moment(date)
+              .locale("en")
+              .format("YYYY-MM-DD");
+            setFieldValue(name, formattedDate);
+          }}
+          minDate={minDate ? new Date(minDate) : null}
+          maxDate={maxDate ? new Date(maxDate) : null}
+          slotProps={{
+            textField: {
+              size: "small",
+              error: error,
+              placeholder: placeholder,
+              InputProps: {
+                endAdornment: (
+                  <InputAdornment position="end">
+                    <IconButton
+                      size="small"
+                      onClick={(event) => {
+                        event.stopPropagation();
+                        setFieldValue(name, "");
+                      }}
+                      sx={{
+                        color: "#bfbfbf",
+                        "&:hover": {
+                          backgroundColor: "rgba(189, 189, 189, 0.1)",
+                          color: "#363434",
+                        },
+                      }}
+                    >
+                      <ClearIcon />
+                    </IconButton>
+                  </InputAdornment>
+                ),
+              },
+              InputLabelProps: {
+                shrink: true,
+              },
+            },
+          }}
+        />
+        {/* <FormHelperText id="component-helper-text" variant="caption" sx={{ ml: 2, color: error ? "#d32f2f" : "unset", fontWeight: 'bold' }}>
+                    {helperText ? helperText : ""}
+                </FormHelperText> */}
+      </LocalizationProvider>
+    </Box>
+  );
+}
+
+export default MuiDatePicker;
--- a/src/core/components/FilterDrawer/fieldsType/CustomSelect.jsx
+++ b/src/core/components/FilterDrawer/fieldsType/CustomSelect.jsx
@@ -0,0 +1,38 @@
+"use client";
+
+import {
+  FormControl,
+  InputLabel,
+  MenuItem,
+  OutlinedInput,
+  Select,
+} from "@mui/material";
+function CustomSelect({ item, filterParameters, handleChange }) {
+  return (
+    <FormControl fullWidth sx={{ marginY: 1 }} size="small">
+      <InputLabel id={`label${item.id}`} shrink>
+        {item.header}
+      </InputLabel>
+      <Select
+        labelId={`label${item.id}`}
+        id={item.id}
+        name={`${item.id}.value`}
+        value={filterParameters.value}
+        input={<OutlinedInput label={item.header} />}
+        size="small"
+        onChange={(e) =>
+          handleChange({ ...filterParameters, value: e.target.value })
+        }
+        displayEmpty
+      >
+        {item.selectOption().map((option) => (
+          <MenuItem key={option.value} value={option.value}>
+            {option.label}
+          </MenuItem>
+        ))}
+      </Select>
+    </FormControl>
+  );
+}
+
+export default CustomSelect;
--- a/src/core/components/FilterDrawer/fieldsType/CustomSelectByDependency.jsx
+++ b/src/core/components/FilterDrawer/fieldsType/CustomSelectByDependency.jsx
@@ -0,0 +1,44 @@
+"use client";
+
+import {
+  FormControl,
+  InputLabel,
+  MenuItem,
+  OutlinedInput,
+  Select,
+} from "@mui/material";
+function CustomSelectByDependency({
+  item,
+  filterParameters,
+  value,
+  handleChange,
+  selectOption,
+}) {
+  return (
+    <FormControl fullWidth sx={{ my: 1 }} size="small">
+      <InputLabel id={`label${item.id}`} shrink>
+        {item.header}
+      </InputLabel>
+      <Select
+        labelId={`label${item.id}`}
+        id={item.id}
+        name={`${item.id}.value`}
+        value={value}
+        size="small"
+        input={<OutlinedInput label={item.header} />}
+        onChange={(e) =>
+          handleChange({ ...filterParameters, value: e.target.value })
+        }
+        displayEmpty
+      >
+        {selectOption.map((option) => (
+          <MenuItem key={option.value} value={option.value}>
+            {option.label}
+          </MenuItem>
+        ))}
+      </Select>
+    </FormControl>
+  );
+}
+
+export default CustomSelectByDependency;
--- a/src/core/components/FilterDrawer/fieldsType/CustomSelectMultiple.jsx
+++ b/src/core/components/FilterDrawer/fieldsType/CustomSelectMultiple.jsx
@@ -0,0 +1,57 @@
+"use client";
+
+import {
+  Box,
+  Chip,
+  FormControl,
+  FormHelperText,
+  InputLabel,
+  MenuItem,
+  OutlinedInput,
+  Select,
+  Typography,
+} from "@mui/material";
+
+function CustomSelectMultiple({ item, filterParameters, handleChange }) {
+  const selectOption = item.selectOption;
+
+  const getLabelForValue = (value) => {
+    const option = selectOption.find((opt) => opt.value === value);
+    return option ? option.label : value;
+  };
+
+  return (
+    <FormControl fullWidth sx={{ marginY: 1 }} size="small">
+      <InputLabel htmlFor="uncontrolled-native" id={`label${item.id}`}>
+        {item.header}
+      </InputLabel>
+      <Select
+        labelId={`label${item.id}`}
+        id={item.id}
+        value={filterParameters.value}
+        multiple
+        size="small"
+        onChange={(e) =>
+          handleChange({ ...filterParameters, value: e.target.value })
+        }
+        renderValue={(selected) => (
+          <Box sx={{ display: "flex", flexWrap: "wrap", gap: 0.5 }}>
+            {selected.map((value) => (
+              <Chip key={value} label={getLabelForValue(value)} />
+            ))}
+          </Box>
+        )}
+        input={<OutlinedInput label={item.header} />}
+        InputLabelProps={{ shrink: true }}
+      >
+        {selectOption.map((option) => (
+          <MenuItem key={option.value} value={option.value}>
+            {option.label}
+          </MenuItem>
+        ))}
+      </Select>
+    </FormControl>
+  );
+}
+
+export default CustomSelectMultiple;
--- a/src/core/components/FilterDrawer/fieldsType/CustomTextField.jsx
+++ b/src/core/components/FilterDrawer/fieldsType/CustomTextField.jsx
@@ -0,0 +1,41 @@
+import { InputAdornment, TextField, Typography } from "@mui/material";
+import FilterListIcon from "@mui/icons-material/FilterList";
+
+function CustomTextField({
+  item,
+  filterParameters,
+  handleOpenFilterBox,
+  handleBlur,
+  handleChange,
+}) {
+  return (
+    <TextField
+      id={item.id}
+      name={item.id}
+      label={item.header}
+      value={filterParameters.value}
+      onChange={(e) =>
+        handleChange({ ...filterParameters, value: e.target.value })
+      }
+      onBlur={handleBlur}
+      fullWidth
+      variant="outlined"
+      size="small"
+      sx={{ my: 1 }}
+      InputProps={{
+        endAdornment: (
+          <InputAdornment
+            position="end"
+            sx={{ cursor: "pointer" }}
+            onClick={handleOpenFilterBox}
+          >
+            <FilterListIcon />
+          </InputAdornment>
+        ),
+      }}
+      InputLabelProps={{ shrink: true }}
+    />
+  );
+}
+
+export default CustomTextField;
--- a/src/core/components/FilterDrawer/fieldsType/CustomTextFieldRange.jsx
+++ b/src/core/components/FilterDrawer/fieldsType/CustomTextFieldRange.jsx
@@ -0,0 +1,85 @@
+import { Box, InputAdornment, TextField, Typography } from "@mui/material";
+import FilterListIcon from "@mui/icons-material/FilterList";
+
+function CustomTextFieldRange({
+  item,
+  defaultFilterTranslation,
+  handleOpenFilterBox,
+  handleChange,
+  filterParameters,
+  handleBlur,
+  errors,
+}) {
+  return (
+    <Box sx={{ display: "flex" }}>
+      <TextField
+        id={`${item.id}.value[0]`}
+        name={`${item.id}.value[0]`}
+        onChange={(e) =>
+          handleChange({
+            ...filterParameters,
+            value: [e.target.value, filterParameters.value[1]],
+          })
+        }
+        onBlur={handleBlur}
+        label={<Typography>از {item.header}</Typography>}
+        value={filterParameters.value[0]}
+        fullWidth
+        error={
+          touched?.[`${item.id}`]?.value &&
+          Boolean(errors?.[`${item.id}`]?.value)
+        }
+        helperText={
+          <Typography
+            variant="caption"
+            sx={{
+              color: (theme) => theme.palette.primary.main,
+              fontWeight: "bold",
+            }}
+          >
+            نوع فیلتر: {defaultFilterTranslation}
+          </Typography>
+        }
+        variant="outlined"
+        size="small"
+        sx={{ my: 1, marginRight: 1 }}
+      />
+      <TextField
+        id={`${item.id}.value[1]`}
+        name={`${item.id}.value[1]`}
+        onChange={(e) =>
+          handleChange({
+            ...filterParameters,
+            value: [filterParameters.value[0], e.target.value],
+          })
+        }
+        onBlur={handleBlur}
+        error={Boolean(errors?.[`${item.id}`]?.value)}
+        helperText={
+          errors?.[`${item.id}`]?.value
+            ? errors?.[`${item.id}`]?.value.message
+            : null
+        }
+        label={<Typography>تا {item.header}</Typography>}
+        value={filterParameters.value[1]}
+        fullWidth
+        variant="outlined"
+        size="small"
+        sx={{ my: 1 }}
+        InputProps={{
+          endAdornment: (
+            <InputAdornment
+              position="end"
+              sx={{ cursor: "pointer" }}
+              onClick={handleOpenFilterBox}
+            >
+              <FilterListIcon />
+            </InputAdornment>
+          ),
+        }}
+      />
+    </Box>
+  );
+}
+
+export default CustomTextFieldRange;
--- a/src/core/components/FilterDrawer/index.jsx
+++ b/src/core/components/FilterDrawer/index.jsx
@@ -0,0 +1,160 @@
+import { yupResolver } from "@hookform/resolvers/yup";
+import { Cancel, FilterAlt } from "@mui/icons-material";
+import { Box, Button, IconButton, Typography } from "@mui/material";
+import { useForm } from "react-hook-form";
+import * as Yup from "yup";
+import ScrollBox from "../ScrollBox";
+import FilterController from "./FilterController";
+import FilterControllerWithDependency from "./FilterControllerWithDependency";
+
+const headerSx = {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  px: 2,
+  py: 1,
+  backgroundColor: (theme) => theme.palette.primary.main,
+  boxShadow:
+    "rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px",
+  maxWidth: "450px",
+};
+
+const headerTitleSx = { display: "flex", alignItems: "center" };
+const headerIconSx = { color: "#fff", mr: 1 };
+const iconButtonSx = { color: "#fff" };
+
+const formContainerSx = { px: 2, py: 3 };
+const footerSx = {
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  pb: 2,
+};
+
+const submitButtonSx = {
+  px: 8,
+  boxShadow:
+    "rgba(0, 0, 0, 0.23) 0px 6px 6px, rgba(0, 0, 0, 0.19) 10px 0px 20px",
+  backgroundColor: "primary2",
+  ":hover": { backgroundColor: "primary2" },
+};
+
+const validationSchema = Yup.object({
+  activity_date_time: Yup.array()
+    .of(Yup.string().nullable())
+    .test({
+      test(value, ctx) {
+        const [start, end] = value || ["", ""];
+        if ((start && !end) || (!start && end)) {
+          return ctx.createError({ message: "این بخش را تکمیل نمایید" });
+        }
+        return true;
+      },
+    }),
+});
+
+const FilterDrawer = ({ defaultValues, setFilterData, closeDrawer }) => {
+  const {
+    control,
+    errors,
+    reset,
+    handleSubmit,
+    formState: { isDirty },
+  } = useForm({
+    defaultValues,
+    resolver: yupResolver(
+      Yup.object(
+        Object.keys(defaultValues).reduce((acc, key) => {
+          const initialValue = defaultValues[key];
+          if (initialValue.filterMode === "between") {
+            acc[key] = Yup.object().shape({
+              value: Yup.array()
+                .of(Yup.string().nullable())
+                .test({
+                  test(value, ctx) {
+                    const [start, end] = value || ["", ""];
+                    if (
+                      initialValue.datatype === "numeric" &&
+                      parseInt(end, 10) <= parseInt(start, 10)
+                    ) {
+                      return ctx.createError({
+                        message: `مقدار وارده باید بیشتر از (${start}) باشد`,
+                      });
+                    } else if ((start && !end) || (!start && end)) {
+                      return ctx.createError({
+                        message: "این بخش را تکمیل نمایید",
+                      });
+                    }
+                    return true;
+                  },
+                }),
+            });
+          }
+          return acc;
+        }, {}),
+      ),
+    ),
+    mode: "all",
+  });
+
+  const onSubmit = (data) => {
+    setFilterData(data);
+    closeDrawer();
+  };
+
+  return (
+    <>
+      <Box sx={headerSx}>
+        <Box sx={headerTitleSx}>
+          <FilterAlt sx={headerIconSx} />
+          <Typography variant="h6" sx={{ color: "#fff" }}>
+            فیلتر
+          </Typography>
+        </Box>
+        <IconButton sx={iconButtonSx} onClick={closeDrawer}>
+          <Cancel sx={{ fontSize: "1em" }} />
+        </IconButton>
+      </Box>
+      <ScrollBox>
+        <form onSubmit={handleSubmit(onSubmit)}>
+          <Box sx={formContainerSx}>
+            {Object.values(defaultValues).map(
+              (item) =>
+                item.enable &&
+                (item.dependencyId ? (
+                  <FilterControllerWithDependency
+                    key={item.id}
+                    item={item}
+                    control={control}
+                    errors={errors}
+                    reset={reset}
+                  />
+                ) : (
+                  <FilterController
+                    key={item.id}
+                    item={item}
+                    control={control}
+                    errors={errors}
+                    reset={reset}
+                  />
+                )),
+            )}
+
+            <Box sx={footerSx}>
+              <Button
+                type="submit"
+                variant="contained"
+                size="large"
+                disabled={!isDirty}
+                sx={submitButtonSx}
+              >
+                اعمال فیلتر
+              </Button>
+            </Box>
+          </Box>
+        </form>
+      </ScrollBox>
+    </>
+  );
+};
+export default FilterDrawer;
--- a/src/core/components/NotificationDesign/AskForKeepData.jsx
+++ b/src/core/components/NotificationDesign/AskForKeepData.jsx
@@ -0,0 +1,94 @@
+"use client";
+
+import SaveIcon from "@mui/icons-material/Save";
+import { Box, Button, Typography } from "@mui/material";
+import DownloadIcon from "@mui/icons-material/Download";
+import { toast } from "react-toastify";
+import useTableSetting from "@/lib/hooks/useTableSetting";
+import { flattenObjectOfObjects } from "@/core/utils/flattenObjectOfObjects";
+
+function AskForKeepData({
+  filterData,
+  sortData,
+  hideData,
+  user_id,
+  page_name,
+  table_name,
+  columns,
+}) {
+  const { filterAction, sortAction, hideAction } = useTableSetting();
+
+  const filteredHideData = Object.fromEntries(
+    Object.entries(hideData).filter(([key, value]) => value === false),
+  );
+
+  const flattenHideData = flattenObjectOfObjects(filteredHideData);
+
+  const onSaveFilter = () => {
+    const filteredItems = Object.keys(filterData)
+      .map((key) => {
+        const value = filterData[key].value;
+        if (
+          value !== "" &&
+          !(
+            Array.isArray(value) &&
+            (value.length === 0 ||
+              (value.length === 2 && value[0] === "" && value[1] === ""))
+          )
+        ) {
+          return filterData[key];
+        }
+      })
+      .filter(Boolean);
+    filterAction(user_id, page_name, table_name, filteredItems, columns);
+    sortAction(user_id, page_name, table_name, sortData, columns);
+    hideAction(user_id, page_name, table_name, flattenHideData, columns);
+    toast.dismiss({ containerId: "datatable" });
+  };
+
+  const handleDismiss = () => {
+    toast.dismiss({ containerId: "datatable" });
+  };
+
+  return (
+    <Box sx={{ width: "100%" }}>
+      <Box
+        sx={{
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          mb: 1,
+        }}
+      >
+        <Typography
+          color="primary.main"
+          variant="subtitle1"
+          sx={{ fontWeight: "500" }}
+        >
+          ذخیره سازی تغییرات
+        </Typography>
+        <SaveIcon sx={{ color: "primary.main" }} />
+      </Box>
+      <Box sx={{ display: "flex", flexDirection: "column" }}>
+        <Typography variant="caption">
+          آیا مایل به ذخیره تغییر های اعمال شده برای دفعات بعد هستید؟
+        </Typography>
+      </Box>
+      <Box sx={{ display: "flex", gap: 1, mt: 2 }}>
+        <Button
+          variant="contained"
+          size="small"
+          endIcon={<DownloadIcon />}
+          onClick={onSaveFilter}
+        >
+          ذخیره
+        </Button>
+        <Button variant="outlined" size="small" onClick={handleDismiss}>
+          رد کردن
+        </Button>
+      </Box>
+    </Box>
+  );
+}
+
+export default AskForKeepData;
--- a/src/core/components/PageTitle.jsx
+++ b/src/core/components/PageTitle.jsx
@@ -0,0 +1,18 @@
+"use client";
+
+import { Chip, Divider, Typography } from "@mui/material";
+
+const PageTitle = ({ title }) => {
+  return (
+    <Divider>
+      <Chip
+        label={
+          <Typography fontSize={14} fontWeight={500}>
+            {title}
+          </Typography>
+        }
+      />
+    </Divider>
+  );
+};
+export default PageTitle;
--- a/src/core/components/Profile/ChangePassword/Form.jsx
+++ b/src/core/components/Profile/ChangePassword/Form.jsx
@@ -35,17 +35,17 @@ const validationSchema = object({
    ),
 });

+const defaultValues = {
+  current_password: "",
+  new_password: "",
+  repeat_new_password: "",
+};
+
 const Form = ({ handleCloseForm, setLoading }) => {
  const request = useRequest();
  const [showNewPassword, setShowNewPassword] = useState();
  const [showRepeatNewPassword, setShowRepeatNewPassword] = useState();

-  const defaultValues = {
-    current_password: "",
-    new_password: "",
-    repeat_new_password: "",
-  };
-
  const {
    register,
    handleSubmit,
--- a/src/core/components/ScrollBox.jsx
+++ b/src/core/components/ScrollBox.jsx
@@ -0,0 +1,20 @@
+import { Box, styled } from "@mui/material";
+
+const ScrollBox = styled(Box)(({ theme }) => ({
+  flexGrow: 1,
+  overflowY: "auto",
+  maxWidth: "450px",
+  "::-webkit-scrollbar": {
+    width: "5px",
+  },
+  "::-webkit-scrollbar-track": {
+    boxShadow: "inset 0 0 5px #fff",
+    borderRadius: "5px",
+  },
+  "::-webkit-scrollbar-thumb": {
+    background: theme.palette.primary.dark,
+    borderRadius: "0px",
+  },
+}));
+
+export default ScrollBox;