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

started dashboard layout

Browse Source
This commit is contained in:
victorAnumudu
2025-02-12 23:20:40 +01:00
parent 63bb8eee52
commit d65380363e
30 changed files with 1025 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.js
+21 -4
View File
@@ -1,12 +1,29 @@
import { useEffect } from 'react'
import { useLocation } from 'react-router-dom'
import SiteRoutes from './SiteRoutes';
import LogoutModal from './components/layouts/LogoutModal';
import { generalLayoutContext } from './context/GeneralLayoutContext';
import './App.css';
import LoginPage from './pages/LoginPage';
function App() {
const {pathname} = useLocation()
const {logoutModal, setLogoutModal} = generalLayoutContext()
useEffect(()=>{
window.scrollTo(0,0)
},[pathname])
return (
<div className="w-full">
<LoginPage />
</div>
<>
<SiteRoutes />
{/* LOGOUT MODAL */}
{logoutModal && <LogoutModal close={()=>setLogoutModal(false)} />}
</>
);
}
src/RouteLinks.js
+8
View File
@@ -0,0 +1,8 @@
const RouteLinks = {
loginPage: '/auth/login',
errorPage: '*',
homePage: '/',
usersPage: '/users',
}
export default RouteLinks
src/SiteRoutes.jsx
+36
View File
@@ -0,0 +1,36 @@
import { lazy, Suspense } from 'react'
import { Routes, Route } from 'react-router-dom'
import RouteLinks from './RouteLinks'
import UserExist from './authorization/UserExist'
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
// const Home = lazy(() => import('./pages/Home'));
export default function SiteRoutes() {
return (
<Routes>
<Route path={RouteLinks.loginPage} element={<LoginPage />} /> {`*/LOGIN PAGE*/`}
<Route element={<UserExist />}>
<Route path={RouteLinks.homePage} element={<HomePage />} /> {`*/HOME PAGE*/`}
<Route path={RouteLinks.usersPage} element={<UsersPage />} /> {`*/USERS PAGE*/`}
</Route>
{/* ERROR PAGE */}
<Route
path={RouteLinks.errorPage} // error page
element={
<Suspense fallback={<PageLoader />}>
<p>Error Page 1</p>
</Suspense>
}
/>
</Routes>
)
}
src/assets/user_avatar.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 28 KiB

src/authorization/UserExist.jsx
+47
View File
@@ -0,0 +1,47 @@
import { useEffect, useState } from "react"
import { useDispatch, useSelector } from "react-redux"
import { useNavigate, Outlet } from "react-router-dom"
import DashboardLayout from "../components/layouts/DashboardLayout"
import PageLoader from "../components/PageLoader"
import { updateUserDetails } from "../store/UserDetails"
import RouteLinks from "../RouteLinks"
export default function UserExist() {
const dispatch = useDispatch()
const navigate = useNavigate()
const [pageIsLoading, setPageIsLoading] = useState(true)
const {userDetails} = useSelector((state) => state.userDetails)
useEffect(()=>{
const loadUser = (token) =>{
const userExist = [{name:'dummy'}]
if(userExist && userExist.length > 0){
dispatch(updateUserDetails(userExist[0]))
setPageIsLoading(false)
}else{
navigate(RouteLinks.login, {replace:true})
}
}
if(userDetails.name){
setPageIsLoading(false)
}else if(!userDetails.name && localStorage.getItem('token')){
loadUser(localStorage.getItem('token'))
}else{
navigate(RouteLinks.loginPage, {replace:true})
}
},[])
return (
<>
{pageIsLoading ?
<PageLoader />
:
// <DashboardLayout></DashboardLayout>
<Outlet />
}
</>
)
}
src/components/DummyLogo.jsx
+8
View File
@@ -0,0 +1,8 @@
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>
</div>
)
}
src/components/MainBtn.jsx
+20
View File
@@ -0,0 +1,20 @@
export default function MainBtn({
onClick,
className,
text,
shrinkAside,
icon,
loading,
disabled
}) {
return (
<button
disabled={disabled}
className={`py-3 px-4 rounded text-12 lg:text-lg ${className || ''} ${(disabled || loading) && 'opacity-60'}`}
onClick={onClick}
>
{icon && <i className={`fa-solid ${icon}`}></i>}
{shrinkAside ? '' : loading? 'Loading...' : text}
</button>
)
}
src/components/auth/LoginCom.jsx
+17 -17
View File
@@ -1,21 +1,24 @@
import React, { useEffect, useState } from 'react'
// import { useLocation, useNavigate } from 'react-router-dom'
import { useDispatch } from 'react-redux'
import { useLocation, useNavigate } from 'react-router-dom'
// import { useMutation } from '@tanstack/react-query'
// import myLinks from '../../myLinks'
import Label from '../Label'
import InputText from '../InputText'
import PageLoader from '../PageLoader'
import { updateUserDetails } from "../../store/UserDetails";
// import { loginUser } from '../../services/siteServices'
import GoogleDownload from '../../assets/download/andriod.jpg'
import IOSDownload from '../../assets/download/apple.jpg'
import RouteLinks from '../../RouteLinks'
export default function LoginCom() {
const dispatch = useDispatch()
const navigate = useNavigate()
const [loading, setLoading] = useState(true)
// const {state} = useLocation()
// const navigate = useNavigate()
const [loading, setLoading] = useState(false)
const [fields, setFields] = useState({
username: '',
@@ -49,20 +52,18 @@ export default function LoginCom() {
// })
useEffect(()=>{
// if(state?.proceed != 'true'){
// return navigate(myLinks.getStarted, {replace:true})
// }
const handleLogin = () => {
setLoading(true)
const data = {name: 'dummy'}
localStorage.setItem('token', 'token')
dispatch(updateUserDetails({ ...data }));
setTimeout(()=>{
setLoading(false)
},200)
},[])
navigate(RouteLinks.homePage, {replace:true})
},500)
}
return (
<>
{loading ?
<PageLoader />
:
<div className={`h-screen bg-sky-300 flex flex-col items-center bg-[url('./assets/login-bg.jpg')] bg-cover bg-center bg-no-repeat`}>
<div className='flex flex-col gap-3 w-[80%] sm:w-[500px] bg-white rounded-xl mt-8 p-8 shadow'>
<div className='w-full mb-8 flex flex-col gap-1'>
@@ -88,7 +89,7 @@ export default function LoginCom() {
<div className='mt-5 flex justify-end items-center'>
{/* <button onClick={()=>{login.mutate(fields)}} disabled={login.isPending} className='px-3 py-2 bg-purple-800 text-white font-bold rounded'>{login.isPending ? 'loading...' : 'Login'}</button> */}
<button className='px-4 py-[5px] bg-purple-600 text-white font-bold rounded'>SIGN IN</button>
<button onClick={handleLogin} className='px-4 py-[5px] bg-purple-600 text-white font-bold rounded'>{loading ? 'Loading...' : 'SIGN IN'}</button>
</div>
<div className="hidden mt-8 gri grid-cols-2 gap-8">
@@ -107,7 +108,6 @@ export default function LoginCom() {
</div>
</div>
</div>
}
</>
)
}
src/components/breadcrumb/BreadcrumbCom.jsx
+19
View File
@@ -0,0 +1,19 @@
import { MdKeyboardDoubleArrowRight } from 'react-icons/md'
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'>
<TiHomeOutline />
{paths.map((item, index) => (
<div className='flex gap-2 items-center text-black-gray text-10 sm:text-sm' key={index}>
<MdKeyboardDoubleArrowRight />
<p className={`${index + 1 == paths.length ? 'text-sky-600' : ''}`}>{item}</p>
</div>
))}
</div>
</div>
)
}
src/components/layouts/DashboardHeader.jsx
+83
View File
@@ -0,0 +1,83 @@
import { LuSunDim } from "react-icons/lu";
import { IoMdSunny } from "react-icons/io";
import { generalLayoutContext } from "../../context/GeneralLayoutContext"
import UserAvatar from '../../assets/user_avatar.jpg'
import HandBurger from "./HandBurger"
import { Link } from "react-router-dom"
import RouteLinks from "../../RouteLinks"
export default function DashboardHeader({showAsideDrawer, setShowAsideDrawer}) {
const {theme, handleTheme, handleDrawer, setLogoutModal} = generalLayoutContext()
return (
<>
{/* HEADER SECTION*/}
<header className='sticky top-0 z-[777] w-full px-3 md:px-10 bg-white shadow-sm text-brown dark:shadow-white dark:bg-black 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} barColor="bg-black-gray" />
</div>
{/* USER AVATAR */}
<div className="flex gap-4 justify-end">
{/* GO TO WALLET */}
<Link to={RouteLinks.walletPage} className="relative px-2 flex justify-center items-center gap-2 cursor-pointer">
<i className="fa-solid fa-wallet text-xl"></i>
</Link>
{/* 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>
<div className="absolute w-4 h-4 right-0 top-4 text-[8px] flex justify-center items-center rounded-full bg-emerald-500 animate-pulse">1</div>
</button> */}
{/* NOTIFICATION */}
{/* <button onClick={()=>{}} className="relative px-2 flex justify-center items-center gap-2 cursor-pointer">
<i className="fa-regular fa-bell text-xl"></i>
<div className="absolute w-4 h-4 right-0 top-4 text-[8px] flex justify-center items-center rounded-full bg-emerald-500 animate-pulse">1</div>
</button> */}
{/* THEME SELECTION */}
<div onClick={handleTheme} className='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" />
:
<LuSunDim className="text-sm md:text-xl font-bold" />
}
</div>
{/* USER AVATRA */}
<div className='w-10 h-10 rounded shadow-round_black dark:shadow-round_white'>
<img src={UserAvatar} alt='user image' className='w-full h-full p-1 rounded-full' />
</div>
<div className='hidden relative group'>
<button id="dropdownActionButton" data-dropdown-toggle="dropdownAction" className="inline-flex items-center text-gray-500 border-0 focus:outline-none ring-0 font-medium rounded-md text-sm p-1 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700" type="button">
<span className="sr-only">Action button</span>
<div className='w-10 h-10 md:w-12 md:h-12 rounded-full shadow-sm shadow-brown'>
<img src={UserAvatar} alt='user image' className='w-full h-full p-1 rounded-full' />
</div>
<svg className="w-2.5 h-2.5 ms-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
<path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="m1 1 4 4 4-4"/>
</svg>
</button>
{/* <!-- Dropdown menu --> */}
<div id="dropdownAction" className={`hidden group-hover:block absolute right-0 z-10 bg-white divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-gray-700 dark:divide-gray-600`}>
<ul className="py-1 text-sm text-gray-700 dark:text-gray-200" aria-labelledby="dropdownActionButton">
<li>
<Link to={RouteLinks.walletPage} className="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Wallet</Link>
</li>
</ul>
<div className="py-1">
<button onClick={()=>setLogoutModal(true)} className="block w-full px-4 py-2 text-sm text-red-700 hover:bg-red-100 dark:hover:bg-red-600 dark:text-red-200 dark:hover:text-white">Logout</button>
</div>
</div>
</div>
</div>
</div>
</header>
</>
)
}
src/components/layouts/DashboardLayout.jsx
+64
View File
@@ -0,0 +1,64 @@
import { useEffect, useState } from 'react'
import { Outlet } from 'react-router-dom'
import { FaArrowRight, FaArrowLeft } from "react-icons/fa6";
import DashboardAside from './aside/DashboardAside'
import DashboardHeader from './DashboardHeader'
import { generalLayoutContext } from '../../context/GeneralLayoutContext'
export default function DashboardLayout() {
const [shrinkAside, setShrinkAside] = useState(false)
const [showAsideDrawer, setShowAsideDrawer] = useState(false)
useEffect(()=>{
window.addEventListener('resize', ()=>{
setShrinkAside(false)
setShowAsideDrawer(false)
})
},[])
return (
<div className='w-full flex relative m-auto h-screen overflow-hidden'>
<div
className={`${shrinkAside ? 'w-28' : 'w-72'} hidden lg:block relative z-[999] bg-black text-white-light`}
>
<div className='sticky top-0 h-full'>
<DashboardAside shrinkAside={shrinkAside} />
<button
className='absolute top-[72px] -translate-y-[50px] -right-5 block p-2 rounded shadow-round_black dark:shadow-round_white bg-white dark:bg-black text-black dark:text-white'
onClick={()=>setShrinkAside(prev => !prev)}
>
{shrinkAside ? <FaArrowRight />: <FaArrowLeft />}
</button>
</div>
</div>
<div onClick={()=>setShowAsideDrawer(prev => !prev)} className={`${showAsideDrawer ? 'left-0' : '-left-96'} w-72 lg:hidden fixed inset-0 z-[999] bg-black text-white-light`}>
<DashboardAside />
<button
className='absolute top-[72px] -translate-y-[50px] -right-5 block p-2 rounded shadow-round_black dark:shadow-round_white bg-white dark:bg-black text-black dark:text-white'
// onClick={()=>setShowAsideDrawer(prev => !prev)}
>
<FaArrowLeft />
</button>
</div>
<div className='relative w-full h-full overflow-y-auto'>
{/* HEADER SECTION generalLayoutContext*/}
<DashboardHeader showAsideDrawer={showAsideDrawer} setShowAsideDrawer={setShowAsideDrawer} />
{/* BODY SECTION */}
{/* main takes the full width minus that of the header and footer 72 for header, 39 for footer total 111 */}
<div className='main p-3 md:p-10 bg-white-light dark:bg-slate-800 text-brown dark:text-white-light min-h-[calc(99vh-111px)]'>
<Outlet />
</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]">
<p className="text-10">Copyright @ {new Date().getFullYear()} - Developed by digiFi. All Rights Reserved</p>
</footer>
</div>
</div>
)
}
src/components/layouts/HandBurger.jsx
+36
View File
@@ -0,0 +1,36 @@
export default function HandBurger({showAside, asideDisplay, barColor}) {
return (
<div
className="relative lg:hidden w-5 h-5 flex flex-col items-center justify-between cursor-pointer"
onClick={asideDisplay}
>
{/* <div
className={`absolute left-0 w-5 h-1 rounded-md ${barColor ? barColor :'bg-primary'} dark:bg-dark-light${
showAside ? "top-1/2 -translate-y-1/2 rotate-45" : "top-0"
}`}
></div> */}
<div
className={`absolute left-0 w-5 h-1 rounded-md ${barColor ? barColor :'bg-primary'} dark:bg-white-light ${
showAside
? "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-primary'} dark:bg-white-light transition-all duration-300 ${
showAside
? "rotate-[2000deg] opacity-0"
: ""
}`}
></div>
<div
className={`absolute left-0 w-5 h-1 rounded-md ${barColor ? barColor :'bg-primary'} dark:bg-white-light ${
showAside
? "top-1/2 -translate-y-1/2 -rotate-45"
: "bottom-0"
}`}
></div>
</div>
)
}
src/components/layouts/LogoutModal.jsx
+52
View File
@@ -0,0 +1,52 @@
import { useNavigate } from "react-router-dom"
import MainBtn from "../MainBtn"
import ModalWrapper from "../modals/ModalWrapper"
import RouteLinks from "../../RouteLinks"
import { updateUserDetails } from "../../store/UserDetails"
import { useDispatch } from "react-redux"
export default function LogoutModal({close}) {
const navigate = useNavigate()
const dispatch = useDispatch()
const handleLogout = () => {
dispatch(updateUserDetails({}))
localStorage.clear()
navigate(RouteLinks.loginPage, {replace:true})
close()
// location.reload()
}
return (
<ModalWrapper
>
<div className="relative bg-white rounded-lg shadow 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">
LOGOUT
</h3>
<button onClick={close} type="button" className="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white" data-modal-hide="default-modal">
<svg className="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
<path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
</svg>
<span className="sr-only">Close modal</span>
</button>
</div>
{/* <!-- Modal body --> */}
<div className="p-4 md:p-5 text-center">
<svg className="mx-auto mb-4 text-gray-400 w-12 h-12 dark:text-gray-200" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
<path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M10 11V6m0 8h.01M19 10a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/>
</svg>
<h3 className="mb-5 text-lg font-normal text-gray-500 dark:text-gray-400">Are you sure you want to logout?</h3>
<div className="flex justify-center items-center gap-6">
<MainBtn onClick={handleLogout} text='Logout' className="text-white bg-red-700 hover:bg-red-800 focus:ring-4 focus:outline-none focus:ring-red-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-800" />
<MainBtn onClick={close} text='Cancel' className="border text-black dark:text-white" />
</div>
</div>
{/* <!-- Modal footer --> */}
</div>
</ModalWrapper>
)
}
src/components/layouts/aside/AsideLink.jsx
+17
View File
@@ -0,0 +1,17 @@
import { Link, useLocation } from "react-router-dom"
export default function AsideLink({shrinkAside, name, to, icon}) {
const {pathname} = useLocation()
return (
<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 == to ? 'bg-white/10 text-white-light' : 'text-slate-400'}`}
to={to}
>
{/* {icon && <span className={`after:content-['24']`}></span>} */}
{icon && <i className={`${icon}`}></i>}
{shrinkAside ? '' : name}
</Link>
)
}
src/components/layouts/aside/AsideLinkWithSubLinks.jsx
+33
View File
@@ -0,0 +1,33 @@
import { ReactNode } from "react"
// import { useLocation } from "react-router-dom"
export default function AsideLinkWithSubLinks({shrinkAside, name, icon, hideSubMenu, setHideSubMenu, children}) {
// const btnName = name
// const {pathname} = useLocation()
// 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`}
>
<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>
</button>
<div className={`w-full ${(hideSubMenu && hideSubMenu==name) ? 'block' : 'hidden'}`}>
{children}
</div>
</div>
)
}
src/components/layouts/aside/DashboardAside.jsx
+96
View File
@@ -0,0 +1,96 @@
import { useState } from "react";
import {Link, useLocation} from 'react-router-dom'
import RouteLinks from "../../../RouteLinks";
import DummyLogo from "../../DummyLogo";
import MainBtn from "../../MainBtn";
import AsideLink from "./AsideLink";
import AsideLinkWithSubLinks from "./AsideLinkWithSubLinks";
import { useSelector } from "react-redux";
import { generalLayoutContext } from "../../../context/GeneralLayoutContext";
import { AiOutlineDashboard } from "react-icons/ai";
import { IoPeople } from "react-icons/io5";
export default function DashboardAside({shrinkAside=false}) {
const {pathname} = useLocation()
const {setLogoutModal} = generalLayoutContext()
const {userDetails} = useSelector((state) => state.userDetails) // GETS LOGGED IN USER ROLE DETAILS
const {role}= userDetails
const [hideSubMenu, setHideSubMenu] = useState('')
const handleHideSubMenu = (e) => {
e.stopPropagation()
let name = e.target.name
setHideSubMenu((prev) => {
if(prev == name){
return ''
}else{
return name
}
})
}
return (
<div className='w-full h-full flex flex-col'>
<div className="px-4 w-full h-24 logo flex items-center">
<DummyLogo />
</div>
<hr className="border-slate-400" />
<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'}`}
to={RouteLinks.homePage}
>
<AiOutlineDashboard className="text-base" />
<span>{shrinkAside ? '' : 'Dashboard'}</span>
</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>
<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}
>
<IoPeople className="text-base" />
<span>{shrinkAside ? '' : 'Users'}</span>
</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]' />
</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 className='px-4 py-2'>
<div className="bg-primary rounded-md w-full flex justify-center items-center gap-2">
<MainBtn
shrinkAside={shrinkAside}
icon='fa-solid fa-right-from-bracket'
text='Logout'
className="w-full text-center flex justify-center gap-2 items-center"
onClick={()=>setLogoutModal(true)}
/>
</div>
</div>
</div>
)
}
src/components/links/FooterLinks.jsx
+33
View File
@@ -0,0 +1,33 @@
import { Link, useLocation } from "react-router-dom"
import { layoutDefaultContext } from "../../context/DefaultLayoutContext"
export default function FooterLinks({
linkName,
href,
}) {
const {pathname} = useLocation()
const {subLinkIsActive, setSubLinkIsActive} = layoutDefaultContext() // CONTEXT TO GET WHEN A SUBLINK IS CLICKED
return (
<Link
to={href}
className={`${pathname == href && 'text-white-light/50'} block relative p-1 font-semibold text-sm lg:text-sm text-white-light before:absolute before:left-0 before:top-full before:w-0 before:content-[''] before:h-[2px] before:bg-white-light hover:before:w-full hover:text-white-light/50`}
onClick={()=>{
if(subLinkIsActive){
setSubLinkIsActive((prev)=>{
if(prev == linkName){
return null
}else{
return linkName
}
})
}
}}
>
{linkName}
</Link>
)
}
src/components/links/NavLinks.jsx
+34
View File
@@ -0,0 +1,34 @@
import { Link, useLocation } from "react-router-dom"
import { layoutDefaultContext } from "../../context/DefaultLayoutContext"
export default function NavLinks({
linkName,
href,
}) {
const {pathname} = useLocation()
const {subLinkIsActive, setSubLinkIsActive} = layoutDefaultContext() // CONTEXT TO GET WHEN A SUBLINK IS CLICKED
return (
<Link
to={href}
className={`${pathname == href && 'text-brown/50'} block uppercase relative p-1 font-semibold text-sm lg:text-sm text-brown before:absolute before:left-0 before:top-full before:w-0 before:content-[''] before:h-[2px] before:bg-brown hover:before:w-full hover:text-brown/50`}
onClick={()=>{
if(subLinkIsActive){
setSubLinkIsActive((prev)=>{
// e.stopPropagation()
// console.log('bubble')
if(prev == linkName){
return null
}else{
return linkName
}
})
}
}}
>
{linkName}
</Link>
)
}
src/components/links/NavLinksWithSubLinks.jsx
+109
View File
@@ -0,0 +1,109 @@
// import { useLocation } from "react-router-dom"
import NavLinks from "./NavLinks"
import { layoutDefaultContext } from "../../context/DefaultLayoutContext"
export default function NavLinksWithSubLinks({
linkName,
subLink=[],
asLink=true,
}) {
// const {pathname} = useLocation()
const {subLinkIsActive, setSubLinkIsActive} = layoutDefaultContext() // CONTEXT TO GET WHEN A SUBLINK IS CLICKED
return (
// <Link
// to={''}
// className="z-[999] relative p-1 font-semibold text-sm lg:text-lg text-brown"
// >
// <span className="flex gap-1 items-center">
// {linkName}
// <i className="fa-solid fa-caret-up rotate-180"></i>
// </span>
// {/* sub links section */}
// <div className="py-3 absolute top-[60px] w-48 rounded-md bg-white-light">
// {subLink.map(item => (
// <div className="w-full px-2 py-1">
// <NavLinks
// linkName={item.linkName}
// href={item.link}
// />
// </div>
// ))}
// </div>
// </Link>
<>
{asLink ?
<button
className={`${(subLinkIsActive && subLinkIsActive == linkName) && 'text-brown/50'} z-[999] uppercase relative text-left p-1 font-semibold text-sm lg:text-sm text-brown hover:text-brown/50`}
onClick={()=>setSubLinkIsActive((prev)=>{
// e.stopPropagation()
// console.log('bubble')
if(prev == linkName){
return null
}else{
return linkName
}
})}
>
<span className="flex gap-1 items-center">
{linkName}
<i className={`fa-solid fa-caret-up ${(subLinkIsActive && subLinkIsActive == linkName) ? 'rotate-0' : 'rotate-180'}`}></i>
</span>
{/* sub links section */}
<div
className={`p-0 overflow-hidden absolute top-[55px] w-48 rounded-md bg-white shadow-md ${(subLinkIsActive && subLinkIsActive == linkName) && 'p-3'}`}
onClick={()=>setSubLinkIsActive((prev)=>{
// e.stopPropagation()
// console.log('bubble')
if(prev == linkName){
return null
}else{
return linkName
}
})}
>
{subLink.map(item => (
<div key={item.linkName} className={`w-full h-0 overflow-hidden px-2 ${(subLinkIsActive && subLinkIsActive == linkName) && 'h-10'}`}>
<NavLinks
linkName={item.linkName}
href={item.link}
/>
</div>
))}
</div>
</button>
:
<button
className={`${(subLinkIsActive && subLinkIsActive == linkName) && 'text-brown/50'} z-[999] uppercase relative text-left p-1 font-semibold text-sm lg:text-sm text-brown hover:text-brown/50`}
onClick={()=>setSubLinkIsActive((prev)=>{
if(prev == linkName){
return null
}else{
return linkName
}
})}
>
<span className="flex gap-1 items-center">
{linkName}
<i className={`fa-solid fa-caret-up ${(subLinkIsActive && subLinkIsActive == linkName) ? 'rotate-0' : 'rotate-180'}`}></i>
</span>
{/* sub links section */}
<div className={`p-0 overflow-hidden absolute top-[55px] w-48 rounded-md bg-white-light shadow-md ${(subLinkIsActive && subLinkIsActive == linkName) && 'p-3'}`}>
{subLink.map(item => (
<div key={item.linkName} className={`w-full h-0 overflow-hidden px-2 ${(subLinkIsActive && subLinkIsActive == linkName) && 'h-10'}`}>
{/* <NavLinks
linkName={item.linkName}
href={item.link}
/> */}
coming soon
</div>
))}
</div>
</button>
}
</>
)
}
src/components/modals/DummyModalChildren.jsx
+34
View File
@@ -0,0 +1,34 @@
export default function DummyModalChildren() {
return (
<>
<div className="relative bg-white rounded-lg shadow dark:bg-gray-700">
{/* <!-- 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">
Terms of Service
</h3>
<button type="button" className="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white" data-modal-hide="default-modal">
<svg className="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
<path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
</svg>
<span className="sr-only">Close modal</span>
</button>
</div>
{/* <!-- Modal body --> */}
<div className="p-4 md:p-5 space-y-4">
<p className="text-base leading-relaxed text-gray-500 dark:text-gray-400">
With less than a month to go before the European Union enacts new consumer privacy laws for its citizens, companies around the world are updating their terms of service agreements to comply.
</p>
<p className="text-base leading-relaxed text-gray-500 dark:text-gray-400">
The European Union’s General Data Protection Regulation (G.D.P.R.) goes into effect on May 25 and is meant to ensure a common set of data rights in the European Union. It requires organizations to notify users as soon as possible of high-risk data breaches that could personally affect them.
</p>
</div>
{/* <!-- Modal footer --> */}
<div className="flex items-center p-4 md:p-5 border-t border-gray-200 rounded-b dark:border-gray-600">
<button data-modal-hide="default-modal" type="button" className="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">I accept</button>
<button data-modal-hide="default-modal" type="button" className="py-2.5 px-5 ms-3 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700">Decline</button>
</div>
</div>
</>
)
}
src/components/modals/ModalWrapper.jsx
+15
View File
@@ -0,0 +1,15 @@
export default function ModalWrapper({children, maxWidth}) {
return (
<div className="bg-gray-900/40 overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-[999] flex flex-col justify-center items-center w-full md:inset-0 h-[calc(100%)] max-h-full">
<div className={`pop-modal relative p-4 w-full ${maxWidth ? maxWidth : 'max-w-2xl'} max-h-full`}>
{/* <!-- Modal content --> */}
<div className="pb-4">
{children}
</div>
</div>
</div>
)
}
// id="default-modal" tabIndex={-1} aria-hidden="true"
src/context/DefaultLayoutContext.jsx
+25
View File
@@ -0,0 +1,25 @@
import { createContext, Dispatch, ReactNode, SetStateAction, useContext, useState } from 'react'
const DefaultLayoutProvider = createContext<any>({})
export default function DefaultLayoutContext({children}) {
const [subLinkIsActive, setSubLinkIsActive] = useState(null)
const values = {
subLinkIsActive,
setSubLinkIsActive
}
return (
<DefaultLayoutProvider.Provider value={values}>
{children}
</DefaultLayoutProvider.Provider>
)
}
export const layoutDefaultContext = () => {
return useContext(DefaultLayoutProvider)
}
src/context/GeneralLayoutContext.jsx
+77
View File
@@ -0,0 +1,77 @@
import { createContext, useContext, useEffect, useState } from 'react'
const GeneralContextProvider = createContext({})
export default function GeneralLayoutContext({children}) {
const [theme, setTheme] = useState(null)
const [drawer, setDrawer] = useState('')
const [booking, setBooking] = useState('')
const [alertBox, setAlertBox] = useState({status:false, msg:''}) // USE TO SHOW SUcCESS OR FAILED ALERT MESSAGE
const [logoutModal, setLogoutModal] = useState(false) // USE TO SHOW LOGOUT MODAL BOX
const handleDrawer = (drawerToOpen) => { // FUNCTION TO DETERMINE WHICH ASIDE DRAWER TO SHOW
setDrawer((prev)=>{
if(!prev){
return drawerToOpen
}else if(drawerToOpen == prev){
return ''
}else{
return drawerToOpen
}
})
}
const handleBooking = (bookingToOpen) => { // FUNCTION TO DETERMINE WHICH ASIDE DRAWER TO SHOW
setBooking((prev)=>{
if(!prev){
return bookingToOpen
}else if(bookingToOpen == prev){
return ''
}else{
return bookingToOpen
}
})
}
const handleAlertBox = (valObj) => {
setAlertBox(valObj)
}
useEffect(() => {
if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
setTheme("dark");
} else {
setTheme("light");
}
}, []);
useEffect(() => {
if (theme === "dark") {
document.documentElement.classList.add("dark");
} else {
document.documentElement.classList.remove("dark");
}
}, [theme]);
const handleTheme = () => {
setTheme(theme === "dark" ? "light" : "dark");
}
let value = {theme, handleTheme, drawer, handleDrawer, booking, handleBooking, alertBox, handleAlertBox, logoutModal, setLogoutModal}
return (
<GeneralContextProvider.Provider value={value}>
{children}
</GeneralContextProvider.Provider>
)
}
export const generalLayoutContext = () => {
return useContext(GeneralContextProvider)
}
src/index.css
+36
View File
@@ -23,3 +23,39 @@ code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
}
@layer components {
.change-text::after{
content: '';
animation: text-change 5s linear 0s infinite;
}
.text-slide-in{
position: relative;
animation: slide-text-in .5s linear 0s forwards;
}
.pop-modal{
animation: pop-modal .1s linear 0s forwards;
}
/* ANIMATIONS */
@keyframes text-change {
0%{content: 'Boundaries';}
100%{content: 'Limitations';}
}
@keyframes slide-text-in {
/* 0%{left: -200%;}
100%{left: 0%;} */
0%{transform: scale(0); opacity: 0;}
100%{transform: scale(1); opacity: 1;}
}
@keyframes pop-modal {
/* 0%{left: -200%;}
100%{left: 0%;} */
0%{margin-top: 20px; opacity: 0;}
100%{margin-top: 0; opacity: 1;}
}
}
src/index.js
+13 -1
View File
@@ -1,11 +1,23 @@
import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom'
import { Provider } from "react-redux";
import './index.css';
import App from './App';
import store from './store/store.js'
import GeneralLayoutContext from './context/GeneralLayoutContext.jsx';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
<BrowserRouter>
<Provider store={store}>
<GeneralLayoutContext>
<App />
</GeneralLayoutContext>
</Provider>
</BrowserRouter>
</React.StrictMode>
);
src/pages/HomePage.jsx
+13
View File
@@ -0,0 +1,13 @@
import React from 'react'
import BreadcrumbCom from '../components/breadcrumb/BreadcrumbCom'
export default function HomePage() {
return (
<div className='w-full'>
<BreadcrumbCom title='Dashboard' paths={['Home', 'Dashboard']} />
<p className=''>
coming soon ...
</p>
</div>
)
}
src/pages/UsersPage.jsx
+13
View File
@@ -0,0 +1,13 @@
import React from 'react'
import BreadcrumbCom from '../components/breadcrumb/BreadcrumbCom'
export default function UsersPage() {
return (
<div className='w-full'>
<BreadcrumbCom title='Users' paths={['Dashboard', 'Users']} />
<p className=''>
coming soon ...
</p>
</div>
)
}
src/store/UserDetails.js
+20
View File
@@ -0,0 +1,20 @@
import { createSlice } from "@reduxjs/toolkit";
const initialState = {
userDetails: {},
};
export const userSlice = createSlice({
name: "userDetails",
initialState,
reducers: {
updateUserDetails: (state, action) => {
state.userDetails = { ...action.payload };
},
},
});
// Action creators are generated for each case reducer function
export const { updateUserDetails } = userSlice.actions;
export default userSlice.reducer;
src/store/store.js
+9
View File
@@ -0,0 +1,9 @@
import { configureStore } from "@reduxjs/toolkit";
import userDetailReducer from "./UserDetails";
export default configureStore({
reducer: {
userDetails: userDetailReducer,
},
});
tailwind.config.js
+37 -1
View File
@@ -3,7 +3,43 @@ module.exports = {
content: ["./src/**/*.{js,jsx,ts,tsx}"],
darkMode: "class",
theme: {
extend: {},
extend: {
colors:{
brown:{
DEFAULT: '#393536',
},
black:{
DEFAULT: '#2c2e3e',
gray: '#a6a9b7'
},
primary: {
DEFAULT: '#0284c7',
},
orange: {
light: '#ED7747',
dark: '#9a3412'
},
white: {
DEFAULT: '#fff',
light: '#f1f5f9'
}
},
screens: {
max_width: '1700px'
},
fontSize:{
10: '10px',
12: '12px',
14: '14px'
},
backgroundImage: {
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)'
}
},
},
plugins: [],
}