login endpoint added
This commit is contained in:
victorAnumudu
+82
-57
@@ -1,59 +1,84 @@
|
||||
// import React from 'react'
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { useNavigate } from 'react-router-dom'
|
||||
|
||||
import { CiPhone } from "react-icons/ci"
|
||||
import { IoIosPhonePortrait } from "react-icons/io"
|
||||
import { CiBank } from "react-icons/ci";
|
||||
import { MdOutlineEmail } from "react-icons/md"
|
||||
import { demoUsersList } from "../services/siteServices"
|
||||
import queryKeys from "../services/queryKeys"
|
||||
import myLinks from "../myLinks";
|
||||
import TableWrapper from "./TableWrapper";
|
||||
|
||||
export default function HomeCom() {
|
||||
|
||||
const navigate = useNavigate()
|
||||
|
||||
const {data:users, isFetching, isError, error} = useQuery({
|
||||
queryKey: queryKeys.demoUsers,
|
||||
queryFn: () => demoUsersList()
|
||||
})
|
||||
|
||||
const demoUsers = users?.data
|
||||
console.log(demoUsers)
|
||||
const demoUsers = users?.data?.demo_data?.list // LOAN USERS LIST
|
||||
|
||||
const getLoanPage = (user) => {
|
||||
navigate(myLinks.getLoan, {state:{user}})
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="w-full h-screen flex flex-col gap-2 overflow-y-auto text-black bg-slate-100 p-5 sm:p-[40px]">
|
||||
<div className="py-4 text-3xl text-black font-bold">Users</div>
|
||||
<div className="grid gap-5 sm:gap-[40px] grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
|
||||
|
||||
{data.map((item, index) => {
|
||||
let color = item.place == 'Friends' ? 'text-emerald-500 bg-emerald-100/90' : item.place == 'Office' ? 'text-blue-500 bg-blue-100/90' : 'text-orange-500 bg-orange-100/90'
|
||||
return (
|
||||
<div key={index} className="w-full rounded p-3 sm:p-5 bg-white shadow flex flex-col gap-5 hover:scale-105 hover:cursor-pointer">
|
||||
<div className="mb-5 card-title w-[70%] mx-auto">
|
||||
<h1 className="mb-[1px] text-2xl font-bold">{item.name}</h1>
|
||||
<span className={` ${color} text-sm font-bold p-1 rounded`}>{item.place}</span>
|
||||
<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="py-4 text-3xl text-black font-bold">Users</div>
|
||||
{isFetching ?
|
||||
<>
|
||||
<div className="w-full py-4">
|
||||
<p className='text-slate-800'>Loading...</p>
|
||||
</div>
|
||||
</>
|
||||
: isError ?
|
||||
<div className="w-full py-4">
|
||||
<p className='text-red-500'>{error.message}</p>
|
||||
</div>
|
||||
<div className="card-body flex flex-col gap-2">
|
||||
<div className="contact text-slate-700 flex gap-3 items-center">
|
||||
<span className="w-[40px] h-[40px] rounded-full flex flex-col justify-center items-center bg-slate-100/90 text-slate-700">
|
||||
<IoIosPhonePortrait />
|
||||
</span>
|
||||
<span>{item.contact}</span>
|
||||
</div>
|
||||
<div className="contact text-slate-700 flex gap-3 items-center">
|
||||
<span className="w-[40px] h-[40px] rounded-full flex flex-col justify-center items-center bg-slate-100/90 text-slate-700">
|
||||
<CiPhone />
|
||||
</span>
|
||||
<span>{item.contact}</span>
|
||||
</div>
|
||||
<div className="contact text-slate-700 flex gap-3 items-center">
|
||||
<span className="w-[40px] h-[40px] rounded-full flex flex-col justify-center items-center bg-slate-100/90 text-slate-700">
|
||||
<MdOutlineEmail />
|
||||
</span>
|
||||
<span>{item.email}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
:
|
||||
<TableWrapper data={demoUsers} itemsPerPage={8}>
|
||||
{({ data }) => (
|
||||
<div className="grid gap-5 sm:gap-[40px] grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
|
||||
{data.map((user, index) => {
|
||||
let color = user.place == 'Friends' ? 'text-emerald-500 bg-emerald-100/90' : user.place == 'Office' ? 'text-blue-500 bg-blue-100/90' : 'text-orange-500 bg-orange-100/90'
|
||||
return (
|
||||
<div onClick={()=>getLoanPage(user)} key={user?.uid || index} className="w-full rounded p-3 sm:p-5 bg-white shadow flex flex-col gap-5 hover:scale-105 hover:cursor-pointer">
|
||||
<div className="mb-5 card-title w-[70%] mx-auto">
|
||||
<h1 className="mb-[1px] text-2xl font-bold">{user.name}</h1>
|
||||
{/* <span className={` ${color} text-sm font-bold p-1 rounded`}>{user.place}</span> */}
|
||||
</div>
|
||||
<div className="card-body flex flex-col gap-2">
|
||||
<div className="contact text-slate-700 flex gap-3 items-center">
|
||||
<span className="w-[40px] h-[40px] rounded-full flex flex-col justify-center items-center bg-slate-100/90 text-slate-700">
|
||||
<CiBank />
|
||||
</span>
|
||||
<span>{user.bvn}</span>
|
||||
</div>
|
||||
<div className="contact text-slate-700 flex gap-3 items-center">
|
||||
<span className="w-[40px] h-[40px] rounded-full flex flex-col justify-center items-center bg-slate-100/90 text-slate-700">
|
||||
<CiPhone />
|
||||
</span>
|
||||
<span>{user.mobile}</span>
|
||||
</div>
|
||||
<div className="contact text-slate-700 flex gap-3 items-center">
|
||||
<span className="w-[40px] h-[40px] rounded-full flex flex-col justify-center items-center bg-slate-100/90 text-slate-700">
|
||||
<MdOutlineEmail />
|
||||
</span>
|
||||
<span>{user.email}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
|
||||
</div>
|
||||
)}
|
||||
</TableWrapper>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
@@ -63,26 +88,26 @@ export default function HomeCom() {
|
||||
|
||||
|
||||
|
||||
const data = [
|
||||
{name:'Jerry Eze', place: 'Home', contact: '021-025-0325', email: 'jerry@example.com'},
|
||||
{name:'Mark John', place: 'Office', contact: '011-025-0311', email: 'mark@example.com'},
|
||||
{name:'Larry Bon', place: 'Friends', contact: '033-025-0333', email: 'larry@example.com'},
|
||||
{name:'Jeff Henry', place: 'Home', contact: '044-025-0344', email: 'jeff@example.com'},
|
||||
{name:'Rose Ordor', place: 'Office', contact: '055-025-0355', email: 'rose@example.com'},
|
||||
{name:'Mike Timothy', place: 'Friends', contact: '066-025-0366', email: 'mike@example.com'},
|
||||
// const data = [
|
||||
// {name:'Jerry Eze', place: 'Home', contact: '021-025-0325', email: 'jerry@example.com'},
|
||||
// {name:'Mark John', place: 'Office', contact: '011-025-0311', email: 'mark@example.com'},
|
||||
// {name:'Larry Bon', place: 'Friends', contact: '033-025-0333', email: 'larry@example.com'},
|
||||
// {name:'Jeff Henry', place: 'Home', contact: '044-025-0344', email: 'jeff@example.com'},
|
||||
// {name:'Rose Ordor', place: 'Office', contact: '055-025-0355', email: 'rose@example.com'},
|
||||
// {name:'Mike Timothy', place: 'Friends', contact: '066-025-0366', email: 'mike@example.com'},
|
||||
|
||||
{name:'Jerry Eze', place: 'Home', contact: '021-025-0325', email: 'jerry@example.com'},
|
||||
{name:'Mark John', place: 'Office', contact: '011-025-0311', email: 'mark@example.com'},
|
||||
{name:'Larry Bon', place: 'Friends', contact: '033-025-0333', email: 'larry@example.com'},
|
||||
{name:'Jeff Henry', place: 'Home', contact: '044-025-0344', email: 'jeff@example.com'},
|
||||
{name:'Rose Ordor', place: 'Office', contact: '055-025-0355', email: 'rose@example.com'},
|
||||
{name:'Mike Timothy', place: 'Friends', contact: '066-025-0366', email: 'mike@example.com'},
|
||||
// {name:'Jerry Eze', place: 'Home', contact: '021-025-0325', email: 'jerry@example.com'},
|
||||
// {name:'Mark John', place: 'Office', contact: '011-025-0311', email: 'mark@example.com'},
|
||||
// {name:'Larry Bon', place: 'Friends', contact: '033-025-0333', email: 'larry@example.com'},
|
||||
// {name:'Jeff Henry', place: 'Home', contact: '044-025-0344', email: 'jeff@example.com'},
|
||||
// {name:'Rose Ordor', place: 'Office', contact: '055-025-0355', email: 'rose@example.com'},
|
||||
// {name:'Mike Timothy', place: 'Friends', contact: '066-025-0366', email: 'mike@example.com'},
|
||||
|
||||
{name:'Jerry Eze', place: 'Home', contact: '021-025-0325', email: 'jerry@example.com'},
|
||||
{name:'Mark John', place: 'Office', contact: '011-025-0311', email: 'mark@example.com'},
|
||||
{name:'Larry Bon', place: 'Friends', contact: '033-025-0333', email: 'larry@example.com'},
|
||||
{name:'Jeff Henry', place: 'Home', contact: '044-025-0344', email: 'jeff@example.com'},
|
||||
{name:'Rose Ordor', place: 'Office', contact: '055-025-0355', email: 'rose@example.com'},
|
||||
{name:'Mike Timothy', place: 'Friends', contact: '066-025-0366', email: 'mike@example.com'},
|
||||
// {name:'Jerry Eze', place: 'Home', contact: '021-025-0325', email: 'jerry@example.com'},
|
||||
// {name:'Mark John', place: 'Office', contact: '011-025-0311', email: 'mark@example.com'},
|
||||
// {name:'Larry Bon', place: 'Friends', contact: '033-025-0333', email: 'larry@example.com'},
|
||||
// {name:'Jeff Henry', place: 'Home', contact: '044-025-0344', email: 'jeff@example.com'},
|
||||
// {name:'Rose Ordor', place: 'Office', contact: '055-025-0355', email: 'rose@example.com'},
|
||||
// {name:'Mike Timothy', place: 'Friends', contact: '066-025-0366', email: 'mike@example.com'},
|
||||
|
||||
]
|
||||
// ]
|
||||
Reference in New Issue
Block a user