logout btn added

src/authorization/UserExists.jsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from 'react'
 import { useLocation, useNavigate, Outlet } from 'react-router-dom'
+import Layout from '../components/layout/Layout'
 
 import myLinks from '../myLinks'
 import PageLoader from '../components/PageLoader'
@@ -13,7 +14,7 @@ export default function UserExists() {
     const [loading, setLoading] = useState(true)
   
     useEffect(()=>{
-      if(!state){
+      if(!state || localStorage.getItem('active') != 'true'){
         return navigate(myLinks.getStarted, {replace:true})
       }
       setTimeout(()=>{
@@ -27,7 +28,9 @@ export default function UserExists() {
     loading ? 
         <PageLoader />
         :
-        <Outlet />
+        <Layout>
+          <Outlet />
+        </Layout>
     }
     </>
   )

src/components/GetLoan.jsx

@@ -57,7 +57,7 @@ export default function GetLoan() {
   },[])
 
   return (
-    <div className={`h-screen bg-sky-300 flex flex-col items-center justify-center bg-[url('./assets/first-background.jpg')] bg-cover bg-center bg-no-repeat`}>
+    <div className={`flex flex-col items-center justify-center`}>
         <div className='relative flex flex-col gap-4 w-[80%] sm:w-[400px] min-h-[600px] bg-white rounded-xl p-4 sm:p-8 shadow'>
             <div className="relative pb-3 card-title w-full border-b-2 flex gap-4 items-center">
               <div className='absolute left-2 top-1/2 -translate-y-1/2 p-1 cursor-pointer' onClick={handleBackBtn}>
@@ -68,7 +68,6 @@ export default function GetLoan() {
                 <span className={`text-base font-bold p-1 rounded`}>BVN: {state?.user.bvn}</span>
               </div>
             </div>
-
             {!step?.screen?.length || step?.screen[step.screen.length -1 ] == screens.products ?
               <>
                 <div className='mt-3 flex flex-col gap-3'>
@@ -103,7 +102,7 @@ export default function GetLoan() {
                   }
                 </div>
                 {products &&
-                <div className='mt-3 w-full h-full flex flex-col justify-end'>
+                <div className='mt-3 w-full'>
                   <button onClick={()=>console.log('working')} className='w-full p-3 bg-orange-500 text-lg sm:text-2xl text-white font-bold rounded'>Pay Loan</button>
                 </div>
                 }

src/components/HomeCom.jsx

@@ -28,8 +28,8 @@ export default function HomeCom() {
   }
 
   return (
-    <div className={`h-screen bg-sky-300 flex flex-col items-center justify-center bg-[url('./assets/first-background.jpg')] bg-cover bg-center bg-no-repeat`}>
-      <div className="w-full h-screen flex flex-col gap-2 overflow-y-auto text-black p-5 sm:p-[40px]">
+
+      <div className="w-full flex flex-col gap-2 text-black">
         <div className="py-3 text-3xl text-black font-bold">Users</div>
         {isFetching ? 
               <>
@@ -88,7 +88,7 @@ export default function HomeCom() {
               </TableWrapper>
         }
       </div>
-    </div>
+
   )
 }
 

src/components/TableWrapper.jsx

@@ -61,7 +61,7 @@ export default function TableWrapper({
   },[itemsPerPage])
 
   return (
-    <div className="p-4 w-full bg-transparent rounded-md">
+    <div className="py-4 w-full bg-transparent rounded-md">
       {data.length > 0 && filterItem && (
         <div className="mb-10 flex justify-end items-center gap-2">
           {filterItem.map((item, index) => (

src/components/auth/LoginCom.jsx

@@ -42,6 +42,7 @@ export default function LoginCom() {
         //     // dispatch(updateUserDetails({ ...data }));
         //   }
           navigate(myLinks.home, {state:{proceed:'true'}}) // later add redux to dispatch state
+          localStorage.setItem('active', 'true')
     }
   })
 

src/components/layout/Layout.jsx

@@ -0,0 +1,23 @@
+import {Outlet, useNavigate} from 'react-router-dom'
+import myLinks from '../../myLinks'
+
+export default function Layout() {
+
+    const navigate = useNavigate()
+
+    const handleLogout = () => {
+        navigate(myLinks.login, {state:{proceed:'false'}, replace:true})
+        localStorage.clear()
+    }
+
+    return (
+    <div className={`w-full h-screen overflow-y-auto flex flex-col gap-4 bg-[url('./assets/first-background.jpg')] bg-cover bg-center bg-no-repeat`}>
+        <div className='sticky top-0 w-full flex justify-end p-5 pb-0 sm:p-[30px] sm:pb-0'>
+            <button onClick={handleLogout} className='bg-white px-4 py-2 rounded text-red-500 font-bold text-xl'>Logout</button>
+        </div>
+        <div className='p-5 pb-0 sm:p-[30px] sm:pb-0'>
+            <Outlet />
+        </div>
+    </div>
+    )
+}