trithuc-mvc-react 1.6.14 → 1.7.1

package/components/DataManagement/DataTable.jsx

@@ -11,16 +11,26 @@ import { useConfirm } from "material-ui-confirm";
 
 import { TableRowRender } from "./TableRowRender";
 import TableToolbar from "./TableToolbar";
-import { useDataTable, usePermission } from "./hooks";
-
+import { useDataTable } from "./hooks";
+import { usePermission } from "../../hooks";
 const DataTable = () => {
-  const { tableName, selectedField, columns, dataSearch, setOpenEditorDialog, setSelectedEditItem, setOpenViewDialog, onEditClick } = useDataTable();
-  const { setPermission, Permission } = usePermission();
+  const {
+    tableName,
+    selectedField,
+    columns,
+    dataSearch,
+    setOpenEditorDialog,
+    setSelectedEditItem,
+    setOpenViewDialog,
+    onEditClick
+  } = useDataTable();
+  const { set: setPermission, permission } = usePermission(tableName);
   const queryClient = useQueryClient();
   const confirm = useConfirm();
   const [selected, setSelected] = useState([]);
   const [page, setPage] = useState(0);
   const [rowsPerPage, setRowsPerPage] = useState(5);
+
   const { data, isLoading } = useQuery({
     queryKey: [tableName, page, rowsPerPage, dataSearch],
     queryFn: () =>
@@ -80,7 +90,7 @@ const DataTable = () => {
           tableName
         });
       })
-      .catch(() => { });
+      .catch(() => {});
   };
   const handleChangeStatus = (Id) => {
     changeStatusMutation.mutate({
@@ -92,7 +102,6 @@ const DataTable = () => {
     setOpenEditorDialog(true);
     setSelectedEditItem(item);
     onEditClick(item);
-
   };
   const handlViewDetail = (item) => {
     setOpenViewDialog(true);
@@ -111,7 +120,7 @@ const DataTable = () => {
   useEffect(() => {
     let PermissionModel = data?.PermissionModel;
     PermissionModel && setPermission(PermissionModel);
-  }, [rows])
+  }, [rows]);
 
   const handleChangePage = (event, newPage) => {
     setPage(newPage);
@@ -153,7 +162,7 @@ const DataTable = () => {
           ids: selected
         });
       })
-      .catch(() => { });
+      .catch(() => {});
   };
   const theme = useTheme();
   const downXL = useMediaQuery(theme.breakpoints.down("xl"));

package/components/DataManagement/EditorDialog.jsx

@@ -11,7 +11,8 @@ import { useEffect, useRef, useState } from "react";
 import PropTypes from "prop-types";
 
 import EditorForm from "./EditorForm";
-import { usePermission } from "./hooks";
+import { usePermission } from "../../hooks";
+import { useDataTable } from "./hooks";
 EditorDialog.propTypes = {
   open: PropTypes.bool,
   onClose: PropTypes.func,
@@ -19,7 +20,8 @@ EditorDialog.propTypes = {
 };
 function EditorDialog({ open, onClose = () => {}, defaultValues = {}, fields = [] }) {
   const [isDisableBtnSave, setIsDisableBtnSave] = useState(false);
-  const { canSave } = usePermission();
+  const { tableName } = useDataTable();
+  const { canSave } = usePermission(tableName);
 
   useEffect(() => {}, [defaultValues]);
 
@@ -31,7 +33,7 @@ function EditorDialog({ open, onClose = () => {}, defaultValues = {}, fields = [
   };
   const submitRef = useRef();
   return (
-    <Dialog open={open} onClose={onClose} maxWidth="md" fullWidth={true} scroll={'body'}>
+    <Dialog open={open} onClose={onClose} maxWidth="md" fullWidth={true} scroll={"body"}>
       <DialogTitle>
         {defaultValues?.Id ? "Cập nhật" : "Thêm mới"}
         <IconButton
@@ -48,7 +50,7 @@ function EditorDialog({ open, onClose = () => {}, defaultValues = {}, fields = [
         </IconButton>
       </DialogTitle>
       <DialogContent dividers={true}>
-        <EditorForm fields={fields} submitRef={submitRef}  />
+        <EditorForm fields={fields} submitRef={submitRef} />
       </DialogContent>
       <DialogActions>
         <Button onClick={onClose}>Đóng</Button>

package/components/DataManagement/TableHead.jsx

@@ -1,8 +1,10 @@
 import { Checkbox, TableRow, TableCell, TableHead as MuiTableHead, useTheme, useMediaQuery } from "@mui/material";
-import { useDataTable, usePermission } from "./hooks";
+import { useDataTable } from "./hooks";
+import { usePermission } from "../../hooks";
 export function TableHead({ numSelected, rowCount, onSelectAllClick, headLabel }) {
-  const { canEdit } = usePermission();
-  const { disableStatus,disableCellThaoTac } = useDataTable();
+  const { disableStatus, disableCellThaoTac, tableName } = useDataTable();
+  const { canEdit } = usePermission(tableName);
+
   const theme = useTheme();
   const downXl = useMediaQuery(theme.breakpoints.down("xl"));
   return (
@@ -11,7 +13,7 @@ export function TableHead({ numSelected, rowCount, onSelectAllClick, headLabel }
         <TableCell padding="checkbox">
           <Checkbox
             indeterminate={numSelected > 0 && numSelected < rowCount}
-            size={downXl?"small":"medium"}
+            size={downXl ? "small" : "medium"}
             checked={rowCount > 0 && numSelected === rowCount}
             onChange={onSelectAllClick}
           />

package/components/DataManagement/TableRowRender.jsx

@@ -1,17 +1,17 @@
 import { Checkbox, IconButton, Switch, TableCell, TableRow, Tooltip, Toolbar, useMediaQuery } from "@mui/material";
 import DeleteOutlineIcon from "@mui/icons-material/DeleteOutline";
 import { EditOutlined } from "@mui/icons-material";
-import { useDataTable, usePermission } from "./hooks";
+import { useDataTable } from "./hooks";
 import RemoveRedEyeOutlinedIcon from "@mui/icons-material/RemoveRedEyeOutlined";
-
+import { usePermission } from "../../hooks";
 // material
 import { styled, useTheme } from "@mui/material/styles";
 import MoreMenu from "../MoreMenu";
 import { useMemo } from "react";
 
 export const TableRowRender = ({ index, row, selected, onSelect, onChangeStatus, onDelete, onEdit, onView }) => {
-  const { selectedField, columns, statusKey, disableStatus, tableActions, disableCellThaoTac } = useDataTable();
-  const { canEdit, canDelete, canView, canAction } = usePermission();
+  const { selectedField, columns, statusKey, disableStatus, tableActions, disableCellThaoTac, tableName } = useDataTable();
+  const { canEdit, canDelete, canView, canAction } = usePermission(tableName);
 
   const { tableActionsOnTable, tableActionsOnMoreMenu } = useMemo(() => {
     const tableActionsAfterFilter = [...tableActions].filter(({ permissionType }) => {
@@ -69,46 +69,50 @@ export const TableRowRender = ({ index, row, selected, onSelect, onChangeStatus,
         </TableCell>
       )}
 
-      {!disableCellThaoTac && <TableCell align="center">
-        {canEdit && (
-          <Tooltip title="Chỉnh sửa">
-            <IconButton size={downXl ? "small" : "medium"} onClick={() => onEdit(row)}>
-              <EditOutlined fontSize="inherit" color="primary" />
-            </IconButton>
-          </Tooltip>
-        )}
-        {canView && !tableActions?.some(({ permissionType }) => permissionType == "view") && (
-          <Tooltip title="Xem chi tiết">
-            <IconButton onClick={() => onView(row)}>
-              <RemoveRedEyeOutlinedIcon color="info" />
-            </IconButton>
-          </Tooltip>
-        )}
-        {canDelete && (
-          <Tooltip title="Xóa">
-            <IconButton size={downXl ? "small" : "medium"}
-              onClick={() => {
-                onDelete(row[selectedField]);
-              }}
-            >
-              <DeleteOutlineIcon fontSize="inherit" color="error" />
-            </IconButton>
-          </Tooltip>
-        )}
-        {tableActionsOnTable.map(({ title, onClick, element }) => (
-          <Tooltip key={title} title={title}>
-            <IconButton size={downXl ? "small" : "medium"}
-              onClick={() => {
-                onClick(row);
-              }}
-            >
-              {element}
-            </IconButton>
-          </Tooltip>
-        ))}
+      {!disableCellThaoTac && (
+        <TableCell align="center">
+          {canEdit && (
+            <Tooltip title="Chỉnh sửa">
+              <IconButton size={downXl ? "small" : "medium"} onClick={() => onEdit(row)}>
+                <EditOutlined fontSize="inherit" color="primary" />
+              </IconButton>
+            </Tooltip>
+          )}
+          {canView && !tableActions?.some(({ permissionType }) => permissionType == "view") && (
+            <Tooltip title="Xem chi tiết">
+              <IconButton onClick={() => onView(row)}>
+                <RemoveRedEyeOutlinedIcon color="info" />
+              </IconButton>
+            </Tooltip>
+          )}
+          {canDelete && (
+            <Tooltip title="Xóa">
+              <IconButton
+                size={downXl ? "small" : "medium"}
+                onClick={() => {
+                  onDelete(row[selectedField]);
+                }}
+              >
+                <DeleteOutlineIcon fontSize="inherit" color="error" />
+              </IconButton>
+            </Tooltip>
+          )}
+          {tableActionsOnTable.map(({ title, onClick, element }) => (
+            <Tooltip key={title} title={title}>
+              <IconButton
+                size={downXl ? "small" : "medium"}
+                onClick={() => {
+                  onClick(row);
+                }}
+              >
+                {element}
+              </IconButton>
+            </Tooltip>
+          ))}
 
-        {<MoreMenu actions={tableActionsOnMoreMenu} data={row} />}
-      </TableCell>}
+          {<MoreMenu actions={tableActionsOnMoreMenu} data={row} />}
+        </TableCell>
+      )}
     </TableRow>
   );
 };

package/components/DataManagement/TableToolbar.jsx

@@ -1,15 +1,17 @@
 import { Checkbox, IconButton, Tooltip, Typography, Box, useMediaQuery } from "@mui/material";
 import { Delete } from "@mui/icons-material";
-import { usePermission } from "./hooks";
+
 import PropTypes from "prop-types";
 import { useTheme } from "@mui/material/styles";
 import { RootStyle } from "./TableRowRender";
-
+import { usePermission } from "../../hooks";
+import { useDataTable } from "./hooks";
 // ----------------------------------------------------------------------
 const TableToolbar = ({ numSelected, onSelectAllClick, rowCount, onDeleteMultiple }) => {
   const theme = useTheme();
   const isLight = theme.palette.mode === "light";
-  const { canDeleteMulti } = usePermission();
+  const { tableName } = useDataTable();
+  const { canDeleteMulti } = usePermission(tableName);
   const downXl = useMediaQuery(theme.breakpoints.down("xl"));
 
   return (
@@ -24,9 +26,10 @@ const TableToolbar = ({ numSelected, onSelectAllClick, rowCount, onDeleteMultipl
           width: "100%",
           ...(numSelected > 0 && {
             color: isLight ? "primary.main" : "text.primary",
-            bgcolor: isLight ? "primary.lighter" : "primary.dark",
-          }),
-        }}>
+            bgcolor: isLight ? "primary.lighter" : "primary.dark"
+          })
+        }}
+      >
         <Box padding="checkbox" sx={{ display: "flex", alignItems: "center" }}>
           <Checkbox
             indeterminate={numSelected > 0 && numSelected < rowCount}
@@ -40,7 +43,7 @@ const TableToolbar = ({ numSelected, onSelectAllClick, rowCount, onDeleteMultipl
 
         {canDeleteMulti && (
           <Tooltip title="Xóa tất cả" onClick={onDeleteMultiple}>
-            <IconButton size={downXl ? "small" : "medium"} >
+            <IconButton size={downXl ? "small" : "medium"}>
               <Delete color="primary" />
             </IconButton>
           </Tooltip>

package/components/DataManagement/ViewDetailDialog.jsx

@@ -7,21 +7,20 @@ import DialogTitle from "@mui/material/DialogTitle";
 import IconButton from "@mui/material/IconButton";
 import CloseIcon from "@mui/icons-material/Close";
 
-import { useEffect, useRef, useState } from "react";
 import PropTypes from "prop-types";
 
-import EditorForm from "trithuc-mvc-react/components/DataManagement/EditorForm";
-import { useDataTable, usePermission } from "trithuc-mvc-react/components/DataManagement/hooks";
+import EditorForm from "./EditorForm";
+
 ViewDetailDialog.propTypes = {
   open: PropTypes.bool,
-  onClose: PropTypes.func,
+  onClose: PropTypes.func
 };
 import { Stack, Typography, List, ListItem, ListItemText, ListItemIcon, Link, Grid } from "@mui/material";
 import TextSnippetOutlinedIcon from "@mui/icons-material/TextSnippetOutlined";
 export const FieldView = ({ label, value }) => {
   return (
     <Stack direction="column">
-      <Typography variant="body2" sx={{ color: "text.secondary", }}>
+      <Typography variant="body2" sx={{ color: "text.secondary" }}>
         {label}
       </Typography>
       <Typography variant="subtitle2">{value}</Typography>
@@ -56,7 +55,7 @@ export const ListFileView = ({ files }) => {
               <TextSnippetOutlinedIcon color="info" />
             </ListItemIcon>
             <ListItemText
-              primary={<Link href={urlFile} >{tenFile}</Link>}
+              primary={<Link href={urlFile}>{tenFile}</Link>}
               secondary={Size}
               primaryTypographyProps={{ variant: "subtitle2" }}
               secondaryTypographyProps={{ variant: "caption" }}
@@ -68,11 +67,10 @@ export const ListFileView = ({ files }) => {
   );
 };
 
-function ViewDetailDialog({ open, onClose = () => { }, fields = [] }) {
-
-  const fieldsView  = fields.map(field=>({...field, disabled: true}));
+function ViewDetailDialog({ open, onClose = () => {}, fields = [] }) {
+  const fieldsView = fields.map((field) => ({ ...field, disabled: true }));
   return (
-    <Dialog open={open} onClose={onClose} maxWidth="md" fullWidth={true} scroll={'body'}>
+    <Dialog open={open} onClose={onClose} maxWidth="md" fullWidth={true} scroll={"body"}>
       <DialogTitle>
         Xem chi tiết
         <IconButton

package/components/DataManagement/context.js

@@ -1,4 +1,3 @@
 import { createContext } from "react";
 
 export const DataTableContext = createContext({ tableName: null });
-export const PermissionContext = createContext({});

package/components/DataManagement/hooks.js

@@ -1,22 +1,6 @@
-import { useContext, useMemo } from "react";
-import { DataTableContext, PermissionContext } from "./context";
+import { useContext } from "react";
+import { DataTableContext } from "./context";
 
 export function useDataTable() {
   return useContext(DataTableContext);
 }
-export function usePermission() {
-  const { Permission, setPermission } = useContext(PermissionContext);
-  const { canEdit, canDelete, canDeleteMulti, canSave, canCreate, canAction, canView } = useMemo(() => {
-    const canEdit = !Permission || Permission.Edit;
-    const canDelete = !Permission || Permission.Delete;
-    const canDeleteMulti = !Permission || Permission.DeleteMulti;
-    const canSave = !Permission || Permission.Save;
-    const canCreate = !Permission || Permission.Create;
-    const canAction = !Permission || Permission.Action;
-    const canView = !Permission || Permission.View;
-    
-    return { canEdit, canDelete, canDeleteMulti, canSave, canCreate, canAction, canView };
-  }, [Permission]);
-
-  return { Permission, setPermission, canEdit, canDelete, canDeleteMulti, canSave, canCreate, canAction, canView };
-}

package/components/DataManagement/index.jsx

@@ -2,7 +2,7 @@ import { Button, Card, IconButton, Stack, Tooltip, Typography, useTheme, useMedi
 
 import { useEffect, useMemo, useState } from "react";
 
-import { DataTableContext, PermissionContext } from "./context";
+import { DataTableContext } from "./context";
 import PropTypes from "prop-types";
 import DataTable from "./DataTable";
 import { Add, Refresh } from "@mui/icons-material";
@@ -13,7 +13,7 @@ import ViewDetailDialog from "./ViewDetailDialog";
 
 import ExportExcelButton from "./ExportExcelButton";
 import { FilterGod } from "./FilterGod";
-
+import { usePermission } from "../../hooks";
 
 DataManagement.propTypes = {
   columns: PropTypes.array,
@@ -57,8 +57,8 @@ function DataManagement({
   disableCellThaoTac = false,
   tableActions = [],
   disableEditor = false,
-  onAddClick = () => { },
-  onEditClick = () => { },
+  onAddClick = () => {},
+  onEditClick = () => {},
   tabPanel,
   backParentNavigator,
   slotProps = {
@@ -71,8 +71,7 @@ function DataManagement({
   const [selectedEditItem, setSelectedEditItem] = useState(null);
   const [openViewDialog, setOpenViewDialog] = useState(false);
 
-  const [Permission, setPermission] = useState(null);
-
+  const { canCreate } = usePermission(tableName);
   const { defaults, filters } = useMemo(() => {
     const filters = tableFilters.filter(({ type }) => type !== "default");
     const defaultFilters = tableFilters.filter(({ type }) => type === "default");
@@ -91,7 +90,6 @@ function DataManagement({
     return elementSize;
   }, [upXL]);
 
-
   useEffect(() => {
     setDataSearch({ ...dataSearch, ...defaults });
   }, [filters]);
@@ -116,80 +114,83 @@ function DataManagement({
       tableActions,
       onEditClick
     };
-  }, [tableName, selectedField, columns, selectedEditItem, dataSearch, setDataSearch, validationSchema, tableActions, openViewDialog, setOpenViewDialog, onEditClick]);
-  const permissionValues = useMemo(() => {
-    return {
-      Permission,
-      setPermission
-    };
-  }, [Permission, setPermission]);
+  }, [
+    tableName,
+    selectedField,
+    columns,
+    selectedEditItem,
+    dataSearch,
+    setDataSearch,
+    validationSchema,
+    tableActions,
+    openViewDialog,
+    setOpenViewDialog,
+    onEditClick
+  ]);
+
   const methods = useForm({ defaultValues: {} });
   const { reset, setValue } = methods;
   return (
     <>
       <DataTableContext.Provider value={values}>
-        <PermissionContext.Provider value={permissionValues}>
-          <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} />
-                {(!Permission || Permission.Create) && (
-                  (!disableAdd) && (
-                    <Button
-                      size={elementSize}
-                      variant="contained"
-                      startIcon={<Add fontSize="inherit" />}
-                      onClick={(e) => {
-                        if (!disableEditor) {
-                          setOpenEditorDialog(true);
-                          setSelectedEditItem(null);
-                        }
-                        onAddClick(e);
-                      }}
-                    >
-                      Thêm
-                    </Button>
-                  )
-                )}
-              </Stack>
+        <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>
-
-            <Card>
-              {tabPanel}
-              <FilterGod filters={filters} elementSize={elementSize} />
-              {backParentNavigator}
-              <DataTable />
-            </Card>
-          </FormProvider>
-          {disableEditor || (
-            <EditorDialog
-              open={openEditorDialog}
-              onClose={() => setOpenEditorDialog(false)}
-              defaultValues={selectedEditItem}
-              fields={editorFields}
-            />
-          )}
-          <ViewDetailDialog open={openViewDialog} onClose={() => setOpenViewDialog(false)} fields={editorFields} />
-        </PermissionContext.Provider>
+          </Stack>
+
+          <Card>
+            {tabPanel}
+            <FilterGod filters={filters} elementSize={elementSize} />
+            {backParentNavigator}
+            <DataTable />
+          </Card>
+        </FormProvider>
+        {disableEditor || (
+          <EditorDialog
+            open={openEditorDialog}
+            onClose={() => setOpenEditorDialog(false)}
+            defaultValues={selectedEditItem}
+            fields={editorFields}
+          />
+        )}
+        <ViewDetailDialog open={openViewDialog} onClose={() => setOpenViewDialog(false)} fields={editorFields} />
       </DataTableContext.Provider>
     </>
   );

package/contexts/index.jsx

@@ -0,0 +1,6 @@
+import { createContext, useContext, useMemo, useState } from "react";
+
+export const PermissionContext = createContext({
+  permissionMap: {},
+  setPermission: () => {}
+});

package/hooks/index.jsx

@@ -0,0 +1 @@
+export * from "./usePermission";

package/hooks/usePermission.js

@@ -0,0 +1,34 @@
+import { useContext, useMemo } from "react";
+import { PermissionContext } from "../contexts";
+
+export const usePermission = (tableName) => {
+  if (!tableName) {
+    throw new Error("tableName is required");
+  }
+  const context = useContext(PermissionContext);
+  if (!context) {
+    throw new Error("usePermission must be used within a PermissionProvider");
+  }
+  const { permissionMap, setPermission } = context;
+
+  const permission = permissionMap[tableName];
+
+  const { canEdit, canDelete, canDeleteMulti, canSave, canCreate, canAction, canView, canImport } = useMemo(() => {
+    const canEdit = !permission || permission.Edit;
+    const canDelete = !permission || permission.Delete;
+    const canDeleteMulti = !permission || permission.DeleteMulti;
+    const canSave = !permission || permission.Save;
+    const canCreate = !permission || permission.Create;
+    const canAction = !permission || permission.Action;
+    const canView = !permission || permission.View;
+    const canImport = !permission || permission.ImportFile;
+
+    return { canEdit, canDelete, canDeleteMulti, canSave, canCreate, canAction, canView, canImport };
+  }, [permission]);
+
+  const set = (permission) => {
+    setPermission({ ...permissionMap, [tableName]: permission });
+  };
+
+  return { permission, set, canEdit, canDelete, canDeleteMulti, canSave, canCreate, canAction, canView, canImport };
+};

package/index.js

@@ -1,3 +1,6 @@
 export * from "./api";
 export * from "./components";
 export * from "./helpers";
+export * from "./contexts";
+export * from "./hooks";
+export * from "./providers";

package/jsconfig.json

@@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "module": "commonjs",
+    "target": "es6",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "**/node_modules", "dist"]
+}

package/package.json

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

package/providers/PermissionProvider.jsx

@@ -0,0 +1,11 @@
+import { useMemo, useState } from "react";
+import { PermissionContext } from "../contexts";
+
+export const PermissionProvider = ({ children }) => {
+  const [permissionMap, setPermission] = useState({});
+  const value = useMemo(() => {
+    return { permissionMap, setPermission };
+  }, [permissionMap, setPermission]);
+  console.log("PermissionProvider: permissionMap", permissionMap);
+  return <PermissionContext.Provider value={value}>{children}</PermissionContext.Provider>;
+};

package/providers/index.jsx

@@ -0,0 +1 @@
+export * from "./PermissionProvider";

package/utils/index.js

@@ -28,5 +28,3 @@ export const saveFilesToServer = async (files) => {
     console.log(error);
   }
 };
-
-