victorAnumudu
121 lines
5.9 KiB
React
121 lines
5.9 KiB
React
// import React from 'react'
|
|
import { useQuery } from "@tanstack/react-query";
|
|
import { useNavigate } from 'react-router-dom'
|
|
|
|
import { CiPhone } from "react-icons/ci"
|
|
import { CiBank } from "react-icons/ci";
|
|
import { MdOutlineEmail } from "react-icons/md"
|
|
import { FaMapPin } from "react-icons/fa";
|
|
|
|
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?.demo_data?.list // LOAN USERS LIST
|
|
|
|
const getLoanPage = (user) => {
|
|
navigate(myLinks.getLoan, {state:{user}})
|
|
}
|
|
|
|
return (
|
|
|
|
<div className="w-full flex flex-col gap-2 text-black">
|
|
<div className="py-3 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>
|
|
:
|
|
<TableWrapper data={demoUsers} itemsPerPage={16}>
|
|
{({ 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 hasSalaryAcct = user.salary_account === 0 ? false : true
|
|
return (
|
|
<div onClick={()=>getLoanPage(user)} key={user?.uid || index} className={`${hasSalaryAcct ? 'bg-white' : 'bg-red-50'} w-full rounded p-3 sm:p-5 shadow flex flex-col gap-5 hover:scale-105 hover:cursor-pointer`}>
|
|
<div className="mb-5 card-title w-full md:w-4/5 mx-auto text-center">
|
|
<h1 className="mb-[1px] text-base md:text-xl lg:text-2xl font-bold">{user.name}</h1>
|
|
<span className={`text-sm font-bold p-1 rounded`}>BVN: {user.bvn}</span>
|
|
</div>
|
|
<div className="card-body flex flex-col gap-2">
|
|
<div className="contact text-slate-700 flex gap-2 items-center">
|
|
<span className="min-w-[30px] min-h-[30px] max-w-[30px] max-h-[30px] 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="min-w-[30px] min-h-[30px] max-w-[30px] max-h-[30px] 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="min-w-[30px] min-h-[30px] max-w-[30px] max-h-[30px] rounded-full flex flex-col justify-center items-center bg-slate-100/90 text-slate-700">
|
|
<MdOutlineEmail />
|
|
</span>
|
|
<span className="break-words">{user.email}</span>
|
|
</div>
|
|
<div className="contact text-slate-700 flex gap-3 items-center">
|
|
<span className="min-w-[30px] min-h-[30px] max-w-[30px] max-h-[30px] rounded-full flex flex-col justify-center items-center bg-slate-100/90 text-slate-700">
|
|
<FaMapPin />
|
|
</span>
|
|
<span>{user.pin}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
})}
|
|
|
|
</div>
|
|
)}
|
|
</TableWrapper>
|
|
}
|
|
</div>
|
|
|
|
)
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// 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'},
|
|
|
|
// ] |