started dashboard layout
This commit is contained in:
victorAnumudu
+21
-4
@@ -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 './App.css';
|
||||||
import LoginPage from './pages/LoginPage';
|
|
||||||
|
|
||||||
function App() {
|
function App() {
|
||||||
|
|
||||||
|
const {pathname} = useLocation()
|
||||||
|
|
||||||
|
const {logoutModal, setLogoutModal} = generalLayoutContext()
|
||||||
|
|
||||||
|
useEffect(()=>{
|
||||||
|
window.scrollTo(0,0)
|
||||||
|
},[pathname])
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="w-full">
|
<>
|
||||||
<LoginPage />
|
<SiteRoutes />
|
||||||
</div>
|
|
||||||
|
{/* LOGOUT MODAL */}
|
||||||
|
{logoutModal && <LogoutModal close={()=>setLogoutModal(false)} />}
|
||||||
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -0,0 +1,8 @@
|
|||||||
|
const RouteLinks = {
|
||||||
|
loginPage: '/auth/login',
|
||||||
|
errorPage: '*',
|
||||||
|
homePage: '/',
|
||||||
|
usersPage: '/users',
|
||||||
|
}
|
||||||
|
|
||||||
|
export default RouteLinks
|
||||||
@@ -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>
|
||||||
|
)
|
||||||
|
}
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
@@ -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 />
|
||||||
|
}
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -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>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -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>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -1,21 +1,24 @@
|
|||||||
import React, { useEffect, useState } from 'react'
|
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 { useMutation } from '@tanstack/react-query'
|
||||||
|
|
||||||
// import myLinks from '../../myLinks'
|
|
||||||
import Label from '../Label'
|
import Label from '../Label'
|
||||||
import InputText from '../InputText'
|
import InputText from '../InputText'
|
||||||
import PageLoader from '../PageLoader'
|
import PageLoader from '../PageLoader'
|
||||||
|
import { updateUserDetails } from "../../store/UserDetails";
|
||||||
// import { loginUser } from '../../services/siteServices'
|
// import { loginUser } from '../../services/siteServices'
|
||||||
|
|
||||||
import GoogleDownload from '../../assets/download/andriod.jpg'
|
import GoogleDownload from '../../assets/download/andriod.jpg'
|
||||||
import IOSDownload from '../../assets/download/apple.jpg'
|
import IOSDownload from '../../assets/download/apple.jpg'
|
||||||
|
import RouteLinks from '../../RouteLinks'
|
||||||
|
|
||||||
export default function LoginCom() {
|
export default function LoginCom() {
|
||||||
|
|
||||||
const [loading, setLoading] = useState(true)
|
const dispatch = useDispatch()
|
||||||
// const {state} = useLocation()
|
const navigate = useNavigate()
|
||||||
// const navigate = useNavigate()
|
|
||||||
|
const [loading, setLoading] = useState(false)
|
||||||
|
|
||||||
const [fields, setFields] = useState({
|
const [fields, setFields] = useState({
|
||||||
username: '',
|
username: '',
|
||||||
@@ -49,20 +52,18 @@ export default function LoginCom() {
|
|||||||
// })
|
// })
|
||||||
|
|
||||||
|
|
||||||
useEffect(()=>{
|
const handleLogin = () => {
|
||||||
// if(state?.proceed != 'true'){
|
setLoading(true)
|
||||||
// return navigate(myLinks.getStarted, {replace:true})
|
const data = {name: 'dummy'}
|
||||||
// }
|
localStorage.setItem('token', 'token')
|
||||||
|
dispatch(updateUserDetails({ ...data }));
|
||||||
setTimeout(()=>{
|
setTimeout(()=>{
|
||||||
setLoading(false)
|
navigate(RouteLinks.homePage, {replace:true})
|
||||||
},200)
|
},500)
|
||||||
},[])
|
}
|
||||||
|
|
||||||
return (
|
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={`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='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'>
|
<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'>
|
<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 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>
|
||||||
|
|
||||||
<div className="hidden mt-8 gri grid-cols-2 gap-8">
|
<div className="hidden mt-8 gri grid-cols-2 gap-8">
|
||||||
@@ -107,7 +108,6 @@ export default function LoginCom() {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
}
|
|
||||||
</>
|
</>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -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>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -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>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -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>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -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>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -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>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -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>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -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>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -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>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -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>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -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>
|
||||||
|
}
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -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>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -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"
|
||||||
@@ -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)
|
||||||
|
}
|
||||||
@@ -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)
|
||||||
|
}
|
||||||
@@ -23,3 +23,39 @@ code {
|
|||||||
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
|
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
|
||||||
monospace;
|
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;}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
+13
-1
@@ -1,11 +1,23 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import ReactDOM from 'react-dom/client';
|
import ReactDOM from 'react-dom/client';
|
||||||
|
import { BrowserRouter } from 'react-router-dom'
|
||||||
|
import { Provider } from "react-redux";
|
||||||
|
|
||||||
import './index.css';
|
import './index.css';
|
||||||
import App from './App';
|
import App from './App';
|
||||||
|
import store from './store/store.js'
|
||||||
|
import GeneralLayoutContext from './context/GeneralLayoutContext.jsx';
|
||||||
|
|
||||||
|
|
||||||
const root = ReactDOM.createRoot(document.getElementById('root'));
|
const root = ReactDOM.createRoot(document.getElementById('root'));
|
||||||
root.render(
|
root.render(
|
||||||
<React.StrictMode>
|
<React.StrictMode>
|
||||||
<App />
|
<BrowserRouter>
|
||||||
|
<Provider store={store}>
|
||||||
|
<GeneralLayoutContext>
|
||||||
|
<App />
|
||||||
|
</GeneralLayoutContext>
|
||||||
|
</Provider>
|
||||||
|
</BrowserRouter>
|
||||||
</React.StrictMode>
|
</React.StrictMode>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -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>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -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>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -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;
|
||||||
@@ -0,0 +1,9 @@
|
|||||||
|
import { configureStore } from "@reduxjs/toolkit";
|
||||||
|
|
||||||
|
import userDetailReducer from "./UserDetails";
|
||||||
|
|
||||||
|
export default configureStore({
|
||||||
|
reducer: {
|
||||||
|
userDetails: userDetailReducer,
|
||||||
|
},
|
||||||
|
});
|
||||||
+37
-1
@@ -3,7 +3,43 @@ module.exports = {
|
|||||||
content: ["./src/**/*.{js,jsx,ts,tsx}"],
|
content: ["./src/**/*.{js,jsx,ts,tsx}"],
|
||||||
darkMode: "class",
|
darkMode: "class",
|
||||||
theme: {
|
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: [],
|
plugins: [],
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user