trithuc-mvc-react 3.1.7 → 3.1.9

package/components/DataManagement/DataTable.jsx

@@ -350,7 +350,7 @@ const DataTable = ({ multipleActions = [], page, setPage = () => {}, disableEdit
           </Grid>
         )}
 
-        <Grid>
+        <Grid size={12}>
           <TablePaginationCustom
             count={total}
             rowsPerPage={rowsPerPage}

package/components/DataManagement/TableRowRenderSM.jsx

@@ -79,12 +79,13 @@ export const TableRowRenderSM = ({
         )}
 
         {/* Các nút thao tác */}
-        <Grid container spacing={2} sx={{ width: "100%", pt: 2, pb: 2 }}>
-          <Grid size={{ xs: 12 }} sx={{ display: "flex", justifyContent: "flex-end", flexWrap: "wrap" }}>
-            {!disableCellThaoTac && (
-              <>
-                {!disableEdit && canEdit && (
+        <Grid container spacing={0.5} sx={{ width: "100%", pt: 2, pb: 2 }}>
+          {!disableCellThaoTac && (
+            <>
+              {!disableEdit && canEdit && (
+                <Grid size={4}>
                   <Button
+                    fullWidth
                     size="small"
                     variant="outlined"
                     color="primary"
@@ -94,9 +95,12 @@ export const TableRowRenderSM = ({
                   >
                     Sửa
                   </Button>
-                )}
-                {canView && !tableActions?.some(({ permissionType }) => permissionType === "view") && (
+                </Grid>
+              )}
+              {canView && !tableActions?.some(({ permissionType }) => permissionType === "view") && (
+                <Grid size={4}>
                   <Button
+                    fullWidth
                     size="small"
                     variant="outlined"
                     color="info"
@@ -106,9 +110,12 @@ export const TableRowRenderSM = ({
                   >
                     Xem
                   </Button>
-                )}
-                {!disableDelete && canDelete && (
+                </Grid>
+              )}
+              {!disableDelete && canDelete && (
+                <Grid size={4}>
                   <Button
+                    fullWidth
                     size="small"
                     variant="outlined"
                     color="error"
@@ -118,11 +125,14 @@ export const TableRowRenderSM = ({
                   >
                     Xóa
                   </Button>
-                )}
-                {tableActionsOnTable.map(
-                  ({ title, onClick, element, visible = true }, idx) =>
-                    (typeof visible === "function" ? visible(row) : visible) && (
+                </Grid>
+              )}
+              {tableActionsOnTable.map(
+                ({ title, size, onClick, element, visible = true }, idx) =>
+                  (typeof visible === "function" ? visible(row) : visible) && (
+                    <Grid size={4}>
                       <Button
+                        fullWidth
                         key={idx}
                         size="small"
                         variant="outlined"
@@ -134,12 +144,12 @@ export const TableRowRenderSM = ({
                       >
                         {title === "xem chi tiết" ? "Xem" : title}
                       </Button>
-                    )
-                )}
-                <MoreMenu actions={tableActionsOnMoreMenu} data={row} />
-              </>
-            )}
-          </Grid>
+                    </Grid>
+                  )
+              )}
+              <MoreMenu actions={tableActionsOnMoreMenu} data={row} />
+            </>
+          )}
         </Grid>
       </TableCell>
     </TableRow>
@@ -148,13 +158,13 @@ export const TableRowRenderSM = ({
 
 // Button style dùng chung
 const buttonStyle = {
-  marginLeft: 0.3,
-  marginRight: 0.3,
-  marginBottom: 0.5,
-  borderRadius: 14,
+  // marginLeft: 0.3,
+  // marginRight: 0.3,
+  marginBottom: "10px",
+  borderRadius: "10px",
   minWidth: 50,
-  padding: "2px 8px",
-  height: "20px",
+  padding: "4px 8px",
+  height: "23px",
   fontSize: "0.6rem",
   whiteSpace: "nowrap",
   overflow: "hidden",

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.7",
+  "version": "3.1.9",
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"