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

all-page-under-session

main2
Subhodip Ghosh 2023-05-22 20:51:47 +05:30
parent 23ef8d9803
commit b3df941551
12 changed files with 1116 additions and 534 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/NavBar.tsx
View File

@ -3,7 +3,7 @@ import Link from 'next/link'
export default function NavBar() {
const { data: session } = useSession()
const { data: session } = useSession()
// console.log(session)
if (session) {
return (
@ -32,6 +32,18 @@ export default function NavBar() {
<button onClick={() => signIn()}>Sign in</button>
</>
)
// return (
// <div className='container mx-auto flex-col justify-center place-items-center 2xl:px-[500px] mt-24 '>
// <>
// <div className='grid grid-rows-2 lg:py-56 rounded-xl place-items-center bg-[#FFF6F2]'>
// <p className='text-center text-2xl italic'>Logged out Successfully </p>
// <button onClick={() => signIn()} className="bg-[#FE4501] w-fit px-6 py-1.5 rounded-lg text-white font-bold text-xl">Sign in Now</button>
// </div>
// </>
// </div>
// )
}

14
src/pages/add-school-form.jsx
View File

@ -1,4 +1,5 @@
import NavBar from '../components/NavBar'
import { signIn, signOut, useSession } from 'next-auth/react'
import { useId, useState, useEffect, useMemo } from 'react';
import Select from 'react-select'
import countryList from 'react-select-country-list'
@ -11,6 +12,7 @@ export default function AddSchool() {
const [phoneValue, setphoneValue] = useState()
const [allStates, setAllStates] = useState([])
const [allCities, setAllCities] = useState([])
const { data: session } = useSession()
const handleSelectAllStates = stateCode => {
setAllCities([])
@ -82,8 +84,8 @@ export default function AddSchool() {
// alert(`Is this your full name: ${result.data}`)
alert(`School Saved`)
}
return (
if (session) {
return (
<main>
<div>
<NavBar />
@ -224,4 +226,12 @@ export default function AddSchool() {
</div>
</main>
)
}
return (
<>
Not signed in <br />
<button onClick={() => signIn()}>Sign in</button>
</>
)
}

451
src/pages/add-user-form.jsx
View File

@ -1,5 +1,6 @@
// https://management.beanstalkedu.com/items/school
// import React from 'react';
import { signIn, signOut, useSession } from 'next-auth/react'
import {useId, useState, useEffect, useMemo} from 'react';
import Select from 'react-select'
import countryList from 'react-select-country-list'
@ -29,6 +30,7 @@ export default function addUserForm() {
const options = useMemo(() => countryList().getData(), [])
const [phoneValue, setphoneValue] = useState()
let [individualValue = true, setindividualValue] = useState()
const { data: session } = useSession()
const [allStates, setAllStates] = useState([])
const [allCities, setAllCities] = useState([])
@ -154,233 +156,242 @@ export default function addUserForm() {
// 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'>User Registration Form</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>
<select name="type" onChange={handleTypeOnChange} className=' bg-white border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]'>
<option value={typeParent}>Parent</option>
<option value="teacher">Teacher</option>
<option value="coordinator">Coordinator</option>
<option value="master">Master</option>
</select>
if (session) {
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'>User Registration Form</p>
</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 &&
<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>
<select name="type" onChange={handleTypeOnChange} className=' bg-white border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]'>
<option value={typeParent}>Parent</option>
<option value="teacher">Teacher</option>
<option value="coordinator">Coordinator</option>
<option value="master">Master</option>
</select>
</div>
<div className='flex flex-col w-full'>
<label htmlFor="city" className='text-xl font-bold'>City</label>
<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="city" options={allCities} value={allCities[0].name}
// onChange={() => {}}
/>
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>}
<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.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>
)
})}
{
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.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 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 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'>Save
</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>
}
<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'>Save
</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>
</form>
</div>
</section>
</div>
</main>
)
}
return (
<>
Not signed in <br />
<button onClick={() => signIn()}>Sign in</button>
</>
)
}

4
src/pages/api/listUsers.js
View File

@ -15,7 +15,7 @@ console.log(req.body.school)
const TABLE_NAME = 'user';
// Open a connection to the SQLite database
const db = new sqlite3.Database(DB_NAME);
const db = new sqlite3.Database(DB_NAME);
const query = `SELECT * FROM ${TABLE_NAME}`;
@ -52,7 +52,7 @@ console.log(req.body.school)
};
async function doSomething() {
try {
const returnData = await getAllRows('user',4,10);
const returnData = await getAllRows('user',2,10);
res.setHeader('Content-Type', 'application/json')
res.status(200).json(returnData)
// console.log(data);

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

@ -1,3 +1,4 @@
import { signIn, signOut, useSession } from 'next-auth/react'
import {useId, useState, useEffect, useMemo} from 'react';
import 'react-phone-number-input/style.css'
import NavBar from '../components/NavBar';
@ -6,6 +7,7 @@ import Link from 'next/link'
export default function EditSchool() {
const { data: session } = useSession()
const router = useRouter();
const uploadToServer = async (event) => {
const body = new FormData();
@ -78,103 +80,112 @@ export default function EditSchool() {
alert(`User data updated`)
}
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='inline-flex p-4 '>
<Link href="/add-school-form" className="m-2 inline-flex place-items-center justify-center p-2 pl-4 pr-4 bg-[#FE4501] text-white font-bold rounded-full whitespace-nowrap">
<img src="/img/4.svg" alt="" /> &nbsp;
List Users Under This School
</Link>
<div className="place-items-center justify-center m-2 p-2 bg-[#FE4501] text-white font-bold rounded-full whitespace-nowrap">
<span className="text-small">CSV &nbsp;</span>
<input type="file" id="csv" onChange={uploadCsv} name="csv" />
if (session) {
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='inline-flex p-4 '>
<Link href="/add-school-form" className="m-2 inline-flex place-items-center justify-center p-2 pl-4 pr-4 bg-[#FE4501] text-white font-bold rounded-full whitespace-nowrap">
<img src="/img/4.svg" alt="" /> &nbsp;
List Users Under This School
</Link>
<div className="place-items-center justify-center m-2 p-2 bg-[#FE4501] text-white font-bold rounded-full whitespace-nowrap">
<span className="text-small">CSV &nbsp;</span>
<input type="file" id="csv" onChange={uploadCsv} name="csv" />
</div>
{/* <img src="/img/2.svg" alt=""/> */}
</div>
<p className='text-2xl font-bold underline decoration-4 decoration-[#FE4501] pb-10'>Update School Information </p>
<form onSubmit={updateSchoolData} action="" className='w-full px-6 md:px-20'>
<div className='flex flex-col w-full pt-4'>
<label htmlFor="sname" className='text-xl font-bold'>School Name</label>
<input value={school.sname} onChange={e => setSchool(e.target.value)} type="text" name="sname" className=' bg-white border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]' />
</div>
{/* <img src="/img/2.svg" alt=""/> */}
<div className='flex flex-col w-full pt-4'>
<label htmlFor="status" className='text-xl font-bold'>Status</label>
<input value={school.status} onChange={e => setSchool(e.target.value)} type="text" name="status" 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="phone" className='text-xl font-bold'>School contact Number</label>
<input value={school.phone} onChange={e => setSchool(e.target.value)} type="text" name="phone" 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="email" className='text-xl font-bold'> School contact Email ID</label>
<input value={school.email} onChange={e => setSchool(e.target.value)} type="text" name="email" 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>
<input value={school.country} onChange={e => setSchool(e.target.value)} type="text" name="country" 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="state" className='text-xl font-bold'>State</label>
<input value={school.state} onChange={e => setSchool(e.target.value)} type="text" name="state" 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="city" className='text-xl font-bold'>Cities</label>
<input value={school.city} onChange={e => setSchool(e.target.value)} type="text" name="city" 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="annual" className='text-xl font-bold'>Annual</label>
<input value={school.annual} onChange={e => setSchool(e.target.value)} type="text" name="annual" placeholder='' 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="toddlers" className='text-xl font-bold'>Toddlers</label>
<input value={school.toddlers} onChange={e => setSchool(e.target.value)} type="text" name="toddlers" 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="early_start_programme" className='text-xl font-bold'>Early Start Program</label>
<input value={school.early_start_programme} onChange={e => setSchool(e.target.value)} type="text" name="early_start_programme" 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="interakto" className='text-xl font-bold'>Interakto</label>
<input value={school.interakto} onChange={e => setSchool(e.target.value)} type="text" name="interakto" 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="usage_expiry" className='text-xl font-bold'> Usage Expiry Date: (YYYY-MM-DD)</label>
<input value={school.usage_expiry} onChange={e => setSchool(e.target.value)} type="text" name="usage_expiry" 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="agg_expiry" className='text-xl font-bold'> Agreement Expiry Date: (YYYY-MM-DD)</label>
<input value={school.agg_expiry} onChange={e => setSchool(e.target.value)} type="text" name="agg_expiry" className=' bg-white border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]' />
</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>
</div>
</form>
</div>
<div className='flex flex-col w-full'>
<label htmlFor="agreement_documents" className='text-xl font-bold'>Upload Agreement Document&apos;s</label>
<input id="agreement" onChange={uploadToServer} type="file" name="agreement_documents" className=' bg-white border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]' />
<div className='flex justify-end pt-2'>
<button className=' bg-[#FE4501] px-4 py-1.5 rounded-lg text-white'>Download Agreement</button>
</div>
</div>
<p className='text-2xl font-bold underline decoration-4 decoration-[#FE4501] pb-10'>Update School Information </p>
<form onSubmit={updateSchoolData} action="" className='w-full px-6 md:px-20'>
<div className='flex flex-col w-full pt-4'>
<label htmlFor="sname" className='text-xl font-bold'>School Name</label>
<input value={school.sname} onChange={e => setSchool(e.target.value)} type="text" name="sname" 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 pt-4'>
<label htmlFor="status" className='text-xl font-bold'>Status</label>
<input value={school.status} onChange={e => setSchool(e.target.value)} type="text" name="status" 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="phone" className='text-xl font-bold'>School contact Number</label>
<input value={school.phone} onChange={e => setSchool(e.target.value)} type="text" name="phone" 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="email" className='text-xl font-bold'> School contact Email ID</label>
<input value={school.email} onChange={e => setSchool(e.target.value)} type="text" name="email" 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>
<input value={school.country} onChange={e => setSchool(e.target.value)} type="text" name="country" 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="state" className='text-xl font-bold'>State</label>
<input value={school.state} onChange={e => setSchool(e.target.value)} type="text" name="state" 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="city" className='text-xl font-bold'>Cities</label>
<input value={school.city} onChange={e => setSchool(e.target.value)} type="text" name="city" 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="annual" className='text-xl font-bold'>Annual</label>
<input value={school.annual} onChange={e => setSchool(e.target.value)} type="text" name="annual" placeholder='' 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="toddlers" className='text-xl font-bold'>Toddlers</label>
<input value={school.toddlers} onChange={e => setSchool(e.target.value)} type="text" name="toddlers" 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="early_start_programme" className='text-xl font-bold'>Early Start Program</label>
<input value={school.early_start_programme} onChange={e => setSchool(e.target.value)} type="text" name="early_start_programme" 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="interakto" className='text-xl font-bold'>Interakto</label>
<input value={school.interakto} onChange={e => setSchool(e.target.value)} type="text" name="interakto" 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="usage_expiry" className='text-xl font-bold'> Usage Expiry Date: (YYYY-MM-DD)</label>
<input value={school.usage_expiry} onChange={e => setSchool(e.target.value)} type="text" name="usage_expiry" 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="agg_expiry" className='text-xl font-bold'> Agreement Expiry Date: (YYYY-MM-DD)</label>
<input value={school.agg_expiry} onChange={e => setSchool(e.target.value)} type="text" name="agg_expiry" className=' bg-white border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]' />
</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>
</div>
</form>
</div>
<div className='flex flex-col w-full'>
<label htmlFor="agreement_documents" className='text-xl font-bold'>Upload Agreement Document&apos;s</label>
<input id="agreement" onChange={uploadToServer} type="file" name="agreement_documents" className=' bg-white border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]' />
<div className='flex justify-end pt-2'>
<button className=' bg-[#FE4501] px-4 py-1.5 rounded-lg text-white'>Download Agreement</button>
</div>
</div>
</section>
</div>
</main>
</section>
</div>
</main>
)
}
return (
<>
Not signed in <br />
<button onClick={() => signIn()}>Sign in</button>
</>
)
}

202
src/pages/edit-user.jsx
View File

@ -1,3 +1,4 @@
import { signIn, signOut, useSession } from 'next-auth/react'
import {useId, useState, useEffect, useMemo} from 'react';
import 'react-phone-number-input/style.css'
import NavBar from '../components/NavBar';
@ -7,6 +8,7 @@ export default function EditUser() {
const router = useRouter();
const [user, setUser] = useState({});
const { data: session } = useSession()
useEffect(()=>{
if(router.query.user && router.query.user>0 ){
@ -67,102 +69,110 @@ export default function EditUser() {
alert(`User data updated`)
}
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>
if (session) {
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={updateUserData} 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 value={user.type} onChange={e => setUser(e.target.value)} type="text" name="type" 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 value={user.uname} onChange={e => setUser(e.target.value)} type="text" name="uname" 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="status" className='text-xl font-bold'> Status</label>
<input value={user.status} onChange={e => setUser(e.target.value)} type="text" name="status" 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="start_date" className='text-xl font-bold'> Start Date (YYYY-MM-DD) </label>
<input value={user.start_date} onChange={e => setUser(e.target.value)} type="text" name="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'> End Date (YYYY-MM-DD)</label>
<input value={user.end_date} onChange={e => setUser(e.target.value)} type="text" name="end_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="email" className='text-xl font-bold'>Email</label>
<input value={user.email} onChange={e => setUser(e.target.value)} 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="phone" className='text-xl font-bold'> Phone</label>
<input value={user.phone} onChange={e => setUser(e.target.value)} type="text" name="phone" 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="country" className='text-xl font-bold'>Country</label>
<input value={user.country} onChange={e => setUser(e.target.value)} type="text" name="country" 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="state" className='text-xl font-bold'> State</label>
<input value={user.state} onChange={e => setUser(e.target.value)} type="text" name="state" 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="city" className='text-xl font-bold'> City</label>
<input value={user.city} onChange={e => setUser(e.target.value)} type="text" name="city" 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="address" className='text-xl font-bold'> Address Line-1</label>
<input value={user.address} onChange={e => setUser(e.target.value)} type="text" name="address" 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="address" className='text-xl font-bold'> Address Line-2</label>
<input value={user.address} onChange={e => setUser(e.target.value)} type="text" name="address" 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 pt-4'>
<label htmlFor="" className='text-xl font-bold'>School ID</label>
<input value={user.school} onChange={e => setUser(e.target.value)} type="text" name="school" 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 pt-4'>
<label htmlFor="klas" className='text-xl font-bold'>Class</label>
<input value={user.klas} onChange={e => setUser(e.target.value)} type="text" name="klas" 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 pt-4'>
<label htmlFor="annual" className='text-xl font-bold'>annual</label>
<input value={user.annual} onChange={e => setUser(e.target.value)} type="text" name="annual" 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 pt-4'>
<label htmlFor="early_start_programme" className='text-xl font-bold'>Early Start Programme</label>
<input value={user.early_start_programme} onChange={e => setUser(e.target.value)} type="text" name="early_start_programme" 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 pt-4'>
<label htmlFor="toddlers" className='text-xl font-bold'>Toddlers</label>
<input value={user.toddlers} onChange={e => setUser(e.target.value)} type="text" name="toddlers" 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 pt-4'>
<label htmlFor="interakto" className='text-xl font-bold'>Interakto</label>
<input value={user.interakto} onChange={e => setUser(e.target.value)} type="text" name="interakto" className=' border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]' />
</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>
</div>
</form>
</div>
<form onSubmit={updateUserData} 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 value={user.type} onChange={e => setUser(e.target.value)} type="text" name="type" 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 value={user.uname} onChange={e => setUser(e.target.value)} type="text" name="uname" 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="status" className='text-xl font-bold'> Status</label>
<input value={user.status} onChange={e => setUser(e.target.value)} type="text" name="status" 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="start_date" className='text-xl font-bold'> Start Date (YYYY-MM-DD) </label>
<input value={user.start_date} onChange={e => setUser(e.target.value)} type="text" name="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'> End Date (YYYY-MM-DD)</label>
<input value={user.end_date} onChange={e => setUser(e.target.value)} type="text" name="end_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="email" className='text-xl font-bold'>Email</label>
<input value={user.email} onChange={e => setUser(e.target.value)} 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="phone" className='text-xl font-bold'> Phone</label>
<input value={user.phone} onChange={e => setUser(e.target.value)} type="text" name="phone" 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="country" className='text-xl font-bold'>Country</label>
<input value={user.country} onChange={e => setUser(e.target.value)} type="text" name="country" 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="state" className='text-xl font-bold'> State</label>
<input value={user.state} onChange={e => setUser(e.target.value)} type="text" name="state" 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="city" className='text-xl font-bold'> City</label>
<input value={user.city} onChange={e => setUser(e.target.value)} type="text" name="city" 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="address" className='text-xl font-bold'> Address Line-1</label>
<input value={user.address} onChange={e => setUser(e.target.value)} type="text" name="address" 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="address" className='text-xl font-bold'> Address Line-2</label>
<input value={user.address} onChange={e => setUser(e.target.value)} type="text" name="address" 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 pt-4'>
<label htmlFor="" className='text-xl font-bold'>School ID</label>
<input value={user.school} onChange={e => setUser(e.target.value)} type="text" name="school" 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 pt-4'>
<label htmlFor="klas" className='text-xl font-bold'>Class</label>
<input value={user.klas} onChange={e => setUser(e.target.value)} type="text" name="klas" 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 pt-4'>
<label htmlFor="annual" className='text-xl font-bold'>annual</label>
<input value={user.annual} onChange={e => setUser(e.target.value)} type="text" name="annual" 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 pt-4'>
<label htmlFor="early_start_programme" className='text-xl font-bold'>Early Start Programme</label>
<input value={user.early_start_programme} onChange={e => setUser(e.target.value)} type="text" name="early_start_programme" 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 pt-4'>
<label htmlFor="toddlers" className='text-xl font-bold'>Toddlers</label>
<input value={user.toddlers} onChange={e => setUser(e.target.value)} type="text" name="toddlers" 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 pt-4'>
<label htmlFor="interakto" className='text-xl font-bold'>Interakto</label>
<input value={user.interakto} onChange={e => setUser(e.target.value)} type="text" name="interakto" className=' border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]' />
</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>
</div>
</form>
</div>
</section>
</div>
</main>
</section>
</div>
</main>
)
}
return (
<>
Not signed in <br />
<button onClick={() => signIn()}>Sign in</button>
</>
)
}

426
src/pages/edit-user4.jsx Normal file
View File

@ -0,0 +1,426 @@
// 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 [userDetails, setUserDetails] = useState({});
useEffect(()=>{
if(router.query.user && router.query.user>1 ){
const body = new FormData();
body.append("user", router.query.user);
const response = await fetch("/api/getUserDetails", {
method: "POST",
body
});
fetch(`/api/getUserDetails?${router.query.user}`)
.then(res => res.json())
.then(data => {
// console.log(router.query.school);
setUserDetails(data.data)
})
}
}, [router.query.school]);
const response = await fetch(endpoint, options)
const result = await response.json()
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>
)
}

1
src/pages/index.jsx
View File

@ -10,7 +10,6 @@ export default function Home() {
<main>
<NavBar />
<br />
</main>
)
}

10
src/pages/login.jsx
View File

@ -54,7 +54,7 @@ export default function SignIn({ csrfToken }) {
{(formik) => (
<form onSubmit={formik.handleSubmit}>
<div
className="bg-red-400 flex flex-col items-center
className="bg-[#FFF6F2] flex flex-col items-center
justify-center min-h-screen py-2 shadow-lg">
<div className="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
<input
@ -77,7 +77,7 @@ export default function SignIn({ csrfToken }) {
aria-label="enter your email"
aria-required="true"
type="text"
className="w-full bg-gray-300 text-gray-900 mt-2 p-3"
className="w-full focus:bg-gray-300 text-gray-900 mt-2 p-3 border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]"
/>
</label>
@ -88,7 +88,7 @@ export default function SignIn({ csrfToken }) {
<div className="mb-6">
<label
htmlFor="password"
className="uppercase text-sm text-gray-600 font-bold"
className="uppercase text-sm text-gray-600 font-bold "
>
password
<Field
@ -96,7 +96,7 @@ export default function SignIn({ csrfToken }) {
aria-label="enter your password"
aria-required="true"
type="password"
className="w-full bg-gray-300 text-gray-900 mt-2 p-3"
className="w-full bg-gray-300 text-gray-900 mt-2 p-3 border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]"
/>
</label>
@ -107,7 +107,7 @@ export default function SignIn({ csrfToken }) {
<div className="flex items-center justify-center">
<button
type="submit"
className="bg-green-400 text-gray-100 p-3 rounded-lg w-full"
className="bg-[#FE4501] text-white p-3 rounded-lg w-full"
>
{formik.isSubmitting ? 'Please wait...' : 'Sign In'}
</button>

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

@ -1,4 +1,5 @@
// import SchoolEditForm from '../../components/SchoolEditForm'
import { signIn, signOut, useSession } from 'next-auth/react'
import React, { useEffect, useState } from "react";
import Image from 'next/image'
import { Inter } from 'next/font/google'
@ -6,6 +7,7 @@ const inter = Inter({ subsets: ['latin'] })
import NavBar from '../../components/NavBar'
export default function Modal() {
const [school, setSchool] = useState([]);
const { data: session} = useSession()
const fetchData = async () => {
const response = await fetch("/api/listSchlools");
const data = await response.json();
@ -16,59 +18,68 @@ const fetchData = async () => {
useEffect(() => {
fetchData();
},[])
if (session) {
return (
<main>
<div>
<NavBar />
<section className='container mx-auto px-4 mt-16'>
<div className="flex flex-row justify-end bg-[#FFF6F2] p-2 gap-x-4 border-x-2 border-t-2 rounded-t-xl">
<div className="flex flex-row justify-center place-items-center">
<input type="text" className="md:w-32 md:focus:w-96 duration-[1s] border-2 border-[#FE4501] w-full rounded-l-full p-2 focus:outline-none focus:border-[#F2B705] bg-[#FFF6F2] focus:bg-white text-center" placeholder="Search School" />
<a href="" className="bg-[#FE4501] rounded-r-full p-2 px-4 border-2 border-[#FE4501] text-white font-bold ">
<svg width="24px" height="24px" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="#ffffff"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path fill="#ffffff" fill-rule="evenodd" d="M4 9a5 5 0 1110 0A5 5 0 014 9zm5-7a7 7 0 104.2 12.6.999.999 0 00.093.107l3 3a1 1 0 001.414-1.414l-3-3a.999.999 0 00-.107-.093A7 7 0 009 2z"></path> </g></svg>
</a>
</div>
{/* <a href="/add-school-form" className="inline-flex place-items-center justify-center p-2 bg-[#FE4501] text-white font-bold rounded-full whitespace-nowrap">
<svg width="20px" height="20px" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="#ffffff"><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="M7.5 4.5L11.5 6.5V14.5H3.5V6.5L7.5 4.5ZM7.5 4.5V0M0 14.5H15M1.5 14.5V8.5H3.5M13.5 14.5V8.5H11.5M6.5 14.5V11.5H8.5V14.5M7.5 0.5H10.5V2.5H7.5M7.5 9.5C6.94772 9.5 6.5 9.05228 6.5 8.5C6.5 7.94772 6.94772 7.5 7.5 7.5C8.05228 7.5 8.5 7.94772 8.5 8.5C8.5 9.05228 8.05228 9.5 7.5 9.5Z" stroke="#ffffff"></path> </g></svg>&nbsp;
Add School
</a> */}
</div>
<div className='flex xl:justify-center overflow-x-scroll pb-4 w-full'>
<table className=" text-center border-x-2 border-b-2 p-2 w-full">
<thead className=''>
<tr className='bg-[#FFF6F2] text-[#1D1D1D] text-xl whitespace-nowrap'>
<th className=" p-2">ID</th>
<th className=" p-2"> Name</th>
<th className=" p-2">City</th>
<th className=" p-2">Status</th>
<th className=" p-2">Expiry</th>
<th className=" p-2 inline-flex"> <img src="/img/3.svg" alt="" />Edit</th>
</tr>
</thead>
<tbody>
{school.map(data=>
<tr key={data.id} className="border-b-2 whitespace-normal">
<td className=" p-2">{data.id}</td>
<td className=" p-2">{data.sname}</td>
<td className="p-2">{data.city}</td>
<td className="p-2">{data.status}</td>
<td className="p-2">{data.usage_expiry}</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>
)}
</tbody>
{/* <SchoolEditForm /> */}
</table>
</div>
</section>
</div>
</main>
)
}
{/* <LogOutPage /> */}
return (
<main>
<div>
<NavBar />
<section className='container mx-auto px-4 mt-16'>
<div className="flex flex-row justify-end bg-[#FFF6F2] p-2 gap-x-4 border-x-2 border-t-2 rounded-t-xl">
<div className="flex flex-row justify-center place-items-center">
<input type="text" className="md:w-32 md:focus:w-96 duration-[1s] border-2 border-[#FE4501] w-full rounded-l-full p-2 focus:outline-none focus:border-[#F2B705] bg-[#FFF6F2] focus:bg-white text-center" placeholder="Search School" />
<a href="" className="bg-[#FE4501] rounded-r-full p-2 px-4 border-2 border-[#FE4501] text-white font-bold ">
<svg width="24px" height="24px" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="#ffffff"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path fill="#ffffff" fill-rule="evenodd" d="M4 9a5 5 0 1110 0A5 5 0 014 9zm5-7a7 7 0 104.2 12.6.999.999 0 00.093.107l3 3a1 1 0 001.414-1.414l-3-3a.999.999 0 00-.107-.093A7 7 0 009 2z"></path> </g></svg>
</a>
</div>
{/* <a href="/add-school-form" className="inline-flex place-items-center justify-center p-2 bg-[#FE4501] text-white font-bold rounded-full whitespace-nowrap">
<svg width="20px" height="20px" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="#ffffff"><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="M7.5 4.5L11.5 6.5V14.5H3.5V6.5L7.5 4.5ZM7.5 4.5V0M0 14.5H15M1.5 14.5V8.5H3.5M13.5 14.5V8.5H11.5M6.5 14.5V11.5H8.5V14.5M7.5 0.5H10.5V2.5H7.5M7.5 9.5C6.94772 9.5 6.5 9.05228 6.5 8.5C6.5 7.94772 6.94772 7.5 7.5 7.5C8.05228 7.5 8.5 7.94772 8.5 8.5C8.5 9.05228 8.05228 9.5 7.5 9.5Z" stroke="#ffffff"></path> </g></svg>&nbsp;
Add School
</a> */}
</div>
<div className='flex xl:justify-center overflow-x-scroll pb-4 w-full'>
<table className=" text-center border-x-2 border-b-2 p-2 w-full">
<thead className=''>
<tr className='bg-[#FFF6F2] text-[#1D1D1D] text-xl whitespace-nowrap'>
<th className=" p-2">ID</th>
<th className=" p-2"> Name</th>
<th className=" p-2">City</th>
<th className=" p-2">Status</th>
<th className=" p-2">Expiry</th>
<th className=" p-2 inline-flex"> <img src="/img/3.svg" alt="" />Edit</th>
</tr>
</thead>
<tbody>
{school.map(data=>
<tr key={data.id} className="border-b-2 whitespace-normal">
<td className=" p-2">{data.id}</td>
<td className=" p-2">{data.sname}</td>
<td className="p-2">{data.city}</td>
<td className="p-2">{data.status}</td>
<td className="p-2">{data.usage_expiry}</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>
)}
</tbody>
{/* <SchoolEditForm /> */}
</table>
</div>
</section>
</div>
</main>
<>
Not signed in <br />
<button onClick={() => signIn()}>Sign in</button>
</>
)
}

84
src/pages/school-list/index22.jsx Normal file
View File

@ -0,0 +1,84 @@
// import SchoolEditForm from '../../components/SchoolEditForm'
import React, { useEffect, useState } from "react";
import Image from 'next/image'
import { Inter } from 'next/font/google'
const inter = Inter({ subsets: ['latin'] })
import NavBar from '../../components/NavBar'
export default function Modal() {
const [school, setUser] = useState([]);
const fetchData = async () => {
const response = await fetch("https://management.beanstalkedu.com/items/school?filter[status][_eq]=published");
const data = await response.json();
return setUser(data.data);
}
console.log(school)
useEffect(() => {
fetchData();
},[])
return (
<main>
<div>
<NavBar />
<section className='container mx-auto px-4 mt-16'>
<div className="flex flex-row justify-end bg-[#FFF6F2] p-2 gap-x-4 border-x-2 border-t-2 rounded-t-xl">
<div className="flex flex-row justify-center place-items-center">
<input type="text" className="md:w-32 md:focus:w-96 duration-[1s] border-2 border-[#FE4501] w-full rounded-l-full p-2 focus:outline-none focus:border-[#F2B705] bg-[#FFF6F2] focus:bg-white text-center" placeholder="Search School" />
<a href="" className="bg-[#FE4501] rounded-r-full p-2 px-4 border-2 border-[#FE4501] text-white font-bold ">
<svg width="24px" height="24px" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="#ffffff"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path fill="#ffffff" fill-rule="evenodd" d="M4 9a5 5 0 1110 0A5 5 0 014 9zm5-7a7 7 0 104.2 12.6.999.999 0 00.093.107l3 3a1 1 0 001.414-1.414l-3-3a.999.999 0 00-.107-.093A7 7 0 009 2z"></path> </g></svg>
</a>
</div>
{/* <a href="/add-school-form" className="inline-flex place-items-center justify-center p-2 bg-[#FE4501] text-white font-bold rounded-full whitespace-nowrap">
<svg width="20px" height="20px" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="#ffffff"><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="M7.5 4.5L11.5 6.5V14.5H3.5V6.5L7.5 4.5ZM7.5 4.5V0M0 14.5H15M1.5 14.5V8.5H3.5M13.5 14.5V8.5H11.5M6.5 14.5V11.5H8.5V14.5M7.5 0.5H10.5V2.5H7.5M7.5 9.5C6.94772 9.5 6.5 9.05228 6.5 8.5C6.5 7.94772 6.94772 7.5 7.5 7.5C8.05228 7.5 8.5 7.94772 8.5 8.5C8.5 9.05228 8.05228 9.5 7.5 9.5Z" stroke="#ffffff"></path> </g></svg>&nbsp;
Add School
</a> */}
<a href="/add-school-form" className="inline-flex place-items-center justify-center p-2 bg-[#FE4501] text-white font-bold rounded-full whitespace-nowrap">
<svg width="20px" height="20px" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="#ffffff"><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="M7.5 4.5L11.5 6.5V14.5H3.5V6.5L7.5 4.5ZM7.5 4.5V0M0 14.5H15M1.5 14.5V8.5H3.5M13.5 14.5V8.5H11.5M6.5 14.5V11.5H8.5V14.5M7.5 0.5H10.5V2.5H7.5M7.5 9.5C6.94772 9.5 6.5 9.05228 6.5 8.5C6.5 7.94772 6.94772 7.5 7.5 7.5C8.05228 7.5 8.5 7.94772 8.5 8.5C8.5 9.05228 8.05228 9.5 7.5 9.5Z" stroke="#ffffff"></path> </g></svg>&nbsp;
List Users Under This School
</a>
<div className="inline-flex place-items-center justify-center p-2 bg-[#FE4501] text-white font-bold rounded-full whitespace-nowrap">
<span className="text-small">CSV Upload</span>
<input type="file" />
</div>
</div>
<div className='flex xl:justify-center overflow-x-scroll pb-4 w-full'>
<table className=" text-center border-x-2 border-b-2 p-2 w-full">
<thead className=''>
<tr className='bg-[#FFF6F2] text-[#1D1D1D] text-xl whitespace-nowrap'>
<th className=" p-2">ID</th>
<th className=" p-2">School Name</th>
<th className=" p-2">City</th>
<th className=" p-2">Annual</th>
<th className=" p-2">Interakto</th>
<th className=" p-2">Status</th>
<th className=" p-2 inline-flex"> <img src="/img/3.svg" alt="" />Edit</th>
</tr>
</thead>
<tbody>
{school.map(data=>
<tr className="border-b-2 whitespace-normal">
<td className=" p-2">{data.id}</td>
<td className=" p-2">{data.name}</td>
<td className="p-2">{data.city}</td>
<td className="p-2">{data.anual}</td>
<td className="p-2">{data.agreement_expiry_date}</td>
<td className="p-2">{data.early_start_programme}</td>
<td className="p-2">{data.toddlers}</td>
<td className="p-2">{data.interakto}</td>
<td className="p-2">{data.status}</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>
)}
</tbody>
{/* <SchoolEditForm /> */}
</table>
</div>
</section>
</div>
</main>
)
}

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

@ -1,7 +1,9 @@
import { signIn, signOut, useSession } from 'next-auth/react'
import React, { useEffect, useState } from "react";
import Link from 'next/link'
import NavBar from '../components/NavBar'
export default function Modal() {
const { data: session } = useSession()
const [user, setUser] = useState([]);
const [maxPageNumber, setMaxPageNumber] = useState([]);
const fetchData = async () => {
@ -16,52 +18,50 @@ const fetchData = async () => {
useEffect(() => {
fetchData();
},[])
if(session) {
return (
<main>
<div>
<NavBar />
<section className='container mx-auto px-4 mt-16'>
<div className="flex flex-row justify-end bg-[#FFF6F2] p-2 gap-x-4 border-x-2 border-t-2 rounded-t-xl">
<div className="flex flex-row justify-end bg-[#FFF6F2] p-2 gap-x-4 border-x-2 border-t-2 rounded-t-xl">
<nav aria-label="Page navigation example">
<ul class="inline-flex items-center -space-x-px">
<li>
<a href="#" class="block px-3 py-2 ml-0 leading-tight text-gray-500 bg-white border border-gray-300 rounded-l-lg hover:bg-gray-100 hover:text-gray-700 ">
<span class="sr-only">Previous</span>
<svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
</a>
</li>
{maxPageNumber.map((number) => (
<li key={number}> <Link href={{ pathname: '/user-list', query: { page: number } }} class="px-3 py-2 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 ">{number}</Link> </li>
))}
<nav aria-label="Page navigation example">
<ul class="inline-flex items-center -space-x-px">
<li>
<a href="#" class="block px-3 py-2 ml-0 leading-tight text-gray-500 bg-white border border-gray-300 rounded-l-lg hover:bg-gray-100 hover:text-gray-700 ">
<span class="sr-only">Previous</span>
<svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
</a>
</li>
{maxPageNumber.map((number) => (
<li key={number}> <Link href={{ pathname: '/user-list', query: { page: number } }} class="px-3 py-2 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 ">{number}</Link> </li>
))}
<li>
<a href="?page=6" class="block px-3 py-2 leading-tight text-gray-500 bg-white border border-gray-300 rounded-r-lg hover:bg-gray-100 hover:text-gray-700 ">
<span class="sr-only">Next</span>
<svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
</a>
</li>
</ul>
</nav>
<div className="flex flex-row justify-center place-items-center">
<input type="text" className="md:w-32 md:focus:w-96 duration-[1s] border-2 border-[#FE4501] w-full rounded-l-full p-2 focus:outline-none focus:border-[#F2B705] bg-[#FFF6F2] focus:bg-white text-center" placeholder="Search User" />
<a href="" className="bg-[#FE4501] rounded-r-full p-2 px-4 border-2 border-[#FE4501] text-white font-bold ">
<svg className="hover:scale-110 active:scale-75 duration-300" width="24px" height="24px" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="#ffffff"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path fill="#ffffff" fill-rule="evenodd" d="M4 9a5 5 0 1110 0A5 5 0 014 9zm5-7a7 7 0 104.2 12.6.999.999 0 00.093.107l3 3a1 1 0 001.414-1.414l-3-3a.999.999 0 00-.107-.093A7 7 0 009 2z"></path> </g></svg>
</a>
</div>
<Link href="/add-user-form" className="inline-flex place-items-center p-2 bg-[#FE4501] text-white font-bold rounded-full whitespace-nowrap">
<svg className="font-bold" width="25px" height="25px" viewBox="0 0 21 21" xmlns="http://www.w3.org/2000/svg" fill="#ffffff" stroke="#ffffff"><g id="SVGRepo_bgCarrier" stroke-width="2"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g fill="none" fill-rule="evenodd" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" transform="translate(3 2)"> <path d="m7.5.5c1.65685425 0 3 1.34314575 3 3v2c0 1.65685425-1.34314575 3-3 3s-3-1.34314575-3-3v-2c0-1.65685425 1.34314575-3 3-3z"></path> <path d="m14.5 2.5v4"></path> <path d="m16.5 4.5h-4"></path> <path d="m14.5 14.5v-.7281753c0-3.1864098-3.6862915-5.2718247-7-5.2718247s-7 2.0854149-7 5.2718247v.7281753c0 .5522847.44771525 1 1 1h12c.5522847 0 1-.4477153 1-1z"></path> </g> </g></svg>
Add User
</Link>
</div>
<div className='flex overflow-x-scroll xl:justify-center'>
<li>
<a href="?page=6" class="block px-3 py-2 leading-tight text-gray-500 bg-white border border-gray-300 rounded-r-lg hover:bg-gray-100 hover:text-gray-700 ">
<span class="sr-only">Next</span>
<svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
</a>
</li>
</ul>
</nav>
<div className="flex flex-row justify-center place-items-center">
<input type="text" className="md:w-32 md:focus:w-96 duration-[1s] border-2 border-[#FE4501] w-full rounded-l-full p-2 focus:outline-none focus:border-[#F2B705] bg-[#FFF6F2] focus:bg-white text-center" placeholder="Search User" />
<a href="" className="bg-[#FE4501] rounded-r-full p-2 px-4 border-2 border-[#FE4501] text-white font-bold ">
<svg className="hover:scale-110 active:scale-75 duration-300" width="24px" height="24px" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="#ffffff"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path fill="#ffffff" fill-rule="evenodd" d="M4 9a5 5 0 1110 0A5 5 0 014 9zm5-7a7 7 0 104.2 12.6.999.999 0 00.093.107l3 3a1 1 0 001.414-1.414l-3-3a.999.999 0 00-.107-.093A7 7 0 009 2z"></path> </g></svg>
</a>
</div>
<Link href="/add-user-form" className="inline-flex place-items-center p-2 bg-[#FE4501] text-white font-bold rounded-full whitespace-nowrap">
<svg className="font-bold" width="25px" height="25px" viewBox="0 0 21 21" xmlns="http://www.w3.org/2000/svg" fill="#ffffff" stroke="#ffffff"><g id="SVGRepo_bgCarrier" stroke-width="2"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g fill="none" fill-rule="evenodd" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" transform="translate(3 2)"> <path d="m7.5.5c1.65685425 0 3 1.34314575 3 3v2c0 1.65685425-1.34314575 3-3 3s-3-1.34314575-3-3v-2c0-1.65685425 1.34314575-3 3-3z"></path> <path d="m14.5 2.5v4"></path> <path d="m16.5 4.5h-4"></path> <path d="m14.5 14.5v-.7281753c0-3.1864098-3.6862915-5.2718247-7-5.2718247s-7 2.0854149-7 5.2718247v.7281753c0 .5522847.44771525 1 1 1h12c.5522847 0 1-.4477153 1-1z"></path> </g> </g></svg>
Add User
</Link>
</div>
<div className='flex overflow-x-scroll xl:justify-center'>
<table className=" text-center border-2 p-2 w-full">
<thead className=''>
<tr className='bg-[#FFF6F2] text-[#1D1D1D] text-xl whitespace-nowrap'>
<th className="border-x-2 p-4">ID</th>
<th className="border-x-2 p-4">Name</th>
<th className="border-x-2 p-4">School 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 ID</th>
@ -71,36 +71,44 @@ const fetchData = async () => {
</tr>
</thead>
<tbody>
{user.map
(data=>
<tr key={data.id} className="border-b-2 whitespace-normal text-left">
<td className="border-x-2 p-2 text-center">{data.id}</td>
<td className="border-x-2 p-2 text-center">{data.uname}</td>
<td className="border-x-2 p-2 text-center">{data.phone}</td>
<td className="border-x-2 p-2 text-center">{data.email}</td>
<td className="border-x-2 p-2 text-center">{data.school}</td>
<td className="border-x-2 p-2 text-center">{data.type}</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>
</td>
</tr>
)
}
</tbody>
</table>
</div>
{user.map
(data=>
<tr key={data.id} className="border-b-2 whitespace-normal text-left">
<td className="border-x-2 p-2 text-center">{data.id}</td>
<td className="border-x-2 p-2 text-center">{data.uname}</td>
<td className="border-x-2 p-2 text-center">{data.phone}</td>
<td className="border-x-2 p-2 text-center">{data.email}</td>
<td className="border-x-2 p-2 text-center">{data.school}</td>
<td className="border-x-2 p-2 text-center">{data.type}</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>
</td>
</tr>
)
}
</tbody>
</table>
</div>
</section>
</div>
</main>
)
}
return (
<>
Not signed in <br />
<button onClick={() => signIn()}>Sign in</button>
</>
)
}