trithuc-mvc-react 3.4.6 → 3.4.7

package/api/index.js

@@ -87,49 +87,28 @@ export default api;
 export const getDatasFromTable = async ({ tableName, page, pageSize, data }) => {
   try {
     let res;
-
+    // Trường hợp dùng tableName với MVC4
     if (!apiUrl) {
-      // MVC4
       res = await api.get(`${getBaseUrl()}/Admin/${tableName}/LoadData`, {
         params: {
-          json: JSON.stringify(data ?? {}),
+          json: JSON.stringify(data),
           page,
           pageSize
         }
       });
     } else {
-      // .NET Core
+      // Trường hợp dùng api .NET Core
       res = await api.get(`${getBaseUrl()}/${apiUrl}/${tableName}`, {
         params: {
           PageNumber: page,
           PageSize: pageSize,
-          ...(data ?? {})
+          ...data
         }
       });
     }
-
-    // 🔴 ĐIỂM FIX QUAN TRỌNG NHẤT
-    if (!res || res.data == null) {
-      // console.warn("API returned empty response:", {
-      //   tableName,
-      //   page,
-      //   pageSize
-      // });
-
-      // ✅ RETURN OBJECT MẶC ĐỊNH – KHÔNG ĐƯỢC undefined
-      return {
-        data: [],
-        PermissionModel: {},
-        CountTrangThai: null,
-        status: false
-      };
-    }
-
     return res.data;
   } catch (error) {
-    // console.error("Error fetching data:", error);
-
-    // ✅ THROW → React Query onError xử lý
+    console.error("Error fetching data:", error);
     throw error;
   }
 };
@@ -165,278 +144,188 @@ export const getDatasFromTableDropdownlist = async ({ tableName, page, pageSize,
 
 export const getDataFromTable = async ({ tableName, id }) => {
   try {
-    let res;
-
     if (!apiUrl) {
-      // MVC4
-      res = await api.get(`${getBaseUrl()}/Admin/${tableName}/GetDetail`, {
-        params: { id }
+      const url = `${getBaseUrl()}/Admin/${tableName}/GetDetail`;
+      const res = await api.get(url, {
+        params: {
+          id
+        }
       });
+      return res.data;
     } else {
-      // .NET Core
-      res = await api.get(`${getBaseUrl()}/${apiUrl}/${tableName}/${id}`);
+      const url = `${getBaseUrl()}/${apiUrl}/${tableName}/${id}`;
+      const res = await api.get(url);
+      return res.data;
     }
-
-    // 🔴 FIX CỐT LÕI: KHÔNG BAO GIỜ return undefined
-    if (!res || res.data == null) {
-      // console.warn("API returned empty detail:", { tableName, id });
-
-      return {
-        data: null,
-        status: false,
-        message: "Không tìm thấy dữ liệu"
-      };
-    }
-
-    return res.data;
   } catch (error) {
-    // console.error("Error fetching detail:", error);
-    throw error; // React Query onError xử lý
+    console.error("Error fetching data:", error);
+    throw error;
   }
 };
 
 export const deleteDataFromTable = async ({ tableName, id }) => {
-  try {
-    let res;
-
-    if (!apiUrl) {
-      // MVC4
-      res = await api.post(`${getBaseUrl()}/Admin/${tableName}/Delete`, { id });
-    } else {
-      // .NET Core
-      const ids = Array.isArray(id) ? id : [id];
-
-      res = await api.delete(`${getBaseUrl()}/${apiUrl}/${tableName}`, {
-        data: ids,
-        headers: {
-          "Content-Type": "application/json-patch+json"
-        }
-      });
-    }
-
-    // 🔴 FIX QUAN TRỌNG NHẤT
-    if (!res || res.data == null) {
-      // console.warn("Delete API returned empty response:", { tableName, id });
-
-      return {
-        status: true,
-        message: "Xóa thành công"
-      };
-    }
-
+  if (!apiUrl) {
+    // Khi không có apiUrl, thực hiện DELETE đến URL cụ thể với tableName
+    const res = await api.post(`${getBaseUrl()}/Admin/${tableName}/Delete`, {
+      id
+    });
+    return res.data;
+  } else {
+    // Khi có apiUrl, chuyển id thành mảng string và thực hiện DELETE
+    const ids = Array.isArray(id) ? id : [id]; // Chuyển id thành mảng nếu chưa phải là mảng
+    const res = await api.delete(`${getBaseUrl()}/${apiUrl}/${tableName}`, {
+      data: ids, // Truyền ids như là dữ liệu của body
+      headers: {
+        "Content-Type": "application/json-patch+json" // Đảm bảo Content-Type là đúng
+      }
+    });
     return res.data;
-  } catch (error) {
-    // console.error("Error deleting data:", error);
-    throw error; // React Query mutation onError xử lý
   }
 };
-
 export const deleteMultipleDataFromTable = async ({ tableName, ids }) => {
-  try {
-    let res;
-
-    if (!apiUrl) {
-      // MVC4
-      res = await api.post(`${getBaseUrl()}/Admin/${tableName}/DeleteMulti`, {
-        ids
-      });
-    } else {
-      // .NET Core
-      res = await api.delete(`${getBaseUrl()}/${apiUrl}/${tableName}`, {
-        data: ids,
-        headers: {
-          "Content-Type": "application/json-patch+json"
-        }
-      });
-    }
-
-    // 🔴 FIX QUAN TRỌNG NHẤT CHO REACT QUERY v5
-    if (!res || res.data == null) {
-      // console.warn("DeleteMultiple API returned empty response:", {
-      //   tableName,
-      //   ids
-      // });
-
-      return {
-        status: true,
-        message: "Xóa nhiều bản ghi thành công"
-      };
-    }
-
+  if (!apiUrl) {
+    const res = await api.post(`${getBaseUrl()}/Admin/${tableName}/DeleteMulti`, {
+      ids
+    });
+    return res.data;
+  } else {
+    const res = await api.delete(`${getBaseUrl()}/${apiUrl}/${tableName}`, {
+      data: ids, // Truyền ids như là dữ liệu của body
+      headers: {
+        "Content-Type": "application/json-patch+json" // Đảm bảo Content-Type là đúng
+      }
+    });
     return res.data;
-  } catch (error) {
-    // console.error("Error deleting multiple data:", error);
-    throw error; // để useMutation onError xử lý
   }
 };
-
 export const saveDataToTable = async ({ tableName, data }) => {
-  try {
-    let res;
-
-    if (!apiUrl) {
-      // MVC4
-      res = await api.post(`${getBaseUrl()}/Admin/${tableName}/SaveData`, {
-        json: JSON.stringify({ ...data })
-      });
+  if (!apiUrl) {
+    const res = await api.post(`${getBaseUrl()}/Admin/${tableName}/SaveData`, {
+      json: JSON.stringify({ ...data })
+    });
+    return res.data;
+  } else {
+    if (!data.Id || data.Id === "0") {
+      // Khi không có ID, thực hiện POST đến apiUrl
+      const res = await api.post(`${getBaseUrl()}/${apiUrl}/${tableName}`, data);
+      return res.data;
     } else {
-      // .NET Core
-      if (!data?.Id || data.Id === "0") {
-        // CREATE
-        res = await api.post(`${getBaseUrl()}/${apiUrl}/${tableName}`, data);
-      } else {
-        // UPDATE
-        res = await api.put(`${getBaseUrl()}/${apiUrl}/${tableName}/${data.Id}`, data);
-      }
+      // Khi có ID, thực hiện PUT đến apiUrl với ID trong URL
+      const res = await api.put(`${getBaseUrl()}/${apiUrl}/${tableName}/${data.Id}`, data);
+      return res.data;
     }
-
-    // 🔴 FIX BẮT BUỘC CHO REACT QUERY v5
-    if (!res || res.data == null) {
-      // console.warn("SaveData API returned empty response:", {
-      //   tableName,
-      //   data
-      // });
-
-      return {
-        status: true,
-        message: "Lưu dữ liệu thành công"
-      };
-    }
-
-    return res.data;
-  } catch (error) {
-    // console.error("Error saving data:", error);
-    throw error; // để useMutation onError xử lý
   }
 };
-
 export const changeStatusDataToTable = async ({ tableName, id, fieldName }) => {
-  try {
-    let res;
-
-    if (!apiUrl) {
-      // MVC4
-      res = await api.post(`${getBaseUrl()}/Admin/${tableName}/ChangeStatus`, { id });
-    } else {
-      // .NET Core
-      res = await api.post(
-        `${getBaseUrl()}/${apiUrl}/${tableName}/ChangeStatus`,
-        fieldName ? { id, fieldName } : { id }
-      );
-    }
-
-    // 🔴 FIX BẮT BUỘC CHO REACT QUERY v5
-    if (!res || res.data == null) {
-      // console.warn("ChangeStatus API returned empty response", {
-      //   tableName,
-      //   id,
-      //   fieldName
-      // });
-
-      return {
-        status: true,
-        message: "Thay đổi trạng thái thành công"
-      };
-    }
-
+  if (!apiUrl) {
+    const res = await api.post(`${getBaseUrl()}/Admin/${tableName}/ChangeStatus`, {
+      id
+    });
     return res.data;
-  } catch (error) {
-    // console.error("Error changing status:", error);
-    throw error; // để useMutation onError xử lý
+  } else {
+    try {
+      if (fieldName) {
+        const res = await api.post(
+          `${getBaseUrl()}/${apiUrl ? `${apiUrl}/` : "Admin/"}${tableName}/ChangeStatus`,
+          {
+            id,
+            fieldName
+          },
+          {
+            headers: {
+              "Content-Type": "application/json-patch+json" // Đảm bảo Content-Type là đúng
+            }
+          }
+        );
+        return res.data;
+      } else {
+        const res = await api.post(`${getBaseUrl()}/${apiUrl ? `${apiUrl}/` : "Admin/"}${tableName}/ChangeStatus`, id, {
+          headers: {
+            "Content-Type": "application/json-patch+json" // Đảm bảo Content-Type là đúng
+          }
+        });
+        return res.data;
+      }
+    } catch (error) {
+      console.error("Error changing status:", error);
+      // Xử lý lỗi tùy thuộc vào nhu cầu của bạn, có thể ném ra hoặc trả về giá trị mặc định
+      throw error; // Hoặc return { success: false, message: error.message };
+    }
   }
 };
 
 export const exportExcel = async ({ tableName, data }) => {
-  try {
-    let res;
-
-    if (!apiUrl) {
-      // MVC4
-      res = await api.get(`${getBaseUrl()}/Admin/${tableName}/ExportData`, {
+  if (!apiUrl) {
+    const res = await api.get(`${getBaseUrl()}/Admin/${tableName}/ExportData`, {
+      params: {
+        json: JSON.stringify(data)
+      }
+    });
+    return res.data;
+  } else {
+    const res = await api.get(
+      `${getBaseUrl()}/${apiUrl}/${tableName}/ExportData`,
+      {
         params: {
-          json: JSON.stringify(data)
-        },
-        responseType: "blob"
-      });
-    } else {
-      // .NET Core
-      res = await api.get(`${getBaseUrl()}/${apiUrl}/${tableName}/ExportData`, {
-        params: { ...data },
-        responseType: "blob"
-      });
-    }
-
-    // 🔴 BẮT BUỘC: luôn return value
-    if (!res || !res.data) {
-      throw new Error("Export Excel failed: empty response");
-    }
-
-    return res.data; // Blob
-  } catch (error) {
-    // console.error("Error exporting excel:", error);
-    throw error;
+          ...data
+        }
+      },
+      {
+        headers: {
+          "Content-Type": "application/json-patch+json" // Đảm bảo Content-Type là đúng
+        }
+      }
+    );
+    return res.data;
   }
 };
 
 export const uploadFile = async (formData) => {
-  try {
-    // Clone FormData để tránh append trùng
-    const fd = new FormData();
-    formData.forEach((value, key) => {
-      fd.append(key, value);
+  // 1. Lấy URL hiện tại
+  const currentUrl = window.location.href;
+
+  // 2. Append vào formData
+  formData.append("currentUrl", currentUrl);
+
+  // 3. Log tất cả key-value trong FormData để kiểm tra
+  // console.log("===== FormData Contents =====");
+  // formData.forEach((value, key) => {
+  //   console.log(key, value);
+  // });
+  if (!apiUrl) {
+    const res = await api.post(`${getBaseUrl()}/Handler/fileUploader.ashx`, formData, {
+      headers: {
+        "Content-Type": "multipart/form-data"
+      }
+    });
+    return res.data;
+  } else {
+    const res = await api.post(`${getBaseUrl()}/${apiUrl}/FileUploader`, formData, {
+      headers: {
+        "Content-Type": "multipart/form-data"
+      }
     });
-
-    // Append currentUrl 1 lần
-    fd.append("currentUrl", window.location.href);
-
-    let res;
-
-    if (!apiUrl) {
-      // MVC / ashx
-      res = await api.post(`${getBaseUrl()}/Handler/fileUploader.ashx`, fd);
-    } else {
-      // .NET Core
-      res = await api.post(`${getBaseUrl()}/${apiUrl}/FileUploader`, fd);
-    }
-
-    // 🔴 FIX BẮT BUỘC REACT QUERY v5
-    if (!res || res.data == null) {
-      // console.warn("Upload API returned empty response");
-
-      return {
-        status: true,
-        message: "Upload thành công"
-      };
-    }
-
     return res.data;
-  } catch (error) {
-    // console.error("Error uploading file:", error);
-    throw error;
   }
 };
 
-export const huongDan = async ({ data } = {}) => {
-  try {
-    // Không có apiUrl → luôn return array
-    if (!apiUrl) {
-      return [];
-    }
-
-    const res = await api.get(`${getBaseUrl()}/${apiUrl}/HuongDanSuDung/Dropdownlist`, {
-      params: { ...data }
-    });
-
-    // 🔴 BẮT BUỘC: không để undefined
-    if (!res || res.data == null) {
-      // console.warn("HuongDan API returned empty response");
-      return [];
-    }
-
-    // Đảm bảo luôn là array
-    return Array.isArray(res.data) ? res.data : [];
-  } catch (error) {
-    // console.error("Error fetching huongDan:", error);
+export const huongDan = async ({ data }) => {
+  if (!apiUrl) {
     return [];
+  } else {
+    const res = await api.get(
+      `${getBaseUrl()}/${apiUrl}/HuongDanSuDung/Dropdownlist`,
+      {
+        params: {
+          ...data
+        }
+      },
+      {
+        headers: {
+          "Content-Type": "application/json-patch+json" // Đảm bảo Content-Type là đúng
+        }
+      }
+    );
+    return res.data;
   }
 };

package/components/DataManagement/DataTable.jsx

@@ -1,26 +1,11 @@
-import {
-  Grid,
-  Table,
-  TableBody,
-  TableCell,
-  TableContainer,
-  TableRow,
-  Typography,
-  useMediaQuery,
-  useTheme
-} from "@mui/material";
+import { Grid, Table, TableBody, TableCell, TableContainer, TableRow, Typography, useMediaQuery, useTheme } from "@mui/material";
 import { useEffect, useMemo, useState } from "react";
 import TablePaginationCustom from "../table/TablePagination";
 
 import { useConfirm } from "material-ui-confirm";
-import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useMutation, useQuery, useQueryClient } from "react-query";
 import { toast } from "react-toastify";
-import {
-  changeStatusDataToTable,
-  deleteDataFromTable,
-  deleteMultipleDataFromTable,
-  getDatasFromTable
-} from "../../api";
+import { changeStatusDataToTable, deleteDataFromTable, deleteMultipleDataFromTable, getDatasFromTable } from "../../api";
 import TableRowsLoader from "../table/TableRowsLoader";
 import { TableHead } from "./TableHead";
 
@@ -81,12 +66,11 @@ const DataTable = ({ multipleActions = [], page, setPage = () => {}, disableEdit
     setOrderBy(property);
   };
 
-  // 1️⃣ Xoá defaultQueryOptions khỏi useQuery
   const { data, isLoading } = useQuery({
     queryKey: [tableName, page, rowsPerPage, dataSearch, order, orderBy],
     queryFn: () =>
       getDatasFromTable({
-        tableName,
+        tableName: tableName,
         page: page + 1,
         pageSize: rowsPerPage,
         data: {
@@ -97,76 +81,96 @@ const DataTable = ({ multipleActions = [], page, setPage = () => {}, disableEdit
           })
         }
       }),
-    keepPreviousData: true,
-    placeholderData: () => ({
-      data: [],
-      PermissionModel: {},
-      CountTrangThai: null,
-      status: false
-    }),
-    staleTime: 60_000,
-    gcTime: 30 * 60_000, // ✅ v5 (cacheTime → gcTime)
-    refetchOnWindowFocus: true,
-    refetchInterval: 30_000,
-    onSuccess: ({ PermissionModel = {}, CountTrangThai, status }) => {
+    defaultQueryOptions,
+    // keepPreviousData: true,
+    onSuccess: ({ PermissionModel, CountTrangThai, status }) => {
       if (dataSearch?.TrangThaiXuLy !== undefined) {
-        PermissionModel.TrangThaiXuLy = dataSearch.TrangThaiXuLy;
+        PermissionModel.TrangThaiXuLy = dataSearch?.TrangThaiXuLy;
       }
-
       setPermission(PermissionModel);
 
       if (CountTrangThai) {
         const keyCounter = `${tableName}_${userId}_TrangThaiXuLyCounter`;
         localStorage.setItem(keyCounter, JSON.stringify(CountTrangThai));
-        queryClient.invalidateQueries({
-          queryKey: [tableName, "CountAllTrangThaiXuly"]
-        });
+        // 👉 Invalidate query để Tab reload ngay
+        queryClient.invalidateQueries({ queryKey: [tableName, "CountAllTrangThaiXuly"] });
       }
 
       if (status) {
-        window.scrollTo({ top: 0, behavior: "smooth" });
+        // console.log("LOAD LAI PermissionModel");
+        // Cuộn lên đầu trang khi tải dữ liệu thành công
+        window.scrollTo({
+          top: 0, // Vị trí pixel muốn cuộn tới
+          behavior: "smooth" // Tùy chọn cuộn mượt
+        });
       }
     }
   });
 
-  // 2️⃣ Mutation cũng cần sửa, bỏ defaultMutationOptions nếu có
-  const changeStatusMutation = useMutation({
-    mutationFn: changeStatusDataToTable,
-    onSuccess: ({ status = false, message = "Có lỗi xảy ra !" }) => {
-      toast.success(status ? message : "Thay đổi trạng thái thành công !");
+  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] });
       queryClient.invalidateQueries({ queryKey: [tableName, "CountAllTrangThaiXuly"] });
     },
     onError: (error) => {
-      const message = error?.response?.data?.message || "Đã xảy ra lỗi không mong muốn.";
-      toast.error(message);
+      if (error.response && error.response.data) {
+        const message = error.response.data.message;
+        toast.error(message);
+      } 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 !");
+      }
 
-  const deleteMutation = useMutation({
-    mutationFn: deleteDataFromTable,
-    onSuccess: ({ status = false, message = "Có lỗi xảy ra !" }) => {
-      toast[status ? "success" : "error"](status ? message : "Có lỗi xảy ra !");
       queryClient.invalidateQueries({ queryKey: [tableName] });
       queryClient.invalidateQueries({ queryKey: [tableName, "CountAllTrangThaiXuly"] });
     },
     onError: (error) => {
-      const message = error?.response?.data?.message || "Đã xảy ra lỗi không mong muốn.";
-      toast.error(message);
+      if (error.response && error.response.data) {
+        const message = error.response.data.message;
+        toast.error(message);
+      } 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({
-    mutationFn: deleteMultipleDataFromTable,
-    onSuccess: ({ status = false, message = "Có lỗi xảy ra !" }) => {
-      toast[status ? "success" : "error"](status ? message : "Xóa thành công !");
+  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] });
       queryClient.invalidateQueries({ queryKey: [tableName, "CountAllTrangThaiXuly"] });
     },
     onError: (error) => {
-      const message = error?.response?.data?.message || "Đã xảy ra lỗi không mong muốn.";
-      toast.error(message);
+      if (error.response && error.response.data) {
+        const message = error.response.data.message;
+        toast.error(message);
+      } 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.");
+      }
     }
   });
   // Hàm gọi khi người dùng muốn xóa một bản ghi
@@ -366,12 +370,7 @@ const DataTable = ({ multipleActions = [], page, setPage = () => {}, disableEdit
           />
         </Grid>
       </Grid>
-      <DeleteConfirmationDialog
-        open={openDialog}
-        onClose={handleDialogClose}
-        onConfirm={handleDialogClose}
-        id={deleteId}
-      />
+      <DeleteConfirmationDialog open={openDialog} onClose={handleDialogClose} onConfirm={handleDialogClose} id={deleteId} />
       <DeleteMultipleConfirmationDialog
         open={openDeleteMultipleDialog}
         onClose={handleDeleteMultipleDialogClose}

package/components/DataManagement/DataTableSM.jsx

@@ -1,26 +1,11 @@
-import {
-  Grid,
-  Table,
-  TableBody,
-  TableCell,
-  TableContainer,
-  TableRow,
-  Typography,
-  useMediaQuery,
-  useTheme
-} from "@mui/material";
+import { Grid, Table, TableBody, TableCell, TableContainer, TableRow, Typography, useMediaQuery, useTheme } from "@mui/material";
 import { useEffect, useMemo, useState } from "react";
 import TablePaginationCustom from "../table/TablePagination";
 
 import { useConfirm } from "material-ui-confirm";
-import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useMutation, useQuery, useQueryClient } from "react-query";
 import { toast } from "react-toastify";
-import {
-  changeStatusDataToTable,
-  deleteDataFromTable,
-  deleteMultipleDataFromTable,
-  getDatasFromTable
-} from "../../api";
+import { changeStatusDataToTable, deleteDataFromTable, deleteMultipleDataFromTable, getDatasFromTable } from "../../api";
 import TableRowsLoader from "../table/TableRowsLoader";
 
 import { URL_APPLICATION_API } from "@/constants";
@@ -80,12 +65,11 @@ const DataTableSM = ({ multipleActions = [], page, setPage = () => {}, disableEd
     setOrderBy(property);
   };
 
-  // 1️⃣ Xoá defaultQueryOptions khỏi useQuery
   const { data, isLoading } = useQuery({
     queryKey: [tableName, page, rowsPerPage, dataSearch, order, orderBy],
     queryFn: () =>
       getDatasFromTable({
-        tableName,
+        tableName: tableName,
         page: page + 1,
         pageSize: rowsPerPage,
         data: {
@@ -96,76 +80,107 @@ const DataTableSM = ({ multipleActions = [], page, setPage = () => {}, disableEd
           })
         }
       }),
-    keepPreviousData: true,
-    placeholderData: () => ({
-      data: [],
-      PermissionModel: {},
-      CountTrangThai: null,
-      status: false
-    }),
-    staleTime: 60_000,
-    gcTime: 30 * 60_000, // ✅ v5 (cacheTime → gcTime)
-    refetchOnWindowFocus: true,
-    refetchInterval: 30_000,
-    onSuccess: ({ PermissionModel = {}, CountTrangThai, status }) => {
+    defaultQueryOptions,
+    // keepPreviousData: true,
+    onSuccess: ({ PermissionModel, CountTrangThai, status }) => {
       if (dataSearch?.TrangThaiXuLy !== undefined) {
-        PermissionModel.TrangThaiXuLy = dataSearch.TrangThaiXuLy;
+        PermissionModel.TrangThaiXuLy = dataSearch?.TrangThaiXuLy;
       }
-
       setPermission(PermissionModel);
 
       if (CountTrangThai) {
         const keyCounter = `${tableName}_${userId}_TrangThaiXuLyCounter`;
         localStorage.setItem(keyCounter, JSON.stringify(CountTrangThai));
-        queryClient.invalidateQueries({
-          queryKey: [tableName, "CountAllTrangThaiXuly"]
-        });
+        // 👉 Invalidate query để Tab reload ngay
+        queryClient.invalidateQueries({ queryKey: [tableName, "CountAllTrangThaiXuly"] });
       }
 
       if (status) {
-        window.scrollTo({ top: 0, behavior: "smooth" });
+        // console.log("LOAD LAI PermissionModel");
+        // Cuộn lên đầu trang khi tải dữ liệu thành công
+        window.scrollTo({
+          top: 0, // Vị trí pixel muốn cuộn tới
+          behavior: "smooth" // Tùy chọn cuộn mượt
+        });
       }
     }
   });
-
-  // 2️⃣ Mutation cũng cần sửa, bỏ defaultMutationOptions nếu có
-  const changeStatusMutation = useMutation({
-    mutationFn: changeStatusDataToTable,
-    onSuccess: ({ status = false, message = "Có lỗi xảy ra !" }) => {
-      toast.success(status ? message : "Thay đổi trạng thái thành công !");
+  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] });
       queryClient.invalidateQueries({ queryKey: [tableName, "CountAllTrangThaiXuly"] });
     },
     onError: (error) => {
-      const message = error?.response?.data?.message || "Đã xảy ra lỗi không mong muốn.";
-      toast.error(message);
+      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 !");
+      }
 
-  const deleteMutation = useMutation({
-    mutationFn: deleteDataFromTable,
-    onSuccess: ({ status = false, message = "Có lỗi xảy ra !" }) => {
-      toast[status ? "success" : "error"](status ? message : "Có lỗi xảy ra !");
       queryClient.invalidateQueries({ queryKey: [tableName] });
       queryClient.invalidateQueries({ queryKey: [tableName, "CountAllTrangThaiXuly"] });
     },
     onError: (error) => {
-      const message = error?.response?.data?.message || "Đã xảy ra lỗi không mong muốn.";
-      toast.error(message);
+      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({
-    mutationFn: deleteMultipleDataFromTable,
-    onSuccess: ({ status = false, message = "Có lỗi xảy ra !" }) => {
-      toast[status ? "success" : "error"](status ? message : "Xóa thành công !");
+  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] });
       queryClient.invalidateQueries({ queryKey: [tableName, "CountAllTrangThaiXuly"] });
     },
     onError: (error) => {
-      const message = error?.response?.data?.message || "Đã xảy ra lỗi không mong muốn.";
-      toast.error(message);
+      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.");
+      }
     }
   });
   // Hàm gọi khi người dùng muốn xóa một bản ghi
@@ -394,12 +409,7 @@ const DataTableSM = ({ multipleActions = [], page, setPage = () => {}, disableEd
           />
         </Grid>
       </Grid>
-      <DeleteConfirmationDialog
-        open={openDialog}
-        onClose={handleDialogClose}
-        onConfirm={handleDialogClose}
-        id={deleteId}
-      />
+      <DeleteConfirmationDialog open={openDialog} onClose={handleDialogClose} onConfirm={handleDialogClose} id={deleteId} />
       <DeleteMultipleConfirmationDialog
         open={openDeleteMultipleDialog}
         onClose={handleDeleteMultipleDialogClose}

package/components/DataManagement/EditorForm.jsx

@@ -8,7 +8,7 @@ import { useEffect } from "react";
 
 import { URL_APPLICATION, URL_APPLICATION_API } from "@/constants";
 import { yupResolver } from "@hookform/resolvers/yup";
-import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { useMutation, useQueryClient } from "react-query";
 import { toast } from "react-toastify";
 import { saveDataToTable } from "../../api";
 import FormField from "./FormField";
@@ -91,30 +91,35 @@ function EditorForm({ fields, submitRef }) {
     }
   }, [selectedEditItem]);
 
-  const saveMutation = useMutation({
-    mutationFn: saveDataToTable,
+  const saveMutation = useMutation(saveDataToTable, {
     onSuccess: ({ status = false, message = " Có lỗi xảy ra !" }, { data: { Id } }) => {
       if (status) {
-        toast.success(URL_APPLICATION_API ? message : Id === 0 ? "Thêm thành công!" : "Cập nhật thành công!");
-        queryClient.invalidateQueries({ queryKey: [tableName] });
+        if (URL_APPLICATION_API) {
+          toast.success(message);
+        } else {
+          toast.success(Id == 0 ? "Thêm thành công!" : "Cập nhật thành công!");
+        }
+        queryClient.invalidateQueries(tableName);
         setOpenEditorDialog(false);
       } else {
+        console.log(status, Id);
         toast.error(message);
       }
     },
     onError: (error) => {
-      const errors = error?.response?.data?.errors;
-      if (errors) {
+      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 onSubmit = (data) => {
     fields.reduce((data, { type, field, datas, keyValueLabel, keyValue, keyLabel }) => {
       if (type === "date") {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "trithuc-mvc-react",
-  "version": "3.4.6",
+  "version": "3.4.7",
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
@@ -17,7 +17,6 @@
     "@emotion/styled": "^11.14.0",
     "@hookform/resolvers": "^5.0.1",
     "@iconify/react": "^5.2.1",
-    "@tanstack/react-query": "^5.90.12",
     "axios": "^1.8.4",
     "date-fns": "^4.1.0",
     "lodash": "^4.17.21",
@@ -48,6 +47,7 @@
     "react": ">=16",
     "react-dom": ">=16",
     "react-hook-form": "^7.55.0",
+    "react-query": "^3.39.3",
     "react-toastify": "^11.0.5"
   }
 }