Role schoolmanager only access

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'>
-                    <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="/upload-user">Upload User </Link>|
-                      <Link href="/user-list">User List </Link>|
-                      <button onClick={() => signOut()}>Sign out</button>
+                  <div className='flex flex-row  p-2  justify-center whitespace-nowrap'>
+                    <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" 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" 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" 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" className='text-grey-400 hover:bg-blue-200 rounded-lg p-2 pt-1 pb-1 ml-2 mr-2'> User List </Link>
+                      <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.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>
@@ -383,4 +386,12 @@ export default function addUserForm() {
         </div>
       </main>
     )
+  }
+  return (
+    <>
+      Not signed in <br />
+      <button onClick={() => signIn()}>Sign in</button>
+    </>
+  )
+  
 }

src/pages/api/auth/[...nextauth].js

@@ -48,6 +48,7 @@ export const options = {
       if (account && user) {
         var tokenJwt =user.data.access_token
         var roleID = jwt_decode(tokenJwt).role;
+        if(roleID==='f9a8ec44-685c-4b59-8e50-5b49981ba526')
         return {
           ...token,
           roleID:roleID,
@@ -56,6 +57,10 @@ export const options = {
           refreshToken: user.data.refresh_token,
           error: user.data.error,
         };
+        else
+        return {
+          error: user.data.error,
+        };
       }
 
       if (Date.now() < token.expires) {

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/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();
@@ -78,7 +80,7 @@ export default function EditSchool() {
     alert(`User data updated`)
 
   }
-  
+  if (session) {
     return (
       <main>
         <div>
@@ -175,6 +177,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/index.jsx

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

src/pages/login.jsx

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

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/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 response = await fetch("/api/listUsers");
+  const [maxPageNumber, setMaxPageNumber] = useState([]);
+  const fetchData = async (page) => {
+    const response = await fetch("/api/listUsers?page="+page+"&limit=10");
     const data = await response.json();
-    // console.log(data)
-    return setUser(data);
-  }
+    setMaxPageNumber(data.maxPageNumber);
+    return setUser(data.data);
+  };
+
+
 //   console.log(user)
+useEffect(()=>{  if(!router.isReady) return;  fetchData(4); }, [router.isReady]);
 
-  useEffect(() => {
-    fetchData();
-  },[])
-
+  // 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">
+                  <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>
-                                                    {/* <p className="text-[16px] text-green-800">Edit</p> */}
+                                      &#9998;
                                       </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>
+    </>
+  )
 
 }