@fctc/widget-logic 3.4.0 → 3.4.1

package/dist/hooks.d.mts

@@ -95,7 +95,9 @@ interface UseMenuReturn {
     xNode?: string;
 }
 
-declare const useUser: () => any;
+declare const useUser: ({ service }: {
+    service?: string;
+}) => any;
 type useUserType = ReturnType<typeof useUser>;
 
 declare const useViewV2: ({ action, context, aid, service, xNode, }: {
@@ -283,7 +285,9 @@ type ViewResponse = {
     };
 };
 
-declare const useCompany: () => {
+declare const useCompany: ({ service }: {
+    service?: string;
+}) => {
     currentCompany: {
         data: CurrentCompany | undefined;
         error: Error;
@@ -1041,7 +1045,9 @@ declare const useListData: ({ action, context, viewData, model, service, xNode,
 };
 type useListDataType = ReturnType<typeof useListData>;
 
-declare const useProfile: () => {
+declare const useProfile: ({ service }: {
+    service?: string;
+}) => {
     context: ContextProfile | undefined;
     data: UserInfo | undefined;
     error: Error;

package/dist/hooks.d.ts

@@ -95,7 +95,9 @@ interface UseMenuReturn {
     xNode?: string;
 }
 
-declare const useUser: () => any;
+declare const useUser: ({ service }: {
+    service?: string;
+}) => any;
 type useUserType = ReturnType<typeof useUser>;
 
 declare const useViewV2: ({ action, context, aid, service, xNode, }: {
@@ -283,7 +285,9 @@ type ViewResponse = {
     };
 };
 
-declare const useCompany: () => {
+declare const useCompany: ({ service }: {
+    service?: string;
+}) => {
     currentCompany: {
         data: CurrentCompany | undefined;
         error: Error;
@@ -1041,7 +1045,9 @@ declare const useListData: ({ action, context, viewData, model, service, xNode,
 };
 type useListDataType = ReturnType<typeof useListData>;
 
-declare const useProfile: () => {
+declare const useProfile: ({ service }: {
+    service?: string;
+}) => {
     context: ContextProfile | undefined;
     data: UserInfo | undefined;
     error: Error;

package/dist/hooks.js

@@ -455,7 +455,7 @@ var useDetail = (sub) => {
 var import_react_query2 = require("@tanstack/react-query");
 var import_react5 = require("react");
 var import_react_i18next = require("react-i18next");
-var useProfile = () => {
+var useProfile = ({ service }) => {
   const { setUid, setLang, setUserInfo, env } = (0, provider_exports.useEnv)();
   const { useGetProfile: useGetProfile2 } = (0, provider_exports.useService)();
   const getProfile = useGetProfile2();
@@ -493,8 +493,8 @@ var useProfile = () => {
 };
 
 // src/hooks/core/use-user.ts
-var useUser = () => {
-  const userProfile = useProfile();
+var useUser = ({ service }) => {
+  const userProfile = useProfile({ service });
   const userDetail = useDetail(userProfile?.data?.sub);
   return { userProfile, userDetail, context: userProfile?.context };
 };
@@ -544,10 +544,12 @@ var useViewV2 = ({
 // src/hooks/core/use-company.ts
 var import_react_query3 = require("@tanstack/react-query");
 var import_react7 = require("react");
-var useCompany = () => {
+var useCompany = ({ service }) => {
   const { setAllowCompanies, setCompanies, setDefaultCompany, env } = (0, provider_exports.useEnv)();
   const { useGetCurrentCompany: useGetCurrentCompany2, useGetCompanyInfo: useGetCompanyInfo2 } = (0, provider_exports.useService)();
-  const getCurrentCompany = useGetCurrentCompany2();
+  const getCurrentCompany = useGetCurrentCompany2({
+    service
+  });
   const fetchCurrentCompany = async () => {
     return await getCurrentCompany.mutateAsync();
   };
@@ -604,8 +606,8 @@ var AppProvider = ({
   aid
 }) => {
   const { env } = (0, provider_exports.useEnv)();
-  const user = useUser();
-  const company = useCompany();
+  const user = useUser({ service: env.default_service });
+  const company = useCompany({ service: env.default_service });
   const menuContext = (0, import_react8.useMemo)(() => {
     return combineContexts([
       {

package/dist/hooks.mjs

@@ -436,7 +436,7 @@ var useDetail = (sub) => {
 import { useQuery as useQuery2 } from "@tanstack/react-query";
 import { useEffect as useEffect3, useMemo as useMemo2 } from "react";
 import { useTranslation } from "react-i18next";
-var useProfile = () => {
+var useProfile = ({ service }) => {
   const { setUid, setLang, setUserInfo, env } = (0, provider_exports.useEnv)();
   const { useGetProfile: useGetProfile2 } = (0, provider_exports.useService)();
   const getProfile = useGetProfile2();
@@ -474,8 +474,8 @@ var useProfile = () => {
 };
 
 // src/hooks/core/use-user.ts
-var useUser = () => {
-  const userProfile = useProfile();
+var useUser = ({ service }) => {
+  const userProfile = useProfile({ service });
   const userDetail = useDetail(userProfile?.data?.sub);
   return { userProfile, userDetail, context: userProfile?.context };
 };
@@ -525,10 +525,12 @@ var useViewV2 = ({
 // src/hooks/core/use-company.ts
 import { useQuery as useQuery3 } from "@tanstack/react-query";
 import { useEffect as useEffect4, useMemo as useMemo4 } from "react";
-var useCompany = () => {
+var useCompany = ({ service }) => {
   const { setAllowCompanies, setCompanies, setDefaultCompany, env } = (0, provider_exports.useEnv)();
   const { useGetCurrentCompany: useGetCurrentCompany2, useGetCompanyInfo: useGetCompanyInfo2 } = (0, provider_exports.useService)();
-  const getCurrentCompany = useGetCurrentCompany2();
+  const getCurrentCompany = useGetCurrentCompany2({
+    service
+  });
   const fetchCurrentCompany = async () => {
     return await getCurrentCompany.mutateAsync();
   };
@@ -585,8 +587,8 @@ var AppProvider = ({
   aid
 }) => {
   const { env } = (0, provider_exports.useEnv)();
-  const user = useUser();
-  const company = useCompany();
+  const user = useUser({ service: env.default_service });
+  const company = useCompany({ service: env.default_service });
   const menuContext = useMemo5(() => {
     return combineContexts([
       {

package/dist/index.js

@@ -4505,7 +4505,7 @@ var useDetail = (sub) => {
 var import_react_query2 = require("@tanstack/react-query");
 var import_react5 = require("react");
 var import_react_i18next = require("react-i18next");
-var useProfile = () => {
+var useProfile = ({ service }) => {
   const { setUid, setLang, setUserInfo, env } = (0, provider_exports.useEnv)();
   const { useGetProfile: useGetProfile2 } = (0, provider_exports.useService)();
   const getProfile = useGetProfile2();
@@ -4543,8 +4543,8 @@ var useProfile = () => {
 };
 
 // src/hooks/core/use-user.ts
-var useUser = () => {
-  const userProfile = useProfile();
+var useUser = ({ service }) => {
+  const userProfile = useProfile({ service });
   const userDetail = useDetail(userProfile?.data?.sub);
   return { userProfile, userDetail, context: userProfile?.context };
 };
@@ -4594,10 +4594,12 @@ var useViewV2 = ({
 // src/hooks/core/use-company.ts
 var import_react_query3 = require("@tanstack/react-query");
 var import_react7 = require("react");
-var useCompany = () => {
+var useCompany = ({ service }) => {
   const { setAllowCompanies, setCompanies, setDefaultCompany, env } = (0, provider_exports.useEnv)();
   const { useGetCurrentCompany: useGetCurrentCompany2, useGetCompanyInfo: useGetCompanyInfo2 } = (0, provider_exports.useService)();
-  const getCurrentCompany = useGetCurrentCompany2();
+  const getCurrentCompany = useGetCurrentCompany2({
+    service
+  });
   const fetchCurrentCompany = async () => {
     return await getCurrentCompany.mutateAsync();
   };
@@ -4654,8 +4656,8 @@ var AppProvider = ({
   aid
 }) => {
   const { env } = (0, provider_exports.useEnv)();
-  const user = useUser();
-  const company = useCompany();
+  const user = useUser({ service: env.default_service });
+  const company = useCompany({ service: env.default_service });
   const menuContext = (0, import_react8.useMemo)(() => {
     return combineContexts([
       {
@@ -6951,76 +6953,88 @@ var tableHeadController = (props) => {
 var import_react24 = require("react");
 var import_utils17 = require("@fctc/interface-logic/utils");
 var tableController = ({ data }) => {
-  const [rows, setRows] = (0, import_react24.useState)([]);
-  const [columnVisibility, setColumnVisibility] = (0, import_react24.useState)({});
-  const dataModelFields = (0, import_react24.useMemo)(() => {
-    return data?.fields?.map((field) => ({
+  const [rows, setRows] = (0, import_react24.useState)(null);
+  const [columns, setColumns] = (0, import_react24.useState)(null);
+  const dataModelFields = data?.fields?.map((field) => {
+    return {
       ...data.dataModel?.[field?.name],
       ...field,
       string: field?.string || data.dataModel?.[field?.name]?.string
-    })) ?? [];
-  }, [data?.fields, data?.dataModel]);
-  const mergeFields = (0, import_react24.useMemo)(
-    () => mergeButtons(dataModelFields),
-    [dataModelFields]
-  );
-  const transformData = (0, import_react24.useCallback)(
-    (dataList) => {
-      if (!dataList) return [];
-      return dataList.map((item) => {
-        const transformedItem = { ...item };
-        Object.keys(item).forEach((field) => {
-          if (field !== "__domain") {
-            if (item[field] && typeof item[field] === "object" && item[field].display_name) {
-              transformedItem[field] = item[field];
-            } else if (Array.isArray(item[field]) && item[field].length > 0) {
-              if (data.typeTable === "group" && item[field]?.length === 2 && typeof item[field]?.[1] === "string") {
-                transformedItem["string"] = item[field]?.[1];
-              }
-              transformedItem[field] = item[field];
+    };
+  });
+  const mergeFields = mergeButtons(dataModelFields);
+  const transformData = (dataList) => {
+    if (!dataList) return;
+    return dataList?.map((item) => {
+      const transformedItem = { ...item };
+      Object.keys(item).forEach((field) => {
+        if (field !== "__domain") {
+          if (item[field] && typeof item[field] === "object" && item[field].display_name) {
+            transformedItem[field] = item[field];
+          } else if (Array.isArray(item[field]) && item[field].length > 0) {
+            if (data.typeTable === "group" && item[field]?.length === 2 && typeof item[field]?.[1] === "string") {
+              transformedItem["string"] = item[field]?.[1];
             }
+            transformedItem[field] = item[field];
           }
-        });
-        return item.display_name ? { ...transformedItem, item: item.display_name } : transformedItem;
+        }
       });
-    },
-    [data?.typeTable]
-  );
+      return item.display_name ? { ...transformedItem, item: item.display_name } : transformedItem;
+    });
+  };
   (0, import_react24.useEffect)(() => {
-    setRows(transformData(data?.records));
-  }, [data?.records, transformData]);
-  const columns = (0, import_react24.useMemo)(() => {
+    setRows(transformData(data.records));
+  }, [data.records]);
+  const handleGetColumns = () => {
+    let cols = [];
     try {
-      return mergeFields?.filter((item) => {
-        return item?.widget !== "details_Receive_money" && !(item?.column_invisible ? import_utils17.domainHelper.matchDomains(
-          data.context,
-          item?.column_invisible
-        ) : item?.invisible ? import_utils17.domainHelper.matchDomains(data.context, item?.invisible) : false);
+      cols = mergeFields?.filter((item) => {
+        return item?.widget !== "details_Receive_money" && !(item?.column_invisible ? import_utils17.domainHelper.matchDomains(data.context, item?.column_invisible) : item?.invisible ? import_utils17.domainHelper.matchDomains(data.context, item?.invisible) : false);
       })?.map((field) => {
-        const overridden = columnVisibility[field?.name];
         return {
           name: field?.name,
-          optional: overridden ?? field?.optional,
+          optional: field?.optional,
           title: field?.type_co === "button" ? "" : field?.string,
           field: { ...field }
         };
-      }) ?? [];
+      });
     } catch (error) {
       console.error("Error in useTable:", error);
-      return [];
     }
-  }, [mergeFields, data?.context, columnVisibility]);
-  const onToggleColumnOptional = (0, import_react24.useCallback)((item) => {
-    setColumnVisibility((prev) => ({
-      ...prev,
-      [item?.name]: item?.optional === "show" ? "hide" : "show"
-    }));
-  }, []);
+    return cols;
+  };
+  (0, import_react24.useEffect)(() => {
+    if (!columns) {
+      setColumns(handleGetColumns());
+    }
+  }, [data]);
+  const onToggleColumnOptional = (item) => {
+    const tempColumn = [...columns]?.map((val) => {
+      if (item?.name === val?.name) {
+        return {
+          ...val,
+          optional: item?.optional === "show" ? "hide" : "show"
+        };
+      }
+      return val;
+    });
+    setColumns(tempColumn);
+  };
+  (0, import_react24.useEffect)(() => {
+    if (data?.fields != null) {
+      setColumns(null);
+    }
+    return () => {
+      if (data?.fields != null) {
+        setColumns(null);
+      }
+    };
+  }, [data?.fields]);
   return {
     rows,
     columns,
     onToggleColumnOptional,
-    typeTable: data?.typeTable
+    typeTable: data.typeTable
   };
 };
 

package/dist/index.mjs

@@ -4580,7 +4580,7 @@ var useDetail = (sub) => {
 import { useQuery as useQuery2 } from "@tanstack/react-query";
 import { useEffect as useEffect3, useMemo as useMemo2 } from "react";
 import { useTranslation } from "react-i18next";
-var useProfile = () => {
+var useProfile = ({ service }) => {
   const { setUid, setLang, setUserInfo, env } = (0, provider_exports.useEnv)();
   const { useGetProfile: useGetProfile2 } = (0, provider_exports.useService)();
   const getProfile = useGetProfile2();
@@ -4618,8 +4618,8 @@ var useProfile = () => {
 };
 
 // src/hooks/core/use-user.ts
-var useUser = () => {
-  const userProfile = useProfile();
+var useUser = ({ service }) => {
+  const userProfile = useProfile({ service });
   const userDetail = useDetail(userProfile?.data?.sub);
   return { userProfile, userDetail, context: userProfile?.context };
 };
@@ -4669,10 +4669,12 @@ var useViewV2 = ({
 // src/hooks/core/use-company.ts
 import { useQuery as useQuery3 } from "@tanstack/react-query";
 import { useEffect as useEffect4, useMemo as useMemo4 } from "react";
-var useCompany = () => {
+var useCompany = ({ service }) => {
   const { setAllowCompanies, setCompanies, setDefaultCompany, env } = (0, provider_exports.useEnv)();
   const { useGetCurrentCompany: useGetCurrentCompany2, useGetCompanyInfo: useGetCompanyInfo2 } = (0, provider_exports.useService)();
-  const getCurrentCompany = useGetCurrentCompany2();
+  const getCurrentCompany = useGetCurrentCompany2({
+    service
+  });
   const fetchCurrentCompany = async () => {
     return await getCurrentCompany.mutateAsync();
   };
@@ -4729,8 +4731,8 @@ var AppProvider = ({
   aid
 }) => {
   const { env } = (0, provider_exports.useEnv)();
-  const user = useUser();
-  const company = useCompany();
+  const user = useUser({ service: env.default_service });
+  const company = useCompany({ service: env.default_service });
   const menuContext = useMemo5(() => {
     return combineContexts([
       {
@@ -7029,84 +7031,96 @@ var tableHeadController = (props) => {
 };
 
 // src/widget/advance/table/table-view/controller.ts
-import { useCallback as useCallback5, useEffect as useEffect13, useMemo as useMemo11, useState as useState12 } from "react";
+import { useEffect as useEffect13, useState as useState12 } from "react";
 import { domainHelper } from "@fctc/interface-logic/utils";
 var tableController = ({ data }) => {
-  const [rows, setRows] = useState12([]);
-  const [columnVisibility, setColumnVisibility] = useState12({});
-  const dataModelFields = useMemo11(() => {
-    return data?.fields?.map((field) => ({
+  const [rows, setRows] = useState12(null);
+  const [columns, setColumns] = useState12(null);
+  const dataModelFields = data?.fields?.map((field) => {
+    return {
       ...data.dataModel?.[field?.name],
       ...field,
       string: field?.string || data.dataModel?.[field?.name]?.string
-    })) ?? [];
-  }, [data?.fields, data?.dataModel]);
-  const mergeFields = useMemo11(
-    () => mergeButtons(dataModelFields),
-    [dataModelFields]
-  );
-  const transformData = useCallback5(
-    (dataList) => {
-      if (!dataList) return [];
-      return dataList.map((item) => {
-        const transformedItem = { ...item };
-        Object.keys(item).forEach((field) => {
-          if (field !== "__domain") {
-            if (item[field] && typeof item[field] === "object" && item[field].display_name) {
-              transformedItem[field] = item[field];
-            } else if (Array.isArray(item[field]) && item[field].length > 0) {
-              if (data.typeTable === "group" && item[field]?.length === 2 && typeof item[field]?.[1] === "string") {
-                transformedItem["string"] = item[field]?.[1];
-              }
-              transformedItem[field] = item[field];
+    };
+  });
+  const mergeFields = mergeButtons(dataModelFields);
+  const transformData = (dataList) => {
+    if (!dataList) return;
+    return dataList?.map((item) => {
+      const transformedItem = { ...item };
+      Object.keys(item).forEach((field) => {
+        if (field !== "__domain") {
+          if (item[field] && typeof item[field] === "object" && item[field].display_name) {
+            transformedItem[field] = item[field];
+          } else if (Array.isArray(item[field]) && item[field].length > 0) {
+            if (data.typeTable === "group" && item[field]?.length === 2 && typeof item[field]?.[1] === "string") {
+              transformedItem["string"] = item[field]?.[1];
             }
+            transformedItem[field] = item[field];
           }
-        });
-        return item.display_name ? { ...transformedItem, item: item.display_name } : transformedItem;
+        }
       });
-    },
-    [data?.typeTable]
-  );
+      return item.display_name ? { ...transformedItem, item: item.display_name } : transformedItem;
+    });
+  };
   useEffect13(() => {
-    setRows(transformData(data?.records));
-  }, [data?.records, transformData]);
-  const columns = useMemo11(() => {
+    setRows(transformData(data.records));
+  }, [data.records]);
+  const handleGetColumns = () => {
+    let cols = [];
     try {
-      return mergeFields?.filter((item) => {
-        return item?.widget !== "details_Receive_money" && !(item?.column_invisible ? domainHelper.matchDomains(
-          data.context,
-          item?.column_invisible
-        ) : item?.invisible ? domainHelper.matchDomains(data.context, item?.invisible) : false);
+      cols = mergeFields?.filter((item) => {
+        return item?.widget !== "details_Receive_money" && !(item?.column_invisible ? domainHelper.matchDomains(data.context, item?.column_invisible) : item?.invisible ? domainHelper.matchDomains(data.context, item?.invisible) : false);
       })?.map((field) => {
-        const overridden = columnVisibility[field?.name];
         return {
           name: field?.name,
-          optional: overridden ?? field?.optional,
+          optional: field?.optional,
           title: field?.type_co === "button" ? "" : field?.string,
           field: { ...field }
         };
-      }) ?? [];
+      });
     } catch (error) {
       console.error("Error in useTable:", error);
-      return [];
     }
-  }, [mergeFields, data?.context, columnVisibility]);
-  const onToggleColumnOptional = useCallback5((item) => {
-    setColumnVisibility((prev) => ({
-      ...prev,
-      [item?.name]: item?.optional === "show" ? "hide" : "show"
-    }));
-  }, []);
+    return cols;
+  };
+  useEffect13(() => {
+    if (!columns) {
+      setColumns(handleGetColumns());
+    }
+  }, [data]);
+  const onToggleColumnOptional = (item) => {
+    const tempColumn = [...columns]?.map((val) => {
+      if (item?.name === val?.name) {
+        return {
+          ...val,
+          optional: item?.optional === "show" ? "hide" : "show"
+        };
+      }
+      return val;
+    });
+    setColumns(tempColumn);
+  };
+  useEffect13(() => {
+    if (data?.fields != null) {
+      setColumns(null);
+    }
+    return () => {
+      if (data?.fields != null) {
+        setColumns(null);
+      }
+    };
+  }, [data?.fields]);
   return {
     rows,
     columns,
     onToggleColumnOptional,
-    typeTable: data?.typeTable
+    typeTable: data.typeTable
   };
 };
 
 // src/widget/advance/table/table-group/controller.ts
-import { useEffect as useEffect14, useMemo as useMemo12, useState as useState13 } from "react";
+import { useEffect as useEffect14, useMemo as useMemo11, useState as useState13 } from "react";
 import { useAppSelector as useAppSelector2, selectList } from "@fctc/interface-logic/store";
 var tableGroupController = (props) => {
   const { env } = (0, provider_exports.useEnv)();
@@ -7131,7 +7145,7 @@ var tableGroupController = (props) => {
     fromEnd: 1
   });
   const domain = row?.__domain;
-  const processedData = useMemo12(() => {
+  const processedData = useMemo11(() => {
     const calculateColSpanEmpty = () => {
       const startIndex = columns.findIndex(
         (col) => col.field.type === "monetary" && typeof row[col.key] === "number" || col.field.aggregator === "sum"
@@ -7146,7 +7160,7 @@ var tableGroupController = (props) => {
     };
     return calculateColSpanEmpty();
   }, [columns, row]);
-  const shouldFetchData = useMemo12(() => {
+  const shouldFetchData = useMemo11(() => {
     return !!isShowGroup;
   }, [isShowGroup]);
   const enabled = shouldFetchData && !!processedData;
@@ -7248,7 +7262,7 @@ import {
   evalJSONDomain as evalJSONDomain6,
   validateAndParseDate
 } from "@fctc/interface-logic/utils";
-import { useCallback as useCallback6, useEffect as useEffect15, useState as useState14 } from "react";
+import { useCallback as useCallback5, useEffect as useEffect15, useState as useState14 } from "react";
 var searchController = ({
   viewData,
   model,
@@ -7391,7 +7405,7 @@ var searchController = ({
       return [...domain2];
     }
   };
-  const setTagSearch = useCallback6(
+  const setTagSearch = useCallback5(
     (updatedMap) => {
       if (!updatedMap) return;
       const tagsSearch = Object.entries(updatedMap).map(

package/dist/widget.d.mts

@@ -70,7 +70,7 @@ interface IMany2ManyControllerProps extends IInputFieldProps {
 }
 
 declare const many2manyFieldController: (props: IMany2ManyControllerProps) => {
-    rows: any[];
+    rows: any;
     columns: any;
     optionsObject: any;
     viewData: any;
@@ -245,7 +245,7 @@ interface ISelctionStateProps {
 }
 
 declare const tableController: ({ data }: ITableProps) => {
-    rows: any[];
+    rows: any;
     columns: any;
     onToggleColumnOptional: (item: any) => void;
     typeTable: "list" | "group" | "calendar" | undefined;
@@ -262,7 +262,7 @@ declare const tableGroupController: (props: any) => {
     isDataPlaceHolder: boolean;
     nameGroupWithCount: string;
     columnsGroup: any;
-    rowsGroup: any[];
+    rowsGroup: any;
     dataGroup: any;
     pageGroup: any;
     setPageGroup: react.Dispatch<any>;

package/dist/widget.d.ts

@@ -70,7 +70,7 @@ interface IMany2ManyControllerProps extends IInputFieldProps {
 }
 
 declare const many2manyFieldController: (props: IMany2ManyControllerProps) => {
-    rows: any[];
+    rows: any;
     columns: any;
     optionsObject: any;
     viewData: any;
@@ -245,7 +245,7 @@ interface ISelctionStateProps {
 }
 
 declare const tableController: ({ data }: ITableProps) => {
-    rows: any[];
+    rows: any;
     columns: any;
     onToggleColumnOptional: (item: any) => void;
     typeTable: "list" | "group" | "calendar" | undefined;
@@ -262,7 +262,7 @@ declare const tableGroupController: (props: any) => {
     isDataPlaceHolder: boolean;
     nameGroupWithCount: string;
     columnsGroup: any;
-    rowsGroup: any[];
+    rowsGroup: any;
     dataGroup: any;
     pageGroup: any;
     setPageGroup: react.Dispatch<any>;

package/dist/widget.js

@@ -6196,76 +6196,88 @@ var tableHeadController = (props) => {
 var import_react24 = require("react");
 var import_utils17 = require("@fctc/interface-logic/utils");
 var tableController = ({ data }) => {
-  const [rows, setRows] = (0, import_react24.useState)([]);
-  const [columnVisibility, setColumnVisibility] = (0, import_react24.useState)({});
-  const dataModelFields = (0, import_react24.useMemo)(() => {
-    return data?.fields?.map((field) => ({
+  const [rows, setRows] = (0, import_react24.useState)(null);
+  const [columns, setColumns] = (0, import_react24.useState)(null);
+  const dataModelFields = data?.fields?.map((field) => {
+    return {
       ...data.dataModel?.[field?.name],
       ...field,
       string: field?.string || data.dataModel?.[field?.name]?.string
-    })) ?? [];
-  }, [data?.fields, data?.dataModel]);
-  const mergeFields = (0, import_react24.useMemo)(
-    () => mergeButtons(dataModelFields),
-    [dataModelFields]
-  );
-  const transformData = (0, import_react24.useCallback)(
-    (dataList) => {
-      if (!dataList) return [];
-      return dataList.map((item) => {
-        const transformedItem = { ...item };
-        Object.keys(item).forEach((field) => {
-          if (field !== "__domain") {
-            if (item[field] && typeof item[field] === "object" && item[field].display_name) {
-              transformedItem[field] = item[field];
-            } else if (Array.isArray(item[field]) && item[field].length > 0) {
-              if (data.typeTable === "group" && item[field]?.length === 2 && typeof item[field]?.[1] === "string") {
-                transformedItem["string"] = item[field]?.[1];
-              }
-              transformedItem[field] = item[field];
+    };
+  });
+  const mergeFields = mergeButtons(dataModelFields);
+  const transformData = (dataList) => {
+    if (!dataList) return;
+    return dataList?.map((item) => {
+      const transformedItem = { ...item };
+      Object.keys(item).forEach((field) => {
+        if (field !== "__domain") {
+          if (item[field] && typeof item[field] === "object" && item[field].display_name) {
+            transformedItem[field] = item[field];
+          } else if (Array.isArray(item[field]) && item[field].length > 0) {
+            if (data.typeTable === "group" && item[field]?.length === 2 && typeof item[field]?.[1] === "string") {
+              transformedItem["string"] = item[field]?.[1];
             }
+            transformedItem[field] = item[field];
           }
-        });
-        return item.display_name ? { ...transformedItem, item: item.display_name } : transformedItem;
+        }
       });
-    },
-    [data?.typeTable]
-  );
+      return item.display_name ? { ...transformedItem, item: item.display_name } : transformedItem;
+    });
+  };
   (0, import_react24.useEffect)(() => {
-    setRows(transformData(data?.records));
-  }, [data?.records, transformData]);
-  const columns = (0, import_react24.useMemo)(() => {
+    setRows(transformData(data.records));
+  }, [data.records]);
+  const handleGetColumns = () => {
+    let cols = [];
     try {
-      return mergeFields?.filter((item) => {
-        return item?.widget !== "details_Receive_money" && !(item?.column_invisible ? import_utils17.domainHelper.matchDomains(
-          data.context,
-          item?.column_invisible
-        ) : item?.invisible ? import_utils17.domainHelper.matchDomains(data.context, item?.invisible) : false);
+      cols = mergeFields?.filter((item) => {
+        return item?.widget !== "details_Receive_money" && !(item?.column_invisible ? import_utils17.domainHelper.matchDomains(data.context, item?.column_invisible) : item?.invisible ? import_utils17.domainHelper.matchDomains(data.context, item?.invisible) : false);
       })?.map((field) => {
-        const overridden = columnVisibility[field?.name];
         return {
           name: field?.name,
-          optional: overridden ?? field?.optional,
+          optional: field?.optional,
           title: field?.type_co === "button" ? "" : field?.string,
           field: { ...field }
         };
-      }) ?? [];
+      });
     } catch (error) {
       console.error("Error in useTable:", error);
-      return [];
     }
-  }, [mergeFields, data?.context, columnVisibility]);
-  const onToggleColumnOptional = (0, import_react24.useCallback)((item) => {
-    setColumnVisibility((prev) => ({
-      ...prev,
-      [item?.name]: item?.optional === "show" ? "hide" : "show"
-    }));
-  }, []);
+    return cols;
+  };
+  (0, import_react24.useEffect)(() => {
+    if (!columns) {
+      setColumns(handleGetColumns());
+    }
+  }, [data]);
+  const onToggleColumnOptional = (item) => {
+    const tempColumn = [...columns]?.map((val) => {
+      if (item?.name === val?.name) {
+        return {
+          ...val,
+          optional: item?.optional === "show" ? "hide" : "show"
+        };
+      }
+      return val;
+    });
+    setColumns(tempColumn);
+  };
+  (0, import_react24.useEffect)(() => {
+    if (data?.fields != null) {
+      setColumns(null);
+    }
+    return () => {
+      if (data?.fields != null) {
+        setColumns(null);
+      }
+    };
+  }, [data?.fields]);
   return {
     rows,
     columns,
     onToggleColumnOptional,
-    typeTable: data?.typeTable
+    typeTable: data.typeTable
   };
 };
 

package/dist/widget.mjs

@@ -6251,84 +6251,96 @@ var tableHeadController = (props) => {
 };
 
 // src/widget/advance/table/table-view/controller.ts
-import { useCallback as useCallback5, useEffect as useEffect13, useMemo as useMemo11, useState as useState12 } from "react";
+import { useEffect as useEffect13, useState as useState12 } from "react";
 import { domainHelper } from "@fctc/interface-logic/utils";
 var tableController = ({ data }) => {
-  const [rows, setRows] = useState12([]);
-  const [columnVisibility, setColumnVisibility] = useState12({});
-  const dataModelFields = useMemo11(() => {
-    return data?.fields?.map((field) => ({
+  const [rows, setRows] = useState12(null);
+  const [columns, setColumns] = useState12(null);
+  const dataModelFields = data?.fields?.map((field) => {
+    return {
       ...data.dataModel?.[field?.name],
       ...field,
       string: field?.string || data.dataModel?.[field?.name]?.string
-    })) ?? [];
-  }, [data?.fields, data?.dataModel]);
-  const mergeFields = useMemo11(
-    () => mergeButtons(dataModelFields),
-    [dataModelFields]
-  );
-  const transformData = useCallback5(
-    (dataList) => {
-      if (!dataList) return [];
-      return dataList.map((item) => {
-        const transformedItem = { ...item };
-        Object.keys(item).forEach((field) => {
-          if (field !== "__domain") {
-            if (item[field] && typeof item[field] === "object" && item[field].display_name) {
-              transformedItem[field] = item[field];
-            } else if (Array.isArray(item[field]) && item[field].length > 0) {
-              if (data.typeTable === "group" && item[field]?.length === 2 && typeof item[field]?.[1] === "string") {
-                transformedItem["string"] = item[field]?.[1];
-              }
-              transformedItem[field] = item[field];
+    };
+  });
+  const mergeFields = mergeButtons(dataModelFields);
+  const transformData = (dataList) => {
+    if (!dataList) return;
+    return dataList?.map((item) => {
+      const transformedItem = { ...item };
+      Object.keys(item).forEach((field) => {
+        if (field !== "__domain") {
+          if (item[field] && typeof item[field] === "object" && item[field].display_name) {
+            transformedItem[field] = item[field];
+          } else if (Array.isArray(item[field]) && item[field].length > 0) {
+            if (data.typeTable === "group" && item[field]?.length === 2 && typeof item[field]?.[1] === "string") {
+              transformedItem["string"] = item[field]?.[1];
             }
+            transformedItem[field] = item[field];
           }
-        });
-        return item.display_name ? { ...transformedItem, item: item.display_name } : transformedItem;
+        }
       });
-    },
-    [data?.typeTable]
-  );
+      return item.display_name ? { ...transformedItem, item: item.display_name } : transformedItem;
+    });
+  };
   useEffect13(() => {
-    setRows(transformData(data?.records));
-  }, [data?.records, transformData]);
-  const columns = useMemo11(() => {
+    setRows(transformData(data.records));
+  }, [data.records]);
+  const handleGetColumns = () => {
+    let cols = [];
     try {
-      return mergeFields?.filter((item) => {
-        return item?.widget !== "details_Receive_money" && !(item?.column_invisible ? domainHelper.matchDomains(
-          data.context,
-          item?.column_invisible
-        ) : item?.invisible ? domainHelper.matchDomains(data.context, item?.invisible) : false);
+      cols = mergeFields?.filter((item) => {
+        return item?.widget !== "details_Receive_money" && !(item?.column_invisible ? domainHelper.matchDomains(data.context, item?.column_invisible) : item?.invisible ? domainHelper.matchDomains(data.context, item?.invisible) : false);
       })?.map((field) => {
-        const overridden = columnVisibility[field?.name];
         return {
           name: field?.name,
-          optional: overridden ?? field?.optional,
+          optional: field?.optional,
           title: field?.type_co === "button" ? "" : field?.string,
           field: { ...field }
         };
-      }) ?? [];
+      });
     } catch (error) {
       console.error("Error in useTable:", error);
-      return [];
     }
-  }, [mergeFields, data?.context, columnVisibility]);
-  const onToggleColumnOptional = useCallback5((item) => {
-    setColumnVisibility((prev) => ({
-      ...prev,
-      [item?.name]: item?.optional === "show" ? "hide" : "show"
-    }));
-  }, []);
+    return cols;
+  };
+  useEffect13(() => {
+    if (!columns) {
+      setColumns(handleGetColumns());
+    }
+  }, [data]);
+  const onToggleColumnOptional = (item) => {
+    const tempColumn = [...columns]?.map((val) => {
+      if (item?.name === val?.name) {
+        return {
+          ...val,
+          optional: item?.optional === "show" ? "hide" : "show"
+        };
+      }
+      return val;
+    });
+    setColumns(tempColumn);
+  };
+  useEffect13(() => {
+    if (data?.fields != null) {
+      setColumns(null);
+    }
+    return () => {
+      if (data?.fields != null) {
+        setColumns(null);
+      }
+    };
+  }, [data?.fields]);
   return {
     rows,
     columns,
     onToggleColumnOptional,
-    typeTable: data?.typeTable
+    typeTable: data.typeTable
   };
 };
 
 // src/widget/advance/table/table-group/controller.ts
-import { useEffect as useEffect14, useMemo as useMemo12, useState as useState13 } from "react";
+import { useEffect as useEffect14, useMemo as useMemo11, useState as useState13 } from "react";
 import { useAppSelector as useAppSelector2, selectList } from "@fctc/interface-logic/store";
 var tableGroupController = (props) => {
   const { env } = (0, provider_exports.useEnv)();
@@ -6353,7 +6365,7 @@ var tableGroupController = (props) => {
     fromEnd: 1
   });
   const domain = row?.__domain;
-  const processedData = useMemo12(() => {
+  const processedData = useMemo11(() => {
     const calculateColSpanEmpty = () => {
       const startIndex = columns.findIndex(
         (col) => col.field.type === "monetary" && typeof row[col.key] === "number" || col.field.aggregator === "sum"
@@ -6368,7 +6380,7 @@ var tableGroupController = (props) => {
     };
     return calculateColSpanEmpty();
   }, [columns, row]);
-  const shouldFetchData = useMemo12(() => {
+  const shouldFetchData = useMemo11(() => {
     return !!isShowGroup;
   }, [isShowGroup]);
   const enabled = shouldFetchData && !!processedData;
@@ -6470,7 +6482,7 @@ import {
   evalJSONDomain as evalJSONDomain6,
   validateAndParseDate
 } from "@fctc/interface-logic/utils";
-import { useCallback as useCallback6, useEffect as useEffect15, useState as useState14 } from "react";
+import { useCallback as useCallback5, useEffect as useEffect15, useState as useState14 } from "react";
 var searchController = ({
   viewData,
   model,
@@ -6613,7 +6625,7 @@ var searchController = ({
       return [...domain2];
     }
   };
-  const setTagSearch = useCallback6(
+  const setTagSearch = useCallback5(
     (updatedMap) => {
       if (!updatedMap) return;
       const tagsSearch = Object.entries(updatedMap).map(

package/package.json

@@ -1,94 +1,94 @@
-{
-  "name": "@fctc/widget-logic",
-  "version": "3.4.0",
-  "types": "dist/index.d.ts",
-  "main": "dist/index.cjs",
-  "module": "dist/index.mjs",
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.mjs",
-      "require": "./dist/index.cjs"
-    },
-    "./hooks": {
-      "types": "./dist/hooks.d.ts",
-      "import": "./dist/hooks.mjs",
-      "require": "./dist/hooks.cjs"
-    },
-    "./widget": {
-      "types": "./dist/widget.d.ts",
-      "import": "./dist/widget.mjs",
-      "require": "./dist/widget.cjs"
-    },
-    "./icons": {
-      "types": "./dist/icons.d.ts",
-      "import": "./dist/icons.mjs",
-      "require": "./dist/icons.cjs"
-    },
-    "./utils": {
-      "types": "./dist/utils.d.ts",
-      "import": "./dist/utils.mjs",
-      "require": "./dist/utils.cjs"
-    },
-    "./store": {
-      "types": "./dist/store.d.ts",
-      "import": "./dist/store.mjs",
-      "require": "./dist/store.cjs"
-    },
-    "./config": {
-      "types": "./dist/config.d.ts",
-      "import": "./dist/config.mjs",
-      "require": "./dist/config.cjs"
-    },
-    "./constants": {
-      "types": "./dist/constants.d.ts",
-      "import": "./dist/constants.mjs",
-      "require": "./dist/constants.cjs"
-    },
-    "./environment": {
-      "types": "./dist/environment.d.ts",
-      "import": "./dist/environment.mjs",
-      "require": "./dist/environment.cjs"
-    },
-    "./provider": {
-      "types": "./dist/provider.d.ts",
-      "import": "./dist/provider.mjs",
-      "require": "./dist/provider.cjs"
-    },
-    "./services": {
-      "types": "./dist/services.d.ts",
-      "import": "./dist/services.mjs",
-      "require": "./dist/services.cjs"
-    },
-    "./types": {
-      "types": "./dist/types.d.ts",
-      "import": "./dist/types.mjs",
-      "require": "./dist/types.cjs"
-    }
-  },
-  "files": [
-    "dist"
-  ],
-  "scripts": {
-    "build": "tsup",
-    "test": "jest"
-  },
-  "dependencies": {
-    "@fctc/interface-logic": "^3.0.3",
-    "@headlessui/react": "^2.2.6",
-    "@tanstack/react-query": "^5.84.0",
-    "i18next": "^25.3.2",
-    "i18next-browser-languagedetector": "^8.2.0",
-    "react-i18next": "^15.6.1",
-    "react-tooltip": "^5.29.1"
-  },
-  "devDependencies": {
-    "@types/react": "^18.3.1",
-    "jest": "^29.7.0",
-    "react": "18.0.0",
-    "tsup": "^8.0.0",
-    "typescript": "^5.8.2"
-  },
-  "packageManager": "yarn@1.22.0",
-  "peerDependencies": {}
-}
+{
+  "name": "@fctc/widget-logic",
+  "version": "3.4.1",
+  "types": "dist/index.d.ts",
+  "main": "dist/index.cjs",
+  "module": "dist/index.mjs",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs"
+    },
+    "./hooks": {
+      "types": "./dist/hooks.d.ts",
+      "import": "./dist/hooks.mjs",
+      "require": "./dist/hooks.cjs"
+    },
+    "./widget": {
+      "types": "./dist/widget.d.ts",
+      "import": "./dist/widget.mjs",
+      "require": "./dist/widget.cjs"
+    },
+    "./icons": {
+      "types": "./dist/icons.d.ts",
+      "import": "./dist/icons.mjs",
+      "require": "./dist/icons.cjs"
+    },
+    "./utils": {
+      "types": "./dist/utils.d.ts",
+      "import": "./dist/utils.mjs",
+      "require": "./dist/utils.cjs"
+    },
+    "./store": {
+      "types": "./dist/store.d.ts",
+      "import": "./dist/store.mjs",
+      "require": "./dist/store.cjs"
+    },
+    "./config": {
+      "types": "./dist/config.d.ts",
+      "import": "./dist/config.mjs",
+      "require": "./dist/config.cjs"
+    },
+    "./constants": {
+      "types": "./dist/constants.d.ts",
+      "import": "./dist/constants.mjs",
+      "require": "./dist/constants.cjs"
+    },
+    "./environment": {
+      "types": "./dist/environment.d.ts",
+      "import": "./dist/environment.mjs",
+      "require": "./dist/environment.cjs"
+    },
+    "./provider": {
+      "types": "./dist/provider.d.ts",
+      "import": "./dist/provider.mjs",
+      "require": "./dist/provider.cjs"
+    },
+    "./services": {
+      "types": "./dist/services.d.ts",
+      "import": "./dist/services.mjs",
+      "require": "./dist/services.cjs"
+    },
+    "./types": {
+      "types": "./dist/types.d.ts",
+      "import": "./dist/types.mjs",
+      "require": "./dist/types.cjs"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "test": "jest"
+  },
+  "dependencies": {
+    "@fctc/interface-logic": "^3.0.4",
+    "@headlessui/react": "^2.2.6",
+    "@tanstack/react-query": "^5.84.0",
+    "i18next": "^25.3.2",
+    "i18next-browser-languagedetector": "^8.2.0",
+    "react-i18next": "^15.6.1",
+    "react-tooltip": "^5.29.1"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.1",
+    "jest": "^29.7.0",
+    "react": "18.0.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.8.2"
+  },
+  "packageManager": "yarn@1.22.0",
+  "peerDependencies": {}
+}