diff --git a/src/components/CustomCounter.jsx b/src/components/CustomCounter.jsx new file mode 100644 index 0000000..dbfdf98 --- /dev/null +++ b/src/components/CustomCounter.jsx @@ -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; diff --git a/src/components/Icons.jsx b/src/components/Icons.jsx index 0f9062d..a3d8445 100644 --- a/src/components/Icons.jsx +++ b/src/components/Icons.jsx @@ -6,6 +6,9 @@ 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"; + export default function Icons({name, className}) { @@ -33,6 +36,10 @@ export default function Icons({name, className}) { :name.toLowerCase() == 'settings' ? + :name.toLowerCase() == 'message' ? + + :name.toLowerCase() == 'right-panel' ? + : null } diff --git a/src/components/layouts/DashboardHeader.jsx b/src/components/layouts/DashboardHeader.jsx index c3f8410..f94bfa2 100644 --- a/src/components/layouts/DashboardHeader.jsx +++ b/src/components/layouts/DashboardHeader.jsx @@ -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*/}
-
- setShowAsideDrawer(prev => !prev)} showAside={showAsideDrawer} /> +
setShowAsideDrawer('aside')}> +
{/* USER AVATAR */} @@ -32,6 +33,9 @@ export default function DashboardHeader() { +
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'> + +
{/* MESSAGE */} {/* */} {/* THEME SELECTION */} -
+
{theme == 'dark' ? : diff --git a/src/components/layouts/DashboardLayout.jsx b/src/components/layouts/DashboardLayout.jsx index bb46ee2..9ea0968 100644 --- a/src/components/layouts/DashboardLayout.jsx +++ b/src/components/layouts/DashboardLayout.jsx @@ -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 (
-
+
- {/*
+ {/*
*/} -
-
setShowAsideDrawer(prev => !prev)} >
-
+
+
setShowAsideDrawer('')} >
+
-
+
- +
{/* main body section */} @@ -40,6 +41,17 @@ export default function DashboardLayout() {

Copyright @ {new Date().getFullYear()} - Developed by digiFi. All Rights Reserved

+ + {/* Right Aisde */} + +
setShowAsideDrawer('')}> + {/*
setShowAsideDrawer('')} >
*/} +
+ +
+
) } diff --git a/src/components/layouts/HandBurger.jsx b/src/components/layouts/HandBurger.jsx index 875202c..b3dbf14 100644 --- a/src/components/layouts/HandBurger.jsx +++ b/src/components/layouts/HandBurger.jsx @@ -1,9 +1,8 @@ -export default function HandBurger({showAside, asideDisplay, barColor}) { +export default function HandBurger({showAside, barColor}) { return (
{/*
*/}
setShowAsideDrawer(false)} > diff --git a/src/components/layouts/aside/AsideLinkWithSubLinks.jsx b/src/components/layouts/aside/AsideLinkWithSubLinks.jsx index 3187cbf..c2bed2f 100644 --- a/src/components/layouts/aside/AsideLinkWithSubLinks.jsx +++ b/src/components/layouts/aside/AsideLinkWithSubLinks.jsx @@ -20,7 +20,7 @@ export default function AsideLinkWithSubLinks({name, icon, to, children, isOpen}
- diff --git a/src/components/layouts/aside/DashboardAside.jsx b/src/components/layouts/aside/DashboardAside.jsx index 2a6a48a..b4573b1 100644 --- a/src/components/layouts/aside/DashboardAside.jsx +++ b/src/components/layouts/aside/DashboardAside.jsx @@ -57,7 +57,7 @@ export default function DashboardAside() { return (
{link.title && -

{link.title}

+

{link.title}

} <> @@ -113,7 +113,7 @@ export default function DashboardAside() {

username@gmail.com

-
diff --git a/src/components/layouts/rightaside/Orders.jsx b/src/components/layouts/rightaside/Orders.jsx new file mode 100644 index 0000000..afbe367 --- /dev/null +++ b/src/components/layouts/rightaside/Orders.jsx @@ -0,0 +1,80 @@ +import React from 'react' +import Img from '../../../assets/user_avatar.jpg' +import CustomCounter from '../../CustomCounter' + +export default function Orders() { + return ( +
+
+

Support Ticket

+
+
+

+ +

+

Pending

+
+
+

+ +

+

Approved

+
+
+

+ +

+

Rejected

+
+
+

+ +

+

Created

+
+
+
+
+

Best Ticket

+
+
+
+ Order Image +
+
+

Project Briefing

+

Project Manager

+
+
+
+
+ Order Image +
+
+

Project Briefing

+

Project Manager

+
+
+
+
+ Order Image +
+
+

Project Briefing

+

Project Manager

+
+
+
+
+ Order Image +
+
+

Project Briefing

+

Project Manager

+
+
+
+
+
+ ) +} diff --git a/src/components/layouts/rightaside/RightAsideBar.jsx b/src/components/layouts/rightaside/RightAsideBar.jsx new file mode 100644 index 0000000..93486c6 --- /dev/null +++ b/src/components/layouts/rightaside/RightAsideBar.jsx @@ -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 ( +
+ {/* Menu */} +
+ + + +
+ + {/* Body */} + {active == 'orders' && } + {active == 'tickets' && } + {active == 'tasks' && } +
+ ) +} diff --git a/src/components/layouts/rightaside/Tasks.jsx b/src/components/layouts/rightaside/Tasks.jsx new file mode 100644 index 0000000..61acbeb --- /dev/null +++ b/src/components/layouts/rightaside/Tasks.jsx @@ -0,0 +1,80 @@ +import React from 'react' +import Img from '../../../assets/user_avatar.jpg' +import CustomCounter from '../../CustomCounter' + +export default function Tasks() { + return ( +
+
+

Support Tasks

+
+
+

+ +

+

Pending

+
+
+

+ +

+

Completed

+
+
+

+ +

+

Rejected

+
+
+

+ +

+

Created

+
+
+
+
+

Best Tasks

+
+
+
+ Order Image +
+
+

Project Briefing

+

Project Manager

+
+
+
+
+ Order Image +
+
+

Project Briefing

+

Project Manager

+
+
+
+
+ Order Image +
+
+

Project Briefing

+

Project Manager

+
+
+
+
+ Order Image +
+
+

Project Briefing

+

Project Manager

+
+
+
+
+
+ ) +} diff --git a/src/components/layouts/rightaside/Tickets.jsx b/src/components/layouts/rightaside/Tickets.jsx new file mode 100644 index 0000000..667a1ec --- /dev/null +++ b/src/components/layouts/rightaside/Tickets.jsx @@ -0,0 +1,80 @@ +import React from 'react' +import Img from '../../../assets/user_avatar.jpg' +import CustomCounter from '../../CustomCounter' + +export default function Tickets() { + return ( +
+
+

Support Ticket

+
+
+

+ +

+

Pending

+
+
+

+ +

+

Offers

+
+
+

+ +

+

Created

+
+
+

+ +

+

Rejected

+
+
+
+
+

Best Ticket

+
+
+
+ Order Image +
+
+

Project Briefing

+

Project Manager

+
+
+
+
+ Order Image +
+
+

Project Briefing

+

Project Manager

+
+
+
+
+ Order Image +
+
+

Project Briefing

+

Project Manager

+
+
+
+
+ Order Image +
+
+

Project Briefing

+

Project Manager

+
+
+
+
+
+ ) +} diff --git a/src/context/GeneralLayoutContext.jsx b/src/context/GeneralLayoutContext.jsx index 49a9d1e..4ffd2ce 100644 --- a/src/context/GeneralLayoutContext.jsx +++ b/src/context/GeneralLayoutContext.jsx @@ -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,11 @@ export default function GeneralLayoutContext({children}) { useEffect(()=>{ window.addEventListener('resize', ()=>{ setShrinkAside(false) - setShowAsideDrawer(false) + setShowAsideDrawer('') }) return () => window.removeEventListener('resize', window.addEventListener('resize', ()=>{ setShrinkAside(false) - setShowAsideDrawer(false) + setShowAsideDrawer('') })) },[]) diff --git a/src/pages/HomePage.jsx b/src/pages/HomePage.jsx index f31355d..048b8ba 100644 --- a/src/pages/HomePage.jsx +++ b/src/pages/HomePage.jsx @@ -6,13 +6,14 @@ export default function HomePage() {
-
+
+
-
+

Members Statistics

diff --git a/tailwind.config.js b/tailwind.config.js index c413a09..df5167a 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -29,6 +29,7 @@ module.exports = { } }, screens: { + large: '1535px', max_width: '1700px' }, fontSize:{ @@ -40,10 +41,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)' } }, },