Atul/PatientProTokenRepository
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: Atul:main
Branches Tags
Atul:main
Atul:dev/ui-changes-atul
Atul:dev/TokenTableCachingIssue
Atul:dev/loading-animation-searchbox-mahima
Atul:dev/dashboard-rbac
Atul:dev/fixTheBugOfHeaderInMultiBooking-sajan
Atul:dev/ui-changes-sajan
Atul:dev/ui-changes-mahima
Atul:dev/ui-work
Atul:feature/token-management
..
compare: Atul:dev/ui-changes-sajan
Branches Tags
Atul:dev/ui-changes-atul
Atul:main
Atul:dev/TokenTableCachingIssue
Atul:dev/loading-animation-searchbox-mahima
Atul:dev/dashboard-rbac
Atul:dev/fixTheBugOfHeaderInMultiBooking-sajan
Atul:dev/ui-changes-sajan
Atul:dev/ui-changes-mahima
Atul:dev/ui-work
Atul:feature/token-management

1 Commits
main ... dev/ui-cha

Author SHA1 Message Date
Atul Gunjal
8c4b5c9f6e Appwrite collection recovered 2025-05-08 11:38:56 +05:30
11 changed files with 371 additions and 556 deletions
Show Stats Expand all files Collapse all files

29
src/app/components/Sidebar.jsx
View File

@ -2,9 +2,9 @@
import { useState, useEffect } from "react"; import { useState, useEffect } from "react";
import Link from "next/link"; import Link from "next/link";
import { usePathname, useRouter } from "next/navigation"; import { usePathname, useRouter } from "next/navigation";
import { FileText } from "lucide-react"; import { FileText, Moon, Sun } from "lucide-react";
import { FaLock, FaChevronDown, FaChevronUp } from "react-icons/fa";
import { useTheme } from "../context/ThemeContext"; import { useTheme } from "../context/ThemeContext";
import { account } from "../lib/appwrite";
const Sidebar = ({ sidebarOpen, setSidebarOpen, isCollapsed }) => { const Sidebar = ({ sidebarOpen, setSidebarOpen, isCollapsed }) => {
const pathname = usePathname(); const pathname = usePathname();
@ -25,17 +25,10 @@ const Sidebar = ({ sidebarOpen, setSidebarOpen, isCollapsed }) => {
setSidebarOpen(false); setSidebarOpen(false);
} }
}; };
const handleLogout = async () => { const handleLogout = () => {
try { localStorage.removeItem("token"); // or account.deleteSession("current") if using Appwrite
await account.deleteSession("current"); router.push("/signup");
localStorage.removeItem("token");
// Force a full page reload to reset all state
window.location.href = "/";
} catch (error) {
console.error("Logout failed:", error);
}
}; };
// ---------------logo handling in dark mode----------------------- // ---------------logo handling in dark mode-----------------------
// Create a separate LogoImage component for better error handling // Create a separate LogoImage component for better error handling
function LogoImage({ darkSrc, lightSrc, darkMode, className, alt }) { function LogoImage({ darkSrc, lightSrc, darkMode, className, alt }) {
@ -94,12 +87,12 @@ const Sidebar = ({ sidebarOpen, setSidebarOpen, isCollapsed }) => {
<Link <Link
href="/dashboard" href="/dashboard"
className={`flex items-center gap-2 p-3 rounded-md text-sm font-semibold transition-colors ${isActive("/dashboard") className={`flex items-center gap-2 p-3 rounded-md text-sm font-semibold transition-colors ${isActive("/dashboard")
? darkMode ? darkMode
? "bg-blue-900 text-blue-200" ? "bg-blue-900 text-blue-200"
: "bg-blue-100 text-blue-800" : "bg-blue-100 text-blue-800"
: darkMode : darkMode
? "hover:bg-gray-700 text-gray-200" ? "hover:bg-gray-700 text-gray-200"
: "hover:bg-gray-200" : "hover:bg-gray-200"
} ${isCollapsed ? 'justify-center' : ''}`} } ${isCollapsed ? 'justify-center' : ''}`}
onClick={closeSidebarOnMobile} onClick={closeSidebarOnMobile}
> >

261
src/app/components/TokenTable.jsx
View File

@ -96,80 +96,84 @@ export default function TokenTable({ statusFilter }) {
// Handle theme loading state // Handle theme loading state
if (darkMode === undefined) { if (darkMode === undefined) {
return (
<div className={`flex items-center justify-center min-h-[200px] ${darkMode ? 'bg-gray-900' : 'bg-white'}`}>
<div className="text-center">
<div
className={`animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-500 mx-auto ${darkMode === true ? "border-gray-100" : "border-blue-400"
}`}
></div>
<p className={`mt-4 text-lg font-semibold ${darkMode === true ? 'text-gray-100' : 'text-gray-900'
}`}>
Loading...
</p>
</div>
</div>
);
}
if (loading) return (
<div className={`text-center py-10 ${darkMode ? 'bg-gray-900' : 'bg-white'}`}>
<div className={`animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 mx-auto ${darkMode ? 'border-gray-100' : 'border-blue-400'
}`}></div>
<p className={`mt-4 text-lg font-semibold ${darkMode ? 'text-gray-100' : 'text-gray-900'
}`}>
Loading...
</p>
</div>
);
if (error) return (
<div className={`p-4 rounded ${darkMode ? 'bg-red-900 text-red-100' : 'bg-red-100 text-red-900'}`}>
Error: {error}
</div>
);
return ( return (
<div className={`transition-colors duration-300 ${darkMode ? 'text-gray-100' : 'text-gray-800'}`}> <div className={`flex items-center justify-center min-h-[200px] ${darkMode ? 'bg-gray-900' : 'bg-white'}`}>
<input <div className="text-center">
type="text" <div className={`animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-500 mx-auto ${
placeholder="Search by token or name" darkMode === true ? 'border-gray-100' : 'border-gray-900'
className={`mb-4 p-2 border rounded w-full max-w-sm transition-colors ${darkMode }`}></div>
<p className={`mt-4 text-lg font-semibold ${
darkMode === true ? 'text-gray-100' : 'text-gray-900'
}`}>
Loading...
</p>
</div>
</div>
);
}
if (loading) return (
<div className={`text-center py-10 ${darkMode ? 'bg-gray-900' : 'bg-white'}`}>
<div className={`animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 mx-auto ${
darkMode ? 'border-gray-100' : 'border-gray-900'
}`}></div>
<p className={`mt-4 text-lg font-semibold ${
darkMode ? 'text-gray-100' : 'text-gray-900'
}`}>
Loading...
</p>
</div>
);
if (error) return (
<div className={`p-4 rounded ${darkMode ? 'bg-red-900 text-red-100' : 'bg-red-100 text-red-900'}`}>
Error: {error}
</div>
);
return (
<div className={`transition-colors duration-300 ${darkMode ? 'text-gray-100' : 'text-gray-800'}`}>
<input
type="text"
placeholder="Search by token or name"
className={`mb-4 p-2 border rounded w-full max-w-sm transition-colors ${
darkMode
? 'bg-gray-800 border-gray-700 text-white placeholder-gray-400 focus:ring-blue-500 focus:border-blue-500' ? 'bg-gray-800 border-gray-700 text-white placeholder-gray-400 focus:ring-blue-500 focus:border-blue-500'
: 'bg-white border-gray-300 placeholder-gray-500 focus:ring-blue-500 focus:border-blue-500' : 'bg-white border-gray-300 placeholder-gray-500 focus:ring-blue-500 focus:border-blue-500'
}`} }`}
value={searchQuery} value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)} onChange={(e) => setSearchQuery(e.target.value)}
/> />
{filteredEntries.length === 0 ? ( {filteredEntries.length === 0 ? (
<div className={`p-4 rounded ${darkMode ? 'bg-gray-800' : 'bg-gray-50'}`}> <div className={`p-4 rounded ${darkMode ? 'bg-gray-800' : 'bg-gray-50'}`}>
No entries found. No entries found.
</div> </div>
) : ( ) : (
<> <>
<div className="overflow-x-auto"> <div className="overflow-x-auto">
<table className="w-full border-collapse"> <table className="w-full border-collapse">
<thead className={darkMode ? "bg-gray-800" : "bg-gray-100"}> <thead className={darkMode ? "bg-gray-800" : "bg-gray-100"}>
<tr> <tr>
<th className={`p-3 text-left ${darkMode ? 'text-gray-200' : 'text-gray-700'}`}>Token</th> <th className={`p-3 text-left ${darkMode ? 'text-gray-200' : 'text-gray-700'}`}>Token</th>
<th className={`p-3 text-left ${darkMode ? 'text-gray-200' : 'text-gray-700'}`}>Name</th> <th className={`p-3 text-left ${darkMode ? 'text-gray-200' : 'text-gray-700'}`}>Name</th>
<th className={`p-3 text-left ${darkMode ? 'text-gray-200' : 'text-gray-700'}`}>Status</th> <th className={`p-3 text-left ${darkMode ? 'text-gray-200' : 'text-gray-700'}`}>Status</th>
<th className={`p-3 text-left ${darkMode ? 'text-gray-200' : 'text-gray-700'}`}>Actions</th> <th className={`p-3 text-left ${darkMode ? 'text-gray-200' : 'text-gray-700'}`}>Actions</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{currentEntries.map((entry) => ( {currentEntries.map((entry) => (
<tr <tr
key={entry.$id} key={entry.$id}
className={`${darkMode ? 'bg-gray-900 border-gray-700 hover:bg-gray-800' : 'bg-white border-gray-200 hover:bg-gray-50'}`} className={`${darkMode ? 'bg-gray-900 border-gray-700 hover:bg-gray-800' : 'bg-white border-gray-200 hover:bg-gray-50'}`}
> >
<td className="p-3 font-mono">{entry.tokenNumber}</td> <td className="p-3 font-mono">{entry.tokenNumber}</td>
<td className="p-3">{entry.patientName}</td> <td className="p-3">{entry.patientName}</td>
<td className="p-3"> <td className="p-3">
<span <span
className={`px-2 py-1 rounded-full text-xs font-semibold ${entry.status === "done" className={`px-2 py-1 rounded-full text-xs font-semibold ${
entry.status === "done"
? darkMode ? darkMode
? "bg-green-900 text-green-100" ? "bg-green-900 text-green-100"
: "bg-green-100 text-green-800" : "bg-green-100 text-green-800"
@ -180,69 +184,74 @@ export default function TokenTable({ statusFilter }) {
: darkMode : darkMode
? "bg-red-900 text-red-100" ? "bg-red-900 text-red-100"
: "bg-red-100 text-red-800" : "bg-red-100 text-red-800"
}`} }`}
> >
{entry.status === "booked" ? "In-Queue" : entry.status} {entry.status === "booked" ? "In-Queue" : entry.status}
</span> </span>
</td> </td>
<td className="p-3 flex gap-2"> <td className="p-3 flex gap-2">
{entry.status === "booked" && ( {entry.status === "booked" && (
<> <>
<button <button
onClick={() => updateStatus(entry.$id, "done")} onClick={() => updateStatus(entry.$id, "done")}
className={`border rounded-full px-2 py-1 text-xs transition-colors ${darkMode className={`border rounded-full px-2 py-1 text-xs transition-colors ${
darkMode
? 'border-green-400 text-green-400 hover:bg-green-900' ? 'border-green-400 text-green-400 hover:bg-green-900'
: 'border-green-600 text-green-600 hover:bg-green-50' : 'border-green-600 text-green-600 hover:bg-green-50'
}`} }`}
> >
Done Done
</button> </button>
<button <button
onClick={() => updateStatus(entry.$id, "missed")} onClick={() => updateStatus(entry.$id, "missed")}
className={`border rounded-full px-2 py-1 text-xs transition-colors ${darkMode className={`border rounded-full px-2 py-1 text-xs transition-colors ${
darkMode
? 'border-red-400 text-red-400 hover:bg-red-900' ? 'border-red-400 text-red-400 hover:bg-red-900'
: 'border-red-600 text-red-600 hover:bg-red-50' : 'border-red-600 text-red-600 hover:bg-red-50'
}`} }`}
> >
Missed Missed
</button> </button>
</> </>
)} )}
</td> </td>
</tr> </tr>
))} ))}
</tbody> </tbody>
</table> </table>
</div> </div>
<div className={`flex justify-between items-center mt-4 p-2 rounded ${darkMode ? 'bg-gray-800' : 'bg-gray-100' <div className={`flex justify-between items-center mt-4 p-2 rounded ${
}`}> darkMode ? 'bg-gray-800' : 'bg-gray-100'
<button }`}>
disabled={currentPage === 1} <button
onClick={() => setCurrentPage((prev) => prev - 1)} disabled={currentPage === 1}
className={`px-3 py-1 border rounded disabled:opacity-50 transition-colors ${darkMode onClick={() => setCurrentPage((prev) => prev - 1)}
className={`px-3 py-1 border rounded disabled:opacity-50 transition-colors ${
darkMode
? 'border-gray-600 hover:bg-gray-700 disabled:hover:bg-transparent' ? 'border-gray-600 hover:bg-gray-700 disabled:hover:bg-transparent'
: 'border-gray-300 hover:bg-gray-200 disabled:hover:bg-transparent' : 'border-gray-300 hover:bg-gray-200 disabled:hover:bg-transparent'
}`} }`}
> >
Previous Previous
</button> </button>
<span className="text-sm"> <span className="text-sm">
Page {currentPage} of {totalPages} Page {currentPage} of {totalPages}
</span> </span>
<button <button
disabled={currentPage === totalPages} disabled={currentPage === totalPages}
onClick={() => setCurrentPage((prev) => prev + 1)} onClick={() => setCurrentPage((prev) => prev + 1)}
className={`px-3 py-1 border rounded disabled:opacity-50 transition-colors ${darkMode className={`px-3 py-1 border rounded disabled:opacity-50 transition-colors ${
darkMode
? 'border-gray-600 hover:bg-gray-700 disabled:hover:bg-transparent' ? 'border-gray-600 hover:bg-gray-700 disabled:hover:bg-transparent'
: 'border-gray-300 hover:bg-gray-200 disabled:hover:bg-transparent' : 'border-gray-300 hover:bg-gray-200 disabled:hover:bg-transparent'
}`} }`}
> >
Next Next
</button> </button>
</div> </div>
</> </>
)} )}
</div> </div>
); );
} }

43
src/app/dashboard/page.js
View File

@ -1,6 +1,5 @@
// src/app/dashboard/page.js
"use client"; "use client";
import { useRouter } from "next/navigation"; import { useRouter } from "next/navigation";
import { useAuth } from "../context/AuthContext"; import { useAuth } from "../context/AuthContext";
import { useEffect } from "react"; import { useEffect } from "react";
@ -23,16 +22,12 @@ export default function DashboardPage() {
return ( return (
<div className="flex items-center justify-center min-h-screen bg-white dark:bg-gray-900"> <div className="flex items-center justify-center min-h-screen bg-white dark:bg-gray-900">
<div className="text-center"> <div className="text-center">
<div <div className={`animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-500 mx-auto ${
className={`animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-500 mx-auto ${ darkMode === true ? 'border-gray-100' : 'border-gray-900'
darkMode === true ? "border-gray-100" : "border-gray-900" }`}></div>
}`} <p className={`mt-4 text-lg font-semibold ${
></div> darkMode === true ? 'text-gray-100' : 'text-gray-900'
<p }`}>
className={`mt-4 text-lg font-semibold ${
darkMode === true ? "text-gray-100" : "text-gray-900"
}`}
>
Loading... Loading...
</p> </p>
</div> </div>
@ -44,28 +39,12 @@ export default function DashboardPage() {
return null; return null;
} }
// Check if user is admin or staff to show entries table
const canViewEntries = userRole === "admin" || userRole === "staff";
return ( return (
<main <main className={`min-h-screen transition-colors duration-300 ${
className={`min-h-screen transition-colors duration-300 ${ darkMode ? 'dark bg-gray-900' : 'bg-white'
darkMode ? "dark bg-gray-900" : "bg-white" }`}>
}`}
>
<div className="p-1"> <div className="p-1">
{canViewEntries ? ( <EntriesTable />
<EntriesTable />
) : (
<div className="text-center p-8">
<h2 className={`text-2xl font-semibold ${darkMode ? "text-white" : "text-gray-800"}`}>
Welcome to your Dashboard
</h2>
<p className={`mt-4 ${darkMode ? "text-gray-300" : "text-gray-600"}`}>
You don't have permission to view entries.
</p>
</div>
)}
</div> </div>
</main> </main>
); );

2
src/app/page.js
View File

@ -90,7 +90,7 @@ export default function AuthPage() {
if (user) { if (user) {
localStorage.setItem("isLoggedIn", "true"); localStorage.setItem("isLoggedIn", "true");
setIsAuthenticated(true); setIsAuthenticated(true);
window.location.href = '/dashboard'; router.push("/dashboard");
} }
} }
} catch (error) { } catch (error) {

2
src/app/pages/MultiBooked/page.js
View File

@ -82,7 +82,7 @@ const createEntries = async () => {
} }
setBookings(updatedBookings); setBookings(updatedBookings);
// alert(`${validBookings.length} tokens created successfully!`); alert(`${validBookings.length} tokens created successfully!`);
} catch (error) { } catch (error) {
console.error("Creation error:", error); console.error("Creation error:", error);
setError(error.message); setError(error.message);

232
src/app/pages/MultiBooking/page.js
View File

@ -1,126 +1,44 @@
"use client"; "use client";
import { useState, useEffect } from "react"; import { useState } from 'react';
import { useRouter } from "next/navigation"; import { useRouter } from 'next/navigation';
import Header from "../../components/partials/header"; import Header from "../../components/partials/header";
import { useTheme } from "../../context/ThemeContext"; import { useTheme } from "../../context/ThemeContext";
import { databases, Query } from "../../lib/appwrite";
import { DATABASE_ID, COLLECTION_ID } from "../../lib/api";
export default function MultiBooking() { export default function MultiBooking() {
const { darkMode } = useTheme(); const { darkMode } = useTheme();
const router = useRouter(); const router = useRouter();
const [appointmentDate, setAppointmentDate] = useState(new Date().toISOString().split('T')[0]);
const [appointmentDate, setAppointmentDate] = useState(
new Date().toISOString().split("T")[0]
);
const [patients, setPatients] = useState( const [patients, setPatients] = useState(
Array(5) Array(5).fill().map((_, i) => ({ id: i+1, name: "" }))
.fill()
.map((_, i) => ({ id: i + 1, name: "" }))
); );
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const [error, setError] = useState(null); const [error, setError] = useState(null);
// Header related states - matching EntriesTable
const [entries, setEntries] = useState([]);
const [currentToken, setCurrentToken] = useState(null);
const [previousToken, setPreviousToken] = useState(null);
const [nextToken, setNextToken] = useState(null);
const [missedTokens, setMissedTokens] = useState("");
const [dataLoading, setDataLoading] = useState(true);
const handleNameChange = (id, value) => { const handleNameChange = (id, value) => {
setPatients(patients.map((p) => (p.id === id ? { ...p, name: value } : p))); setPatients(patients.map(p =>
p.id === id ? { ...p, name: value } : p
));
}; };
// Get entries from database - similar to EntriesTable
const getEntries = async () => {
try {
const today = new Date().toISOString().split("T")[0];
const response = await databases.listDocuments(
DATABASE_ID,
COLLECTION_ID,
[Query.equal("date", today), Query.orderAsc("tokenNumber")],
100
);
return response.documents;
} catch (error) {
console.error("Fetch error:", error);
throw error;
}
};
// Update token information - same as EntriesTable
const updateTokenInfo = (entries) => {
if (entries.length === 0) {
setCurrentToken(null);
setPreviousToken(null);
setNextToken(null);
setMissedTokens("");
return;
}
const currentIndex = entries.findIndex(
(entry) => entry.status === "booked"
);
const current = currentIndex >= 0 ? entries[currentIndex] : null;
setCurrentToken(current?.tokenNumber || null);
setPreviousToken(
currentIndex > 0 ? entries[currentIndex - 1]?.tokenNumber : null
);
setNextToken(
currentIndex < entries.length - 1
? entries[currentIndex + 1]?.tokenNumber
: null
);
const missed = entries
.filter((entry) => entry.status === "missed")
.map((entry) => entry.tokenNumber)
.join(", ");
setMissedTokens(missed || "None");
};
// Load token data - similar to EntriesTable
useEffect(() => {
const loadTokenData = async () => {
try {
setDataLoading(true);
const data = await getEntries();
setEntries(data);
updateTokenInfo(data);
} catch (err) {
console.error("Error loading token data:", err);
} finally {
setDataLoading(false);
}
};
loadTokenData();
}, []);
const handleSubmit = async (e) => { const handleSubmit = async (e) => {
e.preventDefault(); e.preventDefault();
setLoading(true); setLoading(true);
setError(null); setError(null);
try { try {
const validPatients = patients.filter((p) => p.name.trim() !== ""); // Filter out empty names and validate
const validPatients = patients.filter(p => p.name.trim() !== "");
if (validPatients.length === 0) { if (validPatients.length === 0) {
throw new Error("Please enter at least one patient name."); throw new Error("Please enter at least one patient name");
} }
sessionStorage.setItem( // Store in session to use in MultiBooked page
"multiBookingData", sessionStorage.setItem('multiBookingData', JSON.stringify({
JSON.stringify({ date: appointmentDate,
date: appointmentDate, patients: validPatients
patients: validPatients, }));
})
);
router.push("/pages/MultiBooked"); router.push('/pages/MultiBooked');
} catch (error) { } catch (error) {
setError(error.message); setError(error.message);
} finally { } finally {
@ -129,32 +47,23 @@ export default function MultiBooking() {
}; };
const addMorePatients = () => { const addMorePatients = () => {
if (patients.length >= 20) return; const newId = patients.length > 0 ?
const newId = Math.max(...patients.map(p => p.id)) + 1 : 1;
patients.length > 0 ? Math.max(...patients.map((p) => p.id)) + 1 : 1;
setPatients([...patients, { id: newId, name: "" }]); setPatients([...patients, { id: newId, name: "" }]);
}; };
return ( return (
<div <div className={`flex h-screen overflow-hidden ${darkMode ? 'dark bg-gray-900' : 'bg-white'}`}>
className={`flex h-screen overflow-hidden ${ {/* Content Area */}
darkMode ? "dark bg-gray-900" : "bg-white"
}`}
>
<div className="relative flex flex-1 flex-col overflow-x-hidden overflow-y-auto"> <div className="relative flex flex-1 flex-col overflow-x-hidden overflow-y-auto">
{/* Sticky Header */}
<header className="sticky top-0 z-50 bg-white shadow-sm dark:bg-gray-800"> <header className="sticky top-0 z-50 bg-white shadow-sm dark:bg-gray-800">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
{/* Pass the same props to Header as in EntriesTable */} <Header />
<Header
currentToken={currentToken}
previousToken={previousToken}
nextToken={nextToken}
missedTokens={missedTokens}
entries={entries}
/>
</div> </div>
</header> </header>
{/* Main Content */}
<main className="flex-1 overflow-y-auto scrollbar-hide"> <main className="flex-1 overflow-y-auto scrollbar-hide">
<div className="mx-auto max-w-[--breakpoint-2xl] p-4 md:p-6 pt-20"> <div className="mx-auto max-w-[--breakpoint-2xl] p-4 md:p-6 pt-20">
{error && ( {error && (
@ -164,30 +73,18 @@ export default function MultiBooking() {
)} )}
<div className="mb-6"> <div className="mb-6">
<h2 <h2 className={`text-2xl mb-2 ${darkMode ? 'text-white' : 'text-black'}`}>
className={`text-2xl mb-2 ${
darkMode ? "text-white" : "text-black"
}`}
>
Staff Multi-Booking Staff Multi-Booking
</h2> </h2>
<div className="flex items-center"> <div className="flex items-center">
<label <label className={`mr-2 ${darkMode ? 'text-gray-300' : 'text-gray-700'}`}>
className={`mr-2 ${
darkMode ? "text-gray-300" : "text-gray-700"
}`}
>
Date: Date:
</label> </label>
<input <input
type="date" type="date"
value={appointmentDate} value={appointmentDate}
onChange={(e) => setAppointmentDate(e.target.value)} onChange={(e) => setAppointmentDate(e.target.value)}
className={`p-1 border rounded ${ className={`p-1 border rounded ${darkMode ? 'bg-gray-800 text-white border-gray-700' : 'bg-white'}`}
darkMode
? "bg-gray-800 text-white border-gray-700"
: "bg-white"
}`}
/> />
</div> </div>
</div> </div>
@ -196,40 +93,27 @@ export default function MultiBooking() {
<div className="space-y-4 mb-6"> <div className="space-y-4 mb-6">
{patients.map((patient) => ( {patients.map((patient) => (
<div key={patient.id} className="flex items-center gap-3"> <div key={patient.id} className="flex items-center gap-3">
<span <span className={`w-6 text-right ${darkMode ? 'text-gray-300' : 'text-gray-700'}`}>
className={`w-6 text-right ${
darkMode ? "text-gray-300" : "text-gray-700"
}`}
>
{patient.id}. {patient.id}.
</span> </span>
<input <input
type="text" type="text"
value={patient.name} value={patient.name}
onChange={(e) => onChange={(e) => handleNameChange(patient.id, e.target.value)}
handleNameChange(patient.id, e.target.value)
}
placeholder="Patient name" placeholder="Patient name"
className={`flex-1 shadow-theme-xs h-11 rounded-lg border px-4 py-2.5 text-sm focus:outline-none focus:ring-2 ${ className={`flex-1 shadow-theme-xs h-11 rounded-lg border px-4 py-2.5 text-sm focus:outline-none focus:ring-2 ${
darkMode darkMode ?
? "bg-gray-800 border-gray-700 text-white placeholder-gray-500 focus:border-blue-800 focus:ring-blue-800/30" 'bg-gray-800 border-gray-700 text-white placeholder-gray-500 focus:border-blue-800 focus:ring-blue-800/30' :
: "bg-white border-gray-300 text-gray-800 placeholder-gray-400 focus:border-blue-300 focus:ring-blue-500/10" 'bg-white border-gray-300 text-gray-800 placeholder-gray-400 focus:border-blue-300 focus:ring-blue-500/10'
}`} }`}
/> />
{patient.id > 5 && ( {patient.id > 5 && (
<button <button
type="button" type="button"
onClick={() => onClick={() => setPatients(patients.filter(p => p.id !== patient.id))}
setPatients(
patients.filter((p) => p.id !== patient.id)
)
}
className={`p-2 rounded-full ${ className={`p-2 rounded-full ${
darkMode darkMode ? 'text-red-400 hover:bg-gray-700' : 'text-red-500 hover:bg-gray-100'
? "text-red-400 hover:bg-gray-700"
: "text-red-500 hover:bg-gray-100"
}`} }`}
title="Remove"
> >
✕ ✕
</button> </button>
@ -238,27 +122,20 @@ export default function MultiBooking() {
))} ))}
</div> </div>
<div className="flex flex-wrap gap-3 mb-6 items-center"> <div className="flex flex-wrap gap-3 mb-6">
<button <button
type="button" type="button"
onClick={addMorePatients} onClick={addMorePatients}
disabled={patients.length >= 20}
className={`px-4 py-2 rounded-lg text-sm font-medium ${ className={`px-4 py-2 rounded-lg text-sm font-medium ${
darkMode darkMode ?
? "bg-gray-700 text-white hover:bg-gray-600" 'bg-gray-700 text-white hover:bg-gray-600' :
: "bg-gray-200 text-gray-700 hover:bg-gray-300" 'bg-gray-200 text-gray-700 hover:bg-gray-300'
} ${
patients.length >= 20 ? "opacity-50 cursor-not-allowed" : ""
}`} }`}
> >
+ Add More Patients + Add More Patients
</button> </button>
<div <div className="text-sm text-gray-500 dark:text-gray-400 mt-1">
className={`text-sm mt-1 ${ {patients.length} patients entered
darkMode ? "text-gray-400" : "text-gray-600"
}`}
>
{patients.length} / 20 patients entered
</div> </div>
</div> </div>
@ -267,20 +144,18 @@ export default function MultiBooking() {
type="submit" type="submit"
disabled={loading} disabled={loading}
className={`text-center rounded-lg px-5 py-3.5 text-sm font-medium text-white shadow-theme-xs transition w-full ${ className={`text-center rounded-lg px-5 py-3.5 text-sm font-medium text-white shadow-theme-xs transition w-full ${
loading loading ? 'bg-blue-400 cursor-not-allowed' : 'bg-blue-700 hover:bg-blue-600'
? "bg-blue-400 cursor-not-allowed"
: "bg-blue-700 hover:bg-blue-600"
}`} }`}
> >
{loading ? "Processing..." : "Generate Tokens"} {loading ? 'Processing...' : 'Generate Tokens'}
</button> </button>
<button <button
type="button" type="button"
onClick={() => router.push("/entries")} onClick={() => router.push('/entries')}
className={`text-center rounded-lg px-5 py-3.5 text-sm font-medium shadow-theme-xs ring-1 ring-inset transition w-full ${ className={`text-center rounded-lg px-5 py-3.5 text-sm font-medium shadow-theme-xs ring-1 ring-inset transition w-full ${
darkMode darkMode ?
? "bg-gray-800 text-gray-300 ring-gray-700 hover:bg-gray-700" 'bg-gray-800 text-gray-300 ring-gray-700 hover:bg-gray-700' :
: "bg-white text-gray-700 ring-gray-300 hover:bg-gray-50" 'bg-white text-gray-700 ring-gray-300 hover:bg-gray-50'
}`} }`}
> >
View All Entries View All Entries
@ -288,18 +163,11 @@ export default function MultiBooking() {
</div> </div>
</form> </form>
<div <div className={`text-center mt-8 text-sm ${
className={`text-center mt-8 text-sm ${ darkMode ? 'text-gray-400' : 'text-gray-600'
darkMode ? "text-gray-400" : "text-gray-600" }`}>
}`} <p>Staff can book multiple tokens at once. All tokens will be assigned for the same date.</p>
> <p className="mt-1">Minimum 1 patient required. Maximum 20 patients per batch.</p>
<p>
Staff can book multiple tokens at once. All tokens will be
assigned for the same date.
</p>
<p className="mt-1">
Minimum 1 patient required. Maximum 20 patients per batch.
</p>
</div> </div>
</div> </div>
</main> </main>

21
src/app/pages/ResetPasswordPage/page.js
View File

@ -17,24 +17,16 @@ export default function ResetPasswordPage() {
const { darkMode, toggleDarkMode } = useTheme(); const { darkMode, toggleDarkMode } = useTheme();
const [email, setEmail] = useState(""); const [email, setEmail] = useState("");
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const [message, setMessage] = useState({ text: "", type: "" }); // type can be "success" or "error"
const handleSubmit = async (e) => { const handleSubmit = async (e) => {
e.preventDefault(); e.preventDefault();
setLoading(true); setLoading(true);
setMessage({ text: "", type: "" });
try { try {
await account.createRecovery(email, "http://localhost:3000/reset-password"); await account.createRecovery(email, "http://localhost:3000/reset-password");
setMessage({ alert("Password reset link sent to your email!");
text: "Password reset link sent to your email!",
type: "success"
});
} catch (error) { } catch (error) {
console.error("Error:", error); console.error("Error:", error);
setMessage({ alert(`Failed to send reset link: ${error.message}`);
text: `Failed to send reset link: ${error.message}`,
type: "error"
});
} finally { } finally {
setLoading(false); setLoading(false);
} }
@ -61,15 +53,6 @@ export default function ResetPasswordPage() {
<p className="text-sm text-gray-500 dark:text-gray-400"> <p className="text-sm text-gray-500 dark:text-gray-400">
Enter your email address linked to your account, and we&apos;ll send you a link to reset your password. Enter your email address linked to your account, and we&apos;ll send you a link to reset your password.
</p> </p>
{message.text && (
<div className={`mt-4 p-3 rounded-md ${
message.type === "success"
? "bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-200"
: "bg-red-100 text-red-700 dark:bg-red-900 dark:text-red-200"
}`}>
{message.text}
</div>
)}
<form onSubmit={handleSubmit}> <form onSubmit={handleSubmit}>
<div className="space-y-5"> <div className="space-y-5">
<div> <div>

4
src/app/pages/SignInPage/page.js
View File

@ -87,7 +87,7 @@ export default function SignInPage() {
{/* Left Side - Form */} {/* Left Side - Form */}
<div className="w-full flex flex-col justify-center p-6 sm:p-12 lg:p-16"> <div className="w-full flex flex-col justify-center p-6 sm:p-12 lg:p-16">
<div className="w-full max-w-md mx-auto"> <div className="w-full max-w-md mx-auto">
{/* <Link <Link
href="/dashboard" href="/dashboard"
className="inline-flex items-center text-sm text-gray-500 transition-colors hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300 mb-10" className="inline-flex items-center text-sm text-gray-500 transition-colors hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300 mb-10"
> >
@ -108,7 +108,7 @@ export default function SignInPage() {
/> />
</svg> </svg>
Back to dashboard Back to dashboard
</Link> */} </Link>
<div className="mb-8"> <div className="mb-8">
<h1 className="mb-2 text-2xl font-bold text-gray-800 dark:text-white/90 sm:text-3xl"> <h1 className="mb-2 text-2xl font-bold text-gray-800 dark:text-white/90 sm:text-3xl">

4
src/app/pages/SignUpPage/page.js
View File

@ -86,7 +86,7 @@ export default function SignUpPage() {
{/* Form */} {/* Form */}
<div className="flex flex-col flex-1 w-full"> <div className="flex flex-col flex-1 w-full">
<div className="w-full max-w-md pt-5 mx-auto sm:py-10"> <div className="w-full max-w-md pt-5 mx-auto sm:py-10">
{/* <Link <Link
href="/dashboard" href="/dashboard"
className="inline-flex items-center text-sm text-gray-500 transition-colors hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300" className="inline-flex items-center text-sm text-gray-500 transition-colors hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300"
> >
@ -107,7 +107,7 @@ export default function SignUpPage() {
/> />
</svg> </svg>
Back to dashboard Back to dashboard
</Link> */} </Link>
</div> </div>
<div className="flex flex-col justify-center flex-1 w-full max-w-md mx-auto"> <div className="flex flex-col justify-center flex-1 w-full max-w-md mx-auto">
<div className="mb-5 sm:mb-8"> <div className="mb-5 sm:mb-8">

277
src/app/pages/entries/EntriesTable.js
View File

@ -5,7 +5,6 @@ import { DATABASE_ID, COLLECTION_ID } from "../../lib/api";
import Header from "../../components/partials/header"; import Header from "../../components/partials/header";
import { useTheme } from "../../context/ThemeContext"; import { useTheme } from "../../context/ThemeContext";
import { useAuth } from "../../context/AuthContext"; import { useAuth } from "../../context/AuthContext";
import { FaSearch } from 'react-icons/fa';
export default function EntriesTable() { export default function EntriesTable() {
const { userRole } = useAuth(); const { userRole } = useAuth();
@ -14,7 +13,7 @@ export default function EntriesTable() {
const [filteredEntries, setFilteredEntries] = useState([]); const [filteredEntries, setFilteredEntries] = useState([]);
const [searchQuery, setSearchQuery] = useState(""); const [searchQuery, setSearchQuery] = useState("");
const [currentPage, setCurrentPage] = useState(1); const [currentPage, setCurrentPage] = useState(1);
const [avgConsultTime, setAvgConsultTime] = useState(15); const [avgConsultTime, setAvgConsultTime] = useState(15); // Default 15 mins
const entriesPerPage = 20; const entriesPerPage = 20;
const [currentToken, setCurrentToken] = useState(null); const [currentToken, setCurrentToken] = useState(null);
@ -24,21 +23,23 @@ export default function EntriesTable() {
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
const [error, setError] = useState(null); const [error, setError] = useState(null);
// Calculate waiting time based on position in queue
const calculateWaitTime = (tokenNumber) => { const calculateWaitTime = (tokenNumber) => {
const bookedEntries = entries.filter((e) => e.status === "booked"); const bookedEntries = entries.filter(e => e.status === "booked");
const position = bookedEntries.findIndex( const position = bookedEntries.findIndex(e => e.tokenNumber === tokenNumber);
(e) => e.tokenNumber === tokenNumber return position >= 0 ? (position * avgConsultTime) : 0;
);
return position >= 0 ? position * avgConsultTime : 0;
}; };
const getEntries = async () => { const getEntries = async () => {
try { try {
const today = new Date().toISOString().split("T")[0]; const today = new Date().toISOString().split('T')[0];
const response = await databases.listDocuments( const response = await databases.listDocuments(
DATABASE_ID, DATABASE_ID,
COLLECTION_ID, COLLECTION_ID,
[Query.equal("date", today), Query.orderAsc("tokenNumber")], [
Query.equal('date', today),
Query.orderAsc('tokenNumber')
],
100 100
); );
return response.documents; return response.documents;
@ -62,9 +63,7 @@ export default function EntriesTable() {
setCurrentToken(current?.tokenNumber || null); setCurrentToken(current?.tokenNumber || null);
setPreviousToken(currentIndex > 0 ? entries[currentIndex - 1]?.tokenNumber : null); setPreviousToken(currentIndex > 0 ? entries[currentIndex - 1]?.tokenNumber : null);
setNextToken( setNextToken(currentIndex < entries.length - 1 ? entries[currentIndex + 1]?.tokenNumber : null);
currentIndex < entries.length - 1 ? entries[currentIndex + 1]?.tokenNumber : null
);
const missed = entries const missed = entries
.filter((entry) => entry.status === "missed") .filter((entry) => entry.status === "missed")
@ -76,9 +75,12 @@ export default function EntriesTable() {
const updateStatus = async (entryId, newStatus) => { const updateStatus = async (entryId, newStatus) => {
try { try {
setLoading(true); setLoading(true);
await databases.updateDocument(DATABASE_ID, COLLECTION_ID, entryId, { await databases.updateDocument(
status: newStatus, DATABASE_ID,
}); COLLECTION_ID,
entryId,
{ status: newStatus }
);
const data = await getEntries(); const data = await getEntries();
setEntries(data); setEntries(data);
setFilteredEntries(data); setFilteredEntries(data);
@ -92,13 +94,18 @@ export default function EntriesTable() {
}; };
useEffect(() => { useEffect(() => {
if (userRole === "patient") return; if (userRole === "patient") return; // Don't load data if patient
const loadData = async () => { const loadData = async () => {
try { try {
const data = await getEntries(); const data = await getEntries();
setEntries(data); setEntries(data);
setFilteredEntries(data); setFilteredEntries(data);
updateTokenInfo(data); updateTokenInfo(data);
// Load settings (avg consultation time)
// const settings = await getSettings();
// setAvgConsultTime(settings?.avgConsultationTime || 15);
} catch (err) { } catch (err) {
setError(err.message); setError(err.message);
} finally { } finally {
@ -124,19 +131,17 @@ export default function EntriesTable() {
const currentEntries = filteredEntries.slice(indexOfFirstEntry, indexOfLastEntry); const currentEntries = filteredEntries.slice(indexOfFirstEntry, indexOfLastEntry);
const totalPages = Math.ceil(filteredEntries.length / entriesPerPage); const totalPages = Math.ceil(filteredEntries.length / entriesPerPage);
if (loading) if (loading) return <div className="text-center mt-50">
return ( <div className={`animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-500 mx-auto`}></div>
<div className="text-center mt-20"> <p className={`mt-4 text-lg font-semibold`}>Loading...</p>
<div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-500 mx-auto"></div> </div>;
<p className="mt-4 text-lg font-semibold">Loading...</p>
</div>
);
if (error) return <div className="p-4 text-red-500">Error: {error}</div>; if (error) return <div className="p-4 text-red-500">Error: {error}</div>;
// Check user role and show permission message if patient
if (userRole === "patient") { if (userRole === "patient") {
return ( return (
<div className={`min-h-screen w-full ${darkMode ? "bg-gray-900 text-white" : "bg-white text-black"}`}> <div className={`min-h-screen w-full ${darkMode ? 'bg-gray-900 text-white' : 'bg-white text-black'}`}>
<div className="flex items-center justify-center h-screen"> <div className="flex items-center justify-center h-screen">
<div className="text-center"> <div className="text-center">
<h1 className="text-2xl font-bold mb-4">Access Denied</h1> <h1 className="text-2xl font-bold mb-4">Access Denied</h1>
@ -148,141 +153,119 @@ export default function EntriesTable() {
} }
return ( return (
<div className={`min-h-screen w-full ${darkMode ? "bg-gray-900 text-white" : "bg-white text-black"}`}> <div className={`min-h-screen w-full ${darkMode ? 'bg-gray-900 text-white' : 'bg-white text-black'}`}>
<div className="sticky top-0 z-10 bg-white shadow-md mb-4"> <div className="sticky top-0 z-10 bg-white shadow-md mb-4">
<Header <Header
currentToken={currentToken} currentToken={currentToken}
previousToken={previousToken} previousToken={previousToken}
nextToken={nextToken} nextToken={nextToken}
missedTokens={missedTokens} missedTokens={missedTokens}
entries={entries} entries={entries} // Pass the entries data
/> />
</div> </div>
<h1 className="text-2xl font-bold mb-4">Today&apos;s Entries</h1>
<input
type="text"
placeholder="Search by token or name"
className="mb-4 p-2 border rounded bg-white w-full max-w-sm"
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
/>
<div className="p-4"> {filteredEntries.length === 0 ? (
<h1 className="text-2xl font-bold mb-4">Today&apos;s Entries</h1> <div className="p-4">No entries found for today.</div>
<div className={` ) : (
hidden md:flex items-center gap-[2px] <>
border ${darkMode ? 'border-gray-600 bg-gray-800' : 'border-gray-300 bg-white'} <table className="w-full border-collapse">
p-2 rounded-lg <thead className={darkMode ? "bg-gray-800" : "bg-gray-100"}>
h-[45px] w-[300px] lg:w-[400px] ml-2 mb-6 <tr>
transition-colors duration-300 <th className="p-3 text-left">Token</th>
focus-within:ring-2 focus-within:ring-blue-500 focus-within:ring-opacity-50 <th className="p-3 text-left">Name</th>
${darkMode ? 'focus-within:border-gray-500' : 'focus-within:border-blue-500'} {/* <th className="p-3 text-left">Booked By</th> */}
`}> <th className="p-3 text-left">Status</th>
<div className="relative flex-1"> {/* <th className="p-3 text-left">Wait Time</th> */}
<FaSearch className={` <th className="p-3 text-left">Actions</th>
absolute left-3 top-1/2 transform -translate-y-1/2 </tr>
${darkMode ? 'text-gray-400' : 'text-gray-500'} </thead>
`} /> <tbody>
<input {currentEntries.map((entry) => (
type="text" <tr
placeholder="Search by token or name" key={entry.$id}
className={` className={`border ${darkMode ? 'border-gray-700' : 'border-gray-200'}`}
w-full bg-transparent border-none >
pl-10 pr-10 py-2 <td className="p-3 font-mono">{entry.tokenNumber}</td>
focus:outline-none <td className="p-3">{entry.patientName}</td>
${darkMode ? 'text-gray-200 placeholder-gray-500' : 'text-gray-800 placeholder-gray-400'} {/* <td className="p-3">
text-sm <span className={`text-xs px-2 py-1 rounded ${entry.bookedBy === 'staff' ?
`} 'bg-purple-100 text-purple-800' :
value={searchQuery} 'bg-blue-100 text-blue-800'
onChange={(e) => setSearchQuery(e.target.value)} }`}>
/> {entry.bookedBy}
</div> </span>
<div className={` </td> */}
px-2 py-1 <td className="p-3">
${darkMode ? 'bg-gray-700 text-gray-300' : 'bg-gray-100 text-gray-500'} <span
text-xs rounded-md className={`px-2 py-1 rounded-full text-xs ${entry.status === "done"
font-mono ? "bg-green-100 text-green-800"
`}> : entry.status === "booked"
⌘K ? "bg-yellow-100 text-yellow-800"
</div> : "bg-red-100 text-red-800"
</div> } font-semibold`}
>
{filteredEntries.length === 0 ? ( {entry.status === "booked" ? "In-Queue" : entry.status}
<div className="p-4">No entries found for today.</div> </span>
) : ( </td>
<> {/* <td className="p-3">
<table className="w-full border-collapse"> {entry.status === "booked" ?
<thead className={darkMode ? "bg-gray-800" : "bg-gray-100"}> `~${calculateWaitTime(entry.tokenNumber)} mins` :
<tr> '-'}
<th className="p-3 text-left">Token</th> </td> */}
<th className="p-3 text-left">Name</th> <td className="p-3 flex gap-2">
<th className="p-3 text-left">Status</th> {entry.status === "booked" && (
<th className="p-3 text-left">Actions</th> <>
<button
onClick={() => updateStatus(entry.$id, "done")}
className="border border-green-600 text-green-600 rounded-full px-2 py-1 text-xs hover:bg-green-50"
>
Done
</button>
<button
onClick={() => updateStatus(entry.$id, "missed")}
className="border border-red-600 text-red-600 rounded-full px-2 py-1 text-xs hover:bg-red-50"
>
Missed
</button>
</>
)}
</td>
</tr> </tr>
</thead> ))}
<tbody> </tbody>
{currentEntries.map((entry) => ( </table>
<tr
key={entry.$id}
className={`border ${darkMode ? "border-gray-700" : "border-gray-200"}`}
>
<td className="p-3 font-mono">{entry.tokenNumber}</td>
<td className="p-3">{entry.patientName}</td>
<td className="p-3">
<span
className={`px-2 py-1 rounded-full text-xs font-semibold ${
entry.status === "done"
? "bg-green-100 text-green-800"
: entry.status === "booked"
? "bg-yellow-100 text-yellow-800"
: "bg-red-100 text-red-800"
}`}
>
{entry.status === "booked" ? "In-Queue" : entry.status}
</span>
</td>
<td className="p-3 flex gap-2">
{entry.status === "booked" && (
<>
<button
onClick={() => updateStatus(entry.$id, "done")}
className="border border-green-600 text-green-600 rounded-full px-2 py-1 text-xs hover:bg-green-50"
>
Done
</button>
<button
onClick={() => updateStatus(entry.$id, "missed")}
className="border border-red-600 text-red-600 rounded-full px-2 py-1 text-xs hover:bg-red-50"
>
Missed
</button>
</>
)}
</td>
</tr>
))}
</tbody>
</table>
{/* Pagination */} {/* Pagination */}
<div <div className={`flex justify-between items-center mt-4 ${darkMode ? 'text-white' : 'text-gray-700'
className={`flex justify-between items-center mt-6 ${ }`}>
darkMode ? "text-white" : "text-gray-700" <button
}`} disabled={currentPage === 1}
onClick={() => setCurrentPage((prev) => prev - 1)}
className="px-3 py-1 border rounded disabled:opacity-50"
> >
<button Previous
disabled={currentPage === 1} </button>
onClick={() => setCurrentPage((prev) => prev - 1)} <span className="text-sm">
className="px-3 py-1 border rounded disabled:opacity-50" Page {currentPage} of {totalPages}
> </span>
Previous <button
</button> disabled={currentPage === totalPages}
<span className="text-sm"> onClick={() => setCurrentPage((prev) => prev + 1)}
Page {currentPage} of {totalPages} className="px-3 py-1 border rounded disabled:opacity-50"
</span> >
<button Next
disabled={currentPage === totalPages} </button>
onClick={() => setCurrentPage((prev) => prev + 1)} </div>
className="px-3 py-1 border rounded disabled:opacity-50" </>
> )}
Next
</button>
</div>
</>
)}
</div>
</div> </div>
); );
} }

4
src/app/signup/page.js
View File

@ -107,7 +107,7 @@ export default function SignUpPage() {
{/* Left side - Form */} {/* Left side - Form */}
<div className="lg:w-1/2 w-full flex flex-col items-center justify-center p-4"> <div className="lg:w-1/2 w-full flex flex-col items-center justify-center p-4">
<div className="w-full max-w-md"> <div className="w-full max-w-md">
{/* <div className="w-full max-w-md pt-5 mx-auto sm:py-10"> <div className="w-full max-w-md pt-5 mx-auto sm:py-10">
<Link <Link
href="/dashboard" href="/dashboard"
className="inline-flex items-center text-sm text-gray-500 transition-colors hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300" className="inline-flex items-center text-sm text-gray-500 transition-colors hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300"
@ -130,7 +130,7 @@ export default function SignUpPage() {
</svg> </svg>
Back to dashboard Back to dashboard
</Link> </Link>
</div> */} </div>
<div className="mb-5 sm:mb-8"> <div className="mb-5 sm:mb-8">
<h1 className="mb-2 font-semibold text-gray-800 text-title-sm dark:text-white/90 sm:text-title-md"> <h1 className="mb-2 font-semibold text-gray-800 text-title-sm dark:text-white/90 sm:text-title-md">