added home dummy table

Merge branch 'homepage-update' of DigiFi/digifi-FirstOffice into master
added cobtent to home page
2025-04-07 19:28:23 +01:00 · 2025-04-07 16:19:41 +00:00 · 2025-04-07 16:13:58 +01:00 · 2025-04-07 12:32:54 +00:00 · 2025-04-07 11:36:03 +01:00 · 2025-04-07 11:24:09 +01:00
19 changed files with 657 additions and 77 deletions
@@ -0,0 +1,29 @@
+import React, { useEffect, useState } from 'react';
+
+const CustomCounter = ({ targetNumber, timeInSeconds }) => {
+  const [count, setCount] = useState(0);
+
+  useEffect(() => {
+    if (targetNumber <= 0 || timeInSeconds <= 0) return; // Handle edge cases
+
+    const interval = Math.floor(timeInSeconds * 1000 / targetNumber); // Time interval for each count in milliseconds
+    const totalTime = timeInSeconds * 1000; // Total time for the entire count in milliseconds
+
+    let currentCount = 0;
+    const intervalId = setInterval(() => {
+      currentCount++;
+      setCount((prevCount) => prevCount + 1); // Update state using the previous state
+
+      if (currentCount >= targetNumber) {
+        clearInterval(intervalId); // Stop the counting when the target number is reached
+      }
+    }, interval);
+
+    // Cleanup the interval on component unmount
+    return () => clearInterval(intervalId);
+  }, [targetNumber, timeInSeconds]);
+
+  return <>{count}</>;
+};
+
+export default CustomCounter;
@@ -6,6 +6,11 @@ import { GoDotFill } from 'react-icons/go'
 import { IoPeople, IoTrash } from 'react-icons/io5'
 import { TbPlayerTrackNext, TbPlayerTrackPrev } from 'react-icons/tb'
 import { IoMdSettings } from "react-icons/io";
+import { LuMessageSquareText } from "react-icons/lu";
+import { LuPanelRight } from "react-icons/lu";
+import { FcGoogle } from "react-icons/fc";
+import { IoLogoApple } from "react-icons/io5";
+import { FcSalesPerformance } from "react-icons/fc";


 export default function Icons({name, className}) {
@@ -33,6 +38,16 @@ export default function Icons({name, className}) {
    <FaEdit className={`text-base ${className}`} />
    :name.toLowerCase() == 'settings' ?
    <IoMdSettings className={`text-base ${className}`} />
+    :name.toLowerCase() == 'message' ?
+    <LuMessageSquareText className={`text-base ${className}`} />
+    :name.toLowerCase() == 'right-panel' ?
+    <LuPanelRight className={`text-base ${className}`} />
+    :name.toLowerCase() == 'google' ?
+    <FcGoogle className={`text-base ${className}`} />
+    :name.toLowerCase() == 'apple' ?
+    <IoLogoApple className={`text-base ${className}`} />
+    :name.toLowerCase() == 'sales' ?
+    <FcSalesPerformance className={`text-base ${className}`} />
    :
    null
    }
@@ -1,9 +1,9 @@
 import React from 'react'

-export default function InputText({id, name, type='text', value, handleChange}) {
+export default function InputText({id, name, type='text', placeholder, value, handleChange}) {
  return (
-    <div className='w-full h-10 round overflow-hidden'>
-        <input id={id} name={name} type={type} value={value} onChange={handleChange} className='p-2 w-full h-full text-black outline-0 ring-0 border border-slate-400 focus:border-purple-600 rounded' />
+    <div className='w-full h-12 overflow-hidden'>
+        <input id={id} name={name} type={type} value={value} placeholder={placeholder} onChange={handleChange} className='p-2 w-full h-full text-black outline-0 ring-0 border border-slate-300 focus:border-purple-600 rounded-md' />
    </div>
  )
 }
@@ -12,48 +12,40 @@ export default function BreadcrumbCom({title, span, paths}) {

      // var rect = navRef?.current?.getBoundingClientRect()?.bottom;
      var rect = 10;
-      // window.addEventListener('scroll', ()=>{
-      //     if(window.scrollY >= rect + 20){
-      //         setStickNav(true)
-      //         console.log('tru')
-      //     }else{
-      //         setStickNav(false)
-      //         console.log('false')
-      //     }
-      // })
-
-    //   return () => window.removeEventListener('scroll', window.addEventListener('scroll', ()=>{
-    //     if(window.scrollY >= rect + 20){
-    //         setStickNav(true)
-    //     }else{
-    //         setStickNav(false)
-    //     }
-    // }))
+      window.addEventListener('scroll', ()=>{
+          if(window.scrollY >= rect + 20){
+              setStickNav(true)
+              console.log('tru')
+          }else{
+              setStickNav(false)
+              console.log('false')
+          }
+      })
  },[])

  return (
-    <div className={`${stickNav ? 'sticky top-0 transition-[top] duration-1000 shadow-md shadow-black' : '-top-[100px] static'}`}>
-
-    <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'>
-          <h1 className='text-12 sm:text-lg md:text-2xl text-black dark:text-white-body font-semibold'>{title}</h1>
-          <span className='text-red-500 text-10 sm:text-base md:text-xl'>{span && span}</span>
+    // ${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= {`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'>
+            <h1 className='text-12 sm:text-lg md:text-2xl text-black dark:text-white-body font-semibold'>{title}</h1>
+            <span className='text-red-500 text-10 sm:text-base md:text-xl'>{span && span}</span>
+          </div>
+          <div className='flex gap-2 items-center text-black-gray dark:text-white-body text-base'>
+              <TiHomeOutline className='text-black dark:text-white-body' />
+              {paths.map((item, index) => (
+                <div className='flex gap-2 items-center text-black dark:text-white-body text-10 sm:text-sm' key={index}>
+                  <MdKeyboardDoubleArrowRight />
+                  <p className={`${index + 1 == paths.length ? 'text-sky-600 dark:text-white-body/70' : ''}`}>{item}</p>
+                </div>
+              ))}
+          </div>
        </div>
-        <div className='flex gap-2 items-center text-black-gray dark:text-white-body text-base'>
-            <TiHomeOutline className='text-black dark:text-white-body' />
-            {paths.map((item, index) => (
-              <div className='flex gap-2 items-center text-black dark:text-white-body text-10 sm:text-sm' key={index}>
-                <MdKeyboardDoubleArrowRight />
-                <p className={`${index + 1 == paths.length ? 'text-sky-600 dark:text-white-body/70' : ''}`}>{item}</p>
-              </div>
-            ))}
+        <div className='hidden lg:flex'>
+          <DashboardHeader />
        </div>
      </div>
-      <div className='hidden lg:flex'>
-        <DashboardHeader />
-      </div>
-    </div>
    </div>
  )
 }
@@ -10,6 +10,7 @@ import RouteLinks from "../../RouteLinks"
 import { useState } from "react";
 import MainBtn from "../MainBtn";
 import { TbLogout2 } from "react-icons/tb";
+import Icons from "../Icons";

 export default function DashboardHeader() {

@@ -20,8 +21,8 @@ export default function DashboardHeader() {
        {/* HEADER SECTION*/}
        <header className='text-brown dark:text-white'>
            <div className='w-full flex h-20 justify-between lg:justify-end items-center'>
-                <div className="lg:hidden">
-                    <HandBurger asideDisplay={()=>setShowAsideDrawer(prev => !prev)} showAside={showAsideDrawer} />
+                <div className="lg:hidden cursor-pointer" onClick={()=>setShowAsideDrawer('aside')}>
+                    <HandBurger showAside={showAsideDrawer} />
                </div>

                {/* USER AVATAR */}
@@ -32,6 +33,9 @@ export default function DashboardHeader() {
                        <i className="fa-solid fa-wallet text-xl"></i>
                    </Link>

+                     <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>
@@ -39,7 +43,7 @@ export default function DashboardHeader() {
                    </button> */}

                    {/* THEME SELECTION */}
-                    <div onClick={handleTheme} className='px-2 flex justify-center items-center gap-2 cursor-pointer' title='Switch Color Mode'>
+                    <div onClick={handleTheme} className='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'>
                        {theme == 'dark' ?
                        <IoMdSunny className="text-sm md:text-xl font-bold" />
                        :
@@ -4,6 +4,7 @@ import { Outlet } from 'react-router-dom'
 import DashboardHeader from './DashboardHeader'
 import { generalLayoutContext } from '../../context/GeneralLayoutContext'
 import DashboardAside from './aside/DashboardAside'
+import RightAsideBar from './rightaside/RightAsideBar'

 export default function DashboardLayout() {

@@ -11,23 +12,23 @@ export default function DashboardLayout() {
  
  return (
    <div className='w-full flex gap-10 relative m-auto h-screen overflow-x-hidden overflow-y-auto bg-white-body dark:bg-black-body p-8 pt-0 lg:p-10'>
-        <div className='hidden lg:block w-[370px] px-8 py-4 rounded-3xl sticky top-0 h-full bg-white-aside dark:bg-black-aside shadow-round_black dark:shadow-round_white'>
+        <div className='hidden lg:block min-w-[300px] px-8 py-4 rounded-3xl sticky top-0 h-full bg-white-aside dark:bg-black-aside shadow-round_black dark:shadow-round_white'>
            <DashboardAside />
        </div>

-        {/* <div className={`${showAsideDrawer ? 'left-0' : '-left-full'} w-4/5 sm:w-72 px-8 py-4 lg:hidden fixed inset-0 z-[999] bg-white-aside dark:bg-black-aside dark:text-white-light`}>
+        {/* <div className={`${showAsideDrawer =='aside' ? 'left-0' : '-left-full'} w-4/5 sm:w-72 px-8 py-4 lg:hidden fixed inset-0 z-[999] bg-white-aside dark:bg-black-aside dark:text-white-light`}>
            <DashboardAside />
        </div> */}
-        <div className={`${showAsideDrawer ? 'left-0' : '-left-full'} w-full lg:hidden fixed inset-0 z-[999]`}>
-            <div className={`${showAsideDrawer ? 'left-0' : '-left-full'} fixed left-0 top-0 inset-0 w-full bg-white/20 transition-all`} onClick={()=>setShowAsideDrawer(prev => !prev)} ></div>
-            <div className={`${showAsideDrawer ? 'left-0' : '-left-full'} px-8 py-4 fixed left-0 top-0 inset-0 w-4/5 sm:w-72 bg-white-aside dark:bg-black-aside dark:text-white-light`}>
+        <div className={`${showAsideDrawer =='aside' ? 'left-0' : '-left-full'} lg:hidden w-full fixed inset-0 z-[999]`}>
+            <div className={`${showAsideDrawer =='aside' ? 'fixed left-0 top-0 inset-0' : '-left-full'} w-full bg-[rgba(0,_0,_0,_0.2)] dark:bg-[rgba(0,_0,_0,_0.4)] transition-all cursor-pointer`} onClick={()=>setShowAsideDrawer('')} ></div>
+            <div className={`fixed px-8 py-4 h-full w-4/5 sm:w-[400px] bg-white-aside dark:bg-black-aside dark:text-white-light`}>
                <DashboardAside />
            </div>
        </div>

-        <div className='main w-full bg-inherit'>
+        <div className='main w-full bg-inherit large:mr-[400px]'>
            <div className='fixed top-0 left-0 z-[777] w-full px-8 bg-inherit lg:hidden'>
-                <DashboardHeader showAsideDrawer={showAsideDrawer} setShowAsideDrawer={setShowAsideDrawer} />
+                <DashboardHeader />
            </div> 

            {/* main body section */}
@@ -40,6 +41,17 @@ export default function DashboardLayout() {
                <p className="text-10">Copyright @ {new Date().getFullYear()} - Developed by digiFi. All Rights Reserved</p>
            </footer>
        </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`}>
+                <RightAsideBar />
+            </div>
+        </div>
    </div>
  )
 }
@@ -1,9 +1,8 @@

-export default function HandBurger({showAside, asideDisplay, barColor}) {
+export default function HandBurger({showAside, barColor}) {
  return (
    <div
-    className="relative lg:hidden w-5 h-5 flex flex-col items-center justify-between cursor-pointer"
-    onClick={asideDisplay}
+    className="relative lg:hidden w-5 h-5 flex flex-col items-center justify-between"
    >
    {/* <div
        className={`absolute left-0 w-5 h-1 rounded-md ${barColor ? barColor :'bg-primary'} dark:bg-dark-light${
@@ -12,21 +11,21 @@ export default function HandBurger({showAside, asideDisplay, barColor}) {
    ></div> */}
      <div
        className={`absolute left-0 w-5 h-1 rounded-md ${barColor ? barColor :'bg-black-box'} dark:bg-white-light ${
-        showAside
+        showAside =='aside'
            ? "bottom-1/2 translate-y-1/2 rotate-45"
            : ""
        }`}
    ></div>
    <div
        className={`absolute left-0 top-1/2 -translate-y-1/2 w-5 h-1 rounded-md ${barColor ? barColor :'bg-black-box/50'} dark:bg-white-light transition-all duration-300 ${
-        showAside
+        showAside =='aside'
            ? "rotate-[2000deg] opacity-0"
            : ""
        }`}
    ></div>
    <div
        className={`absolute left-0 w-5 h-1 rounded-md ${barColor ? barColor :'bg-black-box/50'} dark:bg-white-light ${
-        showAside
+        showAside =='aside'
            ? "top-1/2 -translate-y-1/2 -rotate-45"
            : "bottom-0"
        }`}
@@ -10,7 +10,7 @@ export default function AsideLink({name, to, icon}) {

  return (
    <Link 
-        className={`w-full flex items-center gap-2 px-4 py-2 my-1 text-[13px] sm:text-sm font-semibold rounded-md hover:bg-white dark:hover:bg-black-box text-black-box/80 dark:text-white-body/80 ${pathname == to ? 'bg-white-body dark:bg-black-box' : ''}`} 
+        className={`w-full flex items-center gap-2 px-4 py-2 my-1 text-[13px] sm:text-sm font-semibold rounded-md hover:bg-white dark:hover:bg-black-box text-slate-500 dark:text-white-body/80 ${pathname == to ? 'bg-white-body dark:bg-black-box' : ''}`} 
        to={to}
        onClick={()=>setShowAsideDrawer(false)}
    >   
@@ -20,7 +20,7 @@ export default function AsideLinkWithSubLinks({name, icon, to, children, isOpen}
    <div 
        className={`w-full px-4 py-2 my-1 text-[13px] sm:text-sm font-semibold rounded`} 
    >   
-        <button onClick={()=>setHideSubMenu(prev => !prev)} name={name} className="py-2 w-full flex items-center justify-between gap-2 cursor-pointer text-black-body/90 dark:text-white-body/90">
+        <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>
@@ -57,7 +57,7 @@ export default function DashboardAside() {
                    return (
                    <div key={index} className="w-full">
                        {link.title &&
-                            <h1 className="px-4 py-2 text-sm sm:text-sm text-black dark:text-white font-semibold uppercase mt-3 mb-1 border-b border-slate-800">{link.title}</h1>
+                            <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)} >
                            <>
@@ -113,7 +113,7 @@ 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-black-body dark:text-white-body">
+                <button onClick={()=>handleActiveMenu('settings')}  className="text-slate-500 dark:text-white-body">
                    <Icons name='settings' className='text-3xl' />
                </button>
            </div>
@@ -0,0 +1,80 @@
+import React from 'react'
+import Img from '../../../assets/user_avatar.jpg'
+import CustomCounter from '../../CustomCounter'
+
+export default function Orders() {
+    return (
+        <div className='h-full p-2 sm:p-4 large:p-8 flex flex-col gap-16 overflow-y-auto aside-scroll-design'>
+            <div className='flex flex-col gap-4'>
+                <p className='text-base text-white-body font-bold'>Support Ticket</p>
+                <div className='grid grid-cols-2 gap-4 sm:gap-6 large:gap-8'>
+                    <div className='p-2 sm:p-3 large:p-4 flex flex-col border border-slate-500 border-dashed'>
+                        <p className='text-base font-bold text-white-body'>
+                        <CustomCounter targetNumber={18} timeInSeconds={1} />
+                        </p>
+                        <p className='text-sm text-slate-500'>Pending</p>
+                    </div>
+                    <div className='p-2 sm:p-3 large:p-4 flex flex-col border border-slate-500 border-dashed'>
+                        <p className='text-base font-bold text-white-body'>
+                        <CustomCounter targetNumber={5} timeInSeconds={1} />
+                        </p>
+                        <p className='text-sm text-slate-500'>Approved</p>
+                    </div>
+                    <div className='p-2 sm:p-3 large:p-4 flex flex-col border border-slate-500 border-dashed'>
+                        <p className='text-base font-bold text-white-body'>
+                        <CustomCounter targetNumber={1} timeInSeconds={1} />
+                        </p>
+                        <p className='text-sm text-slate-500'>Rejected</p>
+                    </div>
+                    <div className='p-2 sm:p-3 large:p-4 flex flex-col border border-slate-500 border-dashed'>
+                        <p className='text-base font-bold text-white-body'>
+                        <CustomCounter targetNumber={1} timeInSeconds={1} />
+                        </p>
+                        <p className='text-sm text-slate-500'>Created</p>
+                    </div>
+                </div>
+            </div>
+            <div className='flex flex-col gap-4'>
+                <p className='text-base text-white-body font-bold'>Best Ticket</p>
+                <div className='flex flex-col gap-4'>
+                    <div className='flex gap-3 items-center'>
+                        <div className='px-4 py-2 bg-[#0E172E] rounded-md'>
+                            <img src={Img} className='w-8' alt="Order Image" />
+                        </div>
+                        <div className='flex-col'>
+                            <p className='text-base font-bold text-white-body'>Project Briefing</p>
+                            <p className='text-sm text-slate-500'>Project Manager</p>
+                        </div>
+                    </div>
+                    <div className='flex gap-3 items-center'>
+                        <div className='px-4 py-2 bg-[#0E172E] rounded-md'>
+                            <img src={Img} className='w-8' alt="Order Image" />
+                        </div>
+                        <div className='flex-col'>
+                            <p className='text-base font-bold text-white-body'>Project Briefing</p>
+                            <p className='text-sm text-slate-500'>Project Manager</p>
+                        </div>
+                    </div>
+                    <div className='flex gap-3 items-center'>
+                        <div className='px-4 py-2 bg-[#0E172E] rounded-md'>
+                            <img src={Img} className='w-8' alt="Order Image" />
+                        </div>
+                        <div className='flex-col'>
+                            <p className='text-base font-bold text-white-body'>Project Briefing</p>
+                            <p className='text-sm text-slate-500'>Project Manager</p>
+                        </div>
+                    </div>
+                    <div className='flex gap-3 items-center'>
+                        <div className='px-4 py-2 bg-[#0E172E] rounded-md'>
+                            <img src={Img} className='w-8' alt="Order Image" />
+                        </div>
+                        <div className='flex-col'>
+                            <p className='text-base font-bold text-white-body'>Project Briefing</p>
+                            <p className='text-sm text-slate-500'>Project Manager</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}
@@ -0,0 +1,37 @@
+import React, { useState } from 'react'
+import Icons from '../../Icons'
+import Orders from './Orders'
+import Tickets from './Tickets'
+import Tasks from './Tasks'
+
+export default function RightAsideBar() {
+
+    let [active, setActive] = useState('orders')
+
+    const handleActiveMenu = ({target:{name}}) => {
+        let lowerStr = name.toLowerCase()
+        setActive(lowerStr)
+    }
+
+  return (
+    <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]'}`}>
+                <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]'}`}>
+                <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]'}`}>
+                <Icons name='dashboard' className='text-3xl' />
+            </button>
+        </div>
+
+        {/* Body */}
+        {active == 'orders' && <Orders />}
+        {active == 'tickets' && <Tickets />}
+        {active == 'tasks' && <Tasks />}
+    </div>
+  )
+}
@@ -0,0 +1,80 @@
+import React from 'react'
+import Img from '../../../assets/user_avatar.jpg'
+import CustomCounter from '../../CustomCounter'
+
+export default function Tasks() {
+    return (
+        <div className='h-full p-2 sm:p-4 large:p-8 flex flex-col gap-16 overflow-y-auto aside-scroll-design'>
+            <div className='flex flex-col gap-4'>
+                <p className='text-base text-white-body font-bold'>Support Tasks</p>
+                <div className='grid grid-cols-2 gap-4 sm:gap-6 large:gap-8'>
+                    <div className='p-2 sm:p-3 large:p-4 flex flex-col border border-slate-500 border-dashed'>
+                        <p className='text-base font-bold text-white-body'>
+                        <CustomCounter targetNumber={2} timeInSeconds={1} />
+                        </p>
+                        <p className='text-sm text-slate-500'>Pending</p>
+                    </div>
+                    <div className='p-2 sm:p-3 large:p-4 flex flex-col border border-slate-500 border-dashed'>
+                        <p className='text-base font-bold text-white-body'>
+                        <CustomCounter targetNumber={20} timeInSeconds={1} />
+                        </p>
+                        <p className='text-sm text-slate-500'>Completed</p>
+                    </div>
+                    <div className='p-2 sm:p-3 large:p-4 flex flex-col border border-slate-500 border-dashed'>
+                        <p className='text-base font-bold text-white-body'>
+                        <CustomCounter targetNumber={3} timeInSeconds={1} />
+                        </p>
+                        <p className='text-sm text-slate-500'>Rejected</p>
+                    </div>
+                    <div className='p-2 sm:p-3 large:p-4 flex flex-col border border-slate-500 border-dashed'>
+                        <p className='text-base font-bold text-white-body'>
+                        <CustomCounter targetNumber={8} timeInSeconds={1} />
+                        </p>
+                        <p className='text-sm text-slate-500'>Created</p>
+                    </div>
+                </div>
+            </div>
+            <div className='flex flex-col gap-4'>
+                <p className='text-base text-white-body font-bold'>Best Tasks</p>
+                <div className='flex flex-col gap-4'>
+                    <div className='flex gap-3 items-center'>
+                        <div className='px-4 py-2 bg-[#0E172E] rounded-md'>
+                            <img src={Img} className='w-8' alt="Order Image" />
+                        </div>
+                        <div className='flex-col'>
+                            <p className='text-base font-bold text-white-body'>Project Briefing</p>
+                            <p className='text-sm text-slate-500'>Project Manager</p>
+                        </div>
+                    </div>
+                    <div className='flex gap-3 items-center'>
+                        <div className='px-4 py-2 bg-[#0E172E] rounded-md'>
+                            <img src={Img} className='w-8' alt="Order Image" />
+                        </div>
+                        <div className='flex-col'>
+                            <p className='text-base font-bold text-white-body'>Project Briefing</p>
+                            <p className='text-sm text-slate-500'>Project Manager</p>
+                        </div>
+                    </div>
+                    <div className='flex gap-3 items-center'>
+                        <div className='px-4 py-2 bg-[#0E172E] rounded-md'>
+                            <img src={Img} className='w-8' alt="Order Image" />
+                        </div>
+                        <div className='flex-col'>
+                            <p className='text-base font-bold text-white-body'>Project Briefing</p>
+                            <p className='text-sm text-slate-500'>Project Manager</p>
+                        </div>
+                    </div>
+                    <div className='flex gap-3 items-center'>
+                        <div className='px-4 py-2 bg-[#0E172E] rounded-md'>
+                            <img src={Img} className='w-8' alt="Order Image" />
+                        </div>
+                        <div className='flex-col'>
+                            <p className='text-base font-bold text-white-body'>Project Briefing</p>
+                            <p className='text-sm text-slate-500'>Project Manager</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+      )
+}
@@ -0,0 +1,80 @@
+import React from 'react'
+import Img from '../../../assets/user_avatar.jpg'
+import CustomCounter from '../../CustomCounter'
+
+export default function Tickets() {
+  return (
+    <div className='h-full p-2 sm:p-4 large:p-8 flex flex-col gap-16 overflow-y-auto aside-scroll-design'>
+        <div className='flex flex-col gap-4'>
+            <p className='text-base text-white-body font-bold'>Support Ticket</p>
+            <div className='grid grid-cols-2 gap-4 sm:gap-6 large:gap-8'>
+                <div className='p-2 sm:p-3 large:p-4 flex flex-col border border-slate-500 border-dashed'>
+                    <p className='text-base font-bold text-white-body'>
+                    <CustomCounter targetNumber={18} timeInSeconds={1} />
+                    </p>
+                    <p className='text-sm text-slate-500'>Pending</p>
+                </div>
+                <div className='p-2 sm:p-3 large:p-4 flex flex-col border border-slate-500 border-dashed'>
+                    <p className='text-base font-bold text-white-body'>
+                    <CustomCounter targetNumber={2} timeInSeconds={1} />
+                    </p>
+                    <p className='text-sm text-slate-500'>Offers</p>
+                </div>
+                <div className='p-2 sm:p-3 large:p-4 flex flex-col border border-slate-500 border-dashed'>
+                    <p className='text-base font-bold text-white-body'>
+                    <CustomCounter targetNumber={3} timeInSeconds={1} />
+                    </p>
+                    <p className='text-sm text-slate-500'>Created</p>
+                </div>
+                <div className='p-2 sm:p-3 large:p-4 flex flex-col border border-slate-500 border-dashed'>
+                    <p className='text-base font-bold text-white-body'>
+                    <CustomCounter targetNumber={1} timeInSeconds={1} />
+                    </p>
+                    <p className='text-sm text-slate-500'>Rejected</p>
+                </div>
+            </div>
+        </div>
+        <div className='flex flex-col gap-4'>
+            <p className='text-base text-white-body font-bold'>Best Ticket</p>
+            <div className='flex flex-col gap-4'>
+                <div className='flex gap-3 items-center'>
+                    <div className='px-4 py-2 bg-[#0E172E] rounded-md'>
+                        <img src={Img} className='w-8' alt="Order Image" />
+                    </div>
+                    <div className='flex-col'>
+                        <p className='text-base font-bold text-white-body'>Project Briefing</p>
+                        <p className='text-sm text-slate-500'>Project Manager</p>
+                    </div>
+                </div>
+                <div className='flex gap-3 items-center'>
+                    <div className='px-4 py-2 bg-[#0E172E] rounded-md'>
+                        <img src={Img} className='w-8' alt="Order Image" />
+                    </div>
+                    <div className='flex-col'>
+                        <p className='text-base font-bold text-white-body'>Project Briefing</p>
+                        <p className='text-sm text-slate-500'>Project Manager</p>
+                    </div>
+                </div>
+                <div className='flex gap-3 items-center'>
+                    <div className='px-4 py-2 bg-[#0E172E] rounded-md'>
+                        <img src={Img} className='w-8' alt="Order Image" />
+                    </div>
+                    <div className='flex-col'>
+                        <p className='text-base font-bold text-white-body'>Project Briefing</p>
+                        <p className='text-sm text-slate-500'>Project Manager</p>
+                    </div>
+                </div>
+                <div className='flex gap-3 items-center'>
+                    <div className='px-4 py-2 bg-[#0E172E] rounded-md'>
+                        <img src={Img} className='w-8' alt="Order Image" />
+                    </div>
+                    <div className='flex-col'>
+                        <p className='text-base font-bold text-white-body'>Project Briefing</p>
+                        <p className='text-sm text-slate-500'>Project Manager</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+  )
+}
@@ -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>
  )
@@ -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>
+  )
+}
@@ -18,7 +18,7 @@ export default function GeneralLayoutContext({children}) {

    const [shrinkAside, setShrinkAside] = useState(false)

-    const [showAsideDrawer, setShowAsideDrawer] = useState(false)
+    const [showAsideDrawer, setShowAsideDrawer] = useState('')

    const handleActiveMenu = (name) => {
        if(activeMenu == name){
@@ -79,11 +79,13 @@ export default function GeneralLayoutContext({children}) {
    useEffect(()=>{
      window.addEventListener('resize', ()=>{
          setShrinkAside(false)
-          setShowAsideDrawer(false)
+          setShowAsideDrawer('')
+          setActiveMenu('')
      })
      return () => window.removeEventListener('resize', window.addEventListener('resize', ()=>{
          setShrinkAside(false)
-          setShowAsideDrawer(false)
+          setShowAsideDrawer('')
+          setActiveMenu('')
      }))
  },[])

@@ -1,25 +1,147 @@
 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 (
    <div className='w-full flex flex-col gap-8'>
      <BreadcrumbCom title='Dashboard' paths={['Home', 'Dashboard']} />
      <div className='grid grid-cols-1 gap-8'>
-        <div className='w-full grid grid-cols-1 md:grid-cols-3 gap-8'>
-          <div className='w-full bg-[#F7D9E3] dark:bg-black-box text-black-body dark:text-white-body hover:scale-[1.0] cursor-pointer rounded-lg h-[300px] shadow-round_black dark:shadow-round_white'></div>
-          <div className='w-full bg-[#CBF0F5] dark:bg-black-box text-black-body dark:text-white-body hover:scale-[1.0] cursor-pointer rounded-lg h-[300px] shadow-round_black dark:shadow-round_white'></div>
-          <div className='w-full bg-[#CBD4F4] dark:bg-black-box text-black-body dark:text-white-body hover:scale-[1.0] cursor-pointer rounded-lg h-[300px] shadow-round_black dark:shadow-round_white'></div>
+        <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='flex gap-2 items-end font-bold'>
+              <p className='text-3xl'><CustomCounter targetNumber='47' timeInSeconds='1' /></p>
+              <p>- 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='flex gap-2 items-end font-bold'>
+              <p className='text-3xl'>$<CustomCounter targetNumber='500' timeInSeconds='1' /></p>
+              <p>+ 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='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'>
+                  <Icons name='sales' />
+                </div>
+                <div>
+                  <p className='font-bold text-base'>$<CustomCounter targetNumber='50' timeInSeconds='1' />K</p>
+                  <p className='text-12 text-slate-500'>Sales</p>
+                </div>
+              </div>
+              <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'>
+                  <Icons name='sales' />
+                </div>
+                <div>
+                  <p className='font-bold text-base'>$<CustomCounter targetNumber='50' timeInSeconds='1' />K</p>
+                  <p className='text-12 text-slate-500'>Revenue</p>
+                </div>
+              </div>
+              <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'>
+                  <Icons name='sales' />
+                </div>
+                <div>
+                  <p className='font-bold text-base'>$<CustomCounter targetNumber='265' timeInSeconds='1' />K</p>
+                  <p className='text-12 text-slate-500'>Tickets</p>
+                </div>
+              </div>
+              <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'>
+                  <Icons name='sales' />
+                </div>
+                <div>
+                  <p className='font-bold text-base'>$<CustomCounter targetNumber='5' timeInSeconds='1' />M</p>
+                  <p className='text-12 text-slate-500'>Tasks</p>
+                </div>
+              </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-round_black dark:shadow-round_white'>
-            <div className='flex justify-between items-center'>
-              <div className='flex flex-col gap-1'>
+          <div className='flex flex-col gap-8 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='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,6,7]} 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 ">
+                                        Dummy text
+                                    </td>
+                                    <td className="px-2 ">
+                                        <div className="flex items-center">
+                                        Dummy
+                                        </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>
@@ -29,6 +29,9 @@ module.exports = {
        }
      },
      screens: {
+        xxs: '300px',
+        xs: '400px',
+        large: '1535px',
        max_width: '1700px'
      },
      fontSize:{
@@ -40,10 +43,10 @@ module.exports = {
        login_gradient: 'linear-gradient(to right, #8e54e9 0, #4776e6 100%)'
      },
      boxShadow: {
-        round_black: '0 0px 1px 0 rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.19)',
-        round_white: '0 0px 1px 0 rgba(255, 255, 255, 0.2), 0 1px 5px 0 rgba(255, 255, 255, 0.19)'
-        // round_black: '0px 0px 2px rgba(0, 0, 0, 0.19)',
-        // round_white: '0px 0px 2px rgba(255, 255, 255, 0)'
+        // round_black: '0 0px 1px 0 rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.19)',
+        // round_white: '0 0px 1px 0 rgba(255, 255, 255, 0.2), 0 1px 5px 0 rgba(255, 255, 255, 0.19)'
+        round_black: '0px 3px 4px 0px rgba(0, 0, 0, 0.03)',
+        round_white: '0px 3px 4px 0px rgba(255, 255, 255, 0.03)'
      }
    },
  },
Author	SHA1	Message	Date
victorAnumudu	cf01df2a8a	added home dummy table	2025-04-07 19:28:23 +01:00
ameye	6ee8b82513	Merge branch 'homepage-update' of DigiFi/digifi-FirstOffice into master	2025-04-07 16:19:41 +00:00
victorAnumudu	a9f22234eb	added cobtent to home page	2025-04-07 16:13:58 +01:00
ameye	d9cd1375e1	Merge branch 'header-fix' of DigiFi/digifi-FirstOffice into master	2025-04-07 12:32:54 +00:00
victorAnumudu	3671270ee3	aside bar width increased	2025-04-07 11:36:03 +01:00
victorAnumudu	c8e167d9d0	right slider width adjusted	2025-04-07 11:24:09 +01:00
victorAnumudu	8c29d5adcc	mobile right slider bar bug fixed	2025-04-07 09:48:38 +01:00
victorAnumudu	91c5491274	aside bar bug fixed	2025-04-07 09:38:36 +01:00
victorAnumudu	24e6c6846a	sticky header bug fixed	2025-04-07 09:32:10 +01:00
victor.ebuka	f26def10ba	Merge branch 'layout-change-contd' of DigiFi/digifi-FirstOffice into master	2025-04-06 12:35:27 +00:00
victorAnumudu	06a0d4d7cd	more update added to layout design	2025-04-06 13:33:43 +01:00
victor.ebuka	a19942b12b	Merge branch 'layout-change' of DigiFi/digifi-FirstOffice into master	2025-04-06 01:25:47 +00:00