DigiFi/digifi-FirstOffice
1
0
Fork 0
Code Issues Pull Requests Releases Activity

layout redesign contd #3

Merged
victor.ebuka merged 1 commits from layout-change-contd into master 2025-04-06 12:35:27 +00:00
Conversation 0 Commits 1 Files Changed 15
+359 -29
15 changed files with 359 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/CustomCounter.jsx
+29
View File
@@ -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;
src/components/Icons.jsx
+7
View File
@@ -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}) {
<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}`} />
:
null
}
src/components/layouts/DashboardHeader.jsx
+7 -3
View File
@@ -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" />
:
src/components/layouts/DashboardLayout.jsx
+19 -7
View File
@@ -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-white/20 transition-all cursor-pointer`} onClick={()=>setShowAsideDrawer('')} ></div>
<div className={`px-8 py-4 h-full w-4/5 sm:w-72 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-[350px]'>
<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-[350px] 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-white/20 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 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-[350px] bg-[#192440] dark:bg-[#1E1E2D] text-white-body`}>
<RightAsideBar />
</div>
</div>
</div>
)
}
src/components/layouts/HandBurger.jsx
+5 -6
View File
@@ -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"
}`}
src/components/layouts/aside/AsideLink.jsx
+1 -1
View File
@@ -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)}
>
src/components/layouts/aside/AsideLinkWithSubLinks.jsx
+1 -1
View File
@@ -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>
src/components/layouts/aside/DashboardAside.jsx
+2 -2
View File
@@ -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>
src/components/layouts/rightaside/Orders.jsx
+80
View File
@@ -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>
)
}
src/components/layouts/rightaside/RightAsideBar.jsx
+37
View File
@@ -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>
)
}
src/components/layouts/rightaside/Tasks.jsx
+80
View File
@@ -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>
)
}
src/components/layouts/rightaside/Tickets.jsx
+80
View File
@@ -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>
)
}
src/context/GeneralLayoutContext.jsx
+3 -3
View File
@@ -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('')
}))
},[])
src/pages/HomePage.jsx
+3 -2
View File
@@ -6,13 +6,14 @@ export default function HomePage() {
<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 grid grid-cols-1 md:grid-cols-2 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 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>
<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='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'>
<p className='font-bold text-base'>Members Statistics</p>
tailwind.config.js
+5 -4
View File
@@ -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)'
}
},
},