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

dashboard layout updated

Browse Source
This commit is contained in:
victorAnumudu
2025-02-13 10:23:43 +01:00
parent 2d7165125c
commit 586e3a991a
5 changed files with 37 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/MainBtn.jsx
+2 -2
View File
@@ -3,7 +3,7 @@ export default function MainBtn({
className, className,
text, text,
shrinkAside, shrinkAside,
icon, children,
loading, loading,
disabled disabled
}) { }) {
@@ -13,7 +13,7 @@ export default function MainBtn({
className={`py-3 px-4 rounded text-12 lg:text-lg ${className || ''} ${(disabled || loading) && 'opacity-60'}`} className={`py-3 px-4 rounded text-12 lg:text-lg ${className || ''} ${(disabled || loading) && 'opacity-60'}`}
onClick={onClick} onClick={onClick}
> >
{icon && <i className={`fa-solid ${icon}`}></i>} {children && children}
{shrinkAside ? '' : loading? 'Loading...' : text} {shrinkAside ? '' : loading? 'Loading...' : text}
</button> </button>
) )
src/components/breadcrumb/BreadcrumbCom.jsx
+1 -1
View File
@@ -6,7 +6,7 @@ export default function BreadcrumbCom({title, paths}) {
<div className='w-full py-2 flex justify-between items-center'> <div className='w-full py-2 flex justify-between items-center'>
<h1 className='text-12 sm:text-lg md:text-2xl text-black dark:text-black-gray font-semibold'>{title}</h1> <h1 className='text-12 sm:text-lg md:text-2xl text-black dark:text-black-gray font-semibold'>{title}</h1>
<div className='flex gap-2 items-center text-black-gray dark:text-black-gray text-base'> <div className='flex gap-2 items-center text-black-gray dark:text-black-gray text-base'>
<TiHomeOutline /> <TiHomeOutline className='text-black dark:text-black-gray' />
{paths.map((item, index) => ( {paths.map((item, index) => (
<div className='flex gap-2 items-center text-black dark:text-black-gray text-10 sm:text-sm' key={index}> <div className='flex gap-2 items-center text-black dark:text-black-gray text-10 sm:text-sm' key={index}>
<MdKeyboardDoubleArrowRight /> <MdKeyboardDoubleArrowRight />
src/components/layouts/aside/AsideLink.jsx
+2 -3
View File
@@ -1,6 +1,6 @@
import { Link, useLocation } from "react-router-dom" import { Link, useLocation } from "react-router-dom"
export default function AsideLink({shrinkAside, name, to, icon}) { export default function AsideLink({shrinkAside, name, to, children}) {
const {pathname} = useLocation() const {pathname} = useLocation()
@@ -9,8 +9,7 @@ export default function AsideLink({shrinkAside, name, to, icon}) {
className={`w-full flex items-center gap-2 px-4 py-2 my-1 text-[13px] font-semibold rounded-md hover:text-white-light hover:bg-white/10 ${pathname == to ? 'bg-white/10 text-white-light' : 'text-slate-400'}`} className={`w-full flex items-center gap-2 px-4 py-2 my-1 text-[13px] font-semibold rounded-md hover:text-white-light hover:bg-white/10 ${pathname == to ? 'bg-white/10 text-white-light' : 'text-slate-400'}`}
to={to} to={to}
> >
{/* {icon && <span className={`after:content-['24']`}></span>} */} {children && children}
{icon && <i className={`${icon}`}></i>}
{shrinkAside ? '' : name} {shrinkAside ? '' : name}
</Link> </Link>
) )
src/components/layouts/aside/DashboardAside.jsx
+27 -25
View File
@@ -11,6 +11,7 @@ import { generalLayoutContext } from "../../../context/GeneralLayoutContext";
import { AiOutlineDashboard } from "react-icons/ai"; import { AiOutlineDashboard } from "react-icons/ai";
import { IoPeople } from "react-icons/io5"; import { IoPeople } from "react-icons/io5";
import { GoDotFill } from "react-icons/go"; import { GoDotFill } from "react-icons/go";
import { TbLogout2 } from "react-icons/tb";
export default function DashboardAside({shrinkAside=false}) { export default function DashboardAside({shrinkAside=false}) {
@@ -44,54 +45,55 @@ export default function DashboardAside({shrinkAside=false}) {
<hr className="border-slate-400" /> <hr className="border-slate-400" />
<div className="p-4 w-full h-full overflow-y-auto"> <div className="p-4 w-full h-full overflow-y-auto">
<Link <AsideLink
className={`w-full flex items-center gap-2 px-4 py-2 my-1 text-[13px] font-semibold rounded hover:text-white-light hover:bg-white/10 ${pathname == RouteLinks.homePage ? 'bg-white/10 text-white-light' : 'text-slate-400'}`}
to={RouteLinks.homePage} to={RouteLinks.homePage}
> shrinkAside={shrinkAside}
name='Dashboard'
>
<AiOutlineDashboard className="text-base" /> <AiOutlineDashboard className="text-base" />
<span>{shrinkAside ? '' : 'Dashboard'}</span> </AsideLink>
</Link>
<div className="w-full"> <div className="w-full">
<h1 className="px-4 py-2 text-12 text-slate-400 font-semibold uppercase mt-3 mb-1 border-b border-slate-800">ADMIN</h1> <h1 className="px-4 py-2 text-12 text-slate-400 font-semibold uppercase mt-3 mb-1 border-b border-slate-800">ADMIN</h1>
<Link <AsideLink
className={`w-full flex items-center gap-2 px-4 py-2 my-1 text-[13px] font-semibold rounded-md hover:text-white-light hover:bg-white/10 ${pathname == RouteLinks.usersPage ? 'bg-white/10 text-white-light' : 'text-slate-400'}`}
to={RouteLinks.usersPage} to={RouteLinks.usersPage}
> shrinkAside={shrinkAside}
name='Users'
>
<IoPeople className="text-base" /> <IoPeople className="text-base" />
<span>{shrinkAside ? '' : 'Users'}</span> </AsideLink>
</Link>
</div> </div>
<div className="w-full"> <div className="w-full">
{/* <h1 className="px-4 py-2 text-12 text-slate-400 font-semibold uppercase mt-3 mb-1 border-b border-slate-800">LOANS</h1> */} {/* <h1 className="px-4 py-2 text-12 text-slate-400 font-semibold uppercase mt-3 mb-1 border-b border-slate-800">LOANS</h1> */}
<AsideLinkWithSubLinks hideSubMenu={hideSubMenu} setHideSubMenu={handleHideSubMenu} shrinkAside={shrinkAside} name='Loans' icon='fa-solid fa-list'> <AsideLinkWithSubLinks hideSubMenu={hideSubMenu} setHideSubMenu={handleHideSubMenu} shrinkAside={shrinkAside} name='Loans' icon='fa-solid fa-list'>
<Link <AsideLink
className={`w-full flex items-center gap-2 px-4 py-2 my-1 text-[13px] font-semibold rounded-md hover:text-white-light hover:bg-white/10 ${pathname == RouteLinks.approvedLoans ? 'bg-white/10 text-white-light' : 'text-slate-400'}`}
to={RouteLinks.approvedLoans} to={RouteLinks.approvedLoans}
> shrinkAside={shrinkAside}
name='Approved'
>
<GoDotFill className="text-base" /> <GoDotFill className="text-base" />
<span>{shrinkAside ? '' : 'Approved'}</span> </AsideLink>
</Link> <AsideLink
<Link
className={`w-full flex items-center gap-2 px-4 py-2 my-1 text-[13px] font-semibold rounded-md hover:text-white-light hover:bg-white/10 ${pathname == RouteLinks.pendingLoans ? 'bg-white/10 text-white-light' : 'text-slate-400'}`}
to={RouteLinks.pendingLoans} to={RouteLinks.pendingLoans}
> shrinkAside={shrinkAside}
<GoDotFill className="text-base" /> name='Pending'
<span>{shrinkAside ? '' : 'Pending'}</span> >
</Link> <IoPeople className="text-base" />
</AsideLink>
</AsideLinkWithSubLinks> </AsideLinkWithSubLinks>
</div> </div>
</div> </div>
<div className='px-4 py-2'> <div className='px-4 py-2'>
<div className="bg-primary rounded w-full flex justify-center items-center gap-2"> <div className="bg-primary rounded w-full flex justify-center items-center gap-2">
<MainBtn <MainBtn
shrinkAside={shrinkAside} shrinkAside={shrinkAside}
icon='fa-solid fa-right-from-bracket'
text='Logout' text='Logout'
className="w-full text-center flex justify-center gap-2 items-center" className="w-full text-center flex justify-center gap-2 items-center"
onClick={()=>setLogoutModal(true)} onClick={()=>setLogoutModal(true)}
/> >
<TbLogout2 className="text-base" />
</MainBtn>
</div> </div>
</div> </div>
</div> </div>
src/pages/HomePage.jsx
+5 -5
View File
@@ -7,13 +7,13 @@ export default function HomePage() {
<BreadcrumbCom title='Dashboard' paths={['Home', 'Dashboard']} /> <BreadcrumbCom title='Dashboard' paths={['Home', 'Dashboard']} />
<div className='grid grid-cols-1 2xl:grid-cols-2 gap-8'> <div className='grid grid-cols-1 2xl:grid-cols-2 gap-8'>
<div className='w-full grid grid-cols-1 sm:grid-cols-2 gap-8'> <div className='w-full grid grid-cols-1 sm:grid-cols-2 gap-8'>
<div className='w-full bg-white dark:bg-slate-800 hover:scale-[1.03] cursor-pointer rounded h-[300px] shadow-round_black dark:shadow-round_white'></div> <div className='w-full bg-white dark:bg-slate-800 hover:scale-[1.02] cursor-pointer rounded h-[300px] shadow-round_black dark:shadow-round_white'></div>
<div className='w-full bg-white dark:bg-slate-800 hover:scale-[1.03] cursor-pointer rounded h-[300px] shadow-round_black dark:shadow-round_white'></div> <div className='w-full bg-white dark:bg-slate-800 hover:scale-[1.02] cursor-pointer rounded h-[300px] shadow-round_black dark:shadow-round_white'></div>
<div className='w-full bg-white dark:bg-slate-800 hover:scale-[1.03] cursor-pointer rounded h-[300px] shadow-round_black dark:shadow-round_white'></div> <div className='w-full bg-white dark:bg-slate-800 hover:scale-[1.02] cursor-pointer rounded h-[300px] shadow-round_black dark:shadow-round_white'></div>
<div className='w-full bg-white dark:bg-slate-800 hover:scale-[1.03] cursor-pointer rounded h-[300px] shadow-round_black dark:shadow-round_white'></div> <div className='w-full bg-white dark:bg-slate-800 hover:scale-[1.02] cursor-pointer rounded h-[300px] shadow-round_black dark:shadow-round_white'></div>
</div> </div>
<div className='w-full'> <div className='w-full'>
<div className='w-full bg-white dark:bg-slate-800 hover:scale-[1.03] cursor-pointer rounded h-full shadow-round_black dark:shadow-round_white'></div> <div className='w-full bg-white dark:bg-slate-800 hover:scale-[1.02] cursor-pointer rounded h-full shadow-round_black dark:shadow-round_white'></div>
</div> </div>
</div> </div>
</div> </div>