trithuc-mvc-react 2.7.3 → 2.7.5

package/api/index.js

@@ -1,3 +1,4 @@
+import { storeGetlanguage, storeGetToken } from "@/utils/storage";
 import axios from "axios";
 
 let baseUrl = "";
@@ -30,10 +31,25 @@ export function setAuthToken(token) {
 }
 
 // Cài đặt token từ localStorage khi khởi tạo
-const token = localStorage.getItem("token");
+const token = storeGetToken();
 if (token) {
   setAuthToken(token);
 }
+// Sử dụng interceptor để thêm ngôn ngữ vào headers
+api.interceptors.request.use((config) => {
+  const token = storeGetToken();
+  const language = storeGetlanguage(); // Lấy ngôn ngữ từ local storage
+
+  if (token) {
+    config.headers["Authorization"] = `Bearer ${token}`; // Gán token vào headers
+  }
+
+  if (language) {
+    config.headers["Accept-Language"] = language; // Gán ngôn ngữ vào headers
+  }
+
+  return config;
+});
 export default api;
 
 export const getDatasFromTable = async ({ tableName, page, pageSize, data }) => {

package/components/DataManagement/DataTableSM.jsx

@@ -0,0 +1,314 @@
+import { Grid, Table, TableBody, TableCell, TableContainer, TableRow, Typography, useMediaQuery, useTheme } from "@mui/material";
+import TablePaginationCustom from "../table/TablePagination";
+import { useEffect, useMemo, useState } from "react";
+
+import { TableHead } from "./TableHead";
+import { useMutation, useQuery, useQueryClient } from "react-query";
+import { changeStatusDataToTable, deleteDataFromTable, deleteMultipleDataFromTable, getDatasFromTable } from "../../api";
+import TableRowsLoader from "../table/TableRowsLoader";
+import { toast } from "react-toastify";
+import { useConfirm } from "material-ui-confirm";
+
+import { TableRowRender } from "./TableRowRender";
+import TableToolbar from "./TableToolbar";
+import { useDataTable } from "./hooks";
+import { usePermission } from "../../hooks";
+import { URL_APPLICATION, URL_APPLICATION_API } from "@/constants";
+import { TableRowRenderSM } from "./TableRowRenderSM";
+const DataTableSM = ({ multipleActions = [], page, setPage = () => {}, disableEdit, disableDelete }) => {
+  const {
+    tableName,
+    selectedField,
+    columns,
+    dataSearch,
+    setOpenEditorDialog,
+    setSelectedEditItem,
+    setOpenViewDialog,
+    onEditClick,
+    hasTabpanel,
+    defaultRowsPerPage = 5
+  } = 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(defaultRowsPerPage);
+
+  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 (dataSearch?.TrangThaiXuLy !== undefined) {
+        PermissionModel.TrangThaiXuLy = dataSearch?.TrangThaiXuLy;
+      }
+      if (status) {
+        setPermission(PermissionModel);
+        // console.log("LOAD LAI PermissionModel");
+      }
+    }
+  });
+  const changeStatusMutation = useMutation(changeStatusDataToTable, {
+    onSuccess: ({ status = false, message = " Có lỗi xảy ra !" }) => {
+      if (URL_APPLICATION_API) {
+        toast.success(message);
+      } else {
+        toast.success("Thay đổi trạng thái thành công !");
+      }
+      queryClient.invalidateQueries({ queryKey: [tableName] });
+    },
+    onError: (error) => {
+      if (error.response && error.response.data && error.response.data.errors) {
+        const errors = error.response.data.errors;
+        // Chuyển đổi đối tượng lỗi thành chuỗi để hiển thị
+        const errorMessages = Object.entries(errors)
+          .map(([field, messages]) => `${field}: ${messages.join(", ")}`)
+          .join("\n");
+        toast.error(errorMessages);
+      } else {
+        // Nếu lỗi không theo định dạng mong đợi, hiển thị thông tin lỗi chung
+        toast.error("Đã xảy ra lỗi không mong muốn.");
+      }
+    }
+  });
+  const deleteMutation = useMutation(deleteDataFromTable, {
+    onSuccess: ({ status = false, message = " Có lỗi xảy ra !" }) => {
+      if (status) {
+        if (URL_APPLICATION_API) {
+          toast.success(message);
+        } else {
+          toast.success("Xóa thành công !");
+        }
+      } else {
+        toast.error(" Có lỗi xảy ra !");
+      }
+
+      queryClient.invalidateQueries({ queryKey: [tableName] });
+    },
+    onError: (error) => {
+      if (error.response && error.response.data && error.response.data.errors) {
+        const errors = error.response.data.errors;
+        // Chuyển đổi đối tượng lỗi thành chuỗi để hiển thị
+        const errorMessages = Object.entries(errors)
+          .map(([field, messages]) => `${field}: ${messages.join(", ")}`)
+          .join("\n");
+        toast.error(errorMessages);
+      } else {
+        // Nếu lỗi không theo định dạng mong đợi, hiển thị thông tin lỗi chung
+        toast.error("Đã xảy ra lỗi không mong muốn.");
+      }
+    }
+  });
+  const deleteMultipleMutation = useMutation(deleteMultipleDataFromTable, {
+    onSuccess: ({ status = false, message = " Có lỗi xảy ra !" }) => {
+      if (URL_APPLICATION_API) {
+        toast.success(message);
+      } else {
+        toast.success("Xóa thành công !");
+      }
+      setSelectedItems([]);
+      queryClient.invalidateQueries({ queryKey: [tableName] });
+    },
+    onError: (error) => {
+      if (error.response && error.response.data && error.response.data.errors) {
+        const errors = error.response.data.errors;
+        // Chuyển đổi đối tượng lỗi thành chuỗi để hiển thị
+        const errorMessages = Object.entries(errors)
+          .map(([field, messages]) => `${field}: ${messages.join(", ")}`)
+          .join("\n");
+        toast.error(errorMessages);
+      } else {
+        // Nếu lỗi không theo định dạng mong đợi, hiển thị thông tin lỗi chung
+        toast.error("Đã xảy ra lỗi không mong muốn.");
+      }
+    }
+  });
+
+  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",
+      cancellationText: "Hủy",
+      confirmationText: "Xóa"
+    })
+      .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);
+    });
+    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) => {
+    const newRowsPerPage = parseInt(event.target.value, 10); // Chuyển đổi giá trị thành số nguyên
+    // Lưu giá trị mới vào localStorage với khóa tùy chỉnh theo tableName
+    localStorage.setItem(`${tableName}rowsPerPage`, newRowsPerPage);
+    setRowsPerPage(newRowsPerPage);
+    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",
+      cancellationText: "Hủy",
+      confirmationText: "Đồng ý"
+    })
+      .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}
+        />
+
+        <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) => (
+                <TableRowRenderSM
+                  key={row.Id}
+                  index={index}
+                  row={row}
+                  page={page}
+                  rowsPerPage={rowsPerPage}
+                  selected={isSelected(row[selectedField])}
+                  onSelect={handleSelect}
+                  onEdit={handlEdit}
+                  disableEdit={disableEdit}
+                  disableDelete={disableDelete}
+                  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 DataTableSM;

package/components/DataManagement/ExportExcelButton.jsx

@@ -1,23 +1,25 @@
 import { toast } from "react-toastify";
 import { exportExcel } from "../../api";
-import { Button } from "@mui/material";
+import { Button, IconButton, Tooltip, useMediaQuery, useTheme } from "@mui/material";
 import { Download } from "@mui/icons-material";
-import { URL_APPLICATION ,URL_APPLICATION_API } from "@/constants";
+import { URL_APPLICATION, URL_APPLICATION_API } from "@/constants";
 
 const ExportExcelButton = ({ tableName, data, size = "small" }) => {
+  const theme = useTheme();
+  const isSmallScreen = useMediaQuery(theme.breakpoints.down("sm")); // Xác định màn hình nhỏ
   const handleExportExcel = async (tableName, data) => {
     const _data = await exportExcel({ tableName, data });
     if (_data.status) {
-      if(URL_APPLICATION_API){
+      if (URL_APPLICATION_API) {
         window.open(URL_APPLICATION + _data.url, "_blank").focus();
-      }else{
+      } else {
         window.open(_data.url, "_blank").focus();
       }
     } else {
       toast.error("Xuất file thất bại!");
     }
   };
-  return (
+  return !isSmallScreen ? (
     <Button
       size={size}
       variant="outlined"
@@ -28,6 +30,20 @@ const ExportExcelButton = ({ tableName, data, size = "small" }) => {
     >
       Excel
     </Button>
+  ) : (
+    <Tooltip title="Excel">
+      <IconButton
+        variant="outlined" // Thêm variant ở đây
+        color="primary"
+        size={size}
+        onClick={() => {
+          handleExportExcel(tableName, data);
+        }}
+        sx={{ border: "1px solid", borderColor: "primary.main" }} // Điều chỉnh kiểu dáng nếu cần
+      >
+        <Download fontSize="inherit" />
+      </IconButton>
+    </Tooltip>
   );
 };
 export default ExportExcelButton;

package/components/DataManagement/TableRowRenderSM.jsx

@@ -0,0 +1,149 @@
+import { Checkbox, IconButton, Switch, TableCell, TableRow, Tooltip, Toolbar, useMediaQuery, Box, Grid } from "@mui/material";
+import DeleteOutlineIcon from "@mui/icons-material/DeleteOutline";
+import { EditOutlined } from "@mui/icons-material";
+import { useDataTable } from "./hooks";
+import RemoveRedEyeOutlinedIcon from "@mui/icons-material/RemoveRedEyeOutlined";
+import { usePermission } from "../../hooks";
+import { styled, useTheme } from "@mui/material/styles";
+import MoreMenu from "../MoreMenu";
+import { useMemo } from "react";
+
+export const TableRowRenderSM = ({
+  index,
+  row,
+  page,
+  rowsPerPage,
+  selected,
+  onSelect,
+  onChangeStatus,
+  onDelete,
+  onEdit,
+  onView,
+  disableEdit,
+  disableDelete
+}) => {
+  const { selectedField, columns, statusKey, disableStatus, tableActions, disableCellThaoTac, tableName, sttLuyKe } =
+    useDataTable();
+  const { canEdit, canDelete, canView, canAction } = usePermission(tableName);
+
+  const { tableActionsOnTable, tableActionsOnMoreMenu } = useMemo(() => {
+    const tableActionsAfterFilter = [...tableActions]
+      .filter((x) => x)
+      .filter(({ permissionType }) => {
+        if (permissionType === "view" && !canView) {
+          return false;
+        }
+        if (permissionType === "action" && !canAction) {
+          return false;
+        }
+        return true;
+      });
+    const tableActionsOnTable = tableActionsAfterFilter.filter(({ isOnTable = false }) => isOnTable);
+    const tableActionsOnMoreMenu = tableActionsAfterFilter.filter(({ isOnTable = false }) => !isOnTable);
+    return { tableActionsOnTable, tableActionsOnMoreMenu };
+  }, [canView, canAction, tableActions]);
+
+  const theme = useTheme();
+  const downXl = useMediaQuery(theme.breakpoints.down("xl"));
+
+  return (
+    <TableRow hover key={row[selectedField]} selected={selected}>
+      {/* <TableCell padding="checkbox">
+        <Checkbox
+          checked={selected}
+          size={downXl ? "small" : "medium"}
+          onChange={(event) => onSelect(event, row[selectedField])}
+        />
+      </TableCell>
+      {sttLuyKe ? (
+        page === 0 ? (
+          <TableCell align="center">{index + 1}</TableCell>
+        ) : (
+          <TableCell align="center">{rowsPerPage * page + index + 1}</TableCell>
+        )
+      ) : (
+        <TableCell align="center">{index + 1}</TableCell>
+      )} */}
+
+      {/* Hiển thị dữ liệu từ cột thành hàng */}
+      <TableCell colSpan={columns.length} align="left">
+        {columns.map(({ field, label, type = "text", valueGetter = (row) => row[field], renderCell, valueFormat = (e) => e }) => {
+          const value = renderCell ? renderCell(row) : valueFormat(valueGetter(row));
+          return (
+            <div key={`${row[selectedField]}-${field}`}>
+              <strong>{label}: </strong>
+              {value}
+            </div>
+          );
+        })}
+        {!disableStatus && canEdit && (
+          <Switch
+            checked={row[statusKey]}
+            onChange={() => {
+              onChangeStatus(row[selectedField]);
+            }}
+            inputProps={{ "aria-label": "controlled" }}
+          />
+        )}
+        <Grid item xs={12} sm={12} md={12} lg={12}>
+          {!disableCellThaoTac && (
+            <Box display="flex" flexDirection="row" alignItems="center" justifyContent="flex-end">
+              <Box display="flex" gap={1}>
+                {!disableEdit && 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>
+                )}
+                {!disableDelete && canDelete && (
+                  <Tooltip title="Xóa">
+                    <IconButton
+                      size={downXl ? "small" : "medium"}
+                      onClick={() => {
+                        onDelete(row[selectedField]);
+                      }}
+                    >
+                      <DeleteOutlineIcon fontSize="inherit" color="error" />
+                    </IconButton>
+                  </Tooltip>
+                )}
+              </Box>
+              {/* Hiển thị các hành động khác trong MoreMenu */}
+              {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} />
+            </Box>
+          )}
+        </Grid>
+      </TableCell>
+    </TableRow>
+  );
+};
+
+// ----------------------------------------------------------------------
+
+export const RootStyle = styled(Toolbar)(({ theme }) => ({
+  display: "flex",
+  justifyContent: "space-between",
+  padding: theme.spacing(0, 1, 0, 1),
+  height: 56,
+  minHeight: 50
+}));

package/components/DataManagement/index.jsx

@@ -15,6 +15,7 @@ import ExportExcelButton from "./ExportExcelButton";
 import { FilterGod } from "./FilterGod";
 import { usePermission } from "../../hooks";
 import HuongDanButton from "./HuongDanButton";
+import DataTableSM from "./DataTableSM";
 
 DataManagement.propTypes = {
   columns: PropTypes.array,
@@ -168,7 +169,7 @@ function DataManagement({
     backParentNavigator,
     defaultRowsPerPage
   ]);
-
+  const isSmallScreen = useMediaQuery(theme.breakpoints.down("sm")); // Xác định màn hình nhỏ
   const methods = useForm({ defaultValues: getDefaultValues(filters) });
   const { reset, setValue } = methods;
   return (
@@ -204,22 +205,42 @@ function DataManagement({
                 </div>
               ))}
               <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>
-              )}
+              {canCreate &&
+                !disableAdd &&
+                (!isSmallScreen ? (
+                  <Button
+                    size={elementSize}
+                    variant="contained"
+                    startIcon={<Add fontSize="inherit" />}
+                    onClick={(e) => {
+                      if (!disableEditor) {
+                        setOpenEditorDialog(true);
+                        setSelectedEditItem(null);
+                      }
+                      onAddClick(e);
+                    }}
+                  >
+                    Thêm
+                  </Button>
+                ) : (
+                  <Tooltip title="Thêm">
+                    <IconButton
+                      variant="outlined" // Thêm variant ở đây
+                      color="primary"
+                      size={elementSize}
+                      onClick={(e) => {
+                        if (!disableEditor) {
+                          setOpenEditorDialog(true);
+                          setSelectedEditItem(null);
+                        }
+                        onAddClick(e);
+                      }}
+                      sx={{ border: "1px solid", borderColor: "primary.main" }} // Điều chỉnh kiểu dáng nếu cần
+                    >
+                      <Add fontSize="inherit" />
+                    </IconButton>
+                  </Tooltip>
+                ))}
             </Stack>
           </Stack>
 
@@ -227,13 +248,23 @@ function DataManagement({
             {tabPanel}
             <FilterGod filters={filters} elementSize={elementSize} setPage={setPage} />
             {backParentNavigator}
-            <DataTable
-              multipleActions={multipleActions}
-              page={page}
-              setPage={setPage}
-              disableEdit={disableEdit}
-              disableDelete={disableDelete}
-            />
+            {!isSmallScreen ? (
+              <DataTable
+                multipleActions={multipleActions}
+                page={page}
+                setPage={setPage}
+                disableEdit={disableEdit}
+                disableDelete={disableDelete}
+              />
+            ) : (
+              <DataTableSM
+                multipleActions={multipleActions}
+                page={page}
+                setPage={setPage}
+                disableEdit={disableEdit}
+                disableDelete={disableDelete}
+              />
+            )}
           </Card>
         </FormProvider>
 

package/package.json

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

package/utils/storage.js

@@ -0,0 +1,178 @@
+import CryptoJS from "crypto-js";
+import moment from "moment";
+
+// Khóa bí mật để mã hóa và giải mã MD5 https://zozo.vn/ws/tools/md5encode
+const secretKey = "b0dc70c6a34c0555ac9c63907617f5a5"; // Bạn nên lưu trữ key này an toàn
+
+// Hàm mã hóa dữ liệu
+const encryptData = (data) => {
+  if (!data) {
+    return null;
+  }
+
+  try {
+    return CryptoJS.AES.encrypt(JSON.stringify(data), secretKey).toString();
+  } catch (error) {
+    console.log("Error encrypting data:", error);
+    return null;
+  }
+};
+
+const decryptData = (ciphertext) => {
+  if (!ciphertext) {
+    return null;
+  }
+
+  try {
+    const bytes = CryptoJS.AES.decrypt(ciphertext, secretKey);
+    const decryptedData = bytes.toString(CryptoJS.enc.Utf8);
+
+    if (!decryptedData) {
+      throw new Error("Decrypted data is null or invalid.");
+    }
+
+    return JSON.parse(decryptedData);
+  } catch (error) {
+    console.error("Error decrypting data:", error, "Ciphertext:", ciphertext);
+    return null;
+  }
+};
+
+
+export const storeUserData = (data) => {
+  if (!data) return;
+
+  // Mã hóa và lưu token
+  const encryptedToken = encryptData(data.Token);
+  localStorage.setItem("token", encryptedToken);
+
+  // Tạo object user từ dữ liệu response
+  const userObj = {
+    userName: data?.UserName,
+    email: data?.Email,
+    FullName: data?.FullName,
+    Avatar: data?.Avatar,
+    Navigate: data?.Navigate
+  };
+
+  // Mã hóa và lưu user object vào localStorage
+  const encryptedUserObj = encryptData(userObj);
+  localStorage.setItem("user", encryptedUserObj);
+};
+export const storeSetCachedSidebarTops = (data) => {
+  if (!data) return;
+  // Mã hóa và lưu
+  const encryptedData = encryptData(data);
+  localStorage.setItem("cachedSidebarTops",encryptedData);
+};
+export const storeGetCachedSidebarTops = () => {
+  const encryptedData = localStorage.getItem("cachedSidebarTops");
+  if (!encryptedData) return null;
+// console.log("encryptedData",encryptedData);
+  // Giải mã dữ liệu khi lấy ra từ localStorage
+  return decryptData(encryptedData);
+};
+export const storeSetCurrentInfor = (data) => {
+  if (!data) return;
+  // Mã hóa và lưu
+  const encryptedData = encryptData(data);
+  localStorage.setItem("GetCurrentInfor",encryptedData);
+};
+export const storeGetUser = () => {
+  const encryptedData = localStorage.getItem("user");
+  if (!encryptedData) return null;
+
+  // Giải mã dữ liệu khi lấy ra từ localStorage
+  const decryptedData = decryptData(encryptedData);
+  // Kiểm tra nếu dữ liệu giải mã không hợp lệ
+  // if (!decryptedData || typeof decryptedData !== 'string') {
+  //   console.log("Decrypted user data is not a valid string.");
+  //   return null;
+  // }
+
+  try {
+    // Chuyển đổi thành JSON nếu dữ liệu giải mã hợp lệ
+    return decryptedData;
+  } catch (error) {
+    console.log("Error parsing decrypted user data:", error);
+    return null;
+  }
+};
+
+export const storeGetToken = () => {
+  const encryptedData = localStorage.getItem("token");
+  if (!encryptedData) return null;
+
+  try {
+    const decryptedToken = decryptData(encryptedData);
+    if (!decryptedToken || typeof decryptedToken !== 'string') {
+      throw new Error("Decrypted token is null or not a valid string.");
+    }
+    return decryptedToken;  // Không cần JSON.parse nếu đã là chuỗi hợp lệ
+  } catch (error) {
+    console.log("Error decrypting token:", error);
+    return null;
+  }
+};
+
+export const storeGetCurrentInfor = () => {
+  const encryptedData = localStorage.getItem("GetCurrentInfor");
+  if (!encryptedData) return null;
+
+  // Giải mã dữ liệu khi lấy ra từ localStorage
+  return decryptData(encryptedData);
+};
+
+export const storeGetThamSoHeThong = (TenThamSo) => {
+  const encryptedData = localStorage.getItem("GetCurrentInfor");
+  if (!encryptedData) return "";
+
+  const getCurrentInfor =decryptData(encryptedData) || {};
+  return getCurrentInfor?.ThamSoHeThong?.find((item) => item.TenThamSo === TenThamSo)?.GiaTri || "";
+};
+export const storeGetcolor= () => {
+  const encryptedData = localStorage.getItem("color");
+  if (!encryptedData) return "defaultColor";
+  return decryptData(encryptedData);
+};
+export const storeSetcolor = (data) => {
+  if (!data) return;
+  const encryptedData = encryptData(data);
+  localStorage.setItem("color",encryptedData);
+};
+export const storeGetlanguage = () => {
+  const encryptedData = localStorage.getItem("language");
+  if (!encryptedData) return "vi";
+  return decryptData(encryptedData);
+};
+export const storeSetlanguage = (data) => {
+  if (!data) return;
+  const encryptedData = encryptData(data);
+  localStorage.setItem("language",encryptedData);
+};
+export const storeGetlanguageVersion = () => {
+  const encryptedData = localStorage.getItem("languageVersion");
+  if (!encryptedData) return moment(Date.now()).format("DD/MM/YYYY HH:mm:ss");
+  return decryptData(encryptedData);
+};
+export const storeSetlanguageVersion = (data) => {
+  if (!data) return;
+  const encryptedData = encryptData(data);
+  localStorage.setItem("languageVersion",encryptedData);
+};
+export const storeGetlanguageData = () => {
+  const encryptedData = localStorage.getItem("languageData");
+  if (!encryptedData) return null;
+  return decryptData(encryptedData);
+};
+export const storeSetlanguageData = (data) => {
+  if (!data) return;
+  const encryptedData = encryptData(data);
+  localStorage.setItem("languageData",encryptedData);
+};
+export const storeGetlanguageSystemKey = (TypeKey,SystemKey,TypeLanguage) => {
+  const encryptedData = localStorage.getItem("languageData");
+  if (!encryptedData) return null;
+  const languageData =decryptData(encryptedData) || {};
+  return languageData?.find((item) => item.TypeKey === TypeKey && item.SystemKey === SystemKey && item.TypeLanguage === TypeLanguage)?.Description || "";
+};