sprint-asia-custom-component 0.1.135 → 0.1.137

package/dist/index.js

@@ -26797,6 +26797,95 @@
     }, option))))));
   };
 
+  const FilterCheckboxDropdown = ({
+    options = [{
+      option: "Option 1",
+      value: "value 1"
+    }, {
+      option: "Option 2",
+      value: "value 2"
+    }, {
+      option: "Option 3",
+      value: "value 3"
+    }],
+    currentValue = [],
+    buttonText = "Filter",
+    onSelect
+  }) => {
+    const [isOpen, setIsOpen] = React.useState(false);
+    const [selectedOptions, setSelectedOptions] = React.useState([]);
+    const dropdownRef = React.useRef(null);
+
+    // Inisialisasi selectedOptions dengan currentValue saat pertama kali render
+    React.useEffect(() => {
+      setSelectedOptions(currentValue);
+    }, [currentValue]);
+    React.useEffect(() => {
+      const handleOutsideClick = event => {
+        if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+          setIsOpen(false);
+        }
+      };
+      if (isOpen) {
+        document.addEventListener('mousedown', handleOutsideClick);
+      }
+      return () => {
+        document.removeEventListener('mousedown', handleOutsideClick);
+      };
+    }, [isOpen]);
+    const handleToggleFilterCheckboxDropdown = () => {
+      setIsOpen(!isOpen);
+    };
+    const handleOptionClick = optionValue => {
+      const updatedOptions = selectedOptions.some(option => option.value === optionValue) ? selectedOptions.filter(selected => selected.value !== optionValue) : [...selectedOptions, options.find(option => option.value === optionValue)];
+      setSelectedOptions(updatedOptions);
+
+      // Menampilkan selectedOptions setelah setiap klik
+      console.log('Current selected options:', updatedOptions);
+      if (onSelect) {
+        onSelect(updatedOptions);
+      }
+    };
+    return /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "relative inline-block text-left",
+      ref: dropdownRef
+    }, /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("span", {
+      className: "rounded-md shadow-sm"
+    }, /*#__PURE__*/React__default["default"].createElement("button", {
+      type: "button",
+      className: "flex items-center w-60 py-2.5 text-left px-4 bg-neutral20 border-neutral50 font-normal text-sm text-neutral300 rounded-md border focus:outline-none",
+      onClick: handleToggleFilterCheckboxDropdown
+    }, /*#__PURE__*/React__default["default"].createElement("span", {
+      className: "flex-grow"
+    }, buttonText), /*#__PURE__*/React__default["default"].createElement("span", {
+      className: "ml-2"
+    }, isOpen ? /*#__PURE__*/React__default["default"].createElement(PiCaretUp, {
+      size: 16,
+      className: "text-neutral300"
+    }) : /*#__PURE__*/React__default["default"].createElement(PiCaretDown, {
+      size: 16,
+      className: "text-neutral300"
+    }))))), isOpen && /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "z-10 origin-top-right absolute left-0 mt-2 w-60 rounded-md shadow-md bg-white ring-1 ring-black ring-opacity-5 focus:outline-none",
+      role: "menu",
+      "aria-orientation": "vertical",
+      "aria-labelledby": "options-menu"
+    }, /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "px-1 py-2"
+    }, options.map(val => /*#__PURE__*/React__default["default"].createElement("div", {
+      key: val.value,
+      className: `hover:bg-neutral20 bg-white py-2.5 px-4 my-0.5 rounded-md flex items-center cursor-pointer ${selectedOptions.some(option => option.value === val.value) ? 'bg-primary500' : ''}`,
+      onClick: () => handleOptionClick(val.value)
+    }, /*#__PURE__*/React__default["default"].createElement("input", {
+      type: "checkbox",
+      className: "mr-2",
+      checked: selectedOptions.some(option => option.value === val.value),
+      onChange: () => handleOptionClick(val.value)
+    }), /*#__PURE__*/React__default["default"].createElement("p", {
+      className: `text-sm ${selectedOptions.some(option => option.value === val.value) ? 'text-primary500' : 'text-black'}`
+    }, val.option))))));
+  };
+
   const FilterText = ({
     options = ["Type", "Company"],
     onSelect
@@ -45422,6 +45511,7 @@
     totalCount = 0,
     currentPage = 1,
     totalPage = 10,
+    isLoading = false,
     onChangePages
   }) => {
     const pageNumbers = Array.from({
@@ -45436,23 +45526,23 @@
       className: "flex justify-between items-center"
     }, /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("p", {
       className: "text-sm text-black font-normal p-4"
-    }, "From ", firstData || 0, " to ", lastData || 0, " of total : ", totalCount || 0)), /*#__PURE__*/React__default["default"].createElement("div", {
+    }, "From ", isLoading ? 0 : firstData || 0, " to ", isLoading ? 0 : lastData || 0, " of total : ", isLoading ? 0 : totalCount || 0)), /*#__PURE__*/React__default["default"].createElement("div", {
       className: "flex px-4 py-2"
     }, /*#__PURE__*/React__default["default"].createElement("div", {
-      className: `m-1 w-10 h-10 rounded-full ${currentPage === 1 || firstData === 0 || lastData === 0 || totalCount === 0 || !firstData || !lastData || !totalCount ? 'bg-neutral20 cursor-default' : 'bg-white cursor-pointer border border-neutral40'} flex items-center justify-center`,
+      className: `m-1 w-10 h-10 rounded-full ${currentPage === 1 || firstData === 0 || lastData === 0 || totalCount === 0 || !firstData || !lastData || !totalCount || isLoading ? 'bg-neutral20 cursor-default' : 'bg-white cursor-pointer border border-neutral40'} flex items-center justify-center`,
       onClick: () => {
-        if (currentPage !== 1 || firstData > 0 || lastData > 0 || totalCount > 0) {
+        if (currentPage !== 1 && !isLoading) {
           handleChangePages(currentPage - 1);
         }
       }
     }, /*#__PURE__*/React__default["default"].createElement(PiCaretLeft, {
       size: 16,
       className: "text-neutral300"
-    })), totalPage < 4 ? pageNumbers.map(pageNumber => /*#__PURE__*/React__default["default"].createElement("div", {
+    })), totalPage < 4 && !isLoading ? pageNumbers.map(pageNumber => /*#__PURE__*/React__default["default"].createElement("div", {
       key: pageNumber,
       className: `m-1 w-10 h-10 rounded-full cursor-pointer ${currentPage === pageNumber ? 'bg-primary500 text-white' : 'bg-white text-black border border-neutral40'} flex items-center justify-center font-semibold`,
       onClick: () => handleChangePages(pageNumber)
-    }, /*#__PURE__*/React__default["default"].createElement("p", null, pageNumber))) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, currentPage == 1 && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
+    }, /*#__PURE__*/React__default["default"].createElement("p", null, pageNumber))) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, currentPage == 1 && !isLoading && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
       key: currentPage,
       className: "m-1 w-10 h-10 rounded-full bg-primary500 text-white cursor-pointer flex items-center justify-center font-semibold",
       onClick: () => handleChangePages(currentPage)
@@ -45467,7 +45557,7 @@
       key: totalPage,
       className: "m-1 w-10 h-10 rounded-full bg-white text-black border border-neutral40 cursor-pointer flex items-center justify-center font-semibold",
       onClick: () => handleChangePages(totalPage)
-    }, /*#__PURE__*/React__default["default"].createElement("p", null, totalPage))), currentPage > 1 && currentPage != totalPage - 1 && currentPage != totalPage && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
+    }, /*#__PURE__*/React__default["default"].createElement("p", null, totalPage))), currentPage > 1 && currentPage != totalPage - 1 && currentPage != totalPage && !isLoading && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
       key: currentPage - 1,
       className: "m-1 w-10 h-10 rounded-full bg-white text-black border border-neutral40 cursor-pointer flex items-center justify-center font-semibold",
       onClick: () => handleChangePages(currentPage - 1)
@@ -45482,7 +45572,7 @@
       key: totalPage,
       className: "m-1 w-10 h-10 rounded-full bg-white text-black border border-neutral40 cursor-pointer flex items-center justify-center font-semibold",
       onClick: () => handleChangePages(totalPage)
-    }, /*#__PURE__*/React__default["default"].createElement("p", null, totalPage))), currentPage == totalPage - 1 && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
+    }, /*#__PURE__*/React__default["default"].createElement("p", null, totalPage))), currentPage == totalPage - 1 && !isLoading && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
       key: totalPage - 2,
       className: "m-1 w-10 h-10 rounded-full bg-white text-black border border-neutral40 cursor-pointer flex items-center justify-center font-semibold",
       onClick: () => handleChangePages(totalPage - 2)
@@ -45497,7 +45587,7 @@
       key: totalPage,
       className: "m-1 w-10 h-10 rounded-full bg-white text-black border border-neutral40 cursor-pointer flex items-center justify-center font-semibold",
       onClick: () => handleChangePages(totalPage)
-    }, /*#__PURE__*/React__default["default"].createElement("p", null, totalPage))), currentPage == totalPage && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
+    }, /*#__PURE__*/React__default["default"].createElement("p", null, totalPage))), currentPage == totalPage && !isLoading && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
       key: totalPage - 2,
       className: "m-1 w-10 h-10 rounded-full bg-white text-black border border-neutral40 cursor-pointer flex items-center justify-center font-semibold",
       onClick: () => handleChangePages(totalPage - 2)
@@ -45513,9 +45603,9 @@
       className: "m-1 w-10 h-10 rounded-full bg-primary500 text-white cursor-pointer flex items-center justify-center font-semibold",
       onClick: () => handleChangePages(currentPage)
     }, /*#__PURE__*/React__default["default"].createElement("p", null, currentPage)))), /*#__PURE__*/React__default["default"].createElement("div", {
-      className: `m-1 w-10 h-10 rounded-full ${currentPage === totalPage || firstData === 0 || lastData === 0 || totalCount === 0 || !firstData || !lastData || !totalCount ? 'bg-neutral20 cursor-default' : 'bg-white cursor-pointer border border-neutral40'} flex items-center justify-center`,
+      className: `m-1 w-10 h-10 rounded-full ${currentPage === totalPage || firstData === 0 || lastData === 0 || totalCount === 0 || !firstData || !lastData || !totalCount || isLoading ? 'bg-neutral20 cursor-default' : 'bg-white cursor-pointer border border-neutral40'} flex items-center justify-center`,
       onClick: () => {
-        if (currentPage !== totalPage || firstData > 0 || lastData > 0 || totalCount > 0) {
+        if (currentPage !== totalPage && firstData > 0 && lastData > 0 && totalCount > 0 && !isLoading) {
           handleChangePages(currentPage + 1);
         }
       }
@@ -47745,7 +47835,10 @@
       className: `${input ? "border-black" : "border-neutral50"} relative cursor-pointer border-t border-b border-l rounded-tl-md rounded-bl-md`,
       onClick: () => setIsOpen(!isOpen)
     }, /*#__PURE__*/React__default["default"].createElement("div", {
-      className: "flex items-center bg-white rounded-tl-md rounded-bl-md min-w-36"
+      className: "flex items-center bg-white rounded-tl-md rounded-bl-md",
+      style: {
+        minWidth: "144px"
+      }
     }, /*#__PURE__*/React__default["default"].createElement("p", {
       className: "flex items-center w-full py-2.5 text-left pl-4 pr-4 bg-white rounded-md font-bold text-sm text-neutral300"
     }, filterDropdown.option), isOpen ? /*#__PURE__*/React__default["default"].createElement(PiCaretUp, null) : /*#__PURE__*/React__default["default"].createElement(PiCaretDown, null), /*#__PURE__*/React__default["default"].createElement("p", {
@@ -48771,6 +48864,7 @@
   exports.EmptyData = EmptyData;
   exports.ExportToExcel = ExportToExcel;
   exports.FilterCheckbox = FilterCheckbox;
+  exports.FilterCheckboxDropdown = FilterCheckboxDropdown;
   exports.FilterDropdown = FilterDropdown;
   exports.FilterText = FilterText;
   exports.Footer = Footer;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "sprint-asia-custom-component",
   "main": "dist/index.js",
-  "version": "0.1.135",
+  "version": "0.1.137",
   "private": false,
   "dependencies": {
     "@headlessui/react": "^1.7.18",

package/src/components/filter/filterCheckboxDropdown/index.js

@@ -0,0 +1,109 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { PiCaretDown, PiCaretUp } from 'react-icons/pi';
+
+const FilterCheckboxDropdown = ({ 
+    options = [
+        { option: "Option 1", value: "value 1" },
+        { option: "Option 2", value: "value 2" },
+        { option: "Option 3", value: "value 3" },
+    ], 
+    currentValue = [],
+    buttonText = "Filter",
+    onSelect 
+}) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const [selectedOptions, setSelectedOptions] = useState([]);
+    const dropdownRef = useRef(null);
+
+    // Inisialisasi selectedOptions dengan currentValue saat pertama kali render
+    useEffect(() => {
+        setSelectedOptions(currentValue);
+    }, [currentValue]);
+
+    useEffect(() => {
+        const handleOutsideClick = (event) => {
+            if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+                setIsOpen(false);
+            }
+        };
+
+        if (isOpen) {
+            document.addEventListener('mousedown', handleOutsideClick);
+        }
+
+        return () => {
+            document.removeEventListener('mousedown', handleOutsideClick);
+        };
+    }, [isOpen]);
+
+    const handleToggleFilterCheckboxDropdown = () => {
+        setIsOpen(!isOpen);
+    };
+
+    const handleOptionClick = (optionValue) => {
+        const updatedOptions = selectedOptions.some(option => option.value === optionValue)
+            ? selectedOptions.filter((selected) => selected.value !== optionValue)
+            : [...selectedOptions, options.find(option => option.value === optionValue)];
+
+        setSelectedOptions(updatedOptions);
+
+        // Menampilkan selectedOptions setelah setiap klik
+        console.log('Current selected options:', updatedOptions);
+
+        if (onSelect) {
+            onSelect(updatedOptions);
+        }
+    };
+
+    return (
+        <div className='relative inline-block text-left' ref={dropdownRef}>
+            <div>
+                <span className='rounded-md shadow-sm'>
+                    <button
+                        type='button'
+                        className="flex items-center w-60 py-2.5 text-left px-4 bg-neutral20 border-neutral50 font-normal text-sm text-neutral300 rounded-md border focus:outline-none"
+                        onClick={handleToggleFilterCheckboxDropdown}
+                    >
+                        <span className='flex-grow'>{buttonText}</span>
+                        <span className='ml-2'>
+                            {isOpen ? <PiCaretUp size={16} className='text-neutral300' /> : <PiCaretDown size={16} className='text-neutral300' />}
+                        </span>
+                    </button>
+                </span>
+            </div>
+
+            {isOpen && (
+                <div
+                    className='z-10 origin-top-right absolute left-0 mt-2 w-60 rounded-md shadow-md bg-white ring-1 ring-black ring-opacity-5 focus:outline-none'
+                    role='menu'
+                    aria-orientation='vertical'
+                    aria-labelledby='options-menu'
+                >
+                    <div className='px-1 py-2'>
+                        {options.map((val) => (
+                            <div
+                                key={val.value}
+                                className={`hover:bg-neutral20 bg-white py-2.5 px-4 my-0.5 rounded-md flex items-center cursor-pointer ${
+                                    selectedOptions.some(option => option.value === val.value) ? 'bg-primary500' : ''
+                                }`}
+                                onClick={() => handleOptionClick(val.value)}
+                            >
+                                <input
+                                    type='checkbox'
+                                    className='mr-2'
+                                    checked={selectedOptions.some(option => option.value === val.value)}
+                                    onChange={() => handleOptionClick(val.value)}
+                                />
+                                <p className={`text-sm ${selectedOptions.some(option => option.value === val.value) ? 'text-primary500' : 'text-black'}`}>
+                                    {val.option}
+                                </p>
+                            </div>
+                        ))}
+                    </div>
+                </div>
+            )}
+        </div>
+    );
+};
+
+export default FilterCheckboxDropdown;

package/src/components/searchdropdown/index.js

@@ -41,7 +41,7 @@ const SearchDropdown = ({
           } relative cursor-pointer border-t border-b border-l rounded-tl-md rounded-bl-md`}
           onClick={() => setIsOpen(!isOpen)}
         >
-          <div className="flex items-center bg-white rounded-tl-md rounded-bl-md min-w-36">
+          <div className="flex items-center bg-white rounded-tl-md rounded-bl-md" style={{minWidth:"144px"}}>
             <p className="flex items-center w-full py-2.5 text-left pl-4 pr-4 bg-white rounded-md font-bold text-sm text-neutral300">
               {filterDropdown.option}
             </p>

package/src/components/table/pagination/index.js

@@ -7,6 +7,7 @@ const Pagination = ({
     totalCount = 0, 
     currentPage = 1, 
     totalPage = 10,
+    isLoading = false,
     onChangePages
 }) => {
   const pageNumbers = Array.from({ length: totalPage }, (_, index) => index + 1);
@@ -20,25 +21,25 @@ const Pagination = ({
       <div className='flex justify-between items-center'>
         <div>
             <p className='text-sm text-black font-normal p-4'>
-                From {firstData || 0} to {lastData || 0} of total : {totalCount || 0}
+                From {isLoading ? 0 : firstData || 0} to {isLoading ? 0 : lastData || 0} of total : {isLoading ? 0 : totalCount || 0}
             </p>
         </div>
         <div className='flex px-4 py-2'>
         <div
             className={`m-1 w-10 h-10 rounded-full ${
-                (currentPage === 1 || firstData === 0 || lastData === 0 || totalCount === 0 || !firstData || !lastData || !totalCount)
+                (currentPage === 1 || firstData === 0 || lastData === 0 || totalCount === 0 || !firstData || !lastData || !totalCount || isLoading)
                     ? 'bg-neutral20 cursor-default'
                     : 'bg-white cursor-pointer border border-neutral40'
             } flex items-center justify-center`}
             onClick={() => {
-                if (currentPage !== 1 || firstData > 0 || lastData > 0 || totalCount > 0) {
+                if (currentPage !== 1 && !isLoading) {
                     handleChangePages(currentPage - 1);
                 }
             }}
         >
             <PiCaretLeft size={16} className='text-neutral300' />
         </div>
-            {totalPage < 4 ?
+            {totalPage < 4 && !isLoading ?
                 pageNumbers.map((pageNumber) => (
                     <div
                         key={pageNumber}
@@ -55,7 +56,7 @@ const Pagination = ({
                 :
                 <>
                     {
-                        currentPage == 1 && (
+                        currentPage == 1 && !isLoading && (
                             <>
                                 <div
                                     key={currentPage}
@@ -88,7 +89,7 @@ const Pagination = ({
                         )
                     }
                     {
-                        (currentPage > 1 && currentPage != totalPage - 1 && currentPage != totalPage) && (
+                        (currentPage > 1 && currentPage != totalPage - 1 && currentPage != totalPage) && !isLoading && (
                             <>
                                 <div
                                     key={currentPage - 1}
@@ -121,7 +122,7 @@ const Pagination = ({
                         )
                     }
                     {
-                        (currentPage == totalPage - 1) && (
+                        (currentPage == totalPage - 1) && !isLoading && (
                             <>
                                 <div
                                     key={totalPage - 2}
@@ -154,7 +155,7 @@ const Pagination = ({
                         )
                     }
                     {
-                        (currentPage == totalPage) && (
+                        (currentPage == totalPage) && !isLoading && (
                             <>
                                 <div
                                     key={totalPage - 2}
@@ -190,12 +191,12 @@ const Pagination = ({
             }
             <div
                 className={`m-1 w-10 h-10 rounded-full ${
-                (currentPage === totalPage || firstData === 0 || lastData === 0 || totalCount === 0 || !firstData || !lastData || !totalCount)
+                (currentPage === totalPage || firstData === 0 || lastData === 0 || totalCount === 0 || !firstData || !lastData || !totalCount || isLoading)
                     ? 'bg-neutral20 cursor-default'
                     : 'bg-white cursor-pointer border border-neutral40'
                 } flex items-center justify-center`}
                 onClick={() => {
-                    if (currentPage !== totalPage || firstData > 0 || lastData > 0 || totalCount > 0) {
+                    if (currentPage !== totalPage && firstData > 0 && lastData > 0 && totalCount > 0 && !isLoading) {
                         handleChangePages(currentPage + 1)
                     }
                 }}

package/src/index.js

@@ -48,6 +48,7 @@ import EmptyData from "./components/emptystate/table/emptydata";
 import NotFound from "./components/emptystate/table/notfound";
 import ExportToExcel from "./components/export/excel";
 import FilterCheckbox from "./components/filter/filterCheckbox";
+import FilterCheckboxDropdown from "./components/filter/filterCheckboxDropdown";
 import FilterText from "./components/filter/filterText";
 import Menu from "./components/menu";
 import ModalLoading from "./components/modal/modalLoading";
@@ -123,6 +124,7 @@ export {
   Menu,
   FilterText,
   FilterCheckbox,
+  FilterCheckboxDropdown,
   ExportToExcel,
   NotFound,
   EmptyData,

package/src/templates/index.js

@@ -61,6 +61,7 @@ import CellModelSix from "../components/table/listTable/cellmodesix";
 import CellModelSeven from "../components/table/listTable/cellmodelseven";
 import CustomPhone from "../components/customphone";
 import DescriptionFile from "../components/description/file";
+import FilterCheckboxDropdown from "../components/filter/filterCheckboxDropdown";
 
 const Templates = () => {
   const [startDate, setStartDate] = useState(null);
@@ -828,6 +829,7 @@ const Templates = () => {
   });
 
   const [searchFilter, setSearchFilter] = useState();
+  const [valueSelectFilter, setValueSelectFilter] = useState([]);
   const [filterDropdown, setFilterDropdown] = useState({
     option: "duar",
     value: "dfdsf",
@@ -1171,6 +1173,27 @@ const Templates = () => {
       <div className="m-9"></div>
       <FilterText options={["Option 1", "Option 2", "Option 3"]} onSelect={handleSelect} />
 
+      <div className="m-9"></div>
+      <FilterCheckboxDropdown 
+        options={[
+          {
+            option : "Option1",
+            value : "value 1"
+          },
+          {
+            option : "Option2",
+            value : "value 2"
+          },
+        ]}
+        buttonText="Division"
+        currentValue={valueSelectFilter}
+        onSelect={setValueSelectFilter} 
+      />
+
+      {
+        console.log("ini value select", valueSelectFilter)
+      }
+
       <div className="m-9"></div>
       <FilterDropdown
         options={[
@@ -1523,6 +1546,23 @@ const Templates = () => {
         totalPage={null}
         onChangePages={(page) => setCurrentPage(page)}
       />
+      <Pagination
+        firstData={0}
+        lastData={0}
+        totalCount={0}
+        currentPage={1}
+        totalPage={0}
+        onChangePages={(page) => setCurrentPage(page)}
+      />
+      <Pagination
+        firstData={(currentPage - 1) * 10 + 1}
+        lastData={currentPage * 10 > totalCount ? totalCount : currentPage * 10}
+        totalCount={totalCount}
+        currentPage={currentPage}
+        totalPage={totalPage}
+        isLoading
+        onChangePages={(page) => setCurrentPage(page)}
+      />
 
       <div className="m-9"></div>
       <p className="text-black font-bold text-2xl text-center py-2">Text Input</p>