complete header of table and pages with a new component and styling in responsive design of them

src/components/dashboard/inquiryPrivacyFencing/Actions/Create/index.jsx

@@ -1,12 +1,15 @@
 "use client";
 import DialogTransition from "@/core/components/DialogTransition";
 import { AddCircle, Close } from "@mui/icons-material";
-import { Button, Dialog, DialogTitle, IconButton } from "@mui/material";
+import { Button, Dialog, DialogTitle, IconButton, useMediaQuery } from "@mui/material";
 import CreateOrUpdateForm from "../../Forms/CreateOrUpdate";
 import { SET_INQUIRE_PRIVACY_FENCING } from "@/core/utils/routes";
 import { useState } from "react";
+import { useTheme } from "@emotion/react";
 
 const InquiryPrivacyFencingCreate = ({ mutate }) => {
+    const theme = useTheme();
+    const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
     const [open, setOpen] = useState(false);
 
     const handleOpen = () => {
@@ -19,11 +22,22 @@ const InquiryPrivacyFencingCreate = ({ mutate }) => {
 
     return (
         <>
-            <Button variant="contained" color="primary2" startIcon={<AddCircle />} onClick={handleOpen}>
-                ایجاد پاسخ به استعلام
-            </Button>
+            {isMobile ? (
+                <IconButton aria-label="ایجاد پاسخ به استعلام" color="primary" onClick={handleOpen}>
+                    <AddCircle sx={{ fontSize: "25px" }} />
+                </IconButton>
+            ) : (
+                <Button
+                    variant="contained"
+                    color="primary"
+                    startIcon={<AddCircle />}
+                    onClick={handleOpen}
+                >
+                    ایجاد پاسخ به استعلام
+                </Button>
+            )}
             <Dialog open={open} fullScreen TransitionComponent={DialogTransition}>
-                <DialogTitle sx={{ m: 0, p: 2, borderBottom: 1, borderColor: 'divider' }} id="create-dialog">
+                <DialogTitle sx={{ m: 0, p: 2, borderBottom: 1, borderColor: "divider" }} id="create-dialog">
                     ایجاد پاسخ به استعلام
                 </DialogTitle>
                 <IconButton

src/components/dashboard/inquiryPrivacyFencing/index.jsx

@@ -4,6 +4,8 @@ import { useMemo } from "react";
 import Toolbar from "@/components/dashboard/inquiryPrivacyFencing/Toolbar";
 import DataTable from "@/core/components/DataTable";
 import { GET_INQUIRY_PRIVACY_FENCING_ROUTE } from "@/core/utils/routes";
+import { Box } from "@mui/material";
+import PageTitle from "@/core/components/PageTitle";
 
 const InquiryPrivacyFencingPage = () => {
     const columns = useMemo(
@@ -233,15 +235,21 @@ const InquiryPrivacyFencingPage = () => {
     );
 
     return (
-        <DataTable
-            need_filter={false}
-            columns={columns}
-            table_url={GET_INQUIRY_PRIVACY_FENCING_ROUTE}
-            user_id={0}
-            page_name={"inquiryPrivacyFencing"}
-            table_name={"inquiryPrivacyFencingList"}
-            TableToolbar={Toolbar}
-        />
+        <>
+            <PageTitle title={"احداث و بهره برداری دیوارکشی و مستحدثات"} />
+            <Box sx={{ p: 2, border: "1px solid #e1e1e1" }}>
+                <DataTable
+                    table_title={"لیست استعلام ها"}
+                    need_filter={false}
+                    columns={columns}
+                    table_url={GET_INQUIRY_PRIVACY_FENCING_ROUTE}
+                    user_id={0}
+                    page_name={"inquiryPrivacyFencing"}
+                    table_name={"inquiryPrivacyFencingList"}
+                    TableToolbar={Toolbar}
+                />
+            </Box>
+        </>
     );
 };
 export default InquiryPrivacyFencingPage;

src/core/components/DataTable/Main.js

@@ -11,7 +11,17 @@ import { flattenObjectOfObjects } from "@/core/utils/flattenObjectOfObjects";
 const DataTable_Main = (props) => {
     const request = useRequest();
     const { filterData, sortData, setSortData, hideData } = useDataTable();
-    const { need_filter, table_url, user_id, page_name, table_name, columns, initialStateProps, TableToolbar } = props;
+    const {
+        need_filter,
+        table_url,
+        user_id,
+        page_name,
+        table_name,
+        columns,
+        initialStateProps,
+        TableToolbar,
+        table_title,
+    } = props;
     const flatColumns = flattenArrayOfObjects(columns, "columns");
     const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 10 });
     const flattenHideData = flattenObjectOfObjects(hideData);
@@ -109,6 +119,7 @@ const DataTable_Main = (props) => {
     return (
         <DataTable_Paper
             table={table}
+            table_title={table_title}
             need_filter={need_filter}
             mutate={mutate}
             table_url={table_url}

src/core/components/DataTable/table/Paper.js

@@ -5,16 +5,17 @@ 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,
-    ...rest
-}) => {
+                             table,
+                             table_name,
+                             columns,
+                             user_id,
+                             page_name,
+                             mutate,
+                             need_filter,
+                             table_url,
+                             table_title,
+                             ...rest
+                         }) => {
     const {
         getState,
         options: {
@@ -49,19 +50,19 @@ const DataTable_Paper = ({
             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,
-                      }
+                        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,
             }}
@@ -84,6 +85,7 @@ const DataTable_Paper = ({
                         user_id={user_id}
                         page_name={page_name}
                         table_name={table_name}
+                        table_title={table_title}
                     />
                 ))}
             <DataTable_TableContainer table={table} />

src/core/components/DataTable/toolbar/TopToolbar.js

@@ -1,5 +1,5 @@
 import { getCommonToolbarStyles, parseFromValuesOrFunc } from "@/core/utils/utils";
-import { Box, useMediaQuery } from "@mui/material";
+import { Box, Typography, useMediaQuery } from "@mui/material";
 import DataTable_LinearProgressBar from "./LinearProgressBar";
 import DataTable_TablePagination from "./TablePagination";
 import FilterColumn from "@/core/components/DataTable/filter";
@@ -7,7 +7,17 @@ import UpdateTable from "@/core/components/DataTable/update/UpdateTable";
 import ResetStorage from "@/core/components/DataTable/reset/ResetStorage";
 import HideColumn from "@/core/components/DataTable/hide";
 
-const DataTable_TopToolbar = ({ mutate, need_filter, table, columns, table_url, user_id, page_name, table_name }) => {
+const DataTable_TopToolbar = ({
+                                  mutate,
+                                  need_filter,
+                                  table,
+                                  columns,
+                                  table_url,
+                                  user_id,
+                                  page_name,
+                                  table_name,
+                                  table_title,
+                              }) => {
     const {
         getState,
         options: {
@@ -47,11 +57,12 @@ const DataTable_TopToolbar = ({ mutate, need_filter, table, columns, table_url,
         >
             <Box
                 sx={{
-                    alignItems: "flex-start",
+                    flexWrap: { xs: "wrap", sm: "no-wrap" },
                     boxSizing: "border-box",
                     display: "flex",
                     gap: "0.5rem",
                     justifyContent: "space-between",
+                    alignItems: "center",
                     py: "0.5rem",
                     position: stackAlertBanner ? "relative" : "absolute",
                     right: 0,
@@ -59,15 +70,22 @@ const DataTable_TopToolbar = ({ mutate, need_filter, table, columns, table_url,
                     width: "100%",
                 }}
             >
-                {renderTopToolbarCustomActions?.({ table }) ?? <span />}
+                <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={{
-                            alignItems: "center",
-                            display: "flex",
-                            flexWrap: "wrap-reverse",
                             gap: "0.5rem",
+                            flexWrap: "wrap-reverse",
+                            display: "flex",
+                            alignItems: "center",
                             justifyContent: "flex-end",
+                            order: 3,
                         }}
                     >
                         <ResetStorage user_id={user_id}

src/core/components/PageTitle.jsx

@@ -0,0 +1,12 @@
+"use client";
+
+import { Chip, Divider, Typography } from "@mui/material";
+
+const PageTitle = ({ title }) => {
+    return (
+        <Divider sx={{ mb: 2 }}><Chip
+            label={<Typography fontSize={14} fontWeight={500}>{title}</Typography>} /></Divider>
+    );
+};
+export default PageTitle;
+