added roles admin,patient,staff
This commit is contained in:
parent
eaff6a0b8a
commit
6bce311762
@ -1,13 +1,14 @@
|
||||
// src/app/context/AuthContext.js
|
||||
"use client"; // Mark this as a client component
|
||||
"use client";
|
||||
|
||||
import { createContext, useContext, useState, useEffect } from "react";
|
||||
import { account } from "../lib/appwrite"; // Import Appwrite account
|
||||
import { account,databases,DATABASE_ID,USERS_COLLECTION_ID,Query } from "../lib/appwrite";
|
||||
import { useRouter } from "next/navigation";
|
||||
|
||||
const AuthContext = createContext();
|
||||
|
||||
export const AuthProvider = ({ children }) => {
|
||||
const [user, setUser] = useState(null);
|
||||
const [userRole, setUserRole] = useState("");
|
||||
const [isAuthenticated, setIsAuthenticated] = useState(false);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const router = useRouter();
|
||||
@ -15,14 +16,32 @@ export const AuthProvider = ({ children }) => {
|
||||
useEffect(() => {
|
||||
const checkAuth = async () => {
|
||||
try {
|
||||
await account.get(); // Check if the user is authenticated
|
||||
const session = await account.get(); // Get user session
|
||||
setIsAuthenticated(true);
|
||||
|
||||
const userId = session.$id; // Appwrite auth user ID
|
||||
|
||||
// ✅ Fetch custom user data from your collection
|
||||
const userData = await databases.listDocuments(
|
||||
DATABASE_ID,
|
||||
USERS_COLLECTION_ID,
|
||||
[Query.equal("userId", userId)]
|
||||
);
|
||||
|
||||
const userDoc = userData.documents[0];
|
||||
|
||||
if (userDoc) {
|
||||
setUser(userDoc);
|
||||
setUserRole(userDoc.role || "user");
|
||||
} else {
|
||||
console.warn("User document not found in DB.");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Auth Error:", error);
|
||||
if (error.code === 401) {
|
||||
// Session expired or invalid
|
||||
localStorage.removeItem("isLoggedIn");
|
||||
setIsAuthenticated(false);
|
||||
router.push("/signup"); // Redirect to sign-in page
|
||||
router.push("/signup");
|
||||
}
|
||||
} finally {
|
||||
setLoading(false);
|
||||
@ -33,7 +52,15 @@ export const AuthProvider = ({ children }) => {
|
||||
}, [router]);
|
||||
|
||||
return (
|
||||
<AuthContext.Provider value={{ isAuthenticated, setIsAuthenticated, loading }}>
|
||||
<AuthContext.Provider
|
||||
value={{
|
||||
isAuthenticated,
|
||||
setIsAuthenticated,
|
||||
loading,
|
||||
userRole,
|
||||
user,
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</AuthContext.Provider>
|
||||
);
|
||||
|
||||
@ -5,9 +5,11 @@ import { useAuth } from "../context/AuthContext";
|
||||
import { useEffect } from "react";
|
||||
import { useTheme } from "../context/ThemeContext";
|
||||
|
||||
|
||||
export default function DashboardPage() {
|
||||
|
||||
const router = useRouter();
|
||||
const { isAuthenticated, loading } = useAuth();
|
||||
const { isAuthenticated, loading, userRole } = useAuth();
|
||||
const { darkMode } = useTheme();
|
||||
|
||||
useEffect(() => {
|
||||
@ -38,6 +40,19 @@ export default function DashboardPage() {
|
||||
<h1 className={`text-3xl font-bold mb-6 ${darkMode ? 'text-white' : 'text-gray-900'}`}>
|
||||
Dashboard
|
||||
</h1>
|
||||
{/* -------------user role-------------- */}
|
||||
<h2 className={`text-xl font-semibold mb-4 ${darkMode ? 'text-white' : 'text-gray-800'}`}>
|
||||
User Profile
|
||||
</h2>
|
||||
<div className="flex items-center space-x-4">
|
||||
<div className={`w-16 h-16 rounded-full ${darkMode ? 'bg-gray-700' : 'bg-gray-200'}`}></div>
|
||||
<div>
|
||||
<p className={`font-medium ${darkMode ? 'text-white' : 'text-gray-800'}`}>John Doe</p>
|
||||
<p className={`text-sm ${darkMode ? 'text-gray-400' : 'text-gray-500'}`}>john@example.com</p>
|
||||
<p className={`text-xs mt-1 ${darkMode ? 'text-gray-400' : 'text-gray-500'}`}>Role: {userRole}</p> {/* 👈 Added */}
|
||||
</div>
|
||||
</div>
|
||||
{/* */}
|
||||
|
||||
{/* 2x2 Grid Layout */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
|
||||
|
||||
@ -10,6 +10,7 @@ const databases = new Databases(client);
|
||||
|
||||
const DATABASE_ID = process.env.NEXT_PUBLIC_APPWRITE_DATABASE_ID;
|
||||
const COLLECTION_ID = process.env.NEXT_PUBLIC_APPWRITE_COLLECTION_ID;
|
||||
const USERS_COLLECTION_ID = process.env.NEXT_PUBLIC_APPWRITE_USERS_COLLECTION_ID;
|
||||
|
||||
// Initialize with proper schema
|
||||
async function initDatabase() {
|
||||
@ -107,13 +108,36 @@ async function initDatabase() {
|
||||
|
||||
return paddedToken;
|
||||
}
|
||||
// 🔐 Get User Role from `users` collection
|
||||
async function getUserRole() {
|
||||
try {
|
||||
const user = await account.get();
|
||||
const userId = user.$id;
|
||||
|
||||
const response = await databases.listDocuments(
|
||||
DATABASE_ID,
|
||||
USERS_COLLECTION_ID,
|
||||
[Query.equal("userId", userId)]
|
||||
);
|
||||
|
||||
if (response.total === 0) {
|
||||
throw new Error("User not found in users collection.");
|
||||
}
|
||||
|
||||
return response.documents[0].role;
|
||||
} catch (error) {
|
||||
console.error("Error fetching role:", error.message);
|
||||
return null;
|
||||
}
|
||||
}
|
||||
export {
|
||||
getUserRole,
|
||||
client,
|
||||
account,
|
||||
databases,
|
||||
DATABASE_ID,
|
||||
COLLECTION_ID,
|
||||
USERS_COLLECTION_ID,
|
||||
Query,
|
||||
ID,
|
||||
initDatabase,
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
"use client";
|
||||
import { useSearchParams } from 'next/navigation';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useEffect, useState, useRef } from 'react';
|
||||
import { databases, ID, Query } from "../../lib/appwrite"; // Added Query import
|
||||
import { DATABASE_ID, COLLECTION_ID } from "../../lib/api";
|
||||
import Header from '../../components/partials/header';
|
||||
@ -16,6 +16,7 @@ export default function SingleBooked() {
|
||||
const [token, setToken] = useState('');
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState(null);
|
||||
const bookingCreated = useRef(false);
|
||||
|
||||
const generateTokenNumber = async (date) => {
|
||||
try {
|
||||
@ -39,7 +40,10 @@ export default function SingleBooked() {
|
||||
};
|
||||
|
||||
const createBooking = async () => {
|
||||
if (bookingCreated.current) return; // Prevent duplicate calls
|
||||
|
||||
try {
|
||||
bookingCreated.current = true; // Mark as created
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
|
||||
@ -63,6 +67,7 @@ export default function SingleBooked() {
|
||||
} catch (error) {
|
||||
console.error("Booking error:", error);
|
||||
setError(error.message);
|
||||
bookingCreated.current = false; // Reset on error to allow retry
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
|
||||
@ -11,7 +11,6 @@ export default function SingleBooking() {
|
||||
const [darkMode, setDarkMode] = useState(false);
|
||||
const [loaded, setLoaded] = useState(false);
|
||||
const [name, setName] = useState('');
|
||||
const [appointmentDate, setAppointmentDate] = useState('');
|
||||
const router = useRouter();
|
||||
|
||||
useEffect(() => {
|
||||
@ -29,12 +28,16 @@ export default function SingleBooking() {
|
||||
const handleSubmit = (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
if (!name || !appointmentDate) {
|
||||
alert('Please fill all the fields');
|
||||
if (!name) {
|
||||
alert('Please enter your name');
|
||||
return;
|
||||
}
|
||||
|
||||
// Navigate to confirmation page with name and appointmentDate as query params
|
||||
// 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)}`);
|
||||
};
|
||||
|
||||
@ -67,18 +70,6 @@ export default function SingleBooking() {
|
||||
<h2 className="text-2xl font-semibold mb-6 text-gray-800 dark:text-white">Book Appointment</h2>
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-6">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1.5">
|
||||
Appointment Date
|
||||
</label>
|
||||
<input
|
||||
type="date"
|
||||
value={appointmentDate}
|
||||
onChange={(e) => setAppointmentDate(e.target.value)}
|
||||
className="h-11 w-full rounded-lg border border-gray-300 bg-white dark:bg-gray-900 px-4 py-2.5 text-sm text-gray-800 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1.5">
|
||||
Full Name
|
||||
@ -89,6 +80,7 @@ export default function SingleBooking() {
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
className="h-11 w-full rounded-lg border border-gray-300 bg-white dark:bg-gray-900 px-4 py-2.5 text-sm text-gray-800 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
@ -101,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 the current date only (Today).
|
||||
Note: Token booking is available for today's date only.
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
@ -9,11 +9,9 @@ import { useTheme } from "../../context/ThemeContext";
|
||||
export default function StaffBooking() {
|
||||
const { darkMode } = useTheme();
|
||||
const router = useRouter();
|
||||
const [appointmentDate, setAppointmentDate] = useState(new Date().toISOString().split('T')[0]);
|
||||
const [recentBookings, setRecentBookings] = useState([]);
|
||||
const [appointmentDate] = useState(new Date().toISOString().split('T')[0]);
|
||||
const [stats, setStats] = useState({
|
||||
totalTokens: 0,
|
||||
avgWaitTime: 0,
|
||||
booked: 0,
|
||||
done: 0,
|
||||
missed: 0
|
||||
@ -21,23 +19,9 @@ export default function StaffBooking() {
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchData = async () => {
|
||||
const fetchStats = async () => {
|
||||
try {
|
||||
const today = new Date().toISOString().split('T')[0];
|
||||
|
||||
// Fetch recent bookings (last 5)
|
||||
const recentResponse = await databases.listDocuments(
|
||||
DATABASE_ID,
|
||||
COLLECTION_ID,
|
||||
[
|
||||
Query.equal('date', today),
|
||||
Query.orderDesc('$createdAt'),
|
||||
Query.limit(5)
|
||||
]
|
||||
);
|
||||
setRecentBookings(recentResponse.documents);
|
||||
|
||||
// Fetch statistics
|
||||
const statsResponse = await databases.listDocuments(
|
||||
DATABASE_ID,
|
||||
COLLECTION_ID,
|
||||
@ -49,46 +33,23 @@ export default function StaffBooking() {
|
||||
const doneTokens = allTokens.filter(t => t.status === 'done');
|
||||
const missedTokens = allTokens.filter(t => t.status === 'missed');
|
||||
|
||||
// Calculate average wait time (simplified)
|
||||
const avgWaitTime = bookedTokens.length > 0 ?
|
||||
Math.round((bookedTokens.length * 15) / bookedTokens.length) : 0;
|
||||
|
||||
setStats({
|
||||
totalTokens: allTokens.length,
|
||||
avgWaitTime,
|
||||
booked: bookedTokens.length,
|
||||
done: doneTokens.length,
|
||||
missed: missedTokens.length
|
||||
});
|
||||
|
||||
} catch (error) {
|
||||
console.error("Error fetching data:", error);
|
||||
console.error("Error fetching statistics:", error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
fetchData();
|
||||
fetchStats();
|
||||
}, []);
|
||||
|
||||
const updateStatus = async (documentId, newStatus) => {
|
||||
try {
|
||||
await databases.updateDocument(
|
||||
DATABASE_ID,
|
||||
COLLECTION_ID,
|
||||
documentId,
|
||||
{ status: newStatus }
|
||||
);
|
||||
// Refresh data after update
|
||||
const updated = recentBookings.map(booking =>
|
||||
booking.$id === documentId ? { ...booking, status: newStatus } : booking
|
||||
);
|
||||
setRecentBookings(updated);
|
||||
} catch (error) {
|
||||
console.error("Update error:", error);
|
||||
}
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return <div className="flex items-center justify-center min-h-screen">
|
||||
<div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-500"></div>
|
||||
@ -109,15 +70,11 @@ export default function StaffBooking() {
|
||||
<h3 className={`text-lg font-medium mb-4 ${darkMode ? 'text-white' : 'text-gray-800'}`}>
|
||||
Today's Overview
|
||||
</h3>
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||||
<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'}`}>
|
||||
<p className={`text-sm ${darkMode ? 'text-gray-300' : 'text-gray-600'}`}>Total Tokens</p>
|
||||
<p className={`text-2xl font-bold ${darkMode ? 'text-white' : 'text-gray-900'}`}>{stats.totalTokens}</p>
|
||||
</div>
|
||||
<div className={`p-4 rounded-lg text-center ${darkMode ? 'bg-gray-700' : 'bg-white'} border ${darkMode ? 'border-gray-600' : 'border-gray-200'}`}>
|
||||
<p className={`text-sm ${darkMode ? 'text-gray-300' : 'text-gray-600'}`}>Avg Wait Time</p>
|
||||
<p className={`text-2xl font-bold ${darkMode ? 'text-white' : 'text-gray-900'}`}>{stats.avgWaitTime} mins</p>
|
||||
</div>
|
||||
<div className={`p-4 rounded-lg text-center ${darkMode ? 'bg-gray-700' : 'bg-white'} border ${darkMode ? 'border-gray-600' : 'border-gray-200'}`}>
|
||||
<p className={`text-sm ${darkMode ? 'text-gray-300' : 'text-gray-600'}`}>Pending</p>
|
||||
<p className={`text-2xl font-bold ${darkMode ? 'text-white' : 'text-gray-900'}`}>{stats.booked}</p>
|
||||
@ -129,9 +86,8 @@ export default function StaffBooking() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
|
||||
{/* Booking Options */}
|
||||
<div className="lg:col-span-2 space-y-4">
|
||||
<div className="space-y-4">
|
||||
<h3 className={`text-lg font-medium ${darkMode ? 'text-white' : 'text-gray-800'}`}>
|
||||
New Booking
|
||||
</h3>
|
||||
@ -182,59 +138,7 @@ export default function StaffBooking() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Recent Activity */}
|
||||
<div>
|
||||
<h3 className={`text-lg font-medium mb-4 ${darkMode ? 'text-white' : 'text-gray-800'}`}>
|
||||
Recent Activity
|
||||
</h3>
|
||||
<div className={`space-y-3 ${darkMode ? 'bg-gray-800' : 'bg-white'} p-4 rounded-lg border ${darkMode ? 'border-gray-700' : 'border-gray-200'}`}>
|
||||
{recentBookings.length > 0 ? (
|
||||
recentBookings.map(booking => (
|
||||
<div key={booking.$id} className={`p-3 rounded-lg ${darkMode ? 'bg-gray-700' : 'bg-gray-50'} border ${darkMode ? 'border-gray-600' : 'border-gray-200'}`}>
|
||||
<div className="flex justify-between items-start">
|
||||
<div>
|
||||
<p className={`font-medium ${darkMode ? 'text-white' : 'text-gray-800'}`}>
|
||||
{booking.patientName}
|
||||
</p>
|
||||
<p className={`text-sm ${darkMode ? 'text-gray-400' : 'text-gray-600'}`}>
|
||||
Token: <span className="font-mono">{booking.tokenId}</span>
|
||||
</p>
|
||||
</div>
|
||||
<span className={`text-xs px-2 py-1 rounded-full ${booking.status === 'done' ? 'bg-green-100 text-green-800' :
|
||||
booking.status === 'missed' ? 'bg-red-100 text-red-800' :
|
||||
'bg-yellow-100 text-yellow-800'
|
||||
}`}>
|
||||
{booking.status}
|
||||
</span>
|
||||
</div>
|
||||
{booking.status === 'booked' && (
|
||||
<div className="flex gap-2 mt-2">
|
||||
<button
|
||||
onClick={() => updateStatus(booking.$id, 'done')}
|
||||
className="text-xs px-2 py-1 bg-green-500 text-white rounded hover:bg-green-600"
|
||||
>
|
||||
Mark Done
|
||||
</button>
|
||||
<button
|
||||
onClick={() => updateStatus(booking.$id, 'missed')}
|
||||
className="text-xs px-2 py-1 bg-red-500 text-white rounded hover:bg-red-600"
|
||||
>
|
||||
Mark Missed
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))
|
||||
) : (
|
||||
<p className={`text-center py-4 ${darkMode ? 'text-gray-400' : 'text-gray-600'}`}>
|
||||
No recent bookings found
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={`text-center text-sm ${darkMode ? 'text-gray-400' : 'text-gray-600'}`}>
|
||||
<div className={`text-center text-sm mt-8 ${darkMode ? 'text-gray-400' : 'text-gray-600'}`}>
|
||||
<p>Staff can book tokens for patients. Choose single booking for individual patients or multi-booking for group entries.</p>
|
||||
<p>All tokens will be assigned for {new Date(appointmentDate).toLocaleDateString()}.</p>
|
||||
</div>
|
||||
|
||||
@ -4,15 +4,17 @@ 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";
|
||||
import { useAuth } from "../../context/AuthContext";
|
||||
|
||||
export default function EntriesTable() {
|
||||
const { userRole } = useAuth();
|
||||
const { darkMode } = useTheme();
|
||||
const [entries, setEntries] = useState([]);
|
||||
const [filteredEntries, setFilteredEntries] = useState([]);
|
||||
const [searchQuery, setSearchQuery] = useState("");
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const [avgConsultTime, setAvgConsultTime] = useState(15); // Default 15 mins
|
||||
const entriesPerPage = 10;
|
||||
const entriesPerPage = 20;
|
||||
|
||||
const [currentToken, setCurrentToken] = useState(null);
|
||||
const [previousToken, setPreviousToken] = useState(null);
|
||||
@ -92,6 +94,8 @@ export default function EntriesTable() {
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (userRole === "patient") return; // Don't load data if patient
|
||||
|
||||
const loadData = async () => {
|
||||
try {
|
||||
const data = await getEntries();
|
||||
@ -109,7 +113,7 @@ export default function EntriesTable() {
|
||||
}
|
||||
};
|
||||
loadData();
|
||||
}, []);
|
||||
}, [userRole]);
|
||||
|
||||
useEffect(() => {
|
||||
const filtered = entries.filter((entry) => {
|
||||
@ -134,6 +138,20 @@ export default function EntriesTable() {
|
||||
|
||||
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") {
|
||||
return (
|
||||
<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="text-center">
|
||||
<h1 className="text-2xl font-bold mb-4">Access Denied</h1>
|
||||
<p>You don't have permission to view this page.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<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">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user