@pnkx-lib/ui 1.9.38 → 1.9.41

package/es/chunks/{index-C4eLNxfq.js → index-CqzBrT3-.js}

@@ -10277,388 +10277,660 @@ const HeadingTable = (props) => {
   );
 };
 
-const EditableCell = ({
-  editing,
-  dataIndex,
-  inputType,
-  children,
-  control,
+const ConfirmModal = ({
+  title,
+  content,
+  typeIcon,
+  titleCancelBtn = "Huỷ bỏ",
+  titleSubmitBtn = "Xác nhận",
+  handleCancel,
+  handleSubmit,
   ...restProps
 }) => {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("td", { ...restProps, children: editing ? /* @__PURE__ */ jsxRuntimeExports.jsx(
-    PnkxField,
-    {
-      name: dataIndex,
-      control,
-      component: Input,
-      type: inputType
+  //! State
+  const IconType = () => {
+    switch (typeIcon) {
+      case "success":
+        return /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "svg",
+          {
+            xmlns: "http://www.w3.org/2000/svg",
+            width: "24",
+            height: "24",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+              "path",
+              {
+                d: "M12 1.5C6.20156 1.5 1.5 6.20156 1.5 12C1.5 17.7984 6.20156 22.5 12 22.5C17.7984 22.5 22.5 17.7984 22.5 12C22.5 6.20156 17.7984 1.5 12 1.5ZM16.5352 8.57109L11.5992 15.4148C11.5302 15.5111 11.4393 15.5896 11.3339 15.6437C11.2286 15.6978 11.1118 15.7261 10.9934 15.7261C10.8749 15.7261 10.7582 15.6978 10.6528 15.6437C10.5474 15.5896 10.4565 15.5111 10.3875 15.4148L7.46484 11.3648C7.37578 11.2406 7.46484 11.0672 7.61719 11.0672H8.71641C8.95547 11.0672 9.18281 11.182 9.32344 11.3789L10.9922 13.6945L14.6766 8.58516C14.8172 8.39062 15.0422 8.27344 15.2836 8.27344H16.3828C16.5352 8.27344 16.6242 8.44688 16.5352 8.57109Z",
+                fill: "#52C41A"
+              }
+            )
+          }
+        );
+      case "error":
+        return /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "svg",
+          {
+            xmlns: "http://www.w3.org/2000/svg",
+            width: "24",
+            height: "24",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+              "path",
+              {
+                d: "M12 1.5C6.20156 1.5 1.5 6.20156 1.5 12C1.5 17.7984 6.20156 22.5 12 22.5C17.7984 22.5 22.5 17.7984 22.5 12C22.5 6.20156 17.7984 1.5 12 1.5ZM15.8766 15.9891L14.3297 15.982L12 13.2047L9.67266 15.9797L8.12344 15.9867C8.02031 15.9867 7.93594 15.9047 7.93594 15.7992C7.93594 15.7547 7.95234 15.7125 7.98047 15.6773L11.0297 12.0445L7.98047 8.41406C7.95215 8.37971 7.93643 8.3367 7.93594 8.29219C7.93594 8.18906 8.02031 8.10469 8.12344 8.10469L9.67266 8.11172L12 10.8891L14.3273 8.11406L15.8742 8.10703C15.9773 8.10703 16.0617 8.18906 16.0617 8.29453C16.0617 8.33906 16.0453 8.38125 16.0172 8.41641L12.9727 12.0469L16.0195 15.6797C16.0477 15.7148 16.0641 15.757 16.0641 15.8016C16.0641 15.9047 15.9797 15.9891 15.8766 15.9891Z",
+                fill: "#FF4D4F"
+              }
+            )
+          }
+        );
+      case "info":
+        return /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "svg",
+          {
+            xmlns: "http://www.w3.org/2000/svg",
+            width: "24",
+            height: "24",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+              "path",
+              {
+                d: "M12 1.5C6.20156 1.5 1.5 6.20156 1.5 12C1.5 17.7984 6.20156 22.5 12 22.5C17.7984 22.5 22.5 17.7984 22.5 12C22.5 6.20156 17.7984 1.5 12 1.5ZM12.75 17.0625C12.75 17.1656 12.6656 17.25 12.5625 17.25H11.4375C11.3344 17.25 11.25 17.1656 11.25 17.0625V10.6875C11.25 10.5844 11.3344 10.5 11.4375 10.5H12.5625C12.6656 10.5 12.75 10.5844 12.75 10.6875V17.0625ZM12 9C11.7056 8.99399 11.4253 8.87282 11.2192 8.6625C11.0132 8.45218 10.8977 8.16945 10.8977 7.875C10.8977 7.58055 11.0132 7.29782 11.2192 7.0875C11.4253 6.87718 11.7056 6.75601 12 6.75C12.2944 6.75601 12.5747 6.87718 12.7808 7.0875C12.9868 7.29782 13.1023 7.58055 13.1023 7.875C13.1023 8.16945 12.9868 8.45218 12.7808 8.6625C12.5747 8.87282 12.2944 8.99399 12 9Z",
+                fill: "#1677FF"
+              }
+            )
+          }
+        );
+      case "warning":
+        return /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "svg",
+          {
+            xmlns: "http://www.w3.org/2000/svg",
+            width: "24",
+            height: "24",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+              "path",
+              {
+                d: "M12 1.5C6.20156 1.5 1.5 6.20156 1.5 12C1.5 17.7984 6.20156 22.5 12 22.5C17.7984 22.5 22.5 17.7984 22.5 12C22.5 6.20156 17.7984 1.5 12 1.5ZM11.25 6.9375C11.25 6.83437 11.3344 6.75 11.4375 6.75H12.5625C12.6656 6.75 12.75 6.83437 12.75 6.9375V13.3125C12.75 13.4156 12.6656 13.5 12.5625 13.5H11.4375C11.3344 13.5 11.25 13.4156 11.25 13.3125V6.9375ZM12 17.25C11.7056 17.244 11.4253 17.1228 11.2192 16.9125C11.0132 16.7022 10.8977 16.4195 10.8977 16.125C10.8977 15.8305 11.0132 15.5478 11.2192 15.3375C11.4253 15.1272 11.7056 15.006 12 15C12.2944 15.006 12.5747 15.1272 12.7808 15.3375C12.9868 15.5478 13.1023 15.8305 13.1023 16.125C13.1023 16.4195 12.9868 16.7022 12.7808 16.9125C12.5747 17.1228 12.2944 17.244 12 17.25Z",
+                fill: "#FAAD14"
+              }
+            )
+          }
+        );
     }
-  ) : children });
+  };
+  //! Function
+  //! Render
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(Modal, { ...restProps, footer: null, closeIcon: null, width: 400, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex gap-3", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(IconType, {}),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { className: "text-base font-semibold", children: title }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm", children: content })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex gap-2 w-full justify-end items-end pt-3", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { shape: "round", onClick: handleCancel, children: titleCancelBtn }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { shape: "round", type: "primary", onClick: handleSubmit, children: titleSubmitBtn })
+    ] })
+  ] }) });
 };
-const tableCss = css`
-  .ant-table-cell::before {
-    display: none !important;
-  }
-  .ant-table-thead .ant-table-cell {
-    background-color: #d6e6fe;
-    font-weight: 500;
-  }
-
-  .ant-table-thead th.ant-table-column-has-sorters:hover {
-    background-color: #d6e6fe;
-  }
 
-  .ant-table-row.table-row-even {
-    background-color: #f7f7f8;
-  }
+var CATEGORY_LIST_ENUM = /* @__PURE__ */ ((CATEGORY_LIST_ENUM2) => {
+  CATEGORY_LIST_ENUM2[CATEGORY_LIST_ENUM2["DRAFT"] = 0] = "DRAFT";
+  CATEGORY_LIST_ENUM2[CATEGORY_LIST_ENUM2["WATING_APPROVAL"] = 1] = "WATING_APPROVAL";
+  CATEGORY_LIST_ENUM2[CATEGORY_LIST_ENUM2["ACTIVE"] = 2] = "ACTIVE";
+  CATEGORY_LIST_ENUM2[CATEGORY_LIST_ENUM2["INACTIVE"] = 3] = "INACTIVE";
+  CATEGORY_LIST_ENUM2[CATEGORY_LIST_ENUM2["REJECT"] = 4] = "REJECT";
+  CATEGORY_LIST_ENUM2[CATEGORY_LIST_ENUM2["DELETE"] = 5] = "DELETE";
+  return CATEGORY_LIST_ENUM2;
+})(CATEGORY_LIST_ENUM || {});
 
-  .ant-table-row.table-row-odd {
-    background-color: #ffffff;
-  }
-  .ant-table-row:hover {
-    background-color: #e7f0ff;
-  }
-`;
-const Table = ({
-  dataSource,
-  columns,
-  loading = false,
-  totalItems,
-  filters,
-  onChangePage,
-  onChangePageSize,
-  onSort,
-  rowsSelected,
-  onSelect,
-  onRowClick,
-  rowKey = "id",
-  className,
-  editable,
-  onSave,
-  titleSettingTableModal,
-  showSetting,
-  setColumns,
-  resetToInitialFilters,
-  handleSearch,
-  groupHeadingButtonItems,
-  tagSearchItems,
-  setTagSearchItems,
-  setKeyActive,
-  keyActive,
-  ...rest
+const BulkAction = ({
+  quantity,
+  handleRestore,
+  handleSendApproval,
+  handleCancelSendApproval,
+  handleRefuseApproval,
+  handleApproval,
+  handleCancelApproval,
+  handleDelete,
+  handleActivate,
+  handleInActivate,
+  status
 }) => {
   //! State
-  const paginationConfig = {
-    current: filters.PageIndex,
-    pageSize: filters.PageSize,
-    total: totalItems,
-    showSizeChanger: true,
-    showQuickJumper: true,
-    showTotal: (total, range) => `${range[0]}-${range[1]} of ${total} items`,
-    onChange: (page, pageSize) => {
-      if (page !== filters.PageIndex) onChangePage(page);
-      if (pageSize !== filters.PageSize) onChangePageSize(pageSize);
-    }
-  };
-  const [openSetting, setOpenStting] = useState(false);
-  const rowSelection = {
-    selectedRowKeys: rowsSelected,
-    onChange: onSelect
-    // getCheckboxProps: (record: any) => ({
-    //   disabled: true, // Ví dụ: disable nếu tuổi > 40
-    // }),
-  };
-  const { control, handleSubmit, reset } = useForm();
-  const [data, setData] = useState([]);
-  const [editingKey, setEditingKey] = useState("");
-  const getRowKeyValue = (record) => typeof rowKey === "function" ? rowKey(record) : record[rowKey];
-  const isEditing = (record) => getRowKeyValue(record) === editingKey;
-  const edit = (record) => {
-    reset(record);
-    setEditingKey(getRowKeyValue(record));
-  };
-  const save = (formValues) => {
-    const key = editingKey;
-    const newData = [...data];
-    const index = newData.findIndex((item) => getRowKeyValue(item) === key);
-    if (onSave) {
-      onSave(formValues);
-    }
-    if (index > -1) {
-      newData[index] = { ...newData[index], ...formValues };
-      setData(newData);
-      setEditingKey("");
-    }
-  };
-  const cancel = () => {
-    setEditingKey("");
-  };
-  //! Function
-  useEffect(() => {
-    setData(Array.isArray(dataSource) ? dataSource : []);
-  }, [JSON.stringify(dataSource)]);
-  const columnsEditable = [
-    ...columns,
+  const listIcon = [
     {
-      title: "Operation",
-      dataIndex: "operation",
-      render: (_, record) => {
-        const editable2 = isEditing(record);
-        return editable2 ? /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(
-            Popconfirm$1,
-            {
-              title: "Bạn có chắc chắn muốn huỷ chỉnh sửa?",
-              onConfirm: cancel,
-              children: /* @__PURE__ */ jsxRuntimeExports.jsx(Typography$1.Text, { type: "danger", children: " Huỷ bỏ" })
-            }
-          ),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { htmlType: "submit", variant: "text", color: "blue", children: "Lưu" })
-        ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(
-            Button,
-            {
-              disabled: editingKey !== "",
-              onClick: () => edit(record),
-              icon: /* @__PURE__ */ jsxRuntimeExports.jsx(RefIcon$4, {}),
-              variant: "text",
-              color: "blue"
-            }
-          ),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(Popconfirm$1, { title: "Bạn có muốn xoá ?", onConfirm: () => {
-          }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-            Button,
-            {
-              disabled: editingKey !== "",
-              icon: /* @__PURE__ */ jsxRuntimeExports.jsx(RefIcon$5, {}),
-              variant: "text",
-              color: "red"
-            }
-          ) })
-        ] });
-      }
+      icon: /* @__PURE__ */ jsxRuntimeExports.jsx(RestoreIcon, { stroke: "white" }),
+      action: handleRestore,
+      showConfirmModal: false,
+      title: "Khôi phục",
+      arrShow: [CATEGORY_LIST_ENUM?.DELETE, CATEGORY_LIST_ENUM?.REJECT]
+    },
+    {
+      icon: /* @__PURE__ */ jsxRuntimeExports.jsx(SendApprovalIcon, { stroke: "white" }),
+      action: handleSendApproval,
+      showConfirmModal: true,
+      typeIcon: "info",
+      title: "Xác nhận gửi duyệt",
+      content: "Bạn có chắc chắn muốn gửi duyệt mục này không?",
+      arrShow: [CATEGORY_LIST_ENUM?.DRAFT]
+    },
+    {
+      icon: /* @__PURE__ */ jsxRuntimeExports.jsx(CancelSendApprovalIcon, { stroke: "white" }),
+      action: handleCancelSendApproval,
+      showConfirmModal: true,
+      typeIcon: "error",
+      title: "Xác nhận hủy gửi duyệt",
+      content: "Bạn có chắc chắn muốn hủy gửi duyệt mục này không?",
+      arrShow: [CATEGORY_LIST_ENUM?.WATING_APPROVAL]
+    },
+    {
+      icon: /* @__PURE__ */ jsxRuntimeExports.jsx(RefuseApprovalIcon, { stroke: "white" }),
+      action: handleRefuseApproval,
+      showConfirmModal: true,
+      typeIcon: "error",
+      title: "Xác nhận từ chối duyệt",
+      content: "Bạn có chắc chắn muốn từ chối duyệt mục này không? Hành động này không thể hoàn tác.",
+      arrShow: [CATEGORY_LIST_ENUM?.WATING_APPROVAL]
+    },
+    {
+      icon: /* @__PURE__ */ jsxRuntimeExports.jsx(ApprovalIcon, { stroke: "white" }),
+      action: handleApproval,
+      showConfirmModal: true,
+      typeIcon: "info",
+      title: "Xác nhận duyệt",
+      content: "Bạn có chắc chắn muốn duyệt mục này không?",
+      arrShow: [CATEGORY_LIST_ENUM?.WATING_APPROVAL]
+    },
+    {
+      icon: /* @__PURE__ */ jsxRuntimeExports.jsx(CancelApprovalIcon, { stroke: "white" }),
+      action: handleCancelApproval,
+      showConfirmModal: true,
+      typeIcon: "error",
+      title: "Xác nhận hủy duyệt",
+      content: "Bạn có chắc chắn muốn hủy duyệt mục này không?",
+      arrShow: [CATEGORY_LIST_ENUM?.ACTIVE]
+    },
+    {
+      icon: /* @__PURE__ */ jsxRuntimeExports.jsx(DeleteIcon, { fill: "white" }),
+      action: handleDelete,
+      showConfirmModal: true,
+      typeIcon: "error",
+      title: "Xác nhận xóa",
+      content: "Bạn có chắc chắn muốn xóa mục này không? Hành động này không thể hoàn tác.",
+      arrShow: [
+        CATEGORY_LIST_ENUM?.DRAFT,
+        CATEGORY_LIST_ENUM?.ACTIVE,
+        CATEGORY_LIST_ENUM?.INACTIVE
+      ]
+    },
+    {
+      icon: /* @__PURE__ */ jsxRuntimeExports.jsx(ActivateIcon, { stroke: "white" }),
+      action: handleActivate,
+      showConfirmModal: true,
+      typeIcon: "info",
+      title: "Xác nhận kích hoạt",
+      content: "Bạn có chắc chắn muốn kích hoạt mục này không?",
+      arrShow: [CATEGORY_LIST_ENUM?.INACTIVE]
+    },
+    {
+      icon: /* @__PURE__ */ jsxRuntimeExports.jsx(InActiveIcon, { stroke: "white" }),
+      action: handleInActivate,
+      showConfirmModal: true,
+      typeIcon: "info",
+      title: "Xác nhận vô hiệu hóa",
+      content: "Bạn có chắc chắn muốn vô hiệu hóa mục này không?",
+      arrShow: [CATEGORY_LIST_ENUM?.ACTIVE]
     }
   ];
-  const mergedColumns = columnsEditable.map(
-    (col) => {
-      if (!col.editable) return col;
-      return {
-        ...col,
-        onCell: (record) => ({
-          record,
-          inputType: "text",
-          dataIndex: "dataIndex" in col ? col.dataIndex : void 0,
-          title: col.title,
-          editing: isEditing(record),
-          control
-        })
-      };
-    }
-  );
-  const handleTableChange = (sorter) => {
-    if (sorter && sorter.field && onSort) {
-      onSort(sorter.field);
-    }
-  };
-  const handleOnClickRow = (record, onRowClick2) => (e) => {
-    const target = e.target;
-    if (target.closest("input") || // ⛔ Checkbox
-    target.closest("button") || // ⛔ Button trong row
-    target.closest("svg") || // ⛔ Icon
-    target.closest(".ant-checkbox") || // ⛔ AntD checkbox
-    target.closest("a")) {
-      return;
+  const [open, setOpen] = useState(false);
+  const [notifyContent, setNotifyContent] = useState({
+    title: "",
+    content: "",
+    typeIcon: "info",
+    handleCancel: () => {
+    },
+    handleSubmit: () => {
     }
-    onRowClick2?.(record);
-  };
-  if (loading) return /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { type: "table" });
-  const EmptyTable = () => {
-    return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col items-center justify-center text-center", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: "https://i.ibb.co/39C3x4LZ/Component-1.png", alt: "no data" }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-lg font-bold text-black", children: "Không có dữ liệu nào phù hợp" }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-gray-500", children: "Kiểm tra lại bộ lọc hoặc thêm mới dữ liệu" })
-    ] });
+  });
+  //! Function
+  const IsShow = (arrStatus) => {
+    return arrStatus.includes(status);
   };
-  const tableContent = /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: twMerge(showSetting ? "relative" : ""), children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx(
-      HeadingTable,
-      {
-        filters,
-        handleSearch,
-        resetToInitialFilters,
-        setOpenStting,
-        showSetting,
-        groupHeadingButtonItems,
-        tagSearchItems,
-        setTagSearchItems,
-        keyActive,
-        setKeyActive
-      }
-    ),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(
-      Table$1,
-      {
-        rowKey,
-        dataSource: data,
-        columns: editable ? mergedColumns : columns,
-        pagination: paginationConfig,
-        loading,
-        rowSelection,
-        onChange: handleTableChange,
-        onRow: (record) => ({
-          onClick: handleOnClickRow(record, onRowClick)
-        }),
-        locale: {
-          emptyText: /* @__PURE__ */ jsxRuntimeExports.jsx(EmptyTable, {})
+  //! Render
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-full flex justify-center items-center", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-3 px-[10px] py-3 bg-[#2561ED] rounded-lg w-fit", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-white px-3", children: [
+      "Đã chọn: ",
+      quantity
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-5 border-l border-white mx-1" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center space-x-3", children: listIcon.map(
+      (item, index) => IsShow(item?.arrShow) && /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip, { title: item?.title, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "button",
+        {
+          className: "p-1 rounded-sm  transition duration-200 cursor-pointer hover:bg-[#1B4ACB] hover:rounded-sm",
+          onClick: item?.showConfirmModal ? () => {
+            setOpen(true);
+            setNotifyContent({
+              title: item?.title || "",
+              content: item?.content || "",
+              typeIcon: item?.typeIcon,
+              handleCancel: () => {
+                setOpen(false);
+              },
+              handleSubmit: item?.action
+            });
+          } : item?.action,
+          children: item.icon
         },
-        rowClassName: (_, index) => `table-row-${index % 2 === 0 ? "even" : "odd"}`,
-        className: cx(tableCss, className),
-        components: editable ? {
-          body: { cell: EditableCell }
-        } : void 0,
-        ...rest
-      }
-    ),
+        index
+      ) })
+    ) }),
     /* @__PURE__ */ jsxRuntimeExports.jsx(
-      SettingTable,
+      ConfirmModal,
       {
-        open: openSetting,
-        setOpen: setOpenStting,
-        title: titleSettingTableModal,
-        showSetting,
-        defaultSettingColumnItems: editable ? mergedColumns : columns,
-        setDefaultSettingColumnItems: setColumns
+        title: notifyContent?.title,
+        content: notifyContent?.content,
+        typeIcon: notifyContent?.typeIcon,
+        open,
+        handleCancel: notifyContent?.handleCancel,
+        handleSubmit: notifyContent?.handleSubmit
       }
     )
-  ] });
-  const renderTableContent = () => {
-    if (editable) {
-      return /* @__PURE__ */ jsxRuntimeExports.jsx("form", { onSubmit: handleSubmit(save), children: tableContent });
-    }
-    return tableContent;
-  };
-  //! Render
-  if (loading) return /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { type: "table" });
-  return renderTableContent();
+  ] }) });
 };
 
-const createStoreImpl = (createState) => {
-  let state;
-  const listeners = /* @__PURE__ */ new Set();
-  const setState = (partial, replace) => {
-    const nextState = typeof partial === "function" ? partial(state) : partial;
-    if (!Object.is(nextState, state)) {
-      const previousState = state;
-      state = (replace != null ? replace : typeof nextState !== "object" || nextState === null) ? nextState : Object.assign({}, state, nextState);
-      listeners.forEach((listener) => listener(state, previousState));
-    }
-  };
-  const getState = () => state;
-  const getInitialState = () => initialState;
-  const subscribe = (listener) => {
-    listeners.add(listener);
-    return () => listeners.delete(listener);
-  };
-  const api = { setState, getState, getInitialState, subscribe };
-  const initialState = state = createState(setState, getState, api);
-  return api;
-};
-const createStore = (createState) => createState ? createStoreImpl(createState) : createStoreImpl;
-
-const identity = (arg) => arg;
-function useStore(api, selector = identity) {
-  const slice = React__default.useSyncExternalStore(
-    api.subscribe,
-    () => selector(api.getState()),
-    () => selector(api.getInitialState())
-  );
-  React__default.useDebugValue(slice);
-  return slice;
-}
-const createImpl = (createState) => {
-  const api = createStore(createState);
-  const useBoundStore = (selector) => useStore(api, selector);
-  Object.assign(useBoundStore, api);
-  return useBoundStore;
-};
-const create = (createState) => createState ? createImpl(createState) : createImpl;
-
-const useTabStore = create((set) => ({
-  activeTabKey: void 0,
-  // giá trị mặc định
-  setActiveTabKey: (key) => set({ activeTabKey: key })
-}));
-
-const Tabs = ({
-  items,
-  lazyRender = false,
-  defaultActiveKey,
-  ...rest
+const EditableCell = ({
+  editing,
+  dataIndex,
+  inputType,
+  children,
+  control,
+  ...restProps
 }) => {
-  const { activeTabKey, setActiveTabKey } = useTabStore();
-  const defaultKey = defaultActiveKey?.toString() || items[0]?.key;
-  useEffect(() => {
-    if (!activeTabKey && defaultKey) {
-      setActiveTabKey(defaultKey);
-    }
-  }, [activeTabKey, defaultKey, setActiveTabKey]);
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(
-    Tabs$1,
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("td", { ...restProps, children: editing ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+    PnkxField,
     {
-      items,
-      destroyInactiveTabPane: lazyRender,
-      activeKey: activeTabKey,
-      defaultActiveKey,
-      onChange: (key) => setActiveTabKey(key),
-      ...rest
+      name: dataIndex,
+      control,
+      component: Input,
+      type: inputType
     }
-  );
+  ) : children });
 };
+const tableCss = css`
+  .ant-table-cell::before {
+    display: none !important;
+  }
+  .ant-table-thead .ant-table-cell {
+    background-color: #d6e6fe;
+    font-weight: 500;
+  }
 
-const Popover = (props) => {
-  const { containerClassName, popoverClassName, ...restProps } = props;
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: containerClassName, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Popover$1, { className: popoverClassName, ...restProps }) });
-};
+  .ant-table-thead th.ant-table-column-has-sorters:hover {
+    background-color: #d6e6fe;
+  }
 
-const Container = ({
-  children,
+  .ant-table-row.table-row-even {
+    background-color: #f7f7f8;
+  }
+
+  .ant-table-row.table-row-odd {
+    background-color: #ffffff;
+  }
+  .ant-table-row:hover {
+    background-color: #e7f0ff;
+  }
+`;
+const Table = ({
+  dataSource,
+  columns,
+  loading = false,
+  totalItems,
+  filters,
+  onChangePage,
+  onChangePageSize,
+  onSort,
+  rowsSelected,
+  onSelect,
+  onRowClick,
+  rowKey = "id",
   className,
-  size
+  editable,
+  onSave,
+  titleSettingTableModal,
+  showSetting,
+  setColumns,
+  resetToInitialFilters,
+  handleSearch,
+  groupHeadingButtonItems,
+  tagSearchItems,
+  setTagSearchItems,
+  setKeyActive,
+  keyActive,
+  status,
+  ...rest
 }) => {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(
-    "div",
+  //! State
+  const paginationConfig = {
+    current: filters.PageIndex,
+    pageSize: filters.PageSize,
+    total: totalItems,
+    showSizeChanger: true,
+    showQuickJumper: true,
+    showTotal: (total, range) => `${range[0]}-${range[1]} of ${total} items`,
+    onChange: (page, pageSize) => {
+      if (page !== filters.PageIndex) onChangePage(page);
+      if (pageSize !== filters.PageSize) onChangePageSize(pageSize);
+    }
+  };
+  const [openSetting, setOpenStting] = useState(false);
+  const rowSelection = {
+    selectedRowKeys: rowsSelected,
+    onChange: onSelect
+    // getCheckboxProps: (record: any) => ({
+    //   disabled: true, // Ví dụ: disable nếu tuổi > 40
+    // }),
+  };
+  const { control, handleSubmit, reset } = useForm();
+  const [data, setData] = useState([]);
+  const [editingKey, setEditingKey] = useState("");
+  const getRowKeyValue = (record) => typeof rowKey === "function" ? rowKey(record) : record[rowKey];
+  const isEditing = (record) => getRowKeyValue(record) === editingKey;
+  const edit = (record) => {
+    reset(record);
+    setEditingKey(getRowKeyValue(record));
+  };
+  const save = (formValues) => {
+    const key = editingKey;
+    const newData = [...data];
+    const index = newData.findIndex((item) => getRowKeyValue(item) === key);
+    if (onSave) {
+      onSave(formValues);
+    }
+    if (index > -1) {
+      newData[index] = { ...newData[index], ...formValues };
+      setData(newData);
+      setEditingKey("");
+    }
+  };
+  const cancel = () => {
+    setEditingKey("");
+  };
+  //! Function
+  useEffect(() => {
+    setData(Array.isArray(dataSource) ? dataSource : []);
+  }, [JSON.stringify(dataSource)]);
+  const columnsEditable = [
+    ...columns,
     {
-      className: classNames(size, "mx-auto px-4 sm:px-6 lg:px-8", className),
-      children
+      title: "Operation",
+      dataIndex: "operation",
+      render: (_, record) => {
+        const editable2 = isEditing(record);
+        return editable2 ? /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            Popconfirm$1,
+            {
+              title: "Bạn có chắc chắn muốn huỷ chỉnh sửa?",
+              onConfirm: cancel,
+              children: /* @__PURE__ */ jsxRuntimeExports.jsx(Typography$1.Text, { type: "danger", children: " Huỷ bỏ" })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { htmlType: "submit", variant: "text", color: "blue", children: "Lưu" })
+        ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            Button,
+            {
+              disabled: editingKey !== "",
+              onClick: () => edit(record),
+              icon: /* @__PURE__ */ jsxRuntimeExports.jsx(RefIcon$4, {}),
+              variant: "text",
+              color: "blue"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(Popconfirm$1, { title: "Bạn có muốn xoá ?", onConfirm: () => {
+          }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+            Button,
+            {
+              disabled: editingKey !== "",
+              icon: /* @__PURE__ */ jsxRuntimeExports.jsx(RefIcon$5, {}),
+              variant: "text",
+              color: "red"
+            }
+          ) })
+        ] });
+      }
+    }
+  ];
+  const mergedColumns = columnsEditable.map(
+    (col) => {
+      if (!col.editable) return col;
+      return {
+        ...col,
+        onCell: (record) => ({
+          record,
+          inputType: "text",
+          dataIndex: "dataIndex" in col ? col.dataIndex : void 0,
+          title: col.title,
+          editing: isEditing(record),
+          control
+        })
+      };
     }
   );
-};
-
-const Col = (props) => {
-  const { colClassName, ...restProps } = props;
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(Col$1, { className: colClassName, ...restProps });
-};
-
-const Row = (props) => {
-  const { rowClassName, ...restProps } = props;
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(Row$1, { className: rowClassName, ...restProps });
-};
-
-const Dropdown = (props) => {
-  const { containerClassName, dropdownClassName, ...restProps } = props;
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: containerClassName, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Dropdown$1, { className: dropdownClassName, ...restProps }) });
-};
-
-const Flex = (props) => {
-  const { containerClassName, flexClassName, ...restProps } = props;
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: containerClassName, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Flex$1, { className: flexClassName, ...restProps }) });
-};
-
-function _arrayWithoutHoles(r) {
-  if (Array.isArray(r)) return _arrayLikeToArray(r);
-}
-
-function _iterableToArray(r) {
+  const handleTableChange = (sorter) => {
+    if (sorter && sorter.field && onSort) {
+      onSort(sorter.field);
+    }
+  };
+  const handleOnClickRow = (record, onRowClick2) => (e) => {
+    const target = e.target;
+    if (target.closest("input") || // ⛔ Checkbox
+    target.closest("button") || // ⛔ Button trong row
+    target.closest("svg") || // ⛔ Icon
+    target.closest(".ant-checkbox") || // ⛔ AntD checkbox
+    target.closest("a")) {
+      return;
+    }
+    onRowClick2?.(record);
+  };
+  if (loading) return /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { type: "table" });
+  const EmptyTable = () => {
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col items-center justify-center text-center", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: "https://i.ibb.co/39C3x4LZ/Component-1.png", alt: "no data" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-lg font-bold text-black", children: "Không có dữ liệu nào phù hợp" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-gray-500", children: "Kiểm tra lại bộ lọc hoặc thêm mới dữ liệu" })
+    ] });
+  };
+  const tableContent = /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: twMerge(showSetting ? "relative" : ""), children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      HeadingTable,
+      {
+        filters,
+        handleSearch,
+        resetToInitialFilters,
+        setOpenStting,
+        showSetting,
+        groupHeadingButtonItems,
+        tagSearchItems,
+        setTagSearchItems,
+        keyActive,
+        setKeyActive
+      }
+    ),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      Table$1,
+      {
+        rowKey,
+        dataSource: data,
+        columns: editable ? mergedColumns : columns,
+        pagination: paginationConfig,
+        loading,
+        rowSelection,
+        onChange: handleTableChange,
+        onRow: (record) => ({
+          onClick: handleOnClickRow(record, onRowClick)
+        }),
+        locale: {
+          emptyText: /* @__PURE__ */ jsxRuntimeExports.jsx(EmptyTable, {})
+        },
+        rowClassName: (_, index) => `table-row-${index % 2 === 0 ? "even" : "odd"}`,
+        className: cx(tableCss, className),
+        components: editable ? {
+          body: { cell: EditableCell }
+        } : void 0,
+        ...rest
+      }
+    ),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      SettingTable,
+      {
+        open: openSetting,
+        setOpen: setOpenStting,
+        title: titleSettingTableModal,
+        showSetting,
+        defaultSettingColumnItems: editable ? mergedColumns : columns,
+        setDefaultSettingColumnItems: setColumns
+      }
+    ),
+    rowsSelected?.length && rowsSelected?.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "fixed bottom-1/100 left-1/2 -translate-x-1/2 -translate-y-1/2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(BulkAction, { quantity: rowsSelected?.length || 0, status }) })
+  ] });
+  const renderTableContent = () => {
+    if (editable) {
+      return /* @__PURE__ */ jsxRuntimeExports.jsx("form", { onSubmit: handleSubmit(save), children: tableContent });
+    }
+    return tableContent;
+  };
+  //! Render
+  if (loading) return /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { type: "table" });
+  return renderTableContent();
+};
+
+const createStoreImpl = (createState) => {
+  let state;
+  const listeners = /* @__PURE__ */ new Set();
+  const setState = (partial, replace) => {
+    const nextState = typeof partial === "function" ? partial(state) : partial;
+    if (!Object.is(nextState, state)) {
+      const previousState = state;
+      state = (replace != null ? replace : typeof nextState !== "object" || nextState === null) ? nextState : Object.assign({}, state, nextState);
+      listeners.forEach((listener) => listener(state, previousState));
+    }
+  };
+  const getState = () => state;
+  const getInitialState = () => initialState;
+  const subscribe = (listener) => {
+    listeners.add(listener);
+    return () => listeners.delete(listener);
+  };
+  const api = { setState, getState, getInitialState, subscribe };
+  const initialState = state = createState(setState, getState, api);
+  return api;
+};
+const createStore = (createState) => createState ? createStoreImpl(createState) : createStoreImpl;
+
+const identity = (arg) => arg;
+function useStore(api, selector = identity) {
+  const slice = React__default.useSyncExternalStore(
+    api.subscribe,
+    () => selector(api.getState()),
+    () => selector(api.getInitialState())
+  );
+  React__default.useDebugValue(slice);
+  return slice;
+}
+const createImpl = (createState) => {
+  const api = createStore(createState);
+  const useBoundStore = (selector) => useStore(api, selector);
+  Object.assign(useBoundStore, api);
+  return useBoundStore;
+};
+const create = (createState) => createState ? createImpl(createState) : createImpl;
+
+const useTabStore = create((set) => ({
+  activeTabKey: void 0,
+  // giá trị mặc định
+  setActiveTabKey: (key) => set({ activeTabKey: key })
+}));
+
+const Tabs = ({
+  items,
+  lazyRender = false,
+  defaultActiveKey,
+  ...rest
+}) => {
+  const { activeTabKey, setActiveTabKey } = useTabStore();
+  const defaultKey = defaultActiveKey?.toString() || items[0]?.key;
+  useEffect(() => {
+    if (!activeTabKey && defaultKey) {
+      setActiveTabKey(defaultKey);
+    }
+  }, [activeTabKey, defaultKey, setActiveTabKey]);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    Tabs$1,
+    {
+      items,
+      destroyInactiveTabPane: lazyRender,
+      activeKey: activeTabKey,
+      defaultActiveKey,
+      onChange: (key) => setActiveTabKey(key),
+      ...rest
+    }
+  );
+};
+
+const Popover = (props) => {
+  const { containerClassName, popoverClassName, ...restProps } = props;
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: containerClassName, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Popover$1, { className: popoverClassName, ...restProps }) });
+};
+
+const Container = ({
+  children,
+  className,
+  size
+}) => {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "div",
+    {
+      className: classNames(size, "mx-auto px-4 sm:px-6 lg:px-8", className),
+      children
+    }
+  );
+};
+
+const Col = (props) => {
+  const { colClassName, ...restProps } = props;
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(Col$1, { className: colClassName, ...restProps });
+};
+
+const Row = (props) => {
+  const { rowClassName, ...restProps } = props;
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(Row$1, { className: rowClassName, ...restProps });
+};
+
+const Dropdown = (props) => {
+  const { containerClassName, dropdownClassName, ...restProps } = props;
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: containerClassName, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Dropdown$1, { className: dropdownClassName, ...restProps }) });
+};
+
+const Flex = (props) => {
+  const { containerClassName, flexClassName, ...restProps } = props;
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: containerClassName, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Flex$1, { className: flexClassName, ...restProps }) });
+};
+
+function _arrayWithoutHoles(r) {
+  if (Array.isArray(r)) return _arrayLikeToArray(r);
+}
+
+function _iterableToArray(r) {
   if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r);
 }
 
@@ -16892,7 +17164,7 @@ const Sidebar = ({ children, menu }) => {
         onMouseEnter: () => setCollapse(true),
         onMouseLeave: () => setCollapse(false),
         className: twMerge(
-          "flex flex-col gap-y-5  h-full z-50  bg-[#1C2D5A] transition-all duration-300",
+          "flex flex-col gap-y-5 h-full z-50 bg-[#001523] transition-all duration-300",
           collapse ? "w-60" : "w-16",
           openSubCollapse && "absolute"
         ),
@@ -16914,80 +17186,87 @@ const Sidebar = ({ children, menu }) => {
             }
           ),
           /* @__PURE__ */ jsxRuntimeExports.jsxs("nav", { className: twMerge("flex flex-1 flex-col px-2"), children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { role: "list", className: twMerge("-mx-2 space-y-1 relative"), children: menu.map((item) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
-              "li",
-              {
-                className: twMerge("relative cursor-pointer pl-2"),
-                children: [
-                  (activeMainMenu === item.href || item.href === pathUrl) && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-                    /* @__PURE__ */ jsxRuntimeExports.jsx(
-                      "span",
-                      {
-                        className: twMerge(
-                          "absolute top-[-40px] right-0 w-10 h-10 rounded-full "
-                        )
-                      }
-                    ),
-                    /* @__PURE__ */ jsxRuntimeExports.jsx(
-                      "span",
-                      {
-                        className: twMerge(
-                          "absolute bottom-[-40px] right-0 w-10 h-10 rounded-full "
-                        )
-                      }
-                    )
-                  ] }),
-                  openSubCollapse && !collapse && activeMainMenu === item.href && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-                    /* @__PURE__ */ jsxRuntimeExports.jsx(
-                      "span",
-                      {
-                        className: twMerge(
-                          "absolute top-[-40px] right-0 w-10 h-10 rounded-full shadow-[24px_24px_0_white]"
-                        )
-                      }
-                    ),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { role: "list", className: twMerge("-mx-2 space-y-1 relative"), children: menu.map((item) => {
+              const isActive = openSubCollapse || [activeMainMenu, pathUrl].includes(item.href) || collapse;
+              const isActiveUrl = item.href === activeMainMenu || item.href === pathUrl;
+              return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+                "li",
+                {
+                  className: twMerge(
+                    "relative cursor-pointer",
+                    isActive ? "ml-2" : "ml-0"
+                  ),
+                  children: [
+                    (activeMainMenu === item.href || item.href === pathUrl) && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+                      /* @__PURE__ */ jsxRuntimeExports.jsx(
+                        "span",
+                        {
+                          className: twMerge(
+                            "absolute top-[-40px] right-0 w-10 h-10 rounded-full"
+                          )
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntimeExports.jsx(
+                        "span",
+                        {
+                          className: twMerge(
+                            "absolute bottom-[-40px] right-0 w-10 h-10 rounded-full"
+                          )
+                        }
+                      )
+                    ] }),
+                    (activeMainMenu === item.href || item.href === pathUrl) && !collapse && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+                      /* @__PURE__ */ jsxRuntimeExports.jsx(
+                        "span",
+                        {
+                          className: twMerge(
+                            "absolute top-[-40px] right-0 w-10 h-10 rounded-full shadow-[24px_24px_0_white]"
+                          )
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntimeExports.jsx(
+                        "span",
+                        {
+                          className: twMerge(
+                            "absolute bottom-[-40px] right-0 w-10 h-10 rounded-full shadow-[24px_-24px_0_white]"
+                          )
+                        }
+                      )
+                    ] }),
                     /* @__PURE__ */ jsxRuntimeExports.jsx(
-                      "span",
+                      "div",
                       {
                         className: twMerge(
-                          "absolute bottom-[-40px] right-0 w-10 h-10 rounded-full shadow-[24px_-24px_0_white]"
+                          "relative group rounded-bl-full rounded-tl-full hover:text-black",
+                          !collapse && "hover:bg-[#FFFFFF]"
+                        ),
+                        children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+                          "a",
+                          {
+                            onClick: () => {
+                              handleActiveMain(item.href);
+                              setCollapse(false);
+                              setOpenSubCollapse(true);
+                            },
+                            className: twMerge(
+                              isActiveUrl ? "bg-[#FFFFFF] text-black hover:text-black" : "text-[#FFFFFF] hover:bg-[#FFFFFF] hover:text-black",
+                              "py-2 rounded-md mt-2 text-sm whitespace-nowrap leading-6 font-semibold relative z-10",
+                              collapse ? "pl-4 mr-2 " : "rounded-bl-full rounded-tl-full justify-center",
+                              "flex items-center whitespace-nowrap gap-2"
+                            ),
+                            children: [
+                              item.icon,
+                              collapse && item.name
+                            ]
+                          }
                         )
                       }
                     )
-                  ] }),
-                  /* @__PURE__ */ jsxRuntimeExports.jsx(
-                    "div",
-                    {
-                      className: twMerge(
-                        "relative group rounded-bl-full  rounded-tl-full hover:text-black",
-                        !collapse && "hover:bg-[#FFFFFF]"
-                      ),
-                      children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
-                        "a",
-                        {
-                          onClick: () => {
-                            handleActiveMain(item.href);
-                            setCollapse(false);
-                            setOpenSubCollapse(true);
-                          },
-                          className: twMerge(
-                            item.href === activeMainMenu || item.href === pathUrl ? "bg-white text-black hover:text-black" : "text-white hover:bg-[#FFFFFF] hover:text-black",
-                            "py-2 rounded-md mt-2 text-sm whitespace-nowrap leading-6 font-semibold relative z-10",
-                            collapse ? "pl-4 mr-2" : "rounded-bl-full rounded-tl-full justify-center",
-                            "flex items-center gap-2"
-                          ),
-                          children: [
-                            item.icon,
-                            collapse && item.name
-                          ]
-                        }
-                      )
-                    }
-                  )
-                ]
-              },
-              item.name
-            )) }),
+                  ]
+                },
+                item.name
+              );
+            }) }),
             /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: twMerge("mt-auto pb-4"), children: /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { children: bottomMenu.map(
               (bm) => bm.show && /* @__PURE__ */ jsxRuntimeExports.jsx(
                 "li",
@@ -17019,7 +17298,7 @@ const Sidebar = ({ children, menu }) => {
       {
         onClick: () => setOpenSubCollapse(false),
         className: twMerge(
-          "absolute top-1/19 transform -translate-y-1/2 cursor-pointer bg-white z-10 text-[#3078BD] rounded-full w-10 h-10 flex items-center justify-center shadow transition-all duration-300 left-44 sm:left-40 md:left-48 lg:left-70"
+          "absolute top-1/19 transform -translate-y-1/2 cursor-pointer bg-[#FFFFFF] z-10 text-[#3078BD] rounded-full w-10 h-10 flex items-center justify-center shadow transition-all duration-300 left-44 sm:left-40 md:left-48 lg:left-70"
         ),
         children: /* @__PURE__ */ jsxRuntimeExports.jsx(ForwardRef$2, { className: twMerge("w-4 h-4") })
       }
@@ -17030,7 +17309,7 @@ const Sidebar = ({ children, menu }) => {
         className: twMerge(
           openSubCollapse ? "ml-25" : "ml-0",
           collapse ? "w-17" : "w-50",
-          "flex mt-3 flex-col border-gray-200 bg-white h-screen transition-all duration-300"
+          "flex mt-3 flex-col border-gray-200 bg-[#FFFFFF] h-screen transition-all duration-300"
         ),
         children: [
           !collapse && /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -17070,7 +17349,7 @@ const Sidebar = ({ children, menu }) => {
                         },
                         className: twMerge(
                           activeMenu.href === pathUrl ? "bg-[#EEEEF0] text-black" : "text-gray-700 hover:bg-[#EEEEF0]",
-                          "group flex gap-x-3 rounded-md p-2 mr-8  text-sm leading-6 transition-all duration-300 font-semibold items-center"
+                          "group flex gap-x-3 rounded-md p-2 mr-8 text-sm leading-6 transition-all duration-300 font-semibold items-center"
                         ),
                         children: [
                           activeMenu.icon,
@@ -17085,7 +17364,7 @@ const Sidebar = ({ children, menu }) => {
                         onClick: () => router(sub.href),
                         className: twMerge(
                           sub.href === pathUrl ? "bg-[#EEEEF0] text-black" : "",
-                          "text-xs hover:bg-[#EEEEF0]  mr-8 transition-all duration-300 mt-2 rounded-md py-2 flex items-center gap-2 p-2"
+                          "text-xs hover:bg-[#EEEEF0] mr-8 transition-all duration-300 mt-2 rounded-md py-2 flex items-center gap-2 p-2"
                         ),
                         children: [
                           sub.icon,
@@ -17106,8 +17385,8 @@ const Sidebar = ({ children, menu }) => {
       "div",
       {
         className: twMerge(
-          collapse && openSubCollapse ? "ml-10" : "",
-          "flex-1 h-screen bg-[#F8F8F8] p-6 overflow-y-auto scrollbar-none"
+          collapse && openSubCollapse ? "ml-18" : "",
+          "flex-1 h-screen overflow-y-auto scrollbar-none"
         ),
         children
       }
@@ -17307,276 +17586,6 @@ const Image = (props) => {
   return /* @__PURE__ */ jsxRuntimeExports.jsx(Image$1, { ...props });
 };
 
-const ConfirmModal = ({
-  title,
-  content,
-  typeIcon,
-  titleCancelBtn = "Huỷ bỏ",
-  titleSubmitBtn = "Xác nhận",
-  handleCancel,
-  handleSubmit,
-  ...restProps
-}) => {
-  //! State
-  const IconType = () => {
-    switch (typeIcon) {
-      case "success":
-        return /* @__PURE__ */ jsxRuntimeExports.jsx(
-          "svg",
-          {
-            xmlns: "http://www.w3.org/2000/svg",
-            width: "24",
-            height: "24",
-            viewBox: "0 0 24 24",
-            fill: "none",
-            children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-              "path",
-              {
-                d: "M12 1.5C6.20156 1.5 1.5 6.20156 1.5 12C1.5 17.7984 6.20156 22.5 12 22.5C17.7984 22.5 22.5 17.7984 22.5 12C22.5 6.20156 17.7984 1.5 12 1.5ZM16.5352 8.57109L11.5992 15.4148C11.5302 15.5111 11.4393 15.5896 11.3339 15.6437C11.2286 15.6978 11.1118 15.7261 10.9934 15.7261C10.8749 15.7261 10.7582 15.6978 10.6528 15.6437C10.5474 15.5896 10.4565 15.5111 10.3875 15.4148L7.46484 11.3648C7.37578 11.2406 7.46484 11.0672 7.61719 11.0672H8.71641C8.95547 11.0672 9.18281 11.182 9.32344 11.3789L10.9922 13.6945L14.6766 8.58516C14.8172 8.39062 15.0422 8.27344 15.2836 8.27344H16.3828C16.5352 8.27344 16.6242 8.44688 16.5352 8.57109Z",
-                fill: "#52C41A"
-              }
-            )
-          }
-        );
-      case "error":
-        return /* @__PURE__ */ jsxRuntimeExports.jsx(
-          "svg",
-          {
-            xmlns: "http://www.w3.org/2000/svg",
-            width: "24",
-            height: "24",
-            viewBox: "0 0 24 24",
-            fill: "none",
-            children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-              "path",
-              {
-                d: "M12 1.5C6.20156 1.5 1.5 6.20156 1.5 12C1.5 17.7984 6.20156 22.5 12 22.5C17.7984 22.5 22.5 17.7984 22.5 12C22.5 6.20156 17.7984 1.5 12 1.5ZM15.8766 15.9891L14.3297 15.982L12 13.2047L9.67266 15.9797L8.12344 15.9867C8.02031 15.9867 7.93594 15.9047 7.93594 15.7992C7.93594 15.7547 7.95234 15.7125 7.98047 15.6773L11.0297 12.0445L7.98047 8.41406C7.95215 8.37971 7.93643 8.3367 7.93594 8.29219C7.93594 8.18906 8.02031 8.10469 8.12344 8.10469L9.67266 8.11172L12 10.8891L14.3273 8.11406L15.8742 8.10703C15.9773 8.10703 16.0617 8.18906 16.0617 8.29453C16.0617 8.33906 16.0453 8.38125 16.0172 8.41641L12.9727 12.0469L16.0195 15.6797C16.0477 15.7148 16.0641 15.757 16.0641 15.8016C16.0641 15.9047 15.9797 15.9891 15.8766 15.9891Z",
-                fill: "#FF4D4F"
-              }
-            )
-          }
-        );
-      case "info":
-        return /* @__PURE__ */ jsxRuntimeExports.jsx(
-          "svg",
-          {
-            xmlns: "http://www.w3.org/2000/svg",
-            width: "24",
-            height: "24",
-            viewBox: "0 0 24 24",
-            fill: "none",
-            children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-              "path",
-              {
-                d: "M12 1.5C6.20156 1.5 1.5 6.20156 1.5 12C1.5 17.7984 6.20156 22.5 12 22.5C17.7984 22.5 22.5 17.7984 22.5 12C22.5 6.20156 17.7984 1.5 12 1.5ZM12.75 17.0625C12.75 17.1656 12.6656 17.25 12.5625 17.25H11.4375C11.3344 17.25 11.25 17.1656 11.25 17.0625V10.6875C11.25 10.5844 11.3344 10.5 11.4375 10.5H12.5625C12.6656 10.5 12.75 10.5844 12.75 10.6875V17.0625ZM12 9C11.7056 8.99399 11.4253 8.87282 11.2192 8.6625C11.0132 8.45218 10.8977 8.16945 10.8977 7.875C10.8977 7.58055 11.0132 7.29782 11.2192 7.0875C11.4253 6.87718 11.7056 6.75601 12 6.75C12.2944 6.75601 12.5747 6.87718 12.7808 7.0875C12.9868 7.29782 13.1023 7.58055 13.1023 7.875C13.1023 8.16945 12.9868 8.45218 12.7808 8.6625C12.5747 8.87282 12.2944 8.99399 12 9Z",
-                fill: "#1677FF"
-              }
-            )
-          }
-        );
-      case "warning":
-        return /* @__PURE__ */ jsxRuntimeExports.jsx(
-          "svg",
-          {
-            xmlns: "http://www.w3.org/2000/svg",
-            width: "24",
-            height: "24",
-            viewBox: "0 0 24 24",
-            fill: "none",
-            children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-              "path",
-              {
-                d: "M12 1.5C6.20156 1.5 1.5 6.20156 1.5 12C1.5 17.7984 6.20156 22.5 12 22.5C17.7984 22.5 22.5 17.7984 22.5 12C22.5 6.20156 17.7984 1.5 12 1.5ZM11.25 6.9375C11.25 6.83437 11.3344 6.75 11.4375 6.75H12.5625C12.6656 6.75 12.75 6.83437 12.75 6.9375V13.3125C12.75 13.4156 12.6656 13.5 12.5625 13.5H11.4375C11.3344 13.5 11.25 13.4156 11.25 13.3125V6.9375ZM12 17.25C11.7056 17.244 11.4253 17.1228 11.2192 16.9125C11.0132 16.7022 10.8977 16.4195 10.8977 16.125C10.8977 15.8305 11.0132 15.5478 11.2192 15.3375C11.4253 15.1272 11.7056 15.006 12 15C12.2944 15.006 12.5747 15.1272 12.7808 15.3375C12.9868 15.5478 13.1023 15.8305 13.1023 16.125C13.1023 16.4195 12.9868 16.7022 12.7808 16.9125C12.5747 17.1228 12.2944 17.244 12 17.25Z",
-                fill: "#FAAD14"
-              }
-            )
-          }
-        );
-    }
-  };
-  //! Function
-  //! Render
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(Modal, { ...restProps, footer: null, closeIcon: null, width: 400, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex gap-3", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(IconType, {}),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { className: "text-base font-semibold", children: title }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm", children: content })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex gap-2 w-full justify-end items-end pt-3", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { shape: "round", onClick: handleCancel, children: titleCancelBtn }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { shape: "round", type: "primary", onClick: handleSubmit, children: titleSubmitBtn })
-    ] })
-  ] }) });
-};
-
-var CATEGORY_LIST_ENUM = /* @__PURE__ */ ((CATEGORY_LIST_ENUM2) => {
-  CATEGORY_LIST_ENUM2[CATEGORY_LIST_ENUM2["DRAFT"] = 0] = "DRAFT";
-  CATEGORY_LIST_ENUM2[CATEGORY_LIST_ENUM2["WATING_APPROVAL"] = 1] = "WATING_APPROVAL";
-  CATEGORY_LIST_ENUM2[CATEGORY_LIST_ENUM2["ACTIVE"] = 2] = "ACTIVE";
-  CATEGORY_LIST_ENUM2[CATEGORY_LIST_ENUM2["INACTIVE"] = 3] = "INACTIVE";
-  CATEGORY_LIST_ENUM2[CATEGORY_LIST_ENUM2["REJECT"] = 4] = "REJECT";
-  CATEGORY_LIST_ENUM2[CATEGORY_LIST_ENUM2["DELETE"] = 5] = "DELETE";
-  return CATEGORY_LIST_ENUM2;
-})(CATEGORY_LIST_ENUM || {});
-
-const BulkAction = ({
-  quantity,
-  handleRestore,
-  handleSendApproval,
-  handleCancelSendApproval,
-  handleRefuseApproval,
-  handleApproval,
-  handleCancelApproval,
-  handleDelete,
-  handleActivate,
-  handleInActivate,
-  status
-}) => {
-  //! State
-  const listIcon = [
-    {
-      icon: /* @__PURE__ */ jsxRuntimeExports.jsx(RestoreIcon, { stroke: "white" }),
-      action: handleRestore,
-      showConfirmModal: false,
-      title: "Khôi phục",
-      arrShow: [CATEGORY_LIST_ENUM?.DELETE, CATEGORY_LIST_ENUM?.REJECT]
-    },
-    {
-      icon: /* @__PURE__ */ jsxRuntimeExports.jsx(SendApprovalIcon, { stroke: "white" }),
-      action: handleSendApproval,
-      showConfirmModal: true,
-      typeIcon: "info",
-      title: "Xác nhận gửi duyệt",
-      content: "Bạn có chắc chắn muốn gửi duyệt mục này không?",
-      arrShow: [CATEGORY_LIST_ENUM?.DRAFT]
-    },
-    {
-      icon: /* @__PURE__ */ jsxRuntimeExports.jsx(CancelSendApprovalIcon, { stroke: "white" }),
-      action: handleCancelSendApproval,
-      showConfirmModal: true,
-      typeIcon: "error",
-      title: "Xác nhận hủy gửi duyệt",
-      content: "Bạn có chắc chắn muốn hủy gửi duyệt mục này không?",
-      arrShow: [CATEGORY_LIST_ENUM?.WATING_APPROVAL]
-    },
-    {
-      icon: /* @__PURE__ */ jsxRuntimeExports.jsx(RefuseApprovalIcon, { stroke: "white" }),
-      action: handleRefuseApproval,
-      showConfirmModal: true,
-      typeIcon: "error",
-      title: "Xác nhận từ chối duyệt",
-      content: "Bạn có chắc chắn muốn từ chối duyệt mục này không? Hành động này không thể hoàn tác.",
-      arrShow: [CATEGORY_LIST_ENUM?.WATING_APPROVAL]
-    },
-    {
-      icon: /* @__PURE__ */ jsxRuntimeExports.jsx(ApprovalIcon, { stroke: "white" }),
-      action: handleApproval,
-      showConfirmModal: true,
-      typeIcon: "info",
-      title: "Xác nhận duyệt",
-      content: "Bạn có chắc chắn muốn duyệt mục này không?",
-      arrShow: [CATEGORY_LIST_ENUM?.WATING_APPROVAL]
-    },
-    {
-      icon: /* @__PURE__ */ jsxRuntimeExports.jsx(CancelApprovalIcon, { stroke: "white" }),
-      action: handleCancelApproval,
-      showConfirmModal: true,
-      typeIcon: "error",
-      title: "Xác nhận hủy duyệt",
-      content: "Bạn có chắc chắn muốn hủy duyệt mục này không?",
-      arrShow: [CATEGORY_LIST_ENUM?.ACTIVE]
-    },
-    {
-      icon: /* @__PURE__ */ jsxRuntimeExports.jsx(DeleteIcon, { fill: "white" }),
-      action: handleDelete,
-      showConfirmModal: true,
-      typeIcon: "error",
-      title: "Xác nhận xóa",
-      content: "Bạn có chắc chắn muốn xóa mục này không? Hành động này không thể hoàn tác.",
-      arrShow: [
-        CATEGORY_LIST_ENUM?.DRAFT,
-        CATEGORY_LIST_ENUM?.ACTIVE,
-        CATEGORY_LIST_ENUM?.INACTIVE
-      ]
-    },
-    {
-      icon: /* @__PURE__ */ jsxRuntimeExports.jsx(ActivateIcon, { stroke: "white" }),
-      action: handleActivate,
-      showConfirmModal: true,
-      typeIcon: "info",
-      title: "Xác nhận kích hoạt",
-      content: "Bạn có chắc chắn muốn kích hoạt mục này không?",
-      arrShow: [CATEGORY_LIST_ENUM?.INACTIVE]
-    },
-    {
-      icon: /* @__PURE__ */ jsxRuntimeExports.jsx(InActiveIcon, { stroke: "white" }),
-      action: handleInActivate,
-      showConfirmModal: true,
-      typeIcon: "info",
-      title: "Xác nhận vô hiệu hóa",
-      content: "Bạn có chắc chắn muốn vô hiệu hóa mục này không?",
-      arrShow: [CATEGORY_LIST_ENUM?.ACTIVE]
-    }
-  ];
-  const [open, setOpen] = useState(false);
-  const [notifyContent, setNotifyContent] = useState({
-    title: "",
-    content: "",
-    typeIcon: "info",
-    handleCancel: () => {
-    },
-    handleSubmit: () => {
-    }
-  });
-  //! Function
-  const IsShow = (arrStatus) => {
-    return arrStatus.includes(status);
-  };
-  //! Render
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-full flex justify-center items-center", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-3 px-[10px] py-3 bg-[#2561ED] rounded-lg w-fit", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-white px-3", children: [
-      "Đã chọn: ",
-      quantity
-    ] }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-5 border-l border-white mx-1" }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center space-x-3", children: listIcon.map(
-      (item, index) => IsShow(item?.arrShow) && /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip, { title: item?.title, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-        "button",
-        {
-          className: "p-1 rounded-sm  transition duration-200 cursor-pointer hover:bg-[#1B4ACB] hover:rounded-sm",
-          onClick: item?.showConfirmModal ? () => {
-            setOpen(true);
-            setNotifyContent({
-              title: item?.title || "",
-              content: item?.content || "",
-              typeIcon: item?.typeIcon,
-              handleCancel: () => {
-                setOpen(false);
-              },
-              handleSubmit: item?.action
-            });
-          } : item?.action,
-          children: item.icon
-        },
-        index
-      ) })
-    ) }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(
-      ConfirmModal,
-      {
-        title: notifyContent?.title,
-        content: notifyContent?.content,
-        typeIcon: notifyContent?.typeIcon,
-        open,
-        handleCancel: notifyContent?.handleCancel,
-        handleSubmit: notifyContent?.handleSubmit
-      }
-    )
-  ] }) });
-};
-
 class ErrorBoundaryClass extends Component {
   constructor(props) {
     super(props);