trithuc-mvc-react 3.4.4 → 3.4.6

package/api/index.js

@@ -87,28 +87,49 @@ 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 {
-      // Trường hợp dùng api .NET Core
+      // .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);
+    // console.error("Error fetching data:", error);
+
+    // ✅ THROW → React Query onError xử lý
     throw error;
   }
 };
@@ -144,188 +165,278 @@ export const getDatasFromTableDropdownlist = async ({ tableName, page, pageSize,
 
 export const getDataFromTable = async ({ tableName, id }) => {
   try {
+    let res;
+
     if (!apiUrl) {
-      const url = `${getBaseUrl()}/Admin/${tableName}/GetDetail`;
-      const res = await api.get(url, {
-        params: {
-          id
-        }
+      // MVC4
+      res = await api.get(`${getBaseUrl()}/Admin/${tableName}/GetDetail`, {
+        params: { id }
       });
-      return res.data;
     } else {
-      const url = `${getBaseUrl()}/${apiUrl}/${tableName}/${id}`;
-      const res = await api.get(url);
-      return res.data;
+      // .NET Core
+      res = await api.get(`${getBaseUrl()}/${apiUrl}/${tableName}/${id}`);
     }
+
+    // 🔴 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 data:", error);
-    throw error;
+    // console.error("Error fetching detail:", error);
+    throw error; // React Query onError xử lý
   }
 };
 
 export const deleteDataFromTable = async ({ tableName, id }) => {
-  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
-      }
-    });
+  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"
+      };
+    }
+
     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 }) => {
-  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
-      }
-    });
+  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"
+      };
+    }
+
     return res.data;
+  } catch (error) {
+    // console.error("Error deleting multiple data:", error);
+    throw error; // để useMutation onError xử lý
   }
 };
+
 export const saveDataToTable = async ({ tableName, 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;
+  try {
+    let res;
+
+    if (!apiUrl) {
+      // MVC4
+      res = await api.post(`${getBaseUrl()}/Admin/${tableName}/SaveData`, {
+        json: JSON.stringify({ ...data })
+      });
     } else {
-      // 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;
+      // .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);
+      }
     }
+
+    // 🔴 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 }) => {
-  if (!apiUrl) {
-    const res = await api.post(`${getBaseUrl()}/Admin/${tableName}/ChangeStatus`, {
-      id
-    });
-    return res.data;
-  } 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 };
+  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"
+      };
     }
+
+    return res.data;
+  } catch (error) {
+    // console.error("Error changing status:", error);
+    throw error; // để useMutation onError xử lý
   }
 };
 
 export const exportExcel = async ({ tableName, data }) => {
-  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`,
-      {
+  try {
+    let res;
+
+    if (!apiUrl) {
+      // MVC4
+      res = await api.get(`${getBaseUrl()}/Admin/${tableName}/ExportData`, {
         params: {
-          ...data
-        }
-      },
-      {
-        headers: {
-          "Content-Type": "application/json-patch+json" // Đảm bảo Content-Type là đúng
-        }
-      }
-    );
-    return res.data;
+          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;
   }
 };
 
 export const uploadFile = async (formData) => {
-  // 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"
-      }
+  try {
+    // Clone FormData để tránh append trùng
+    const fd = new FormData();
+    formData.forEach((value, key) => {
+      fd.append(key, value);
     });
+
+    // 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 }) => {
-  if (!apiUrl) {
+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);
     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,11 +1,26 @@
-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 { 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";
 
@@ -66,11 +81,12 @@ 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: {
@@ -81,96 +97,76 @@ const DataTable = ({ multipleActions = [], page, setPage = () => {}, disableEdit
           })
         }
       }),
-    defaultQueryOptions,
-    // keepPreviousData: true,
-    onSuccess: ({ PermissionModel, CountTrangThai, status }) => {
+    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 }) => {
       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));
-        // 👉 Invalidate query để Tab reload ngay
-        queryClient.invalidateQueries({ queryKey: [tableName, "CountAllTrangThaiXuly"] });
+        queryClient.invalidateQueries({
+          queryKey: [tableName, "CountAllTrangThaiXuly"]
+        });
       }
 
       if (status) {
-        // 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
-        });
+        window.scrollTo({ top: 0, behavior: "smooth" });
       }
     }
   });
 
-  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 !");
-      }
+  // 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 !");
       queryClient.invalidateQueries({ queryKey: [tableName] });
       queryClient.invalidateQueries({ queryKey: [tableName, "CountAllTrangThaiXuly"] });
     },
     onError: (error) => {
-      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 message = error?.response?.data?.message || "Đã xảy ra lỗi không mong muốn.";
+      toast.error(message);
     }
   });
-  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) => {
-      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 message = error?.response?.data?.message || "Đã xảy ra lỗi không mong muốn.";
+      toast.error(message);
     }
   });
-  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 !");
-      }
+
+  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 !");
       setSelectedItems([]);
       queryClient.invalidateQueries({ queryKey: [tableName] });
       queryClient.invalidateQueries({ queryKey: [tableName, "CountAllTrangThaiXuly"] });
     },
     onError: (error) => {
-      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 message = error?.response?.data?.message || "Đã xảy ra lỗi không mong muốn.";
+      toast.error(message);
     }
   });
   // Hàm gọi khi người dùng muốn xóa một bản ghi
@@ -370,7 +366,12 @@ 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

@@ -80,11 +80,12 @@ 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: {
@@ -95,107 +96,76 @@ const DataTableSM = ({ multipleActions = [], page, setPage = () => {}, disableEd
           })
         }
       }),
-    defaultQueryOptions,
-    // keepPreviousData: true,
-    onSuccess: ({ PermissionModel, CountTrangThai, status }) => {
+    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 }) => {
       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));
-        // 👉 Invalidate query để Tab reload ngay
-        queryClient.invalidateQueries({ queryKey: [tableName, "CountAllTrangThaiXuly"] });
+        queryClient.invalidateQueries({
+          queryKey: [tableName, "CountAllTrangThaiXuly"]
+        });
       }
 
       if (status) {
-        // 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
-        });
+        window.scrollTo({ top: 0, behavior: "smooth" });
       }
     }
   });
-  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 !");
-      }
+
+  // 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 !");
       queryClient.invalidateQueries({ queryKey: [tableName] });
       queryClient.invalidateQueries({ queryKey: [tableName, "CountAllTrangThaiXuly"] });
     },
     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 message = error?.response?.data?.message || "Đã xảy ra lỗi không mong muốn.";
+      toast.error(message);
     }
   });
-  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) => {
-      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 message = error?.response?.data?.message || "Đã xảy ra lỗi không mong muốn.";
+      toast.error(message);
     }
   });
-  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 !");
-      }
+
+  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 !");
       setSelectedItems([]);
       queryClient.invalidateQueries({ queryKey: [tableName] });
       queryClient.invalidateQueries({ queryKey: [tableName, "CountAllTrangThaiXuly"] });
     },
     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 message = error?.response?.data?.message || "Đã xảy ra lỗi không mong muốn.";
+      toast.error(message);
     }
   });
   // Hàm gọi khi người dùng muốn xóa một bản ghi

package/components/DataManagement/EditorForm.jsx

@@ -91,35 +91,30 @@ function EditorForm({ fields, submitRef }) {
     }
   }, [selectedEditItem]);
 
-  const saveMutation = useMutation(saveDataToTable, {
+  const saveMutation = useMutation({
+    mutationFn: saveDataToTable,
     onSuccess: ({ status = false, message = " Có lỗi xảy ra !" }, { data: { Id } }) => {
       if (status) {
-        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);
+        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] });
         setOpenEditorDialog(false);
       } else {
-        console.log(status, Id);
         toast.error(message);
       }
     },
     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 errors = error?.response?.data?.errors;
+      if (errors) {
         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.4",
+  "version": "3.4.6",
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"