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;