solved build errors

src/app/pages/SingleBooked/page.js

@@ -1,12 +1,13 @@
 "use client";
+import { Suspense } from 'react';
 import { useSearchParams } from 'next/navigation';
 import { useEffect, useState, useRef } from 'react';
-import { databases, ID, Query } from "../../lib/appwrite"; // Added Query import
+import { databases, ID, Query } from "../../lib/appwrite";
 import { DATABASE_ID, COLLECTION_ID } from "../../lib/api";
 import Header from '../../components/partials/header';
 import Link from 'next/link';
 
-export default function SingleBooked() {
+function SingleBookedContent() {
   const searchParams = useSearchParams();
   const nameParam = searchParams.get('name');
   const dateParam = searchParams.get('date');
@@ -20,7 +21,6 @@ export default function SingleBooked() {
 
   const generateTokenNumber = async (date) => {
     try {
-      // Get the highest token number for the date
       const response = await databases.listDocuments(
         DATABASE_ID,
         COLLECTION_ID,
@@ -35,15 +35,16 @@ export default function SingleBooked() {
       return (parseInt(lastToken) + 1).toString().padStart(3, '0');
     } catch (error) {
       console.error("Token generation error:", error);
-      return "001"; // Fallback token number
+      return "001";
     }
   };
 
+  useEffect(() => {
     const createBooking = async () => {
-    if (bookingCreated.current) return; // Prevent duplicate calls
+      if (bookingCreated.current) return;
       
       try {
-      bookingCreated.current = true; // Mark as created
+        bookingCreated.current = true;
         setLoading(true);
         setError(null);
   
@@ -67,13 +68,12 @@ export default function SingleBooked() {
       } catch (error) {
         console.error("Booking error:", error);
         setError(error.message);
-      bookingCreated.current = false; // Reset on error to allow retry
+        bookingCreated.current = false;
       } finally {
         setLoading(false);
       }
     };
   
-  useEffect(() => {
     if (name && appointmentDate) {
       createBooking();
     }
@@ -126,3 +126,11 @@ export default function SingleBooked() {
     </div>
   );
 }
+
+export default function SingleBooked() {
+  return (
+    <Suspense fallback={<div>Loading...</div>}>
+      <SingleBookedContent />
+    </Suspense>
+  );
+}

src/app/pages/SingleBooking/page.js

@@ -93,7 +93,7 @@ export default function SingleBooking() {
               </form>
 
               <div className="mt-6 text-center text-sm text-gray-600 dark:text-gray-300">
-                Note: Token booking is available for today's date only.
+                Note: Token booking is available for today&apos;s date only.
               </div>
             </div>
           </main>

src/app/pages/StaffBooking/page.js

@@ -1,7 +1,7 @@
 'use client';
 import { useState, useEffect } from 'react';
 import { useRouter } from 'next/navigation';
-import { databases,Query } from "../../lib/appwrite";
+import { databases, Query } from "../../lib/appwrite";
 import { DATABASE_ID, COLLECTION_ID } from "../../lib/api";
 import Header from "../../components/partials/header";
 import { useTheme } from "../../context/ThemeContext";
@@ -68,7 +68,7 @@ export default function StaffBooking() {
                         {/* Statistics Overview */}
                         <div className={`mb-8 p-6 rounded-lg ${darkMode ? 'bg-gray-800' : 'bg-gray-50'} border ${darkMode ? 'border-gray-700' : 'border-gray-200'}`}>
                             <h3 className={`text-lg font-medium mb-4 ${darkMode ? 'text-white' : 'text-gray-800'}`}>
-                                Today's Overview
+                                Today&apos;s Overview
                             </h3>
                             <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
                                 <div className={`p-4 rounded-lg text-center ${darkMode ? 'bg-gray-700' : 'bg-white'} border ${darkMode ? 'border-gray-600' : 'border-gray-200'}`}>

src/app/pages/entries/page.js

@@ -145,7 +145,7 @@ export default function EntriesTable() {
         <div className="flex items-center justify-center h-screen">
           <div className="text-center">
             <h1 className="text-2xl font-bold mb-4">Access Denied</h1>
-            <p>You don't have permission to view this page.</p>
+            <p>You don&apos;t have permission to view this page.</p>
           </div>
         </div>
       </div>
@@ -162,8 +162,7 @@ export default function EntriesTable() {
           missedTokens={missedTokens}
         />
       </div>
-      <h1 className="text-2xl font-bold mb-4">Today's Entries</h1>
-
+      <h1 className="text-2xl font-bold mb-4">Today&apos;s Entries</h1>
       <input
         type="text"
         placeholder="Search by token or name"
@@ -196,8 +195,7 @@ export default function EntriesTable() {
                   <td className="p-3 font-mono">{entry.tokenNumber}</td>
                   <td className="p-3">{entry.patientName}</td>
                   <td className="p-3">
-                    <span className={`text-xs px-2 py-1 rounded ${
-                      entry.bookedBy === 'staff' ? 
+                    <span className={`text-xs px-2 py-1 rounded ${entry.bookedBy === 'staff' ?
                         'bg-purple-100 text-purple-800' :
                         'bg-blue-100 text-blue-800'
                       }`}>
@@ -206,8 +204,7 @@ export default function EntriesTable() {
                   </td>
                   <td className="p-3">
                     <span
-                      className={`px-2 py-1 rounded-full text-xs ${
-                        entry.status === "done"
+                      className={`px-2 py-1 rounded-full text-xs ${entry.status === "done"
                           ? "bg-green-100 text-green-800"
                           : entry.status === "booked"
                             ? "bg-yellow-100 text-yellow-800"
@@ -246,8 +243,7 @@ export default function EntriesTable() {
           </table>
 
           {/* Pagination */}
-          <div className={`flex justify-between items-center mt-4 ${
-            darkMode ? 'text-white' : 'text-gray-700'
+          <div className={`flex justify-between items-center mt-4 ${darkMode ? 'text-white' : 'text-gray-700'
             }`}>
             <button
               disabled={currentPage === 1}