search

data/user.csv

@@ -6,3 +6,6 @@ name 3,published,,parent,,Apr,2023-05-14,2024-05-13,,IK2,,70000000011,,Feb,Sept,
 name 2,published,,parent,,Apr,2023-05-14,2024-05-13,,IK2,,70000000011,,Feb,Sept,Oct,Jul,2@email.com,IN,WB,Habra,sample road near landmark,individual
 name 6,published,,parent,,Jun,2023-05-14,2024-05-13,,IK3,,70000000011,,Mar,Sept,Jul,Apr,6@email.com,BD,55,Lalmonirhat,sample road near landmark,individual
 teacher name,published,,teacher,,Apr,2023-05-15,2024-05-13,,IK2,,99999 99933,,Mar,0,0,0,t1@email.com,IN,WB,Barasat,,individual
+suvankar,published,,teacher,,Apr,2023-05-15,2024-05-13,,IK2,,0,,Mar,0,0,0,suvvv@email.com,IN,WB,Barasat,,individual
+teacher name,published,,teacher,,Apr,2023-05-15,2024-05-13,,IK2,,99999 99933,,Mar,0,0,0,t1@email.com,IN,WB,Barasat,,individual
+Name 11,published,,parent,,Feb,2023-05-14,2024-05-13,,IK2,,70000000011,,Jan,Feb,Mar,Jul,1@email.com,IN,WB,Habra,sample road near landmark,individual

public/next.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>

public/vercel.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 283 64"><path fill="black" d="M141 16c-11 0-19 7-19 18s9 18 20 18c7 0 13-3 16-7l-7-5c-2 3-6 4-9 4-5 0-9-3-10-7h28v-3c0-11-8-18-19-18zm-9 15c1-4 4-7 9-7s8 3 9 7h-18zm117-15c-11 0-19 7-19 18s9 18 20 18c6 0 12-3 16-7l-8-5c-2 3-5 4-8 4-5 0-9-3-11-7h28l1-3c0-11-8-18-19-18zm-10 15c2-4 5-7 10-7s8 3 9 7h-19zm-39 3c0 6 4 10 10 10 4 0 7-2 9-5l8 5c-3 5-9 8-17 8-11 0-19-7-19-18s8-18 19-18c8 0 14 3 17 8l-8 5c-2-3-5-5-9-5-6 0-10 4-10 10zm83-29v46h-9V5h9zM37 0l37 64H0L37 0zm92 5-27 48L74 5h10l18 30 17-30h10zm59 12v10l-3-1c-6 0-10 4-10 10v15h-9V17h9v9c0-5 6-9 13-9z"/></svg>

src/components/NavBar.tsx

@@ -11,13 +11,13 @@ export default function NavBar() {
           <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'>
+                  <div className='flex flex-row  p-2  justify-center whitespace-nowrap'>
-                    <Link href="/add-school-form">Add School </Link>|
+                    <Link href="/add-school-form" className='text-grey-400 hover:bg-blue-200 rounded-lg p-2 pt-1 pb-1 ml-2 mr-2'>Add School </Link>
-                      <Link href="/school-list">School List</Link>|
+                      <Link href="/school-list" className='text-grey-400 hover:bg-blue-200 rounded-lg p-2 pt-1 pb-1 ml-2 mr-2'>School List</Link>
-                      <Link href="/add-user-form">Add User </Link>|
+                      <Link href="/add-user-form" className='text-grey-400 hover:bg-blue-200 rounded-lg p-2 pt-1 pb-1 ml-2 mr-2'>Add User </Link>
-                      <Link href="/upload-user">Upload User </Link>|
+                      <Link href="/upload-user" className='text-grey-400 hover:bg-blue-200 rounded-lg p-2 pt-1 pb-1 ml-2 mr-2'>Upload User </Link>
-                      <Link href="/user-list">User List </Link>|
+                      <Link href="/user-list" className='text-grey-400 hover:bg-blue-200 rounded-lg p-2 pt-1 pb-1 ml-2 mr-2'> User List </Link>
-                      <button onClick={() => signOut()}>Sign out</button>
+                      <Link href="#" className='text-grey-400 hover:bg-blue-200 rounded-lg p-2 pt-1 pb-1 ml-2 mr-2' onClick={() => signOut()}>Sign out</Link>
                       
                   </div>
               </div>
@@ -32,6 +32,18 @@ export default function NavBar() {
       <button onClick={() => signIn()}>Sign in</button>
     </>
   )
+  // return (
+  //   <div className='container mx-auto flex-col justify-center place-items-center 2xl:px-[500px] mt-24 '>
+  //     <>
+  //     <div className='grid grid-rows-2  lg:py-56 rounded-xl place-items-center bg-[#FFF6F2]'>
+  //       <p className='text-center text-2xl italic'>Logged out Successfully </p>
+  //       <button onClick={() => signIn()} className="bg-[#FE4501] w-fit px-6 py-1.5 rounded-lg text-white font-bold text-xl">Sign in Now</button>
+  //     </div>
+      
+  //     </>
+  //   </div>
+    
+  // )
 
 }
 

src/pages/add-school-form-test.jsx

@@ -0,0 +1,170 @@
+import NavBar from '../components/NavBar'
+import { signIn, signOut, useSession } from 'next-auth/react'
+import { useId, useState, useEffect, useMemo } from 'react';
+import Select from 'react-select'
+import countryList from 'react-select-country-list'
+import 'react-phone-number-input/style.css'
+import PhoneInput from 'react-phone-number-input'
+
+export default function AddSchool() {
+  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-test", {
+      method: "POST",
+      body
+    });
+  };
+    const [countryValue, setCountryValue] =useState('')
+    const options = useMemo(() => countryList().getData(), [])
+    const [phoneValue, setphoneValue] = useState()
+    const [allStates, setAllStates] = useState([])
+    const [allCities, setAllCities] = useState([])
+    const { data: session } = useSession() 
+
+  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.name.value,
+        location: event.target.location.value,
+        expiry: event.target.expiry.value,
+        status: event.target.status.value,
+        annual: event.target.annual.value,
+        toddlers: event.target.toddlers.value,
+        address: event.target.address.value,
+        interakto: event.target.interakto.value,
+        email: event.target.email.value,
+        pin: event.target.pin.value,
+        // phone: event.target.phone.value,
+        // email: event.target.email.value,
+
+      }
+      const JSONdata = JSON.stringify(data)
+      console.log(data)
+      const endpoint = '/api/addSchool-test'
+      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`)
+    }
+    if (session) {
+      return (
+        <main> 
+            <div>
+            <NavBar />
+            <section className='container mx-auto px-4 my-16 lg:px-28 xl:px-56 2xl:px-96'>
+                <div className='flex flex-col justify-center place-items-center bg-[#FFF6F2] pt-6 pb-20 rounded-tl-[50px] rounded-br-[50px]'>
+                    <div className='flex flex-col justify-center place-items-center'>
+                        <img src="/img/1.svg" alt="" />
+                        <p className='text-2xl md:text-4xl font-bold underline decoration-4 decoration-[#FE4501] pb-10'>School Registration Form</p>
+                    </div>
+                    <form onSubmit={handleSubmit} className='w-full px-6 md:px-20'>
+                      <div className='flex flex-col'>
+                        <label htmlFor="name">Name</label>
+                        <input type="text" name="name" id="name" className='p-2 border-2 rounded-full' />
+                      </div>
+                      <div className='flex flex-col'>
+                        <label htmlFor="location">Location</label>
+                        <input type="text" name="location" id="location" className='p-2 border-2 rounded-full' />
+                      </div>
+                      <div className='flex flex-col'>
+                        <label htmlFor="expiry">Expiry</label>
+                        <input type="date" name="expiry" id="expiry" className='p-2 border-2 rounded-full'/>
+                      </div>
+                      <div className='flex flex-col'>
+                        <label htmlFor="status">Status</label>
+                        <input type="text" name="status" id="status" className='p-2 border-2 rounded-full'/>
+                      </div>
+                      <div className='flex flex-col'>
+                        <label htmlFor="toddlers">Toddlers</label>
+                        <input type="text" name="toddlers" id="toddlers" className='p-2 border-2 rounded-full'/>
+                      </div>
+                      <div className='flex flex-col'>
+                        <label htmlFor="address">Address</label>
+                        <input type="text" name="address" id="address" className='p-2 border-2 rounded-full'/>
+                      </div>
+                      <div className='flex flex-col'>
+                        <label htmlFor="annual">annual</label>
+                        <input type="text" name="annual" id="annual" className='p-2 border-2 rounded-full'/>
+                      </div>
+                      <div className='flex flex-col'>
+                        <label htmlFor="interakto">Interakto</label>
+                        <input type="text" name="interakto" id="interakto" className='p-2 border-2 rounded-full'/>
+                      </div>
+                      <div className='flex flex-col'>
+                        <label htmlFor="email">Email</label>
+                        <input type="email" name="email" id="email" className='p-2 border-2 rounded-full'/>
+                      </div>
+                      <div className='flex flex-col'>
+                        <label htmlFor="pin">Pin Code</label>
+                        <input type="text" name="pin" id="pin" className='p-2 border-2 rounded-full'/>
+                      </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 className='flex flex-col'>
+                          <label htmlFor="file">Files Upload</label>
+                          <input type="file" name="file" id="agreement" className='p-2 border-2 rounded-full'/>
+                      </div>
+                </div>
+            </section>
+            </div>
+        </main>
+    )
+    }
+    return (
+      <>
+        Not signed in <br />
+        <button onClick={() => signIn()}>Sign in</button>
+      </>
+    )
+    
+  }

src/pages/add-school-form.jsx

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

src/pages/add-user-form.jsx

@@ -1,5 +1,6 @@
 // https://management.beanstalkedu.com/items/school
 // import React from 'react';
+import { signIn, signOut, useSession } from 'next-auth/react'
 import {useId, useState, useEffect, useMemo} from 'react';
 import Select from 'react-select'
 import countryList from 'react-select-country-list'
@@ -29,6 +30,7 @@ export default function addUserForm() {
   const options = useMemo(() => countryList().getData(), [])
   const [phoneValue, setphoneValue] = useState()
   let [individualValue = true, setindividualValue] = useState()
+  const { data: session } = useSession()
 
   const [allStates, setAllStates] = useState([])
   const [allCities, setAllCities] = useState([])
@@ -154,6 +156,7 @@ export default function addUserForm() {
     // setLanguage(newAllLang)
     setCurrentType(e.target.value)
   }
+  if (session) {
     return (
       <main>
         <div>
@@ -176,7 +179,7 @@ export default function addUserForm() {
                   </select>
                 </div>
                 <div className='flex flex-col w-full'>
-                <label htmlFor="name" className='text-xl font-bold'> Name</label>
+                  <label htmlFor="name" className='text-xl font-bold'>Name</label>
                   <input type="text" name="uname"
                          className=' border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]'
                          placeholder='Enter your Name'/>
@@ -383,4 +386,12 @@ export default function addUserForm() {
         </div>
       </main>
     )
+  }
+  return (
+    <>
+      Not signed in <br />
+      <button onClick={() => signIn()}>Sign in</button>
+    </>
+  )
+  
 }

src/pages/api/addSchool-test.js

@@ -0,0 +1,34 @@
+export default function handler(req, res) {
+    const sqlite3 = require('sqlite3').verbose();
+  
+    // console.log(req.body)
+    // Open a new database connection
+    let name, location, expiry, status, toddlers, address, annual, interakto, email, pin  = "";
+  
+    // if(req.body.name)  name =req.body.name;
+    // if(req.body.status)  status =req.body.status;
+    // if(req.body.status)  status ="published";
+    if(req.body.name)       name =req.body.name;
+    if(req.body.location)   location =req.body.location;
+    if(req.body.expiry)     expiry =req.body.expiry;
+    if(req.body.status)     status =req.body.status;
+    if(req.body.toddlers)   toddlers =req.body.toddlers;
+    if(req.body.address)    address =req.body.address;
+    if(req.body.annual)     annual =req.body.annual;
+    if(req.body.state)  state =req.body.state;
+    if(req.body.interakto)  interakto =req.body.interakto;
+    if(req.body.email)  email =req.body.email;
+    if(req.body.pin)  pin =req.body.pin;
+    // if(req.body.usage_expiry)  usage_expiry =req.body.usage_expiry;
+    console.log(address)
+    const db = new sqlite3.Database('data/appSchool-test.db');
+    db.run(`INSERT INTO school (sname, city, usage_expiry, status, toddlers, address, annual, interakto, email, pin ) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ? )`, [ name, location, expiry, status, toddlers, address, annual, interakto, email, pin ],
+    function(err) {
+        if (err) {
+          return console.log(err.message);
+        }
+      }
+    ); 
+    db.close();
+    res.status(200).json({ msg: 'ok' });
+  }

src/pages/api/fileUpload-test.js

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

src/pages/api/fileUpload.js

@@ -10,15 +10,15 @@ export const config = {
 const post = async (req, res) => {
   const form = new formidable.IncomingForm();
   form.parse(req, async function (err, fields, files) {
-    // console.log(fields)
+    console.log(fields)
     await saveFile(files.file,fields.fName? fields.fName:files.file.originalFilename );
     return res.status(201).send("");
   });
 };
 
 const saveFile = async (file,fName) => {
-    // console.log(file.filepath)
+    console.log(file.filepath)
-    // console.log(fName)
+    console.log(fName)
   const data = fs.readFileSync(file.filepath);
   fs.writeFileSync(`./public/uploaded/${fName}`, data);
   fs.unlinkSync(file.filepath);

src/pages/api/listSchlools-test.js

@@ -0,0 +1,73 @@
+import csv from 'csv-parser';
+import fs from 'fs';
+import sqlite3 from 'sqlite3';
+
+export default function handler(req,res) {
+
+console.log(req.body.school)
+// const {
+//   query: { name, keyword },
+//   method,
+// } = req;
+// console.log(name, keyword, method);
+
+  const DB_NAME = 'data/appSchool-test.db';
+  const TABLE_NAME = 'school';
+  
+  // Open a connection to the SQLite database
+  const db = new sqlite3.Database(DB_NAME);
+  
+  const query = `SELECT * FROM ${TABLE_NAME}`;
+
+  function getAllRows(tableName) {
+    return new Promise((resolve, reject) => {
+      const sql = `SELECT * FROM ${tableName}`;
+      db.all(sql, [], (err, rows) => {
+        if (err) {
+          reject(err);
+          return;
+        }
+        const data = rows;
+        resolve(data);
+      });
+    });
+  };
+  async function doSomething() {
+    try {
+      const returnData = await getAllRows(TABLE_NAME);
+      res.setHeader('Content-Type', 'application/json')
+      res.status(200).json(returnData)
+    //   console.log(data);
+    } catch (err) {
+      console.error(err);
+    }
+  }
+  
+  doSomething();
+//   const returnData = getAllRows('user');
+//   console.log(getAllRows('user'));
+//   const returnData= db.run('SELECT * FROM user');
+
+//   fs.createReadStream('data/user.csv')
+//   .pipe(csv())
+//   .on('data', (data) => {
+//     const values = Object.values(data);
+//     const placeholders = values.map(() => '?').join(',');
+//     const sql = `INSERT INTO ${TABLE_NAME} (${Object.keys(data).join(',')}) VALUES (${placeholders})`;
+//     db.run(sql, values, (err) => {
+//       if (err) {
+//         console.error(err);
+//       }
+//     });
+//   })
+//   .on('end', () => {
+//     console.log(`Data inserted successfully into table ${TABLE_NAME}`);
+
+//     // Close the database connection
+//     db.close();
+//   });
+
+
+  
+}
+

src/pages/api/listUsers copy.js

@@ -0,0 +1,91 @@
+import csv from 'csv-parser';
+import fs from 'fs';
+import sqlite3 from 'sqlite3';
+
+export default function handler(req,res) {
+
+console.log(req.body.school)
+// const {
+//   query: { name, keyword },
+//   method,
+// } = req;
+// console.log(name, keyword, method);
+
+  const DB_NAME = 'data/appUser.db';
+  const TABLE_NAME = 'user';
+  
+  // Open a connection to the SQLite database
+  const db = new sqlite3.Database(DB_NAME);
+  
+  const query = `SELECT * FROM ${TABLE_NAME}`;
+
+  function getAllRows(tableName) {
+    return new Promise((resolve, reject) => {
+
+      db.get(`SELECT COUNT(*) AS count FROM ${tableName}`, (err, row) => {
+        if (err) {
+          console.error(err.message);
+          return;
+        }
+        
+        // Access the row count
+        const rowCount = row.count;
+        // console.log(`Row count: ${rowCount}`);
+        const pageNo=0;
+        const perPage=5;
+        let noOfPage= Math.floor(rowCount/perPage); if((rowCount % perPage) !=0) noOfPage++;
+        console.log(`noOfPage: ${noOfPage}`);
+        const offset=(rowCount-5*perPage*pageNo)-1;
+        const sql = `SELECT * FROM ${tableName} ORDER BY id DESC LIMIT 5 OFFSET ${rowCount-1}`;
+          db.all(sql, [], (err, rows) => {
+            if (err) {
+              reject(err);
+              return;
+            }
+            const data = rows;
+            resolve(data);
+          });
+      });
+      
+      
+    });
+  };
+  async function doSomething() {
+    try {
+      const returnData = await getAllRows('user');
+      res.setHeader('Content-Type', 'application/json')
+      res.status(200).json(returnData)
+    //   console.log(data);
+    } catch (err) {
+      console.error(err);
+    }
+  }
+  
+  doSomething();
+//   const returnData = getAllRows('user');
+//   console.log(getAllRows('user'));
+//   const returnData= db.run('SELECT * FROM user');
+
+//   fs.createReadStream('data/user.csv')
+//   .pipe(csv())
+//   .on('data', (data) => {
+//     const values = Object.values(data);
+//     const placeholders = values.map(() => '?').join(',');
+//     const sql = `INSERT INTO ${TABLE_NAME} (${Object.keys(data).join(',')}) VALUES (${placeholders})`;
+//     db.run(sql, values, (err) => {
+//       if (err) {
+//         console.error(err);
+//       }
+//     });
+//   })
+//   .on('end', () => {
+//     console.log(`Data inserted successfully into table ${TABLE_NAME}`);
+
+//     // Close the database connection
+//     db.close();
+//   });
+
+
+  
+}
+

src/pages/api/listUsers.js

@@ -4,7 +4,9 @@ import sqlite3 from 'sqlite3';
 
 export default function handler(req,res) {
 
-console.log(req.body.school)
+  // const query = req.query;
+  const { page, limit } = req.query;
+console.log(page)
 // const {
 //   query: { name, keyword },
 //   method,
@@ -19,22 +21,40 @@ console.log(req.body.school)
   
   const query = `SELECT * FROM ${TABLE_NAME}`;
 
-  function getAllRows(tableName) {
+  function getAllRows(tableName, pageNumber, pageSize) {
+    const offset = (pageNumber - 1) * pageSize;
+    const sql = `SELECT * FROM ${tableName} LIMIT ${pageSize} OFFSET ${offset}`;
+  
     return new Promise((resolve, reject) => {
-      const sql = `SELECT * FROM ${tableName}`;
       db.all(sql, [], (err, rows) => {
         if (err) {
           reject(err);
           return;
         }
-        const data = rows;
+        db.get(`SELECT COUNT(*) AS count FROM ${tableName}`, (err, row) => {
+          if (err) {
+            console.error(err.message);
+            return;
+          }
+          
+          // Access the row count
+          const rowCount = row.count;
+          console.log(`Row count: ${rowCount}`);
+          const maxPageNumber = Math.ceil(rowCount / pageSize);
+          const pages = Array.from({ length: maxPageNumber }, (_, index) => index + 1);
+          let tData={data:rows,maxPageNumber:pages}
+        const data = tData;
         resolve(data);
         });
+        // let tData={data:rows,page:7}
+        // const data = tData;
+        // resolve(data);
+      });
     });
   };
   async function doSomething() {
     try {
-      const returnData = await getAllRows('user');
+      const returnData = await getAllRows('user',page,limit);
       res.setHeader('Content-Type', 'application/json')
       res.status(200).json(returnData)
     //   console.log(data);

src/pages/api/searchUser.js

@@ -0,0 +1,79 @@
+import csv from 'csv-parser';
+import fs from 'fs';
+import sqlite3 from 'sqlite3';
+
+export default function handler(req,res) {
+
+  // const query = req.query;
+  const { searchQry, limit } = req.query;
+  console.log(searchQry)
+// const {
+//   query: { name, keyword },
+//   method,
+// } = req;
+// console.log(name, keyword, method);
+
+  const DB_NAME = 'data/appUser.db';
+  const TABLE_NAME = 'user';
+  
+  // Open a connection to the SQLite database
+  const db = new sqlite3.Database(DB_NAME); 
+  
+  const query = `SELECT * FROM ${TABLE_NAME}`;
+
+  function getAllRows(tableName, searchQry, pageSize) {
+    const sql = `SELECT * FROM ${tableName} WHERE uname LIKE '%${searchQry}%'`;
+  
+    return new Promise((resolve, reject) => {
+      db.all(sql, [], (err, rows) => {
+        if (err) {
+          reject(err);
+          return;
+        }
+
+        resolve(rows);
+        });
+        // let tData={data:rows,page:7}
+        // const data = tData;
+        // resolve(data);
+      });
+  };
+  async function doSomething() {
+    try {
+      const returnData = await getAllRows('user',searchQry,limit);
+      res.setHeader('Content-Type', 'application/json')
+      res.status(200).json(returnData)
+    //   console.log(data);
+    } catch (err) {
+      console.error(err);
+    }
+  }
+  
+  doSomething();
+//   const returnData = getAllRows('user');
+//   console.log(getAllRows('user'));
+//   const returnData= db.run('SELECT * FROM user');
+
+//   fs.createReadStream('data/user.csv')
+//   .pipe(csv())
+//   .on('data', (data) => {
+//     const values = Object.values(data);
+//     const placeholders = values.map(() => '?').join(',');
+//     const sql = `INSERT INTO ${TABLE_NAME} (${Object.keys(data).join(',')}) VALUES (${placeholders})`;
+//     db.run(sql, values, (err) => {
+//       if (err) {
+//         console.error(err);
+//       }
+//     });
+//   })
+//   .on('end', () => {
+//     console.log(`Data inserted successfully into table ${TABLE_NAME}`);
+
+//     // Close the database connection
+//     db.close();
+//   });
+
+
+  
+}
+

src/pages/edit-school.jsx

@@ -1,3 +1,4 @@
+import { signIn, signOut, useSession } from 'next-auth/react'
 import {useId, useState, useEffect, useMemo} from 'react';
 import 'react-phone-number-input/style.css'
 import NavBar from '../components/NavBar';
@@ -6,6 +7,7 @@ import Link from 'next/link'
 
 
 export default function EditSchool() {
+  const { data: session } = useSession()
   const router = useRouter();
   const uploadToServer = async (event) => {
     const body = new FormData();
@@ -15,6 +17,8 @@ export default function EditSchool() {
       method: "POST",
       body
     });
+   
+    
   };
   const uploadCsv = async (event) => {
     // alert('p')
@@ -78,7 +82,7 @@ export default function EditSchool() {
     alert(`User data updated`)
 
   }
-  
+  if (session) {
     return (
       <main>
         <div>
@@ -164,6 +168,7 @@ export default function EditSchool() {
             <div className='flex flex-col w-full'>
               <label htmlFor="agreement_documents" className='text-xl font-bold'>Upload Agreement Document&apos;s</label>
               <input  id="agreement" onChange={uploadToServer} type="file"  name="agreement_documents"  className=' bg-white border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]' />
+             
               <div className='flex justify-end pt-2'>
                   <button className=' bg-[#FE4501] px-4 py-1.5 rounded-lg text-white'>Download Agreement</button>
               </div>
@@ -175,6 +180,15 @@ export default function EditSchool() {
         </div>
       </main>
     )
+  }
+  return (
+    <>
+      Not signed in <br />
+      <button onClick={() => signIn()}>Sign in</button>
+    </>
+  )
+  
+  
 }
 
 

src/pages/edit-user.jsx

@@ -1,3 +1,4 @@
+import { signIn, signOut, useSession } from 'next-auth/react'
 import {useId, useState, useEffect, useMemo} from 'react';
 import 'react-phone-number-input/style.css'
 import NavBar from '../components/NavBar';
@@ -7,6 +8,7 @@ export default function EditUser() {
   const router = useRouter();
 
   const [user, setUser] = useState({});
+  const { data: session } = useSession()
     
   useEffect(()=>{
     if(router.query.user && router.query.user>0 ){
@@ -67,7 +69,7 @@ export default function EditUser() {
     alert(`User data updated`)
 
   }
-  
+  if (session)  {
     return (
       <main>
         <div>
@@ -165,4 +167,12 @@ export default function EditUser() {
         </div>
       </main>
     )
+  }
+  return (
+    <>
+      Not signed in <br />
+      <button onClick={() => signIn()}>Sign in</button>
+    </>
+  )
+  
 }

src/pages/edit-user4.jsx

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

src/pages/file-upload.jsx

@@ -0,0 +1,91 @@
+import { signIn, signOut, useSession } from 'next-auth/react'
+import {useId, useState, useEffect, useMemo} from 'react';
+import { useRouter } from 'next/router'
+export default function fileUpload() {
+    const [school, setSchool] = useState([]);
+    const { data: session} = useSession()
+    const fetchData = async () => {
+    const response = await fetch("/api/listSchlools-test");
+    const data = await response.json();
+    
+    return setSchool(data);
+  }
+//   console.log(school)
+  useEffect(() => {
+    fetchData();
+  },[])
+    const uploadToServer = async (event) => {
+        const body = new FormData();
+        body.append("file", agreement.files[0]);
+        body.append("fName", `${+new Date()}.pdf`);
+        const response = await fetch("/api/fileUpload-test", {
+          method: "POST",
+          body
+        });
+      };
+      function fInput() {
+        let x = document.getElementById('myInput').value
+        document.getElementById('print').innerHTML = "You Typed :-" + x;
+      }
+      var dt = Date();
+      var unix = Math.floor(+new Date()/1000);
+      function myFunction() {
+        document.getElementById('demo').innerHTML = "Time :-"+dt+ " & Unix Time :-"+unix;
+        document.getElementById('demo').style.color = "red"
+      }
+    //   console.log(+new Date())
+    //   console.log(Math.floor(Date.now() / 1000))
+      return (
+        <main>
+            <div>
+                <section className='container mx-auto px-4'>
+                  <button onClick={myFunction}>Click</button>
+                  <p id='demo'></p>
+                    <div className=' pt-24 flex flex-col justify-center place-items-center w-full'>
+                        <input type="file" id='agreement' onChange={uploadToServer} className='border-2 border-[#7c4c23] p-2 rounded-lg' />
+                        <label htmlFor="">School Name</label>
+                        <input type="text"  className='border-2 border-[#7c4c23] p-2 rounded-lg' id='myInput' onInput={fInput} />
+                        <p id='print'></p>
+                        <input type="text" name="" id="print" className='border-2' />
+                    </div>
+                </section>
+                <section className='container mx-auto px-4'>
+                    <div className='flex 2xl:justify-center overflow-x-scroll '>
+                        <table className='border-2'>
+                            <thead className='border-2'>
+                                <tr className='bg-gray-300'>
+                                    <th className='border-2'>ID</th>
+                                    <th className='border-2'>School Name</th>
+                                    <th className='border-2'>Toddlers</th>
+                                    <th className='border-2'>City</th>
+                                    <th>Input</th>
+                                </tr>
+                                
+                            </thead>
+                            
+                                  <tbody>
+                                  {school.map(data =>
+                                      <tr key={data.id} className='text-center'>
+                                        <td className='border-2 p-2'>{data.id}</td>
+                                        <td className='border-2'>{data.sname}</td>
+                                        <td className='border-2'>{data.toddlers}</td>
+                                        <td className='border-2'>{data.city}</td>
+                                        <td>
+                                          <div>
+                                            <label htmlFor="">Name</label>&nbsp;
+                                            <input type="text" className='border-2 p-2 rounded-lg'/>&nbsp;
+                                            <button className='bg-orange-500 px-4 py-1.5 rounded-lg text-white'>Submit</button>
+                                          </div>
+                                        </td>
+                                      </tr> 
+                                      )}                               
+                                </tbody> 
+                        </table>
+                      </div>
+                      
+                </section>
+
+            </div>
+        </main>
+      )
+}

src/pages/index.jsx

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

src/pages/login.jsx

@@ -1,12 +1,28 @@
 import { useState } from 'react';
-import { signIn, getCsrfToken } from 'next-auth/react';
+import { signIn, signOut, getCsrfToken, useSession } from 'next-auth/react';
 import { Formik, Field, ErrorMessage } from 'formik';
 import * as Yup from 'yup';
 import { useRouter } from 'next/router';
+import Link from 'next/link'
+
 
 export default function SignIn({ csrfToken }) {
   const router = useRouter();
   const [error, setError] = useState(null);
+  const { data: session } = useSession()
+  // console.log(session)
+    if (session) {
+      return (
+        <>
+        <br /><br />
+          You are already Signed in, click on continue
+          <br />
+          <Link href="/">Continue...</Link>
+          <br /><br />
+          or : <button onClick={() => signOut()}>Sign out</button>
+        </>
+      )
+    }
 
   return (
     <>
@@ -38,7 +54,7 @@ export default function SignIn({ csrfToken }) {
         {(formik) => (
           <form onSubmit={formik.handleSubmit}>
             <div 
-            className="bg-red-400 flex flex-col items-center 
+            className="bg-[#FFF6F2] flex flex-col items-center 
             justify-center min-h-screen py-2 shadow-lg">
               <div className="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
                 <input
@@ -61,7 +77,7 @@ export default function SignIn({ csrfToken }) {
                       aria-label="enter your email"
                       aria-required="true"
                       type="text"
-                      className="w-full bg-gray-300 text-gray-900 mt-2 p-3"
+                      className="w-full focus:bg-gray-300 text-gray-900 mt-2 p-3 border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]"
                     />
                   </label>
 
@@ -72,7 +88,7 @@ export default function SignIn({ csrfToken }) {
                 <div className="mb-6">
                   <label
                     htmlFor="password"
-                    className="uppercase text-sm text-gray-600 font-bold"
+                    className="uppercase text-sm text-gray-600 font-bold "
                   >
                     password
                     <Field
@@ -80,7 +96,7 @@ export default function SignIn({ csrfToken }) {
                       aria-label="enter your password"
                       aria-required="true"
                       type="password"
-                      className="w-full bg-gray-300 text-gray-900 mt-2 p-3"
+                      className="w-full bg-gray-300 text-gray-900 mt-2 p-3 border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]"
                     />
                   </label>
 
@@ -91,7 +107,7 @@ export default function SignIn({ csrfToken }) {
                 <div className="flex items-center justify-center">
                   <button
                     type="submit"
-                    className="bg-green-400 text-gray-100 p-3 rounded-lg w-full"
+                    className="bg-[#FE4501] text-white p-3 rounded-lg w-full"
                   >
                     {formik.isSubmitting ? 'Please wait...' : 'Sign In'}
                   </button>

src/pages/school-list/index.jsx

@@ -1,4 +1,5 @@
 // import SchoolEditForm from '../../components/SchoolEditForm'
+import { signIn, signOut, useSession } from 'next-auth/react'
 import React, { useEffect, useState } from "react";
 import Image from 'next/image'
 import { Inter } from 'next/font/google'
@@ -6,6 +7,7 @@ const inter = Inter({ subsets: ['latin'] })
 import NavBar from '../../components/NavBar'
 export default function Modal() {
     const [school, setSchool] = useState([]);
+    const { data: session} = useSession()
 const fetchData = async () => {
     const response = await fetch("/api/listSchlools");
     const data = await response.json();
@@ -16,7 +18,7 @@ const fetchData = async () => {
   useEffect(() => {
     fetchData();
   },[])
-
+if (session) {
     return (
         <main>
             <div>
@@ -70,5 +72,14 @@ const fetchData = async () => {
             </div>
         </main>
       )
+}
+{/* <LogOutPage /> */}
+  return (
+    
+    <>
+      Not signed in <br />
+      <button onClick={() => signIn()}>Sign in</button>
+    </>
+  )
 
 }

src/pages/school-list/index22.jsx

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

src/pages/school-list/schoollist-2.jsx

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

src/pages/user-list.jsx

@@ -1,34 +1,63 @@
+import { signIn, signOut, useSession } from 'next-auth/react'
 import React, { useEffect, useState } from "react";
+import { useRouter } from 'next/router'
+
 import Link from 'next/link'
 import NavBar from '../components/NavBar'
-export default function Modal() {
+export default function UserList() {
+  const router = useRouter();
+  const { data: session } = useSession()
   const [user, setUser] = useState([]);
-const fetchData = async () => {
+  const [maxPageNumber, setMaxPageNumber] = useState([]);
-    const response = await fetch("/api/listUsers");
+  const fetchData = async (page) => {
+    const response = await fetch("/api/listUsers?page="+page+"&limit=10");
     const data = await response.json();
-    // console.log(data)
+    setMaxPageNumber(data.maxPageNumber);
-    return setUser(data);
+    return setUser(data.data);
-  }
+  };
+
+
 //   console.log(user)
+useEffect(()=>{  if(!router.isReady) return;  fetchData(4); }, [router.isReady]);
 
-  useEffect(() => {
+  // useEffect(() => {
-    fetchData();
+  //   fetchData();
-  },[])
+  // },[])
-
+if(session) {
   return (
     <main>
         <div>
             <NavBar />
             <section className='container mx-auto px-4 mt-16'>
               <div className="flex flex-row justify-end bg-[#FFF6F2] p-2 gap-x-4 border-x-2 border-t-2 rounded-t-xl">
+                  <nav aria-label="Page navigation example">
+                    <ul className="inline-flex items-center -space-x-px">
+                      {/* <li>
+                        <a href="#" className="block px-3 py-2 ml-0 leading-tight text-gray-500 bg-white border border-gray-300 rounded-l-lg hover:bg-gray-100 hover:text-gray-700 ">
+                          <span className="sr-only">Previous</span>
+                          &lt;
+                        </a>
+                      </li> */}
+                      {maxPageNumber.map((number) => (
+                          <button key={number} onClick={() => fetchData(number)}  className="px-3 py-2 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 ">{number} </button>
+                        ))}
+
+                      {/* <li>
+                        <a href="?page=6" className="block px-3 py-2 leading-tight text-gray-500 bg-white border border-gray-300 rounded-r-lg hover:bg-gray-100 hover:text-gray-700 ">
+                          <span className="sr-only">Next</span>
+                          &gt;
+                        </a>
+                      </li> */}
+                    </ul>
+                  </nav>
                   <div className="flex flex-row justify-center place-items-center">
                       <input type="text" className="md:w-32 md:focus:w-96 duration-[1s] border-2 border-[#FE4501] w-full rounded-l-full p-2 focus:outline-none focus:border-[#F2B705] bg-[#FFF6F2] focus:bg-white text-center" placeholder="Search User" />
                       <a href="" className="bg-[#FE4501] rounded-r-full p-2 px-4 border-2 border-[#FE4501] text-white font-bold ">
-                    <svg className="hover:scale-110 active:scale-75 duration-300" width="24px" height="24px" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="#ffffff"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path fill="#ffffff" fill-rule="evenodd" d="M4 9a5 5 0 1110 0A5 5 0 014 9zm5-7a7 7 0 104.2 12.6.999.999 0 00.093.107l3 3a1 1 0 001.414-1.414l-3-3a.999.999 0 00-.107-.093A7 7 0 009 2z"></path> </g></svg>
+                      &#128269;
                       </a>
                   </div>
                   <Link href="/add-user-form" className="inline-flex place-items-center p-2 bg-[#FE4501] text-white font-bold rounded-full whitespace-nowrap"> 
-                <svg className="font-bold" width="25px" height="25px" viewBox="0 0 21 21" xmlns="http://www.w3.org/2000/svg" fill="#ffffff" stroke="#ffffff"><g id="SVGRepo_bgCarrier" stroke-width="2"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g fill="none" fill-rule="evenodd" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" transform="translate(3 2)"> <path d="m7.5.5c1.65685425 0 3 1.34314575 3 3v2c0 1.65685425-1.34314575 3-3 3s-3-1.34314575-3-3v-2c0-1.65685425 1.34314575-3 3-3z"></path> <path d="m14.5 2.5v4"></path> <path d="m16.5 4.5h-4"></path> <path d="m14.5 14.5v-.7281753c0-3.1864098-3.6862915-5.2718247-7-5.2718247s-7 2.0854149-7 5.2718247v.7281753c0 .5522847.44771525 1 1 1h12c.5522847 0 1-.4477153 1-1z"></path> </g> </g></svg>
+                  &#9960;
                       Add User
                   </Link>
               </div> 
@@ -36,12 +65,12 @@ const fetchData = async () => {
                 <table className=" text-center border-2 p-2 w-full">
                         <thead className=''>
                             <tr className='bg-[#FFF6F2] text-[#1D1D1D] text-xl whitespace-nowrap'>
-                                <th className="border-x-2 p-4">Name</th>
+                                <th className="border-x-2 p-4">ID</th>
+                                <th className="border-x-2 p-4">School Name</th>
                                 <th className="border-x-2 p-4">Mobile</th>
                                 <th className="border-x-2 p-4">Email</th>
-                                <th className="border-x-2 p-4">School Name</th>
+                                <th className="border-x-2 p-4">School ID</th>
                                 <th className="border-x-2 p-4">User Type</th>
-                                <th className="border-x-2 p-4">Start Date</th>
                                 <th className="border-x-2 p-4">End Date</th>
                                 <th className="border-x-2 p-4">Action</th>
                             </tr>
@@ -50,27 +79,20 @@ const fetchData = async () => {
                   {user.map
                     (data=> 
                       <tr key={data.id} className="border-b-2 whitespace-normal text-left">
+                          <td className="border-x-2 p-2 text-center">{data.id}</td>
                           <td className="border-x-2 p-2 text-center">{data.uname}</td>
                           <td className="border-x-2 p-2 text-center">{data.phone}</td>
                           <td className="border-x-2 p-2 text-center">{data.email}</td>
                           <td className="border-x-2 p-2 text-center">{data.school}</td>
                           <td className="border-x-2 p-2 text-center">{data.type}</td>
-                                    <td className="border-x-2 p-2 text-center">{data.start_date}</td>
                           <td className="border-x-2 p-2 text-center">{data.end_date}</td>
                           <td>
                               <div className="flex flex-row justify-center place-items-center">
                                   <div className="flex justify-center">
                                       <a href={'/edit-user/?user='+data.id} className="px-2 py-1 rounded-md">
-                                                    <svg width="35px" height="35px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="#166435"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path opacity="0.15" d="M8 16H12L18 10L14 6L8 12V16Z" fill="#166435"></path> <path d="M14 6L8 12V16H12L18 10M14 6L17 3L21 7L18 10M14 6L18 10M10 4L4 4L4 20L20 20V14" stroke="#166435" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg>
+                                      &#9998;
-                                                    {/* <p className="text-[16px] text-green-800">Edit</p> */}
                                       </a>
                                   </div>
-                                            <div className="flex justify-center">
-                                                <button className=" text-white px-2 py-1 rounded-md">
-                                                    <svg width="35px" height="35px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="#991b1b"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M10 12V17" stroke="#991b1b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M14 12V17" stroke="#991b1b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M4 7H20" stroke="#991b1b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M6 10V18C6 19.6569 7.34315 21 9 21H15C16.6569 21 18 19.6569 18 18V10" stroke="#991b1b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M9 5C9 3.89543 9.89543 3 11 3H13C14.1046 3 15 3.89543 15 5V7H9V5Z" stroke="#991b1b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg>
-                                                    {/* <p className="text-[16px] text-red-800">Delete</p> */}
-                                                </button>
-                                            </div>
                               </div>
                           </td>
                       </tr>
@@ -84,5 +106,13 @@ const fetchData = async () => {
         </div>
     </main>
   )
+}
+  
+  return (
+    <>
+      Not signed in <br />
+      <button onClick={() => signIn()}>Sign in</button>
+    </>
+  )
 
 }