trithuc-mvc-react 1.8.7 → 1.8.9

package/components/DataManagement/DataTable.jsx

@@ -1,4 +1,4 @@
-import { Table, TableBody, TableCell, TableContainer, TableRow, useMediaQuery, useTheme } from "@mui/material";
+import { Grid, Table, TableBody, TableCell, TableContainer, TableRow, Typography, useMediaQuery, useTheme } from "@mui/material";
 import TablePaginationCustom from "../table/TablePagination";
 import { useEffect, useMemo, useState } from "react";
 
@@ -14,223 +14,236 @@ import TableToolbar from "./TableToolbar";
 import { useDataTable } from "./hooks";
 import { usePermission } from "../../hooks";
 const DataTable = ({ multipleActions = [] }) => {
-  const {
-    tableName,
-    selectedField,
-    columns,
-    dataSearch,
-    setOpenEditorDialog,
-    setSelectedEditItem,
-    setOpenViewDialog,
-    onEditClick
-  } = useDataTable();
-
-  const { set: setPermission } = usePermission(tableName);
-  const queryClient = useQueryClient();
-  const confirm = useConfirm();
-  const [selectedItems, setSelectedItems] = useState([]);
-  const [page, setPage] = useState(0);
-  const [rowsPerPage, setRowsPerPage] = useState(5);
-
-  const { data, isLoading } = useQuery({
-    queryKey: [tableName, page, rowsPerPage, dataSearch],
-    queryFn: () =>
-      getDatasFromTable({
-        tableName: tableName,
-        page: page + 1,
-        pageSize: rowsPerPage,
-        data: dataSearch
-      }),
-    // keepPreviousData: true,
-    onSuccess: ({ PermissionModel, status }) => {
-      if (status) {
-        // setPermission(PermissionModel);
-        // console.log("LOAD LAI PermissionModel");
-      }
-    }
-  });
-  const changeStatusMutation = useMutation(changeStatusDataToTable, {
-    onSuccess: () => {
-      toast.success("Thay đổi trạng thái thành công !");
-      queryClient.invalidateQueries({ queryKey: [tableName] });
-    },
-    onError: () => {
-      toast.error(" Có lỗi xảy ra !");
-    }
-  });
-  const deleteMutation = useMutation(deleteDataFromTable, {
-    onSuccess: ({ status }) => {
-      if (status) {
-        toast.success("Xóa thành công !");
-      } else {
-        toast.error(" Có lỗi xảy ra !");
-      }
-
-      queryClient.invalidateQueries({ queryKey: [tableName] });
-    },
-    onError: () => {
-      toast.error(" Có lỗi xảy ra !");
-    }
-  });
-  const deleteMultipleMutation = useMutation(deleteMultipleDataFromTable, {
-    onSuccess: () => {
-      toast.success("Xóa thành công !");
-      setSelectedItems([]);
-      queryClient.invalidateQueries({ queryKey: [tableName] });
-    },
-    onError: () => {
-      toast.error(" Có lỗi xảy ra !");
-    }
-  });
-
-  const handleDelete = (id) => {
-    confirm({ description: "Bạn có chắc chắn muốn xóa bản ghi này không?", title: "Xác nhận" })
-      .then(() => {
-        deleteMutation.mutate({
-          id,
-          tableName
-        });
-      })
-      .catch(() => {});
-  };
-  const handleChangeStatus = (Id) => {
-    changeStatusMutation.mutate({
-      tableName,
-      id: Id
+    const {
+        tableName,
+        selectedField,
+        columns,
+        dataSearch,
+        setOpenEditorDialog,
+        setSelectedEditItem,
+        setOpenViewDialog,
+        onEditClick,
+        hasTabpanel
+    } = useDataTable();
+
+    const { set: setPermission } = usePermission(tableName);
+    const queryClient = useQueryClient();
+    const confirm = useConfirm();
+    const [selectedItems, setSelectedItems] = useState([]);
+    const [page, setPage] = useState(0);
+    const [rowsPerPage, setRowsPerPage] = useState(5);
+
+    const { data, isLoading } = useQuery({
+        queryKey: [tableName, page, rowsPerPage, dataSearch],
+        queryFn: () =>
+            getDatasFromTable({
+                tableName: tableName,
+                page: page + 1,
+                pageSize: rowsPerPage,
+                data: dataSearch
+            }),
+        // keepPreviousData: true,
+        onSuccess: ({ PermissionModel, status }) => {
+            if (status) {
+                // setPermission(PermissionModel);
+                // console.log("LOAD LAI PermissionModel");
+            }
+        }
     });
-  };
-  const handlEdit = (item) => {
-    setOpenEditorDialog(true);
-    setSelectedEditItem(item);
-    onEditClick(item);
-  };
-  const handlViewDetail = (item) => {
-    setOpenViewDialog(true);
-    setSelectedEditItem(item);
-  };
-  const { rows, total } = useMemo(() => {
-    let rows = data?.data ?? [];
-    let total = data?.total ?? 0;
-
-    return {
-      rows: rows,
-      total
-    };
-  }, [data]);
-
-  useEffect(() => {
-    let PermissionModel = data?.PermissionModel;
-    PermissionModel && setPermission(PermissionModel);
-  }, [data]);
-  useEffect(() => {
-    const newSelectedItems = selectedItems.filter((selectedId) => {
-      return rows?.some((row) => row.Id == selectedId);
+    const changeStatusMutation = useMutation(changeStatusDataToTable, {
+        onSuccess: () => {
+            toast.success("Thay đổi trạng thái thành công !");
+            queryClient.invalidateQueries({ queryKey: [tableName] });
+        },
+        onError: () => {
+            toast.error(" Có lỗi xảy ra !");
+        }
+    });
+    const deleteMutation = useMutation(deleteDataFromTable, {
+        onSuccess: ({ status }) => {
+            if (status) {
+                toast.success("Xóa thành công !");
+            } else {
+                toast.error(" Có lỗi xảy ra !");
+            }
+
+            queryClient.invalidateQueries({ queryKey: [tableName] });
+        },
+        onError: () => {
+            toast.error(" Có lỗi xảy ra !");
+        }
+    });
+    const deleteMultipleMutation = useMutation(deleteMultipleDataFromTable, {
+        onSuccess: () => {
+            toast.success("Xóa thành công !");
+            setSelectedItems([]);
+            queryClient.invalidateQueries({ queryKey: [tableName] });
+        },
+        onError: () => {
+            toast.error(" Có lỗi xảy ra !");
+        }
     });
-    setSelectedItems(newSelectedItems);
-  }, [rows]);
-  const handleChangePage = (event, newPage) => {
-    setPage(newPage);
-  };
-  const isSelected = (Id) => selectedItems.indexOf(Id) !== -1;
-
-  const handleSelect = (event, Id) => {
-    const selectedIndex = selectedItems.indexOf(Id);
-    let newSelected = [];
-
-    if (selectedIndex === -1) {
-      newSelected = newSelected.concat(selectedItems, Id);
-    } else if (selectedIndex === 0) {
-      newSelected = newSelected.concat(selectedItems.slice(1));
-    } else if (selectedIndex === selectedItems.length - 1) {
-      newSelected = newSelected.concat(selectedItems.slice(0, -1));
-    } else if (selectedIndex > 0) {
-      newSelected = newSelected.concat(selectedItems.slice(0, selectedIndex), selectedItems.slice(selectedIndex + 1));
-    }
-
-    setSelectedItems(newSelected);
-  };
-  const handleSelectAllClick = (event) => {
-    if (event.target.checked) {
-      const newSelected = rows.map((n) => n[selectedField]);
-      setSelectedItems(newSelected);
-      return;
-    }
-    setSelectedItems([]);
-  };
-
-  const handleChangeRowsPerPage = (event) => {
-    setRowsPerPage(parseInt(event.target.value, 10));
-    setPage(0);
-  };
-  const handleDeleteMultiple = () => {
-    confirm({ description: `Bạn có chắc chắn muốn xóa ${selectedItems?.length} bản ghi này không?`, title: "Xác nhận" })
-      .then(() => {
-        deleteMultipleMutation.mutate({
-          tableName,
-          ids: selectedItems
+
+    const handleDelete = (id) => {
+        confirm({ description: "Bạn có chắc chắn muốn xóa bản ghi này không?", title: "Xác nhận" })
+            .then(() => {
+                deleteMutation.mutate({
+                    id,
+                    tableName
+                });
+            })
+            .catch(() => {});
+    };
+    const handleChangeStatus = (Id) => {
+        changeStatusMutation.mutate({
+            tableName,
+            id: Id
+        });
+    };
+    const handlEdit = (item) => {
+        setOpenEditorDialog(true);
+        setSelectedEditItem(item);
+        onEditClick(item);
+    };
+    const handlViewDetail = (item) => {
+        setOpenViewDialog(true);
+        setSelectedEditItem(item);
+    };
+    const { rows, total } = useMemo(() => {
+        let rows = data?.data ?? [];
+        let total = data?.total ?? 0;
+        return {
+            rows: rows,
+            total
+        };
+    }, [data]);
+
+    useEffect(() => {
+        let PermissionModel = data?.PermissionModel;
+        PermissionModel && setPermission(PermissionModel);
+    }, [data]);
+    useEffect(() => {
+        const newSelectedItems = selectedItems.filter((selectedId) => {
+            return rows?.some((row) => row.Id == selectedId);
         });
-      })
-      .catch(() => {});
-  };
-  const theme = useTheme();
-  const downXL = useMediaQuery(theme.breakpoints.down("xl"));
-
-  return (
-    <>
-      <TableContainer sx={{ position: "relative" }}>
-        <TableToolbar
-          onSelectAllClick={handleSelectAllClick}
-          numSelected={selectedItems?.length}
-          rowCount={rows.length}
-          onDeleteMultiple={handleDeleteMultiple}
-          selected={selectedItems}
-          multipleActions={multipleActions}
-        />
-
-        <Table className="border" size={downXL ? "small" : "medium"}>
-          <TableHead
-            headLabel={columns}
-            onSelectAllClick={handleSelectAllClick}
-            numSelected={selectedItems?.length}
-            rowCount={rows.length}
-          />
-          {isLoading ? (
-            <TableRowsLoader rowsNum={5} colsNum={columns.length + 4} />
-          ) : (
-            <TableBody>
-              {[...rows].map((row, index) => (
-                <TableRowRender
-                  key={row.Id}
-                  index={index}
-                  row={row}
-                  selected={isSelected(row[selectedField])}
-                  onSelect={handleSelect}
-                  onEdit={handlEdit}
-                  onView={handlViewDetail}
-                  onChangeStatus={handleChangeStatus}
-                  onDelete={handleDelete}
+        setSelectedItems(newSelectedItems);
+    }, [rows]);
+    const handleChangePage = (event, newPage) => {
+        setPage(newPage);
+    };
+    const isSelected = (Id) => selectedItems.indexOf(Id) !== -1;
+
+    const handleSelect = (event, Id) => {
+        const selectedIndex = selectedItems.indexOf(Id);
+        let newSelected = [];
+
+        if (selectedIndex === -1) {
+            newSelected = newSelected.concat(selectedItems, Id);
+        } else if (selectedIndex === 0) {
+            newSelected = newSelected.concat(selectedItems.slice(1));
+        } else if (selectedIndex === selectedItems.length - 1) {
+            newSelected = newSelected.concat(selectedItems.slice(0, -1));
+        } else if (selectedIndex > 0) {
+            newSelected = newSelected.concat(selectedItems.slice(0, selectedIndex), selectedItems.slice(selectedIndex + 1));
+        }
+
+        setSelectedItems(newSelected);
+    };
+    const handleSelectAllClick = (event) => {
+        if (event.target.checked) {
+            const newSelected = rows.map((n) => n[selectedField]);
+            setSelectedItems(newSelected);
+            return;
+        }
+        setSelectedItems([]);
+    };
+
+    const handleChangeRowsPerPage = (event) => {
+        setRowsPerPage(parseInt(event.target.value, 10));
+        setPage(0);
+    };
+    const handleDeleteMultiple = () => {
+        confirm({ description: `Bạn có chắc chắn muốn xóa ${selectedItems?.length} bản ghi này không?`, title: "Xác nhận" })
+            .then(() => {
+                deleteMultipleMutation.mutate({
+                    tableName,
+                    ids: selectedItems
+                });
+            })
+            .catch(() => {});
+    };
+    const theme = useTheme();
+    const downXL = useMediaQuery(theme.breakpoints.down("xl"));
+
+    return (
+        <>
+            <TableContainer sx={{ position: "relative" }}>
+                <TableToolbar
+                    onSelectAllClick={handleSelectAllClick}
+                    numSelected={selectedItems?.length}
+                    rowCount={rows.length}
+                    onDeleteMultiple={handleDeleteMultiple}
+                    selected={selectedItems}
+                    multipleActions={multipleActions}
                 />
-              ))}
-
-              {rows?.length == 0 && (
-                <TableRow>
-                  <TableCell colSpan={columns.length + 4} align="center">
-                    Không có dữ liệu
-                  </TableCell>
-                </TableRow>
-              )}
-            </TableBody>
-          )}
-        </Table>
-      </TableContainer>
-      <TablePaginationCustom
-        count={total}
-        rowsPerPage={rowsPerPage}
-        page={page}
-        onPageChange={handleChangePage}
-        onRowsPerPageChange={handleChangeRowsPerPage}
-      />
-    </>
-  );
+
+                <Table className="border" size={downXL ? "small" : "medium"}>
+                    <TableHead
+                        headLabel={columns}
+                        onSelectAllClick={handleSelectAllClick}
+                        numSelected={selectedItems?.length}
+                        rowCount={rows.length}
+                    />
+                    {isLoading ? (
+                        <TableRowsLoader rowsNum={5} colsNum={columns.length + 4} />
+                    ) : (
+                        <TableBody>
+                            {[...rows].map((row, index) => (
+                                <TableRowRender
+                                    key={row.Id}
+                                    index={index}
+                                    row={row}
+                                    selected={isSelected(row[selectedField])}
+                                    onSelect={handleSelect}
+                                    onEdit={handlEdit}
+                                    onView={handlViewDetail}
+                                    onChangeStatus={handleChangeStatus}
+                                    onDelete={handleDelete}
+                                />
+                            ))}
+
+                            {rows?.length == 0 && (
+                                <TableRow>
+                                    <TableCell colSpan={columns.length + 4} align="center">
+                                        Không có dữ liệu
+                                    </TableCell>
+                                </TableRow>
+                            )}
+                        </TableBody>
+                    )}
+                </Table>
+            </TableContainer>
+
+            <Grid container>
+                {!hasTabpanel && (
+                    <Grid item alignSelf={"center"} sx={{ pl: 2 }}>
+                        <Typography variant="body1">
+                            Tổng số lượng: <span>{total}</span>
+                        </Typography>
+                    </Grid>
+                )}
+
+                <Grid item xs>
+                    <TablePaginationCustom
+                        count={total}
+                        rowsPerPage={rowsPerPage}
+                        page={page}
+                        onPageChange={handleChangePage}
+                        onRowsPerPageChange={handleChangeRowsPerPage}
+                    />
+                </Grid>
+            </Grid>
+        </>
+    );
 };
 export default DataTable;

package/components/DataManagement/index.jsx

@@ -16,189 +16,191 @@ import { FilterGod } from "./FilterGod";
 import { usePermission } from "../../hooks";
 
 DataManagement.propTypes = {
-  columns: PropTypes.array,
-  title: PropTypes.string,
-  tableName: PropTypes.string,
-  selectedField: PropTypes.string,
-  filters: PropTypes.arrayOf(
-    PropTypes.shape({
-      field: PropTypes.string,
-      label: PropTypes.string,
-      placeHolder: PropTypes.string,
-      type: PropTypes.oneOf(["text", "number", "date", "autocomplete", "checkbox", "radio", "switch"]),
-      onChangeAfter: PropTypes.func,
-      filters: PropTypes.array
-    })
-  ),
-  editorFields: PropTypes.array,
-  validationSchema: PropTypes.object,
-  disableStatus: PropTypes.bool,
-  disableAdd: PropTypes.bool,
-  disableCellThaoTac: PropTypes.bool,
-  statusKey: PropTypes.string,
-  tableActions: PropTypes.array,
-  disableEditor: PropTypes.bool,
-  onAddClick: PropTypes.func,
-  onEditClick: PropTypes.func,
-  tabPanel: PropTypes.node
+    columns: PropTypes.array,
+    title: PropTypes.string,
+    tableName: PropTypes.string,
+    selectedField: PropTypes.string,
+    filters: PropTypes.arrayOf(
+        PropTypes.shape({
+            field: PropTypes.string,
+            label: PropTypes.string,
+            placeHolder: PropTypes.string,
+            type: PropTypes.oneOf(["text", "number", "date", "autocomplete", "checkbox", "radio", "switch"]),
+            onChangeAfter: PropTypes.func,
+            filters: PropTypes.array
+        })
+    ),
+    editorFields: PropTypes.array,
+    validationSchema: PropTypes.object,
+    disableStatus: PropTypes.bool,
+    disableAdd: PropTypes.bool,
+    disableCellThaoTac: PropTypes.bool,
+    statusKey: PropTypes.string,
+    tableActions: PropTypes.array,
+    disableEditor: PropTypes.bool,
+    onAddClick: PropTypes.func,
+    onEditClick: PropTypes.func,
+    tabPanel: PropTypes.node
 };
 
 function DataManagement({
-  columns = [],
-  title,
-  tableName,
-  selectedField = "Id",
-  filters: tableFilters = [],
-  editorFields = [],
-  validationSchema = {},
-  statusKey = "Status",
-  disableStatus = false,
-  disableAdd = false,
-  disableCellThaoTac = false,
-
-  tableActions = [],
-  multipleActions = [],
-  
-  disableEditor = false,
-  onAddClick = () => {},
-  onEditClick = () => {},
-  tabPanel,
-  backParentNavigator,
-  slotProps = {
-    header: {
-      sx: {}
+    columns = [],
+    title,
+    tableName,
+    selectedField = "Id",
+    filters: tableFilters = [],
+    editorFields = [],
+    validationSchema = {},
+    statusKey = "Status",
+    disableStatus = false,
+    disableAdd = false,
+    disableCellThaoTac = false,
+
+    tableActions = [],
+    multipleActions = [],
+
+    disableEditor = false,
+    onAddClick = () => {},
+    onEditClick = () => {},
+    tabPanel,
+    backParentNavigator,
+    slotProps = {
+        header: {
+            sx: {}
+        }
     }
-  }
 }) {
-  const [openEditorDialog, setOpenEditorDialog] = useState(false);
-  const [selectedEditItem, setSelectedEditItem] = useState(null);
-  const [openViewDialog, setOpenViewDialog] = useState(false);
-
-  const { canCreate } = usePermission(tableName);
-  const { defaults, filters } = useMemo(() => {
-    const filters = tableFilters.filter(({ type }) => type !== "default");
-    const defaultFilters = tableFilters.filter(({ type }) => type === "default");
-
-    const defaults = defaultFilters.reduce((prev, { field, value }) => {
-      prev[field] = value;
-      return prev;
-    }, {});
-    return { defaults, filters };
-  }, [tableFilters]);
-
-  const theme = useTheme();
-  const upXL = useMediaQuery(theme.breakpoints.up("xl"));
-  const elementSize = useMemo(() => {
-    const elementSize = upXL ? "medium" : "small";
-    return elementSize;
-  }, [upXL]);
-
-  useEffect(() => {
-    setDataSearch({ ...dataSearch, ...defaults });
-  }, [filters]);
-
-  const [dataSearch, setDataSearch] = useState({ ...defaults });
-  const values = useMemo(() => {
-    return {
-      tableName,
-      selectedField,
-      columns,
-      selectedEditItem,
-      setSelectedEditItem,
-      setOpenEditorDialog,
-      setOpenViewDialog,
-      dataSearch,
-      setDataSearch,
-      validationSchema,
-      statusKey,
-      disableStatus,
-      disableCellThaoTac,
-      disableAdd,
-      tableActions,
-      onEditClick
-    };
-  }, [
-    tableName,
-    selectedField,
-    columns,
-    selectedEditItem,
-    dataSearch,
-    setDataSearch,
-    validationSchema,
-    tableActions,
-    openViewDialog,
-    setOpenViewDialog,
-    onEditClick
-  ]);
-
-  const methods = useForm({ defaultValues: {} });
-  const { reset, setValue } = methods;
- 
-  return (
-    <>
-      <DataTableContext.Provider value={values}>
-        <FormProvider {...methods}>
-          <Stack direction="row" justifyContent={"space-between"} sx={{ mb: upXL ? 2 : 1, ...slotProps?.header?.sx }}>
-            <Typography variant="h4">{title}</Typography>
-            <Stack direction="row" spacing={1}>
-              <Tooltip title="Làm mới">
-                <IconButton
-                  variant="outlined"
-                  color="primary"
-                  size={elementSize}
-                  onClick={() => {
-                    setDataSearch({ ...defaults });
-                    [...filters].forEach((filter) => {
-                      filter?.onChange?.();
-                    });
-                    reset();
-                    setValue("Search");
-                  }}
-                >
-                  <Refresh fontSize="inherit" />
-                </IconButton>
-              </Tooltip>
-
-              <ExportExcelButton tableName={tableName} data={dataSearch} size={elementSize} />
-              {canCreate && !disableAdd && (
-                <Button
-                  size={elementSize}
-                  variant="contained"
-                  startIcon={<Add fontSize="inherit" />}
-                  onClick={(e) => {
-                    if (!disableEditor) {
-                      setOpenEditorDialog(true);
-                      setSelectedEditItem(null);
-                    }
-                    onAddClick(e);
-                  }}
-                >
-                  Thêm
-                </Button>
-              )}
-            </Stack>
-          </Stack>
-
-          <Card>
-            {tabPanel}
-            <FilterGod filters={filters} elementSize={elementSize} />
-            {backParentNavigator}
-
-            <DataTable multipleActions={multipleActions} />
-          </Card>
-        </FormProvider>
-
-        {disableEditor || (
-          <EditorDialog
-            open={openEditorDialog}
-            onClose={() => setOpenEditorDialog(false)}
-            defaultValues={selectedEditItem}
-            fields={editorFields}
-          />
-        )}
-        <ViewDetailDialog open={openViewDialog} onClose={() => setOpenViewDialog(false)} fields={editorFields} />
-      </DataTableContext.Provider>
-    </>
-  );
+    const [openEditorDialog, setOpenEditorDialog] = useState(false);
+    const [selectedEditItem, setSelectedEditItem] = useState(null);
+    const [openViewDialog, setOpenViewDialog] = useState(false);
+
+    const { canCreate } = usePermission(tableName);
+    const { defaults, filters } = useMemo(() => {
+        const filters = tableFilters.filter(({ type }) => type !== "default");
+        const defaultFilters = tableFilters.filter(({ type }) => type === "default");
+
+        const defaults = defaultFilters.reduce((prev, { field, value }) => {
+            prev[field] = value;
+            return prev;
+        }, {});
+        return { defaults, filters };
+    }, [tableFilters]);
+
+    const theme = useTheme();
+    const upXL = useMediaQuery(theme.breakpoints.up("xl"));
+    const elementSize = useMemo(() => {
+        const elementSize = upXL ? "medium" : "small";
+        return elementSize;
+    }, [upXL]);
+
+    useEffect(() => {
+        setDataSearch({ ...dataSearch, ...defaults });
+    }, [filters]);
+
+    const [dataSearch, setDataSearch] = useState({ ...defaults });
+    const values = useMemo(() => {
+        const hasTabpanel = !!tabPanel;
+        return {
+            tableName,
+            selectedField,
+            columns,
+            selectedEditItem,
+            setSelectedEditItem,
+            setOpenEditorDialog,
+            setOpenViewDialog,
+            dataSearch,
+            setDataSearch,
+            validationSchema,
+            statusKey,
+            disableStatus,
+            disableCellThaoTac,
+            disableAdd,
+            tableActions,
+            onEditClick,
+            hasTabpanel
+        };
+    }, [
+        tableName,
+        selectedField,
+        columns,
+        selectedEditItem,
+        dataSearch,
+        setDataSearch,
+        validationSchema,
+        tableActions,
+        openViewDialog,
+        setOpenViewDialog,
+        onEditClick,
+    ]);
+
+    const methods = useForm({ defaultValues: {} });
+    const { reset, setValue } = methods;
+
+    return (
+        <>
+            <DataTableContext.Provider value={values}>
+                <FormProvider {...methods}>
+                    <Stack direction="row" justifyContent={"space-between"} sx={{ mb: upXL ? 2 : 1, ...slotProps?.header?.sx }}>
+                        <Typography variant="h4">{title}</Typography>
+                        <Stack direction="row" spacing={1}>
+                            <Tooltip title="Làm mới">
+                                <IconButton
+                                    variant="outlined"
+                                    color="primary"
+                                    size={elementSize}
+                                    onClick={() => {
+                                        setDataSearch({ ...defaults });
+                                        [...filters].forEach((filter) => {
+                                            filter?.onChange?.();
+                                        });
+                                        reset();
+                                        setValue("Search");
+                                    }}
+                                >
+                                    <Refresh fontSize="inherit" />
+                                </IconButton>
+                            </Tooltip>
+
+                            <ExportExcelButton tableName={tableName} data={dataSearch} size={elementSize} />
+                            {canCreate && !disableAdd && (
+                                <Button
+                                    size={elementSize}
+                                    variant="contained"
+                                    startIcon={<Add fontSize="inherit" />}
+                                    onClick={(e) => {
+                                        if (!disableEditor) {
+                                            setOpenEditorDialog(true);
+                                            setSelectedEditItem(null);
+                                        }
+                                        onAddClick(e);
+                                    }}
+                                >
+                                    Thêm
+                                </Button>
+                            )}
+                        </Stack>
+                    </Stack>
+
+                    <Card>
+                        {tabPanel}
+                        <FilterGod filters={filters} elementSize={elementSize} />
+                        {backParentNavigator}
+
+                        <DataTable multipleActions={multipleActions} />
+                    </Card>
+                </FormProvider>
+
+                {disableEditor || (
+                    <EditorDialog
+                        open={openEditorDialog}
+                        onClose={() => setOpenEditorDialog(false)}
+                        defaultValues={selectedEditItem}
+                        fields={editorFields}
+                    />
+                )}
+                <ViewDetailDialog open={openViewDialog} onClose={() => setOpenViewDialog(false)} fields={editorFields} />
+            </DataTableContext.Provider>
+        </>
+    );
 }
 export default DataManagement;

package/components/table/TablePagination.jsx

@@ -1,4 +1,4 @@
-import { Grid, TablePagination, Typography, useMediaQuery, useTheme } from "@mui/material";
+import { TablePagination, useMediaQuery, useTheme } from "@mui/material";
 import PropTypes from "prop-types";
 
 TablePaginationCustom.propsType = {
@@ -8,38 +8,27 @@ TablePaginationCustom.propsType = {
     onPageChange: PropTypes.func,
     onRowsPerPageChange: PropTypes.func
 };
-
+function defaultLabelDisplayedRows({ from, to, count }) {
+    return `${from}–${to} của ${count !== -1 ? count : `more than ${to}`}`;
+}
 function TablePaginationCustom({ count, rowsPerPage, page, onPageChange, onRowsPerPageChange, ...rest }) {
     const theme = useTheme();
     const matchsDownMD = useMediaQuery(theme.breakpoints.down("md"));
     return (
-        <>
-            <Grid container>
-                <Grid item alignSelf={"center"} sx={{ pl: 2}}>
-                    <Typography variant="body1">
-                        Tổng số lượng: <span>{count}</span>
-                    </Typography>
-                </Grid>
-                <Grid item xs>
-                    <TablePagination
-                        {...rest}
-                        rowsPerPageOptions={[5, 10, 25, 100]}
-                        component="div"
-                        count={count}
-                        rowsPerPage={rowsPerPage}
-                        page={page}
-                        onPageChange={onPageChange}
-                        onRowsPerPageChange={onRowsPerPageChange}
-                        showFirstButton={true}
-                        showLastButton={true}
-                        labelRowsPerPage={matchsDownMD ? "Số hàng" : "Số bản ghi trên trang:"}
-                        labelDisplayedRows={function defaultLabelDisplayedRows({ from, to, count }) {
-                            return `${from}–${to} của ${count !== -1 ? count : `more than ${to}`}`;
-                        }}
-                    />
-                </Grid>
-            </Grid>
-        </>
+        <TablePagination
+            {...rest}
+            rowsPerPageOptions={[5, 10, 25, 100]}
+            component="div"
+            count={count}
+            rowsPerPage={rowsPerPage}
+            page={page}
+            onPageChange={onPageChange}
+            onRowsPerPageChange={onRowsPerPageChange}
+            showFirstButton={true}
+            showLastButton={true}
+            labelRowsPerPage={matchsDownMD ? "Số hàng" : "Số bản ghi trên trang:"}
+            labelDisplayedRows={defaultLabelDisplayedRows}
+        />
     );
 }
 export default TablePaginationCustom;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "trithuc-mvc-react",
-  "version": "1.8.7",
+  "version": "1.8.9",
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"