trithuc-mvc-react 3.1.6 → 3.1.8

package/components/DataManagement/DataTableSM.jsx

@@ -14,6 +14,7 @@ import { TableRowRenderSM } from "./TableRowRenderSM";
 import TableToolbar from "./TableToolbar";
 import { useDataTable } from "./hooks";
 import DeleteConfirmationDialog from "./DeleteConfirmationDialog";
+import DeleteMultipleConfirmationDialog from "./DeleteMultipleConfirmationDialog";
 const defaultQueryOptions = {
   staleTime: 1000 * 60 * 1, // Thời gian dữ liệu có thể sử dụng lại trước khi gọi lại API
   cacheTime: 1000 * 60 * 30, // Thời gian dữ liệu được lưu trong cache trước khi bị xóa

package/components/DataManagement/index.jsx

@@ -3,6 +3,9 @@ import { Box, Button, Card, Grid, IconButton, Stack, Tooltip, Typography, useMed
 import { useEffect, useMemo, useState } from "react";
 
 import { Add, Refresh } from "@mui/icons-material";
+import BarChartIcon from "@mui/icons-material/BarChart";
+import PieChartIcon from "@mui/icons-material/PieChart";
+import TableChartIcon from "@mui/icons-material/TableChart";
 import PropTypes from "prop-types";
 import { DataTableContext } from "./context";
 import DataTable from "./DataTable";
@@ -60,7 +63,9 @@ DataManagement.propTypes = {
   onAddClick: PropTypes.func,
   onEditClick: PropTypes.func,
   tabPanel: PropTypes.node,
-  titleAddButton: PropTypes.string
+  titleAddButton: PropTypes.string,
+  thongKe: PropTypes.object,
+  bieuDo: PropTypes.object
 };
 const getDefaultValues = (filters = []) => {
   const defaultValues = {};
@@ -101,13 +106,18 @@ function DataManagement({
     }
   },
   defaultRowsPerPage = 5,
-  titleAddButton = "Thêm"
+  titleAddButton = "Thêm",
+  thongKe,
+  bieuDo
 }) {
   const [openEditorDialog, setOpenEditorDialog] = useState(false);
   const [selectedEditItem, setSelectedEditItem] = useState(null);
   const [openViewDialog, setOpenViewDialog] = useState(false);
 
-  const { canCreate } = usePermission(apiUrl ? apiUrl : tableName);
+  const { canCreate, canThongKe, canBieuDo } = usePermission(apiUrl ? apiUrl : tableName);
+
+  const [viewMode, setViewMode] = useState("table"); // "table" | "thongke" | "bieudo"
+
   const { defaults, filters } = useMemo(() => {
     const filters = tableFilters.filter(({ type }) => type !== "default");
     const defaultFilters = tableFilters.filter(({ type }) => type === "default");
@@ -165,7 +175,9 @@ function DataManagement({
       hasTabpanel,
       backParentNavigator,
       defaultRowsPerPage,
-      titleAddButton
+      titleAddButton,
+      thongKe,
+      bieuDo
     };
   }, [
     reserPage,
@@ -184,7 +196,9 @@ function DataManagement({
     setOpenViewDialog,
     onEditClick,
     backParentNavigator,
-    defaultRowsPerPage
+    defaultRowsPerPage,
+    thongKe,
+    bieuDo
   ]);
   const isSmallScreen = useMediaQuery(theme.breakpoints.down("sm")); // Xác định màn hình nhỏ
   const methods = useForm({ defaultValues: getDefaultValues(filters) });
@@ -319,6 +333,40 @@ function DataManagement({
                 width: rightBoxMinWidth ? `${rightBoxMinWidth}px` : "auto" // Sử dụng chiều rộng đo được
               }}
             >
+              {(viewMode === "thongke" || viewMode === "bieudo") && (
+                <Tooltip title="Danh sách dữ liệu">
+                  <IconButton size={elementSize} color="primary" onClick={() => setViewMode("table")} sx={{ ml: 0.5, mr: 0.5 }}>
+                    <TableChartIcon fontSize="inherit" />
+                  </IconButton>
+                </Tooltip>
+              )}
+
+              {canThongKe && (
+                <Tooltip title="Thống kê">
+                  <IconButton
+                    size={elementSize}
+                    color={viewMode === "thongke" ? "secondary" : "primary"}
+                    onClick={() => setViewMode("thongke")}
+                    sx={{ ml: 0.5, mr: 0.5 }}
+                  >
+                    <BarChartIcon fontSize="inherit" />
+                  </IconButton>
+                </Tooltip>
+              )}
+
+              {canBieuDo && (
+                <Tooltip title="Biểu đồ">
+                  <IconButton
+                    size={elementSize}
+                    color={viewMode === "bieudo" ? "secondary" : "primary"}
+                    onClick={() => setViewMode("bieudo")}
+                    sx={{ ml: 0.5, mr: 0.5 }}
+                  >
+                    <PieChartIcon fontSize="inherit" />
+                  </IconButton>
+                </Tooltip>
+              )}
+
               <HuongDanButton tableName={tableName} size={elementSize} />
               <Tooltip title="Làm mới">
                 <IconButton
@@ -370,25 +418,32 @@ function DataManagement({
 
           <Card className="custom-card-DataManagement">
             {tabPanel}
-            <FilterGod tableName={tableName} filters={filters} elementSize={elementSize} setPage={setPage} />
-            {backParentNavigator}
-            {!isSmallScreen ? (
-              <DataTable
-                multipleActions={multipleActions}
-                page={page}
-                setPage={setPage}
-                disableEdit={disableEdit}
-                disableDelete={disableDelete}
-              />
-            ) : (
-              <DataTableSM
-                multipleActions={multipleActions}
-                page={page}
-                setPage={setPage}
-                disableEdit={disableEdit}
-                disableDelete={disableDelete}
-              />
+            {viewMode === "table" && (
+              <>
+                <FilterGod tableName={tableName} filters={filters} elementSize={elementSize} setPage={setPage} />
+                {backParentNavigator}
+                {!isSmallScreen ? (
+                  <DataTable
+                    multipleActions={multipleActions}
+                    page={page}
+                    setPage={setPage}
+                    disableEdit={disableEdit}
+                    disableDelete={disableDelete}
+                  />
+                ) : (
+                  <DataTableSM
+                    multipleActions={multipleActions}
+                    page={page}
+                    setPage={setPage}
+                    disableEdit={disableEdit}
+                    disableDelete={disableDelete}
+                  />
+                )}
+              </>
             )}
+            {viewMode === "thongke" && thongKe}
+
+            {viewMode === "bieudo" && bieuDo}
           </Card>
         </FormProvider>
 

package/hooks/usePermission.js

@@ -11,7 +11,20 @@ const usePermission = (tableName) => {
   }
   const { permissionMap, setPermission } = context;
   const permission = permissionMap[tableName];
-  const { canEdit, canDelete, canDeleteMulti, canSave, canCreate, canAction, canView, canImport, canExportWord } = useMemo(() => {
+  const {
+    canEdit,
+    canDelete,
+    canDeleteMulti,
+    canSave,
+    canCreate,
+    canAction,
+    canView,
+    canImport,
+    canExportWord,
+    canPayment,
+    canThongKe,
+    canBieuDo
+  } = useMemo(() => {
     if (permission) {
       if (permission.TrangThaiXuLy !== undefined && permission.ObjTrangThai) {
         const status = permission.ObjTrangThai.find((t) => t.StatusId === permission.TrangThaiXuLy) || {};
@@ -24,7 +37,10 @@ const usePermission = (tableName) => {
           canAction: status.Action ?? false,
           canView: status.View ?? false,
           canImport: status.ImportFile ?? false,
-          canExportWord: status.ExportWord ?? false
+          canExportWord: status.ExportWord ?? false,
+          canPayment: status.Payment ?? false,
+          canThongKe: status.ThongKe ?? false,
+          canBieuDo: status.BieuDo ?? false
         };
       } else {
         return {
@@ -36,7 +52,10 @@ const usePermission = (tableName) => {
           canAction: permission.Action ?? false,
           canView: permission.View ?? false,
           canImport: permission.ImportFile ?? false,
-          canExportWord: permission.ExportWord ?? false
+          canExportWord: permission.ExportWord ?? false,
+          canPayment: permission.Payment ?? false,
+          canThongKe: permission.ThongKe ?? false,
+          canBieuDo: permission.BieuDo ?? false
         };
       }
     } else {
@@ -50,7 +69,10 @@ const usePermission = (tableName) => {
         canAction: false,
         canView: false,
         canImport: false,
-        canExportWord: false
+        canExportWord: false,
+        canPayment: false,
+        canThongKe: false,
+        canBieuDo: false
       };
     }
   }, [permission]);
@@ -70,7 +92,10 @@ const usePermission = (tableName) => {
     canAction,
     canView,
     canImport,
-    canExportWord
+    canExportWord,
+    canPayment,
+    canThongKe,
+    canBieuDo
   };
 };
 export default usePermission;

package/package.json

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