/cody/pratham0709/employeeManagment/src/components/Usrdata.jsx
import { useState, useEffect } from "react";import axios from "axios";import Tabs from "./Tabs";import { HiChevronLeft, HiChevronDown } from "react-icons/hi";import Table from "./Table";
const data = [ { _id: "64497e4f19500643bc59892c", ID: "12345", firstName: "John", lastName: "Doe", companyName: "Acme Corp", email: "john.doe@acme.com", password: "password123", __v: 0, }, { _id: "645b46168fa2aef949e73170", ID: "546", firstName: "tejas", lastName: "jullyal", companyName: "dule corp plt..", email: "teajs@gmail.com", password: "12343545pass", __v: 0, }, { _id: "645b4c5de74b92b35c1018eb", ID: "679", firstName: "ganesh", lastName: "jullyal", companyName: "dulerwr3rt..", email: "utuhe@gmail.com", password: "vdvdcdscass", __v: 0, }, { _id: "645b4ed6e74b92b35c1018f1", ID: "119", firstName: "suresh", lastName: "marshe", companyName: "dulerwr3rt..", email: "utuhe@gmail.com", password: "vdvdcdscass", __v: 0, }, { _id: "645b50a6e74b92b35c1018ff", ID: "111", firstName: "kkmkd", lastName: "wdwdqqd", companyName: "dwdwdwedwd", email: "dwdwd@cece.com", password: "111111", __v: 0, }, { _id: "645b52e4e74b92b35c101909", ID: "1213", firstName: "kkmkd", lastName: "kkkkk", companyName: "dwdwdwedwd", email: "dwdwd@cece.com", password: "111111", __v: 0, }, { _id: "645b5382e74b92b35c10190b", ID: "777", firstName: "kiran", lastName: "kuyate", companyName: "kways tech.com", email: "kwaysa@gmail.com", password: "123", __v: 0, }, { _id: "645b53fce74b92b35c10190d", ID: "12y5", firstName: "keshav", lastName: "kumavat", companyName: "loksha plt.", email: "loksha.plt@gmail.com", password: "123456", __v: 0, }, { _id: "645b545be74b92b35c10190f", ID: "122", firstName: "Natasha", lastName: "shinde", companyName: "supermal PVT.LTD", email: "supermal.ptl@gmail.com", password: "123456", __v: 0, },];const Usrdata = ({ activeTab, handleTabClick }) => { const [data1, setData] = useState([]); const [open, setOpen] = useState(false); const [adminAccess, setAdminAccess] = useState(false); const toggleOpen = () => { setOpen(!open); }; const toggleAdminAccess = () => { setAdminAccess(!adminAccess); };
useEffect(() => { const fetchData = async () => { try { // Fetch data from API const response = await axios.get( "https://kways.onrender.com/api/v1/users" ); setData(response.data); console.log(response.data); } catch (error) { // Handle error, if needed console.log(error); } };
fetchData(); }, []); if (data1) { console.log("data is here : ", data.length); } return ( <> <div className='w-full'> <div className='m-5'> <div className='flex flex-row justify-between bg-gray-100 border-none rounded px-3'> <div className='bg-red-200 flex gap-5 px-6 py-4 my-2 items-center border rounded-2xl'> <h1 className={`${adminAccess ? "font-semibold" : "font-normal"}`} onClick={toggleAdminAccess} > Members </h1> <span className='w-[1px] bg-black h-4/5' /> <h1 className={`${adminAccess ? "font-normal" : "font-semibold"}`} onClick={toggleAdminAccess} > Admin </h1> </div> <div className='flex flex-col justify-center text-gray-500 font-medium items-end'> <h1> Total members:{" "} <span className='text-gray-600'>{data.length}</span> </h1> <h1> Current used : <span className='text-gray-600'>1897</span> </h1> </div> </div> <div className='gap-5 flex justify-between'> <div className='flex'> <h1 className='text-3xl flex justify-center items-center p-2 px-5'> Members </h1> <Tabs title='Add User' activeTab={activeTab} handleTabClick={handleTabClick} tabName='Add User' /> <Tabs title='Import members' /> <Tabs title='export members(Excel)' /> </div> <div className={`hover:cursor-pointer py-1 px-3 pr-4 m-2 border rounded-2xl flex justify-center items-center text-xl font-medium bg-red-300`} onClick={toggleOpen} > {open ? <HiChevronLeft /> : <HiChevronDown />} <h1 className=' flex items-center pl-1'>Filter</h1> </div> </div> </div> {/* tables */} <div className='bg-gray-100 mx-5 p-1 border-none rounded'> <Table data={data} /> </div> </div> </> );};
export default Usrdata;