login

.gitignore

@@ -14,7 +14,7 @@
 
 # production
 /build
-
+/public/uploaded/*
 # misc
 .DS_Store
 *.pem

data/user.csv

@@ -0,0 +1,8 @@
+uname,status,user,type,year,start_month,start_date,end_date,plan,klas,lang,phone,pass,anual,early_start_programme,toddlers,interakto,email,country,state,city,address,school
+name 1,published,,parent,,Feb,2023-05-14,2024-05-13,,IK2,,70000000011,,Jan,Feb,Mar,Jul,1@email.com,IN,WB,Habra,sample road near landmark,individual
+name 5,published,,parent,,Feb,2023-05-14,2024-05-13,,IK2,,70000000011,,Jan,Feb,Mar,Jul,5@email.com,IN,WB,Habra,sample road near landmark,individual
+name 4,published,,parent,,Feb,2023-05-14,2024-05-13,,IK2,,70000000011,,Jan,Feb,Mar,Jul,4@email.com,IN,WB,Habra,sample road near landmark,individual
+name 3,published,,parent,,Apr,2023-05-14,2024-05-13,,IK2,,70000000011,,Feb,Sept,Oct,Jul,3@email.com,IN,WB,Habra,sample road near landmark,individual
+name 2,published,,parent,,Apr,2023-05-14,2024-05-13,,IK2,,70000000011,,Feb,Sept,Oct,Jul,2@email.com,IN,WB,Habra,sample road near landmark,individual
+name 6,published,,parent,,Jun,2023-05-14,2024-05-13,,IK3,,70000000011,,Mar,Sept,Jul,Apr,6@email.com,BD,55,Lalmonirhat,sample road near landmark,individual
+teacher name,published,,teacher,,Apr,2023-05-15,2024-05-13,,IK2,,99999 99933,,Mar,0,0,0,t1@email.com,IN,WB,Barasat,,individual

package.json

@@ -12,13 +12,21 @@
     "@types/node": "18.16.1",
     "@types/react": "18.2.0",
     "@types/react-dom": "18.2.1",
+    "argon2": "^0.30.3",
     "autoprefixer": "10.4.14",
+    "csv-parser": "^3.0.0",
     "eslint": "8.39.0",
     "eslint-config-next": "13.3.1",
+    "formidable": "^2.1.1",
+    "jsonwebtoken": "^9.0.0",
     "next": "13.3.1",
     "postcss": "8.4.23",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-phone-number-input": "^3.2.22",
+    "react-select": "^5.7.3",
+    "react-select-country-list": "^2.2.3",
+    "sqlite3": "^5.1.6",
     "tailwindcss": "3.3.2",
     "typescript": "5.0.4"
   }

public/img/1.svg

@@ -0,0 +1 @@
+<svg className='rounded-full shadow-2xl' fill="#FE4501" width="100px" height="100px" viewBox="-9.6 -9.6 51.20 51.20" version="1.1" 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"> <title>school</title> <path d="M30 21.25h-6.25v-8.957l5.877 3.358c0.107 0.062 0.236 0.098 0.373 0.099h0c0.414-0.001 0.749-0.336 0.749-0.751 0-0.277-0.15-0.519-0.373-0.649l-0.004-0.002-13.623-7.784v-0.552c0.172 0.016 0.35 0.068 0.519 0.068 0.004 0 0.010 0 0.015 0 0.475 0 0.934-0.067 1.368-0.193l-0.035 0.009c0.323-0.063 0.693-0.099 1.073-0.099 0.392 0 0.775 0.039 1.146 0.112l-0.037-0.006c0.039 0.007 0.083 0.012 0.129 0.012 0.184 0 0.352-0.068 0.479-0.181l-0.001 0.001c0.161-0.139 0.263-0.343 0.264-0.571v-2.812c0 0 0-0 0-0 0-0.355-0.247-0.653-0.579-0.73l-0.005-0.001c-0.419-0.111-0.9-0.176-1.396-0.176-0.5 0-0.985 0.065-1.446 0.187l0.039-0.009c-0.288 0.067-0.618 0.105-0.958 0.105-0.231 0-0.457-0.018-0.678-0.052l0.025 0.003c-0.122-0.256-0.378-0.43-0.676-0.43-0.412 0-0.746 0.334-0.746 0.746 0 0.001 0 0.003 0 0.004v-0 4.565l-13.622 7.784c-0.227 0.132-0.378 0.374-0.378 0.651 0 0.414 0.336 0.75 0.75 0.75 0.137 0 0.265-0.037 0.376-0.101l-0.004 0.002 5.878-3.359v8.957h-6.25c-0.414 0-0.75 0.336-0.75 0.75v0 8c0 0.414 0.336 0.75 0.75 0.75h28c0.414-0 0.75-0.336 0.75-0.75v0-8c-0-0.414-0.336-0.75-0.75-0.75v0zM18.658 3.075c0.298-0.082 0.64-0.13 0.993-0.13 0.183 0 0.363 0.013 0.539 0.037l-0.020-0.002v1.339c-0.16-0.013-0.345-0.021-0.533-0.021-0.489 0-0.966 0.052-1.425 0.151l0.044-0.008c-0.304 0.088-0.653 0.139-1.014 0.139-0.174 0-0.344-0.012-0.512-0.034l0.020 0.002v-1.323c0.15 0.014 0.325 0.021 0.502 0.021 0.499 0 0.984-0.062 1.447-0.18l-0.041 0.009zM2.75 22.75h5.5v6.5h-5.5zM9.75 22v-10.564l6.25-3.571 6.25 3.572v17.814h-2.5v-5.25c-0-0.414-0.336-0.75-0.75-0.75h-6c-0.414 0-0.75 0.336-0.75 0.75v0 5.25h-2.5zM13.75 29.25v-4.5h4.5v4.5zM29.25 29.25h-5.5v-6.5h5.5zM16 19.75c2.071 0 3.75-1.679 3.75-3.75s-1.679-3.75-3.75-3.75c-2.071 0-3.75 1.679-3.75 3.75v0c0.002 2.070 1.68 3.748 3.75 3.75h0zM16 13.75c1.243 0 2.25 1.007 2.25 2.25s-1.007 2.25-2.25 2.25c-1.243 0-2.25-1.007-2.25-2.25v0c0.002-1.242 1.008-2.248 2.25-2.25h0z"></path> </g></svg>

public/img/2.svg

@@ -0,0 +1 @@
+<svg className='rounded-full shadow-md ' width="100px" height="100px" viewBox="-3.12 -3.12 30.24 30.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 opacity="0.4" d="M11.4604 13.7299C13.0123 13.7299 14.2704 12.4718 14.2704 10.9199C14.2704 9.36794 13.0123 8.10986 11.4604 8.10986C9.90847 8.10986 8.65039 9.36794 8.65039 10.9199C8.65039 12.4718 9.90847 13.7299 11.4604 13.7299Z" stroke="#FE4501" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path> <path opacity="0.4" d="M16.6495 20.1998C16.6495 17.8698 14.3295 15.9697 11.4595 15.9697C8.58953 15.9697 6.26953 17.8598 6.26953 20.1998" stroke="#FE4501" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M21 12.5C21 17.75 16.75 22 11.5 22C6.25 22 2 17.75 2 12.5C2 7.25 6.25 3 11.5 3C12.81 3 14.06 3.25999 15.2 3.73999C15.07 4.13999 15 4.56 15 5C15 5.75 15.21 6.46 15.58 7.06C15.78 7.4 16.04 7.70997 16.34 7.96997C17.04 8.60997 17.97 9 19 9C19.44 9 19.86 8.92998 20.25 8.78998C20.73 9.92998 21 11.19 21 12.5Z" stroke="#FE4501" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M23 5C23 5.32 22.96 5.62999 22.88 5.92999C22.79 6.32999 22.63 6.72 22.42 7.06C21.94 7.87 21.17 8.49998 20.25 8.78998C19.86 8.92998 19.44 9 19 9C17.97 9 17.04 8.60997 16.34 7.96997C16.04 7.70997 15.78 7.4 15.58 7.06C15.21 6.46 15 5.75 15 5C15 4.56 15.07 4.13999 15.2 3.73999C15.39 3.15999 15.71 2.64002 16.13 2.21002C16.86 1.46002 17.88 1 19 1C20.18 1 21.25 1.51002 21.97 2.33002C22.61 3.04002 23 3.98 23 5Z" stroke="#FE4501" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M20.4898 4.97998H17.5098" stroke="#FE4501" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M19 3.52002V6.51001" stroke="#FE4501" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg>

public/img/3.svg

@@ -0,0 +1 @@
+<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>

src/components/SchoolEditForm.jsx

@@ -0,0 +1,216 @@
+import React, { useId, useEffect, useState, 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'
+export default function Modal() {
+  const options = useMemo(() => countryList().getData(), [])
+  const [phoneValue, setphoneValue] = useState()
+    const [allStates, setAllStates] = useState([])
+    const [allCities, setAllCities] = useState([])
+
+  const [showModal, setShowModal] = React.useState(false);
+  const [school, setSchool] = useState([]);
+    const fetchData = async () => {
+        const response = await fetch("https://management.beanstalkedu.com/items/school?filter[status][_eq]=published");
+        const data = await response.json();
+        return setSchool(data.data);
+      }
+      console.log(school)
+    
+      useEffect(() => {
+        fetchData();
+      },[])
+      const handleSubmit = async (event) => {
+        event.preventDefault()
+        const data = {
+          "status":"published",
+          name: event.target.schoolName.value,
+          country: event.target.country.value,
+          state: event.target.state.value,
+          cities: event.target.cities.value,
+          anual: event.target.anual.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)
+        console.log(data)
+        const endpoint = 'https://management.beanstalkedu.com/items/school'
+        const options = {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSONdata,
+        }
+        const response = await fetch(endpoint, options)
+    
+        const result = await response.json()
+      //   alert(`Is this your full name: ${result.data}`)
+        alert(`School Saved`)
+      }
+  return (
+    
+    <>
+            <div className="mt-4 items-center flex justify-center place-items-center">
+                <button className="block bg-[#FFF6F2] focus:ring-4 focus:outline-none focus:ring-[#FFF6F2] font-medium rounded-lg text-sm px-2 py-1.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800 mb-8" type="button" onClick={() => setShowModal(true)}>Edit</button>
+            </div>
+      {showModal ? (
+        <>
+          <div
+            className="justify-center items-center flex overflow-x-hidden overflow-y-auto fixed inset-0 z-50 outline-none focus:outline-none"
+          >
+            <div className="relative w-auto my-6 mx-auto max-w-3xl">
+              {/*content*/}
+              <div className="border-0 rounded-lg shadow-lg relative flex flex-col w-full bg-white outline-none focus:outline-none">
+                {/*header*/}
+                
+                <div>
+                <section className='container-fluid'>
+                <div className="">
+                  <h3 className=" font-semibold text-blue-700">Edit Form</h3>
+                  <button className="p-1 ml-auto text-blue-700" onClick={() => setShowModal(false)}>
+                    <span className="text-3xl text-blue-700">x</span>
+                  </button>
+                </div>
+                <div className='flex flex-row 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/1.svg" alt="" /> */}
+                        {/* <p className='text-2xl md:text-4xl font-bold underline decoration-4 decoration-[#FE4501] pb-10'>School Registration Form</p> */}
+                    </div>
+                    <form onSubmit={handleSubmit} className='w-full px-6 md:px-20'>
+                    <div className='flex flex-col w-full'>
+                        <label htmlFor="school" className='text-xl font-bold'>School Name</label>
+                        <input type="text" name="schoolName" placeholder='School Name' 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="school_email_id" className='text-xl font-bold'> Email ID</label>
+                        <input type="text" name="school_email_id" id="school_email_id" placeholder='School Email ID' 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="" options="" value=""
+                  onChange="" ></select>
+              </div>
+              {/* <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} >
+
+                  </select>
+              </div> */}
+                <div className='flex flex-col w-full'>
+                  <label htmlFor="Cities" className='text-xl font-bold'>Cities</label>
+                  <select
+                    className='bg-white border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]'
+                    name="cities" options="" value=""
+                  ></select>
+                </div>
+                    <div className='flex flex-col w-full'>
+                        <label htmlFor="phone" className='text-xl font-bold'> Phone</label>
+                    </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="January">January</option>
+                            <option value="February">February</option>
+                            <option value="March">March</option>
+                            <option value="April">April</option>
+                            <option value="May">May</option>
+                            <option value="June">June</option>
+                            <option value="July">July</option>
+                            <option value="August">August</option>
+                            <option value="September">September</option>
+                            <option value="October">October</option>
+                            <option value="November">November</option>
+                            <option value="December">December</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="January">January</option>
+                            <option value="February">February</option>
+                            <option value="March">March</option>
+                            <option value="April">April</option>
+                            <option value="May">May</option>
+                            <option value="June">June</option>
+                            <option value="July">July</option>
+                            <option value="August">August</option>
+                            <option value="September">September</option>
+                            <option value="October">October</option>
+                            <option value="November">November</option>
+                            <option value="December">December</option>
+                        </select>
+                    </div>
+                    <div className='flex flex-col w-full pt-4'>
+                        <label htmlFor="early_start_programme" className='text-xl font-bold'>Early Start Program</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="January">January</option>
+                            <option value="February">February</option>
+                            <option value="March">March</option>
+                            <option value="April">April</option>
+                            <option value="May">May</option>
+                            <option value="June">June</option>
+                            <option value="July">July</option>
+                            <option value="August">August</option>
+                            <option value="September">September</option>
+                            <option value="October">October</option>
+                            <option value="November">November</option>
+                            <option value="December">December</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="na">-NA-</option>
+                            <option value="January">    January</option>
+                            <option value="February">   February</option>
+                            <option value="March">      March</option>
+                            <option value="April">      April</option>
+                            <option value="May">        May</option>
+                            <option value="June">       June</option>
+                            <option value="July">       July</option>
+                            <option value="August">     August</option>
+                            <option value="September">  September</option>
+                            <option value="November">   November</option>
+                            <option value="December">   December</option>
+                        </select>
+                    </div>
+                    <div className='flex flex-col w-full'>
+                        <label htmlFor="agreement_expiry_date" className='text-xl font-bold pt-4'>Agreement Expiry Date</label>
+                        <input type="date" name="agreement_expiry_date" id="agreement_expiry_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="school_agreement" className='text-xl font-bold pt-4'>Upload School Agreement</label>
+                        <input type="file" name="school_agreement" id="school_agreement" 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'>
+                        {/* <a href="/school-list"><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'>Submit Now</button></a> */}
+                        <input type="submit" value="Save" 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>
+              </div>
+            </div>
+          </div>
+          <div className="opacity-25 fixed inset-0 z-40 bg-black"></div>
+        </>
+      ) : null}
+    </>
+  );
+}

src/pages/add-school-form.jsx

@@ -0,0 +1,223 @@
+import NavBar from '../components/NavBar'
+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'
+
+export default function addSchoolForm() {
+    const [countryValue, setCountryValue] = useState('')
+    const options = useMemo(() => countryList().getData(), [])
+    const [phoneValue, setphoneValue] = 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)
+  }
+    // console.log(phoneValue)
+    // const selectCountry = countryValue => {
+    //         setCountryValue(countryValue)
+    // }
+    const handleSubmit = async (event) => {
+      event.preventDefault()
+      const data = {
+        "status":"published",
+        name: event.target.schoolName.value,
+        country: event.target.country.value,
+        state: event.target.state.value,
+        cities: event.target.cities.value,
+        anual: event.target.anual.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)
+      console.log(data)
+      const endpoint = 'https://management.beanstalkedu.com/items/school'
+      const options = {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSONdata,
+      }
+      const response = await fetch(endpoint, options)
+  
+      const result = await response.json()
+    //   alert(`Is this your full name: ${result.data}`)
+      alert(`School Saved`)
+    }
+    
+    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/1.svg" alt="" />
+                        <p className='text-2xl md:text-4xl font-bold underline decoration-4 decoration-[#FE4501] pb-10'>School Registration Form</p>
+                    </div>
+                    <form onSubmit={handleSubmit} className='w-full px-6 md:px-20'>
+                    <div className='flex flex-col w-full'>
+                        <label htmlFor="school" className='text-xl font-bold'>School Name</label>
+                        <input type="text" name="schoolName" placeholder='School Name' 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="school_email_id" className='text-xl font-bold'> Email ID</label>
+                        <input type="text" name="school_email_id" id="school_email_id" placeholder='School Email ID' 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="Cities" className='text-xl font-bold'>Cities</label>
+                  <Select
+                    className='bg-white border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]'
+                    name="cities" 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="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="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="early_start_programme" className='text-xl font-bold'>Early Start Program</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="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="na">-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="Nov">   Nov</option>
+                            <option value="Dec">   Dec</option>
+                        </select>
+                    </div>
+                    <div className='flex flex-col w-full'>
+                        <label htmlFor="agreement_expiry_date" className='text-xl font-bold pt-4'>Agreement Expiry Date</label>
+                        <input type="date" name="agreement_expiry_date" id="agreement_expiry_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="school_agreement" className='text-xl font-bold pt-4'>Upload School Agreement</label>
+                        <input type="file" name="school_agreement" id="school_agreement" 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'>
+                        {/* <a href="/school-list"><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'>Submit Now</button></a> */}
+                        <input type="submit" value="Save" 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>
+    )
+  }

src/pages/add-school-form.tsx

@@ -1,138 +0,0 @@
-import React, { useState } from 'react';
-import Image from 'next/image'
-import NavBar from '../components/NavBar'
-import { Inter } from 'next/font/google'
-
-const inter = Inter({ subsets: ['latin'] })
-
- function Postformvalue(props) {
-    const [formvalue, setFormvalue]= useState({school:'', interakto:'', early_start_program:'', anual:'', toddlers:'', country:'', end_date:'', });
-
-  const handleInput =(e)=>{
-    const { name, value}= e.target;
-    setFormvalue({...formvalue, [name]:value});
-    console.log(formvalue);
-  }
-  const handleFormsubmit= async (e)=>{
-    e.preventDefault();
-    
-   await fetch('http://localhost/devopsdeveloper/ReactFormvalue/', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({
-		    name:formvalue.school,
-            anual: formvalue.anual,
-            toddlers: formvalue.toddlers,
-            start_date: formvalue.country,
-            early_start_program: formvalue.early_start_program,
-            interakto: formvalue.interakto,
-
-      })
-    });
-   console.log("success");
-
-  }
-
-  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'>
-                    <svg className='rounded-full shadow-2xl' fill="#FE4501" width="100px" height="100px" viewBox="-9.6 -9.6 51.20 51.20" version="1.1" 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"> <title>school</title> <path d="M30 21.25h-6.25v-8.957l5.877 3.358c0.107 0.062 0.236 0.098 0.373 0.099h0c0.414-0.001 0.749-0.336 0.749-0.751 0-0.277-0.15-0.519-0.373-0.649l-0.004-0.002-13.623-7.784v-0.552c0.172 0.016 0.35 0.068 0.519 0.068 0.004 0 0.010 0 0.015 0 0.475 0 0.934-0.067 1.368-0.193l-0.035 0.009c0.323-0.063 0.693-0.099 1.073-0.099 0.392 0 0.775 0.039 1.146 0.112l-0.037-0.006c0.039 0.007 0.083 0.012 0.129 0.012 0.184 0 0.352-0.068 0.479-0.181l-0.001 0.001c0.161-0.139 0.263-0.343 0.264-0.571v-2.812c0 0 0-0 0-0 0-0.355-0.247-0.653-0.579-0.73l-0.005-0.001c-0.419-0.111-0.9-0.176-1.396-0.176-0.5 0-0.985 0.065-1.446 0.187l0.039-0.009c-0.288 0.067-0.618 0.105-0.958 0.105-0.231 0-0.457-0.018-0.678-0.052l0.025 0.003c-0.122-0.256-0.378-0.43-0.676-0.43-0.412 0-0.746 0.334-0.746 0.746 0 0.001 0 0.003 0 0.004v-0 4.565l-13.622 7.784c-0.227 0.132-0.378 0.374-0.378 0.651 0 0.414 0.336 0.75 0.75 0.75 0.137 0 0.265-0.037 0.376-0.101l-0.004 0.002 5.878-3.359v8.957h-6.25c-0.414 0-0.75 0.336-0.75 0.75v0 8c0 0.414 0.336 0.75 0.75 0.75h28c0.414-0 0.75-0.336 0.75-0.75v0-8c-0-0.414-0.336-0.75-0.75-0.75v0zM18.658 3.075c0.298-0.082 0.64-0.13 0.993-0.13 0.183 0 0.363 0.013 0.539 0.037l-0.020-0.002v1.339c-0.16-0.013-0.345-0.021-0.533-0.021-0.489 0-0.966 0.052-1.425 0.151l0.044-0.008c-0.304 0.088-0.653 0.139-1.014 0.139-0.174 0-0.344-0.012-0.512-0.034l0.020 0.002v-1.323c0.15 0.014 0.325 0.021 0.502 0.021 0.499 0 0.984-0.062 1.447-0.18l-0.041 0.009zM2.75 22.75h5.5v6.5h-5.5zM9.75 22v-10.564l6.25-3.571 6.25 3.572v17.814h-2.5v-5.25c-0-0.414-0.336-0.75-0.75-0.75h-6c-0.414 0-0.75 0.336-0.75 0.75v0 5.25h-2.5zM13.75 29.25v-4.5h4.5v4.5zM29.25 29.25h-5.5v-6.5h5.5zM16 19.75c2.071 0 3.75-1.679 3.75-3.75s-1.679-3.75-3.75-3.75c-2.071 0-3.75 1.679-3.75 3.75v0c0.002 2.070 1.68 3.748 3.75 3.75h0zM16 13.75c1.243 0 2.25 1.007 2.25 2.25s-1.007 2.25-2.25 2.25c-1.243 0-2.25-1.007-2.25-2.25v0c0.002-1.242 1.008-2.248 2.25-2.25h0z"></path> </g></svg>
-                    <p className='text-2xl md:text-4xl font-bold underline decoration-4 decoration-[#FE4501] pb-10'>School Registration Form</p>
-                </div>
-                <form onSubmit={handleFormsubmit} action="" className='w-full px-6 md:px-20'>
-                <div className='flex flex-col w-full'>
-                    <label htmlFor="school" className='text-xl font-bold'>School Name</label>
-                    <input value={formvalue.school} onChange={handleInput} type="text" name="school" id="school" placeholder='School Name' 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="country" className='text-xl font-bold'>Country</label>
-                    <input value={formvalue.country} onChange={handleInput} type="text" name="country" id="country" placeholder='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 pt-4'>
-                    <label htmlFor="anual" className='text-xl font-bold'>Anual</label>
-                    <select value={formvalue.anual} onChange={handleInput} name="anual" id="anual" className=' bg-white border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]'>
-                        <option value="0" selected>-Select-</option>
-                        <option value="January">January</option>
-                        <option value="February">February</option>
-                        <option value="March">March</option>
-                        <option value="April">April</option>
-                        <option value="May">May</option>
-                        <option value="June">June</option>
-                        <option value="July">July</option>
-                        <option value="August">August</option>
-                        <option value="September">September</option>
-                        <option value="October">October</option>
-                        <option value="November">November</option>
-                        <option value="December">December</option>
-                    </select>
-                </div>
-                <div className='flex flex-col w-full pt-4'>
-                    <label htmlFor="toddlers" className='text-xl font-bold'>Toddlers</label>
-                        <select value={formvalue.toddlers} onChange={handleInput} name="toddlers" id="toddlers" className=' bg-white border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]'>
-                            <option value="0" selected>-Select-</option>
-                            <option value="January">January</option>
-                            <option value="February">February</option>
-                            <option value="March">March</option>
-                            <option value="April">April</option>
-                            <option value="May">May</option>
-                            <option value="June">June</option>
-                            <option value="July">July</option>
-                            <option value="August">August</option>
-                            <option value="September">September</option>
-                            <option value="October">October</option>
-                            <option value="November">November</option>
-                            <option value="December">December</option>
-                        </select>
-                </div>
-                <div className='flex flex-col w-full pt-4'>
-                    <label htmlFor="early_start_program" className='text-xl font-bold'>Early Start Program</label>
-                    <select value={formvalue.early_start_program} onChange={handleInput} name="early_start_program" id="early_start_program" className='bg-white border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]'>
-                        <option value="0" selected>-Select-</option>
-                        <option value="January">January</option>
-                        <option value="February">February</option>
-                        <option value="March">March</option>
-                        <option value="April">April</option>
-                        <option value="May">May</option>
-                        <option value="June">June</option>
-                        <option value="July">July</option>
-                        <option value="August">August</option>
-                        <option value="September">September</option>
-                        <option value="October">October</option>
-                        <option value="November">November</option>
-                        <option value="December">December</option>
-                    </select>
-                </div>
-                <div className='flex flex-col w-full pt-4'>
-                    <label htmlFor="interakto" className='text-xl font-bold'>Interakto</label>
-                    <select value={formvalue.interakto} onChange={handleInput} name="interakto" id="interakto" className='bg-white border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]'>
-                        <option value="0" selected>-Select-</option>
-                        <option value="na">N/A</option>
-                        <option value="January">    January</option>
-                        <option value="February">   February</option>
-                        <option value="March">      March</option>
-                        <option value="April">      April</option>
-                        <option value="May">        May</option>
-                        <option value="June">       June</option>
-                        <option value="July">       July</option>
-                        <option value="August">     August</option>
-                        <option value="September">  September</option>
-                        <option value="November">   November</option>
-                        <option value="December">   December</option>
-                    </select>
-                </div>
-                <div className='flex justify-center pt-8'>
-                    <button 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'>Submit Now</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>
-  )
-}
-export default Postformvalue;

src/pages/add-user-form.jsx

@@ -0,0 +1,386 @@
+// 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 { Inter } from 'next/font/google'
+
+const typeParent = "parent"
+
+export default function addUserForm() {
+  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)
+
+      })
+  }, [])
+  // console.log(school);
+
+  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'>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>
+              </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'>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>
+  )
+}

src/pages/add-user-form.tsx

@@ -1,129 +0,0 @@
-import React, { useState } from 'react';
-import Image from 'next/image'
-import NavBar from '../components/NavBar'
-import { Inter } from 'next/font/google'
-
-const inter = Inter({ subsets: ['latin'] })
-
- function Postformvalue(props) {
-    const [formvalue, setFormvalue]= useState({name:'',school:'', plan:'', class:'', lang:'', start_month:'', start_date:'', end_date:'', });
-
-  const handleInput =(e)=>{
-    const { name, value}= e.target;
-    setFormvalue({...formvalue, [name]:value});
-    console.log(formvalue);
-  }
-  const handleFormsubmit= async (e)=>{
-    e.preventDefault();
-    
-   await fetch('http://localhost/devopsdeveloper/ReactFormvalue/', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({
-		    name:formvalue.name,
-            school: formvalue.school,
-            plan: formvalue.plan,
-            class: formvalue.class,
-            lang: formvalue.lang,
-            start_month: formvalue.start_month,
-            start_date: formvalue.start_date,
-            end_date: formvalue.end_date
-
-      })
-    });
-   console.log("success");
-
-  }
-
-  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'>
-                    <svg className='rounded-full shadow-md ' width="100px" height="100px" viewBox="-3.12 -3.12 30.24 30.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 opacity="0.4" d="M11.4604 13.7299C13.0123 13.7299 14.2704 12.4718 14.2704 10.9199C14.2704 9.36794 13.0123 8.10986 11.4604 8.10986C9.90847 8.10986 8.65039 9.36794 8.65039 10.9199C8.65039 12.4718 9.90847 13.7299 11.4604 13.7299Z" stroke="#FE4501" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path> <path opacity="0.4" d="M16.6495 20.1998C16.6495 17.8698 14.3295 15.9697 11.4595 15.9697C8.58953 15.9697 6.26953 17.8598 6.26953 20.1998" stroke="#FE4501" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M21 12.5C21 17.75 16.75 22 11.5 22C6.25 22 2 17.75 2 12.5C2 7.25 6.25 3 11.5 3C12.81 3 14.06 3.25999 15.2 3.73999C15.07 4.13999 15 4.56 15 5C15 5.75 15.21 6.46 15.58 7.06C15.78 7.4 16.04 7.70997 16.34 7.96997C17.04 8.60997 17.97 9 19 9C19.44 9 19.86 8.92998 20.25 8.78998C20.73 9.92998 21 11.19 21 12.5Z" stroke="#FE4501" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M23 5C23 5.32 22.96 5.62999 22.88 5.92999C22.79 6.32999 22.63 6.72 22.42 7.06C21.94 7.87 21.17 8.49998 20.25 8.78998C19.86 8.92998 19.44 9 19 9C17.97 9 17.04 8.60997 16.34 7.96997C16.04 7.70997 15.78 7.4 15.58 7.06C15.21 6.46 15 5.75 15 5C15 4.56 15.07 4.13999 15.2 3.73999C15.39 3.15999 15.71 2.64002 16.13 2.21002C16.86 1.46002 17.88 1 19 1C20.18 1 21.25 1.51002 21.97 2.33002C22.61 3.04002 23 3.98 23 5Z" stroke="#FE4501" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M20.4898 4.97998H17.5098" stroke="#FE4501" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M19 3.52002V6.51001" stroke="#FE4501" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg>
-                    <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'>
-                    <label htmlFor="name" className='text-xl font-bold'>User Name</label>
-                    <input value={formvalue.name} onChange={handleInput} type="text" name="name" id="name" 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 pt-4'>
-                    <label htmlFor="school" className='text-xl font-bold'>School Name</label>
-                    <input value={formvalue.school} onChange={handleInput} type="text" name="school" id="school" placeholder='School Name' 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="plan" className='text-xl font-bold'>Plan</label>
-                    <select value={formvalue.plan} onChange={handleInput} name="plan" id="plan" className=' bg-white border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]'>
-                        <option value="0" selected>-Select-</option>
-                        <option value="Anual">Anual</option>
-                        <option value="Early-Start-Program">Early Start Program</option>
-                        <option value="Toddlers">Toddlers</option>
-                        <option value="Interakto">Interakto</option>
-                    </select>
-                </div>
-                <div className='flex flex-col w-full pt-4'>
-                    <label htmlFor="class" className='text-xl font-bold'>Class</label>
-                    <select value={formvalue.class} onChange={handleInput} name="class" id="class" className=' bg-white border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]'>
-                        <option value="0" selected>-Select-</option>
-                        <option value="IK1">IK1</option>
-                        <option value="IK2">IK2</option>
-                        <option value="IK3">IK3</option>
-                        <option value="PG">PG</option>
-                    </select>
-                </div>
-                <div className='flex flex-col w-full pt-4'>
-                    <label htmlFor="lang" className='text-xl font-bold'>Language</label>
-                    <select value={formvalue.lang} onChange={handleInput} name="lang" id="lang" className='bg-white border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]'>
-                        <option value="" selected>-Select-</option>
-                        <option value="Bengali">    Bengali</option>
-                        <option value="English">    English</option>
-                        <option value="Hindi">      Hindi</option>
-                        <option value="Urdu">       Urdu</option>
-                        <option value="Punjabi">    Punjabi</option>
-                        <option value="Telugu">     Telugu</option>
-                        <option value="Marathi">    Marathi</option>
-                        <option value="Nepali">     Nepali</option>
-                        <option value="Kannada">    Kannada</option>
-                        <option value="Gujrati">    Gujrati</option>
-                    </select>
-                </div>
-                <div className='flex flex-col w-full pt-4'>
-                    <label htmlFor="start_month" className='text-xl font-bold'>Start Month</label>
-                    <select value={formvalue.start_month} onChange={handleInput} 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" selected>-Select-</option>
-                        <option value="January">    January</option>
-                        <option value="February">   February</option>
-                        <option value="March">      March</option>
-                        <option value="April">      April</option>
-                        <option value="May">        May</option>
-                        <option value="June">       June</option>
-                        <option value="July">       July</option>
-                        <option value="August">     August</option>
-                        <option value="September">  September</option>
-                        <option value="November">   November</option>
-                        <option value="December">   December</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 value={formvalue.start_date} onChange={handleInput} 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'>End Date</label>
-                    <input value={formvalue.end_date} onChange={handleInput} 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 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'>Submit Now</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>
-  )
-}
-export default Postformvalue;

src/pages/add-user-form2.jsx

@@ -0,0 +1,336 @@
+// 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 { Inter } from 'next/font/google'
+
+const typeParent = "parent"
+
+export default function addUserForm() {
+  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},
+  ])
+  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)
+
+      })
+  }, [])
+  // console.log(school);
+
+  const handleFormsubmit = async (event) => {
+    event.preventDefault()
+    const data = {
+      "status": "published",
+      type: event.target.type.value,
+      name: event.target.name.value,
+      user: event.target.email.value,
+      country: event.target.country.value,
+      phone: event.target.phone.value,
+      school: event.target.schoolID.value,
+      class: event.target.class.value,
+      lang: event.target.lang.value,
+      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,
+    }
+    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()
+    alert(`Is this your full name: ${result.data}`)
+  }
+  const handleOnLanguageChange = (e, v) => {
+    let idx = allLanguage.findIndex(o => o.lang === e.target.value);
+    let newAllLang = [...allLanguage]
+    newAllLang[idx].value = true
+
+
+    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
+    })
+    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>
+              </div>
+              <div className='flex flex-col w-full'>
+                <label htmlFor="name" className='text-xl font-bold'> Name</label>
+                <input type="text" name="name"
+                       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="Cities" className='text-xl font-bold'>Cities</label>
+                  <Select
+                    className='bg-white border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]'
+                    name="Cities" 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="individual"> 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="class"
+                        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="January">January</option>
+                      <option value="February">February</option>
+                      <option value="March">March</option>
+                      <option value="April">April</option>
+                      <option value="May">May</option>
+                      <option value="June">June</option>
+                      <option value="July">July</option>
+                      <option value="August">August</option>
+                      <option value="September">September</option>
+                      <option value="October">October</option>
+                      <option value="November">November</option>
+                      <option value="December">December</option>
+                    </select>
+                  </div>
+                  {/* <div className='flex flex-col w-full pt-4'>
+                            <label htmlFor="plan" className='text-xl font-bold'>Plan</label>
+                            <div className='grid grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-y-2 pt-2 '>
+                                <div className='flex flex-row place-items-center'>
+                                    <label className='cursor-pointer'  htmlFor="Anual">Anual</label>&nbsp;
+                                    <input type="checkbox" name="plan" id="Anual" value='Anual' className='check-box'/>
+                                </div>
+                                <div className='flex flex-row place-items-center'>
+                                    <label className='cursor-pointer' htmlFor="Toddler">Toddler</label>&nbsp;
+                                    <input type="checkbox" name="plan" id="Toddler" value='Toddler' className='check-box'/>
+                                </div>
+                                <div className='flex flex-row place-items-center'>
+                                    <label className='cursor-pointer' htmlFor="Interakto">Interakto</label>&nbsp;
+                                    <input type="checkbox" name="plan" id="Interakto" value='Interakto' className='check-box'/>
+                                </div>
+                                <div className='flex flex-row place-items-center col-span-2'>
+                                    <label className='cursor-pointer md:whitespace-nowrap' htmlFor="Early_Start_program">Early Start Program</label>&nbsp;
+                                    <input type="checkbox" name="plan" id="Early_Start_program" value='Early_Start_program' className='check-box'/>
+                                </div>
+                            </div>
+                        </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'>
+                      {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="January"> January</option>
+                      <option value="February"> February</option>
+                      <option value="March"> March</option>
+                      <option value="April"> April</option>
+                      <option value="May"> May</option>
+                      <option value="June"> June</option>
+                      <option value="July"> July</option>
+                      <option value="August"> August</option>
+                      <option value="September"> September</option>
+                      <option value="November"> November</option>
+                      <option value="December"> December</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'>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>
+  )
+}

src/pages/api/addUsers.js

@@ -0,0 +1,43 @@
+export default function handler(req, res) {
+  const sqlite3 = require('sqlite3').verbose();
+
+  console.log(req.body)
+  // Open a new database connection
+  let uname, status, type, start_month, start_date, end_date, plan, klas, lang, phone, pass, anual, early_start_programme, toddlers, interakto, email, country, state, city, address, school="";
+
+  if(req.body.uname)  uname =req.body.uname;
+  if(req.body.status)  status =req.body.status;
+  // if(req.body.status)  status ="published";
+  if(req.body.type)  type =req.body.type;
+  if(req.body.start_month)  start_month =req.body.start_month;
+  if(req.body.start_date)  start_date =req.body.start_date;
+  if(req.body.end_date)  end_date =req.body.end_date;
+  if(req.body.plan)  plan =req.body.plan;
+  if(req.body.klas)  klas =req.body.klas;
+  if(req.body.lang)  lang =req.body.lang;
+  if(req.body.lang)  lang =req.body.lang;
+  if(req.body.phone)  phone =req.body.phone;
+  if(req.body.pass)  pass =req.body.pass;
+  if(req.body.anual)  anual =req.body.anual;
+  if(req.body.early_start_programme)  early_start_programme =req.body.early_start_programme;
+  if(req.body.toddlers)  toddlers =req.body.toddlers;
+  if(req.body.interakto)  interakto =req.body.interakto;
+  if(req.body.email)  email =req.body.email;
+  if(req.body.country)  country =req.body.country;
+  if(req.body.state)  state =req.body.state;
+  if(req.body.city)  city =req.body.city;
+  if(req.body.address)  address =req.body.address;
+  if(req.body.school)  school =req.body.school;
+  const db = new sqlite3.Database('data/appUser.db');
+  db.run(`INSERT INTO user (uname, status, type, start_month, start_date, end_date, plan, klas, lang, phone, pass, anual, early_start_programme, toddlers, interakto, email, country, state, city, address, school ) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)`, [ uname, status, type, start_month, start_date, end_date, plan, klas, lang, phone, pass, anual, early_start_programme, toddlers, interakto, email, country, state, city, address, school],
+  function(err) {
+      if (err) {
+        return console.log(err.message);
+      }
+    }
+  );
+  db.close();
+
+
+  res.status(200).json({ msg: 'ok' });
+}

src/pages/api/addUsersBulk copy.js

@@ -0,0 +1,21 @@
+const csv = require('csv-parser');
+const fs = require('fs');
+const sqlite3 = require('sqlite3').verbose();
+
+// Open a new database connection
+const db = new sqlite3.Database('data/appUser.db');
+
+// Create a new table in the database
+// db.run('CREATE TABLE mytable (column1 TEXT, column2 TEXT, column3 TEXT)');
+
+// Read the CSV file and insert the data into the database
+fs.createReadStream('mycsvfile.csv')
+  .pipe(csv())
+  .on('data', (row) => {
+    db.run(`INSERT INTO mytable (column1, column2, column3) VALUES (?, ?, ?)`, [row.column1, row.column2, row.column3]);
+  })
+  .on('end', () => {
+    console.log('CSV file successfully imported into SQLite.');
+    // Close the database connection
+    db.close();
+  });

src/pages/api/addUsersBulk.js

@@ -0,0 +1,36 @@
+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);
+  
+  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();
+  });
+
+
+  res.status(200).json({ name: 'John Doe' })
+}
+

src/pages/api/fileUpload.js

@@ -0,0 +1,38 @@
+import formidable from "formidable";
+import fs from "fs";
+
+export const config = {
+  api: {
+    bodyParser: false
+  }
+};
+
+const post = async (req, res) => {
+  const form = new formidable.IncomingForm();
+  form.parse(req, async function (err, fields, files) {
+    // console.log(fields)
+    await saveFile(files.file,fields.fName? fields.fName:files.file.originalFilename );
+    return res.status(201).send("");
+  });
+};
+
+const saveFile = async (file,fName) => {
+    // console.log(file.filepath)
+    // console.log(fName)
+  const data = fs.readFileSync(file.filepath);
+  fs.writeFileSync(`./public/uploaded/${fName}`, data);
+  fs.unlinkSync(file.filepath);
+  return;
+};
+
+export default (req, res) => {
+  req.method === "POST"
+    ? post(req, res)
+    : req.method === "PUT"
+    ? console.log("PUT")
+    : req.method === "DELETE"
+    ? console.log("DELETE")
+    : req.method === "GET"
+    ? console.log("GET")
+    : res.status(404).send("");
+};

src/pages/api/listUsers.js

@@ -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}`;
+      db.all(sql, [], (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();
+//   });
+
+
+  
+}
+

src/pages/api/login.js

@@ -0,0 +1,72 @@
+export default function handler(req, res) {
+    // const sqlite3 = require('sqlite3').verbose();
+  
+    // console.log(req.body)
+const sqlite3 = require('sqlite3');
+const argon2 = require('argon2');
+const jwt = require('jsonwebtoken');
+
+// Connect to the SQLite database
+const db = new sqlite3.Database('data/appUser.db');
+
+// Fetch the user record
+const username = req.body.email;
+// console.log(username)
+const sql = 'SELECT * FROM user WHERE email = ?';
+db.get(sql, [username], async (err, userRecord) => {
+  if (err) {
+    console.error(err);
+    return;
+  }
+
+  if (userRecord) {
+    const storedHash = userRecord.pass;
+    console.log(storedHash)
+    const providedPassword = req.body.password;
+
+    try {
+      // Verify the provided password with the stored hash
+      const isPasswordValid = await argon2.verify(storedHash, providedPassword);
+
+      if (isPasswordValid) {
+        // Passwords match, generate JWT token
+        const secretKey = process.env.TOKEN_HEADER_KEY;
+        const tokenPayload = { 
+                                email:userRecord.email,
+                                role: userRecord.type,
+                                iat: Math.floor(Date.now() / 1000),
+                                exp: Math.floor(Date.now() / 1000) + 3600*24*7,
+                                
+                            };
+        const jwtToken = jwt.sign(tokenPayload, secretKey, { algorithm: 'HS256' });
+        const jwtTokenData ={ 
+            data:{
+                access_token:jwtToken,
+                role: userRecord.type,
+                email: userRecord.email,
+                expires: 3600*24*7,
+            
+            }
+        };
+
+        // Return the JWT token
+        res.status(200).json(jwtTokenData);
+        console.log(jwtToken);
+      } else {
+        console.log('Invalid password');
+        res.status(400).json({err:'400P'});
+      }
+    } catch (err) {
+      console.error(err);
+    }
+  } else {
+    res.status(400).json({err:'400U'});
+    console.log('User not found');
+  }
+
+  // Close the database connection
+  db.close();
+});
+
+// res.status(200).json({ name: 'John Doe' });
+}

src/pages/edit-school copy.jsx

@@ -0,0 +1,131 @@
+import NavBar from '../components/NavBar'
+import { useId, useState, useEffect, useMemo } from 'react';
+import 'react-phone-number-input/style.css'
+import { useRouter } from 'next/router'
+
+
+export default function addSchoolForm() {
+
+ 
+  const router = useRouter();
+  
+  const [school, setSchool] = useState({});
+    
+  useEffect(()=>{
+    // if(router.query.school<1) {
+    // const { sid } = router.query;
+    // setSchool(sid)
+    if(router.query.school && router.query.school>1 ){
+  fetch(`https://management.beanstalkedu.com/items/school/${router.query.school}`)
+    .then(res => res.json())
+      .then(data => {
+         console.log(router.query.school); setSchool(data.data)
+      })
+    }
+  
+  }, [router.query.school]);
+
+  const handleSubmit = async (event) => {
+    event.preventDefault()
+    const data = {
+      "status":"published",
+      name: event.target.schoolName.value,
+      country: event.target.country.value,
+      state: event.target.state.value,
+      cities: event.target.cities.value,
+      anual: event.target.anual.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)
+    console.log(data)
+    const endpoint = 'https://management.beanstalkedu.com/items/school'
+    const options = {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSONdata,
+    }
+    const response = await fetch(endpoint, options)
+
+    const result = await response.json()
+  //   alert(`Is this your full name: ${result.data}`)
+    alert(`School Saved`)
+  }
+  
+    
+    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/1.svg" alt="" />
+                        <p className='text-2xl md:text-4xl font-bold underline decoration-4 decoration-[#FE4501] pb-10'>School Registration Form</p>
+                    </div>
+                    <form className='w-full px-6 md:px-20'>
+                    <div className='flex flex-col w-full'>
+                        <label htmlFor="school" className='text-xl font-bold'>School Name</label>
+                        <input type="text" value={school.name} onChange={e => setSchool(e.target.value)} name="schoolName" placeholder='School Name' 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="school_email_id" className='text-xl font-bold'> Email ID</label>
+                        <input type="text" value={school.school_email_id} onChange={e => setSchool(e.target.value)}  name="school_email_id" id="school_email_id" placeholder='School Email ID' 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 type="text" value={school.country} onChange={e => setSchool(e.target.value)}  name="country" />
+
+              </div>
+              <div className='flex flex-col w-full'>
+                <label htmlFor="state" className='text-xl font-bold'>State</label>
+                <input type="text" value={school.state} onChange={e => setSchool(e.target.value)}  name="state"  />
+
+              </div>
+                <div className='flex flex-col w-full'>
+                  <label htmlFor="Cities" className='text-xl font-bold'>Cities</label>
+                  <input type="text" value={school.cities} onChange={e => setSchool(e.target.value)}  name="cities" />
+                  
+                </div>
+                    <div className='flex flex-col w-full'>
+                        <label htmlFor="school_contact_number" className='text-xl font-bold'> Phone</label>
+                        <input type="text" value={school.school_contact_number} onChange={e => setSchool(e.target.value)}  name="school_contact_number" />
+                    </div>
+                    <div className='flex flex-col w-full pt-4'>
+                        <label htmlFor="anual" className='text-xl font-bold'>Anual</label>
+                        <input type="text"  value={school.anual} onChange={e => setSchool(e.target.value)} />
+                    </div>
+                    <div className='flex flex-col w-full pt-4'>
+                        <label htmlFor="toddlers" className='text-xl font-bold'>Toddlers</label>
+                        <input type="text" name="toddlers" value={school.toddlers} onChange={e => setSchool(e.target.value)}  />
+                    </div>
+                    <div className='flex flex-col w-full pt-4'>
+                        <label htmlFor="early_start_programme" className='text-xl font-bold'>Early Start Program</label>
+                        <input type="text" name="early_start_programme" value={school.early_start_programme} onChange={e => setSchool(e.target.value)}  />
+                    </div>
+                    <div className='flex flex-col w-full pt-4'>
+                        <label htmlFor="interakto" className='text-xl font-bold'>Interakto</label>
+                        <input type="text" name="interakto" value={school.interakto} onChange={e => setSchool(e.target.value)}  />
+                    </div>
+                    <div className='flex flex-col w-full'>
+                        <label htmlFor="agreement_expiry_date" className='text-xl font-bold pt-4'>Agreement Expiry Date</label>
+                        <input type="date" name="agreement_expiry_date" value={school.agreement_expiry_date} onChange={e => setSchool(e.target.value)}  id="agreement_expiry_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'>
+                        <input type="submit" value="Save" 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>
+    )
+  }

src/pages/edit-school.jsx

@@ -0,0 +1,165 @@
+import NavBar from '../components/NavBar'
+import { useId, useState, useEffect, useMemo } from 'react';
+import 'react-phone-number-input/style.css'
+import { useRouter } from 'next/router'
+
+
+export default function addSchoolForm() {
+  const router = useRouter();
+
+  const uploadToServer = async (event) => {
+    const body = new FormData();
+    body.append("file", agreement.files[0]);
+    body.append("fName", `${router.query.school}.pdf`);
+    const response = await fetch("/api/fileUpload", {
+      method: "POST",
+      body
+    });
+  };
+ 
+  const [school, setSchool] = useState({});
+    
+  useEffect(()=>{
+    // if(router.query.school<1) {
+    // const { sid } = router.query;
+    // setSchool(sid)
+    if(router.query.school && router.query.school>1 ){
+  fetch(`https://management.beanstalkedu.com/items/school/${router.query.school}`)
+    .then(res => res.json())
+      .then(data => {
+         console.log(router.query.school); setSchool(data.data)
+      })
+    }
+  
+  }, [router.query.school]);
+
+  const handleSubmit = async (event) => {
+    event.preventDefault()
+    const data = {
+      "status":"published",
+      name: event.target.schoolName.value,
+      country: event.target.country.value,
+      state: event.target.state.value,
+      cities: event.target.cities.value,
+      anual: event.target.anual.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)
+    console.log(data)
+    const endpoint = 'https://management.beanstalkedu.com/items/school'
+    const options = {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSONdata,
+    }
+    const response = await fetch(endpoint, options)
+
+    const result = await response.json()
+  //   alert(`Is this your full name: ${result.data}`)
+    alert(`School Saved`)
+  }
+  
+    
+    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/1.svg" alt="" />
+                        <p className='text-2xl md:text-4xl font-bold underline decoration-4 decoration-[#FE4501] pb-10'>School Registration Form</p>
+                    </div>
+                    <form className='w-full px-6 md:px-20'>
+                    <div className='flex flex-col w-full'>
+                        <label htmlFor="school" className='text-xl font-bold'>School Name</label>
+                        <input type="text" value={school.name} onChange={e => setSchool(e.target.value)} name="schoolName" placeholder='School Name' 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="school_email_id" className='text-xl font-bold'> Email ID</label>
+                        <input type="text" value={school.school_email_id} onChange={e => setSchool(e.target.value)}  name="school_email_id" id="school_email_id" placeholder='School Email ID' 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 type="text" value={school.country} onChange={e => setSchool(e.target.value)}  name="country" />
+
+              </div>
+              <div className='flex flex-col w-full'>
+                <label htmlFor="state" className='text-xl font-bold'>State</label>
+                <input type="text" value={school.state} onChange={e => setSchool(e.target.value)}  name="state"  />
+
+              </div>
+                <div className='flex flex-col w-full'>
+                  <label htmlFor="Cities" className='text-xl font-bold'>Cities</label>
+                  <input type="text" value={school.cities} onChange={e => setSchool(e.target.value)}  name="cities" />
+                  
+                </div>
+                    <div className='flex flex-col w-full'>
+                        <label htmlFor="school_contact_number" className='text-xl font-bold'> Phone</label>
+                        <input type="text" value={school.school_contact_number} onChange={e => setSchool(e.target.value)}  name="school_contact_number" />
+                    </div>
+                    <div className='flex flex-col w-full pt-4'>
+                        <label htmlFor="anual" className='text-xl font-bold'>Anual</label>
+                        <input type="text"  value={school.anual} onChange={e => setSchool(e.target.value)} />
+                    </div>
+                    <div className='flex flex-col w-full pt-4'>
+                        <label htmlFor="toddlers" className='text-xl font-bold'>Toddlers</label>
+                        <input type="text" name="toddlers" value={school.toddlers} onChange={e => setSchool(e.target.value)}  />
+                    </div>
+                    <div className='flex flex-col w-full pt-4'>
+                        <label htmlFor="early_start_programme" className='text-xl font-bold'>Early Start Program</label>
+                        <input type="text" name="early_start_programme" value={school.early_start_programme} onChange={e => setSchool(e.target.value)}  />
+                    </div>
+                    <div className='flex flex-col w-full pt-4'>
+                        <label htmlFor="interakto" className='text-xl font-bold'>Interakto</label>
+                        <input type="text" name="interakto" value={school.interakto} onChange={e => setSchool(e.target.value)}  />
+                    </div>
+                    <div className='flex flex-col w-full'>
+                        <label htmlFor="agreement_expiry_date" className='text-xl font-bold pt-4'>Agreement Expiry Date</label>
+                        <input type="date" name="agreement_expiry_date" value={school.agreement_expiry_date} onChange={e => setSchool(e.target.value)}  id="agreement_expiry_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="agreement_expiry_date" className='text-xl font-bold pt-4'>Upload Agreement</label>
+                        <input type="file" name="agreement_expiry_date" />
+                    </div> */}
+                    {/* <div className='flex justify-center pt-8'>
+                        <input type="submit" value="Save" 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 class="flex pt-6">
+                      <div class="flex-1 ">
+                      <input id="agreement" type="file" name="myImage" onChange={uploadToServer} />
+                        {/* <button
+                          className="rounded-full bg-[#FE4501] p-2 text-white"
+                          type="submit"
+                          onClick={uploadToServer}
+                        >
+                          Upload Agreement
+                        </button> */}
+                      </div>
+                      <div class="flex-1  ">
+                        <a href={'/uploaded/'+router.query.school+'.pdf'}><button
+                          className="rounded-full bg-[#FE4501] p-2 text-white"
+                          type="submit"
+                          onClick={uploadToServer}
+                        >
+                          Download Agreement
+                        </button></a>
+                      </div>
+                    </div>
+                </div>
+            </section>
+            </div>
+        </main>
+    )
+  }

src/pages/sampleform.jsx

@@ -0,0 +1,32 @@
+import React from "react";
+class App extends React.Component {
+  upload(e)
+  {
+    console.warn(e.target.files)
+    const files=e.target.files
+    const formData=new FormData();
+    formData.append("img", files[0])
+    fetch('https://management.beanstalkedu.com/items/school',{
+      method: 'POST',
+      body: formData
+    } 
+     )
+     .then((resp)=>{
+      resp.json()
+      .then((result)=>{
+        console.warn("result", result)
+      })
+     })
+  }
+  render(){
+    return (
+      <div>
+        <div className='flex flex-col w-full'>
+            <label htmlFor="school_agreement" className='text-xl font-bold pt-4'>Upload School Agreement</label>
+            <input type="file" onChange={(e)=>this.upload(e)} name="school_agreement" id="school_agreement" className=' border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]' />
+        </div>
+      </div>
+    );
+  }
+}
+export default App;

src/pages/sampleform2.jsx

@@ -0,0 +1,37 @@
+import React from "react";
+import { useState } from "react";
+
+function FileUpload(){
+    const [file, setFile] = useState()
+
+    function handleFile(event) {
+        setFile(event.target.files[0])
+    }
+    function handleUpload() {
+        const formData = new FormData()
+        formData.append('file', file)
+        fetch('https://management.beanstalkedu.com/items/school', {
+            method: "POST",
+            body: formData
+        })
+        .then((respons)=> respons.json())
+        .then((result)=>{
+            console.log('success', result)
+        })
+        .catch(error => {
+            console.error("Error:", error)
+        })
+    }
+    return (
+        <div>
+            <form onSubmit={handleUpload}>
+                <div className='flex flex-col w-full'>
+                    <label htmlFor="school_agreement" className='text-xl font-bold pt-4'>Upload School Agreement</label>
+                    <input type="file" name="school_agreement" onChange={handleFile} id="school_agreement" className=' border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]' />
+                    <button>Upload</button>
+                </div>
+            </form>
+        </div>
+    )
+}
+export default FileUpload;

src/pages/school-list/[slug].jsx

@@ -0,0 +1,241 @@
+import NavBar from '../../components/NavBar'
+import {useRouter} from "next/router";
+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'
+
+export default function addSchoolForm() {
+    const { query } = useRouter();
+    const [countryValue, setCountryValue] = useState('')
+    const options = useMemo(() => countryList().getData(), [])
+    const [phoneValue, setphoneValue] = 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)
+  }
+    // console.log(phoneValue)
+    // const selectCountry = countryValue => {
+    //         setCountryValue(countryValue)
+    // }
+    const handleSubmit = async (event) => {
+      event.preventDefault()
+      const data = {
+        "status":"published",
+        name: event.target.schoolName.value,
+        country: event.target.country.value,
+        state: event.target.state.value,
+        cities: event.target.cities.value,
+        anual: event.target.anual.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)
+      // console.log(data)
+      const endpoint = 'https://management.beanstalkedu.com/items/school'
+      const options = {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSONdata,
+      }
+      const response = await fetch(endpoint, options)
+  
+      const result = await response.json()
+    //   alert(`Is this your full name: ${result.data}`)
+      alert(`School Saved`)
+    }
+    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[0]);
+      }
+      // console.log(school.name)
+    
+      useEffect(() => {
+        fetchData();
+      },[])
+    
+    return (
+        <main> 
+            <div>
+            <NavBar />
+            <div>
+      <h1>Items page</h1>
+      <p>{query.id}</p>
+      <p>{query.name}</p>
+    </div>
+            <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/1.svg" alt="" />
+                        <p className='text-2xl md:text-4xl font-bold underline decoration-4 decoration-[#FE4501] pb-10'>Update School Information</p>
+                    </div>
+                    <form onSubmit={handleSubmit} className='w-full px-6 md:px-20'>
+                    <div className='flex flex-col w-full'>
+                        <label htmlFor="school" className='text-xl font-bold'>School Name</label>
+                        <input type="text" name="schoolName"value={school.name}  placeholder='School Name' 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="school_email_id" className='text-xl font-bold'> Email ID</label>
+                        <input type="text" name="school_email_id" id="school_email_id" placeholder='School Email ID' 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="Cities" className='text-xl font-bold'>Cities</label>
+                  <Select
+                    className='bg-white border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]'
+                    name="cities" 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="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="January">January</option>
+                            <option value="February">February</option>
+                            <option value="March">March</option>
+                            <option value="April">April</option>
+                            <option value="May">May</option>
+                            <option value="June">June</option>
+                            <option value="July">July</option>
+                            <option value="August">August</option>
+                            <option value="September">September</option>
+                            <option value="October">October</option>
+                            <option value="November">November</option>
+                            <option value="December">December</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="January">January</option>
+                            <option value="February">February</option>
+                            <option value="March">March</option>
+                            <option value="April">April</option>
+                            <option value="May">May</option>
+                            <option value="June">June</option>
+                            <option value="July">July</option>
+                            <option value="August">August</option>
+                            <option value="September">September</option>
+                            <option value="October">October</option>
+                            <option value="November">November</option>
+                            <option value="December">December</option>
+                        </select>
+                    </div>
+                    <div className='flex flex-col w-full pt-4'>
+                        <label htmlFor="early_start_programme" className='text-xl font-bold'>Early Start Program</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="January">January</option>
+                            <option value="February">February</option>
+                            <option value="March">March</option>
+                            <option value="April">April</option>
+                            <option value="May">May</option>
+                            <option value="June">June</option>
+                            <option value="July">July</option>
+                            <option value="August">August</option>
+                            <option value="September">September</option>
+                            <option value="October">October</option>
+                            <option value="November">November</option>
+                            <option value="December">December</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="na">-NA-</option>
+                            <option value="January">    January</option>
+                            <option value="February">   February</option>
+                            <option value="March">      March</option>
+                            <option value="April">      April</option>
+                            <option value="May">        May</option>
+                            <option value="June">       June</option>
+                            <option value="July">       July</option>
+                            <option value="August">     August</option>
+                            <option value="September">  September</option>
+                            <option value="November">   November</option>
+                            <option value="December">   December</option>
+                        </select>
+                    </div>
+                    <div className='flex flex-col w-full'>
+                        <label htmlFor="agreement_expiry_date" className='text-xl font-bold pt-4'>Agreement Expiry Date</label>
+                        <input type="date" name="agreement_expiry_date" id="agreement_expiry_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="school_agreement" className='text-xl font-bold pt-4'>Upload School Agreement</label>
+                        <input type="file" name="school_agreement" id="school_agreement" 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'>
+                        {/* <a href="/school-list"><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'>Submit Now</button></a> */}
+                        <input type="submit" value="Update" 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>
+    )
+  }

src/pages/school-list/index.jsx

@@ -1,8 +1,9 @@
+// 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'
+import NavBar from '../../components/NavBar'
 export default function Modal() {
     const [school, setUser] = useState([]);
 const fetchData = async () => {
@@ -10,7 +11,7 @@ const fetchData = async () => {
     const data = await response.json();
     return setUser(data.data);
   }
-//   console.log(user)
+  console.log(school)
 
   useEffect(() => {
     fetchData();
@@ -23,14 +24,13 @@ const fetchData = async () => {
             <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"> 
-                        <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>
-                        Add School
-                    </a>
+                        <img src="/img/3.svg" alt="" />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">School Name</th>
                                 <th className=" p-2">Country</th>
                                 <th className=" p-2">Anual</th>
@@ -38,21 +38,25 @@ const fetchData = async () => {
                                 <th className=" p-2">Toddlers</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.country}</td>
                                 <td className="p-2">{data.anual}</td>
-                                <td className="p-2">{data.early_start_program}</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}>Edit</a> </td>
                             </tr>
                         )}
                         </tbody>
+                        {/* <SchoolEditForm /> */}
                     </table>
                 </div>
             </section>
@@ -61,4 +65,3 @@ const fetchData = async () => {
   )
 
 }
-

src/pages/school-list/slug.jsx

@@ -0,0 +1,241 @@
+import NavBar from '../../components/NavBar'
+import {useRouter} from "next/router";
+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'
+
+export default function addSchoolForm() {
+    const { query } = useRouter();
+    const [countryValue, setCountryValue] = useState('')
+    const options = useMemo(() => countryList().getData(), [])
+    const [phoneValue, setphoneValue] = 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)
+  }
+    // console.log(phoneValue)
+    // const selectCountry = countryValue => {
+    //         setCountryValue(countryValue)
+    // }
+    const handleSubmit = async (event) => {
+      event.preventDefault()
+      const data = {
+        "status":"published",
+        name: event.target.schoolName.value,
+        country: event.target.country.value,
+        state: event.target.state.value,
+        cities: event.target.cities.value,
+        anual: event.target.anual.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)
+      // console.log(data)
+      const endpoint = 'https://management.beanstalkedu.com/items/school'
+      const options = {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSONdata,
+      }
+      const response = await fetch(endpoint, options)
+  
+      const result = await response.json()
+    //   alert(`Is this your full name: ${result.data}`)
+      alert(`School Saved`)
+    }
+    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[0]);
+      }
+      // console.log(school.name)
+    
+      useEffect(() => {
+        fetchData();
+      },[])
+    
+    return (
+        <main> 
+            <div>
+            <NavBar />
+            <div>
+      <h1>Items page</h1>
+      <p>{query.id}</p>
+      <p>{query.name}</p>
+    </div>
+            <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/1.svg" alt="" />
+                        <p className='text-2xl md:text-4xl font-bold underline decoration-4 decoration-[#FE4501] pb-10'>Update School Information</p>
+                    </div>
+                    <form onSubmit={handleSubmit} className='w-full px-6 md:px-20'>
+                    <div className='flex flex-col w-full'>
+                        <label htmlFor="school" className='text-xl font-bold'>School Name</label>
+                        <input type="text" name="schoolName"value={school.name}  placeholder='School Name' 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="school_email_id" className='text-xl font-bold'> Email ID</label>
+                        <input type="text" name="school_email_id" id="school_email_id" placeholder='School Email ID' 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="Cities" className='text-xl font-bold'>Cities</label>
+                  <Select
+                    className='bg-white border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]'
+                    name="cities" 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="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="January">January</option>
+                            <option value="February">February</option>
+                            <option value="March">March</option>
+                            <option value="April">April</option>
+                            <option value="May">May</option>
+                            <option value="June">June</option>
+                            <option value="July">July</option>
+                            <option value="August">August</option>
+                            <option value="September">September</option>
+                            <option value="October">October</option>
+                            <option value="November">November</option>
+                            <option value="December">December</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="January">January</option>
+                            <option value="February">February</option>
+                            <option value="March">March</option>
+                            <option value="April">April</option>
+                            <option value="May">May</option>
+                            <option value="June">June</option>
+                            <option value="July">July</option>
+                            <option value="August">August</option>
+                            <option value="September">September</option>
+                            <option value="October">October</option>
+                            <option value="November">November</option>
+                            <option value="December">December</option>
+                        </select>
+                    </div>
+                    <div className='flex flex-col w-full pt-4'>
+                        <label htmlFor="early_start_programme" className='text-xl font-bold'>Early Start Program</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="January">January</option>
+                            <option value="February">February</option>
+                            <option value="March">March</option>
+                            <option value="April">April</option>
+                            <option value="May">May</option>
+                            <option value="June">June</option>
+                            <option value="July">July</option>
+                            <option value="August">August</option>
+                            <option value="September">September</option>
+                            <option value="October">October</option>
+                            <option value="November">November</option>
+                            <option value="December">December</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="na">-NA-</option>
+                            <option value="January">    January</option>
+                            <option value="February">   February</option>
+                            <option value="March">      March</option>
+                            <option value="April">      April</option>
+                            <option value="May">        May</option>
+                            <option value="June">       June</option>
+                            <option value="July">       July</option>
+                            <option value="August">     August</option>
+                            <option value="September">  September</option>
+                            <option value="November">   November</option>
+                            <option value="December">   December</option>
+                        </select>
+                    </div>
+                    <div className='flex flex-col w-full'>
+                        <label htmlFor="agreement_expiry_date" className='text-xl font-bold pt-4'>Agreement Expiry Date</label>
+                        <input type="date" name="agreement_expiry_date" id="agreement_expiry_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="school_agreement" className='text-xl font-bold pt-4'>Upload School Agreement</label>
+                        <input type="file" name="school_agreement" id="school_agreement" 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'>
+                        {/* <a href="/school-list"><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'>Submit Now</button></a> */}
+                        <input type="submit" value="Update" 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>
+    )
+  }

src/pages/test/2.jsx

@@ -0,0 +1,36 @@
+export default function PageWithJSbasedForm() {
+    const handleSubmit = async (event) => {
+      event.preventDefault()
+      const data = {
+        "status":"published",
+        name: event.target.schoolName.value,
+        country: event.target.country.value,
+       
+      }
+      const JSONdata = JSON.stringify(data)
+      const endpoint = 'https://management.beanstalkedu.com/items/school'
+      const options = {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSONdata,
+      }
+      const response = await fetch(endpoint, options)
+  
+      const result = await response.json()
+      alert(`Is this your full name: ${result.data}`)
+    }
+    return (
+      <form onSubmit={handleSubmit}>
+        <label >School Name</label>
+        <input type="text" name="schoolName" required />
+  
+        <label htmlFor="last">Country</label>
+        <input type="text" id="last" name="country" required />
+  
+        <button type="submit">Submit</button>
+      </form>
+    )
+  }
+  

src/pages/test/file-upload.jsx

@@ -0,0 +1,40 @@
+import { useState } from "react";
+export default function PrivatePage(props) {
+  const [image, setImage] = useState(null);
+  const [createObjectURL, setCreateObjectURL] = useState(null);
+
+  const uploadToClient = (event) => {
+    if (event.target.files && event.target.files[0]) {
+      const i = event.target.files[0];
+
+      setImage(i);
+      setCreateObjectURL(URL.createObjectURL(i));
+    }
+  };
+
+  const uploadToServer = async (event) => {
+    const body = new FormData();
+    body.append("file", image);
+    const response = await fetch("/api/fileUpload", {
+      method: "POST",
+      body
+    });
+  };
+
+  return (
+    <div>
+      <div>
+        <img src={createObjectURL} />
+        <h4>Select Image</h4>
+        <input type="file" name="myImage" onChange={uploadToClient} />
+        <button
+          className="btn btn-primary"
+          type="submit"
+          onClick={uploadToServer}
+        >
+          Send to server
+        </button>
+      </div>
+    </div>
+  );
+}

src/pages/user-list.jsx

@@ -6,9 +6,10 @@ import NavBar from '../components/NavBar'
 export default function Modal() {
     const [user, setUser] = useState([]);
 const fetchData = async () => {
-    const response = await fetch("https://management.beanstalkedu.com/items/enrolled_user?filter[status][_eq]=published");
+    const response = await fetch("/api/listUsers");
     const data = await response.json();
-    return setUser(data.data);
+    console.log(data)
+    return setUser(data);
   }
 //   console.log(user)
 
@@ -66,4 +67,3 @@ const fetchData = async () => {
   )
 
 }
-

src/styles/globals.css

@@ -15,7 +15,21 @@
     --background-end-rgb: 0, 0, 0;
   }
 }
-
+.check-box {
+  border:2px solid white;
+  box-shadow:0 0 0 2px #FE4501;
+  appearance:none;
+  width:15px;
+  height:15px;
+  background-color:#fff;
+  transition:all ease-in .2s;
+  cursor: pointer;
+}
+.check-box:checked{
+  background-color:#FE4501;
+  transform: scale(1.2);
+  border-radius: 2px;
+}
 /* body {
   color: rgb(var(--foreground-rgb));
   background: linear-gradient(

tsconfig.json

@@ -18,6 +18,6 @@
       "@/*": ["./src/*"]
     }
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "src/pages/add-school-form.jsx", "src/pages/add-school-form.jsx", "src/pages/add-user-form.jsx", "src/pages/test/file-upload.jsx", "src/pages/user-list.jsx"],
   "exclude": ["node_modules"]
 }