phx-uikit 1.0.256 → 1.0.257

package/dist/esm/components/TableV3/SelectedAction.js

@@ -1,29 +1,85 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { Fragment } from 'react';
 import { Menu, Transition } from '@headlessui/react';
-import { EllipsisHorizontalIcon } from '@heroicons/react/24/outline';
+import { XMarkIcon } from '@heroicons/react/24/outline';
 import { classNames } from '../types';
-import { PHXButton } from '../Button';
+import { PHXIcons } from '../../assets/icon';
+import Image from 'next/image';
 function SelectedAction(_a) {
-    var search = _a.search, selectedBtn = _a.selectedBtn, selectedPeople = _a.selectedPeople, slectedTitle = _a.slectedTitle, sort = _a.sort, checkbox = _a.checkbox, checked = _a.checked, toggleAll = _a.toggleAll;
-    return (React.createElement("div", { className: classNames('absolute -top-2 z-[25] min-w-full border-b bg-white px-2 py-[0.3rem]', !(search === null || search === void 0 ? void 0 : search.enable) && !(sort === null || sort === void 0 ? void 0 : sort.enable) ? 'rounded-t-lg' : 'border-t') },
-        React.createElement("div", { className: 'flex' },
-            React.createElement("label", { className: 'absolute left-4 top-1/2 -ml-2 -mt-4 p-2 hover:cursor-pointer sm:left-6' },
-                React.createElement("input", { ref: checkbox, checked: checked, className: 'block h-4 w-4 rounded border-[0.5px] border-gray-500 text-indigo-800 hover:cursor-pointer hover:bg-gray-100 focus:ring-transparent', onChange: toggleAll, type: 'checkbox' })),
-            React.createElement("div", { className: 'flex w-full items-center' },
-                React.createElement("p", { className: 'ml-14 px-3 pl-8 text-xs font-medium text-gray-900' },
-                    "\u0110\u00E3 ch\u1ECDn ", selectedPeople === null || selectedPeople === void 0 ? void 0 :
-                    selectedPeople.length,
-                    " ",
-                    slectedTitle),
-                React.createElement("div", { className: 'hidden gap-2 sm:flex' }, selectedBtn === null || selectedBtn === void 0 ? void 0 : selectedBtn.map(function (item, index) { return (React.createElement(PHXButton, { key: index, className: item.isCritical ? 'text-red-700' : '', deleted: item.type === 'danger', onClick: function () { return item.onClick(selectedPeople); }, secondary: item.type === 'secondary', size: 'micro' }, item.content)); })),
-                React.createElement(Menu, { as: 'div', className: classNames('relative inline-block text-left sm:hidden') },
-                    React.createElement("div", null,
-                        React.createElement(Menu.Button, { className: 'flex rounded-lg bg-white px-2 py-1 text-xs font-normal text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 active:bg-gray-200 active:pb-[0.2rem] active:pt-[0.3rem] active:shadow-[0rem_0.125rem_0.1rem_0rem_#0004_inset]' },
-                            React.createElement(EllipsisHorizontalIcon, { "aria-hidden": 'true', className: 'h-4 w-4' }))),
-                    React.createElement(Transition, { as: Fragment, enter: 'transition ease-out duration-100', enterFrom: 'transform opacity-0 scale-95', enterTo: 'transform opacity-100 scale-100', leave: 'transition ease-in duration-75', leaveFrom: 'transform opacity-100 scale-100', leaveTo: 'transform opacity-0 scale-95' },
-                        React.createElement(Menu.Items, { className: 'absolute right-0 z-10 mt-2 max-h-96 w-56 min-w-max origin-top-right overflow-y-auto rounded-md bg-white px-1 shadow-lg ring-1 ring-black  ring-opacity-5 drop-shadow-lg focus:outline-none' },
-                            React.createElement("div", { className: 'py-1' }, selectedBtn.map(function (item) { return (React.createElement(Menu.Item, { key: item.id }, function () { return (React.createElement("button", { className: classNames(item.type === 'select-filter' ? 'hidden' : '', 'bg-gray-200" my-[1px] block w-full min-w-max  cursor-pointer rounded-lg border-gray-300 px-2  py-2 text-left  text-xs font-medium text-gray-700 transition-all hover:bg-gray-200  sm:text-xs'), onClick: function () { return item.onClick(selectedPeople); }, type: 'button' }, item.content)); })); })))))))));
+    var selectedBtn = _a.selectedBtn, selectedPeople = _a.selectedPeople, _b = _a.slectedTitle, slectedTitle = _b === void 0 ? 'bản ghi' : _b, toggleAll = _a.toggleAll;
+    var _c = useState({
+        index: 0,
+        isOver: false,
+    }), isActionOver = _c[0], setIsActionOver = _c[1];
+    var iconAction = function (icon) {
+        switch (icon) {
+            case 'check-circle':
+                return {
+                    icon: PHXIcons.TABLE_CHECK_CIRCLE,
+                    icon_hover: PHXIcons.TABLE_CHECK_CIRCLE_HOVER,
+                    icon_mobile: PHXIcons.TABLE_CHECK_CIRCLE_MOBILE,
+                };
+            case 'close-circle':
+                return {
+                    icon: PHXIcons.TABBLE_CLOSE_CIRCLE,
+                    icon_hover: PHXIcons.TABLE_CLOSE_CIRCLE_HOVER,
+                    icon_mobile: PHXIcons.TABLE_CLOSE_CIRCLE_MOBILE,
+                };
+            case 'open-eye':
+                return {
+                    icon: PHXIcons.TABLE_OPEN_EYE_ICON,
+                    icon_hover: PHXIcons.TABLE_OPEN_EYE_HOVER,
+                    icon_mobile: PHXIcons.TABLE_OPEN_EYE_MOBILE,
+                };
+            case 'close-eye':
+                return {
+                    icon: PHXIcons.TABLE_CLOSE_EYE_ICON,
+                    icon_hover: PHXIcons.TABLE_CLOSE_EYE_HOVER,
+                    icon_mobile: PHXIcons.TABLE_CLOSE_EYE_MOBILE,
+                };
+            default:
+                return {
+                    icon: PHXIcons.TABLE_DEFAULT_LABEL,
+                    icon_hover: PHXIcons.TABLE_DEFAULT_LABEL_HOVER,
+                    icon_mobile: PHXIcons.TABLE_DEFAULT_LABEL_MOBILE,
+                };
+        }
+    };
+    return (React.createElement("div", { "aria-live": 'assertive', className: 'pointer-events-none absolute inset-0 flex items-center sm:items-start sm:px-4 sm:py-6' },
+        React.createElement("div", { className: 'fixed bottom-10 left-0 z-[50] mr-8 flex w-full flex-col items-center' },
+            React.createElement(Transition, { as: Fragment, enter: 'transform ease-out duration-300 transition', enterFrom: 'translate-y-2 opacity-0 sm:translate-y-0 sm:translate-y-10', enterTo: 'translate-y-0 opacity-300 sm:translate-y-0', leave: 'transition ease-in duration-100', leaveFrom: 'translate-y-0 opacity-100 sm:translate-y-0', leaveTo: 'translate-y-2 opacity-0 sm:translate-y-0 sm:translate-y-10', show: selectedPeople.length > 0 },
+                React.createElement("div", { className: 'pointer-events-auto flex items-center gap-x-10 rounded-xl bg-indigo-800 p-2.5 text-[12px] sm:min-w-[30rem] sm:justify-between sm:gap-x-20 sm:text-xs' },
+                    React.createElement("button", { className: 'flex items-center gap-x-2 rounded-lg border border-gray-600 p-1.5 text-white hover:bg-white hover:bg-opacity-10', onClick: toggleAll, type: 'button' },
+                        React.createElement("p", { className: 'font-normal' }, selectedPeople === null || selectedPeople === void 0 ? void 0 :
+                            selectedPeople.length,
+                            " ",
+                            slectedTitle,
+                            " \u0111\u00E3 ch\u1ECDn"),
+                        React.createElement(XMarkIcon, { className: 'mt-0.5 h-4 w-4' })),
+                    React.createElement("div", { className: 'hidden items-center gap-x-1 text-gray-300 sm:flex' }, selectedBtn.map(function (item, index) { return (React.createElement("button", { key: index + 1, className: classNames('flex gap-x-1 rounded-lg px-2.5 py-1.5 hover:bg-white hover:bg-opacity-10 hover:text-white', (item === null || item === void 0 ? void 0 : item.destructive) ? 'text-red-400 hover:!text-red-400' : ''), onClick: function () { return item.onClick(selectedPeople); }, onMouseOut: function () { return setIsActionOver({ index: index, isOver: false }); }, onMouseOver: function () { return setIsActionOver({ index: index, isOver: true }); }, type: 'button' },
+                        React.createElement(Image, { alt: '', height: 16, src: isActionOver.index === index && isActionOver.isOver
+                                ? iconAction(item === null || item === void 0 ? void 0 : item.icon).icon_hover
+                                : iconAction(item === null || item === void 0 ? void 0 : item.icon).icon, width: 16 }),
+                        React.createElement("p", null, item.content))); })),
+                    selectedBtn.length <= 1 && (React.createElement("div", { className: 'flex items-center gap-x-1 text-gray-300 sm:hidden' }, selectedBtn.map(function (item, index) { return (React.createElement("button", { key: index + 1, className: classNames('flex gap-x-1 rounded-lg px-2.5 py-1.5 hover:bg-white hover:bg-opacity-10 hover:text-white', (item === null || item === void 0 ? void 0 : item.destructive) ? 'text-red-400 hover:!text-red-400' : ''), onClick: function () { return item.onClick(selectedPeople); }, type: 'button' },
+                        React.createElement(Image, { alt: '', height: 16, src: iconAction(item === null || item === void 0 ? void 0 : item.icon).icon, width: 16 }),
+                        React.createElement("p", null, item.content))); }))),
+                    selectedBtn.length > 1 && (React.createElement("div", { className: 'flex items-center gap-x-1 sm:hidden' },
+                        React.createElement(Menu, { as: 'div', className: 'relative inline-block text-left' }, function (_a) {
+                            var open = _a.open;
+                            return (React.createElement("div", null,
+                                React.createElement(Menu.Button, null,
+                                    React.createElement("div", { className: 'flex gap-x-1 rounded-lg px-2.5 py-1.5 text-gray-300 hover:bg-white hover:bg-opacity-10 hover:text-white' },
+                                        React.createElement("p", null, "Xem th\u00EAm"),
+                                        open ? (React.createElement(Image, { alt: '', height: 16, src: PHXIcons.TABLE_ARROW_DOWN, width: 16 })) : (React.createElement(Image, { alt: '', height: 16, src: PHXIcons.TABLE_ARROW_UP, width: 16 })))),
+                                React.createElement(Transition, { as: Fragment, enter: 'transition ease-out duration-100', enterFrom: 'transform opacity-0 scale-95', enterTo: 'transform opacity-100 scale-100', leave: 'transition ease-in duration-75', leaveFrom: 'transform opacity-100 scale-100', leaveTo: 'transform opacity-0 scale-95' },
+                                    React.createElement(Menu.Items, { className: classNames('absolute bottom-11 right-0 z-[50] min-w-[5.2rem] whitespace-nowrap rounded-lg border bg-white px-3 py-1 shadow-[0rem_0.25rem_0.375rem_-0.125rem_rgba(26,26,26,.2)] focus:outline-none') },
+                                        React.createElement(React.Fragment, null,
+                                            React.createElement("div", { className: 'py-1' }, selectedBtn.map(function (item, index) { return (React.createElement(Menu.Item, { key: index },
+                                                React.createElement("button", { key: index + 1, className: classNames('flex gap-x-1 rounded-lg py-1.5 hover:bg-white hover:bg-opacity-10', (item === null || item === void 0 ? void 0 : item.destructive) ? 'text-red-400 hover:!text-red-400' : ''), onClick: function () { return item.onClick(selectedPeople); }, type: 'button' },
+                                                    React.createElement(Image, { alt: '', className: 'h-[16px] max-w-[16px]', height: 16, src: iconAction(item === null || item === void 0 ? void 0 : item.icon).icon_mobile, width: 16 }),
+                                                    React.createElement("p", null, item.content)))); })))))));
+                        }))))))));
 }
 export default SelectedAction;
 //# sourceMappingURL=SelectedAction.js.map

package/dist/esm/components/TableV3/SelectedAction.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectedAction.js","sourceRoot":"","sources":["../../../../src/components/TableV3/SelectedAction.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"SelectedAction.js","sourceRoot":"","sources":["../../../../src/components/TableV3/SelectedAction.tsx"],"names":[],"mappings":"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"}

package/dist/esm/components/TableV3/TableV3.d.ts

@@ -1,12 +1,16 @@
 import React from 'react';
 import { ComplexAction } from '../types';
 import { IEmptyStateAction } from '../EmptyStateAction';
+import { SelectedButtonIcon } from './SelectedAction';
+import { ReadonlyURLSearchParams } from 'next/navigation';
 export interface MainTableProps {
     paginationData: any;
     isUnaccentSearchValue?: boolean;
     sortData: any;
     slectedTitle?: string | any;
-    selectedBtn?: ComplexAction[];
+    selectedBtn?: Array<ComplexAction & {
+        icon?: SelectedButtonIcon;
+    }>;
     pathname?: any;
     list: {
         keyResult: string;
@@ -25,6 +29,8 @@ export interface MainTableProps {
     selectedAllPeople?: {
         enable: boolean;
         title: string;
+        maxSelectedPeople?: number;
+        hideSelectedAction?: boolean;
     } | any;
     actionName?: any;
     sort?: {
@@ -87,5 +93,10 @@ export interface MainTableProps {
     loaded?: (val: boolean) => void;
     isResetPagination?: boolean;
     tableKey?: string;
+    searchParams?: ReadonlyURLSearchParams;
+    completeState?: boolean;
+    completeStateTitle?: string;
+    completeStateDescription?: string;
+    type?: 'default' | 'in-card';
 }
-export declare function PHXTableV3({ actionName, clickRow, clickType, directDetail, editActionLink, filterLoading, fixedTableLayout, hidePagination, isQueryDataCenter, list, numericalOrder, onChange, onClick, pagination, paginationData, router, routerCondition, rowNumber, search, selectArray, selectedAllPeople, selectedBtn, setAggregate, setHeaderLoading, slectedTitle, sort, sortData, sortSelectData, thBody, thBodyComponent, thBodyFilter, thHeader, thHeaderComponent, typeLoading, isSortEmpty, emptyStateAction, isCustomHeaderSelected, isUnaccentSearchValue, disableSpacing, border, isCenterText, searchValueData, stickyColumnNumber, getDataTable, stickyColumnNumberRight, isBackgroundReload, loaded, isResetPagination, tableKey, }: Readonly<MainTableProps>): React.JSX.Element;
+export declare function PHXTableV3({ actionName, clickRow, clickType, directDetail, editActionLink, filterLoading, fixedTableLayout, hidePagination, isQueryDataCenter, list, numericalOrder, onChange, onClick, pagination, paginationData, router, routerCondition, rowNumber, search, selectArray, selectedAllPeople, selectedBtn, setAggregate, setHeaderLoading, slectedTitle, sort, sortData, sortSelectData, thBody, thBodyComponent, thBodyFilter, thHeader, thHeaderComponent, typeLoading, isSortEmpty, emptyStateAction, isCustomHeaderSelected, isUnaccentSearchValue, disableSpacing, border, isCenterText, searchValueData, stickyColumnNumber, getDataTable, stickyColumnNumberRight, isBackgroundReload, loaded, isResetPagination, tableKey, searchParams, completeState, completeStateTitle, completeStateDescription, type, }: Readonly<MainTableProps>): React.JSX.Element;

package/dist/esm/components/TableV3/TableV3.js

@@ -13,7 +13,6 @@ import PHXClientQueryV3 from '../Func/clientQueryV3';
 import PHXClientQueryDataCenterV3 from '../Func/clientQueryDataCenterV3';
 import Sort from './sort';
 import { RowTable } from './RowTable';
-import EmptySearchResult from './EmptySearchResult';
 import PaginationSelected from './PaginaitonSelected';
 import Pagination from './Pagination';
 import { PHXEmptyStateAction } from '../EmptyStateAction';
@@ -21,41 +20,45 @@ import HeaderTable from './HeaderTable';
 import SelectedAction from './SelectedAction';
 import { unaccentValue } from '../../helpers/helpers';
 import { useStickyLefts, useStickyRights } from '../TableVertical/useStickyLeft';
+import { PHXCompleteState } from '../CompleteState';
+import { PHXEmptySearch } from '../EmptySearch';
 export function PHXTableV3(_a) {
     var _this = this;
     var actionName = _a.actionName, _b = _a.clickRow, clickRow = _b === void 0 ? true : _b, _c = _a.clickType, clickType = _c === void 0 ? 'edit' : _c, directDetail = _a.directDetail, editActionLink = _a.editActionLink, _d = _a.filterLoading, filterLoading = _d === void 0 ? false : _d, _e = _a.fixedTableLayout, fixedTableLayout = _e === void 0 ? true : _e, hidePagination = _a.hidePagination, isQueryDataCenter = _a.isQueryDataCenter, list = _a.list, _f = _a.numericalOrder, numericalOrder = _f === void 0 ? {
-        enable: false,
+        enable: true,
         title: 'STT',
         disableSpacing: false,
-        sticky: false
-    } : _f, onChange = _a.onChange, onClick = _a.onClick, pagination = _a.pagination, paginationData = _a.paginationData, router = _a.router, routerCondition = _a.routerCondition, _g = _a.rowNumber, rowNumber = _g === void 0 ? 10 : _g, search = _a.search, selectArray = _a.selectArray, selectedAllPeople = _a.selectedAllPeople, selectedBtn = _a.selectedBtn, setAggregate = _a.setAggregate, setHeaderLoading = _a.setHeaderLoading, slectedTitle = _a.slectedTitle, sort = _a.sort, sortData = _a.sortData, sortSelectData = _a.sortSelectData, thBody = _a.thBody, thBodyComponent = _a.thBodyComponent, thBodyFilter = _a.thBodyFilter, thHeader = _a.thHeader, thHeaderComponent = _a.thHeaderComponent, _h = _a.typeLoading, typeLoading = _h === void 0 ? { type: 'table' } : _h, _j = _a.isSortEmpty, isSortEmpty = _j === void 0 ? true : _j, _k = _a.emptyStateAction, emptyStateAction = _k === void 0 ? {
+        sticky: false,
+    } : _f, onChange = _a.onChange, onClick = _a.onClick, pagination = _a.pagination, paginationData = _a.paginationData, router = _a.router, routerCondition = _a.routerCondition, _g = _a.rowNumber, rowNumber = _g === void 0 ? 25 : _g, search = _a.search, selectArray = _a.selectArray, selectedAllPeople = _a.selectedAllPeople, selectedBtn = _a.selectedBtn, setAggregate = _a.setAggregate, setHeaderLoading = _a.setHeaderLoading, slectedTitle = _a.slectedTitle, sort = _a.sort, sortData = _a.sortData, sortSelectData = _a.sortSelectData, thBody = _a.thBody, thBodyComponent = _a.thBodyComponent, thBodyFilter = _a.thBodyFilter, thHeader = _a.thHeader, thHeaderComponent = _a.thHeaderComponent, _h = _a.typeLoading, typeLoading = _h === void 0 ? { type: 'table' } : _h, _j = _a.isSortEmpty, isSortEmpty = _j === void 0 ? true : _j, _k = _a.emptyStateAction, emptyStateAction = _k === void 0 ? {
         enable: false,
         title: '',
         description: '',
         buttonContent: '',
         buttonType: 'primary',
-        onAction: function () { return console.log('action'); }
-    } : _k, _l = _a.isCustomHeaderSelected, isCustomHeaderSelected = _l === void 0 ? false : _l, _m = _a.isUnaccentSearchValue, isUnaccentSearchValue = _m === void 0 ? false : _m, _o = _a.disableSpacing, disableSpacing = _o === void 0 ? { disable: false, indexStart: 0 } : _o, _p = _a.border, border = _p === void 0 ? false : _p, _q = _a.isCenterText, isCenterText = _q === void 0 ? false : _q, searchValueData = _a.searchValueData, _r = _a.stickyColumnNumber, stickyColumnNumber = _r === void 0 ? 0 : _r, getDataTable = _a.getDataTable, _s = _a.stickyColumnNumberRight, stickyColumnNumberRight = _s === void 0 ? 0 : _s, _t = _a.isBackgroundReload, isBackgroundReload = _t === void 0 ? false : _t, loaded = _a.loaded, _u = _a.isResetPagination, isResetPagination = _u === void 0 ? false : _u, _v = _a.tableKey, tableKey = _v === void 0 ? 'table' : _v;
+        onAction: function () { return console.log('action'); },
+    } : _k, _l = _a.isCustomHeaderSelected, isCustomHeaderSelected = _l === void 0 ? false : _l, _m = _a.isUnaccentSearchValue, isUnaccentSearchValue = _m === void 0 ? false : _m, _o = _a.disableSpacing, disableSpacing = _o === void 0 ? { disable: false, indexStart: 0 } : _o, _p = _a.border, border = _p === void 0 ? false : _p, _q = _a.isCenterText, isCenterText = _q === void 0 ? false : _q, searchValueData = _a.searchValueData, _r = _a.stickyColumnNumber, stickyColumnNumber = _r === void 0 ? 0 : _r, getDataTable = _a.getDataTable, _s = _a.stickyColumnNumberRight, stickyColumnNumberRight = _s === void 0 ? 0 : _s, _t = _a.isBackgroundReload, isBackgroundReload = _t === void 0 ? false : _t, loaded = _a.loaded, _u = _a.isResetPagination, isResetPagination = _u === void 0 ? false : _u, _v = _a.tableKey, tableKey = _v === void 0 ? 'table' : _v, searchParams = _a.searchParams, completeState = _a.completeState, completeStateTitle = _a.completeStateTitle, completeStateDescription = _a.completeStateDescription, _w = _a.type, type = _w === void 0 ? 'default' : _w;
     var checkbox = useRef();
-    var _w = useState(false), checked = _w[0], setChecked = _w[1];
-    var _x = useState(false), indeterminate = _x[0], setIndeterminate = _x[1];
-    var _y = useState(true), isMainLoading = _y[0], setIsMainLoading = _y[1];
-    var _z = useState([]), dataTable = _z[0], setDataTable = _z[1];
-    var _0 = useState(''), searchValue = _0[0], setSearchValue = _0[1];
-    var _1 = useState([]), selectedPeople = _1[0], setSelectedPeople = _1[1];
-    var _2 = useState(false), isSearchLoading = _2[0], setIsSearchLoading = _2[1];
-    var _3 = useState([]), searchDataResult = _3[0], setSearchDataResult = _3[1];
-    var _4 = useState(0), pagi = _4[0], setPagi = _4[1];
-    var _5 = useState(0), count = _5[0], setCount = _5[1];
+    var _x = useState(false), checked = _x[0], setChecked = _x[1];
+    var _y = useState(false), indeterminate = _y[0], setIndeterminate = _y[1];
+    var _z = useState(true), isMainLoading = _z[0], setIsMainLoading = _z[1];
+    var _0 = useState([]), dataTable = _0[0], setDataTable = _0[1];
+    var _1 = useState(''), searchValue = _1[0], setSearchValue = _1[1];
+    var _2 = useState([]), selectedPeople = _2[0], setSelectedPeople = _2[1];
+    var _3 = useState(false), isSearchLoading = _3[0], setIsSearchLoading = _3[1];
+    var _4 = useState([]), searchDataResult = _4[0], setSearchDataResult = _4[1];
+    var _5 = useState(0), pagi = _5[0], setPagi = _5[1];
+    var _6 = useState(0), count = _6[0], setCount = _6[1];
     var timKiemPlacholder = 'Tìm kiếm';
-    var _6 = useState(false), isSearch = _6[0], setIsSearch = _6[1];
-    var _7 = useState(sort === null || sort === void 0 ? void 0 : sort.defaultActive), activeMenu = _7[0], setActiveMenu = _7[1];
-    var _8 = useState(false), isSelectSort = _8[0], setIsSelectSort = _8[1];
-    var _9 = useState(false), isSort = _9[0], setIsSort = _9[1];
-    var _10 = useState(false), isSortLoading = _10[0], setIsSortLoading = _10[1];
-    var _11 = useState(0), numberOfFetchData = _11[0], setNumberOfFetchData = _11[1];
-    var _12 = useState(typeof window !== 'undefined' ? window.location.search : ''), locationSearch = _12[0], setLocationSearch = _12[1];
-    var params = typeof window !== 'undefined' ? new URLSearchParams(window.location.search) : new URLSearchParams();
+    var _7 = useState(false), isSearch = _7[0], setIsSearch = _7[1];
+    var _8 = useState(sort === null || sort === void 0 ? void 0 : sort.defaultActive), activeMenu = _8[0], setActiveMenu = _8[1];
+    var _9 = useState(false), isSelectSort = _9[0], setIsSelectSort = _9[1];
+    var _10 = useState(false), isSort = _10[0], setIsSort = _10[1];
+    var _11 = useState(false), isSortLoading = _11[0], setIsSortLoading = _11[1];
+    var _12 = useState(0), numberOfFetchData = _12[0], setNumberOfFetchData = _12[1];
+    // const [locationSearch, setLocationSearch] = useState(typeof window !== 'undefined' ? window.location.search : '')
+    var numericalOrderDefault = __assign(__assign({}, numericalOrder), { sticky: !!stickyColumnNumber });
+    // @ts-ignore
+    var params = new URLSearchParams(searchParams) || new URLSearchParams(window.location.search);
     var entries = Object.fromEntries(params.entries());
     var _13 = useState((entries === null || entries === void 0 ? void 0 : entries["row-".concat(tableKey)]) ? Number(entries === null || entries === void 0 ? void 0 : entries["row-".concat(tableKey)]) : rowNumber), rowQuantity = _13[0], setRowQuantity = _13[1];
     var _14 = useState(false), isChangeRowQty = _14[0], setIsChangeRowQty = _14[1];
@@ -67,18 +70,18 @@ export function PHXTableV3(_a) {
             }
         }
     }, [entries === null || entries === void 0 ? void 0 : entries["row-".concat(tableKey)], rowNumber]);
-    useEffect(function () {
-        if (typeof window !== 'undefined') {
-            if (isResetPagination && window.location.search !== locationSearch) {
-                params.set("pagi-".concat(tableKey), '1');
-                router === null || router === void 0 ? void 0 : router.push("?".concat(params + ''));
-            }
-            setLocationSearch(window.location.search);
-        }
-    }, [window.location.search, isResetPagination]);
-    var _15 = useStickyLefts((numericalOrder === null || numericalOrder === void 0 ? void 0 : numericalOrder.sticky) && selectedAllPeople && selectedAllPeople.enable
+    // useEffect(() => {
+    //   if (typeof window !== 'undefined') {
+    //     if (isResetPagination && window.location.search !== locationSearch) {
+    //       params.set(`pagi-${tableKey}`, '1')
+    //       router?.push(`?${params + ''}`)
+    //     }
+    //     setLocationSearch(window.location.search)
+    //   }
+    // }, [window.location.search, isResetPagination])
+    var _15 = useStickyLefts((numericalOrderDefault === null || numericalOrderDefault === void 0 ? void 0 : numericalOrderDefault.sticky) && selectedAllPeople && selectedAllPeople.enable
         ? stickyColumnNumber + 2
-        : (numericalOrder === null || numericalOrder === void 0 ? void 0 : numericalOrder.sticky) || (selectedAllPeople && selectedAllPeople.enable)
+        : (numericalOrderDefault === null || numericalOrderDefault === void 0 ? void 0 : numericalOrderDefault.sticky) || (selectedAllPeople && selectedAllPeople.enable)
             ? stickyColumnNumber + 1
             : stickyColumnNumber, dataTable), lefts = _15.lefts, refs = _15.refs;
     var _16 = useStickyRights(stickyColumnNumberRight, dataTable), refRights = _16.refs, rights = _16.rights;
@@ -111,14 +114,14 @@ export function PHXTableV3(_a) {
                             query: searchDataQuery,
                             variables: (search === null || search === void 0 ? void 0 : search.persistedId)
                                 ? __assign(__assign({}, search === null || search === void 0 ? void 0 : search.variables), { limit: rowQuantity, offset: pagination * rowQuantity }) : {},
-                            persistedId: search === null || search === void 0 ? void 0 : search.persistedId
+                            persistedId: search === null || search === void 0 ? void 0 : search.persistedId,
                         })];
                 case 1: return [2 /*return*/, _a.sent()];
                 case 2: return [4 /*yield*/, PHXClientQueryV3({
                         query: searchDataQuery,
                         variables: (search === null || search === void 0 ? void 0 : search.persistedId)
                             ? __assign(__assign({}, search === null || search === void 0 ? void 0 : search.variables), { limit: rowQuantity, offset: pagination * rowQuantity }) : {},
-                        persistedId: search === null || search === void 0 ? void 0 : search.persistedId
+                        persistedId: search === null || search === void 0 ? void 0 : search.persistedId,
                     })];
                 case 3: return [2 /*return*/, _a.sent()];
                 case 4: return [3 /*break*/, 6];
@@ -179,7 +182,8 @@ export function PHXTableV3(_a) {
         }
     }
     function brSetSelectedPeople(value) {
-        setSelectedPeople(value);
+        var maxSelectedPeople = (selectedAllPeople === null || selectedAllPeople === void 0 ? void 0 : selectedAllPeople.maxSelectedPeople) || 0; // loại bỏ item cũ, chỉ giữ lại số item mới nhất, nếu mặc định là 0 thì giữ nguyên mảng gốc
+        setSelectedPeople(value.slice(-maxSelectedPeople));
     }
     function renderInclude(person) {
         // @ts-ignore
@@ -290,7 +294,7 @@ export function PHXTableV3(_a) {
                             query: query,
                             variables: (list === null || list === void 0 ? void 0 : list.persistedId)
                                 ? __assign(__assign({}, list === null || list === void 0 ? void 0 : list.variables), { limit: rowQuantity, offset: !isChangePageLoading ? (currentPagination - 1) * rowQuantity : pagination * rowQuantity }) : {},
-                            persistedId: list === null || list === void 0 ? void 0 : list.persistedId
+                            persistedId: list === null || list === void 0 ? void 0 : list.persistedId,
                         })];
                 case 2:
                     _b = _c.sent();
@@ -299,7 +303,7 @@ export function PHXTableV3(_a) {
                         query: query,
                         variables: (list === null || list === void 0 ? void 0 : list.persistedId)
                             ? __assign(__assign({}, list === null || list === void 0 ? void 0 : list.variables), { limit: rowQuantity, offset: !isChangePageLoading ? (currentPagination - 1) * rowQuantity : pagination * rowQuantity }) : {},
-                        persistedId: list === null || list === void 0 ? void 0 : list.persistedId
+                        persistedId: list === null || list === void 0 ? void 0 : list.persistedId,
                     })];
                 case 4:
                     _b = _c.sent();
@@ -380,63 +384,53 @@ export function PHXTableV3(_a) {
             onClick(item);
         }
     };
-    return (React.createElement(React.Fragment, null, isMainLoading ? (React.createElement(PHXSkeleton, { filterQty: typeLoading === null || typeLoading === void 0 ? void 0 : typeLoading.filterQty, reportQty: typeLoading === null || typeLoading === void 0 ? void 0 : typeLoading.reportQty, type: typeLoading.type })) : (React.createElement(React.Fragment, null,
-        React.createElement("div", { className: 'rounded-lg border border-gray-300 border-opacity-70 bg-white shadow-sm' },
-            React.createElement("div", { className: 'flex flex-col' },
-                (dataTable.length > 0 ||
-                    (dataTable.length === 0 && isSearch) ||
-                    (dataTable.length === 0 && isSelectSort) ||
-                    (dataTable.length === 0 && isSort) ||
-                    (dataTable.length === 0 && (sort === null || sort === void 0 ? void 0 : sort.enable))) && (React.createElement("div", { className: classNames(isSortEmpty && dataTable.length === 0 ? 'hidden' : 'min-w-full align-middle') },
-                    React.createElement(Transition, { as: Fragment, enter: 'transition-all duration-500 overflow-hidden', enterFrom: 'transform scale-95 opacity-0 h-0', enterTo: 'transform scale-100 opacity-100 h-full', leaveFrom: 'transform scale-100 opacity-100 h-full', leaveTo: 'transform scale-95 opacity-0 h-0', show: isSearch },
-                        React.createElement("div", { className: classNames('flex flex-row items-center justify-center rounded-tl-lg rounded-tr-lg bg-white px-3 py-1 pl-5 ring-opacity-5', !sort || !sort.enable ? 'mb-2' : '', searchDataResult.length === 0 && 'border-b') },
-                            React.createElement("div", { className: 'relative mr-2 w-11/12' },
-                                React.createElement("input", { autoFocus: true, className: 'block w-full rounded-lg border-transparent bg-transparent text-xs hover:bg-gray-100 focus:border-indigo-800 focus:bg-gray-100 focus:ring-indigo-800', id: 'search-value', name: 'search-value', onInput: searchChange, placeholder: timKiemPlacholder, type: 'text', value: searchValue })),
-                            React.createElement("div", { className: 'flex w-14 justify-center pt-1' }, isSearchLoading ? React.createElement(PHXSpinner, null) : null),
-                            React.createElement("div", null,
-                                React.createElement("button", { className: 'inline-flex items-center rounded-lg border-gray-300 px-2 py-1 text-xs font-medium text-gray-700 hover:bg-gray-200', onClick: function () {
-                                        setIsSearch(false);
-                                        searchSetValue('');
-                                        // if (searchValue) {
-                                        //   setSelectedPeople([]);
-                                        // }
-                                    }, type: 'button' }, "Cancel")))),
-                    React.createElement("div", { className: classNames((sort && sort.enable) || (search && search.enable)
-                            ? "flex flex-row items-center rounded-tl-lg rounded-tr-lg bg-white px-3 pl-8 ".concat(sort && sort.enable
-                                ? "sm:justify-between ".concat(dataTable.length === 0 || searchDataResult.length === 0 ? 'border-b' : '')
-                                : 'sm:justify-end', " ").concat(isSearch ? 'border-none py-1' : 'mb-2 py-1.5')
-                            : '', isSearch && (!sort || !sort.enable) ? 'hidden' : '') },
-                        sort && sort.enable ? (React.createElement(React.Fragment, null,
-                            React.createElement(Sort, { activeMenu: activeMenu, className: 'w-11/12', isSearch: isSearch, onChange: sortOnChange, onChangeSelect: sortSelectOnchange, selectArray: selectArray, sortList: sort.sortList }),
-                            React.createElement("div", { className: 'flex justify-center lg:w-14' }, isSortLoading ? React.createElement(PHXSpinner, null) : null))) : null,
-                        !isSearch && (React.createElement("div", { className: 'mr-3 flex justify-center' }, isChangePageLoading ? React.createElement(PHXSpinner, null) : null)),
-                        search && search.enable && (React.createElement("div", null, !isSearch && (React.createElement("button", { className: 'ml-1 flex rounded-lg bg-white px-2 py-1 text-xs font-normal text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 active:bg-gray-200 active:pb-[0.2rem] active:pt-[0.3rem] active:shadow-[0rem_0.125rem_0.1rem_0rem_#0004_inset] sm:ml-0', onClick: function () { return setIsSearch(true); }, type: 'button' },
-                            React.createElement(MagnifyingGlassIcon, { className: 'h-4 w-4' })))))))),
-                dataTable.length > 0 ? (React.createElement("div", { className: 'relative' },
-                    selectedPeople.length > 0 && (React.createElement(SelectedAction, { search: search, selectedBtn: selectedBtn, selectedPeople: selectedPeople, slectedTitle: slectedTitle, sort: sort, checkbox: checkbox, checked: checked, toggleAll: toggleAll })),
-                    searchDataResult.length > 0 && !isMainLoading ? (React.createElement("div", { className: '-my-2 overflow-x-auto' },
+    return (React.createElement(React.Fragment, null,
+        isMainLoading ? (React.createElement(PHXSkeleton, { filterQty: typeLoading === null || typeLoading === void 0 ? void 0 : typeLoading.filterQty, reportQty: typeLoading === null || typeLoading === void 0 ? void 0 : typeLoading.reportQty, type: typeLoading.type })) : (React.createElement(React.Fragment, null,
+            React.createElement("div", { className: 'rounded-lg bg-white shadow-[0rem_.3125rem_.3125rem_-.15625rem_rgba(0,0,0,.03),0rem_.1875rem_.1875rem_-.09375rem_rgba(0,0,0,.02),0rem_.125rem_.125rem_-.0625rem_rgba(0,0,0,.02),0rem_.0625rem_.0625rem_-.03125rem_rgba(0,0,0,.03),0rem_.03125rem_.03125rem_0rem_rgba(0,0,0,.04),0rem_0rem_0rem_.0625rem_rgba(0,0,0,.06)] ring-1 ring-gray-200' },
+                React.createElement("div", { className: 'flex flex-col' },
+                    (dataTable.length > 0 ||
+                        (dataTable.length === 0 && isSearch) ||
+                        (dataTable.length === 0 && isSelectSort) ||
+                        (dataTable.length === 0 && isSort) ||
+                        (dataTable.length === 0 && (sort === null || sort === void 0 ? void 0 : sort.enable))) && (React.createElement("div", { className: classNames(isSortEmpty && dataTable.length === 0 ? 'hidden' : 'min-w-full align-middle', (sort && sort.enable) || (search && search.enable) ? 'h-11' : '') },
+                        React.createElement(Transition, { as: Fragment, enter: 'transition-[max-height,opacity] duration-300 ease-out overflow-hidden', enterFrom: 'max-h-0 opacity-0', enterTo: 'max-h-20 opacity-100', show: isSearch },
+                            React.createElement("div", { className: classNames('flex flex-row items-center justify-center rounded-tl-lg rounded-tr-lg px-3 py-1 pl-5 ring-opacity-5', !sort || !sort.enable ? '' : '', searchDataResult.length === 0 && 'border-b', type === 'in-card' && 'bg-gray-50') },
+                                React.createElement("div", { className: 'relative mr-2 w-11/12' },
+                                    React.createElement("input", { autoFocus: true, className: 'block w-full rounded-lg border-transparent bg-white py-1 text-xs hover:border hover:border-gray-500 focus:border-indigo-800 focus:bg-white focus:ring-indigo-800', id: 'search-value', name: 'search-value', onInput: searchChange, placeholder: timKiemPlacholder, type: 'text', value: searchValue })),
+                                React.createElement("div", { className: 'flex w-14 justify-center pt-1' }, isSearchLoading ? React.createElement(PHXSpinner, null) : null),
+                                React.createElement("div", null,
+                                    React.createElement("button", { className: 'inline-flex items-center rounded-lg border-gray-300 px-2 py-1 text-xs font-medium text-gray-700 hover:bg-gray-200', onClick: function () {
+                                            setIsSearch(false);
+                                            searchSetValue('');
+                                        }, type: 'button' }, "Cancel")))),
+                        React.createElement("div", { className: classNames((sort && sort.enable) || (search && search.enable)
+                                ? "flex flex-row items-center rounded-tl-lg rounded-tr-lg px-3 pl-8 ".concat(sort && sort.enable
+                                    ? "sm:justify-between ".concat(dataTable.length === 0 || searchDataResult.length === 0 ? 'border-b' : '')
+                                    : 'sm:justify-end', " ").concat(isSearch ? 'border-none py-1' : 'mb-2 py-1.5')
+                                : '', isSearch && (!sort || !sort.enable) ? 'pointer-events-none opacity-0' : 'opacity-100', type === 'in-card' && 'bg-gray-50') },
+                            sort && sort.enable ? (React.createElement(React.Fragment, null,
+                                React.createElement(Sort, { activeMenu: activeMenu, className: 'w-11/12', isSearch: isSearch, onChange: sortOnChange, onChangeSelect: sortSelectOnchange, selectArray: selectArray, sortList: sort.sortList }),
+                                React.createElement("div", { className: 'flex justify-center lg:w-14' }, isSortLoading ? React.createElement(PHXSpinner, null) : null))) : null,
+                            !isSearch && (React.createElement("div", { className: 'mr-3 flex justify-center' }, isChangePageLoading ? React.createElement(PHXSpinner, null) : null)),
+                            search && search.enable && (React.createElement("div", { className: 'rounded-lg bg-white' }, !isSearch && (React.createElement("button", { className: 'ml-1 flex rounded-lg px-2 py-1 text-xs font-normal text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 active:bg-gray-200 active:pb-[0.2rem] active:pt-[0.3rem] active:shadow-[0rem_0.125rem_0.1rem_0rem_#0004_inset] sm:ml-0', onClick: function () { return setIsSearch(true); }, type: 'button' },
+                                React.createElement(MagnifyingGlassIcon, { className: 'h-4 w-4' })))))))),
+                    dataTable.length > 0 ? (React.createElement("div", { className: 'relative' }, searchDataResult.length > 0 && !isMainLoading ? (React.createElement("div", { className: '-my-2 overflow-x-auto' },
                         React.createElement("div", { className: classNames('min-w-full pb-2 align-middle ring-black ring-opacity-5', (search && search.enable) || (sort && sort.enable) ? '' : 'pt-0.5') },
                             React.createElement("div", { className: classNames('relative overflow-auto', (search && search.enable) || (sort && sort.enable)
                                     ? 'ring-1 ring-black ring-opacity-5'
                                     : 'mt-1.5') },
                                 React.createElement(React.Fragment, null, selectedAllPeople && selectedAllPeople.enable ? (React.createElement(React.Fragment, null, selectedPeople.length > 0 && selectedAllPeople.title && (React.createElement("div", { className: 'absolute left-12 top-4 flex h-fit items-center space-x-3 bg-gray-50 sm:left-16' },
                                     React.createElement(PHXButton, { onClick: actionClickAll, secondary: true, size: 'micro' }, selectedAllPeople.title))))) : null),
-                                React.createElement("table", { className: classNames(fixedTableLayout ? 'table-fixed' : '', (search && search.enable) || (sort && sort.enable) ? 'border-t' : '', 
-                                    // @ts-ignore
-                                    thHeader.length < 5
-                                        ? "min-w-full ".concat((selectedPeople === null || selectedPeople === void 0 ? void 0 : selectedPeople.length) === 0 || selectedAllPeople.title
-                                            ? 'divide-y divide-gray-300'
-                                            : '')
-                                        : "min-w-full ".concat((selectedPeople === null || selectedPeople === void 0 ? void 0 : selectedPeople.length) === 0 || selectedAllPeople.title
-                                            ? 'divide-y divide-gray-300'
-                                            : '')) },
+                                React.createElement("table", { className: classNames('min-w-full divide-y divide-gray-300', fixedTableLayout ? 'table-fixed' : '', (search && search.enable) || (sort && sort.enable) ? 'border-t' : '') },
                                     thHeaderComponent ? (React.createElement(React.Fragment, null, selectedAllPeople && selectedAllPeople.enable && isCustomHeaderSelected ? (React.createElement(React.Fragment, null, thHeaderComponent(React.createElement("th", { className: 'relative w-12 rounded-lg px-6 py-2.5 sm:w-16 sm:px-8', scope: 'col' },
                                         React.createElement("input", { ref: checkbox, checked: checked, className: 'absolute left-4 top-1/2 -mt-2 block h-4 w-4 rounded border-[0.5px] border-gray-500 text-indigo-800 hover:cursor-pointer hover:bg-gray-100 focus:ring-transparent sm:left-6', onChange: toggleAll, type: 'checkbox' }))))) : (React.createElement(React.Fragment, null, thHeaderComponent)))) : (React.createElement("thead", null,
-                                        React.createElement(HeaderTable, { border: border, checkbox: checkbox, checked: checked, disableSpacing: disableSpacing, isCenterText: isCenterText, numericalOrder: numericalOrder, selectedAllPeople: selectedAllPeople, thHeader: thHeader, toggleAll: toggleAll, lefts: lefts, refs: refs, stickyColumnNumber: stickyColumnNumber, selectedPeople: selectedPeople, stickyColumnNumberRight: stickyColumnNumberRight, rights: rights, refRights: refRights, search: search }))),
+                                        React.createElement(HeaderTable, { border: border, checkbox: checkbox, checked: checked, disableSpacing: disableSpacing, isCenterText: isCenterText, numericalOrder: numericalOrderDefault, selectedAllPeople: selectedAllPeople, thHeader: thHeader, toggleAll: toggleAll, lefts: lefts, refs: refs, stickyColumnNumber: stickyColumnNumber, selectedPeople: selectedPeople, stickyColumnNumberRight: stickyColumnNumberRight, rights: rights, refRights: refRights, search: search, tableKey: tableKey }))),
                                     React.createElement("tbody", { className: 'divide-y divide-gray-200' }, searchValue === ''
                                         ? dataTable.map(function (item, index) { return (
                                         // @ts-ignore
-                                        React.createElement("tr", { key: item.id, className: classNames(clickRow && !funcItemReadOnly ? 'hover:cursor-pointer hover:bg-gray-50' : '', renderInclude(item) && !(item === null || item === void 0 ? void 0 : item.entered_school) ? 'bg-gray-50' : '', funcItemReadOnly && clickType === 'custom'
+                                        React.createElement("tr", { key: item.id, className: classNames(clickRow && !funcItemReadOnly ? 'hover:cursor-pointer hover:bg-gray-50' : '', renderInclude(item) && !(item === null || item === void 0 ? void 0 : item.entered_school) && (selectedAllPeople === null || selectedAllPeople === void 0 ? void 0 : selectedAllPeople.enable)
+                                                ? 'bg-gray-50'
+                                                : '', funcItemReadOnly && clickType === 'custom'
                                                 ? funcItemReadOnly(item)
                                                     ? ''
                                                     : 'hover:cursor-pointer hover:bg-gray-50'
@@ -456,10 +450,12 @@ export function PHXTableV3(_a) {
                                                         onClickItem(item);
                                                     }
                                                 }
-                                            } }, thBody.map(function (bodyItem, bodyIndex) { return (React.createElement(RowTable, { key: bodyIndex, bodyIndex: bodyIndex, border: border, brSetSelectedPeople: brSetSelectedPeople, directDetail: directDetail, disableSpacing: disableSpacing, editActionLink: editActionLink, isCenterText: isCenterText, itemBody: item, numericalOrder: __assign(__assign({}, numericalOrder), { order: pagi * rowQuantity + index + 1 }), onChange: onChange, selectedAllPeople: selectedAllPeople, selectedPeople: selectedPeople, thBody: thBody, thBodyComponent: thBodyComponent, thBodyFilter: thBodyFilter, lefts: lefts, stickyColumnNumber: stickyColumnNumber, stickyColumnNumberRight: stickyColumnNumberRight, rights: rights, hidePagination: hidePagination, dataTableAggregate: dataTable.length, itemIndex: index })); }))); })
+                                            } }, thBody.map(function (bodyItem, bodyIndex) { return (React.createElement(RowTable, { key: bodyIndex, bodyIndex: bodyIndex, border: border, brSetSelectedPeople: brSetSelectedPeople, directDetail: directDetail, disableSpacing: disableSpacing, editActionLink: editActionLink, isCenterText: isCenterText, itemBody: item, numericalOrder: __assign(__assign({}, numericalOrderDefault), { order: pagi * rowQuantity + index + 1 }), onChange: onChange, selectedAllPeople: selectedAllPeople, selectedPeople: selectedPeople, thBody: thBody, thBodyComponent: thBodyComponent, thBodyFilter: thBodyFilter, lefts: lefts, stickyColumnNumber: stickyColumnNumber, stickyColumnNumberRight: stickyColumnNumberRight, rights: rights, hidePagination: hidePagination, dataTableAggregate: dataTable.length, itemIndex: index, tableKey: tableKey })); }))); })
                                         : searchDataResult.map(function (item, index) { return (
                                         // @ts-ignore
-                                        React.createElement("tr", { key: item.id, className: classNames(clickRow && !funcItemReadOnly ? 'hover:cursor-pointer hover:bg-gray-50' : '', renderInclude(item) && !(item === null || item === void 0 ? void 0 : item.entered_school) ? 'bg-gray-50' : '', funcItemReadOnly && clickType === 'custom'
+                                        React.createElement("tr", { key: item.id, className: classNames(clickRow && !funcItemReadOnly ? 'hover:cursor-pointer hover:bg-gray-50' : '', renderInclude(item) && !(item === null || item === void 0 ? void 0 : item.entered_school) && (selectedAllPeople === null || selectedAllPeople === void 0 ? void 0 : selectedAllPeople.enable)
+                                                ? 'bg-gray-50'
+                                                : '', funcItemReadOnly && clickType === 'custom'
                                                 ? funcItemReadOnly(item)
                                                     ? ''
                                                     : 'hover:cursor-pointer hover:bg-gray-50'
@@ -479,12 +475,13 @@ export function PHXTableV3(_a) {
                                                         onClickItem(item);
                                                     }
                                                 }
-                                            } }, thBody.map(function (bodyItem, bodyIndex) { return (React.createElement(RowTable, { key: bodyIndex, bodyIndex: bodyIndex, border: border, brSetSelectedPeople: brSetSelectedPeople, directDetail: directDetail, disableSpacing: disableSpacing, editActionLink: editActionLink, isCenterText: isCenterText, itemBody: item, numericalOrder: __assign(__assign({}, numericalOrder), { order: pagi * rowQuantity + index + 1 }), onChange: onChange, selectedAllPeople: selectedAllPeople, selectedPeople: selectedPeople, thBody: thBody, thBodyComponent: thBodyComponent, thBodyFilter: thBodyFilter, lefts: lefts, stickyColumnNumber: stickyColumnNumber, stickyColumnNumberRight: stickyColumnNumberRight, rights: rights, hidePagination: hidePagination, dataTableAggregate: searchDataResult.length, itemIndex: index })); }))); }))))))) : (React.createElement(EmptySearchResult, null)))) : (dataTable.length === 0 && isSearch) ||
-                    (dataTable.length === 0 && isSelectSort) ||
-                    (dataTable.length === 0 && isSort) ||
-                    (dataTable.length === 0 && (sort === null || sort === void 0 ? void 0 : sort.enable)) ? (React.createElement(React.Fragment, null, enableEmptyStateAction ? React.createElement(PHXEmptyStateAction, __assign({}, emptyStateActionAttribute)) : React.createElement(PHXEmptyRecord, null))) : (React.createElement(React.Fragment, null, enableEmptyStateAction ? React.createElement(PHXEmptyStateAction, __assign({}, emptyStateActionAttribute)) : React.createElement(PHXEmptyRecord, null)))),
-            dataTable.length > 0 && !hidePagination && (React.createElement("div", { className: 'flex items-center justify-between rounded-lg rounded-tl-none rounded-tr-none border-t border-gray-200 bg-[#F9FAFB] py-2 pl-7 pr-2' },
-                React.createElement(PaginationSelected, { rowQuantity: rowQuantity, setIsChangeRowQty: setIsChangeRowQty, setRowQuantity: setRowQuantity, router: router, searchParams: params, tableKey: tableKey, setCurrentPage: setCurrentPage, setPagi: setPagi, paginationData: paginationData }),
-                React.createElement(Pagination, { count: count, currentPage: currentPage, handleChangePage: handleChangePage, pagination: pagination, router: router, rowQuantity: rowQuantity, totalPages: Math.ceil(count / rowQuantity), searchParams: params, tableKey: tableKey }))))))));
+                                            } }, thBody.map(function (bodyItem, bodyIndex) { return (React.createElement(RowTable, { key: bodyIndex, bodyIndex: bodyIndex, border: border, brSetSelectedPeople: brSetSelectedPeople, directDetail: directDetail, disableSpacing: disableSpacing, editActionLink: editActionLink, isCenterText: isCenterText, itemBody: item, numericalOrder: __assign(__assign({}, numericalOrderDefault), { order: pagi * rowQuantity + index + 1 }), onChange: onChange, selectedAllPeople: selectedAllPeople, selectedPeople: selectedPeople, thBody: thBody, thBodyComponent: thBodyComponent, thBodyFilter: thBodyFilter, lefts: lefts, stickyColumnNumber: stickyColumnNumber, stickyColumnNumberRight: stickyColumnNumberRight, rights: rights, hidePagination: hidePagination, dataTableAggregate: searchDataResult.length, itemIndex: index, tableKey: tableKey })); }))); }))))))) : (React.createElement(PHXEmptySearch, null)))) : (dataTable.length === 0 && isSearch) ||
+                        (dataTable.length === 0 && isSelectSort) ||
+                        (dataTable.length === 0 && isSort) ||
+                        (dataTable.length === 0 && (sort === null || sort === void 0 ? void 0 : sort.enable)) ? (React.createElement(React.Fragment, null, enableEmptyStateAction ? React.createElement(PHXEmptyStateAction, __assign({}, emptyStateActionAttribute)) : React.createElement(PHXEmptyRecord, null))) : (React.createElement(React.Fragment, null, enableEmptyStateAction ? (React.createElement(PHXEmptyStateAction, __assign({}, emptyStateActionAttribute))) : completeState ? (React.createElement(PHXCompleteState, { title: completeStateTitle || 'Hoàn tất duyệt đơn!', description: completeStateDescription || 'Tất cả đơn đăng ký đã được duyệt.' })) : (React.createElement(PHXEmptyRecord, null))))),
+                dataTable.length > 0 && !hidePagination && (React.createElement("div", { className: 'flex items-center justify-between rounded-lg rounded-tl-none rounded-tr-none border-t border-gray-200 bg-[#F9FAFB] py-2 pl-7 pr-2' },
+                    React.createElement(PaginationSelected, { rowQuantity: rowQuantity, setIsChangeRowQty: setIsChangeRowQty, setRowQuantity: setRowQuantity, router: router, searchParams: params, tableKey: tableKey, setCurrentPage: setCurrentPage, setPagi: setPagi, paginationData: paginationData }),
+                    React.createElement(Pagination, { count: count, currentPage: currentPage, handleChangePage: handleChangePage, pagination: pagination, router: router, rowQuantity: rowQuantity, totalPages: Math.ceil(count / rowQuantity), searchParams: params, tableKey: tableKey })))))),
+        (selectedAllPeople === null || selectedAllPeople === void 0 ? void 0 : selectedAllPeople.enable) && !(selectedAllPeople === null || selectedAllPeople === void 0 ? void 0 : selectedAllPeople.hideSelectedAction) && (React.createElement(SelectedAction, { selectedBtn: selectedBtn, selectedPeople: selectedPeople, slectedTitle: slectedTitle, toggleAll: toggleAll }))));
 }
 //# sourceMappingURL=TableV3.js.map