+ {/* ----------Total Tokens Card---------------- */}
+
+
Total Tokens
+
+
{totalTokens}
+
+ +{inQueueTokens} in queue
+
-
- {/* ----------Done Tokens Card---------------- */}
-
-
Done
-
-
{doneTokens}
-
-
- {totalTokens > 0 ? Math.round((doneTokens/totalTokens)*100) : 0}%
- of total
-
-
-
+
+
+
+ {/* ----------Done Tokens Card---------------- */}
+
+
Done
+
+
{doneTokens}
+
+
+ {totalTokens > 0 ? Math.round((doneTokens/totalTokens)*100) : 0}%
+ of total
+
-
- {/* ----------Missed Tokens Card---------------- */}
-
-
Missed Tokens
-
-
{missedTokensCount}
-
- {missedTokensCount > 0 ? (
- {missedTokens}
- ) : (
- "All attended"
- )}
-
-
-
+
+
+
+ {/* ----------Missed Tokens Card---------------- */}
+
+
Missed Tokens
+
+
{missedTokensCount}
+
+ {missedTokensCount > 0 ? (
+ {missedTokens}
+ ) : (
+ "All attended"
+ )}
+
-
- {/* ----------Current Token Card---------------- */}
-
-
Current Token
-
-
- {currentToken || "---"}
-
-
- Prev: {previousToken || "---"}
- Next: {nextToken || "---"}
-
+
+
+
+ {/* ----------Current Token Card---------------- */}
+
+
Current Token
+
+
+ {currentToken || "---"}
+
+
+ Prev: {previousToken || "---"}
+ Next: {nextToken || "---"}
-
+
- );
+
+);
}
\ No newline at end of file
diff --git a/src/app/context/DashboardContext.js b/src/app/context/DashboardContext.js
deleted file mode 100644
index e69de29..0000000
diff --git a/src/app/context/ThemeContext.js b/src/app/context/ThemeContext.js
index 789303a..764ecdc 100644
--- a/src/app/context/ThemeContext.js
+++ b/src/app/context/ThemeContext.js
@@ -1,11 +1,11 @@
-// src/context/ThemeContext.js
"use client";
import { createContext, useContext, useState, useEffect } from "react";
const ThemeContext = createContext();
export function ThemeProvider({ children }) {
- const [darkMode, setDarkMode] = useState(false);
+ // Initialize with undefined to detect client-side
+ const [darkMode, setDarkMode] = useState(undefined);
useEffect(() => {
// Check for saved preference or system preference
@@ -14,6 +14,8 @@ export function ThemeProvider({ children }) {
setDarkMode(savedMode === 'true');
} else if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
setDarkMode(true);
+ } else {
+ setDarkMode(false); // Explicitly set light mode if no preference
}
}, []);
diff --git a/src/app/dashboard/page.js b/src/app/dashboard/page.js
index 248ce64..6a80d11 100644
--- a/src/app/dashboard/page.js
+++ b/src/app/dashboard/page.js
@@ -6,9 +6,7 @@ import { useEffect } from "react";
import { useTheme } from "../context/ThemeContext";
import EntriesTable from "../pages/entries/EntriesTable";
-
export default function DashboardPage() {
-
const router = useRouter();
const { isAuthenticated, loading, userRole } = useAuth();
const { darkMode } = useTheme();
@@ -19,12 +17,17 @@ export default function DashboardPage() {
}
}, [isAuthenticated, loading, router]);
- if (loading) {
+ // Handle theme loading state
+ if (darkMode === undefined || loading) {
return (
@@ -37,8 +40,12 @@ export default function DashboardPage() {
}
return (
-
-
-
+
+
+
+
+
);
}
\ No newline at end of file
diff --git a/src/app/pages/SingleBooking/page.js b/src/app/pages/SingleBooking/page.js
index 072c920..2ca07e8 100644
--- a/src/app/pages/SingleBooking/page.js
+++ b/src/app/pages/SingleBooking/page.js
@@ -2,26 +2,12 @@
import { useState, useEffect } from 'react';
import { useRouter } from 'next/navigation';
-import Head from 'next/head';
-import Preloader from '../../components/partials/preloaders';
+import { useTheme } from "../../context/ThemeContext";
export default function SingleBooking() {
- const [darkMode, setDarkMode] = useState(false);
- const [loaded, setLoaded] = useState(false);
const [name, setName] = useState('');
const router = useRouter();
-
- useEffect(() => {
- const savedDarkMode = JSON.parse(localStorage.getItem('darkMode'));
- if (savedDarkMode !== null) {
- setDarkMode(savedDarkMode);
- }
- setLoaded(true);
- }, []);
-
- useEffect(() => {
- localStorage.setItem('darkMode', JSON.stringify(darkMode));
- }, [darkMode]);
+ const { darkMode } = useTheme();
const handleSubmit = (e) => {
e.preventDefault();
@@ -31,31 +17,47 @@ export default function SingleBooking() {
return;
}
- // Get current date in YYYY-MM-DD format
const today = new Date();
const appointmentDate = today.toISOString().split('T')[0];
-
- // Navigate to confirmation page with name and current date as query params
router.push(`/pages/SingleBooked?name=${encodeURIComponent(name)}&date=${encodeURIComponent(appointmentDate)}`);
};
- if (!loaded) {
- return
;
+ // Handle theme loading state (same as dashboard)
+ if (darkMode === undefined) {
+ return (
+
+ );
}
return (
-
-
-
+
-
Book Appointment
-
Date: {new Date().toLocaleDateString('en-GB')}
+
+ Book Appointment
+
+
+ Date: {new Date().toLocaleDateString('en-GB')}
+
+
-
+
Note: Token booking is available for today's date only.
diff --git a/src/app/pages/done/page.js b/src/app/pages/done/page.js
index 1c1c2a7..ff82380 100644
--- a/src/app/pages/done/page.js
+++ b/src/app/pages/done/page.js
@@ -1,11 +1,40 @@
+"use client";
import TokenTable from "../../components/TokenTable";
+import { useTheme } from "../../context/ThemeContext";
export default function DoneTokensPage() {
- return (
-
-
Done Tokens
-
-
+ const { darkMode } = useTheme();
+ // Handle theme loading state (consistent with dashboard)
+ if (darkMode === undefined) {
+ return (
+
+ );
+ }
+
+ return (
+
+
+
+ Done Tokens
+
+
+
+
);
}
\ No newline at end of file
diff --git a/src/app/pages/missed/page.js b/src/app/pages/missed/page.js
index 9cd4386..af2a502 100644
--- a/src/app/pages/missed/page.js
+++ b/src/app/pages/missed/page.js
@@ -1,10 +1,40 @@
+"use client";
import TokenTable from "../../components/TokenTable";
+import { useTheme } from "../../context/ThemeContext";
export default function MissedTokensPage() {
+ const { darkMode } = useTheme();
+
+ // Handle theme loading state (consistent with dashboard)
+ if (darkMode === undefined) {
+ return (
+
+ );
+ }
+
return (
-
-
Missed Tokens
-
+
+
+
+ Missed Tokens
+
+
+
);
}
\ No newline at end of file