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 09:26:49 +01:00
parent d65380363e
commit e365251543
12 changed files with 79 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/RouteLinks.js
+2
View File
@@ -3,6 +3,8 @@ const RouteLinks = {
errorPage: '*',
homePage: '/',
usersPage: '/users',
approvedLoans: '/loans/approved',
pendingLoans: '/loans/pending',
}
export default RouteLinks
src/SiteRoutes.jsx
+4
View File
@@ -8,6 +8,8 @@ import PageLoader from './components/PageLoader'
import LoginPage from './pages/LoginPage' // LOGIN PAGE
import HomePage from './pages/HomePage' // Home PAGE
import UsersPage from './pages/UsersPage' // Users PAGE
import ApprovedLoansPage from './pages/ApprovedLoansPage' // APPROVED LOANS PAGE
import PendingLoansPage from './pages/PendingLoansPage' // PENDING LOANS PAGE
// const Home = lazy(() => import('./pages/Home'));
@@ -20,6 +22,8 @@ export default function SiteRoutes() {
<Route element={<UserExist />}>
<Route path={RouteLinks.homePage} element={<HomePage />} /> {`*/HOME PAGE*/`}
<Route path={RouteLinks.usersPage} element={<UsersPage />} /> {`*/USERS PAGE*/`}
<Route path={RouteLinks.approvedLoans} element={<ApprovedLoansPage />} /> {`*/APPROVED LOANS PAGE*/`}
<Route path={RouteLinks.pendingLoans} element={<PendingLoansPage />} /> {`*/PENDING LOANS PAGE*/`}
</Route>
{/* ERROR PAGE */}
src/components/DummyLogo.jsx
+1 -1
View File
@@ -2,7 +2,7 @@ export default function DummyLogo() {
return (
<div className="w-20 rounded cursor-pointer bg-primary text-white-light p-2 flex flex-col justify-center items-center gap-0">
<h1 className="text-sm font-bold">digiFI</h1>
<p className="text-12">Admin</p>
<p className="text-12">Logo</p>
</div>
)
}
src/components/breadcrumb/BreadcrumbCom.jsx
+4 -4
View File
@@ -4,13 +4,13 @@ import { TiHomeOutline } from 'react-icons/ti'
export default function BreadcrumbCom({title, paths}) {
return (
<div className='w-full py-2 flex justify-between items-center'>
<h1 className='text-12 sm:text-lg md:text-2xl text-black-gray font-semibold'>{title}</h1>
<div className='flex gap-2 items-center text-black-gray text-base'>
<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'>
<TiHomeOutline />
{paths.map((item, index) => (
<div className='flex gap-2 items-center 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 />
<p className={`${index + 1 == paths.length ? 'text-sky-600' : ''}`}>{item}</p>
<p className={`${index + 1 == paths.length ? 'text-sky-600 dark:text-black-gray' : ''}`}>{item}</p>
</div>
))}
</div>
src/components/layouts/DashboardLayout.jsx
+1 -1
View File
@@ -55,7 +55,7 @@ export default function DashboardLayout() {
</div>
{/* FOOTER SECTION */}
<footer className="sticky bottom-0 text-center lg:text-end w-full bg-white dark:bg-black dark:text-white-light p-3 md:px-10 shadow-[0px_0px_2px_black]">
<footer className="sticky bottom-0 text-center lg:text-end w-full bg-white dark:bg-slate-800 dark:text-white-light p-3 md:px-10 shadow-[0px_0px_2px_black]">
<p className="text-10">Copyright @ {new Date().getFullYear()} - Developed by digiFi. All Rights Reserved</p>
</footer>
</div>
src/components/layouts/LogoutModal.jsx
+1 -1
View File
@@ -21,7 +21,7 @@ export default function LogoutModal({close}) {
return (
<ModalWrapper
>
<div className="relative bg-white rounded-lg shadow dark:bg-gray-700 dark:text-white">
<div className="relative bg-white rounded-lg shadow-round_black dark:shadow-round_white dark:bg-gray-700 dark:text-white">
{/* <!-- Modal header --> */}
<div className="flex items-center justify-between p-4 md:p-5 border-b rounded-t dark:border-gray-600">
<h3 className="text-xl font-semibold text-gray-900 dark:text-white">
src/components/layouts/aside/AsideLinkWithSubLinks.jsx
+5 -12
View File
@@ -1,5 +1,5 @@
import { ReactNode } from "react"
// import { useLocation } from "react-router-dom"
import { FaCaretDown } from "react-icons/fa";
import { FaRegMoneyBill1 } from "react-icons/fa6";
export default function AsideLinkWithSubLinks({shrinkAside, name, icon, hideSubMenu, setHideSubMenu, children}) {
@@ -11,19 +11,12 @@ export default function AsideLinkWithSubLinks({shrinkAside, name, icon, hideSubM
// const [hideSubMenu, setHideSubMenu] = useState(true)
return (
// <Link
// className={`w-full flex items-center gap-2 px-4 py-2 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}
// >
// {icon && <i className={`${icon}`}></i>}
// {shrinkAside ? '' : name}
// </Link>
<div
className={`w-full px-4 text-[13px] font-semibold rounded-md`}
className={`w-full px-4 text-[13px] font-semibold rounded`}
>
<button onClick={setHideSubMenu} name={name} className="py-2 w-full flex items-center justify-between gap-2 cursor-pointer text-slate-400">
<span className="flex gap-2 items-center">{icon && <i className={`${icon}`}></i>}{shrinkAside ? '' : name}</span>
<i className={`fa-solid fa-caret-up ${(hideSubMenu && hideSubMenu==name) ? 'rotate-0' : 'rotate-180'}`}></i>
<span className="flex gap-2 items-center">{icon && <FaRegMoneyBill1 className="text-base" />}{shrinkAside ? '' : name}</span>
<FaCaretDown className={`text-base ${(hideSubMenu && hideSubMenu==name) ? 'rotate-180' : 'rotate-0'}`} />
</button>
<div className={`w-full ${(hideSubMenu && hideSubMenu==name) ? 'block' : 'hidden'}`}>
{children}
src/components/layouts/aside/DashboardAside.jsx
+22 -19
View File
@@ -10,6 +10,7 @@ import { generalLayoutContext } from "../../../context/GeneralLayoutContext";
import { AiOutlineDashboard } from "react-icons/ai";
import { IoPeople } from "react-icons/io5";
import { GoDotFill } from "react-icons/go";
export default function DashboardAside({shrinkAside=false}) {
@@ -44,7 +45,7 @@ export default function DashboardAside({shrinkAside=false}) {
<div className="p-4 w-full h-full overflow-y-auto">
<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.homePage ? '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 hover:text-white-light hover:bg-white/10 ${pathname == RouteLinks.homePage ? 'bg-white/10 text-white-light' : 'text-slate-400'}`}
to={RouteLinks.homePage}
>
<AiOutlineDashboard className="text-base" />
@@ -52,7 +53,7 @@ export default function DashboardAside({shrinkAside=false}) {
</Link>
<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
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}
@@ -62,26 +63,28 @@ export default function DashboardAside({shrinkAside=false}) {
</Link>
</div>
{/* <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>
<AsideLinkWithSubLinks hideSubMenu={hideSubMenu} setHideSubMenu={handleHideSubMenu} shrinkAside={shrinkAside} name='us' icon='fa-solid fa-list'>
<AsideLink shrinkAside={shrinkAside} name='Admin List' to={RouteLinks.dashboardAdminList} icon='fa-solid fa-circle text-[5px]' />
<AsideLink shrinkAside={shrinkAside} name='Users List' to={RouteLinks.dashboardUserList} icon='fa-solid fa-circle text-[5px]' />
<AsideLinkWithSubLinks hideSubMenu={hideSubMenu} setHideSubMenu={handleHideSubMenu} shrinkAside={shrinkAside} name='me' icon='fa-solid fa-list'>
<AsideLink shrinkAside={shrinkAside} name='Admin List' to={RouteLinks.dashboardAdminList} icon='fa-solid fa-circle text-[5px]' />
<AsideLink shrinkAside={shrinkAside} name='Users List' to={RouteLinks.dashboardUserList} icon='fa-solid fa-circle text-[5px]' />
<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> */}
<AsideLinkWithSubLinks hideSubMenu={hideSubMenu} setHideSubMenu={handleHideSubMenu} shrinkAside={shrinkAside} name='Loans' icon='fa-solid fa-list'>
<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.approvedLoans ? 'bg-white/10 text-white-light' : 'text-slate-400'}`}
to={RouteLinks.approvedLoans}
>
<GoDotFill className="text-base" />
<span>{shrinkAside ? '' : 'Approved'}</span>
</Link>
<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}
>
<GoDotFill className="text-base" />
<span>{shrinkAside ? '' : 'Pending'}</span>
</Link>
</AsideLinkWithSubLinks>
</AsideLinkWithSubLinks>
</div> */}
{/* <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>
<AsideLink shrinkAside={shrinkAside} name='Admin List' to={RouteLinks.dashboardAdminList} icon='fa-solid fa-list' />
<AsideLink shrinkAside={shrinkAside} name='Users List' to={RouteLinks.dashboardUserList} icon='fa-solid fa-list' />
</div> */}
</div>
</div>
<div className='px-4 py-2'>
<div className="bg-primary rounded-md w-full flex justify-center items-center gap-2">
<div className="bg-primary rounded w-full flex justify-center items-center gap-2">
<MainBtn
shrinkAside={shrinkAside}
icon='fa-solid fa-right-from-bracket'
src/pages/ApprovedLoansPage.jsx
+13
View File
@@ -0,0 +1,13 @@
import React from 'react'
import BreadcrumbCom from '../components/breadcrumb/BreadcrumbCom'
export default function ApprovedLoansPage() {
return (
<div className='w-full'>
<BreadcrumbCom title='Approved Loans' paths={['Dashboard', 'Approved Loans']} />
<p className=''>
coming soon ...
</p>
</div>
)
}
src/pages/HomePage.jsx
+12 -4
View File
@@ -3,11 +3,19 @@ import BreadcrumbCom from '../components/breadcrumb/BreadcrumbCom'
export default function HomePage() {
return (
<div className='w-full'>
<div className='w-full flex flex-col gap-8'>
<BreadcrumbCom title='Dashboard' paths={['Home', 'Dashboard']} />
<p className=''>
coming soon ...
</p>
<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 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.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.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.03] cursor-pointer rounded h-[300px] shadow-round_black dark:shadow-round_white'></div>
</div>
<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>
</div>
</div>
)
}
src/pages/PendingLoansPage.jsx
+13
View File
@@ -0,0 +1,13 @@
import React from 'react'
import BreadcrumbCom from '../components/breadcrumb/BreadcrumbCom'
export default function PendingLoansPage() {
return (
<div className='w-full'>
<BreadcrumbCom title='Pending Loans' paths={['Dashboard', 'Pending Loans']} />
<p className=''>
coming soon ...
</p>
</div>
)
}
tailwind.config.js
+1 -1
View File
@@ -9,7 +9,7 @@ module.exports = {
DEFAULT: '#393536',
},
black:{
DEFAULT: '#2c2e3e',
DEFAULT: '#222',
gray: '#a6a9b7'
},
primary: {