complete datatable getting data with swr

2024-07-13 14:03:37 +03:30
parent c84d253721
commit 5e723a4de7
19 changed files with 550 additions and 369 deletions
--- a/public/global.scss
+++ b/public/global.scss
@@ -3,6 +3,6 @@

 .filter-toast {
  box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px,
-    rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
+  rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
  background-color: #d0dfe8;
-}
+}
--- a/src/app/(withAuth)/dashboard/layout.js
+++ b/src/app/(withAuth)/dashboard/layout.js
@@ -1,14 +1,12 @@
 import HeaderWithLogo from "@/components/layouts/dashboard/headerWithLogo";
 import HeaderWithSidebar from "@/components/layouts/dashboard/headerWithSidebar";
-import { Box, Stack } from "@mui/material";
+import { Stack } from "@mui/material";

 const Layout = ({ children }) => {
    return (
        <Stack>
            <HeaderWithLogo />
-            <Box>
-                <HeaderWithSidebar>{children}</HeaderWithSidebar>
-            </Box>
+            <HeaderWithSidebar>{children}</HeaderWithSidebar>
        </Stack>
    );
 };
--- a/src/components/dashboard/inquiryPrivacyFencing/Toolbar.jsx
+++ b/src/components/dashboard/inquiryPrivacyFencing/Toolbar.jsx
@@ -0,0 +1,20 @@
+import { Button } from "@mui/material";
+import AddCircleIcon from "@mui/icons-material/AddCircle";
+import { useState } from "react";
+
+const Toolbar = ({ mutate }) => {
+    const [open, setOpen] = useState(false);
+
+    const handleOpen = () => {
+        setOpen(true);
+    };
+
+    return (
+        <>
+            <Button variant="contained" color="primary2" startIcon={<AddCircleIcon />} onClick={handleOpen}>
+                ایجاد پاسخ به استعلام
+            </Button>
+        </>
+    );
+};
+export default Toolbar;
--- a/src/components/dashboard/inquiryPrivacyFencing/index.jsx
+++ b/src/components/dashboard/inquiryPrivacyFencing/index.jsx
@@ -1,4 +1,363 @@
+"use client";
+
+import { useMemo } from "react";
+import Toolbar from "@/components/dashboard/inquiryPrivacyFencing/Toolbar";
+import DataTable from "@/core/components/DataTable";
+import { Box } from "@mui/material";
+import { GET_INQUIRY_PRIVACY_FENCING_ROUTE } from "@/core/utils/routes";
+
 const InquiryPrivacyFencingPage = () => {
-    return <></>
-}
-export default InquiryPrivacyFencingPage
+    const columns = useMemo(
+        () => [
+            {
+                accessorKey: "dabirkhaneh_number",
+                header: "dabirkhaneh_number",
+                id: "dabirkhaneh_number",
+                enableColumnFilter: false,
+                datatype: "text",
+                filterFn: "notEquals",
+                columnFilterModeOptions: ["equals", "notEquals", "contains"],
+            },
+            {
+                accessorKey: "marjae_pasokh",
+                header: "marjae_pasokh",
+                id: "marjae_pasokh",
+                enableColumnFilter: false,
+                datatype: "text",
+                filterFn: "equals",
+                columnFilterModeOptions: ["equals", "notEquals", "contains", "lessThan", "greaterThan", "fuzzy"],
+            },
+            {
+                accessorKey: "motaghazi_is_legal",
+                header: "motaghazi_is_legal",
+                id: "motaghazi_is_legal",
+                enableColumnFilter: false,
+                datatype: "text",
+                filterFn: "contains",
+                columnFilterModeOptions: ["equals", "notEquals", "contains"],
+            },
+            {
+                accessorKey: "nameh_date",
+                header: "nameh_date",
+                id: "nameh_date",
+                enableColumnFilter: false,
+                datatype: "date",
+                filterFn: "equals",
+            },
+            {
+                accessorKey: "motaghazi_type",
+                header: "motaghazi_type",
+                id: "motaghazi_type",
+                enableColumnFilter: false,
+                datatype: "text",
+                filterFn: "contains",
+                columnFilterModeOptions: ["equals", "notEquals", "contains"],
+            },
+            {
+                accessorKey: "motaghazi_firstname",
+                header: "motaghazi_firstname",
+                id: "motaghazi_firstname",
+                enableColumnFilter: false,
+                datatype: "text",
+                filterFn: "contains",
+                columnFilterModeOptions: ["equals", "notEquals", "contains"],
+            },
+            {
+                accessorKey: "motaghazi_lastname",
+                header: "motaghazi_lastname",
+                id: "motaghazi_lastname",
+                enableColumnFilter: false,
+                datatype: "text",
+                filterFn: "contains",
+                columnFilterModeOptions: ["equals", "notEquals", "contains"],
+            },
+            {
+                accessorKey: "national_id",
+                header: "national_id",
+                id: "national_id",
+                enableColumnFilter: false,
+                datatype: "text",
+                filterFn: "contains",
+                columnFilterModeOptions: ["equals", "notEquals", "contains"],
+            },
+            {
+                accessorKey: "shenase_melli",
+                header: "shenase_melli",
+                id: "shenase_melli",
+                enableColumnFilter: false,
+                datatype: "text",
+                filterFn: "contains",
+                columnFilterModeOptions: ["equals", "notEquals", "contains"],
+            },
+            {
+                accessorKey: "tel_number",
+                header: "tel_number",
+                id: "tel_number",
+                enableColumnFilter: false,
+                datatype: "text",
+                filterFn: "contains",
+                columnFilterModeOptions: ["equals", "notEquals", "contains"],
+            },
+            {
+                accessorKey: "mobile_number",
+                header: "mobile_number",
+                id: "mobile_number",
+                enableColumnFilter: false,
+                datatype: "text",
+                filterFn: "contains",
+                columnFilterModeOptions: ["equals", "notEquals", "contains"],
+            },
+            {
+                accessorKey: "address",
+                header: "address",
+                id: "address",
+                enableColumnFilter: false,
+                datatype: "text",
+                filterFn: "contains",
+                columnFilterModeOptions: ["equals", "notEquals", "contains"],
+            },
+            {
+                accessorKey: "edare_kol",
+                header: "edare_kol",
+                id: "edare_kol",
+                enableColumnFilter: false,
+                datatype: "text",
+                filterFn: "contains",
+                columnFilterModeOptions: ["equals", "notEquals", "contains"],
+            },
+            {
+                accessorKey: "edare_shahri",
+                header: "edare_shahri",
+                id: "edare_shahri",
+                enableColumnFilter: false,
+                datatype: "text",
+                filterFn: "contains",
+                columnFilterModeOptions: ["equals", "notEquals", "contains"],
+            },
+            {
+                accessorKey: "rah_type",
+                header: "rah_type",
+                id: "rah_type",
+                enableColumnFilter: false,
+                datatype: "text",
+                filterFn: "contains",
+                columnFilterModeOptions: ["equals", "notEquals", "contains"],
+            },
+            {
+                accessorKey: "name_mehvar_fa",
+                header: "name_mehvar_fa",
+                id: "name_mehvar_fa",
+                enableColumnFilter: false,
+                datatype: "text",
+                filterFn: "contains",
+                columnFilterModeOptions: ["equals", "notEquals", "contains"],
+            },
+            {
+                accessorKey: "mizan_harim",
+                header: "mizan_harim",
+                id: "mizan_harim",
+                enableColumnFilter: false,
+                datatype: "text",
+                filterFn: "contains",
+                columnFilterModeOptions: ["equals", "notEquals", "contains"],
+            },
+            {
+                accessorKey: "arze_navar",
+                header: "arze_navar",
+                id: "arze_navar",
+                enableColumnFilter: false,
+                datatype: "text",
+                filterFn: "contains",
+                columnFilterModeOptions: ["equals", "notEquals", "contains"],
+            },
+            {
+                accessorKey: "samt",
+                header: "samt",
+                id: "samt",
+                enableColumnFilter: false,
+                datatype: "text",
+                filterFn: "contains",
+                columnFilterModeOptions: ["equals", "notEquals", "contains"],
+            },
+            {
+                accessorKey: "kilometr",
+                header: "kilometr",
+                id: "kilometr",
+                enableColumnFilter: false,
+                datatype: "text",
+                filterFn: "contains",
+                columnFilterModeOptions: ["equals", "notEquals", "contains"],
+            },
+            {
+                accessorKey: "zone",
+                header: "zone",
+                id: "zone",
+                enableColumnFilter: false,
+                datatype: "text",
+                filterFn: "contains",
+                columnFilterModeOptions: ["equals", "notEquals", "contains"],
+            },
+            {
+                accessorKey: "karbari_type",
+                header: "karbari_type",
+                id: "karbari_type",
+                enableColumnFilter: false,
+                datatype: "text",
+                filterFn: "contains",
+                columnFilterModeOptions: ["equals", "notEquals", "contains"],
+            },
+            {
+                accessorKey: "tarh_title",
+                header: "tarh_title",
+                id: "tarh_title",
+                enableColumnFilter: false,
+                datatype: "text",
+                filterFn: "contains",
+                columnFilterModeOptions: ["equals", "notEquals", "contains"],
+            },
+            {
+                accessorKey: "masahat_zirbana",
+                header: "masahat_zirbana",
+                id: "masahat_zirbana",
+                enableColumnFilter: false,
+                datatype: "text",
+                filterFn: "contains",
+                columnFilterModeOptions: ["equals", "notEquals", "contains"],
+            },
+            {
+                accessorKey: "ehdasat_type",
+                header: "ehdasat_type",
+                id: "ehdasat_type",
+                enableColumnFilter: false,
+                datatype: "text",
+                filterFn: "contains",
+                columnFilterModeOptions: ["equals", "notEquals", "contains"],
+            },
+            {
+                accessorKey: "divarkeshi_distance",
+                header: "divarkeshi_distance",
+                id: "divarkeshi_distance",
+                enableColumnFilter: false,
+                datatype: "text",
+                filterFn: "contains",
+                columnFilterModeOptions: ["equals", "notEquals", "contains"],
+            },
+            {
+                accessorKey: "mahale_ejra",
+                header: "mahale_ejra",
+                id: "mahale_ejra",
+                enableColumnFilter: false,
+                datatype: "text",
+                filterFn: "contains",
+                columnFilterModeOptions: ["equals", "notEquals", "contains"],
+            },
+            {
+                accessorKey: "traffic",
+                header: "traffic",
+                id: "traffic",
+                enableColumnFilter: false,
+                datatype: "text",
+                filterFn: "contains",
+                columnFilterModeOptions: ["equals", "notEquals", "contains"],
+            },
+            {
+                accessorKey: "vaziat_eghtesadi",
+                header: "vaziat_eghtesadi",
+                id: "vaziat_eghtesadi",
+                enableColumnFilter: false,
+                datatype: "text",
+                filterFn: "contains",
+                columnFilterModeOptions: ["equals", "notEquals", "contains"],
+            },
+            {
+                accessorKey: "has_access",
+                header: "has_access",
+                id: "has_access",
+                enableColumnFilter: false,
+                datatype: "text",
+                filterFn: "contains",
+                columnFilterModeOptions: ["equals", "notEquals", "contains"],
+            },
+            {
+                accessorKey: "shomare_estelam_harim",
+                header: "shomare_estelam_harim",
+                id: "shomare_estelam_harim",
+                enableColumnFilter: false,
+                datatype: "text",
+                filterFn: "contains",
+                columnFilterModeOptions: ["equals", "notEquals", "contains"],
+            },
+            {
+                accessorKey: "max_month",
+                header: "max_month",
+                id: "max_month",
+                enableColumnFilter: false,
+                datatype: "text",
+                filterFn: "contains",
+                columnFilterModeOptions: ["equals", "notEquals", "contains"],
+            },
+            {
+                accessorKey: "max_day",
+                header: "max_day",
+                id: "max_day",
+                enableColumnFilter: false,
+                datatype: "text",
+                filterFn: "contains",
+                columnFilterModeOptions: ["equals", "notEquals", "contains"],
+            },
+            {
+                accessorKey: "shomare_tahaodname",
+                header: "shomare_tahaodname",
+                id: "shomare_tahaodname",
+                enableColumnFilter: false,
+                datatype: "text",
+                filterFn: "contains",
+                columnFilterModeOptions: ["equals", "notEquals", "contains"],
+            },
+            {
+                accessorKey: "shomare_daftarkhaneh",
+                header: "shomare_daftarkhaneh",
+                id: "shomare_daftarkhaneh",
+                enableColumnFilter: false,
+                datatype: "text",
+                filterFn: "contains",
+                columnFilterModeOptions: ["equals", "notEquals", "contains"],
+            },
+            {
+                accessorKey: "description",
+                header: "description",
+                id: "description",
+                enableColumnFilter: false,
+                datatype: "text",
+                filterFn: "contains",
+                columnFilterModeOptions: ["equals", "notEquals", "contains"],
+            },
+            {
+                accessorKey: "ronevesht",
+                header: "ronevesht",
+                id: "ronevesht",
+                enableColumnFilter: false,
+                datatype: "text",
+                filterFn: "contains",
+                columnFilterModeOptions: ["equals", "notEquals", "contains"],
+            },
+        ],
+        []
+    );
+
+    return (
+        <Box sx={{ mx: 2 }}>
+            <DataTable
+                need_filter={"false"}
+                columns={columns}
+                table_url={GET_INQUIRY_PRIVACY_FENCING_ROUTE}
+                user_id={0}
+                page_name={"testPage"}
+                table_name={"testTable"}
+                TableToolbar={Toolbar}
+            />
+        </Box>
+    );
+};
+export default InquiryPrivacyFencingPage;
+
--- a/src/components/home/Toolbar.jsx
+++ b/src/components/home/Toolbar.jsx
@@ -1,10 +0,0 @@
-import { Button } from "@mui/material";
-
-const Toolbar = ({ columns }) => {
-    return (
-        <>
-            <Button>add something</Button>
-        </>
-    );
-};
-export default Toolbar;
--- a/src/components/home/index.jsx
+++ b/src/components/home/index.jsx
@@ -1,129 +0,0 @@
-"use client";
-import DataTable from "@/core/components/DataTable";
-import { useMemo } from "react";
-
-function HomeComponent() {
-    const columns = useMemo(
-        () => [
-            {
-                accessorKey: "fullname",
-                header: "نام کامل",
-                id: "fullname",
-                columns: [
-                    {
-                        accessorKey: "name.firstName",
-                        header: "نام",
-                        id: "firstName",
-                        enableColumnFilter: true,
-                        datatype: "text",
-                        filterFn: "contains",
-                        enableClickToCopy: true,
-                        columnFilterModeOptions: ["equals", "notEquals", "contains"],
-                    },
-                    {
-                        accessorKey: "name.lastName",
-                        header: "نام خانوادگی",
-                        id: "lastName",
-                        enableColumnFilter: true,
-                        datatype: "text",
-                        filterFn: "equals",
-                        columnFilterModeOptions: ["equals", "notEquals", "contains"],
-                    },
-                ],
-            },
-            {
-                accessorKey: "address",
-                header: "آدرس",
-                id: "address",
-                enableColumnFilter: true,
-                datatype: "text",
-                filterFn: "notEquals",
-                columnFilterModeOptions: ["equals", "notEquals", "contains"],
-            },
-            {
-                accessorKey: "city",
-                header: "شهر",
-                id: "city",
-                enableColumnFilter: true,
-                datatype: "text",
-                filterFn: "equals",
-                columnFilterModeOptions: ["equals", "notEquals", "contains", "lessThan", "greaterThan", "fuzzy"],
-            },
-            {
-                accessorKey: "state",
-                header: "وضعیت",
-                id: "state",
-                enableColumnFilter: true,
-                datatype: "text",
-                filterFn: "contains",
-                columnFilterModeOptions: ["equals", "notEquals", "contains"],
-            },
-            {
-                accessorKey: "price",
-                header: "محدوده",
-                id: "price",
-                enableColumnFilter: true,
-                datatype: "numeric",
-                filterFn: "equals",
-                columnFilterModeOptions: ["equals", "notEquals"],
-            },
-            {
-                accessorKey: "created_at",
-                header: "تاریخ ساخت",
-                id: "created_at",
-                enableColumnFilter: true,
-                datatype: "date",
-                filterFn: "between",
-            },
-            {
-                accessorKey: "updated_at",
-                header: "تاریخ بروزرسانی",
-                id: "updated_at",
-                enableColumnFilter: true,
-                datatype: "date",
-                filterFn: "equals",
-            },
-            {
-                accessorKey: "company",
-                header: "نام شرکت",
-                id: "company",
-                enableColumnFilter: true,
-                datatype: "numeric",
-                filterFn: "equals",
-                columnSelectOption: [
-                    { value: 1, label: "وایتل" },
-                    { value: 2, label: "اسنپ" },
-                    { value: 3, label: "تپسی" },
-                ],
-            },
-            {
-                accessorKey: "area",
-                header: "منطقه",
-                id: "area",
-                enableColumnFilter: true,
-                datatype: "array",
-                filterFn: "equals",
-                columnSelectOption: [
-                    { value: 1, label: "وایتل" },
-                    { value: 2, label: "اسنپ" },
-                    { value: 3, label: "تپسی" },
-                ],
-            },
-        ],
-        []
-    );
-
-    return (
-        <>
-            <DataTable
-                columns={columns}
-                table_url={"api"}
-                user_id={0}
-                page_name={"testPage"}
-                table_name={"testTable"}
-            />
-        </>
-    );
-}
-
-export default HomeComponent;
--- a/src/components/layouts/dashboard/headerWithSidebar/index.jsx
+++ b/src/components/layouts/dashboard/headerWithSidebar/index.jsx
@@ -9,6 +9,23 @@ import HeaderMenu from "./HeaderMenu";

 const drawerWidth = 300;

+const ScrollBox = styled(Box)({
+    flexGrow: 1,
+    overflowY: "scroll",
+    width: "calc(100% - ${drawerWidth}px)",
+    "&::-webkit-scrollbar": {
+        width: "5px",
+    },
+    "&::-webkit-scrollbar-track": {
+        boxShadow: "inset 0 0 5px #fff",
+        borderRadius: "5px",
+    },
+    "&::-webkit-scrollbar-thumb": {
+        background: "#155175",
+        borderRadius: "5px",
+    },
+});
+
 const Main = styled(Paper, { shouldForwardProp: (prop) => prop !== "open" })(({ theme, open }) => ({
    flexGrow: 1,
    transition: theme.transitions.create("margin", {
@@ -102,9 +119,9 @@ const HeaderWithSidebar = ({ children }) => {
            </Drawer>
            <Main elevation={0} open={open}>
                <DrawerHeader />
-                {children}
+                <ScrollBox>{children}</ScrollBox>
            </Main>
        </Box>
    );
 };
-export default HeaderWithSidebar;
+export default HeaderWithSidebar;
--- a/src/core/components/DataTable/Main.js
+++ b/src/core/components/DataTable/Main.js
@@ -3,81 +3,16 @@ import { useMaterialReactTable } from "material-react-table";
 import { FA_DATATABLE_LOCALIZATION } from "./localization/fa/datatable";
 import useTableSetting from "@/lib/hooks/useTableSetting";
 import { flattenArrayOfObjects } from "@/core/utils/flattenArrayOfObjects";
-import Toolbar from "@/components/home/Toolbar";
 import useDataTable from "@/lib/hooks/useDataTable";
 import { useMemo, useState } from "react";
-
-const data = [
-    {
-        name: {
-            firstName: "امین",
-            lastName: "قاسمپور",
-        },
-        address: "فلان جا",
-        city: "تهران",
-        state: "بررسی شده",
-        price: "20",
-        updated_at: "2024/05/02",
-        company: "همراه اول",
-        area: "منطقه 5",
-    },
-    {
-        name: {
-            firstName: "امیر حسین",
-            lastName: "محمودی",
-        },
-        address: "فلان جا",
-        city: "تهران",
-        state: "تکمیل شده",
-        price: "27",
-        updated_at: "2024/05/02",
-        company: "وایتل",
-        area: "منطقه 27",
-    },
-    {
-        name: {
-            firstName: "یاسمن",
-            lastName: "علی اکبری",
-        },
-        address: "فلان جا",
-        city: "شیراز",
-        state: "بررسی شده",
-        price: "32",
-        updated_at: "2024/05/02",
-        company: "ایرانسل",
-        area: "منطقه 23",
-    },
-    {
-        name: {
-            firstName: "حمیدرضا",
-            lastName: "رنجبرپور",
-        },
-        address: "فلان جا",
-        city: "اصفهان",
-        state: "بررسی شده",
-        price: "45",
-        updated_at: "2024/05/02",
-        company: "ایرانول",
-        area: "منطقه 21",
-    },
-    {
-        name: {
-            firstName: "محمد",
-            lastName: "جلالی",
-        },
-        address: "فلان جا",
-        city: "رشت",
-        state: "درحال بررسی",
-        price: "8",
-        updated_at: "2024/05/02",
-        company: "فیلیمو",
-        area: "منطقه 8",
-    },
-];
+import useRequest from "@/lib/hooks/useRequest";
+import useSWR from "swr";

 const DataTable_Main = (props) => {
+    const request = useRequest();
+    const isEmptyObject = (obj) => obj && Object.keys(obj).length === 0 && obj.constructor === Object;
    const { filterData, sortData, setSortData } = useDataTable();
-    const { table_url, user_id, page_name, table_name, columns, initialStateProps } = props;
+    const { need_filter, table_url, user_id, page_name, table_name, columns, initialStateProps, TableToolbar } = props;
    const flatColumns = flattenArrayOfObjects(columns, "columns");
    const { settingStore, hideAction } = useTableSetting();
    const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 10 });
@@ -95,15 +30,31 @@ const DataTable_Main = (props) => {
        const params = new URLSearchParams();
        params.set("start", `${pagination.pageIndex * pagination.pageSize}`);
        params.set("size", pagination.pageSize);
-        params.set("filters", JSON.stringify(filterData ?? []));
+        params.set("filters", JSON.stringify(isEmptyObject(filterData) ? [] : [filterData]));
        params.set("sorting", JSON.stringify(sortData));
        return `${table_url}?${params}`;
    }, [table_url, filterData, pagination, columns]);

+    const fetcher = async (url) => {
+        try {
+            const response = await request(url);
+            return response.data;
+        } catch (error) {
+            throw error;
+        }
+    };
+
+    const { data, isValidating, mutate } = useSWR(fetchUrl, fetcher, {
+        revalidateIfStale: true,
+        revalidateOnFocus: false,
+        revalidateOnReconnect: true,
+        keepPreviousData: true,
+    });
+
    const table = useMaterialReactTable({
        localization: FA_DATATABLE_LOCALIZATION,
        columns,
-        data: data,
+        data: data?.data ?? [],
        initialState: {
            density: "compact",
            columnVisibility: settingStore?.[user_id]?.[page_name]?.[table_name]?.["hides"],
@@ -111,6 +62,7 @@ const DataTable_Main = (props) => {
            ...initialStateProps,
        },
        state: {
+            showProgressBars: isValidating,
            columnVisibility: settingStore?.[user_id]?.[page_name]?.[table_name]?.["hides"],
            sorting: sortData,
            pagination,
@@ -146,7 +98,7 @@ const DataTable_Main = (props) => {
        onSortingChange: onSortingChange,
        renderTopToolbarCustomActions: ({ table }) => (
            <>
-                <Toolbar columns={flatColumns} />
+                <TableToolbar mutate={mutate} />
            </>
        ),
        ...props,
@@ -154,6 +106,7 @@ const DataTable_Main = (props) => {

    return (
        <DataTable_Paper
+            need_filter={need_filter}
            table={table}
            columns={flatColumns}
            user_id={user_id}
--- a/src/core/components/DataTable/filter/FilterBody.jsx
+++ b/src/core/components/DataTable/filter/FilterBody.jsx
@@ -135,9 +135,9 @@ function FilterBody({ columns, drawerState, setDrawerState, user_id, page_name,
                                            px: 8,
                                            boxShadow:
                                                "rgba(0, 0, 0, 0.23) 0px 6px 6px, rgba(0, 0, 0, 0.19) 10px 0px 20px",
-                                            backgroundColor: "#155175",
+                                            backgroundColor: "primary2",
                                            ":hover": {
-                                                backgroundColor: "#155175",
+                                                backgroundColor: "primary2",
                                            },
                                        }}
                                    >
--- a/src/core/components/DataTable/head/TableHeadCell.js
+++ b/src/core/components/DataTable/head/TableHeadCell.js
@@ -215,8 +215,7 @@ const DataTable_TableHeadCell = ({ columnVirtualizer, header, staticColumnIndex,
                                overflow: columnDefType === "data" ? "hidden" : undefined,
                                textOverflow: "ellipsis",
                                color: "#fff",
-                                fontSize: "14px",
-                                fontWeight: "500",
+                                fontWeight: "400",
                                whiteSpace: (columnDef.header?.length ?? 0) < 20 ? "nowrap" : "normal",
                            }}
                        >
--- a/src/core/components/DataTable/table/Paper.js
+++ b/src/core/components/DataTable/table/Paper.js
@@ -66,6 +66,7 @@ const DataTable_Paper = ({ table, ...rest }) => {
            {enableTopToolbar &&
                (parseFromValuesOrFunc(renderTopToolbar, { table }) ?? (
                    <DataTable_TopToolbar
+                        need_filter={paperProps.need_filter}
                        table={table}
                        columns={paperProps.columns}
                        table_url={paperProps.table_url}
--- a/src/core/components/DataTable/toolbar/TopToolbar.js
+++ b/src/core/components/DataTable/toolbar/TopToolbar.js
@@ -6,7 +6,7 @@ import DataTable_ToolbarInternalButtons from "./ToolbarInternalButtons";
 import FilterColumn from "@/core/components/DataTable/filter";
 import RefactorTable from "@/core/components/DataTable/refactor/RefactorTable";

-const DataTable_TopToolbar = ({ table, columns, table_url, user_id, page_name, table_name }) => {
+const DataTable_TopToolbar = ({ need_filter, table, columns, table_url, user_id, page_name, table_name }) => {
    const {
        getState,
        options: {
@@ -70,13 +70,15 @@ const DataTable_TopToolbar = ({ table, columns, table_url, user_id, page_name, t
                        }}
                    >
                        <RefactorTable />
-                        <FilterColumn
-                            columns={columns}
-                            table_url={table_url}
-                            user_id={user_id}
-                            page_name={page_name}
-                            table_name={table_name}
-                        />
+                        {need_filter === "true" && (
+                            <FilterColumn
+                                columns={columns}
+                                table_url={table_url}
+                                user_id={user_id}
+                                page_name={page_name}
+                                table_name={table_name}
+                            />
+                        )}
                        <DataTable_ToolbarInternalButtons table={table} />
                    </Box>
                )}
--- a/src/core/components/NotificationDesign/AskForKeep.jsx
+++ b/src/core/components/NotificationDesign/AskForKeep.jsx
--- a/src/core/utils/routes.js
+++ b/src/core/utils/routes.js
@@ -2,5 +2,5 @@ const api = process.env.NEXT_PUBLIC_API_URL;

 export const GET_USER_ROUTE = api + "/webapi/user/get-permission";
 export const GET_LOGIN_ROUTE = api + "/login_dev";
-
+export const GET_INQUIRY_PRIVACY_FENCING_ROUTE = api + "/api/v3/harim/divarkeshi";
 export const GET_PERMISSIONS_ROUTE = api + "/webapi/user/get-permission";
--- a/src/lib/contexts/DataTable.js
+++ b/src/lib/contexts/DataTable.js
@@ -1,11 +1,110 @@
-import { createContext, useState } from "react";
+import { createContext, useEffect, useState } from "react";
+import { toast } from "react-toastify";
+import AskForKeepData from "@/core/components/NotificationDesign/AskForKeepData";
+import useTableSetting from "@/lib/hooks/useTableSetting";
+import { flattenArrayOfObjects } from "@/core/utils/flattenArrayOfObjects";

 export const DataTableContext = createContext();

-const DataTableProvider = ({ children }) => {
+const DataTableProvider = ({ children, user_id, page_name, table_name, columns }) => {
+    const { settingStore } = useTableSetting();
+    const [isInitStates, setInitStates] = useState(false);
+    const flatColumns = flattenArrayOfObjects(columns, "columns");
+    const [initFilter, setInitFilter] = useState({});
+    const [initSort, setInitSort] = useState([]);
    const [filterData, setFilterData] = useState({});
+    const [sortData, setSortData] = useState([]);

-    return <DataTableContext.Provider value={{ filterData, setFilterData }}>{children}</DataTableContext.Provider>;
+    useEffect(() => {
+        if (!settingStore) return;
+        const values = flatColumns.reduce((acc, column) => {
+            if (!column.enableColumnFilter) return acc;
+            const filter = settingStore?.[user_id]?.[page_name]?.[table_name]?.["filters"]?.find(
+                (filter) => filter.id === column.id
+            );
+            if (column.datatype === "array") {
+                acc[column.id] = {
+                    id: column.id,
+                    value: filter?.value || [],
+                    filterFn: filter?.filterFn || column._filterFn,
+                    datatype: column.datatype,
+                };
+            } else if (column._filterFn === "between") {
+                acc[column.id] = {
+                    id: column.id,
+                    value: filter?.value || ["", ""],
+                    filterFn: filter?.filterFn || column._filterFn,
+                    datatype: column.datatype,
+                };
+            } else {
+                acc[column.id] = {
+                    id: column.id,
+                    value: filter?.value || "",
+                    filterFn: filter?.filterFn || column._filterFn,
+                    datatype: column.datatype,
+                };
+            }
+            return acc;
+        }, {});
+        setFilterData(values);
+        setSortData(settingStore?.[user_id]?.[page_name]?.[table_name]?.["sorts"] || []);
+        setInitFilter(values);
+        setInitSort(settingStore?.[user_id]?.[page_name]?.[table_name]?.["sorts"] || []);
+        setInitStates(true);
+    }, [settingStore, isInitStates]);
+
+    useEffect(() => {
+        if (
+            JSON.stringify(initFilter) !== JSON.stringify(filterData) ||
+            JSON.stringify(initSort) !== JSON.stringify(sortData)
+        ) {
+            if (!toast.isActive("keep_data", "datatable")) {
+                toast(
+                    <AskForKeepData
+                        filterData={filterData}
+                        sortData={sortData}
+                        user_id={user_id}
+                        page_name={page_name}
+                        table_name={table_name}
+                        columns={flatColumns}
+                    />,
+                    {
+                        containerId: "datatable",
+                        toastId: "keep_data",
+                        className: "filter-toast",
+                        position: "bottom-left",
+                        draggable: true,
+                        autoClose: false,
+                    }
+                );
+            } else {
+                toast.update("keep_data", {
+                    containerId: "datatable",
+                    toastId: "keep_data",
+                    render: (
+                        <AskForKeepData
+                            filterData={filterData}
+                            sortData={sortData}
+                            user_id={user_id}
+                            page_name={page_name}
+                            table_name={table_name}
+                            columns={flatColumns}
+                        />
+                    ),
+                });
+            }
+        } else {
+            toast.dismiss({ containerId: "datatable" });
+        }
+    }, [filterData, sortData]);
+
+    if (!isInitStates) return null;
+
+    return (
+        <DataTableContext.Provider value={{ filterData, setFilterData, sortData, setSortData }}>
+            {children}
+        </DataTableContext.Provider>
+    );
 };

 export default DataTableProvider;
--- a/src/lib/contexts/DataTable.jsx
+++ b/src/lib/contexts/DataTable.jsx
@@ -1,110 +0,0 @@
-import { createContext, useEffect, useState } from "react";
-import { toast } from "react-toastify";
-import AskForKeepData from "@/core/components/NotificationDesign/AskForKeepData";
-import useTableSetting from "@/lib/hooks/useTableSetting";
-import { flattenArrayOfObjects } from "@/core/utils/flattenArrayOfObjects";
-
-export const DataTableContext = createContext();
-
-const DataTableProvider = ({ children, user_id, page_name, table_name, columns }) => {
-    const { settingStore } = useTableSetting();
-    const [isInitStates, setInitStates] = useState(false);
-    const flatColumns = flattenArrayOfObjects(columns, "columns");
-    const [initFilter, setInitFilter] = useState({});
-    const [initSort, setInitSort] = useState([]);
-    const [filterData, setFilterData] = useState({});
-    const [sortData, setSortData] = useState([]);
-
-    useEffect(() => {
-        if (!settingStore) return;
-        const values = flatColumns.reduce((acc, column) => {
-            if (!column.enableColumnFilter) return acc;
-            const filter = settingStore?.[user_id]?.[page_name]?.[table_name]?.["filters"]?.find(
-                (filter) => filter.id === column.id
-            );
-            if (column.datatype === "array") {
-                acc[column.id] = {
-                    id: column.id,
-                    value: filter?.value || [],
-                    filterFn: filter?.filterFn || column._filterFn,
-                    datatype: column.datatype,
-                };
-            } else if (column._filterFn === "between") {
-                acc[column.id] = {
-                    id: column.id,
-                    value: filter?.value || ["", ""],
-                    filterFn: filter?.filterFn || column._filterFn,
-                    datatype: column.datatype,
-                };
-            } else {
-                acc[column.id] = {
-                    id: column.id,
-                    value: filter?.value || "",
-                    filterFn: filter?.filterFn || column._filterFn,
-                    datatype: column.datatype,
-                };
-            }
-            return acc;
-        }, {});
-        setFilterData(values);
-        setSortData(settingStore?.[user_id]?.[page_name]?.[table_name]?.["sorts"] || []);
-        setInitFilter(values);
-        setInitSort(settingStore?.[user_id]?.[page_name]?.[table_name]?.["sorts"] || []);
-        setInitStates(true);
-    }, [settingStore, isInitStates]);
-
-    useEffect(() => {
-        if (
-            JSON.stringify(initFilter) !== JSON.stringify(filterData) ||
-            JSON.stringify(initSort) !== JSON.stringify(sortData)
-        ) {
-            if (!toast.isActive("keep_data", "datatable")) {
-                toast(
-                    <AskForKeepData
-                        filterData={filterData}
-                        sortData={sortData}
-                        user_id={user_id}
-                        page_name={page_name}
-                        table_name={table_name}
-                        columns={flatColumns}
-                    />,
-                    {
-                        containerId: "datatable",
-                        toastId: "keep_data",
-                        className: "filter-toast",
-                        position: "bottom-left",
-                        draggable: true,
-                        autoClose: false,
-                    }
-                );
-            } else {
-                toast.update("keep_data", {
-                    containerId: "datatable",
-                    toastId: "keep_data",
-                    render: (
-                        <AskForKeepData
-                            filterData={filterData}
-                            sortData={sortData}
-                            user_id={user_id}
-                            page_name={page_name}
-                            table_name={table_name}
-                            columns={flatColumns}
-                        />
-                    ),
-                });
-            }
-        } else {
-            toast.dismiss({ containerId: "datatable" });
-        }
-    }, [filterData, sortData]);
-
-    if (!isInitStates) return null;
-
-    return (
-        <DataTableContext.Provider value={{ filterData, setFilterData, sortData, setSortData }}>
-            {children}
-        </DataTableContext.Provider>
-    );
-};
-
-export default DataTableProvider;
--- a/src/lib/hooks/useDataTable.js
+++ b/src/lib/hooks/useDataTable.js
@@ -2,8 +2,8 @@ import { useContext } from "react";
 import { DataTableContext } from "@/lib/contexts/DataTable";

 const useTableSetting = () => {
-    const { filterData, setFilterData } = useContext(DataTableContext);
-    return { filterData, setFilterData };
+    const { filterData, setFilterData, sortData, setSortData } = useContext(DataTableContext);
+    return { filterData, setFilterData, sortData, setSortData };
 };

 export default useTableSetting;
--- a/src/lib/hooks/useDataTable.jsx
+++ b/src/lib/hooks/useDataTable.jsx
@@ -1,9 +0,0 @@
-import { useContext } from "react";
-import { DataTableContext } from "@/lib/contexts/DataTable";
-
-const useTableSetting = () => {
-    const { filterData, setFilterData, sortData, setSortData } = useContext(DataTableContext);
-    return { filterData, setFilterData, sortData, setSortData };
-};
-
-export default useTableSetting;
--- a/src/lib/hooks/useTableSetting.jsx
+++ b/src/lib/hooks/useTableSetting.jsx
@@ -1,9 +0,0 @@
-import { useContext } from "react";
-import { TableSettingContext } from "../contexts/tableSetting";
-
-const useTableSetting = () => {
-    const { settingStore, hideAction, sortAction, filterAction, refactorAction } = useContext(TableSettingContext);
-    return { settingStore, hideAction, sortAction, filterAction, refactorAction };
-};
-
-export default useTableSetting;