lint

package.json

@@ -14,20 +14,27 @@
     "@types/react-dom": "18.2.1",
     "argon2": "^0.30.3",
     "autoprefixer": "10.4.14",
+    "axios": "^1.4.0",
     "csv-parser": "^3.0.0",
     "eslint": "8.39.0",
     "eslint-config-next": "13.3.1",
     "formidable": "^2.1.1",
+    "formik": "^2.2.9",
     "jsonwebtoken": "^9.0.0",
+    "jwt-decode": "^3.1.2",
     "next": "13.3.1",
+    "next-auth": "^4.22.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",
+    "rxjs": "^7.8.1",
     "sqlite3": "^5.1.6",
     "tailwindcss": "3.3.2",
-    "typescript": "5.0.4"
+    "typescript": "5.0.4",
-  }
+    "yup": "^1.1.1"
+  },
+  "devDependencies": {}
 }

src/components/NavBar.tsx

@@ -1,24 +1,36 @@
-import Image from 'next/image'
+import { signIn, signOut, useSession } from 'next-auth/react'
-import { Inter } from 'next/font/google'
+import Link from 'next/link'
 
-const inter = Inter({ subsets: ['latin'] })
 
-export default function Home() {
+export default function NavBar() {
+  const { data: session } = useSession()
+  console.log(session)
+  if (session) {
+    return (
+      <main>
+          <div>
+          <section className="container-fluid bg-[#FFF6F2]">
+              <div className="container mx-auto px-4">
+                  <div className='flex flex-row gap-x-2 md:gap-x-16 p-4  justify-center whitespace-nowrap'>
+                    <Link href="/add-school-form">Add School </Link>|
+                      <Link href="/school-list">School List</Link>|
+                      <Link href="/add-user-form">Add User </Link>|
+                      <Link href="/user-list">User List </Link>|
+                      <button onClick={() => signOut()}>Sign out</button>
+                      
+                  </div>
+              </div>
+          </section>
+      </div>
+      </main>
+    )
+  }
   return (
-    <main>
+    <>
-        <div>
+      Not signed in <br />
-        <section className="container-fluid bg-[#FFF6F2]">
+      <button onClick={() => signIn()}>Sign in</button>
-            <div className="container mx-auto px-4">
+    </>
-                <div className='flex flex-row gap-x-2 md:gap-x-16 p-4  justify-center whitespace-nowrap'>
-                  <a href="/add-school-form">Add School </a>|
-                    <a href="/school-list">School List</a>|
-                    <a href="/add-user-form">Add User </a>|
-                    <a href="/user-list">User List </a>
-                    
-                </div>
-            </div>
-        </section>
-    </div>
-    </main>
   )
+
 }
+

src/components/refreshTokenHandler.js

@@ -0,0 +1,18 @@
+import { useSession } from "next-auth/react";
+import { useEffect } from "react";
+
+const RefreshTokenHandler = (props) => {
+    const { data: session } = useSession();
+
+    useEffect(() => {
+        if(!!session) {
+            // We did set the token to be ready to refresh after 23 hours, here we set interval of 23 hours 30 minutes.
+            const timeRemaining = Math.round((((session.accessTokenExpiry - 30 * 60 * 1000) - Date.now()) / 1000));
+            props.setInterval(timeRemaining > 0 ? timeRemaining : 0);
+        }
+    }, [session]);
+
+    return null;
+}
+
+export default RefreshTokenHandler;

src/components/useAuth.js

@@ -0,0 +1,29 @@
+import { signOut, useSession } from "next-auth/react";
+import { useRouter } from "next/router";
+import { useEffect, useState } from "react";
+
+export default function useAuth(shouldRedirect) {
+    const { data: session } = useSession();
+    const router = useRouter();
+    const [isAuthenticated, setIsAuthenticated] = useState(false);
+
+    useEffect(() => {
+        if (session?.error === "RefreshAccessTokenError") {
+            signOut({ callbackUrl: '/login', redirect: shouldRedirect });
+        }
+
+        if (session === null) {
+            if (router.route !== '/login') {
+                router.replace('/login');
+            }
+            setIsAuthenticated(false);
+        } else if (session !== undefined) {
+            if (router.route === '/login') {
+                router.replace('/');
+            }
+            setIsAuthenticated(true);
+        }
+    }, [session]);
+
+    return isAuthenticated;
+}

src/pages/_app.tsx

@@ -1,6 +1,18 @@
 import '@/styles/globals.css'
 import type { AppProps } from 'next/app'
 
+import { SessionProvider } from 'next-auth/react';
+import { useState } from 'react';
+import RefreshTokenHandler from '../components/refreshTokenHandler.js';
+
+
 export default function App({ Component, pageProps }: AppProps) {
-  return <Component {...pageProps} />
+  const [interval, setInterval] = useState(0);
+  return (
+    <SessionProvider session={pageProps.session} refetchInterval={interval}>
+        <Component {...pageProps} />
+        <RefreshTokenHandler setInterval={setInterval} />
+    </SessionProvider>
+  )
+  // return <Component {...pageProps} />
 }

src/pages/add-school-form.jsx

@@ -5,8 +5,8 @@ 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() {
+export default function AddSchool() {
-    const [countryValue, setCountryValue] = useState('')
+    const [countryValue, setCountryValue] =useState('')
     const options = useMemo(() => countryList().getData(), [])
     const [phoneValue, setphoneValue] = useState()
     const [allStates, setAllStates] = useState([])

src/pages/add-user-form.jsx

@@ -10,7 +10,7 @@ import NavBar from '../components/NavBar';
 
 const typeParent = "parent"
 
-export default function addUserForm() {
+export default function AddUser() {
   const [allLanguage, setLanguage] = useState([
     {lang: "Assamese", value: false},
     {lang: "Bengali", value: false},

src/pages/add-user-form2.jsx

@@ -1,336 +0,0 @@
-// 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,
-      annual: event.target.annual.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="annual" className='text-xl font-bold'>annual</label>
-                    <select name="annual"
-                            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="annual">annual</label>&nbsp;
-                                    <input type="checkbox" name="plan" id="annual" value='annual' 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/auth/[...nextauth].js

@@ -0,0 +1,124 @@
+import NextAuth from "next-auth/next";
+import CredentialsProvider from "next-auth/providers/credentials";
+import { signIn } from "next-auth/react";
+import jwt_decode from "jwt-decode";
+
+
+const pubAPI = process.env.DIRECTUS_PUBLIC_API;
+
+export const options = {
+  providers: [
+    CredentialsProvider({
+      name: "Credentials",
+      credentials: {
+        email: { label: "Email", type: "text" },
+        password: { label: "Mot de passe", type: "password" },
+      },
+      async authorize(credentials, req) {
+        const payload = {
+          email: credentials.email,
+          password: credentials.password,
+        };
+        const res = await fetch(pubAPI + "auth/login", {
+          method: "POST",
+          body: JSON.stringify(payload),
+          headers: { "Content-Type": "application/json" },
+          credentials: "include",
+        });
+        const user = await res.json();
+        // console.log(user)
+
+        if (!res.ok) {
+          throw new Error("Email ou mot de passe incorrect.");
+        }
+
+        if (res.ok && user) {
+          return user;
+        }
+
+        return null;
+      },
+    }),
+  ],
+  session: {
+    jwt: true,
+  },
+  callbacks: {
+    async jwt({ token, user, account }) {
+      if (account && user) {
+        var tokenJwt =user.data.access_token
+        var roleID = jwt_decode(tokenJwt).role;
+        return {
+          ...token,
+          roleID:roleID,
+          accessToken: user.data.access_token,
+          expires: Date.now() + user.data.expires,
+          refreshToken: user.data.refresh_token,
+          error: user.data.error,
+        };
+      }
+
+      if (Date.now() < token.expires) {
+        return token;
+      }
+
+      const refreshed = await refreshAccessToken(token);
+      return await refreshed;
+    },
+
+    async session({ session, token }) {
+      session.user.roleID = token.roleID;
+      session.user.accessToken = token.accessToken;
+      session.user.refreshToken = token.refreshToken;
+      session.user.expires = token.expires;
+      session.user.error = token.error;
+
+      return session;
+    },
+  },
+  secret: process.env.NEXTAUTH_SECRET,
+  pages: {
+    signIn: "/login",
+  },
+  debug: true,
+};
+
+async function refreshAccessToken(token) {
+  try {
+    const response = await fetch(pubAPI + "auth/refresh", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ refresh_token: token.refreshToken }),
+      credentials: "include",
+    });
+
+    const refreshedTokens = await response.json();
+
+    if (!response.ok) {
+      signIn();
+    }
+
+    if (response.ok && refreshedTokens) {
+      return {
+        ...token,
+        accessToken: refreshedTokens.data.access_token,
+        expires: Date.now() + refreshedTokens.data.expires,
+        refreshToken: refreshedTokens.data.refresh_token,
+      };
+    }
+  } catch (error) {
+    console.log(
+      new Date().toUTCString() + " Error in refreshAccessToken:",
+      error
+    );
+
+    return {
+      ...token,
+      error: "RefreshAccessTokenError",
+    };
+  }
+}
+
+const nextauthfunc = (req, res) => NextAuth(req, res, options);
+
+export default nextauthfunc;

src/pages/api/editUser.js

@@ -32,7 +32,7 @@ export default function handler(req, res) {
     function(err) {
         if (err) {
           msg={ msg: 'Err400D' };
-          // res.status(400).send({ msg: 'Err400D' });
+          res.status(400).send({ msg: 'Err400D' });
           // return console.log(err.message);
         }
         // console.log('message');

src/pages/edit-school copy.jsx

@@ -1,131 +0,0 @@
-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,
-      annual: event.target.annual.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="annual" className='text-xl font-bold'>annual</label>
-                        <input type="text"  value={school.annual} 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

@@ -2,8 +2,10 @@ import {useId, useState, useEffect, useMemo} from 'react';
 import 'react-phone-number-input/style.css'
 import NavBar from '../components/NavBar';
 import { useRouter } from 'next/router'
+import Link from 'next/link'
 
-export default function editSchool() {
+
+export default function EditSchool() {
   const router = useRouter();
 
   const [school, setSchool] = useState({});
@@ -66,10 +68,10 @@ export default function editSchool() {
           <div
             className='flex flex-col justify-center place-items-center bg-[#FFF6F2] pt-6 pb-20 rounded-tl-[50px] rounded-br-[50px]'>
             <div className='inline-flex p-4 '>
-                <a href="/add-school-form" className="m-2  inline-flex place-items-center justify-center p-2 pl-4 pr-4 bg-[#FE4501] text-white font-bold rounded-full whitespace-nowrap"> 
+                <Link href="/add-school-form" className="m-2  inline-flex place-items-center justify-center p-2 pl-4 pr-4 bg-[#FE4501] text-white font-bold rounded-full whitespace-nowrap"> 
                    <img src="/img/4.svg" alt="" /> &nbsp;
                     List Users Under This School
-                </a>
+                </Link>
                 <div className="place-items-center justify-center m-2 p-2 bg-[#FE4501] text-white font-bold rounded-full whitespace-nowrap">
                     <span className="text-small">CSV Upload &nbsp;</span>
                     <input type="file" />
@@ -141,7 +143,7 @@ export default function editSchool() {
           </div>
 
           <div className='flex flex-col w-full'>
-            <label htmlFor="agreement_documents" className='text-xl font-bold'>Upload Agreement Document's</label>
+            <label htmlFor="agreement_documents" className='text-xl font-bold'>Upload Agreement Document&apos;s</label>
             <input onChange={e => setSchool(e.target.value)}   type="file"  name="agreement_documents"  className=' bg-white border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]' />
             <div className='flex justify-end pt-2'>
                 <button className=' bg-[#FE4501] px-4 py-1.5 rounded-lg text-white'>Download Agreement</button>

src/pages/edit-school2.jsx

@@ -1,167 +0,0 @@
-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]);
-  // console.log(setSchool)
-
-  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,
-      annual: event.target.annual.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'>Update School Information</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 className='border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]' type="text" value={school.country} onChange={e => setSchool(e.target.value)}  name="country" />
-
-              </div>
-              <div 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" 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="Cities" className='text-xl font-bold'>Cities</label>
-                  <input type="text" value={school.cities} onChange={e => setSchool(e.target.value)}  name="cities" className='border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]'/>
-                  
-                </div>
-                    <div 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" className='border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]' />
-                    </div>
-                    <div className='flex flex-col w-full pt-4'>
-                        <label htmlFor="annual" className='text-xl font-bold'>annual</label>
-                        <input type="text"  value={school.annual} onChange={e => setSchool(e.target.value)} className='border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]' />
-                    </div>
-                    <div 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)} className='border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]' />
-                    </div>
-                    <div className='flex flex-col w-full pt-4'>
-                        <label htmlFor="early_start_programme" className='text-xl font-bold'>Early Start Program</label>
-                        <input type="text" name="early_start_programme" value={school.early_start_programme} onChange={e => setSchool(e.target.value)} className='border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]' />
-                    </div>
-                    <div 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)} 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'>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/edit-user.jsx

@@ -3,26 +3,12 @@ import 'react-phone-number-input/style.css'
 import NavBar from '../components/NavBar';
 import { useRouter } from 'next/router'
 
-export default function editUser() {
+export default function EditUser() {
   const router = useRouter();
 
-  // const updateUserData = async (event) => {
-  //   const body = new FormData();
-  //   body.append("file", agreement.files[0]);
-  //   body.append("fName", `${router.query.school}.pdf`);
-  //   const response = await fetch("/api/updateUserDetails", {
-  //     method: "POST",
-  //     body
-  //   });
-  // };
- 
   const [user, setUser] = useState({});
     
   useEffect(()=>{
-    // console.log(router.query);
-    // if(router.query.school<1) {
-    // const { sid } = router.query;
-    // setSchool(sid)
     if(router.query.user && router.query.user>0 ){
     fetch(`/api/getUserDetails?user=${router.query.user}`)
       .then(res => res.json())

src/pages/edit-user2.jsx

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

src/pages/index.jsx

@@ -1,13 +1,16 @@
-import Image from 'next/image'
+import { signIn, signOut } from 'next-auth/react';
 import NavBar from '../components/NavBar'
-import { Inter } from 'next/font/google'
+import { useSession } from "next-auth/react";
 
-const inter = Inter({ subsets: ['latin'] })
+// const { data: session } = useSession();
+// console.log(session)
 
 export default function Home() {
   return (
     <main>
         <NavBar />
+        <br />
+
     </main>
   )
 }

src/pages/login.jsx

@@ -0,0 +1,115 @@
+import { useState } from 'react';
+import { signIn, getCsrfToken } from 'next-auth/react';
+import { Formik, Field, ErrorMessage } from 'formik';
+import * as Yup from 'yup';
+import { useRouter } from 'next/router';
+
+export default function SignIn({ csrfToken }) {
+  const router = useRouter();
+  const [error, setError] = useState(null);
+
+  return (
+    <>
+      <Formik
+        initialValues={{ email: '', password: '', tenantKey: '' }}
+        validationSchema={Yup.object({
+          email: Yup.string()
+            .max(30, 'Must be 30 characters or less')
+            .email('Invalid email address')
+            .required('Please enter your email'),
+          password: Yup.string().required('Please enter your password'),
+         })}
+        onSubmit={async (values, { setSubmitting }) => {
+          const res = await signIn('credentials', {
+            redirect: false,
+            email: values.email,
+            password: values.password,
+            callbackUrl: `${window.location.origin}`,
+          });
+          if (res?.error) {
+            setError(res.error);
+          } else {
+            setError(null);
+          }
+          if (res.url) router.push(res.url);
+          setSubmitting(false);
+        }}
+      >
+        {(formik) => (
+          <form onSubmit={formik.handleSubmit}>
+            <div 
+            className="bg-red-400 flex flex-col items-center 
+            justify-center min-h-screen py-2 shadow-lg">
+              <div className="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
+                <input
+                  name="csrfToken"
+                  type="hidden"
+                  defaultValue={csrfToken}
+                />
+
+                <div className="text-red-400 text-md text-center rounded p-2">
+                  {error}
+                </div>
+                <div className="mb-4">
+                  <label
+                    htmlFor="email"
+                    className="uppercase text-sm text-gray-600 font-bold"
+                  >
+                    Email
+                    <Field
+                      name="email"
+                      aria-label="enter your email"
+                      aria-required="true"
+                      type="text"
+                      className="w-full bg-gray-300 text-gray-900 mt-2 p-3"
+                    />
+                  </label>
+
+                  <div className="text-red-600 text-sm">
+                    <ErrorMessage name="email" />
+                  </div>
+                </div>
+                <div className="mb-6">
+                  <label
+                    htmlFor="password"
+                    className="uppercase text-sm text-gray-600 font-bold"
+                  >
+                    password
+                    <Field
+                      name="password"
+                      aria-label="enter your password"
+                      aria-required="true"
+                      type="password"
+                      className="w-full bg-gray-300 text-gray-900 mt-2 p-3"
+                    />
+                  </label>
+
+                  <div className="text-red-600 text-sm">
+                    <ErrorMessage name="password" />
+                  </div>
+                </div>
+                <div className="flex items-center justify-center">
+                  <button
+                    type="submit"
+                    className="bg-green-400 text-gray-100 p-3 rounded-lg w-full"
+                  >
+                    {formik.isSubmitting ? 'Please wait...' : 'Sign In'}
+                  </button>
+                </div>
+              </div>
+            </div>
+          </form>
+        )}
+      </Formik>
+    </>
+  );
+}
+
+// This is the recommended way for Next.js 9.3 or newer
+export async function getServerSideProps(context) {
+  return {
+    props: {
+      csrfToken: await getCsrfToken(context),
+    },
+  };
+}

src/pages/profile.jsx

@@ -0,0 +1,22 @@
+import { signIn, signOut, useSession } from 'next-auth/react'
+
+export default function Home() {
+  const { data: session } = useSession()
+console.log(session)
+  if (session) {
+    return (
+      <>
+        Signed in
+        <br />
+        <button onClick={() => signOut()}>Sign out</button>
+      </>
+    )
+  }
+
+  return (
+    <>
+      Not signed in <br />
+      <button onClick={() => signIn()}>Sign in</button>
+    </>
+  )
+}

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

@@ -1,241 +1,161 @@
-import NavBar from '../../components/NavBar'
+import {useId, useState, useEffect, useMemo} from 'react';
-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'
+import NavBar from '../../components/NavBar';
+import { useRouter } from 'next/router'
+import Link from 'next/link'
 
-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 => {
+export default function SchoolSlug() {
-    setAllCities([])
+  const router = useRouter();
-    fetch(`https://api.siliconpin.com/v3/list/country/city/?country=${countryValue.value}&state=${stateCode.value}`)
+
-    .then(res => res.json())
+  const [school, setSchool] = useState({});
-      .then(data => {
+    
-        // console.log("handleSelectAllStates:", data, options)
+  useEffect(()=>{
-        let newData = data && data.length > 0 && data.map(n => {
+    if(router.query.school && router.query.school>0 ){
-          return {
+      console.log(router.query);
-            label: n.name,
+    fetch(`/api/getSchoolDetails?school=${router.query.school}`)
-            value: n.name
+      .then(res => res.json())
-          }
+        .then(data => {
+           console.log(data);
+          setSchool(data[0])
+          // console.log(school)
         })
-        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,
-        annual: event.target.annual.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()
+  }, [router.query.school]);
-    //   alert(`Is this your full name: ${result.data}`)
+  
-      alert(`School Saved`)
+  const updateSchoolData = async (event) => {
+    event.preventDefault()
+    const data = {
+      schoolId: router.query.school,
+      sname: event.target.sname.value,
+      status: event.target.status.value,
+      country: event.target.country.value,
+      state: event.target.state.value,
+      city: event.target.city.value,
+      annual: event.target.annual.value,
+      toddlers: event.target.toddlers.value,
+      early_start_programme: event.target.early_start_programme.value,
+      interakto: event.target.interakto.value,
+      agg_expiry: event.target.agg_expiry.value,
+      usage_expiry: event.target.usage_expiry.value,
+      phone: event.target.phone.value,
+      email: event.target.email.value,
     }
-    const [school, setUser] = useState([]);
+    const JSONdata = JSON.stringify(data)
-    const fetchData = async () => {
+    console.log(data)
-        const response = await fetch("https://management.beanstalkedu.com/items/school?filter[status][_eq]=published&");
+    const endpoint = '/api/editSchool'
-        const data = await response.json();
+    const options = {
-        return setUser(data.data[0]);
+      method: 'POST',
-      }
+      headers: {
-      // console.log(school.name)
+        'Content-Type': 'application/json',
+      },
+      body: JSONdata,
+    }
+    const response = await fetch(endpoint, options)
 
-      useEffect(() => {
+    const result = await response.json()
-        fetchData();
+  //   alert(`Is this your full name: ${result.data}`)
-      },[])
+    alert(`User data updated`)
 
-    return (
+  }
-        <main> 
+  
-            <div>
+  return (
-            <NavBar />
+    <main>
-            <div>
+      <div>
-      <h1>Items page</h1>
+        <NavBar/>
-      <p>{query.id}</p>
+        <section className='container mx-auto px-4 my-16 lg:px-28 xl:px-56 2xl:px-96'>
-      <p>{query.name}</p>
+          <div
-    </div>
+            className='flex flex-col justify-center place-items-center bg-[#FFF6F2] pt-6 pb-20 rounded-tl-[50px] rounded-br-[50px]'>
-            <section className='container mx-auto px-4 my-16 lg:px-28 xl:px-56 2xl:px-96'>
+            <div className='inline-flex p-4 '>
-                <div className='flex flex-col justify-center place-items-center bg-[#FFF6F2] pt-6 pb-20 rounded-tl-[50px] rounded-br-[50px]'>
+                <Link href="/add-school-form" className="m-2  inline-flex place-items-center justify-center p-2 pl-4 pr-4 bg-[#FE4501] text-white font-bold rounded-full whitespace-nowrap"> 
-                    <div className='flex flex-col justify-center place-items-center'>
+                   <img src="/img/4.svg" alt="" /> &nbsp;
-                        <img src="/img/1.svg" alt="" />
+                    List Users Under This School
-                        <p className='text-2xl md:text-4xl font-bold underline decoration-4 decoration-[#FE4501] pb-10'>Update School Information</p>
+                </Link>
-                    </div>
+                <div className="place-items-center justify-center m-2 p-2 bg-[#FE4501] text-white font-bold rounded-full whitespace-nowrap">
-                    <form onSubmit={handleSubmit} className='w-full px-6 md:px-20'>
+                    <span className="text-small">CSV Upload &nbsp;</span>
-                    <div className='flex flex-col w-full'>
+                    <input type="file" />
-                        <label htmlFor="school" className='text-xl font-bold'>School Name</label>
+                </div>
-                        <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]' />
+              {/* <img src="/img/2.svg" alt=""/> */}
-                    </div>
+              
-                    <div className='flex flex-col w-full pt-4'>
+            </div>
-                        <label htmlFor="school_email_id" className='text-xl font-bold'> Email ID</label>
+            <p className='text-2xl font-bold underline decoration-4 decoration-[#FE4501] pb-10'>Update School Information </p>
-                        <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]' />
+            <form onSubmit={updateSchoolData} action="" className='w-full px-6 md:px-20'>
-                    </div>
+              <div className='flex flex-col w-full pt-4'>
-                    <div className='flex flex-col w-full'>
+                <label htmlFor="sname" className='text-xl font-bold'>School Name</label>
-                <label htmlFor="country" className='text-xl font-bold'>Country</label>
+                <input value={school.sname} onChange={e => setSchool(e.target.value)} type="text"  name="sname"  className=' bg-white border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]' />
-                <Select
+              </div>
-                  className='bg-white border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]'
+              <div className='flex flex-col w-full pt-4'>
-                  name="country" instanceId={useId()} options={options} value={countryValue}
+                <label htmlFor="status" className='text-xl font-bold'>Status</label>
-                  onChange={selectCountry}/>
+                <input value={school.status} onChange={e => setSchool(e.target.value)} type="text"  name="status"  className=' bg-white border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]' />
+              </div>
+              <div className='flex flex-col w-full'>
+                <label htmlFor="phone" className='text-xl font-bold'>School contact Number</label>
+                <input  value={school.phone} onChange={e => setSchool(e.target.value)} type="text" name="phone" className=' border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]' />
+              </div>
+              <div className='flex flex-col w-full'>
+                <label htmlFor="email" className='text-xl font-bold'> School contact Email ID</label>
+                <input  value={school.email} onChange={e => setSchool(e.target.value)} type="text" name="email" className=' border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]' />
+              </div>
+              <div className='flex flex-col w-full'>
+                <label htmlFor="country" className='text-xl font-bold'>Country</label>
+                <input value={school.country} onChange={e => setSchool(e.target.value)} type="text" name="country" className=' border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]' />
               </div>
-              {allStates && allStates.length > 0 && 
               <div className='flex flex-col w-full'>
                 <label htmlFor="state" className='text-xl font-bold'>State</label>
-                <Select
+                <input value={school.state} onChange={e => setSchool(e.target.value)} type="text" name="state" className=' border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]' />
-                  className='bg-white border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]'
+              </div>
-                  name="state" options={allStates} value={allStates[0].name}
+              <div className='flex flex-col w-full'>
-                  onChange={handleSelectAllStates}/>
+                <label htmlFor="city" className='text-xl font-bold'>Cities</label>
-              </div>}
+                <input value={school.city} onChange={e => setSchool(e.target.value)} type="text" name="city" className=' border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]' />
-              {
+              </div>
-                allCities && allCities.length > 0 && 
+              <div className='flex flex-col w-full'>
-                <div className='flex flex-col w-full'>
+                <label htmlFor="annual" className='text-xl font-bold'>Annual</label>
-                  <label htmlFor="Cities" className='text-xl font-bold'>Cities</label>
+                <input value={school.annual} onChange={e => setSchool(e.target.value)}  type="text" name="annual" placeholder='' className=' border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]'/>
-                  <Select
+              </div>
-                    className='bg-white border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]'
+              <div className='flex flex-col w-full'>
-                    name="cities" options={allCities} value={allCities[0].name}
+                <label htmlFor="toddlers" className='text-xl font-bold'>Toddlers</label>
-                    // onChange={() => {}}
+                <input value={school.toddlers} onChange={e => setSchool(e.target.value)}   type="text"  name="toddlers"  className=' bg-white border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]' />
-                  />
+              </div>
-                </div>}
+              <div className='flex flex-col w-full'>
-                    <div className='flex flex-col w-full'>
+                <label htmlFor="early_start_programme" className='text-xl font-bold'>Early Start Program</label>
-                        <label htmlFor="phone" className='text-xl font-bold'> Phone</label>
+                <input value={school.early_start_programme} onChange={e => setSchool(e.target.value)}   type="text"  name="early_start_programme"  className=' bg-white border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]' />
-                        <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>
+              <div className='flex flex-col w-full'>
-                    <div className='flex flex-col w-full pt-4'>
+                <label htmlFor="interakto" className='text-xl font-bold'>Interakto</label>
-                        <label htmlFor="annual" className='text-xl font-bold'>annual</label>
+                <input value={school.interakto} onChange={e => setSchool(e.target.value)}   type="text"  name="interakto"  className=' bg-white border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]' />
-                        <select name="annual" className=' bg-white border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]'>
+              </div>
-                            <option value="0" >-NA-</option>
+              <div className='flex flex-col w-full'>
-                            <option value="January">January</option>
+                <label htmlFor="usage_expiry" className='text-xl font-bold'> Usage Expiry Date: (YYYY-MM-DD)</label>
-                            <option value="February">February</option>
+                <input value={school.usage_expiry} onChange={e => setSchool(e.target.value)}   type="text"  name="usage_expiry"  className=' bg-white border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]' />
-                            <option value="March">March</option>
+              </div>
-                            <option value="April">April</option>
+
-                            <option value="May">May</option>
+              <div className='flex flex-col w-full'>
-                            <option value="June">June</option>
+                <label htmlFor="agg_expiry" className='text-xl font-bold'> Agreement Expiry Date: (YYYY-MM-DD)</label>
-                            <option value="July">July</option>
+                <input value={school.agg_expiry} onChange={e => setSchool(e.target.value)}   type="text"  name="agg_expiry"  className=' bg-white border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]' />
-                            <option value="August">August</option>
+              </div>
-                            <option value="September">September</option>
+              <div className='flex justify-center pt-8'>
-                            <option value="October">October</option>
+                <button type="submit"
-                            <option value="November">November</option>
+                        className='bg-[#FE4501] hover:shadow-2xl hover:shadow-[#F2B705] p-2.5 rounded-lg px-10 rounded-tl-full rounded-br-full hover:scale-110 active:scale-75 duration-200 text-xl font-bold text-white cursor-pointer'>Update
-                            <option value="December">December</option>
+                </button>
-                        </select>
+              </div>
-                    </div>
+            </form>
-                    <div className='flex flex-col w-full pt-4'>
+          </div>
-                        <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]'>
+          <div className='flex flex-col w-full'>
-                            <option value="0" >-NA-</option>
+            <label htmlFor="agreement_documents" className='text-xl font-bold'>Upload Agreement Document&apos;s</label>
-                            <option value="January">January</option>
+            <input onChange={e => setSchool(e.target.value)}   type="file"  name="agreement_documents"  className=' bg-white border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]' />
-                            <option value="February">February</option>
+            <div className='flex justify-end pt-2'>
-                            <option value="March">March</option>
+                <button className=' bg-[#FE4501] px-4 py-1.5 rounded-lg text-white'>Download Agreement</button>
-                            <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>
+            
-    )
+          </div>
-  }
+
+
+        </section>
+      </div>
+    </main>
+  )
+}
+
+

src/pages/school-list/index.jsx

@@ -50,7 +50,7 @@ const fetchData = async () => {
                         </thead>
                         <tbody>
                         {school.map(data=> 
-                            <tr className="border-b-2 whitespace-normal">
+                            <tr  key={data.id} className="border-b-2 whitespace-normal">
                                 <td className=" p-2">{data.id}</td>
                                 <td className=" p-2">{data.sname}</td>
                                 <td className="p-2">{data.city}</td>

src/pages/school-list/slug.jsx

@@ -1,241 +0,0 @@
-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,
-        annual: event.target.annual.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="annual" className='text-xl font-bold'>annual</label>
-                        <select name="annual" 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/user-list-by-school.jsx

@@ -1,8 +1,7 @@
 import React, { useEffect, useState } from "react";
+import Link from 'next/link'
+
 
-import Image from 'next/image'
-import { Inter } from 'next/font/google'
-const inter = Inter({ subsets: ['latin'] })
 import NavBar from '../components/NavBar'
 export default function Modal() {
     const [user, setUser] = useState([]);
@@ -26,14 +25,14 @@ const fetchData = async () => {
             <div className="flex flex-row justify-end bg-[#FFF6F2] p-2 gap-x-4 border-x-2 border-t-2 rounded-t-xl">
                 <div className="flex flex-row justify-center place-items-center">
                     <input type="text" className="md:w-32 md:focus:w-96 duration-[1s] border-2 border-[#FE4501] w-full rounded-l-full p-2 focus:outline-none focus:border-[#F2B705] bg-[#FFF6F2] focus:bg-white text-center" placeholder="Search User" />
-                    <a href="" className="bg-[#FE4501] rounded-r-full p-2 px-4 border-2 border-[#FE4501] text-white font-bold ">
+                    <Link href="" className="bg-[#FE4501] rounded-r-full p-2 px-4 border-2 border-[#FE4501] text-white font-bold ">
                     <svg className="hover:scale-110 active:scale-75 duration-300" width="24px" height="24px" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="#ffffff"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path fill="#ffffff" fill-rule="evenodd" d="M4 9a5 5 0 1110 0A5 5 0 014 9zm5-7a7 7 0 104.2 12.6.999.999 0 00.093.107l3 3a1 1 0 001.414-1.414l-3-3a.999.999 0 00-.107-.093A7 7 0 009 2z"></path> </g></svg>
-                    </a>
+                    </Link>
                 </div>
-                <a href="/add-user-form" className="inline-flex place-items-center p-2 bg-[#FE4501] text-white font-bold rounded-full whitespace-nowrap"> 
+                <Link href="/add-user-form" className="inline-flex place-items-center p-2 bg-[#FE4501] text-white font-bold rounded-full whitespace-nowrap"> 
                 <svg className="font-bold" width="25px" height="25px" viewBox="0 0 21 21" xmlns="http://www.w3.org/2000/svg" fill="#ffffff" stroke="#ffffff"><g id="SVGRepo_bgCarrier" stroke-width="2"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g fill="none" fill-rule="evenodd" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" transform="translate(3 2)"> <path d="m7.5.5c1.65685425 0 3 1.34314575 3 3v2c0 1.65685425-1.34314575 3-3 3s-3-1.34314575-3-3v-2c0-1.65685425 1.34314575-3 3-3z"></path> <path d="m14.5 2.5v4"></path> <path d="m16.5 4.5h-4"></path> <path d="m14.5 14.5v-.7281753c0-3.1864098-3.6862915-5.2718247-7-5.2718247s-7 2.0854149-7 5.2718247v.7281753c0 .5522847.44771525 1 1 1h12c.5522847 0 1-.4477153 1-1z"></path> </g> </g></svg>
                     Add User
-                </a>
+                </Link>
             </div> 
                 <div className='flex overflow-x-scroll xl:justify-center'>
                 <table className=" text-center border-2 p-2 w-full">
@@ -52,7 +51,7 @@ const fetchData = async () => {
                         <tbody>
                         {user.map
                             (data=> 
-                                <tr className="border-b-2 whitespace-normal text-left">
+                                <tr  key={data.id} className="border-b-2 whitespace-normal text-left">
                                     <td className="border-x-2 p-2 text-center">{data.uname}</td>
                                     <td className="border-x-2 p-2 text-center">{data.phone}</td>
                                     <td className="border-x-2 p-2 text-center">{data.email}</td>

src/pages/user-list.jsx

@@ -1,8 +1,5 @@
 import React, { useEffect, useState } from "react";
-
+import Link from 'next/link'
-import Image from 'next/image'
-import { Inter } from 'next/font/google'
-const inter = Inter({ subsets: ['latin'] })
 import NavBar from '../components/NavBar'
 export default function Modal() {
     const [user, setUser] = useState([]);
@@ -30,10 +27,10 @@ const fetchData = async () => {
                     <svg className="hover:scale-110 active:scale-75 duration-300" width="24px" height="24px" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="#ffffff"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path fill="#ffffff" fill-rule="evenodd" d="M4 9a5 5 0 1110 0A5 5 0 014 9zm5-7a7 7 0 104.2 12.6.999.999 0 00.093.107l3 3a1 1 0 001.414-1.414l-3-3a.999.999 0 00-.107-.093A7 7 0 009 2z"></path> </g></svg>
                     </a>
                 </div>
-                <a href="/add-user-form" className="inline-flex place-items-center p-2 bg-[#FE4501] text-white font-bold rounded-full whitespace-nowrap"> 
+                <Link href="/add-user-form" className="inline-flex place-items-center p-2 bg-[#FE4501] text-white font-bold rounded-full whitespace-nowrap"> 
                 <svg className="font-bold" width="25px" height="25px" viewBox="0 0 21 21" xmlns="http://www.w3.org/2000/svg" fill="#ffffff" stroke="#ffffff"><g id="SVGRepo_bgCarrier" stroke-width="2"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g fill="none" fill-rule="evenodd" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" transform="translate(3 2)"> <path d="m7.5.5c1.65685425 0 3 1.34314575 3 3v2c0 1.65685425-1.34314575 3-3 3s-3-1.34314575-3-3v-2c0-1.65685425 1.34314575-3 3-3z"></path> <path d="m14.5 2.5v4"></path> <path d="m16.5 4.5h-4"></path> <path d="m14.5 14.5v-.7281753c0-3.1864098-3.6862915-5.2718247-7-5.2718247s-7 2.0854149-7 5.2718247v.7281753c0 .5522847.44771525 1 1 1h12c.5522847 0 1-.4477153 1-1z"></path> </g> </g></svg>
                     Add User
-                </a>
+                </Link>
             </div> 
                 <div className='flex overflow-x-scroll xl:justify-center'>
                 <table className=" text-center border-2 p-2 w-full">
@@ -52,7 +49,7 @@ const fetchData = async () => {
                         <tbody>
                         {user.map
                             (data=> 
-                                <tr className="border-b-2 whitespace-normal text-left">
+                                <tr key={data.id} className="border-b-2 whitespace-normal text-left">
                                     <td className="border-x-2 p-2 text-center">{data.uname}</td>
                                     <td className="border-x-2 p-2 text-center">{data.phone}</td>
                                     <td className="border-x-2 p-2 text-center">{data.email}</td>

yarn.lock

@@ -40,7 +40,7 @@
     chalk "^2.0.0"
     js-tokens "^4.0.0"
 
-"@babel/runtime@^7.12.0", "@babel/runtime@^7.12.5", "@babel/runtime@^7.18.3", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.7":
+"@babel/runtime@^7.12.0", "@babel/runtime@^7.12.5", "@babel/runtime@^7.18.3", "@babel/runtime@^7.20.13", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.7":
   version "7.21.5"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.21.5.tgz#8492dddda9644ae3bda3b45eabe87382caee7200"
   integrity sha512-8jI69toZqqcsnqGGqwGS4Qb1VwLOEp4hz+CXPywcvjs60u3B4Pom/U/7rm4W8tMOYEB+E9wgD0mW1l3r8qlI9Q==
@@ -365,6 +365,11 @@
     mkdirp "^1.0.4"
     rimraf "^3.0.2"
 
+"@panva/hkdf@^1.0.2":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@panva/hkdf/-/hkdf-1.1.1.tgz#ab9cd8755d1976e72fc77a00f7655a64efe6cd5d"
+  integrity sha512-dhPeilub1NuIG0X5Kvhh9lH4iW3ZsHlnzwgwbOlgwQ2wG1IqFzsgHqmKPk3WzsdWAeaxKJxgM0+W433RmN45GA==
+
 "@phc/format@^1.0.0":
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/@phc/format/-/format-1.0.0.tgz#b5627003b3216dc4362125b13f48a4daa76680e4"
@@ -684,6 +689,11 @@ ast-types-flow@^0.0.7:
   resolved "https://registry.yarnpkg.com/ast-types-flow/-/ast-types-flow-0.0.7.tgz#f70b735c6bca1a5c9c22d982c3e39e7feba3bdad"
   integrity sha512-eBvWn1lvIApYMhzQMsu9ciLfkBY499mFZlNqG+/9WR7PVlroQw0vG30cOQQbaKz3sCEc44TAOu2ykzqXSNnwag==
 
+asynckit@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
+  integrity sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==
+
 autoprefixer@10.4.14:
   version "10.4.14"
   resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-10.4.14.tgz#e28d49902f8e759dd25b153264e862df2705f79d"
@@ -706,6 +716,15 @@ axe-core@^4.6.2:
   resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-4.7.0.tgz#34ba5a48a8b564f67e103f0aa5768d76e15bbbbf"
   integrity sha512-M0JtH+hlOL5pLQwHOLNYZaXuhqmvS8oExsqB1SBYgA4Dk7u/xx+YdGHXaK5pyUfed5mYXdlYiphWq3G8cRi5JQ==
 
+axios@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-1.4.0.tgz#38a7bf1224cd308de271146038b551d725f0be1f"
+  integrity sha512-S4XCWMEmzvo64T9GfvQDOXgYRDJ/wsSZc7Jvdgx5u1sd0JwsuPLqb3SYmusag+edF6ziyMensPVqLTSc1PiSEA==
+  dependencies:
+    follow-redirects "^1.15.0"
+    form-data "^4.0.0"
+    proxy-from-env "^1.1.0"
+
 axobject-query@^3.1.1:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/axobject-query/-/axobject-query-3.1.1.tgz#3b6e5c6d4e43ca7ba51c5babf99d22a9c68485e1"
@@ -897,6 +916,13 @@ color-support@^1.1.2, color-support@^1.1.3:
   resolved "https://registry.yarnpkg.com/color-support/-/color-support-1.1.3.tgz#93834379a1cc9a0c61f82f52f0d04322251bd5a2"
   integrity sha512-qiBjkpbMLO/HL68y+lh4q0/O1MZFj2RX6X/KmMa3+gJD3z+WwI1ZzDHysvqHGS3mP6mznPckpXmw1nI9cJjyRg==
 
+combined-stream@^1.0.8:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.8.tgz#c3d45a8b34fd730631a110a8a2520682b31d5a7f"
+  integrity sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==
+  dependencies:
+    delayed-stream "~1.0.0"
+
 commander@^4.0.0:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/commander/-/commander-4.1.1.tgz#9fd602bd936294e9e9ef46a3f4d6964044b18068"
@@ -917,6 +943,11 @@ convert-source-map@^1.5.0:
   resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.9.0.tgz#7faae62353fb4213366d0ca98358d22e8368b05f"
   integrity sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==
 
+cookie@^0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.5.0.tgz#d1f5d71adec6558c58f389987c366aa47e994f8b"
+  integrity sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw==
+
 cosmiconfig@^7.0.0:
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-7.1.0.tgz#1443b9afa596b670082ea46cbd8f6a62b84635f6"
@@ -1006,6 +1037,11 @@ deep-is@^0.1.3:
   resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.4.tgz#a6f2dce612fadd2ef1f519b73551f17e85199831"
   integrity sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==
 
+deepmerge@^2.1.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-2.2.1.tgz#5d3ff22a01c00f645405a2fbc17d0778a1801170"
+  integrity sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA==
+
 define-lazy-prop@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/define-lazy-prop/-/define-lazy-prop-2.0.0.tgz#3f7ae421129bcaaac9bc74905c98a0009ec9ee7f"
@@ -1019,6 +1055,11 @@ define-properties@^1.1.3, define-properties@^1.1.4, define-properties@^1.2.0:
     has-property-descriptors "^1.0.0"
     object-keys "^1.1.1"
 
+delayed-stream@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
+  integrity sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==
+
 delegates@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/delegates/-/delegates-1.0.0.tgz#84c6e159b81904fdca59a0ef44cd870d31250f9a"
@@ -1509,6 +1550,11 @@ flatted@^3.1.0:
   resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.2.7.tgz#609f39207cb614b89d0765b477cb2d437fbf9787"
   integrity sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ==
 
+follow-redirects@^1.15.0:
+  version "1.15.2"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.2.tgz#b460864144ba63f2681096f274c4e57026da2c13"
+  integrity sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==
+
 for-each@^0.3.3:
   version "0.3.3"
   resolved "https://registry.yarnpkg.com/for-each/-/for-each-0.3.3.tgz#69b447e88a0a5d32c3e7084f3f1710034b21376e"
@@ -1516,6 +1562,15 @@ for-each@^0.3.3:
   dependencies:
     is-callable "^1.1.3"
 
+form-data@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/form-data/-/form-data-4.0.0.tgz#93919daeaf361ee529584b9b31664dc12c9fa452"
+  integrity sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==
+  dependencies:
+    asynckit "^0.4.0"
+    combined-stream "^1.0.8"
+    mime-types "^2.1.12"
+
 formidable@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/formidable/-/formidable-2.1.1.tgz#81269cbea1a613240049f5f61a9d97731517414f"
@@ -1526,6 +1581,19 @@ formidable@^2.1.1:
     once "^1.4.0"
     qs "^6.11.0"
 
+formik@^2.2.9:
+  version "2.2.9"
+  resolved "https://registry.yarnpkg.com/formik/-/formik-2.2.9.tgz#8594ba9c5e2e5cf1f42c5704128e119fc46232d0"
+  integrity sha512-LQLcISMmf1r5at4/gyJigGn0gOwFbeEAlji+N9InZF6LIMXnFNkO42sCI8Jt84YZggpD4cPWObAZaxpEFtSzNA==
+  dependencies:
+    deepmerge "^2.1.1"
+    hoist-non-react-statics "^3.3.0"
+    lodash "^4.17.21"
+    lodash-es "^4.17.21"
+    react-fast-compare "^2.0.1"
+    tiny-warning "^1.0.2"
+    tslib "^1.10.0"
+
 fraction.js@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/fraction.js/-/fraction.js-4.2.0.tgz#448e5109a313a3527f5a3ab2119ec4cf0e0e2950"
@@ -1789,7 +1857,7 @@ hexoid@^1.0.0:
   resolved "https://registry.yarnpkg.com/hexoid/-/hexoid-1.0.0.tgz#ad10c6573fb907de23d9ec63a711267d9dc9bc18"
   integrity sha512-QFLV0taWQOZtvIRIAdBChesmogZrtuXvVWsFHZTk2SU+anspqZ2vMnoLg7IE1+Uk16N19APic1BuF8bC8c2m5g==
 
-hoist-non-react-statics@^3.3.1:
+hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.1:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
   integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
@@ -2098,6 +2166,11 @@ jiti@^1.18.2:
   resolved "https://registry.yarnpkg.com/jiti/-/jiti-1.18.2.tgz#80c3ef3d486ebf2450d9335122b32d121f2a83cd"
   integrity sha512-QAdOptna2NYiSSpv0O/BwoHBSmz4YhpzJHyi+fnMRTXFjp7B8i/YG5Z8IfusxB1ufjcD2Sre1F3R+nX3fvy7gg==
 
+jose@^4.11.4, jose@^4.14.1:
+  version "4.14.4"
+  resolved "https://registry.yarnpkg.com/jose/-/jose-4.14.4.tgz#59e09204e2670c3164ee24cbfe7115c6f8bff9ca"
+  integrity sha512-j8GhLiKmUAh+dsFXlX1aJCbt5KMibuKb+d7j1JaOJG6s2UjX1PQlW+OKB/sD4a/5ZYF4RcmYmLSndOoU3Lt/3g==
+
 js-sdsl@^4.1.4:
   version "4.4.0"
   resolved "https://registry.yarnpkg.com/js-sdsl/-/js-sdsl-4.4.0.tgz#8b437dbe642daa95760400b602378ed8ffea8430"
@@ -2172,6 +2245,11 @@ jws@^3.2.2:
     jwa "^1.4.1"
     safe-buffer "^5.0.1"
 
+jwt-decode@^3.1.2:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/jwt-decode/-/jwt-decode-3.1.2.tgz#3fb319f3675a2df0c2895c8f5e9fa4b67b04ed59"
+  integrity sha512-UfpWE/VZn0iP50d8cz9NrZLM9lSWhcJ+0Gt/nm4by88UL+J1SiKN8/5dkjMmbEzwL2CAe+67GsegCbIKtbp75A==
+
 language-subtag-registry@~0.3.2:
   version "0.3.22"
   resolved "https://registry.yarnpkg.com/language-subtag-registry/-/language-subtag-registry-0.3.22.tgz#2e1500861b2e457eba7e7ae86877cbd08fa1fd1d"
@@ -2214,6 +2292,11 @@ locate-path@^6.0.0:
   dependencies:
     p-locate "^5.0.0"
 
+lodash-es@^4.17.21:
+  version "4.17.21"
+  resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.21.tgz#43e626c46e6591b7750beb2b50117390c609e3ee"
+  integrity sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==
+
 lodash.merge@^4.6.2:
   version "4.6.2"
   resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.2.tgz#558aa53b43b661e1925a0afdfa36a9a1085fe57a"
@@ -2285,6 +2368,18 @@ micromatch@^4.0.4, micromatch@^4.0.5:
     braces "^3.0.2"
     picomatch "^2.3.1"
 
+mime-db@1.52.0:
+  version "1.52.0"
+  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.52.0.tgz#bbabcdc02859f4987301c856e3387ce5ec43bf70"
+  integrity sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==
+
+mime-types@^2.1.12:
+  version "2.1.35"
+  resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.35.tgz#381a871b62a734450660ae3deee44813f70d959a"
+  integrity sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==
+  dependencies:
+    mime-db "1.52.0"
+
 minimatch@^3.0.4, minimatch@^3.0.5, minimatch@^3.1.1, minimatch@^3.1.2:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.1.2.tgz#19cd194bfd3e428f049a70817c038d89ab4be35b"
@@ -2395,6 +2490,21 @@ negotiator@^0.6.2:
   resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.3.tgz#58e323a72fedc0d6f9cd4d31fe49f51479590ccd"
   integrity sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==
 
+next-auth@^4.22.1:
+  version "4.22.1"
+  resolved "https://registry.yarnpkg.com/next-auth/-/next-auth-4.22.1.tgz#1ea5084e38867966dc6492a71c6729c8f5cfa96b"
+  integrity sha512-NTR3f6W7/AWXKw8GSsgSyQcDW6jkslZLH8AiZa5PQ09w1kR8uHtR9rez/E9gAq/o17+p0JYHE8QjF3RoniiObA==
+  dependencies:
+    "@babel/runtime" "^7.20.13"
+    "@panva/hkdf" "^1.0.2"
+    cookie "^0.5.0"
+    jose "^4.11.4"
+    oauth "^0.9.15"
+    openid-client "^5.4.0"
+    preact "^10.6.3"
+    preact-render-to-string "^5.1.19"
+    uuid "^8.3.2"
+
 next@13.3.1:
   version "13.3.1"
   resolved "https://registry.yarnpkg.com/next/-/next-13.3.1.tgz#17625f7423db2e059d71b41bd9031756cf2b33bc"
@@ -2492,11 +2602,21 @@ npmlog@^6.0.0:
     gauge "^4.0.3"
     set-blocking "^2.0.0"
 
+oauth@^0.9.15:
+  version "0.9.15"
+  resolved "https://registry.yarnpkg.com/oauth/-/oauth-0.9.15.tgz#bd1fefaf686c96b75475aed5196412ff60cfb9c1"
+  integrity sha512-a5ERWK1kh38ExDEfoO6qUHJb32rd7aYmPHuyCu3Fta/cnICvYmgd2uhuKXvPD+PXB+gCEYYEaQdIRAjCOwAKNA==
+
 object-assign@^4.0.1, object-assign@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
   integrity sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==
 
+object-hash@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/object-hash/-/object-hash-2.2.0.tgz#5ad518581eefc443bd763472b8ff2e9c2c0d54a5"
+  integrity sha512-gScRMn0bS5fH+IuwyIFgnh9zBdo4DV+6GhygmWM9HyNJSgS0hScp1f5vjtm7oIIOiT9trXrShAkLFSc2IqKNgw==
+
 object-hash@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/object-hash/-/object-hash-3.0.0.tgz#73f97f753e7baffc0e2cc9d6e079079744ac82e9"
@@ -2565,6 +2685,11 @@ object.values@^1.1.6:
     define-properties "^1.1.4"
     es-abstract "^1.20.4"
 
+oidc-token-hash@^5.0.3:
+  version "5.0.3"
+  resolved "https://registry.yarnpkg.com/oidc-token-hash/-/oidc-token-hash-5.0.3.tgz#9a229f0a1ce9d4fc89bcaee5478c97a889e7b7b6"
+  integrity sha512-IF4PcGgzAr6XXSff26Sk/+P4KZFJVuHAJZj3wgO3vX2bMdNVp/QXTP3P7CEm9V1IdG8lDLY3HhiqpsE/nOwpPw==
+
 once@^1.3.0, once@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"
@@ -2581,6 +2706,16 @@ open@^8.4.0:
     is-docker "^2.1.1"
     is-wsl "^2.2.0"
 
+openid-client@^5.4.0:
+  version "5.4.2"
+  resolved "https://registry.yarnpkg.com/openid-client/-/openid-client-5.4.2.tgz#8692bcc2a40ef3426c5ba5c11f7493599e93ccc7"
+  integrity sha512-lIhsdPvJ2RneBm3nGBBhQchpe3Uka//xf7WPHTIglery8gnckvW7Bd9IaQzekzXJvWthCMyi/xVEyGW0RFPytw==
+  dependencies:
+    jose "^4.14.1"
+    lru-cache "^6.0.0"
+    object-hash "^2.2.0"
+    oidc-token-hash "^5.0.3"
+
 optionator@^0.9.1:
   version "0.9.1"
   resolved "https://registry.yarnpkg.com/optionator/-/optionator-0.9.1.tgz#4f236a6373dae0566a6d43e1326674f50c291499"
@@ -2738,11 +2873,28 @@ postcss@8.4.23, postcss@^8.4.23:
     picocolors "^1.0.0"
     source-map-js "^1.0.2"
 
+preact-render-to-string@^5.1.19:
+  version "5.2.6"
+  resolved "https://registry.yarnpkg.com/preact-render-to-string/-/preact-render-to-string-5.2.6.tgz#0ff0c86cd118d30affb825193f18e92bd59d0604"
+  integrity sha512-JyhErpYOvBV1hEPwIxc/fHWXPfnEGdRKxc8gFdAZ7XV4tlzyzG847XAyEZqoDnynP88akM4eaHcSOzNcLWFguw==
+  dependencies:
+    pretty-format "^3.8.0"
+
+preact@^10.6.3:
+  version "10.14.1"
+  resolved "https://registry.yarnpkg.com/preact/-/preact-10.14.1.tgz#1e15ef6a09e241a48d12c872b90557914b03abac"
+  integrity sha512-4XDSnUisk3YFBb3p9WeKeH1mKoxdFUsaXcvxs9wlpYR1wax/TWJVqhwmIWbByX0h7jMEJH6Zc5J6jqc58FKaNQ==
+
 prelude-ls@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
   integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==
 
+pretty-format@^3.8.0:
+  version "3.8.0"
+  resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-3.8.0.tgz#bfbed56d5e9a776645f4b1ff7aa1a3ac4fa3c385"
+  integrity sha512-WuxUnVtlWL1OfZFQFuqvnvs6MiAGk9UNsBostyBOB0Is9wb5uRESevA6rnl/rkksXaGX3GzZhPup5d6Vp1nFew==
+
 promise-inflight@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/promise-inflight/-/promise-inflight-1.0.1.tgz#98472870bf228132fcbdd868129bad12c3c029e3"
@@ -2765,6 +2917,16 @@ prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.8.1:
     object-assign "^4.1.1"
     react-is "^16.13.1"
 
+property-expr@^2.0.5:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/property-expr/-/property-expr-2.0.5.tgz#278bdb15308ae16af3e3b9640024524f4dc02cb4"
+  integrity sha512-IJUkICM5dP5znhCckHSv30Q4b5/JA5enCtkRHYaOVOAocnH/1BQEYTC5NMfT3AVl/iXKdr3aqQbQn9DxyWknwA==
+
+proxy-from-env@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz#e102f16ca355424865755d2c9e8ea4f24d58c3e2"
+  integrity sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==
+
 punycode@^2.1.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.3.0.tgz#f67fa67c94da8f4d0cfff981aee4118064199b8f"
@@ -2790,6 +2952,11 @@ react-dom@18.2.0:
     loose-envify "^1.1.0"
     scheduler "^0.23.0"
 
+react-fast-compare@^2.0.1:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-2.0.4.tgz#e84b4d455b0fec113e0402c329352715196f81f9"
+  integrity sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw==
+
 react-is@^16.13.1, react-is@^16.7.0:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
@@ -2927,6 +3094,13 @@ run-parallel@^1.1.9:
   dependencies:
     queue-microtask "^1.2.2"
 
+rxjs@^7.8.1:
+  version "7.8.1"
+  resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-7.8.1.tgz#6f6f3d99ea8044291efd92e7c7fcf562c4057543"
+  integrity sha512-AA3TVj+0A2iuIoQkWEK/tqFjBq2j+6PO6Y0zJcvzLAFhEFIO3HL0vls9hWLncZbAAbK0mar7oZ4V079I/qPMxg==
+  dependencies:
+    tslib "^2.1.0"
+
 safe-buffer@^5.0.1, safe-buffer@~5.2.0:
   version "5.2.1"
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.1.tgz#1eaf9fa9bdb1fdd4ec75f58f9cdb4e6b7827eec6"
@@ -3266,6 +3440,11 @@ thenify-all@^1.0.0:
   dependencies:
     any-promise "^1.0.0"
 
+tiny-case@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/tiny-case/-/tiny-case-1.0.3.tgz#d980d66bc72b5d5a9ca86fb7c9ffdb9c898ddd03"
+  integrity sha512-Eet/eeMhkO6TX8mnUteS9zgPbUMQa4I6Kkp5ORiBD5476/m+PIRiumP5tmh5ioJpH7k51Kehawy2UDfsnxxY8Q==
+
 tiny-glob@^0.2.9:
   version "0.2.9"
   resolved "https://registry.yarnpkg.com/tiny-glob/-/tiny-glob-0.2.9.tgz#2212d441ac17928033b110f8b3640683129d31e2"
@@ -3274,6 +3453,11 @@ tiny-glob@^0.2.9:
     globalyzer "0.1.0"
     globrex "^0.1.2"
 
+tiny-warning@^1.0.2:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754"
+  integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==
+
 to-fast-properties@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-2.0.0.tgz#dc5e698cbd079265bc73e0377681a4e4e83f616e"
@@ -3286,6 +3470,11 @@ to-regex-range@^5.0.1:
   dependencies:
     is-number "^7.0.0"
 
+toposort@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/toposort/-/toposort-2.0.2.tgz#ae21768175d1559d48bef35420b2f4962f09c330"
+  integrity sha512-0a5EOkAUp8D4moMi2W8ZF8jcga7BgZd91O/yabJCFY8az+XSzeGyTKs0Aoo897iV1Nj6guFq8orWDS96z91oGg==
+
 tr46@~0.0.3:
   version "0.0.3"
   resolved "https://registry.yarnpkg.com/tr46/-/tr46-0.0.3.tgz#8184fd347dac9cdc185992f3a6622e14b9d9ab6a"
@@ -3306,11 +3495,16 @@ tsconfig-paths@^3.14.1:
     minimist "^1.2.6"
     strip-bom "^3.0.0"
 
-tslib@^1.8.1:
+tslib@^1.10.0, tslib@^1.8.1:
   version "1.14.1"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
   integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
 
+tslib@^2.1.0:
+  version "2.5.2"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.5.2.tgz#1b6f07185c881557b0ffa84b111a0106989e8338"
+  integrity sha512-5svOrSA2w3iGFDs1HibEVBGbDrAY82bFQ3HZ3ixB+88nsbsWQoKqDRb5UBYAUPEzbBn6dAp5gRNXglySbx1MlA==
+
 tslib@^2.4.0, tslib@^2.5.0:
   version "2.5.0"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.5.0.tgz#42bfed86f5787aeb41d031866c8f402429e0fddf"
@@ -3335,6 +3529,11 @@ type-fest@^0.20.2:
   resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.20.2.tgz#1bf207f4b28f91583666cb5fbd327887301cd5f4"
   integrity sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==
 
+type-fest@^2.19.0:
+  version "2.19.0"
+  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-2.19.0.tgz#88068015bb33036a598b952e55e9311a60fd3a9b"
+  integrity sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA==
+
 typed-array-length@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/typed-array-length/-/typed-array-length-1.0.4.tgz#89d83785e5c4098bec72e08b319651f0eac9c1bb"
@@ -3398,6 +3597,11 @@ util-deprecate@^1.0.1, util-deprecate@^1.0.2:
   resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
   integrity sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==
 
+uuid@^8.3.2:
+  version "8.3.2"
+  resolved "https://registry.yarnpkg.com/uuid/-/uuid-8.3.2.tgz#80d5b5ced271bb9af6c445f21a1a04c606cefbe2"
+  integrity sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==
+
 webidl-conversions@^3.0.0:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-3.0.1.tgz#24534275e2a7bc6be7bc86611cc16ae0a5654871"
@@ -3487,3 +3691,13 @@ yocto-queue@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"
   integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==
+
+yup@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/yup/-/yup-1.1.1.tgz#49dbcf5ae7693ed0a36ed08a9e9de0a09ac18e6b"
+  integrity sha512-KfCGHdAErqFZWA5tZf7upSUnGKuTOnsI3hUsLr7fgVtx+DK04NPV01A68/FslI4t3s/ZWpvXJmgXhd7q6ICnag==
+  dependencies:
+    property-expr "^2.0.5"
+    tiny-case "^1.0.3"
+    toposort "^2.0.2"
+    type-fest "^2.19.0"