aside settings btn fixed

src/components/Icons.jsx

@@ -11,7 +11,7 @@ import { LuPanelRight } from "react-icons/lu";
 import { FcGoogle } from "react-icons/fc";
 import { IoLogoApple } from "react-icons/io5";
 import { FcSalesPerformance } from "react-icons/fc";
-
+import { FaLongArrowAltRight } from "react-icons/fa";
 
 export default function Icons({name, className}) {
   return (
@@ -48,6 +48,8 @@ export default function Icons({name, className}) {
     <IoLogoApple className={`text-base ${className}`} />
     :name.toLowerCase() == 'sales' ?
     <FcSalesPerformance className={`text-base ${className}`} />
+    :name.toLowerCase() == 'arrow-right' ?
+    <FaLongArrowAltRight className={`text-base ${className}`} />
     :
     null
     }

src/components/breadcrumb/BreadcrumbCom.jsx

@@ -25,7 +25,7 @@ export default function BreadcrumbCom({title, span, paths}) {
 
   return (
     // ${stickNav ? 'sticky top-0 transition-[top] duration-1000 shadow-md shadow-black' : '-top-[100px] static'}
-    <div className={`sticky -top-10 bg-white-body dark:bg-black-body dark:border-b dark:border-black-box dark:shadow-sm dark:shadow-black-box`}>
+    <div className={`sticky z-[999] -top-10 bg-white-body dark:bg-black-body dark:border-b dark:border-black-box dark:shadow-sm dark:shadow-black-box`}>
       <div className= {`w-full py-2 flex justify-between items-center`}>
         <div className='flex flex-col gap-2'>
           <div className='flex flex-col md:flex-row gap-1 md:items-center'>

src/components/layouts/DashboardHeader.jsx

@@ -5,7 +5,7 @@ import { generalLayoutContext } from "../../context/GeneralLayoutContext"
 
 import UserAvatar from '../../assets/user_avatar.jpg'
 import HandBurger from "./HandBurger"
-import { Link } from "react-router-dom"
+import { Link, useLocation } from "react-router-dom"
 import RouteLinks from "../../RouteLinks"
 import { useState } from "react";
 import MainBtn from "../MainBtn";
@@ -14,6 +14,8 @@ import Icons from "../Icons";
 
 export default function DashboardHeader() {
 
+    let {pathname} = useLocation()
+
     const {theme, handleTheme, setLogoutModal, activeMenu, handleActiveMenu, showAsideDrawer, setShowAsideDrawer} = generalLayoutContext()
 
   return (
@@ -33,9 +35,13 @@ export default function DashboardHeader() {
                         <i className="fa-solid fa-wallet text-xl"></i>
                     </Link>
 
+                    {/* RIGHT DRAWER BUTTON */}
+                    {pathname == '/' &&
                      <div onClick={()=>setShowAsideDrawer('right-aside')} className='large:hidden  w-10 h-10 border border-slate-300 text-slate-500 dark:text-white-body rounded-md px-2 flex justify-center items-center gap-2 cursor-pointer' title='Switch Color Mode'>
                         <Icons name='right-panel' className="text-sm md:text-xl font-bold" />
                     </div>
+                    }
+
                      {/* MESSAGE */}
                      {/* <button onClick={()=>handleDrawer(drawerName.chat)} className="relative px-2 flex justify-center items-center gap-2 cursor-pointer">
                         <i className="fa-regular fa-envelope text-xl"></i>
@@ -54,7 +60,7 @@ export default function DashboardHeader() {
                     <div onClick={()=>handleActiveMenu('avatar')} className='relative cursor-pointer w-10 h-10 rounded shadow-round_black dark:shadow-round_white'>
                         <img src={UserAvatar} alt='user avatar' className='w-full h-full p-1 rounded-full' />
                         {activeMenu == 'avatar' &&
-                            <div className="pop-modal z-[777] absolute p-4 w-52 sm:w-96 bg-white-body dark:bg-black-box right-0 top-16 rounded shadow-round_black dark:shadow-round_white">
+                            <div className="pop-modal z-[777] absolute p-4 w-52 sm:w-96 bg-white dark:bg-black-box right-0 top-16 rounded shadow-round_black dark:shadow-round_white">
                                 <div className="w-full h-full flex flex-col gap-4">
                                     <div className="flex flex-col text-black dark:text-white text-base sm:text-lg">
                                         <h1 className="font-semibold">Username</h1>

src/components/layouts/DashboardLayout.jsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react'
-import { Outlet } from 'react-router-dom'
+import { Outlet, useLocation } from 'react-router-dom'
 
 import DashboardHeader from './DashboardHeader'
 import { generalLayoutContext } from '../../context/GeneralLayoutContext'
@@ -8,6 +8,8 @@ import RightAsideBar from './rightaside/RightAsideBar'
 
 export default function DashboardLayout() {
 
+    let {pathname} = useLocation()
+
   const {showAsideDrawer, setShowAsideDrawer} = generalLayoutContext()
   
   return (
@@ -26,7 +28,7 @@ export default function DashboardLayout() {
             </div>
         </div>
 
-        <div className='main w-full bg-inherit large:mr-[400px]'>
+        <div className={`main w-full bg-inherit ${pathname == '/' && 'large:mr-[400px]'}`}>
             <div className='fixed top-0 left-0 z-[777] w-full px-8 bg-inherit lg:hidden'>
                 <DashboardHeader />
             </div> 
@@ -43,15 +45,19 @@ export default function DashboardLayout() {
         </div>
 
         {/* Right Aisde */}
-        <div className={`px-8 py-4 hidden large:flex fixed right-5 top-0 bottom-0 sm:w-[400px] bg-[#192440] dark:bg-[#1E1E2D] text-white-body`}>
-            <RightAsideBar />
-        </div>
-        <div className={`${showAsideDrawer =='right-aside' ? 'right-0 w-full' : '-right-full w-0'} fixed inset-0 z-[999] large:hidden bg-[rgba(0,_0,_0,_0.2)] dark:bg-[rgba(0,_0,_0,_0.4)] transition-all cursor-pointer`} onClick={()=>setShowAsideDrawer('')}>
-            {/* <div className={`${showAsideDrawer =='right-aside' ? 'right-0' : '-right-full'} fixed z-[999] right-0 top-0 inset-0 w-full bg-white/20 bg-red-400 transition-all cursor-pointer`} onClick={()=>setShowAsideDrawer('')} ></div> */}
-            <div onClick={(e)=>e.stopPropagation()} className={`${showAsideDrawer =='right-aside' ? 'right-0' : '-right-full'} fixed z-[999] top-0 botom-0 px-8 py-4 h-full w-4/5 sm:w-[400px] bg-[#192440] dark:bg-[#1E1E2D] text-white-body`}>
+        {pathname == '/' &&
+        <>
+            <div className={`px-8 py-4 hidden large:flex fixed right-5 top-0 bottom-0 sm:w-[400px] bg-[#192440] dark:bg-[#1E1E2D] text-white-body`}>
                 <RightAsideBar />
             </div>
-        </div>
+            <div className={`${showAsideDrawer =='right-aside' ? 'right-0 w-full' : '-right-full w-0'} fixed inset-0 z-[999] large:hidden bg-[rgba(0,_0,_0,_0.2)] dark:bg-[rgba(0,_0,_0,_0.4)] transition-all cursor-pointer`} onClick={()=>setShowAsideDrawer('')}>
+                {/* <div className={`${showAsideDrawer =='right-aside' ? 'right-0' : '-right-full'} fixed z-[999] right-0 top-0 inset-0 w-full bg-white/20 bg-red-400 transition-all cursor-pointer`} onClick={()=>setShowAsideDrawer('')} ></div> */}
+                <div onClick={(e)=>e.stopPropagation()} className={`${showAsideDrawer =='right-aside' ? 'right-0' : '-right-full'} fixed z-[999] top-0 botom-0 px-8 py-4 h-full w-4/5 sm:w-[400px] bg-[#192440] dark:bg-[#1E1E2D] text-white-body`}>
+                    <RightAsideBar />
+                </div>
+            </div>
+        </>
+        }
     </div>
   )
 }

src/components/layouts/aside/AsideLinkWithSubLinks.jsx

@@ -18,13 +18,13 @@ export default function AsideLinkWithSubLinks({name, icon, to, children, isOpen}
 
   return (
     <div 
-        className={`w-full px-4 py-2 my-1 text-[13px] sm:text-sm font-semibold rounded`} 
+        className={`w-full px-4 py-2 my-1 text-[13px] sm:text-sm font-semibold rounded overflow-hidden`} 
     >   
         <button onClick={()=>setHideSubMenu(prev => !prev)} name={name} className="py-2 w-full flex items-center justify-between gap-2 cursor-pointer text-slate-500 dark:text-white-body/90">
             <span className="flex gap-2 items-center">{icon && <Icons name={icon} />}{shrinkAside ? '' : name}</span>
             <FaCaretDown className={`text-base ${(hideSubMenu) ? 'rotate-180' : 'rotate-0'}`} />
         </button>
-        <div className={`w-full ${(hideSubMenu) ? 'block' : 'hidden'}`}>
+        <div className={`w-full ${(hideSubMenu) ? 'opacity-100 min-h-72' : 'opacity-0 h-0'} transition-all duration-500`}>
             {children}
         </div>
     </div>

src/components/layouts/aside/DashboardAside.jsx

@@ -38,11 +38,6 @@ export default function DashboardAside() {
                     )
                 }
                 if(active && hasSubLinks){
-                    // let subLinkList = link.subLinks.filter(value => value.to).map(item => { //any of all open
-                    //     if(item.to){
-                    //         return item.to
-                    //     }
-                    // })
                     let subLinkList = []
                     link.subLinks.forEach(item =>{
                         if(item.to){
@@ -53,13 +48,12 @@ export default function DashboardAside() {
                             })
                         }
                     })
-                    // console.log('subLinkList', subLinkList)
                     return (
                     <div key={index} className="w-full">
                         {link.title &&
                             <h1 className="px-4 py-2 text-sm sm:text-sm text-slate-500 dark:text-white font-semibold uppercase mt-3 mb-1 border-b border-slate-800">{link.title}</h1>
                         }
-                        <AsideLinkWithSubLinks name={link.name} icon={link.icon} isOpen={subLinkList.includes(pathname)} >
+                        <AsideLinkWithSubLinks name={link.name} icon={link.icon} isOpen={subLinkList.includes(pathname) || index==1} >
                             <>
                             {link.subLinks.map((subItem, index)=>{
                                 let active = subItem.status == 1 ? true : false
@@ -105,7 +99,7 @@ export default function DashboardAside() {
         </div>
 
         <div className='py-2 mt-4 relative'>
-            <div className="w-full flex items-center gap-2">
+            <div className="group w-full flex items-center gap-2">
                 <div className="w-full flex items-center gap-2">
                     <img src={UserAvatar} alt='user avatar' className='w-12 h-12 p-1 rounded-full' />
                     <div>
@@ -113,12 +107,10 @@ export default function DashboardAside() {
                         <p className="text-12 text-black-box/90 dark:text-white-body/80">username@gmail.com</p>
                     </div>
                 </div>
-                <button onClick={()=>handleActiveMenu('settings')}  className="text-slate-500 dark:text-white-body">
+                <button onClick={()=>handleActiveMenu('settings')}  className="peer text-slate-500 dark:text-white-body">
                     <Icons name='settings' className='text-3xl' />
                 </button>
-            </div>
-            {activeMenu == 'settings' &&
-                <div className="pop-modal-down absolute p-4 w-full bg-white-body dark:bg-black-box left-0 bottom-[60%] rounded shadow-round_black dark:shadow-round_white">
+                <div className="hidden group-hover:block pop-modal-down absolute p-4 w-full bg-white dark:bg-black-box left-0 bottom-[60%] rounded shadow-round_black dark:shadow-round_white">
                     <div className="w-full min-h-48 flex flex-col justify-between gap-4">
                         <div className="w-full h-full">
                             <div className="flex flex-col text-black dark:text-white text-base sm:text-lg">
@@ -137,7 +129,7 @@ export default function DashboardAside() {
                         </div>
                     </div>
                 </div>
-            }
+            </div>
         </div>
     </div>
   )
@@ -145,13 +137,13 @@ export default function DashboardAside() {
 
 const asideNavLinks = [
     {name:'Dashboard', status:1, icon: 'dashboard', to: RouteLinks.homePage},
-    {name:'Salary Loan', title:'Loan', status:1, icon: 'money', subLinks: [
+    {name:'Salary Loan', title:'Loan', status:1, icon: 'arrow-right', subLinks: [
         {name: 'Selected Loans', status:1, icon: 'dot', to: RouteLinks.selectedLoanPage},
         {name: 'Applications', status:1, icon: 'dot', to: RouteLinks.applicationsLoanPage},
         {name: 'Approved Loans', status:1, icon: 'dot', to: RouteLinks.approvedLoansPage},
         {name: 'Disbursements', status:1, icon: 'dot', to: RouteLinks.disbursementsLoanPage},
         {name: 'Payments', status:1, icon: 'dot', to: ''},
-        {name: 'Configurations', status:1, icon: 'dot', subLinks: [
+        {name: 'Configurations', status:1, icon: 'arrow-right', subLinks: [
             {name: 'Loan Offers', status:1, icon: 'dot', to: RouteLinks.loanOffersPage },
             ]
         },

src/components/layouts/rightaside/RightAsideBar.jsx

@@ -8,7 +8,7 @@ export default function RightAsideBar() {
 
     let [active, setActive] = useState('orders')
 
-    const handleActiveMenu = ({target:{name}}) => {
+    const handleActiveMenu = (name) => {
         let lowerStr = name.toLowerCase()
         setActive(lowerStr)
     }
@@ -17,13 +17,13 @@ export default function RightAsideBar() {
     <div className='w-full h-full flex flex-col gap-8'>
         {/* Menu */}
         <div className='grid grid-cols-3 gap-8'>
-            <button name='orders' onClick={(e) => handleActiveMenu(e)} className={`flex justify-center items-center px-2 py-3 large:px-4 large:py-5 rounded-md shadow-round_white bg-[#0E172E] text-white-body hover:scale-[1.1] ${active == 'orders' && 'scale-[1.2]'}`}>
+            <button name='orders' onClick={() => handleActiveMenu('orders')} className={`flex justify-center items-center px-2 py-3 large:px-4 large:py-5 rounded-md shadow-round_white bg-[#0E172E] text-white-body hover:scale-[1.1] ${active == 'orders' && 'scale-[1.2]'}`}>
                 <Icons name='dashboard' className='text-3xl' />
             </button>
-            <button name='tickets' onClick={(e) => handleActiveMenu(e)} className={`flex justify-center items-center px-2 py-3 large:px-4 large:py-5 rounded-md shadow-round_white bg-[#0E172E] text-white-body hover:scale-[1.1] ${active == 'tickets' && 'scale-[1.2]'}`}>
+            <button name='tickets' onClick={() => handleActiveMenu('tickets')} className={`flex justify-center items-center px-2 py-3 large:px-4 large:py-5 rounded-md shadow-round_white bg-[#0E172E] text-white-body hover:scale-[1.1] ${active == 'tickets' && 'scale-[1.2]'}`}>
                 <Icons name='settings' className='text-3xl' />
             </button>
-            <button name='tasks' onClick={(e) => handleActiveMenu(e)} className={`flex justify-center items-center px-2 py-3 large:px-4 large:py-5 rounded-md shadow-round_white bg-[#0E172E] text-white-body hover:scale-[1.1] ${active == 'tasks' && 'scale-[1.2]'}`}>
+            <button name='tasks' onClick={() => handleActiveMenu('tasks')} className={`flex justify-center items-center px-2 py-3 large:px-4 large:py-5 rounded-md shadow-round_white bg-[#0E172E] text-white-body hover:scale-[1.1] ${active == 'tasks' && 'scale-[1.2]'}`}>
                 <Icons name='dashboard' className='text-3xl' />
             </button>
         </div>

src/components/selectedloancom/SelectedLoanCom.jsx

@@ -25,88 +25,88 @@ export default function SelectedLoanCom() {
         <div className='w-full flex flex-col gap-8'>
             <BreadcrumbCom title='Selected - ' span='Loan options selected by the users before applying' paths={['Dashboard', 'Selected']} />
 
-            {isFetching ? 
-              <>
-                  <div className="w-full py-4">
+            <div className='box bg-white dark:bg-black-box text-black-body dark:text-white-body'>
+                {isFetching ? 
+                <>
                     <p className='text-slate-800'>Loading...</p>
-                  </div>
-              </>
-              : isError ?
-                <div className="w-full py-4">
+                </>
+                : isError ?
                     <p className='text-red-500'>{error.message}</p>
-                </div>
-              :
-                <TableWrapper data={selectUsers} itemsPerPage={15}>
-                {({ data }) => (
-                    <>
-                        <table className="py-2 w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
-                            <thead className="text-sm md:text-base text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
-                                <tr>
-                                    <th scope="col" className="px-4 py-2">
-                                        Name
-                                    </th>
-                                    <th scope="col" className="px-4 py-2">
-                                        Loan
-                                    </th>
-                                    <th scope="col" className="px-4 py-2">
-                                        Added
-                                    </th>
-                                    <th scope="col" className="px-4 py-2">
-                                        Action
-                                    </th>
-                                </tr>
-                            </thead>
-                            <tbody>
-                                {(data && data.length > 0) ? data?.map((item, index) => (
-                                    <tr key={index} className="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
-                                        <th scope="row" className="mr-4 flex items-center px-3 py-2 text-gray-900 whitespace-nowrap dark:text-white">
-                                            <img className="w-10 h-10 rounded-full" src={Avatar} alt="Jese image" />
-                                            <div className="px-3">
-                                                <div className="text-base font-semibold">{item?.name || ''}</div>
-                                                <div className="font-normal text-gray-500">{item?.bvn}</div>
-                                            </div>  
+                :
+                    <TableWrapper data={selectUsers} itemsPerPage={15}>
+                    {({ data }) => (
+                        <>
+                            <table className="py-2 w-full text-sm">
+                                <thead className="py-2 text-sm text-slate-500 text-left">
+                                    <tr>
+                                        <th scope="col" className="px-2 py-2">
+                                            Name
                                         </th>
-                                        <td className="px-3 py-2">
-                                            {item?.loan} - {item?.description}
-                                        </td>
-                                        <td className="px-3 py-2">
-                                            <div className="flex items-center">
-                                            {getDateFromDateString(item?.added)} {getTimeFromDateString(item?.added)}
+                                        <th scope="col" className="px-2">
+                                            Loan
+                                        </th>
+                                        <th scope="col" className="px-2">
+                                            Added
+                                        </th>
+                                        <th scope="col" className="px-2 text-right">
+                                            Action
+                                        </th>
+                                    </tr>
+                                </thead>
+                                <tbody>
+                                    {(data && data.length > 0) ? data?.map((item, index) => (
+                                        <tr className="py-2 border-t border-dashed border-slate-300">
+                                            <td className="px-2 py-2">
+                                                <div className='w-full min-w-48 flex items-center gap-2 whitespace-nowrap'>
+                                                <img className="w-10 h-10 rounded-md" src={Avatar} alt="Jese image" />
+                                                <div className="text-left">
+                                                    <div className="text-base font-semibold">{item?.name || ''}</div>
+                                                    <div className="font-normal text-gray-500">{item?.bvn}</div>
+                                                </div>  
+                                                </div>
+                                            </td>
+                                            <td className="px-2">
+                                                <div className="text-left">
+                                                    <div className="text-base font-semibold">{item?.loan}</div>
+                                                    <div className="font-normal text-gray-500">{item?.description}</div>
+                                                </div> 
+                                            </td>
+                                            <td className="px-2">
+                                                <div className="text-left">
+                                                    <div className="font-normal text-gray-500">{getDateFromDateString(item?.added)} {getTimeFromDateString(item?.added)}</div>
+                                                </div> 
+                                            </td>
+                                            <td className="px-2 text-right">
+                                                <div className='flex items-center justify-end gap-3 md:gap-4'>
+                                                <div className='p-2 flex justify-center items-center text-slate-500 bg-white-body dark:text-white-body dark:bg-black-body rounded-md'>
+                                                    <Icons name='edit' />
+                                                </div>
+                                                <div className='p-2 flex justify-center items-center text-slate-500 bg-white-body dark:text-white-body dark:bg-black-body rounded-md'>
+                                                    <Icons name='eye' />
+                                                </div>
+                                                <div className='p-2 flex justify-center items-center text-slate-500 bg-white-body dark:text-white-body dark:bg-black-body rounded-md'>
+                                                    <Icons name='trash' />
+                                                </div>
+                                                </div>
+                                            </td>
+                                        </tr>
+                                    ))
+                                    :
+                                    <tr className="py-2 border-t border-dashed border-slate-300">
+                                        <td className="px-3 py-2" colSpan={4}>
+                                            <div className="flex justify-center items-center">
+                                                No Record Found
                                             </div>
                                         </td>
-                                        <td className="px-3 py-2 flex gap-3 md:gap-4">
-                                            {/* <!-- Modal toggle --> */}
-                                            {/* <Link to={RouteLinks.manageAdminPage}>
-                                                <i onClick={handleShowEditModal} className="fa-solid fa-eye text-base md:text-lg cursor-pointer p-2 text-sky-600"></i>
-                                            </Link> */}
-                                            {/* <i onClick={handleShowEditModal} className="fa-solid fa-pen-to-square text-base md:text-lg cursor-pointer p-2"></i> */}
-                                            {/* <i onClick={handleDeleteModal} className="fa-solid fa-trash text-base md:text-lg cursor-pointer p-2 text-red-500"></i> */}
-                                            <Icons name='edit' />
-                                            <Icons name='eye' />
-                                            <Icons name='trash' className={'hidden text-red-500'} />
-                                        </td>
                                     </tr>
-                                ))
-                                :
-                                <tr className="w-3 p-3">
-                                    <td className="px-3 py-2" colSpan={4}>
-                                        <div className="flex justify-center items-center">
-                                            No Record Found
-                                        </div>
-                                    </td>
-                                </tr>
-                                }
-                            </tbody>
-                        </table>
-                    </>
-                )}
-                </TableWrapper>
-            }
+                                    }
+                                </tbody>
+                            </table>
+                        </>
+                    )}
+                    </TableWrapper>
+                }
+            </div>
         </div>
     )
-}
-
-
-const dummy = [
-    {name:'ok'}
-]
+}

src/components/tableWrapper/TableWrapper.jsx

@@ -53,7 +53,7 @@ export default function TableWrapper({
   },[itemsPerPage])
 
   return (
-    <div className="p-2 w-full bg-white shadow-round_black dark:shadow-round_white dark:bg-gray-800 rounded-md">
+    <div className="relative w-full">
       {data.length > 0 && filterItem && (
         <div className="mb-10 flex justify-end items-center gap-2">
           {filterItem.map((item, index) => (
@@ -83,7 +83,7 @@ export default function TableWrapper({
         
         {/* PAGINATION BUTTON */}
         {newData.length > 0 &&
-          <div className='p-2 w-full flex flex-col lg:flex-row justify-center items-center gap-3 md:gap-6'>
+          <div className='w-full flex flex-col lg:flex-row justify-center items-center gap-3 md:gap-6'>
             <div className="text-sm text-center lg:text-left font-normal text-gray-500 dark:text-gray-400 block w-full">Showing <span className="font-semibold text-gray-900 dark:text-white">
               {isLoading ? '----' : `${currentPage + 1}-${currentPage + numberOfSelection >= data.length ? data.length : (currentPage + numberOfSelection)}`}</span> of <span className="font-semibold text-gray-900 dark:text-white">{data.length}</span>
             </div>
@@ -118,7 +118,7 @@ export default function TableWrapper({
 
 const TableIsLoading = () => {
   return (
-    <div className="w-full fixed z-[991] inset-0 flex justify-center items-center">
+    <div className="w-full absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-[991] inset-0 flex justify-center items-center">
       <p className="rounded-md shadow-md p-4 bg-white/90 dark:bg-gray-900 text-brown dark:text-white">Loading...</p>
     </div>
   )

src/components/tableWrapper/_TableWrapper.jsx

@@ -0,0 +1,125 @@
+import { ReactNode, useEffect, useState } from "react";
+import MainBtn from "../MainBtn";
+import Icons from "../Icons";
+
+
+export default function TableWrapper({
+  data = [],
+  itemsPerPage = 5,
+  filterItem,
+  children,
+}) {
+  const [isLoading, setIsLoading] = useState(true)
+  const [searchTerm, setSearchTerm] = useState("");
+  const [filteredData, setFilteredData] = useState(data);
+
+  const [currentPage, setCurrentPage] = useState(0);
+  const [newData, setNewData] = useState([]);
+
+  const numberOfSelection = itemsPerPage;
+
+  const handlePrev = () => {
+    if (currentPage != 0) {
+      setCurrentPage((prev) => prev - numberOfSelection);
+    }
+  };
+  const handleNext = () => {
+    if (currentPage < data.length) {
+      setCurrentPage((prev) => prev + numberOfSelection);
+    }
+  };
+
+  const handleSearch = ({ target: { value } }, name) => {
+    setSearchTerm(value);
+    let newFilteredData = data.filter((item) =>
+      item[name].toLowerCase().startsWith(value.toLowerCase())
+    );
+    setFilteredData(newFilteredData);
+    setCurrentPage(0);
+  };
+
+  useEffect(() => {
+    setIsLoading(true)
+    setTimeout(()=>{
+      setNewData(
+        filteredData?.slice(currentPage, numberOfSelection + currentPage)
+      );
+      setIsLoading(false)
+    },1000)
+  }, [currentPage, filteredData]);
+
+  useEffect(()=>{
+    setCurrentPage(0)
+  },[itemsPerPage])
+
+  return (
+    <div className="p-2 w-full bg-white shadow-round_black dark:shadow-round_white dark:bg-gray-800 rounded-md">
+      {data.length > 0 && filterItem && (
+        <div className="mb-10 flex justify-end items-center gap-2">
+          {filterItem.map((item, index) => (
+            <label
+              key={index}
+              className="flex flex-col sm:flex-row items-center gap-2 text-slate-600 dark:text-slate-100 transition-all duration-500"
+            >
+              Search by {item[0].toUpperCase() + item.slice(1)}
+              <input
+                name={item}
+                type="text"
+                className="py-1 px-2 text-sm min-w-[100px] text-black dark:text-white bg-white dark:bg-slate-800 rounded-full border-0 outline-none ring-1 ring-slate-300 dark:ring-white transition-all duration-500"
+                value={searchTerm}
+                onChange={(e) => {
+                  handleSearch(e, item);
+                }}
+              />
+            </label>
+          ))}
+        </div>
+      )}
+    
+      <div className="flex flex-col">
+        <div className="w-full overflow-x-auto">
+          {children({ data: newData })}
+        </div>
+        
+        {/* PAGINATION BUTTON */}
+        {newData.length > 0 &&
+          <div className='p-2 w-full flex flex-col lg:flex-row justify-center items-center gap-3 md:gap-6'>
+            <div className="text-sm text-center lg:text-left font-normal text-gray-500 dark:text-gray-400 block w-full">Showing <span className="font-semibold text-gray-900 dark:text-white">
+              {isLoading ? '----' : `${currentPage + 1}-${currentPage + numberOfSelection >= data.length ? data.length : (currentPage + numberOfSelection)}`}</span> of <span className="font-semibold text-gray-900 dark:text-white">{data.length}</span>
+            </div>
+            {(newData.length >= itemsPerPage) &&
+              <div className='flex items-center gap-3 md:gap-6'>
+                  <MainBtn 
+                      onClick={handlePrev}
+                      // text='Prev' 
+                      className={`${currentPage == 0 ? 'bg-primary/50 pointer-events-none' : 'bg-primary'} text-white-light text-center flex justify-center gap-2 items-center`} 
+                      disabled={isLoading}
+                  >
+                  <Icons name='prev' />
+                  </MainBtn>
+                  <MainBtn 
+                      onClick={handleNext}
+                      // text='Next' 
+                      className={`${currentPage + numberOfSelection >= data.length ? 'bg-primary/50 pointer-events-none' : 'bg-primary'} text-white-light text-center flex justify-center gap-2 items-center`} 
+                      disabled={isLoading}
+                  > 
+                  <Icons name='next' />
+                  </MainBtn>
+              </div>
+            }
+          </div>
+        }
+      </div>
+      
+    {isLoading && <TableIsLoading />}
+    </div>
+  );
+}
+
+const TableIsLoading = () => {
+  return (
+    <div className="w-full fixed z-[991] inset-0 flex justify-center items-center">
+      <p className="rounded-md shadow-md p-4 bg-white/90 dark:bg-gray-900 text-brown dark:text-white">Loading...</p>
+    </div>
+  )
+}

src/index.css

@@ -28,6 +28,9 @@ code {
   .aside-scroll-design {
     @apply [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-track]:bg-gray-100 [&::-webkit-scrollbar-thumb]:bg-gray-300 dark:[&::-webkit-scrollbar-track]:bg-neutral-700 dark:[&::-webkit-scrollbar-thumb]:bg-neutral-500 [&::-webkit-scrollbar-track]:rounded-full [&::-webkit-scrollbar-thumb]:rounded-full
   }
+  .box {
+    @apply flex flex-col gap-8 w-full p-8 cursor-pointer rounded-lg h-full border-[1px] border-[#F1F1F4] dark:border-[#1E2027] shadow-[0px_3px_4px_0px_rgba(0,_0,_0,_0.03)]
+  }
 }
 
 

src/pages/HomePage.jsx

@@ -2,6 +2,8 @@ import React from 'react'
 import BreadcrumbCom from '../components/breadcrumb/BreadcrumbCom'
 import CustomCounter from '../components/CustomCounter'
 import Icons from '../components/Icons'
+import TableWrapper from '../components/tableWrapper/TableWrapper'
+import Avatar from '../assets/user_avatar.jpg'
 
 export default function HomePage() {
   return (
@@ -9,22 +11,22 @@ export default function HomePage() {
       <BreadcrumbCom title='Dashboard' paths={['Home', 'Dashboard']} />
       <div className='grid grid-cols-1 gap-8'>
         <div className='w-full grid grid-cols-1 lg:grid-cols-3 gap-8'>
-          <div className='p-8 w-full flex flex-col justify-between bg-[#F7D9E3] dark:bg-black-box text-black-body dark:text-white-body hover:scale-[1.0] cursor-pointer rounded-lg h-[200px] shadow-round_black dark:shadow-round_white'>
-            <p className='text-base sm:text-lg font-bold'>Earnings</p>
+          <div className='box min-h-[230] justify-between bg-[#F7D9E3] dark:bg-black-box text-black-body dark:text-white-body'>
+            <p className='text-base sm:text-lg font-bold hover:text-primary'>Earnings</p>
             <div className='flex gap-2 items-end font-bold'>
-              <p className='text-3xl'><CustomCounter targetNumber='47' timeInSeconds='1' /></p>
-              <p>- 12% this week</p>
+              <p className='text-3xl sm:text-[39px]'><span className='text-xl sm:text-2xl'>$</span><CustomCounter targetNumber='47' timeInSeconds='1' /></p>
+              <p className='sm:text-[13.9px]'>- 12% this week</p>
             </div>
           </div>
-          <div className='p-8 w-full flex flex-col justify-between bg-[#CBF0F5] dark:bg-black-box text-black-body dark:text-white-body hover:scale-[1.0] cursor-pointer rounded-lg h-[200px] shadow-round_black dark:shadow-round_white'>
-            <p className='text-base sm:text-lg font-bold'>Contributions</p>
+          <div className='box min-h-[230] justify-between bg-[#CBF0F5] dark:bg-black-box text-black-body dark:text-white-body'>
+            <p className='text-base sm:text-lg font-bold hover:text-primary'>Contributions</p>
             <div className='flex gap-2 items-end font-bold'>
-              <p className='text-3xl'>$<CustomCounter targetNumber='500' timeInSeconds='1' /></p>
-              <p>+ 56% this week</p>
+              <p className='text-3xl sm:text-[39px]'><CustomCounter targetNumber='500' timeInSeconds='1' /></p>
+              <p className='sm:text-[13.9px]'>+ 56% this week</p>
             </div>
           </div>
-          <div className='p-8 w-full flex flex-col justify-between bg-[#CBD4F4] dark:bg-black-box text-black-body dark:text-white-body hover:scale-[1.0] cursor-pointer rounded-lg h-[200px] shadow-round_black dark:shadow-round_white'>
-            <p className='text-base sm:text-lg font-bold'>Summary</p>
+          <div className='box min-h-[230] justify-between bg-[#CBD4F4] dark:bg-black-box text-black-body dark:text-white-body'>
+            <p className='text-base sm:text-lg font-bold hover:text-primary'>Summary</p>
             <div className='grid grid-cols-2 gap-4 font-bold'>
               <div className='flex items-center gap-2'>
                 <div className='w-10 h-10 bg-white-body dark:bg-black-box dark:shadow-[0_0_0_1px_#f9f9f9] rounded-md flex justify-center items-center'>
@@ -64,19 +66,85 @@ export default function HomePage() {
               </div>
             </div>
           </div>
-          {/* <div className='p-8 w-full bg-[#F7D9E3] dark:bg-black-box text-black-body dark:text-white-body hover:scale-[1.0] cursor-pointer rounded-lg h-[200px] shadow-round_black dark:shadow-round_white'>
-            <p className='text-base sm:text-lg font-bold'>Earnings</p>
-          </div> */}
         </div>
         <div className='w-full'>
-          <div className='w-full p-8 min-h-96 bg-white dark:bg-black-box text-black-body dark:text-white-body hover:scale-[1.0] cursor-pointer rounded-lg h-full shadow-[0px_0px_2px_rgba(0,_0,_0,_50)] dark:shadow-round_white'>
-            <div className='flex justify-between items-center'>
-              <div className='flex flex-col gap-1'>
+          <div className='box bg-white dark:bg-black-box text-black-body dark:text-white-body'>
+            <div className='grid grid-cols-1 xs:grid-cols-2 gap-4'>
+              <div className='flex flex-col gap-1 order-2 xs:order-1'>
                 <p className='font-bold text-base'>Members Statistics</p>
                 <p className='text-12'>Over 500 members</p>
               </div>
-              <button className='font-bold text-primary text-12 px-4 py-2 bg-sky-100 rounded-md'>+ New Member</button>
+              <div className='order-1 xs:order-2 text-left xs:text-right'>
+                <button className='font-bold bg-white-aside text-black-body text-12 px-4 py-2 hover:text-primary hover:bg-sky-50 dark:hover:text-white dark:hover:bg-primary dark:text-white-body dark:bg-black-body rounded-md'>+ New Member</button>
+              </div>
             </div>
+
+            <TableWrapper data={[1,2,3,4,5]} itemsPerPage={15}>
+                {({ data }) => (
+                    <>
+                        <table className="py-2 w-full text-sm">
+                            <thead className="py-2 text-sm text-slate-500 text-left">
+                                <tr>
+                                    <th scope="col" className="px-2 py-2">
+                                        Authors
+                                    </th>
+                                    <th scope="col" className="px-2">
+                                        Company
+                                    </th>
+                                    <th scope="col" className="px-2">
+                                        Progress
+                                    </th>
+                                    <th scope="col" className="px-2 text-right">
+                                        Action
+                                    </th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                              {data.map(item => (
+                                <tr className="py-2 border-t border-dashed border-slate-300">
+                                    <td className="px-2 py-2">
+                                      <div className='w-full min-w-48 flex items-center gap-2 whitespace-nowrap'>
+                                        <img className="w-10 h-10 rounded-md" src={Avatar} alt="Jese image" />
+                                        <div className="text-left">
+                                            <div className="text-base font-semibold">John Dummy</div>
+                                            <div className="font-normal text-gray-500">HTML, JS, ReactJS</div>
+                                        </div>  
+                                      </div>
+                                    </td>
+                                    <td className="px-2">
+                                      <div className="text-left">
+                                          <div className="text-base font-semibold">chiefSoft</div>
+                                          <div className="font-normal text-gray-500">Web, UI/UX Design</div>
+                                      </div> 
+                                    </td>
+                                    <td className="px-2">
+                                      <div className="text-left">
+                                          <div className="font-normal text-gray-500">50%</div>
+                                          <div className="relative h-[6px] w-full bg-white-body dark:bg-black-body rounded-full overflow-hidden">
+                                            <div className={`absolute left-0 h-full w-1/2 bg-emerald-600`}></div>
+                                          </div>
+                                      </div> 
+                                    </td>
+                                    <td className="px-2 text-right">
+                                      <div className='flex items-center justify-end gap-3 md:gap-4'>
+                                        <div className='p-2 flex justify-center items-center text-slate-500 bg-white-body dark:text-white-body dark:bg-black-body rounded-md'>
+                                          <Icons name='edit' />
+                                        </div>
+                                        <div className='p-2 flex justify-center items-center text-slate-500 bg-white-body dark:text-white-body dark:bg-black-body rounded-md'>
+                                          <Icons name='eye' />
+                                        </div>
+                                        <div className='p-2 flex justify-center items-center text-slate-500 bg-white-body dark:text-white-body dark:bg-black-body rounded-md'>
+                                          <Icons name='trash' />
+                                        </div>
+                                      </div>
+                                    </td>
+                                </tr>
+                              ))}
+                            </tbody>
+                        </table>
+                    </>
+                )}
+            </TableWrapper>
           </div>
         </div>
       </div>

tailwind.config.js

@@ -29,6 +29,8 @@ module.exports = {
         }
       },
       screens: {
+        xxs: '300px',
+        xs: '400px',
         large: '1535px',
         max_width: '1700px'
       },