suvo
/
bs-school-manager
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

edit-user

wip
Subhodip Ghosh 2023-05-17 11:51:16 +05:30
parent 02874ff761
commit a8e3dc48df
4 changed files with 457 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/pages/edit-school.jsx
View File

@ -27,11 +27,13 @@ export default function addSchoolForm() {
fetch(`https://management.beanstalkedu.com/items/school/${router.query.school}`) fetch(`https://management.beanstalkedu.com/items/school/${router.query.school}`)
.then(res => res.json()) .then(res => res.json())
.then(data => { .then(data => {
console.log(router.query.school); setSchool(data.data) // console.log(router.query.school);
setSchool(data.data)
}) })
} }
}, [router.query.school]); }, [router.query.school]);
// console.log(setSchool)
const handleSubmit = async (event) => { const handleSubmit = async (event) => {
event.preventDefault() event.preventDefault()
@ -77,7 +79,7 @@ export default function addSchoolForm() {
<div className='flex flex-col justify-center place-items-center bg-[#FFF6F2] pt-6 pb-20 rounded-tl-[50px] rounded-br-[50px]'> <div className='flex flex-col justify-center place-items-center bg-[#FFF6F2] pt-6 pb-20 rounded-tl-[50px] rounded-br-[50px]'>
<div className='flex flex-col justify-center place-items-center'> <div className='flex flex-col justify-center place-items-center'>
<img src="/img/1.svg" alt="" /> <img src="/img/1.svg" alt="" />
<p className='text-2xl md:text-4xl font-bold underline decoration-4 decoration-[#FE4501] pb-10'>School Registration Form</p> <p className='text-2xl md:text-4xl font-bold underline decoration-4 decoration-[#FE4501] pb-10'>Update School Information</p>
</div> </div>
<form className='w-full px-6 md:px-20'> <form className='w-full px-6 md:px-20'>
<div className='flex flex-col w-full'> <div className='flex flex-col w-full'>
@ -90,38 +92,38 @@ export default function addSchoolForm() {
</div> </div>
<div className='flex flex-col w-full'> <div className='flex flex-col w-full'>
<label htmlFor="country" className='text-xl font-bold'>Country</label> <label htmlFor="country" className='text-xl font-bold'>Country</label>
<input type="text" value={school.country} onChange={e => setSchool(e.target.value)} name="country" /> <input className='border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]' type="text" value={school.country} onChange={e => setSchool(e.target.value)} name="country" />
</div> </div>
<div className='flex flex-col w-full'> <div className='flex flex-col w-full'>
<label htmlFor="state" className='text-xl font-bold'>State</label> <label htmlFor="state" className='text-xl font-bold'>State</label>
<input type="text" value={school.state} onChange={e => setSchool(e.target.value)} name="state" /> <input type="text" value={school.state} onChange={e => setSchool(e.target.value)} name="state" className='border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]' />
</div> </div>
<div className='flex flex-col w-full'> <div className='flex flex-col w-full'>
<label htmlFor="Cities" className='text-xl font-bold'>Cities</label> <label htmlFor="Cities" className='text-xl font-bold'>Cities</label>
<input type="text" value={school.cities} onChange={e => setSchool(e.target.value)} name="cities" /> <input type="text" value={school.cities} onChange={e => setSchool(e.target.value)} name="cities" className='border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]'/>
</div> </div>
<div className='flex flex-col w-full'> <div className='flex flex-col w-full'>
<label htmlFor="school_contact_number" className='text-xl font-bold'> Phone</label> <label htmlFor="school_contact_number" className='text-xl font-bold'> Phone</label>
<input type="text" value={school.school_contact_number} onChange={e => setSchool(e.target.value)} name="school_contact_number" /> <input type="text" value={school.school_contact_number} onChange={e => setSchool(e.target.value)} name="school_contact_number" className='border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]' />
</div> </div>
<div className='flex flex-col w-full pt-4'> <div className='flex flex-col w-full pt-4'>
<label htmlFor="anual" className='text-xl font-bold'>Anual</label> <label htmlFor="anual" className='text-xl font-bold'>Anual</label>
<input type="text" value={school.anual} onChange={e => setSchool(e.target.value)} /> <input type="text" value={school.anual} onChange={e => setSchool(e.target.value)} className='border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]' />
</div> </div>
<div className='flex flex-col w-full pt-4'> <div className='flex flex-col w-full pt-4'>
<label htmlFor="toddlers" className='text-xl font-bold'>Toddlers</label> <label htmlFor="toddlers" className='text-xl font-bold'>Toddlers</label>
<input type="text" name="toddlers" value={school.toddlers} onChange={e => setSchool(e.target.value)} /> <input type="text" name="toddlers" value={school.toddlers} onChange={e => setSchool(e.target.value)} className='border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]' />
</div> </div>
<div className='flex flex-col w-full pt-4'> <div className='flex flex-col w-full pt-4'>
<label htmlFor="early_start_programme" className='text-xl font-bold'>Early Start Program</label> <label htmlFor="early_start_programme" className='text-xl font-bold'>Early Start Program</label>
<input type="text" name="early_start_programme" value={school.early_start_programme} onChange={e => setSchool(e.target.value)} /> <input type="text" name="early_start_programme" value={school.early_start_programme} onChange={e => setSchool(e.target.value)} className='border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]' />
</div> </div>
<div className='flex flex-col w-full pt-4'> <div className='flex flex-col w-full pt-4'>
<label htmlFor="interakto" className='text-xl font-bold'>Interakto</label> <label htmlFor="interakto" className='text-xl font-bold'>Interakto</label>
<input type="text" name="interakto" value={school.interakto} onChange={e => setSchool(e.target.value)} /> <input type="text" name="interakto" value={school.interakto} onChange={e => setSchool(e.target.value)} className='border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]' />
</div> </div>
<div className='flex flex-col w-full'> <div className='flex flex-col w-full'>
<label htmlFor="agreement_expiry_date" className='text-xl font-bold pt-4'>Agreement Expiry Date</label> <label htmlFor="agreement_expiry_date" className='text-xl font-bold pt-4'>Agreement Expiry Date</label>

402
src/pages/edit-user.jsx Normal file
View File

@ -0,0 +1,402 @@
// https://management.beanstalkedu.com/items/school
// import React from 'react';
import {useId, useState, useEffect, useMemo} from 'react';
import Select from 'react-select'
import countryList from 'react-select-country-list'
import 'react-phone-number-input/style.css'
import PhoneInput from 'react-phone-number-input'
import NavBar from '../components/NavBar';
import { useRouter } from 'next/router'
// import { Inter } from 'next/font/google'
const typeParent = "parent"
export default function addUserForm() {
const router = useRouter();
const [allLanguage, setLanguage] = useState([
{lang: "Assamese", value: false},
{lang: "Bengali", value: false},
{lang: "English", value: false},
{lang: "Hindi", value: false},
{lang: "Telegu", value: false},
{lang: "Punjabi", value: false},
{lang: "Malayalam", value: false},
{lang: "Tamil", value: false},
{lang: "Kannada", value: false},
{lang: "Gujrati", value: false},
])
// console.log(allLanguage)
const [currentType, setCurrentType] = useState(typeParent)
const [countryValue, setCountryValue] = useState('')
const options = useMemo(() => countryList().getData(), [])
const [phoneValue, setphoneValue] = useState()
let [individualValue = true, setindividualValue] = useState()
const [allStates, setAllStates] = useState([])
const [allCities, setAllCities] = useState([])
const handleSelectAllStates = stateCode => {
setAllCities([])
fetch(`https://api.siliconpin.com/v3/list/country/city/?country=${countryValue.value}&state=${stateCode.value}`)
.then(res => res.json())
.then(data => {
// console.log("handleSelectAllStates:", data, options)
let newData = data && data.length > 0 && data.map(n => {
return {
label: n.name,
value: n.name
}
})
setAllCities(newData)
})
}
const selectCountry = countryValue => {
setAllStates([])
fetch(`https://api.siliconpin.com/v3/list/country/state/?country=${countryValue.value}`).then(res => res.json())
.then(data => {
console.log("countryValue:", data, options)
let newData = data && data.length > 0 && data.map(n => {
return {
label: n.name,
value: n.iso2
}
})
setAllStates(newData)
setAllCities([])
})
setCountryValue(countryValue)
}
const individual = (event) => {
// console.log(event.target.schoolID.value)
setindividualValue(individualValue = false)
}
const [school, setSchool] = useState(null);
useEffect(() => {
fetch(`https://management.beanstalkedu.com/items/school`)
.then(res => res.json())
.then(data => {
setSchool(data)
})
}, [])
const [user, setUser] = useState({});
useEffect(()=>{
if(router.query.user && router.query.user>1){
fetch(`/api/listUsers/${router.query.user}`)
.then(res => res.json())
.then(data => {
setUser(data)
}
)
}
},
[router.query.user]);
console.log(user)
const handleFormsubmit = async (event) => {
event.preventDefault()
console.log(event.target.lang.checked)
const data = {
"status": "published",
type: event.target.type.value,
uname: event.target.uname.value,
country: event.target.country.value,
state: event.target.state.value ? event.target.state.value:"",
city: event.target.city.value ? event.target.city.value:"",
phone: event.target.phone.value,
email: event.target.email.value,
school: event.target.schoolID.value,
klas: event.target.klas.value,
lang: allLanguage,
start_month: event.target.start_month.value,
start_date: event.target.start_date.value,
end_date: event.target.end_date.value,
anual: event.target.anual.value,
early_start_programme: event.target.early_start_programme.value,
toddlers: event.target.toddlers.value,
interakto: event.target.interakto.value,
}
const JSONdata = JSON.stringify(data)
const endpoint = '/api/addUsers'
const options = {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSONdata,
}
const response = await fetch(endpoint, options)
const result = await response.json()
// console.log(result)
// alert(`Is this your full name: ${result}`)
}
const handleOnLanguageChange = (e, v) => {
let idx = allLanguage.findIndex(o => o.lang === e.target.value);
let newAllLang = [...allLanguage]
newAllLang[idx].value = true
// console.log(newAllLang)
if ([typeParent, "teacher"].includes(currentType)) {
let counter = 0
newAllLang.forEach((n, idx) => {
if (n.value) {
counter++
}
})
if (counter >= 2) {
newAllLang.forEach((n, idx) => {
newAllLang[idx].disabled = true
})
}
}
setLanguage(newAllLang)
}
const handleTypeOnChange = (e) => {
let newAllLang = [...allLanguage]
newAllLang.forEach((n, idx) => {
newAllLang[idx].value = false
newAllLang[idx].disabled = false
})
const { name, checked } = e.target;
setLanguage({ ...allLanguage, [name]: checked });
// setLanguage(newAllLang)
setCurrentType(e.target.value)
}
return (
<main>
<div>
<NavBar/>
<section className='container mx-auto px-4 my-16 lg:px-28 xl:px-56 2xl:px-96'>
<div
className='flex flex-col justify-center place-items-center bg-[#FFF6F2] pt-6 pb-20 rounded-tl-[50px] rounded-br-[50px]'>
<div className='flex flex-col justify-center place-items-center'>
<img src="/img/2.svg" alt=""/>
<p className='text-2xl md:text-4xl font-bold underline decoration-4 decoration-[#FE4501] pb-10'>Update User Information </p>
</div>
<form onSubmit={handleFormsubmit} action="" className='w-full px-6 md:px-20'>
<div className='flex flex-col w-full pt-4'>
<label htmlFor="class" className='text-xl font-bold'>Type</label>
<input type="text" value="wvgfbhvwhvf" name="type" onChange={handleTypeOnChange} className=' bg-white border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]' />
</div>
<div className='flex flex-col w-full'>
<label htmlFor="name" className='text-xl font-bold'> Name</label>
<input type="text" name="uname"
className=' border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]'
placeholder='Enter your Name'/>
</div>
<div className='flex flex-col w-full'>
<label htmlFor="email" className='text-xl font-bold'>Email</label>
<input type="email" name="email" placeholder='ex. xyz@email.com'
className=' border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]'/>
</div>
<div className='flex flex-col w-full'>
<label htmlFor="country" className='text-xl font-bold'>Country</label>
<Select
className='bg-white border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]'
name="country" instanceId={useId()} options={options} value={countryValue}
onChange={selectCountry}/>
</div>
{allStates && allStates.length > 0 &&
<div className='flex flex-col w-full'>
<label htmlFor="state" className='text-xl font-bold'>State</label>
<Select
className='bg-white border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]'
name="state" options={allStates} value={allStates[0].name}
onChange={handleSelectAllStates}/>
</div>}
{
allCities && allCities.length > 0 &&
<div className='flex flex-col w-full'>
<label htmlFor="city" className='text-xl font-bold'>City</label>
<Select
className='bg-white border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]'
name="city" options={allCities} value={allCities[0].name}
// onChange={() => {}}
/>
</div>}
<div className='flex flex-col w-full'>
<label htmlFor="phone" className='text-xl font-bold'> Phone</label>
<PhoneInput
className=' border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]'
name="phone" placeholder="Enter phone number" value={phoneValue}
onChange={setphoneValue}/>
</div>
<div className='flex flex-col w-full pt-4'>
<label htmlFor="" className='text-xl font-bold'>School name</label>
<select name="schoolID" onChange={individual}
className='bg-white border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]'>
<option value="0"> individual</option>
{school && school.data.map(data =>
<option value={data.id} key={data.id}>{data.name}</option>
)}
</select>
</div>
<div className='flex flex-col w-full pt-4'>
<label htmlFor="class" className='text-xl font-bold'>Class</label>
<select name="klas"
className=' bg-white border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]'>
<option value="0">-Select-</option>
<option value="IK1">IK1</option>
<option value="IK2">IK2</option>
<option value="IK3">IK3</option>
<option value="PG">PG</option>
</select>
</div>
{individualValue &&
<div>
<div className='flex flex-col w-full pt-4'>
<label htmlFor="anual" className='text-xl font-bold'>Anual</label>
<select name="anual" className=' bg-white border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]'>
<option value="0">-NA-</option>
<option value="Jan">Jan</option>
<option value="Feb">Feb</option>
<option value="Mar">Mar</option>
<option value="Apr">Apr</option>
<option value="May">May</option>
<option value="Jun">Jun</option>
<option value="Jul">Jul</option>
<option value="Aug">Aug</option>
<option value="Sept">Sept</option>
<option value="Oct">Oct</option>
<option value="Nov">Nov</option>
<option value="Dec">Dec</option>
</select>
</div>
<div className='flex flex-col w-full pt-4'>
<label htmlFor="early_start_programme" className='text-xl font-bold'>Early Start Programme</label>
<select name="early_start_programme" className=' bg-white border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]'>
<option value="0">-NA-</option>
<option value="Jan">Jan</option>
<option value="Feb">Feb</option>
<option value="Mar">Mar</option>
<option value="Apr">Apr</option>
<option value="May">May</option>
<option value="Jun">Jun</option>
<option value="Jul">Jul</option>
<option value="Aug">Aug</option>
<option value="Sept">Sept</option>
<option value="Oct">Oct</option>
<option value="Nov">Nov</option>
<option value="Dec">Dec</option>
</select>
</div>
<div className='flex flex-col w-full pt-4'>
<label htmlFor="toddlers" className='text-xl font-bold'>Toddlers</label>
<select name="toddlers" className=' bg-white border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]'>
<option value="0">-NA-</option>
<option value="Jan">Jan</option>
<option value="Feb">Feb</option>
<option value="Mar">Mar</option>
<option value="Apr">Apr</option>
<option value="May">May</option>
<option value="Jun">Jun</option>
<option value="Jul">Jul</option>
<option value="Aug">Aug</option>
<option value="Sept">Sept</option>
<option value="Oct">Oct</option>
<option value="Nov">Nov</option>
<option value="Dec">Dec</option>
</select>
</div>
<div className='flex flex-col w-full pt-4'>
<label htmlFor="interakto" className='text-xl font-bold'>Interakto</label>
<select name="interakto" className=' bg-white border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]'>
<option value="0">-NA-</option>
<option value="Jan">Jan</option>
<option value="Feb">Feb</option>
<option value="Mar">Mar</option>
<option value="Apr">Apr</option>
<option value="May">May</option>
<option value="Jun">Jun</option>
<option value="Jul">Jul</option>
<option value="Aug">Aug</option>
<option value="Sept">Sept</option>
<option value="Oct">Oct</option>
<option value="Nov">Nov</option>
<option value="Dec">Dec</option>
</select>
</div>
<div className='flex flex-col w-full pt-4'>
<label htmlFor="lang" className='text-xl font-bold'>Language</label>
<div className='grid grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-y-2 pt-2'>
{/* <label className='cursor-pointer' htmlFor="Assamese"> Assamese </label> &nbsp; <input type="checkbox" name="lang" value="Assamese" className='check-box'/> <br />
<label className='cursor-pointer' htmlFor="Bengali"> Bengali </label> &nbsp; <input type="checkbox" name="lang" value="Bengali" className='check-box'/> <br />
<label className='cursor-pointer' htmlFor="English"> English </label> &nbsp; <input type="checkbox" name="lang" value="English" className='check-box'/> <br />
<label className='cursor-pointer' htmlFor="Hindi"> Hindi </label> &nbsp; <input type="checkbox" name="lang" value="Hindi" className='check-box'/> <br />
<label className='cursor-pointer' htmlFor="Telegu"> Telegu </label> &nbsp; <input type="checkbox" name="lang" value="Telegu" className='check-box'/> <br />
<label className='cursor-pointer' htmlFor="Punjabi"> Punjabi </label> &nbsp; <input type="checkbox" name="lang" value="Punjabi" className='check-box'/> <br />
<label className='cursor-pointer' htmlFor="Malayalam"> Malayalam </label> &nbsp; <input type="checkbox" name="lang" value="Malayalam" className='check-box'/> <br />
<label className='cursor-pointer' htmlFor="Tamil"> Tamil </label> &nbsp; <input type="checkbox" name="lang" value="Tamil" className='check-box'/> <br />
<label className='cursor-pointer' htmlFor="Kannada"> Kannada </label> &nbsp; <input type="checkbox" name="lang" value="Kannada" className='check-box'/> <br />
<label className='cursor-pointer' htmlFor="Gujrati"> Gujrati </label> &nbsp; <input type="checkbox" name="lang" value="Gujrati" className='check-box'/> <br /> */}
{allLanguage && allLanguage.length && allLanguage.map(n => {
return (
<div key={n.lang} className=''>
<label className='cursor-pointer'
htmlFor="assamese">{n.lang}</label>&nbsp;
<input type="checkbox" disabled={n.disabled} name="lang" value={n.lang} checked={n.value}
onChange={handleOnLanguageChange}
className='check-box'/>
</div>
)
})}
</div>
</div>
<div className='flex flex-col w-full pt-4'>
<label htmlFor="start_month" className='text-xl font-bold'>Start Month</label>
<select name="start_month" id="start_month" className='bg-white border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]'>
<option value="0">-Select-</option>
<option value="Jan"> Jan</option>
<option value="Feb"> Feb</option>
<option value="Mar"> Mar</option>
<option value="Apr"> Apr</option>
<option value="May"> May</option>
<option value="Jun"> Jun</option>
<option value="Jul"> Jul</option>
<option value="Aug"> Aug</option>
<option value="Sept"> Sept</option>
<option value="Nov"> Nov</option>
<option value="Dec"> Dec</option>
</select>
</div>
<div className='flex flex-col w-full'>
<label htmlFor="start_date" className='text-xl font-bold pt-4'>Start
Date</label>
<input type="date" name="start_date" id="start_date"
className=' border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]'/>
</div>
<div className='flex flex-col w-full'>
<label htmlFor="end_date" className='text-xl font-bold pt-4'>Subscription Expiry
Date.</label>
<input type="date" name="end_date" id="end_date"
className=' border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]'/>
</div>
</div>
}
<div className='flex justify-center pt-8'>
<button type="submit"
className='bg-[#FE4501] hover:shadow-2xl hover:shadow-[#F2B705] p-2.5 rounded-lg px-10 rounded-tl-full rounded-br-full hover:scale-110 active:scale-75 duration-200 text-xl font-bold text-white cursor-pointer'>Update
</button>
{/* <input type="submit" value="Submit Now" className='bg-[#FE4501] hover:shadow-2xl hover:shadow-[#F2B705] p-2.5 rounded-lg px-10 rounded-tl-full rounded-br-full hover:scale-110 active:scale-75 duration-200 text-xl font-bold text-white cursor-pointer' /> */}
</div>
</form>
</div>
</section>
</div>
</main>
)
}

3
src/pages/school-list/index.jsx
View File

@ -52,7 +52,8 @@ const fetchData = async () => {
<td className="p-2">{data.toddlers}</td> <td className="p-2">{data.toddlers}</td>
<td className="p-2">{data.interakto}</td> <td className="p-2">{data.interakto}</td>
<td className="p-2">{data.status}</td> <td className="p-2">{data.status}</td>
<td className="p-2"><a href={'/edit-school?school='+data.id}>Edit</a> </td> <td className="p-2"><a href={'/edit-school?school='+data.id} className="flex justify-center place-items-center">
<svg width="35px" height="35px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="#166435"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path opacity="0.15" d="M8 16H12L18 10L14 6L8 12V16Z" fill="#166435"></path> <path d="M14 6L8 12V16H12L18 10M14 6L17 3L21 7L18 10M14 6L18 10M10 4L4 4L4 20L20 20V14" stroke="#166435" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg></a> </td>
</tr> </tr>
)} )}
</tbody> </tbody>

57
src/pages/user-list.jsx
View File

@ -8,7 +8,7 @@ export default function Modal() {
const fetchData = async () => { const fetchData = async () => {
const response = await fetch("/api/listUsers"); const response = await fetch("/api/listUsers");
const data = await response.json(); const data = await response.json();
console.log(data) // console.log(data)
return setUser(data); return setUser(data);
} }
// console.log(user) // console.log(user)
@ -32,31 +32,54 @@ const fetchData = async () => {
<table className=" text-center border-2 p-2 w-full"> <table className=" text-center border-2 p-2 w-full">
<thead className=''> <thead className=''>
<tr className='bg-[#FFF6F2] text-[#1D1D1D] text-xl whitespace-nowrap'> <tr className='bg-[#FFF6F2] text-[#1D1D1D] text-xl whitespace-nowrap'>
<th className="border-x-2 p-4">user Name</th> <th className="border-x-2 p-4">Name</th>
<th className="border-x-2 p-4">Mobile</th>
<th className="border-x-2 p-4">Email</th>
<th className="border-x-2 p-4">School Name</th> <th className="border-x-2 p-4">School Name</th>
<th className="border-x-2 p-4">User Type</th> <th className="border-x-2 p-4">User Type</th>
<th className="border-x-2 p-4">Plan</th> <th className="border-x-2 p-4">Annual</th>
<th className="border-x-2 p-4">Class</th> <th className="border-x-2 p-4">Class</th>
<th className="border-x-2 p-4">Language</th> {/* <th className="border-x-2 p-4">Language</th> */}
{/* <th className="border-x-2 p-4">Year</th> */} {/* <th className="border-x-2 p-4">Year</th> */}
<th className="border-x-2 p-4">Start Date</th> <th className="border-x-2 p-4">Start Date</th>
<th className="border-x-2 p-4">End Date</th> <th className="border-x-2 p-4">End Date</th>
<th className="border-x-2 p-4">Action</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{user.map(data=> {user.map
<tr className="border-b-2 whitespace-normal text-left"> (data=>
<td className="border-x-2 p-2">{data.user}</td> <tr className="border-b-2 whitespace-normal text-left">
<td className="border-x-2 p-2">{data.school}</td> <td className="border-x-2 p-2 text-center">{data.uname}</td>
<td className="border-x-2 p-2 text-center">{data.type}</td> <td className="border-x-2 p-2 text-center">{data.phone}</td>
<td className="border-x-2 p-2 text-center">{data.plan}</td> <td className="border-x-2 p-2 text-center">{data.email}</td>
<td className="border-x-2 p-2 text-center">{data.class}</td> <td className="border-x-2 p-2 text-center">{data.school}</td>
<td className="border-x-2 p-2 text-center">{data.lang}</td> <td className="border-x-2 p-2 text-center">{data.type}</td>
{/* <td className="border-x-2 p-2">{data.year}</td> */} <td className="border-x-2 p-2 text-center">{data.anual}</td>
<td className="border-x-2 p-2 text-center">{data.start_date}</td> <td className="border-x-2 p-2 text-center">{data.klas}</td>
<td className="border-x-2 p-2 text-center">{data.end_date}</td> {/* <td className="border-x-2 p-2 text-center">{data.lang}</td> */}
</tr> {/* <td className="border-x-2 p-2">{data.year}</td> */}
)} <td className="border-x-2 p-2 text-center">{data.start_date}</td>
<td className="border-x-2 p-2 text-center">{data.end_date}</td>
<td>
<div className="flex flex-row justify-center place-items-center">
<div className="flex justify-center">
<a href={'/edit-user?user='+data.id} className="px-2 py-1 rounded-md">
<svg width="35px" height="35px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="#166435"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path opacity="0.15" d="M8 16H12L18 10L14 6L8 12V16Z" fill="#166435"></path> <path d="M14 6L8 12V16H12L18 10M14 6L17 3L21 7L18 10M14 6L18 10M10 4L4 4L4 20L20 20V14" stroke="#166435" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg>
{/* <p className="text-[16px] text-green-800">Edit</p> */}
</a>
</div>
<div className="flex justify-center">
<button className=" text-white px-2 py-1 rounded-md">
<svg width="35px" height="35px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="#991b1b"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M10 12V17" stroke="#991b1b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M14 12V17" stroke="#991b1b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M4 7H20" stroke="#991b1b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M6 10V18C6 19.6569 7.34315 21 9 21H15C16.6569 21 18 19.6569 18 18V10" stroke="#991b1b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M9 5C9 3.89543 9.89543 3 11 3H13C14.1046 3 15 3.89543 15 5V7H9V5Z" stroke="#991b1b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg>
{/* <p className="text-[16px] text-red-800">Delete</p> */}
</button>
</div>
</div>
</td>
</tr>
)
}
</tbody> </tbody>
</table> </table>
</div> </div>