edit-user
parent
a8e3dc48df
commit
2b85a5a356
|
|
@ -0,0 +1,67 @@
|
|||
import csv from 'csv-parser';
|
||||
import fs from 'fs';
|
||||
import sqlite3 from 'sqlite3';
|
||||
|
||||
export default function handler(req,res) {
|
||||
|
||||
|
||||
const DB_NAME = 'data/appUser.db';
|
||||
const TABLE_NAME = 'user';
|
||||
|
||||
// Open a connection to the SQLite database
|
||||
const db = new sqlite3.Database(DB_NAME);
|
||||
|
||||
const query = `SELECT * FROM ${TABLE_NAME}`;
|
||||
|
||||
function getAllRows(tableName) {
|
||||
return new Promise((resolve, reject) => {
|
||||
const sql = `SELECT * FROM ${tableName} WHERE id = ?`;
|
||||
db.all(sql, [req.query.user], (err, rows) => {
|
||||
if (err) {
|
||||
reject(err);
|
||||
return;
|
||||
}
|
||||
const data = rows;
|
||||
resolve(data);
|
||||
});
|
||||
});
|
||||
};
|
||||
async function doSomething() {
|
||||
try {
|
||||
const returnData = await getAllRows('user');
|
||||
res.setHeader('Content-Type', 'application/json')
|
||||
res.status(200).json(returnData)
|
||||
// console.log(data);
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
}
|
||||
}
|
||||
|
||||
doSomething();
|
||||
// const returnData = getAllRows('user');
|
||||
// console.log(getAllRows('user'));
|
||||
// const returnData= db.run('SELECT * FROM user');
|
||||
|
||||
// fs.createReadStream('data/user.csv')
|
||||
// .pipe(csv())
|
||||
// .on('data', (data) => {
|
||||
// const values = Object.values(data);
|
||||
// const placeholders = values.map(() => '?').join(',');
|
||||
// const sql = `INSERT INTO ${TABLE_NAME} (${Object.keys(data).join(',')}) VALUES (${placeholders})`;
|
||||
// db.run(sql, values, (err) => {
|
||||
// if (err) {
|
||||
// console.error(err);
|
||||
// }
|
||||
// });
|
||||
// })
|
||||
// .on('end', () => {
|
||||
// console.log(`Data inserted successfully into table ${TABLE_NAME}`);
|
||||
|
||||
// // Close the database connection
|
||||
// db.close();
|
||||
// });
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
|
@ -1,133 +1,60 @@
|
|||
// https://management.beanstalkedu.com/items/school
|
||||
// import React from 'react';
|
||||
import {useId, useState, useEffect, useMemo} from 'react';
|
||||
import Select from 'react-select'
|
||||
import countryList from 'react-select-country-list'
|
||||
import 'react-phone-number-input/style.css'
|
||||
import PhoneInput from 'react-phone-number-input'
|
||||
import NavBar from '../components/NavBar';
|
||||
import { useRouter } from 'next/router'
|
||||
// import { Inter } from 'next/font/google'
|
||||
|
||||
const typeParent = "parent"
|
||||
|
||||
export default function addUserForm() {
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
const [allLanguage, setLanguage] = useState([
|
||||
{lang: "Assamese", value: false},
|
||||
{lang: "Bengali", value: false},
|
||||
{lang: "English", value: false},
|
||||
{lang: "Hindi", value: false},
|
||||
{lang: "Telegu", value: false},
|
||||
{lang: "Punjabi", value: false},
|
||||
{lang: "Malayalam", value: false},
|
||||
{lang: "Tamil", value: false},
|
||||
{lang: "Kannada", value: false},
|
||||
{lang: "Gujrati", value: false},
|
||||
])
|
||||
// console.log(allLanguage)
|
||||
const [currentType, setCurrentType] = useState(typeParent)
|
||||
const [countryValue, setCountryValue] = useState('')
|
||||
const options = useMemo(() => countryList().getData(), [])
|
||||
const [phoneValue, setphoneValue] = useState()
|
||||
let [individualValue = true, setindividualValue] = useState()
|
||||
|
||||
const [allStates, setAllStates] = useState([])
|
||||
const [allCities, setAllCities] = useState([])
|
||||
|
||||
const handleSelectAllStates = stateCode => {
|
||||
setAllCities([])
|
||||
fetch(`https://api.siliconpin.com/v3/list/country/city/?country=${countryValue.value}&state=${stateCode.value}`)
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
// console.log("handleSelectAllStates:", data, options)
|
||||
let newData = data && data.length > 0 && data.map(n => {
|
||||
return {
|
||||
label: n.name,
|
||||
value: n.name
|
||||
|
||||
}
|
||||
})
|
||||
setAllCities(newData)
|
||||
})
|
||||
}
|
||||
|
||||
const selectCountry = countryValue => {
|
||||
setAllStates([])
|
||||
fetch(`https://api.siliconpin.com/v3/list/country/state/?country=${countryValue.value}`).then(res => res.json())
|
||||
.then(data => {
|
||||
console.log("countryValue:", data, options)
|
||||
let newData = data && data.length > 0 && data.map(n => {
|
||||
return {
|
||||
label: n.name,
|
||||
value: n.iso2
|
||||
|
||||
}
|
||||
})
|
||||
setAllStates(newData)
|
||||
setAllCities([])
|
||||
})
|
||||
|
||||
setCountryValue(countryValue)
|
||||
}
|
||||
|
||||
const individual = (event) => {
|
||||
// console.log(event.target.schoolID.value)
|
||||
|
||||
setindividualValue(individualValue = false)
|
||||
}
|
||||
const [school, setSchool] = useState(null);
|
||||
useEffect(() => {
|
||||
fetch(`https://management.beanstalkedu.com/items/school`)
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
setSchool(data)
|
||||
|
||||
})
|
||||
}, [])
|
||||
export default function editUser() {
|
||||
const router = useRouter();
|
||||
|
||||
const updateUserData = async (event) => {
|
||||
const body = new FormData();
|
||||
body.append("file", agreement.files[0]);
|
||||
body.append("fName", `${router.query.school}.pdf`);
|
||||
const response = await fetch("/api/updateUserDetails", {
|
||||
method: "POST",
|
||||
body
|
||||
});
|
||||
};
|
||||
|
||||
const [user, setUser] = useState({});
|
||||
|
||||
useEffect(()=>{
|
||||
if(router.query.user && router.query.user>1){
|
||||
fetch(`/api/listUsers/${router.query.user}`)
|
||||
console.log(router.query);
|
||||
// if(router.query.school<1) {
|
||||
// const { sid } = router.query;
|
||||
// setSchool(sid)
|
||||
if(router.query.user && router.query.user>1 ){
|
||||
fetch(`/api/getUserDetails?user=${router.query.user}`)
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
setUser(data)
|
||||
.then(data => {
|
||||
console.log(router.query.user);
|
||||
setUser(data)
|
||||
})
|
||||
}
|
||||
)
|
||||
}
|
||||
},
|
||||
[router.query.user]);
|
||||
console.log(user)
|
||||
|
||||
const handleFormsubmit = async (event) => {
|
||||
|
||||
}, [router.query.school]);
|
||||
|
||||
const handleSubmit = async (event) => {
|
||||
event.preventDefault()
|
||||
console.log(event.target.lang.checked)
|
||||
const data = {
|
||||
"status": "published",
|
||||
type: event.target.type.value,
|
||||
uname: event.target.uname.value,
|
||||
"status":"published",
|
||||
name: event.target.schoolName.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,
|
||||
state: event.target.state.value,
|
||||
cities: event.target.cities.value,
|
||||
anual: event.target.anual.value,
|
||||
early_start_programme: event.target.early_start_programme.value,
|
||||
toddlers: event.target.toddlers.value,
|
||||
early_start_programme: event.target.early_start_programme.value,
|
||||
interakto: event.target.interakto.value,
|
||||
agreement_expiry_date: event.target.agreement_expiry_date.value,
|
||||
school_agreement: event.target.school_agreement.value,
|
||||
school_contact_number: event.target.school_contact_number.value,
|
||||
school_email_id: event.target.school_email_id.value,
|
||||
|
||||
}
|
||||
const JSONdata = JSON.stringify(data)
|
||||
const endpoint = '/api/addUsers'
|
||||
console.log(data)
|
||||
const endpoint = 'https://management.beanstalkedu.com/items/school'
|
||||
const options = {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
|
|
@ -136,43 +63,12 @@ export default function addUserForm() {
|
|||
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)
|
||||
// alert(`Is this your full name: ${result.data}`)
|
||||
alert(`School Saved`)
|
||||
}
|
||||
|
||||
return (
|
||||
<main>
|
||||
<div>
|
||||
|
|
@ -184,18 +80,16 @@ export default function addUserForm() {
|
|||
<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'>
|
||||
<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 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]' />
|
||||
<input 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 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'/>
|
||||
<input value={user.name} 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>
|
||||
|
|
@ -204,194 +98,27 @@ export default function addUserForm() {
|
|||
</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}/>
|
||||
<input 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>
|
||||
{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}/>
|
||||
<input value={user.name} 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 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>
|
||||
<input value={user.name} 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 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>
|
||||
<input value={user.name} 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>
|
||||
{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> <input type="checkbox" name="lang" value="Assamese" className='check-box'/> <br />
|
||||
<label className='cursor-pointer' htmlFor="Bengali"> Bengali </label> <input type="checkbox" name="lang" value="Bengali" className='check-box'/> <br />
|
||||
<label className='cursor-pointer' htmlFor="English"> English </label> <input type="checkbox" name="lang" value="English" className='check-box'/> <br />
|
||||
<label className='cursor-pointer' htmlFor="Hindi"> Hindi </label> <input type="checkbox" name="lang" value="Hindi" className='check-box'/> <br />
|
||||
<label className='cursor-pointer' htmlFor="Telegu"> Telegu </label> <input type="checkbox" name="lang" value="Telegu" className='check-box'/> <br />
|
||||
<label className='cursor-pointer' htmlFor="Punjabi"> Punjabi </label> <input type="checkbox" name="lang" value="Punjabi" className='check-box'/> <br />
|
||||
<label className='cursor-pointer' htmlFor="Malayalam"> Malayalam </label> <input type="checkbox" name="lang" value="Malayalam" className='check-box'/> <br />
|
||||
<label className='cursor-pointer' htmlFor="Tamil"> Tamil </label> <input type="checkbox" name="lang" value="Tamil" className='check-box'/> <br />
|
||||
<label className='cursor-pointer' htmlFor="Kannada"> Kannada </label> <input type="checkbox" name="lang" value="Kannada" className='check-box'/> <br />
|
||||
<label className='cursor-pointer' htmlFor="Gujrati"> Gujrati </label> <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>
|
||||
<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>
|
||||
}
|
||||
<input value={user.name} 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 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>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,402 @@
|
|||
// https://management.beanstalkedu.com/items/school
|
||||
// import React from 'react';
|
||||
import {useId, useState, useEffect, useMemo} from 'react';
|
||||
import Select from 'react-select'
|
||||
import countryList from 'react-select-country-list'
|
||||
import 'react-phone-number-input/style.css'
|
||||
import PhoneInput from 'react-phone-number-input'
|
||||
import NavBar from '../components/NavBar';
|
||||
import { useRouter } from 'next/router'
|
||||
// import { Inter } from 'next/font/google'
|
||||
|
||||
const typeParent = "parent"
|
||||
|
||||
export default function addUserForm() {
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
const [allLanguage, setLanguage] = useState([
|
||||
{lang: "Assamese", value: false},
|
||||
{lang: "Bengali", value: false},
|
||||
{lang: "English", value: false},
|
||||
{lang: "Hindi", value: false},
|
||||
{lang: "Telegu", value: false},
|
||||
{lang: "Punjabi", value: false},
|
||||
{lang: "Malayalam", value: false},
|
||||
{lang: "Tamil", value: false},
|
||||
{lang: "Kannada", value: false},
|
||||
{lang: "Gujrati", value: false},
|
||||
])
|
||||
// console.log(allLanguage)
|
||||
const [currentType, setCurrentType] = useState(typeParent)
|
||||
const [countryValue, setCountryValue] = useState('')
|
||||
const options = useMemo(() => countryList().getData(), [])
|
||||
const [phoneValue, setphoneValue] = useState()
|
||||
let [individualValue = true, setindividualValue] = useState()
|
||||
|
||||
const [allStates, setAllStates] = useState([])
|
||||
const [allCities, setAllCities] = useState([])
|
||||
|
||||
const handleSelectAllStates = stateCode => {
|
||||
setAllCities([])
|
||||
fetch(`https://api.siliconpin.com/v3/list/country/city/?country=${countryValue.value}&state=${stateCode.value}`)
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
// console.log("handleSelectAllStates:", data, options)
|
||||
let newData = data && data.length > 0 && data.map(n => {
|
||||
return {
|
||||
label: n.name,
|
||||
value: n.name
|
||||
|
||||
}
|
||||
})
|
||||
setAllCities(newData)
|
||||
})
|
||||
}
|
||||
|
||||
const selectCountry = countryValue => {
|
||||
setAllStates([])
|
||||
fetch(`https://api.siliconpin.com/v3/list/country/state/?country=${countryValue.value}`).then(res => res.json())
|
||||
.then(data => {
|
||||
console.log("countryValue:", data, options)
|
||||
let newData = data && data.length > 0 && data.map(n => {
|
||||
return {
|
||||
label: n.name,
|
||||
value: n.iso2
|
||||
|
||||
}
|
||||
})
|
||||
setAllStates(newData)
|
||||
setAllCities([])
|
||||
})
|
||||
|
||||
setCountryValue(countryValue)
|
||||
}
|
||||
|
||||
const individual = (event) => {
|
||||
// console.log(event.target.schoolID.value)
|
||||
|
||||
setindividualValue(individualValue = false)
|
||||
}
|
||||
const [school, setSchool] = useState(null);
|
||||
useEffect(() => {
|
||||
fetch(`https://management.beanstalkedu.com/items/school`)
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
setSchool(data)
|
||||
|
||||
})
|
||||
}, [])
|
||||
|
||||
const [user, setUser] = useState({});
|
||||
|
||||
useEffect(()=>{
|
||||
if(router.query.user && router.query.user>1){
|
||||
fetch(`/api/listUsers/${router.query.user}`)
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
setUser(data)
|
||||
}
|
||||
)
|
||||
}
|
||||
},
|
||||
[router.query.user]);
|
||||
console.log(user)
|
||||
|
||||
const handleFormsubmit = async (event) => {
|
||||
event.preventDefault()
|
||||
console.log(event.target.lang.checked)
|
||||
const data = {
|
||||
"status": "published",
|
||||
type: event.target.type.value,
|
||||
uname: event.target.uname.value,
|
||||
country: event.target.country.value,
|
||||
state: event.target.state.value ? event.target.state.value:"",
|
||||
city: event.target.city.value ? event.target.city.value:"",
|
||||
phone: event.target.phone.value,
|
||||
email: event.target.email.value,
|
||||
school: event.target.schoolID.value,
|
||||
klas: event.target.klas.value,
|
||||
lang: allLanguage,
|
||||
start_month: event.target.start_month.value,
|
||||
start_date: event.target.start_date.value,
|
||||
end_date: event.target.end_date.value,
|
||||
anual: event.target.anual.value,
|
||||
early_start_programme: event.target.early_start_programme.value,
|
||||
toddlers: event.target.toddlers.value,
|
||||
interakto: event.target.interakto.value,
|
||||
}
|
||||
const JSONdata = JSON.stringify(data)
|
||||
const endpoint = '/api/addUsers'
|
||||
const options = {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSONdata,
|
||||
}
|
||||
const response = await fetch(endpoint, options)
|
||||
const result = await response.json()
|
||||
// console.log(result)
|
||||
// alert(`Is this your full name: ${result}`)
|
||||
}
|
||||
const handleOnLanguageChange = (e, v) => {
|
||||
let idx = allLanguage.findIndex(o => o.lang === e.target.value);
|
||||
let newAllLang = [...allLanguage]
|
||||
newAllLang[idx].value = true
|
||||
// console.log(newAllLang)
|
||||
|
||||
if ([typeParent, "teacher"].includes(currentType)) {
|
||||
let counter = 0
|
||||
newAllLang.forEach((n, idx) => {
|
||||
if (n.value) {
|
||||
counter++
|
||||
}
|
||||
})
|
||||
if (counter >= 2) {
|
||||
newAllLang.forEach((n, idx) => {
|
||||
newAllLang[idx].disabled = true
|
||||
})
|
||||
}
|
||||
}
|
||||
setLanguage(newAllLang)
|
||||
}
|
||||
const handleTypeOnChange = (e) => {
|
||||
let newAllLang = [...allLanguage]
|
||||
newAllLang.forEach((n, idx) => {
|
||||
newAllLang[idx].value = false
|
||||
newAllLang[idx].disabled = false
|
||||
})
|
||||
const { name, checked } = e.target;
|
||||
setLanguage({ ...allLanguage, [name]: checked });
|
||||
|
||||
// setLanguage(newAllLang)
|
||||
setCurrentType(e.target.value)
|
||||
}
|
||||
return (
|
||||
<main>
|
||||
<div>
|
||||
<NavBar/>
|
||||
<section className='container mx-auto px-4 my-16 lg:px-28 xl:px-56 2xl:px-96'>
|
||||
<div
|
||||
className='flex flex-col justify-center place-items-center bg-[#FFF6F2] pt-6 pb-20 rounded-tl-[50px] rounded-br-[50px]'>
|
||||
<div className='flex flex-col justify-center place-items-center'>
|
||||
<img src="/img/2.svg" alt=""/>
|
||||
<p className='text-2xl md:text-4xl font-bold underline decoration-4 decoration-[#FE4501] pb-10'>Update User Information </p>
|
||||
</div>
|
||||
<form onSubmit={handleFormsubmit} action="" className='w-full px-6 md:px-20'>
|
||||
<div className='flex flex-col w-full pt-4'>
|
||||
<label htmlFor="class" className='text-xl font-bold'>Type</label>
|
||||
<input type="text" value="wvgfbhvwhvf" name="type" onChange={handleTypeOnChange} className=' bg-white border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]' />
|
||||
|
||||
|
||||
</div>
|
||||
<div className='flex flex-col w-full'>
|
||||
<label htmlFor="name" className='text-xl font-bold'> Name</label>
|
||||
<input type="text" name="uname"
|
||||
className=' border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]'
|
||||
placeholder='Enter your Name'/>
|
||||
</div>
|
||||
<div className='flex flex-col w-full'>
|
||||
<label htmlFor="email" className='text-xl font-bold'>Email</label>
|
||||
<input type="email" name="email" placeholder='ex. xyz@email.com'
|
||||
className=' border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]'/>
|
||||
</div>
|
||||
<div className='flex flex-col w-full'>
|
||||
<label htmlFor="country" className='text-xl font-bold'>Country</label>
|
||||
<Select
|
||||
className='bg-white border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]'
|
||||
name="country" instanceId={useId()} options={options} value={countryValue}
|
||||
onChange={selectCountry}/>
|
||||
</div>
|
||||
{allStates && allStates.length > 0 &&
|
||||
<div className='flex flex-col w-full'>
|
||||
<label htmlFor="state" className='text-xl font-bold'>State</label>
|
||||
<Select
|
||||
className='bg-white border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]'
|
||||
name="state" options={allStates} value={allStates[0].name}
|
||||
onChange={handleSelectAllStates}/>
|
||||
</div>}
|
||||
{
|
||||
allCities && allCities.length > 0 &&
|
||||
<div className='flex flex-col w-full'>
|
||||
<label htmlFor="city" className='text-xl font-bold'>City</label>
|
||||
<Select
|
||||
className='bg-white border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]'
|
||||
name="city" options={allCities} value={allCities[0].name}
|
||||
// onChange={() => {}}
|
||||
/>
|
||||
</div>}
|
||||
<div className='flex flex-col w-full'>
|
||||
<label htmlFor="phone" className='text-xl font-bold'> Phone</label>
|
||||
<PhoneInput
|
||||
className=' border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]'
|
||||
name="phone" placeholder="Enter phone number" value={phoneValue}
|
||||
onChange={setphoneValue}/>
|
||||
</div>
|
||||
<div className='flex flex-col w-full pt-4'>
|
||||
<label htmlFor="" className='text-xl font-bold'>School name</label>
|
||||
<select name="schoolID" onChange={individual}
|
||||
className='bg-white border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]'>
|
||||
<option value="0"> individual</option>
|
||||
{school && school.data.map(data =>
|
||||
<option value={data.id} key={data.id}>{data.name}</option>
|
||||
)}
|
||||
</select>
|
||||
</div>
|
||||
<div className='flex flex-col w-full pt-4'>
|
||||
<label htmlFor="class" className='text-xl font-bold'>Class</label>
|
||||
<select name="klas"
|
||||
className=' bg-white border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]'>
|
||||
<option value="0">-Select-</option>
|
||||
<option value="IK1">IK1</option>
|
||||
<option value="IK2">IK2</option>
|
||||
<option value="IK3">IK3</option>
|
||||
<option value="PG">PG</option>
|
||||
</select>
|
||||
</div>
|
||||
{individualValue &&
|
||||
<div>
|
||||
<div className='flex flex-col w-full pt-4'>
|
||||
<label htmlFor="anual" className='text-xl font-bold'>Anual</label>
|
||||
<select name="anual" className=' bg-white border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]'>
|
||||
<option value="0">-NA-</option>
|
||||
<option value="Jan">Jan</option>
|
||||
<option value="Feb">Feb</option>
|
||||
<option value="Mar">Mar</option>
|
||||
<option value="Apr">Apr</option>
|
||||
<option value="May">May</option>
|
||||
<option value="Jun">Jun</option>
|
||||
<option value="Jul">Jul</option>
|
||||
<option value="Aug">Aug</option>
|
||||
<option value="Sept">Sept</option>
|
||||
<option value="Oct">Oct</option>
|
||||
<option value="Nov">Nov</option>
|
||||
<option value="Dec">Dec</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className='flex flex-col w-full pt-4'>
|
||||
<label htmlFor="early_start_programme" className='text-xl font-bold'>Early Start Programme</label>
|
||||
<select name="early_start_programme" className=' bg-white border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]'>
|
||||
<option value="0">-NA-</option>
|
||||
<option value="Jan">Jan</option>
|
||||
<option value="Feb">Feb</option>
|
||||
<option value="Mar">Mar</option>
|
||||
<option value="Apr">Apr</option>
|
||||
<option value="May">May</option>
|
||||
<option value="Jun">Jun</option>
|
||||
<option value="Jul">Jul</option>
|
||||
<option value="Aug">Aug</option>
|
||||
<option value="Sept">Sept</option>
|
||||
<option value="Oct">Oct</option>
|
||||
<option value="Nov">Nov</option>
|
||||
<option value="Dec">Dec</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className='flex flex-col w-full pt-4'>
|
||||
<label htmlFor="toddlers" className='text-xl font-bold'>Toddlers</label>
|
||||
<select name="toddlers" className=' bg-white border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]'>
|
||||
<option value="0">-NA-</option>
|
||||
<option value="Jan">Jan</option>
|
||||
<option value="Feb">Feb</option>
|
||||
<option value="Mar">Mar</option>
|
||||
<option value="Apr">Apr</option>
|
||||
<option value="May">May</option>
|
||||
<option value="Jun">Jun</option>
|
||||
<option value="Jul">Jul</option>
|
||||
<option value="Aug">Aug</option>
|
||||
<option value="Sept">Sept</option>
|
||||
<option value="Oct">Oct</option>
|
||||
<option value="Nov">Nov</option>
|
||||
<option value="Dec">Dec</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className='flex flex-col w-full pt-4'>
|
||||
<label htmlFor="interakto" className='text-xl font-bold'>Interakto</label>
|
||||
<select name="interakto" className=' bg-white border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]'>
|
||||
<option value="0">-NA-</option>
|
||||
<option value="Jan">Jan</option>
|
||||
<option value="Feb">Feb</option>
|
||||
<option value="Mar">Mar</option>
|
||||
<option value="Apr">Apr</option>
|
||||
<option value="May">May</option>
|
||||
<option value="Jun">Jun</option>
|
||||
<option value="Jul">Jul</option>
|
||||
<option value="Aug">Aug</option>
|
||||
<option value="Sept">Sept</option>
|
||||
<option value="Oct">Oct</option>
|
||||
<option value="Nov">Nov</option>
|
||||
<option value="Dec">Dec</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className='flex flex-col w-full pt-4'>
|
||||
<label htmlFor="lang" className='text-xl font-bold'>Language</label>
|
||||
<div className='grid grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-y-2 pt-2'>
|
||||
{/* <label className='cursor-pointer' htmlFor="Assamese"> Assamese </label> <input type="checkbox" name="lang" value="Assamese" className='check-box'/> <br />
|
||||
<label className='cursor-pointer' htmlFor="Bengali"> Bengali </label> <input type="checkbox" name="lang" value="Bengali" className='check-box'/> <br />
|
||||
<label className='cursor-pointer' htmlFor="English"> English </label> <input type="checkbox" name="lang" value="English" className='check-box'/> <br />
|
||||
<label className='cursor-pointer' htmlFor="Hindi"> Hindi </label> <input type="checkbox" name="lang" value="Hindi" className='check-box'/> <br />
|
||||
<label className='cursor-pointer' htmlFor="Telegu"> Telegu </label> <input type="checkbox" name="lang" value="Telegu" className='check-box'/> <br />
|
||||
<label className='cursor-pointer' htmlFor="Punjabi"> Punjabi </label> <input type="checkbox" name="lang" value="Punjabi" className='check-box'/> <br />
|
||||
<label className='cursor-pointer' htmlFor="Malayalam"> Malayalam </label> <input type="checkbox" name="lang" value="Malayalam" className='check-box'/> <br />
|
||||
<label className='cursor-pointer' htmlFor="Tamil"> Tamil </label> <input type="checkbox" name="lang" value="Tamil" className='check-box'/> <br />
|
||||
<label className='cursor-pointer' htmlFor="Kannada"> Kannada </label> <input type="checkbox" name="lang" value="Kannada" className='check-box'/> <br />
|
||||
<label className='cursor-pointer' htmlFor="Gujrati"> Gujrati </label> <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>
|
||||
<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>
|
||||
)
|
||||
}
|
||||
|
|
@ -22,10 +22,18 @@ const fetchData = async () => {
|
|||
<div>
|
||||
<NavBar />
|
||||
<section className='container mx-auto px-4 mt-16'>
|
||||
<div className="flex justify-end bg-[#FFF6F2] p-2 border-x-2 border-t-2 rounded-t-xl ">
|
||||
<a href="/add-school-form" className=" inline-flex place-items-center p-2">
|
||||
<img src="/img/3.svg" alt="" />Add School</a>
|
||||
</div>
|
||||
<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>
|
||||
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=''>
|
||||
|
|
@ -33,8 +41,9 @@ const fetchData = async () => {
|
|||
<th className=" p-2">ID</th>
|
||||
<th className=" p-2">School Name</th>
|
||||
<th className=" p-2">Country</th>
|
||||
<th className=" p-2">Anual</th>
|
||||
<th className=" p-2">Early Start Program</th>
|
||||
<th className=" p-2">Annual</th>
|
||||
<th className=" p-2"><abbr title="Subscription End Date" className="no-underline">S.E.D</abbr></th>
|
||||
<th className=" p-2"><abbr title="Early Start Program" className="no-underline">E.S.P</abbr> </th>
|
||||
<th className=" p-2">Toddlers</th>
|
||||
<th className=" p-2">Interakto</th>
|
||||
<th className=" p-2">Status</th>
|
||||
|
|
@ -48,6 +57,7 @@ const fetchData = async () => {
|
|||
<td className=" p-2">{data.name}</td>
|
||||
<td className="p-2">{data.country}</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>
|
||||
|
|
|
|||
|
|
@ -22,9 +22,15 @@ const fetchData = async () => {
|
|||
<div>
|
||||
<NavBar />
|
||||
<section className='container mx-auto px-4 mt-16'>
|
||||
<div className="flex justify-end bg-[#FFF6F2] p-2 border-x-2 border-t-2 rounded-t-xl">
|
||||
<a href="/add-user-form" className=" inline-flex place-items-center p-2">
|
||||
<svg width="20px" height="20px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><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-rule="evenodd" clip-rule="evenodd" d="M21.1213 2.70705C19.9497 1.53548 18.0503 1.53547 16.8787 2.70705L15.1989 4.38685L7.29289 12.2928C7.16473 12.421 7.07382 12.5816 7.02986 12.7574L6.02986 16.7574C5.94466 17.0982 6.04451 17.4587 6.29289 17.707C6.54127 17.9554 6.90176 18.0553 7.24254 17.9701L11.2425 16.9701C11.4184 16.9261 11.5789 16.8352 11.7071 16.707L19.5556 8.85857L21.2929 7.12126C22.4645 5.94969 22.4645 4.05019 21.2929 2.87862L21.1213 2.70705ZM18.2929 4.12126C18.6834 3.73074 19.3166 3.73074 19.7071 4.12126L19.8787 4.29283C20.2692 4.68336 20.2692 5.31653 19.8787 5.70705L18.8622 6.72357L17.3068 5.10738L18.2929 4.12126ZM15.8923 6.52185L17.4477 8.13804L10.4888 15.097L8.37437 15.6256L8.90296 13.5112L15.8923 6.52185ZM4 7.99994C4 7.44766 4.44772 6.99994 5 6.99994H10C10.5523 6.99994 11 6.55223 11 5.99994C11 5.44766 10.5523 4.99994 10 4.99994H5C3.34315 4.99994 2 6.34309 2 7.99994V18.9999C2 20.6568 3.34315 21.9999 5 21.9999H16C17.6569 21.9999 19 20.6568 19 18.9999V13.9999C19 13.4477 18.5523 12.9999 18 12.9999C17.4477 12.9999 17 13.4477 17 13.9999V18.9999C17 19.5522 16.5523 19.9999 16 19.9999H5C4.44772 19.9999 4 19.5522 4 18.9999V7.99994Z" fill="#1d1d1d"></path> </g></svg>
|
||||
<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 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>
|
||||
<a 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
|
||||
</a>
|
||||
</div>
|
||||
|
|
@ -64,7 +70,7 @@ const fetchData = async () => {
|
|||
<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">
|
||||
<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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue