ATTUNE-HEART-THERAPY/website
6
0
Fork 0
Code Issues 7 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat/booking-panel #25

Merged
Hammond merged 3 commits from feat/booking-panel into master 2025-11-25 21:33:40 +00:00
Conversation 0 Commits 3 Files Changed 16 +947 -363
16 changed files with 947 additions and 363 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
17 Normal file
View File

245
app/(admin)/admin/booking/page.tsx
View File

@ -53,7 +53,7 @@ export default function Booking() {
const { adminAvailability, isLoadingAdminAvailability, updateAvailability, isUpdatingAvailability, refetchAdminAvailability } = useAppointments(); const { adminAvailability, isLoadingAdminAvailability, updateAvailability, isUpdatingAvailability, refetchAdminAvailability } = useAppointments();
const [selectedDays, setSelectedDays] = useState<number[]>([]); const [selectedDays, setSelectedDays] = useState<number[]>([]);
const [availabilityDialogOpen, setAvailabilityDialogOpen] = useState(false); const [availabilityDialogOpen, setAvailabilityDialogOpen] = useState(false);
const [dayTimeRanges, setDayTimeRanges] = useState<Record<number, { startTime: string; endTime: string }>>({}); const [dayTimeSlots, setDayTimeSlots] = useState<Record<number, string[]>>({});
const daysOfWeek = [ const daysOfWeek = [
{ value: 0, label: "Monday" }, { value: 0, label: "Monday" },
@ -65,64 +65,56 @@ export default function Booking() {
{ value: 6, label: "Sunday" }, { value: 6, label: "Sunday" },
]; ];
// Load time ranges from localStorage on mount // Load time slots from localStorage on mount
useEffect(() => { useEffect(() => {
const savedTimeRanges = localStorage.getItem("adminAvailabilityTimeRanges"); const savedTimeSlots = localStorage.getItem("adminAvailabilityTimeSlots");
if (savedTimeRanges) { if (savedTimeSlots) {
try { try {
const parsed = JSON.parse(savedTimeRanges); const parsed = JSON.parse(savedTimeSlots);
setDayTimeRanges(parsed); setDayTimeSlots(parsed);
} catch (error) { } catch (error) {
console.error("Failed to parse saved time ranges:", error); console.error("Failed to parse saved time slots:", error);
} }
} }
}, []); }, []);
// Initialize selected days and time ranges when availability is loaded // Initialize selected days and time slots when availability is loaded
useEffect(() => { useEffect(() => {
if (adminAvailability?.available_days) { if (adminAvailability?.available_days) {
setSelectedDays(adminAvailability.available_days); setSelectedDays(adminAvailability.available_days);
// Load saved time ranges or use defaults // Load saved time slots or use defaults
const savedTimeRanges = localStorage.getItem("adminAvailabilityTimeRanges"); const savedTimeSlots = localStorage.getItem("adminAvailabilityTimeSlots");
let initialRanges: Record<number, { startTime: string; endTime: string }> = {}; let initialSlots: Record<number, string[]> = {};
if (savedTimeRanges) { if (savedTimeSlots) {
try { try {
const parsed = JSON.parse(savedTimeRanges); const parsed = JSON.parse(savedTimeSlots);
// Only use saved ranges for days that are currently available // Only use saved slots for days that are currently available
adminAvailability.available_days.forEach((day) => { adminAvailability.available_days.forEach((day) => {
initialRanges[day] = parsed[day] || { startTime: "09:00", endTime: "17:00" }; initialSlots[day] = parsed[day] || ["morning", "lunchtime", "afternoon"];
}); });
} catch (error) { } catch (error) {
// If parsing fails, use defaults // If parsing fails, use defaults
adminAvailability.available_days.forEach((day) => { adminAvailability.available_days.forEach((day) => {
initialRanges[day] = { startTime: "09:00", endTime: "17:00" }; initialSlots[day] = ["morning", "lunchtime", "afternoon"];
}); });
} }
} else { } else {
// No saved ranges, use defaults // No saved slots, use defaults
adminAvailability.available_days.forEach((day) => { adminAvailability.available_days.forEach((day) => {
initialRanges[day] = { startTime: "09:00", endTime: "17:00" }; initialSlots[day] = ["morning", "lunchtime", "afternoon"];
}); });
} }
setDayTimeRanges(initialRanges); setDayTimeSlots(initialSlots);
} }
}, [adminAvailability]); }, [adminAvailability]);
// Generate time slots for time picker const timeSlotOptions = [
const generateTimeSlots = () => { { value: "morning", label: "Morning" },
const slots = []; { value: "lunchtime", label: "Lunchtime" },
for (let hour = 0; hour < 24; hour++) { { value: "afternoon", label: "Evening" },
for (let minute = 0; minute < 60; minute += 30) { ];
const timeString = `${hour.toString().padStart(2, "0")}:${minute.toString().padStart(2, "0")}`;
slots.push(timeString);
}
}
return slots;
};
const timeSlotsForPicker = generateTimeSlots();
const handleDayToggle = (day: number) => { const handleDayToggle = (day: number) => {
setSelectedDays((prev) => { setSelectedDays((prev) => {
@ -130,20 +122,20 @@ export default function Booking() {
? prev.filter((d) => d !== day) ? prev.filter((d) => d !== day)
: [...prev, day].sort(); : [...prev, day].sort();
// Initialize time range for newly added day // Initialize time slots for newly added day
if (!prev.includes(day) && !dayTimeRanges[day]) { if (!prev.includes(day) && !dayTimeSlots[day]) {
setDayTimeRanges((prevRanges) => ({ setDayTimeSlots((prevSlots) => ({
...prevRanges, ...prevSlots,
[day]: { startTime: "09:00", endTime: "17:00" }, [day]: ["morning", "lunchtime", "afternoon"],
})); }));
} }
// Remove time range for removed day // Remove time slots for removed day
if (prev.includes(day)) { if (prev.includes(day)) {
setDayTimeRanges((prevRanges) => { setDayTimeSlots((prevSlots) => {
const newRanges = { ...prevRanges }; const newSlots = { ...prevSlots };
delete newRanges[day]; delete newSlots[day];
return newRanges; return newSlots;
}); });
} }
@ -151,14 +143,18 @@ export default function Booking() {
}); });
}; };
const handleTimeRangeChange = (day: number, field: "startTime" | "endTime", value: string) => { const handleTimeSlotToggle = (day: number, slot: string) => {
setDayTimeRanges((prev) => ({ setDayTimeSlots((prev) => {
...prev, const currentSlots = prev[day] || [];
[day]: { const newSlots = currentSlots.includes(slot)
...prev[day], ? currentSlots.filter((s) => s !== slot)
[field]: value, : [...currentSlots, slot];
},
})); return {
...prev,
[day]: newSlots,
};
});
}; };
const handleSaveAvailability = async () => { const handleSaveAvailability = async () => {
@ -167,15 +163,11 @@ export default function Booking() {
return; return;
} }
// Validate all time ranges // Validate all time slots
for (const day of selectedDays) { for (const day of selectedDays) {
const timeRange = dayTimeRanges[day]; const timeSlots = dayTimeSlots[day];
if (!timeRange || !timeRange.startTime || !timeRange.endTime) { if (!timeSlots || timeSlots.length === 0) {
toast.error(`Please set time range for ${daysOfWeek.find(d => d.value === day)?.label}`); toast.error(`Please select at least one time slot for ${daysOfWeek.find(d => d.value === day)?.label}`);
return;
}
if (timeRange.startTime >= timeRange.endTime) {
toast.error(`End time must be after start time for ${daysOfWeek.find(d => d.value === day)?.label}`);
return; return;
} }
} }
@ -185,8 +177,8 @@ export default function Booking() {
const daysToSave = selectedDays.map(day => Number(day)).sort(); const daysToSave = selectedDays.map(day => Number(day)).sort();
await updateAvailability({ available_days: daysToSave }); await updateAvailability({ available_days: daysToSave });
// Save time ranges to localStorage // Save time slots to localStorage
localStorage.setItem("adminAvailabilityTimeRanges", JSON.stringify(dayTimeRanges)); localStorage.setItem("adminAvailabilityTimeSlots", JSON.stringify(dayTimeSlots));
toast.success("Availability updated successfully!"); toast.success("Availability updated successfully!");
// Refresh availability data // Refresh availability data
@ -204,12 +196,12 @@ export default function Booking() {
const handleOpenAvailabilityDialog = () => { const handleOpenAvailabilityDialog = () => {
if (adminAvailability?.available_days) { if (adminAvailability?.available_days) {
setSelectedDays(adminAvailability.available_days); setSelectedDays(adminAvailability.available_days);
// Initialize time ranges for each day // Initialize time slots for each day
const initialRanges: Record<number, { startTime: string; endTime: string }> = {}; const initialSlots: Record<number, string[]> = {};
adminAvailability.available_days.forEach((day) => { adminAvailability.available_days.forEach((day) => {
initialRanges[day] = dayTimeRanges[day] || { startTime: "09:00", endTime: "17:00" }; initialSlots[day] = dayTimeSlots[day] || ["morning", "lunchtime", "afternoon"];
}); });
setDayTimeRanges(initialRanges); setDayTimeSlots(initialSlots);
} }
setAvailabilityDialogOpen(true); setAvailabilityDialogOpen(true);
}; };
@ -441,7 +433,11 @@ export default function Booking() {
<div className="flex flex-wrap gap-2"> <div className="flex flex-wrap gap-2">
{adminAvailability.available_days.map((dayNum, index) => { {adminAvailability.available_days.map((dayNum, index) => {
const dayName = daysOfWeek.find(d => d.value === dayNum)?.label || adminAvailability.available_days_display[index]; const dayName = daysOfWeek.find(d => d.value === dayNum)?.label || adminAvailability.available_days_display[index];
const timeRange = dayTimeRanges[dayNum] || { startTime: "09:00", endTime: "17:00" }; const timeSlots = dayTimeSlots[dayNum] || [];
const slotLabels = timeSlots.map(slot => {
const option = timeSlotOptions.find(opt => opt.value === slot);
return option ? option.label : slot;
});
return ( return (
<div <div
key={dayNum} key={dayNum}
@ -453,19 +449,11 @@ export default function Booking() {
> >
<Check className={`w-3.5 h-3.5 shrink-0 ${isDark ? "text-rose-400" : "text-rose-600"}`} /> <Check className={`w-3.5 h-3.5 shrink-0 ${isDark ? "text-rose-400" : "text-rose-600"}`} />
<span className="font-medium shrink-0">{dayName}</span> <span className="font-medium shrink-0">{dayName}</span>
<span className={`text-sm shrink-0 ${isDark ? "text-rose-300" : "text-rose-600"}`}> {slotLabels.length > 0 && (
({new Date(`2000-01-01T${timeRange.startTime}`).toLocaleTimeString("en-US", { <span className={`text-sm shrink-0 ${isDark ? "text-rose-300" : "text-rose-600"}`}>
hour: "numeric", ({slotLabels.join(", ")})
minute: "2-digit", </span>
hour12: true, )}
})}{" "}
-{" "}
{new Date(`2000-01-01T${timeRange.endTime}`).toLocaleTimeString("en-US", {
hour: "numeric",
minute: "2-digit",
hour12: true,
})})
</span>
</div> </div>
); );
})} })}
@ -835,14 +823,13 @@ export default function Booking() {
Available Days & Times * Available Days & Times *
</label> </label>
<p className={`text-xs mb-3 ${isDark ? "text-gray-400" : "text-gray-500"}`}> <p className={`text-xs mb-3 ${isDark ? "text-gray-400" : "text-gray-500"}`}>
Select days and set time ranges for each day Select days and choose time slots (Morning, Lunchtime, Evening) for each day
</p> </p>
</div> </div>
<div className="space-y-3"> <div className="space-y-3">
{daysOfWeek.map((day) => { {daysOfWeek.map((day) => {
const isSelected = selectedDays.includes(day.value); const isSelected = selectedDays.includes(day.value);
const timeRange = dayTimeRanges[day.value] || { startTime: "09:00", endTime: "17:00" };
return ( return (
<div <div
@ -886,80 +873,30 @@ export default function Booking() {
{isSelected && ( {isSelected && (
<div className="mt-3 pt-3 border-t border-gray-300 dark:border-gray-600"> <div className="mt-3 pt-3 border-t border-gray-300 dark:border-gray-600">
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3"> <label className={`text-xs font-medium mb-2 block ${isDark ? "text-gray-400" : "text-gray-600"}`}>
{/* Start Time */} Available Time Slots
<div className="space-y-1.5"> </label>
<label className={`text-xs font-medium ${isDark ? "text-gray-400" : "text-gray-600"}`}> <div className="flex flex-wrap gap-2">
Start Time {timeSlotOptions.map((slot) => {
</label> const isSelectedSlot = dayTimeSlots[day.value]?.includes(slot.value) || false;
<Select return (
value={timeRange.startTime} <button
onValueChange={(value) => handleTimeRangeChange(day.value, "startTime", value)} key={slot.value}
> type="button"
<SelectTrigger className={`h-9 text-sm ${isDark ? "bg-gray-700 border-gray-600 text-white" : "bg-white border-gray-300"}`}> onClick={() => handleTimeSlotToggle(day.value, slot.value)}
<SelectValue /> className={`px-3 py-1.5 rounded-lg text-xs font-medium border transition-all ${
</SelectTrigger> isSelectedSlot
<SelectContent className={isDark ? "bg-gray-800 border-gray-700" : "bg-white"}> ? isDark
{timeSlotsForPicker.map((time) => ( ? "bg-rose-600 border-rose-500 text-white"
<SelectItem : "bg-rose-500 border-rose-500 text-white"
key={time} : isDark
value={time} ? "bg-gray-700 border-gray-600 text-gray-300 hover:border-rose-500"
className={isDark ? "text-white hover:bg-gray-700" : ""} : "bg-white border-gray-300 text-gray-700 hover:border-rose-500"
> }`}
{new Date(`2000-01-01T${time}`).toLocaleTimeString("en-US", { >
hour: "numeric", {slot.label}
minute: "2-digit", </button>
hour12: true, );
})}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
{/* End Time */}
<div className="space-y-1.5">
<label className={`text-xs font-medium ${isDark ? "text-gray-400" : "text-gray-600"}`}>
End Time
</label>
<Select
value={timeRange.endTime}
onValueChange={(value) => handleTimeRangeChange(day.value, "endTime", value)}
>
<SelectTrigger className={`h-9 text-sm ${isDark ? "bg-gray-700 border-gray-600 text-white" : "bg-white border-gray-300"}`}>
<SelectValue />
</SelectTrigger>
<SelectContent className={isDark ? "bg-gray-800 border-gray-700" : "bg-white"}>
{timeSlotsForPicker.map((time) => (
<SelectItem
key={time}
value={time}
className={isDark ? "text-white hover:bg-gray-700" : ""}
>
{new Date(`2000-01-01T${time}`).toLocaleTimeString("en-US", {
hour: "numeric",
minute: "2-digit",
hour12: true,
})}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
</div>
{/* Time Range Preview */}
<div className={`mt-2 p-2 rounded text-xs ${isDark ? "bg-gray-800/50 text-gray-300" : "bg-white text-gray-600"}`}>
{new Date(`2000-01-01T${timeRange.startTime}`).toLocaleTimeString("en-US", {
hour: "numeric",
minute: "2-digit",
hour12: true,
})}{" "}
-{" "}
{new Date(`2000-01-01T${timeRange.endTime}`).toLocaleTimeString("en-US", {
hour: "numeric",
minute: "2-digit",
hour12: true,
})} })}
</div> </div>
</div> </div>

140
app/(admin)/admin/settings/page.tsx
View File

@ -1,6 +1,6 @@
"use client"; "use client";
import { useState } from "react"; import { useState, useEffect } from "react";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input"; import { Input } from "@/components/ui/input";
import { Card, CardHeader, CardTitle, CardDescription, CardContent } from "@/components/ui/card"; import { Card, CardHeader, CardTitle, CardDescription, CardContent } from "@/components/ui/card";
@ -13,16 +13,21 @@ import {
Lock, Lock,
Eye, Eye,
EyeOff, EyeOff,
Loader2,
} from "lucide-react"; } from "lucide-react";
import Link from "next/link"; import Link from "next/link";
import { useAppTheme } from "@/components/ThemeProvider"; import { useAppTheme } from "@/components/ThemeProvider";
import { getProfile, updateProfile } from "@/lib/actions/auth";
import { toast } from "sonner";
export default function AdminSettingsPage() { export default function AdminSettingsPage() {
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const [fetching, setFetching] = useState(true);
const [formData, setFormData] = useState({ const [formData, setFormData] = useState({
fullName: "Hammond", firstName: "",
email: "admin@attuneheart.com", lastName: "",
phone: "+1 (555) 123-4567", email: "",
phone: "",
}); });
const [passwordData, setPasswordData] = useState({ const [passwordData, setPasswordData] = useState({
currentPassword: "", currentPassword: "",
@ -37,6 +42,30 @@ export default function AdminSettingsPage() {
const { theme } = useAppTheme(); const { theme } = useAppTheme();
const isDark = theme === "dark"; const isDark = theme === "dark";
// Fetch profile data on mount
useEffect(() => {
const fetchProfile = async () => {
setFetching(true);
try {
const profile = await getProfile();
setFormData({
firstName: profile.first_name || "",
lastName: profile.last_name || "",
email: profile.email || "",
phone: profile.phone_number || "",
});
} catch (error) {
console.error("Failed to fetch profile:", error);
const errorMessage = error instanceof Error ? error.message : "Failed to load profile";
toast.error(errorMessage);
} finally {
setFetching(false);
}
};
fetchProfile();
}, []);
const handleInputChange = (field: string, value: string) => { const handleInputChange = (field: string, value: string) => {
setFormData((prev) => ({ setFormData((prev) => ({
...prev, ...prev,
@ -59,11 +88,26 @@ export default function AdminSettingsPage() {
}; };
const handleSave = async () => { const handleSave = async () => {
if (!formData.firstName || !formData.lastName) {
toast.error("First name and last name are required");
return;
}
setLoading(true); setLoading(true);
// Simulate API call try {
await new Promise((resolve) => setTimeout(resolve, 1000)); await updateProfile({
setLoading(false); first_name: formData.firstName,
// In a real app, you would show a success message here last_name: formData.lastName,
phone_number: formData.phone || undefined,
});
toast.success("Profile updated successfully!");
} catch (error) {
console.error("Failed to update profile:", error);
const errorMessage = error instanceof Error ? error.message : "Failed to update profile";
toast.error(errorMessage);
} finally {
setLoading(false);
}
}; };
const handlePasswordSave = async () => { const handlePasswordSave = async () => {
@ -113,15 +157,20 @@ export default function AdminSettingsPage() {
</div> </div>
<Button <Button
onClick={handleSave} onClick={handleSave}
disabled={loading} disabled={loading || fetching}
className="w-full sm:w-auto bg-linear-to-r from-rose-500 to-pink-600 hover:from-rose-600 hover:to-pink-700 text-white" className="w-full sm:w-auto bg-gradient-to-r from-rose-500 to-pink-600 hover:from-rose-600 hover:to-pink-700 text-white"
> >
{loading ? ( {loading ? (
<div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white mr-2"></div> <>
<Loader2 className="w-4 h-4 mr-2 animate-spin" />
Saving...
</>
) : ( ) : (
<Save className="w-4 h-4 mr-2" /> <>
<Save className="w-4 h-4 mr-2" />
Save Changes
</>
)} )}
Save Changes
</Button> </Button>
</div> </div>
@ -139,21 +188,49 @@ export default function AdminSettingsPage() {
</CardDescription> </CardDescription>
</CardHeader> </CardHeader>
<CardContent className="space-y-4"> <CardContent className="space-y-4">
<div className="space-y-2"> {fetching ? (
<label className={`text-sm font-medium ${isDark ? "text-gray-300" : "text-gray-700"}`}> <div className="flex items-center justify-center py-8">
Full Name <Loader2 className="w-6 h-6 animate-spin text-rose-600" />
</label>
<div className="relative">
<User className={`absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 ${isDark ? "text-gray-500" : "text-gray-400"}`} />
<Input
type="text"
value={formData.fullName}
onChange={(e) => handleInputChange("fullName", e.target.value)}
className={`pl-10 ${isDark ? "bg-gray-700 border-gray-600 text-white placeholder:text-gray-400" : ""}`}
placeholder="Enter your full name"
/>
</div> </div>
</div> ) : (
<>
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div className="space-y-2">
<label className={`text-sm font-medium ${isDark ? "text-gray-300" : "text-gray-700"}`}>
First Name *
</label>
<div className="relative">
<User className={`absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 ${isDark ? "text-gray-500" : "text-gray-400"}`} />
<Input
type="text"
value={formData.firstName}
onChange={(e) => handleInputChange("firstName", e.target.value)}
className={`pl-10 ${isDark ? "bg-gray-700 border-gray-600 text-white placeholder:text-gray-400" : ""}`}
placeholder="Enter your first name"
required
/>
</div>
</div>
<div className="space-y-2">
<label className={`text-sm font-medium ${isDark ? "text-gray-300" : "text-gray-700"}`}>
Last Name *
</label>
<div className="relative">
<User className={`absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 ${isDark ? "text-gray-500" : "text-gray-400"}`} />
<Input
type="text"
value={formData.lastName}
onChange={(e) => handleInputChange("lastName", e.target.value)}
className={`pl-10 ${isDark ? "bg-gray-700 border-gray-600 text-white placeholder:text-gray-400" : ""}`}
placeholder="Enter your last name"
required
/>
</div>
</div>
</div>
</>
)}
<div className="space-y-2"> <div className="space-y-2">
<label className={`text-sm font-medium ${isDark ? "text-gray-300" : "text-gray-700"}`}> <label className={`text-sm font-medium ${isDark ? "text-gray-300" : "text-gray-700"}`}>
@ -164,11 +241,14 @@ export default function AdminSettingsPage() {
<Input <Input
type="email" type="email"
value={formData.email} value={formData.email}
onChange={(e) => handleInputChange("email", e.target.value)} disabled
className={`pl-10 ${isDark ? "bg-gray-700 border-gray-600 text-white placeholder:text-gray-400" : ""}`} className={`pl-10 ${isDark ? "bg-gray-700/50 border-gray-600 text-gray-400 cursor-not-allowed" : "bg-gray-50 border-gray-300 text-gray-500 cursor-not-allowed"}`}
placeholder="Enter your email" placeholder="Email address"
/> />
</div> </div>
<p className={`text-xs ${isDark ? "text-gray-500" : "text-gray-400"}`}>
Email address cannot be changed
</p>
</div> </div>
<div className="space-y-2"> <div className="space-y-2">

17
app/(auth)/login/page.tsx
View File

@ -139,13 +139,18 @@ function LoginContent() {
// Wait a moment for cookies to be set, then redirect // Wait a moment for cookies to be set, then redirect
// Check if user is admin/staff/superuser - check all possible field names // Check if user is admin/staff/superuser - check all possible field names
const user = result.user as any; const user = result.user as any;
const isTruthy = (value: any): boolean => {
if (value === true || value === "true" || value === 1 || value === "1") return true;
return false;
};
const userIsAdmin = const userIsAdmin =
user.is_admin === true || isTruthy(user.is_admin) ||
user.isAdmin === true || isTruthy(user.isAdmin) ||
user.is_staff === true || isTruthy(user.is_staff) ||
user.isStaff === true || isTruthy(user.isStaff) ||
user.is_superuser === true || isTruthy(user.is_superuser) ||
user.isSuperuser === true; isTruthy(user.isSuperuser);
// Wait longer for cookies to be set and middleware to process // Wait longer for cookies to be set and middleware to process
setTimeout(() => { setTimeout(() => {

122
app/(pages)/book-now/page.tsx
View File

@ -1,6 +1,6 @@
"use client"; "use client";
import { useState } from "react"; import { useState, useEffect, useMemo } from "react";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { useAppTheme } from "@/components/ThemeProvider"; import { useAppTheme } from "@/components/ThemeProvider";
import { Input } from "@/components/ui/input"; import { Input } from "@/components/ui/input";
@ -24,6 +24,7 @@ import {
CheckCircle, CheckCircle,
Loader2, Loader2,
LogOut, LogOut,
CalendarCheck,
} from "lucide-react"; } from "lucide-react";
import Link from "next/link"; import Link from "next/link";
import Image from "next/image"; import Image from "next/image";
@ -34,6 +35,8 @@ import { useAuth } from "@/hooks/useAuth";
import { useAppointments } from "@/hooks/useAppointments"; import { useAppointments } from "@/hooks/useAppointments";
import { toast } from "sonner"; import { toast } from "sonner";
import type { Appointment } from "@/lib/models/appointments"; import type { Appointment } from "@/lib/models/appointments";
import { getPublicAvailability } from "@/lib/actions/appointments";
import type { AdminAvailability } from "@/lib/models/appointments";
interface User { interface User {
ID: number; ID: number;
@ -80,7 +83,7 @@ export default function BookNowPage() {
const { theme } = useAppTheme(); const { theme } = useAppTheme();
const isDark = theme === "dark"; const isDark = theme === "dark";
const { isAuthenticated, logout } = useAuth(); const { isAuthenticated, logout } = useAuth();
const { create, isCreating } = useAppointments(); const { create, isCreating, availableDates, availableDatesResponse, isLoadingAvailableDates } = useAppointments();
const [formData, setFormData] = useState({ const [formData, setFormData] = useState({
firstName: "", firstName: "",
lastName: "", lastName: "",
@ -95,6 +98,68 @@ export default function BookNowPage() {
const [showLoginDialog, setShowLoginDialog] = useState(false); const [showLoginDialog, setShowLoginDialog] = useState(false);
const [showSignupDialog, setShowSignupDialog] = useState(false); const [showSignupDialog, setShowSignupDialog] = useState(false);
const [loginPrefillEmail, setLoginPrefillEmail] = useState<string | undefined>(undefined); const [loginPrefillEmail, setLoginPrefillEmail] = useState<string | undefined>(undefined);
const [publicAvailability, setPublicAvailability] = useState<AdminAvailability | null>(null);
const [availableTimeSlots, setAvailableTimeSlots] = useState<Record<number, string[]>>({});
// Fetch public availability to get time slots
useEffect(() => {
const fetchAvailability = async () => {
try {
const availability = await getPublicAvailability();
if (availability) {
setPublicAvailability(availability);
// Try to get time slots from localStorage (if admin has set them)
// Note: This won't work for public users, but we can try
const savedTimeSlots = localStorage.getItem("adminAvailabilityTimeSlots");
if (savedTimeSlots) {
try {
const parsed = JSON.parse(savedTimeSlots);
setAvailableTimeSlots(parsed);
} catch (e) {
console.error("Failed to parse time slots:", e);
}
}
}
} catch (error) {
console.error("Failed to fetch public availability:", error);
}
};
fetchAvailability();
}, []);
// Use available_days_display from API if available, otherwise extract from dates
const availableDaysOfWeek = useMemo(() => {
// If API provides available_days_display, use it directly
if (availableDatesResponse?.available_days_display && availableDatesResponse.available_days_display.length > 0) {
return availableDatesResponse.available_days_display;
}
// Otherwise, extract from dates
if (!availableDates || availableDates.length === 0) {
return [];
}
const daysSet = new Set<string>();
const dayNames = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
availableDates.forEach((dateStr: string) => {
try {
// Parse date string (YYYY-MM-DD format)
const [year, month, day] = dateStr.split('-').map(Number);
const date = new Date(year, month - 1, day);
if (!isNaN(date.getTime())) {
const dayIndex = date.getDay();
daysSet.add(dayNames[dayIndex]);
}
} catch (e) {
console.error('Invalid date:', dateStr, e);
}
});
// Return in weekday order (Monday first)
const weekdayOrder = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
return weekdayOrder.filter(day => daysSet.has(day));
}, [availableDates, availableDatesResponse]);
const handleLogout = () => { const handleLogout = () => {
logout(); logout();
@ -566,7 +631,7 @@ export default function BookNowPage() {
Appointment Details Appointment Details
</h2> </h2>
<div className="space-y-4"> <div className="space-y-4">
<div className="space-y-2"> <div className="space-y-2">
<label <label
className={`text-sm font-medium flex items-center gap-2 ${isDark ? 'text-gray-300' : 'text-gray-700'}`} className={`text-sm font-medium flex items-center gap-2 ${isDark ? 'text-gray-300' : 'text-gray-700'}`}
@ -574,8 +639,19 @@ export default function BookNowPage() {
<Calendar className={`w-4 h-4 ${isDark ? 'text-gray-400' : 'text-gray-500'}`} /> <Calendar className={`w-4 h-4 ${isDark ? 'text-gray-400' : 'text-gray-500'}`} />
Available Days * Available Days *
</label> </label>
<div className="flex flex-wrap gap-3"> {isLoadingAvailableDates ? (
{['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'].map((day) => ( <div className="flex items-center gap-2 text-sm text-gray-500">
<Loader2 className="w-4 h-4 animate-spin" />
Loading available days...
</div>
) : availableDaysOfWeek.length === 0 ? (
<p className={`text-sm ${isDark ? 'text-gray-400' : 'text-gray-500'}`}>
No available days at the moment. Please check back later.
</p>
) : (
<>
<div className="flex flex-wrap gap-3">
{availableDaysOfWeek.map((day: string) => (
<label <label
key={day} key={day}
className={`flex items-center gap-2 cursor-pointer px-4 py-2 rounded-lg border transition-all ${ className={`flex items-center gap-2 cursor-pointer px-4 py-2 rounded-lg border transition-all ${
@ -597,7 +673,9 @@ export default function BookNowPage() {
<span className="text-sm font-medium">{day}</span> <span className="text-sm font-medium">{day}</span>
</label> </label>
))} ))}
</div> </div>
</>
)}
</div> </div>
<div className="space-y-2"> <div className="space-y-2">
@ -608,11 +686,33 @@ export default function BookNowPage() {
Preferred Time * Preferred Time *
</label> </label>
<div className="flex flex-wrap gap-3"> <div className="flex flex-wrap gap-3">
{[ {(() => {
{ value: 'morning', label: 'Morning' }, // Get available time slots based on selected days
{ value: 'lunchtime', label: 'Lunchtime' }, const dayNames = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
{ value: 'afternoon', label: 'Afternoon' } const dayIndices = formData.preferredDays.map(day => dayNames.indexOf(day));
].map((time) => (
// Get all unique time slots from selected days
let allAvailableSlots = new Set<string>();
dayIndices.forEach(dayIndex => {
if (dayIndex !== -1 && availableTimeSlots[dayIndex]) {
availableTimeSlots[dayIndex].forEach(slot => allAvailableSlots.add(slot));
}
});
// If no time slots found in localStorage, show all (fallback)
const slotsToShow = allAvailableSlots.size > 0
? Array.from(allAvailableSlots)
: ['morning', 'lunchtime', 'afternoon'];
const timeSlotMap = [
{ value: 'morning', label: 'Morning' },
{ value: 'lunchtime', label: 'Lunchtime' },
{ value: 'afternoon', label: 'Evening' }
];
// Only show time slots that are available
return timeSlotMap.filter(ts => slotsToShow.includes(ts.value));
})().map((time) => (
<label <label
key={time.value} key={time.value}
className={`flex items-center gap-2 cursor-pointer px-4 py-2 rounded-lg border transition-all ${ className={`flex items-center gap-2 cursor-pointer px-4 py-2 rounded-lg border transition-all ${

325
app/(user)/user/dashboard/page.tsx
View File

@ -1,6 +1,6 @@
"use client"; "use client";
import { useState, useEffect } from "react"; import { useMemo } from "react";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { import {
Calendar, Calendar,
@ -16,57 +16,28 @@ import {
CalendarCheck, CalendarCheck,
ArrowUpRight, ArrowUpRight,
Settings, Settings,
Loader2,
} from "lucide-react"; } from "lucide-react";
import Link from "next/link"; import Link from "next/link";
import { Navbar } from "@/components/Navbar"; import { Navbar } from "@/components/Navbar";
import { useAppTheme } from "@/components/ThemeProvider"; import { useAppTheme } from "@/components/ThemeProvider";
import { useAppointments } from "@/hooks/useAppointments";
interface Booking { import { useAuth } from "@/hooks/useAuth";
ID: number; import type { Appointment } from "@/lib/models/appointments";
scheduled_at: string; import { toast } from "sonner";
duration: number;
status: string;
amount: number;
notes: string;
jitsi_room_url?: string;
}
export default function UserDashboard() { export default function UserDashboard() {
const { theme } = useAppTheme(); const { theme } = useAppTheme();
const isDark = theme === "dark"; const isDark = theme === "dark";
const [bookings, setBookings] = useState<Booking[]>([]); const { user } = useAuth();
const [loading, setLoading] = useState(true); const {
userAppointments,
useEffect(() => { userAppointmentStats,
// Simulate API call to fetch user bookings isLoadingUserAppointments,
const fetchBookings = async () => { isLoadingUserStats,
setLoading(true); refetchUserAppointments,
try { refetchUserStats,
// Simulate network delay } = useAppointments();
await new Promise((resolve) => setTimeout(resolve, 500));
// Mock data - in real app, this would fetch from API
const mockBookings: Booking[] = [
{
ID: 1,
scheduled_at: "2025-01-15T10:00:00Z",
duration: 60,
status: "scheduled",
amount: 150,
notes: "Initial consultation",
jitsi_room_url: "https://meet.jit.si/sample-room",
},
];
setBookings(mockBookings);
} catch (error) {
console.error("Failed to fetch bookings:", error);
} finally {
setLoading(false);
}
};
fetchBookings();
}, []);
const formatDate = (dateString: string) => { const formatDate = (dateString: string) => {
const date = new Date(dateString); const date = new Date(dateString);
@ -86,47 +57,70 @@ export default function UserDashboard() {
}); });
}; };
const upcomingBookings = bookings.filter( const formatMemberSince = (dateString?: string) => {
(booking) => booking.status === "scheduled" if (!dateString) return "N/A";
); const date = new Date(dateString);
const completedBookings = bookings.filter( return date.toLocaleDateString("en-US", {
(booking) => booking.status === "completed" month: "long",
); year: "numeric",
const cancelledBookings = bookings.filter( });
(booking) => booking.status === "cancelled" };
);
// Filter appointments by status
const upcomingAppointments = useMemo(() => {
return userAppointments.filter(
(appointment) => appointment.status === "scheduled"
);
}, [userAppointments]);
const completedAppointments = useMemo(() => {
return userAppointments.filter(
(appointment) => appointment.status === "completed"
);
}, [userAppointments]);
const stats = userAppointmentStats || {
total_requests: 0,
pending_review: 0,
scheduled: 0,
rejected: 0,
completed: 0,
completion_rate: 0,
};
const statCards = [ const statCards = [
{ {
title: "Upcoming Appointments", title: "Upcoming Appointments",
value: upcomingBookings.length, value: stats.scheduled,
icon: CalendarCheck, icon: CalendarCheck,
trend: "+2", trend: stats.scheduled > 0 ? `+${stats.scheduled}` : "0",
trendUp: true, trendUp: true,
}, },
{ {
title: "Completed Sessions", title: "Completed Sessions",
value: completedBookings.length, value: stats.completed || 0,
icon: CheckCircle2, icon: CheckCircle2,
trend: "+5", trend: stats.completed > 0 ? `+${stats.completed}` : "0",
trendUp: true, trendUp: true,
}, },
{ {
title: "Total Appointments", title: "Total Appointments",
value: bookings.length, value: stats.total_requests,
icon: Calendar, icon: Calendar,
trend: "+12%", trend: `${Math.round(stats.completion_rate || 0)}%`,
trendUp: true, trendUp: true,
}, },
{ {
title: "Total Spent", title: "Pending Review",
value: `$${bookings.reduce((sum, b) => sum + b.amount, 0)}`, value: stats.pending_review,
icon: Heart, icon: Calendar,
trend: "+18%", trend: stats.pending_review > 0 ? `${stats.pending_review}` : "0",
trendUp: true, trendUp: false,
}, },
]; ];
const loading = isLoadingUserAppointments || isLoadingUserStats;
return ( return (
<div className={`min-h-screen ${isDark ? 'bg-gray-900' : 'bg-gray-50'}`}> <div className={`min-h-screen ${isDark ? 'bg-gray-900' : 'bg-gray-50'}`}>
<Navbar /> <Navbar />
@ -158,7 +152,7 @@ export default function UserDashboard() {
className="w-full sm:w-auto bg-gradient-to-r from-rose-500 to-pink-600 hover:from-rose-600 hover:to-pink-700 text-white" className="w-full sm:w-auto bg-gradient-to-r from-rose-500 to-pink-600 hover:from-rose-600 hover:to-pink-700 text-white"
> >
<CalendarPlus className="w-4 h-4 mr-2" /> <CalendarPlus className="w-4 h-4 mr-2" />
Book Appointment Request Appointment
</Button> </Button>
</Link> </Link>
</div> </div>
@ -166,7 +160,7 @@ export default function UserDashboard() {
{loading ? ( {loading ? (
<div className="flex items-center justify-center py-12"> <div className="flex items-center justify-center py-12">
<div className={`animate-spin rounded-full h-8 w-8 border-b-2 ${isDark ? 'border-gray-600' : 'border-gray-400'}`}></div> <Loader2 className={`w-8 h-8 animate-spin ${isDark ? 'text-gray-400' : 'text-gray-600'}`} />
</div> </div>
) : ( ) : (
<> <>
@ -214,53 +208,62 @@ export default function UserDashboard() {
</div> </div>
{/* Upcoming Appointments Section */} {/* Upcoming Appointments Section */}
{upcomingBookings.length > 0 && ( {upcomingAppointments.length > 0 ? (
<div className={`rounded-lg border p-4 sm:p-5 md:p-6 ${isDark ? 'bg-gray-800 border-gray-700' : 'bg-white border-gray-200'}`}> <div className={`rounded-lg border p-4 sm:p-5 md:p-6 ${isDark ? 'bg-gray-800 border-gray-700' : 'bg-white border-gray-200'}`}>
<h2 className={`text-lg font-semibold mb-4 ${isDark ? 'text-white' : 'text-gray-900'}`}> <h2 className={`text-lg font-semibold mb-4 ${isDark ? 'text-white' : 'text-gray-900'}`}>
Upcoming Appointments Upcoming Appointments
</h2> </h2>
<div className="space-y-3"> <div className="space-y-3">
{upcomingBookings.map((booking) => ( {upcomingAppointments.map((appointment) => (
<div <div
key={booking.ID} key={appointment.id}
className={`border rounded-lg p-4 hover:shadow-md transition-shadow ${isDark ? 'border-gray-700 bg-gray-700/50' : 'border-gray-200'}`} className={`border rounded-lg p-4 hover:shadow-md transition-shadow ${isDark ? 'border-gray-700 bg-gray-700/50' : 'border-gray-200'}`}
> >
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4"> <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
<div className="flex-1"> <div className="flex-1">
<div className="flex items-center gap-2 mb-2"> {appointment.scheduled_datetime && (
<Calendar className={`w-4 h-4 ${isDark ? 'text-gray-400' : 'text-gray-600'}`} /> <>
<span className={`font-semibold ${isDark ? 'text-white' : 'text-gray-900'}`}> <div className="flex items-center gap-2 mb-2">
{formatDate(booking.scheduled_at)} <Calendar className={`w-4 h-4 ${isDark ? 'text-gray-400' : 'text-gray-600'}`} />
</span> <span className={`font-semibold ${isDark ? 'text-white' : 'text-gray-900'}`}>
</div> {formatDate(appointment.scheduled_datetime)}
<div className="flex items-center gap-2 mb-2"> </span>
<Clock className={`w-4 h-4 ${isDark ? 'text-gray-400' : 'text-gray-600'}`} /> </div>
<span className={isDark ? 'text-gray-300' : 'text-gray-700'}> <div className="flex items-center gap-2 mb-2">
{formatTime(booking.scheduled_at)} <Clock className={`w-4 h-4 ${isDark ? 'text-gray-400' : 'text-gray-600'}`} />
</span> <span className={isDark ? 'text-gray-300' : 'text-gray-700'}>
<span className={`text-sm font-medium ${isDark ? 'text-gray-400' : 'text-gray-600'}`}> {formatTime(appointment.scheduled_datetime)}
({booking.duration} minutes) </span>
</span> {appointment.scheduled_duration && (
</div> <span className={`text-sm font-medium ${isDark ? 'text-gray-400' : 'text-gray-600'}`}>
{booking.notes && ( ({appointment.scheduled_duration} minutes)
</span>
)}
</div>
</>
)}
{appointment.reason && (
<p className={`text-sm mt-2 font-medium ${isDark ? 'text-gray-300' : 'text-gray-700'}`}> <p className={`text-sm mt-2 font-medium ${isDark ? 'text-gray-300' : 'text-gray-700'}`}>
{booking.notes} {appointment.reason}
</p> </p>
)} )}
</div> </div>
<div className="flex flex-col sm:items-end gap-3"> <div className="flex flex-col sm:items-end gap-3">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<span className={`px-3 py-1 rounded-full text-sm font-medium ${isDark ? 'bg-green-900/30 text-green-400' : 'bg-green-50 text-green-700'}`}> <span className={`px-3 py-1 rounded-full text-sm font-medium ${
{booking.status.charAt(0).toUpperCase() + appointment.status === "scheduled"
booking.status.slice(1)} ? isDark ? 'bg-green-900/30 text-green-400' : 'bg-green-50 text-green-700'
</span> : appointment.status === "pending_review"
<span className={`text-lg font-bold ${isDark ? 'text-white' : 'text-gray-900'}`}> ? isDark ? 'bg-yellow-900/30 text-yellow-400' : 'bg-yellow-50 text-yellow-700'
${booking.amount} : isDark ? 'bg-red-900/30 text-red-400' : 'bg-red-50 text-red-700'
}`}>
{appointment.status.charAt(0).toUpperCase() +
appointment.status.slice(1).replace('_', ' ')}
</span> </span>
</div> </div>
{booking.jitsi_room_url && ( {appointment.jitsi_meet_url && appointment.can_join_meeting && (
<a <a
href={booking.jitsi_room_url} href={appointment.jitsi_meet_url}
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
className="inline-flex items-center gap-2 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg text-sm font-medium transition-colors" className="inline-flex items-center gap-2 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg text-sm font-medium transition-colors"
@ -275,68 +278,92 @@ export default function UserDashboard() {
))} ))}
</div> </div>
</div> </div>
) : !loading && (
<div className={`rounded-lg border p-4 sm:p-5 md:p-6 ${isDark ? 'bg-gray-800 border-gray-700' : 'bg-white border-gray-200'}`}>
<div className="flex flex-col items-center justify-center py-8 text-center">
<CalendarCheck className={`w-12 h-12 mb-4 ${isDark ? 'text-gray-500' : 'text-gray-400'}`} />
<p className={`text-lg font-medium mb-2 ${isDark ? 'text-gray-300' : 'text-gray-700'}`}>
Request Appointment
</p>
<p className={`text-sm mb-6 ${isDark ? 'text-gray-400' : 'text-gray-600'}`}>
No upcoming appointments. Book an appointment to get started.
</p>
<Link href="/book-now">
<Button className="bg-gradient-to-r from-rose-500 to-pink-600 hover:from-rose-600 hover:to-pink-700 text-white">
<CalendarPlus className="w-4 h-4 mr-2" />
Request Appointment
</Button>
</Link>
</div>
</div>
)} )}
{/* Account Information */} {/* Account Information */}
<div className={`rounded-lg border p-4 sm:p-5 md:p-6 ${isDark ? 'bg-gray-800 border-gray-700' : 'bg-white border-gray-200'}`}> {user && (
<h2 className={`text-lg font-semibold mb-4 ${isDark ? 'text-white' : 'text-gray-900'}`}> <div className={`rounded-lg border p-4 sm:p-5 md:p-6 ${isDark ? 'bg-gray-800 border-gray-700' : 'bg-white border-gray-200'}`}>
Account Information <h2 className={`text-lg font-semibold mb-4 ${isDark ? 'text-white' : 'text-gray-900'}`}>
</h2> Account Information
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4"> </h2>
<div className="flex items-center gap-3"> <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div className={`p-2 rounded-lg ${isDark ? 'bg-gray-700' : 'bg-gray-50'}`}> <div className="flex items-center gap-3">
<User className={`w-4 h-4 ${isDark ? 'text-gray-400' : 'text-gray-600'}`} /> <div className={`p-2 rounded-lg ${isDark ? 'bg-gray-700' : 'bg-gray-50'}`}>
<User className={`w-4 h-4 ${isDark ? 'text-gray-400' : 'text-gray-600'}`} />
</div>
<div>
<p className={`text-sm font-medium mb-1 ${isDark ? 'text-gray-400' : 'text-gray-600'}`}>
Full Name
</p>
<p className={`text-base font-semibold ${isDark ? 'text-white' : 'text-gray-900'}`}>
{user.first_name} {user.last_name}
</p>
</div>
</div> </div>
<div> <div className="flex items-center gap-3">
<p className={`text-sm font-medium mb-1 ${isDark ? 'text-gray-400' : 'text-gray-600'}`}> <div className={`p-2 rounded-lg ${isDark ? 'bg-gray-700' : 'bg-gray-50'}`}>
Full Name <Mail className={`w-4 h-4 ${isDark ? 'text-gray-400' : 'text-gray-600'}`} />
</p> </div>
<p className={`text-base font-semibold ${isDark ? 'text-white' : 'text-gray-900'}`}> <div>
John Doe <p className={`text-sm font-medium mb-1 ${isDark ? 'text-gray-400' : 'text-gray-600'}`}>
</p> Email
</div> </p>
</div> <p className={`text-base font-semibold ${isDark ? 'text-white' : 'text-gray-900'}`}>
<div className="flex items-center gap-3"> {user.email}
<div className={`p-2 rounded-lg ${isDark ? 'bg-gray-700' : 'bg-gray-50'}`}> </p>
<Mail className={`w-4 h-4 ${isDark ? 'text-gray-400' : 'text-gray-600'}`} /> </div>
</div>
<div>
<p className={`text-sm font-medium mb-1 ${isDark ? 'text-gray-400' : 'text-gray-600'}`}>
Email
</p>
<p className={`text-base font-semibold ${isDark ? 'text-white' : 'text-gray-900'}`}>
john.doe@example.com
</p>
</div>
</div>
<div className="flex items-center gap-3">
<div className={`p-2 rounded-lg ${isDark ? 'bg-gray-700' : 'bg-gray-50'}`}>
<Phone className={`w-4 h-4 ${isDark ? 'text-gray-400' : 'text-gray-600'}`} />
</div>
<div>
<p className={`text-sm font-medium mb-1 ${isDark ? 'text-gray-400' : 'text-gray-600'}`}>
Phone
</p>
<p className={`text-base font-semibold ${isDark ? 'text-white' : 'text-gray-900'}`}>
+1 (555) 123-4567
</p>
</div>
</div>
<div className="flex items-center gap-3">
<div className={`p-2 rounded-lg ${isDark ? 'bg-gray-700' : 'bg-gray-50'}`}>
<Calendar className={`w-4 h-4 ${isDark ? 'text-gray-400' : 'text-gray-600'}`} />
</div>
<div>
<p className={`text-sm font-medium mb-1 ${isDark ? 'text-gray-400' : 'text-gray-600'}`}>
Member Since
</p>
<p className={`text-base font-semibold ${isDark ? 'text-white' : 'text-gray-900'}`}>
January 2025
</p>
</div> </div>
{user.phone_number && (
<div className="flex items-center gap-3">
<div className={`p-2 rounded-lg ${isDark ? 'bg-gray-700' : 'bg-gray-50'}`}>
<Phone className={`w-4 h-4 ${isDark ? 'text-gray-400' : 'text-gray-600'}`} />
</div>
<div>
<p className={`text-sm font-medium mb-1 ${isDark ? 'text-gray-400' : 'text-gray-600'}`}>
Phone
</p>
<p className={`text-base font-semibold ${isDark ? 'text-white' : 'text-gray-900'}`}>
{user.phone_number}
</p>
</div>
</div>
)}
{user.date_joined && (
<div className="flex items-center gap-3">
<div className={`p-2 rounded-lg ${isDark ? 'bg-gray-700' : 'bg-gray-50'}`}>
<Calendar className={`w-4 h-4 ${isDark ? 'text-gray-400' : 'text-gray-600'}`} />
</div>
<div>
<p className={`text-sm font-medium mb-1 ${isDark ? 'text-gray-400' : 'text-gray-600'}`}>
Member Since
</p>
<p className={`text-base font-semibold ${isDark ? 'text-white' : 'text-gray-900'}`}>
{formatMemberSince(user.date_joined)}
</p>
</div>
</div>
)}
</div> </div>
</div> </div>
</div> )}
</> </>
)} )}
</main> </main>

25
components/LoginDialog.tsx
View File

@ -70,9 +70,30 @@ export function LoginDialog({ open, onOpenChange, onLoginSuccess, prefillEmail,
onOpenChange(false); onOpenChange(false);
// Reset form // Reset form
setLoginData({ email: "", password: "" }); setLoginData({ email: "", password: "" });
// Redirect to user dashboard
router.push("/user/dashboard"); // Check if user is admin/staff/superuser
const user = result.user as any;
const isTruthy = (value: any): boolean => {
if (value === true || value === "true" || value === 1 || value === "1") return true;
return false;
};
const userIsAdmin =
isTruthy(user.is_admin) ||
isTruthy(user.isAdmin) ||
isTruthy(user.is_staff) ||
isTruthy(user.isStaff) ||
isTruthy(user.is_superuser) ||
isTruthy(user.isSuperuser);
// Call onLoginSuccess callback first
onLoginSuccess(); onLoginSuccess();
// Redirect based on user role
const redirectPath = userIsAdmin ? "/admin/dashboard" : "/user/dashboard";
setTimeout(() => {
window.location.href = redirectPath;
}, 200);
} }
} catch (err) { } catch (err) {
const errorMessage = err instanceof Error ? err.message : "Login failed. Please try again."; const errorMessage = err instanceof Error ? err.message : "Login failed. Please try again.";

9
components/Navbar.tsx
View File

@ -25,7 +25,7 @@ export function Navbar() {
const isUserDashboard = pathname?.startsWith("/user/dashboard"); const isUserDashboard = pathname?.startsWith("/user/dashboard");
const isUserSettings = pathname?.startsWith("/user/settings"); const isUserSettings = pathname?.startsWith("/user/settings");
const isUserRoute = pathname?.startsWith("/user/"); const isUserRoute = pathname?.startsWith("/user/");
const { isAuthenticated, logout } = useAuth(); const { isAuthenticated, logout, user, isAdmin } = useAuth();
const scrollToSection = (id: string) => { const scrollToSection = (id: string) => {
const element = document.getElementById(id); const element = document.getElementById(id);
@ -36,8 +36,11 @@ export function Navbar() {
}; };
const handleLoginSuccess = () => { const handleLoginSuccess = () => {
// Redirect to admin dashboard after successful login // Check if user is admin/staff/superuser and redirect accordingly
router.push("/admin/dashboard"); // Note: user might not be immediately available, so we check isAdmin from hook
// which is computed from the user data
const redirectPath = isAdmin ? "/admin/dashboard" : "/user/dashboard";
router.push(redirectPath);
setMobileMenuOpen(false); setMobileMenuOpen(false);
}; };

18
hooks/useAppointments.ts
View File

@ -7,6 +7,7 @@ import {
getAvailableDates, getAvailableDates,
listAppointments, listAppointments,
getUserAppointments, getUserAppointments,
getUserAppointmentStats,
getAppointmentDetail, getAppointmentDetail,
scheduleAppointment, scheduleAppointment,
rejectAppointment, rejectAppointment,
@ -25,6 +26,8 @@ import type {
Appointment, Appointment,
AdminAvailability, AdminAvailability,
AppointmentStats, AppointmentStats,
UserAppointmentStats,
AvailableDatesResponse,
JitsiMeetingInfo, JitsiMeetingInfo,
} from "@/lib/models/appointments"; } from "@/lib/models/appointments";
@ -32,7 +35,7 @@ export function useAppointments() {
const queryClient = useQueryClient(); const queryClient = useQueryClient();
// Get available dates query // Get available dates query
const availableDatesQuery = useQuery<string[]>({ const availableDatesQuery = useQuery<AvailableDatesResponse>({
queryKey: ["appointments", "available-dates"], queryKey: ["appointments", "available-dates"],
queryFn: () => getAvailableDates(), queryFn: () => getAvailableDates(),
staleTime: 5 * 60 * 1000, // 5 minutes staleTime: 5 * 60 * 1000, // 5 minutes
@ -75,6 +78,13 @@ export function useAppointments() {
staleTime: 1 * 60 * 1000, // 1 minute staleTime: 1 * 60 * 1000, // 1 minute
}); });
// Get user appointment stats query
const userAppointmentStatsQuery = useQuery<UserAppointmentStats>({
queryKey: ["appointments", "user", "stats"],
queryFn: () => getUserAppointmentStats(),
staleTime: 1 * 60 * 1000, // 1 minute
});
// Get Jitsi meeting info query // Get Jitsi meeting info query
const useJitsiMeetingInfo = (id: string | null) => { const useJitsiMeetingInfo = (id: string | null) => {
return useQuery<JitsiMeetingInfo>({ return useQuery<JitsiMeetingInfo>({
@ -160,11 +170,13 @@ export function useAppointments() {
return { return {
// Queries // Queries
availableDates: availableDatesQuery.data || [], availableDates: availableDatesQuery.data?.dates || [],
availableDatesResponse: availableDatesQuery.data,
appointments: appointmentsQuery.data || [], appointments: appointmentsQuery.data || [],
userAppointments: userAppointmentsQuery.data || [], userAppointments: userAppointmentsQuery.data || [],
adminAvailability: adminAvailabilityQuery.data, adminAvailability: adminAvailabilityQuery.data,
appointmentStats: appointmentStatsQuery.data, appointmentStats: appointmentStatsQuery.data,
userAppointmentStats: userAppointmentStatsQuery.data,
// Query states // Query states
isLoadingAvailableDates: availableDatesQuery.isLoading, isLoadingAvailableDates: availableDatesQuery.isLoading,
@ -172,6 +184,7 @@ export function useAppointments() {
isLoadingUserAppointments: userAppointmentsQuery.isLoading, isLoadingUserAppointments: userAppointmentsQuery.isLoading,
isLoadingAdminAvailability: adminAvailabilityQuery.isLoading, isLoadingAdminAvailability: adminAvailabilityQuery.isLoading,
isLoadingStats: appointmentStatsQuery.isLoading, isLoadingStats: appointmentStatsQuery.isLoading,
isLoadingUserStats: userAppointmentStatsQuery.isLoading,
// Query refetch functions // Query refetch functions
refetchAvailableDates: availableDatesQuery.refetch, refetchAvailableDates: availableDatesQuery.refetch,
@ -179,6 +192,7 @@ export function useAppointments() {
refetchUserAppointments: userAppointmentsQuery.refetch, refetchUserAppointments: userAppointmentsQuery.refetch,
refetchAdminAvailability: adminAvailabilityQuery.refetch, refetchAdminAvailability: adminAvailabilityQuery.refetch,
refetchStats: appointmentStatsQuery.refetch, refetchStats: appointmentStatsQuery.refetch,
refetchUserStats: userAppointmentStatsQuery.refetch,
// Hooks for specific queries // Hooks for specific queries
useAppointmentDetail, useAppointmentDetail,

75
lib/actions/appointments.ts
View File

@ -13,6 +13,7 @@ import type {
AvailableDatesResponse, AvailableDatesResponse,
AdminAvailability, AdminAvailability,
AppointmentStats, AppointmentStats,
UserAppointmentStats,
JitsiMeetingInfo, JitsiMeetingInfo,
ApiError, ApiError,
} from "@/lib/models/appointments"; } from "@/lib/models/appointments";
@ -79,7 +80,7 @@ export async function createAppointment(
} }
// Get available dates // Get available dates
export async function getAvailableDates(): Promise<string[]> { export async function getAvailableDates(): Promise<AvailableDatesResponse> {
const response = await fetch(API_ENDPOINTS.meetings.availableDates, { const response = await fetch(API_ENDPOINTS.meetings.availableDates, {
method: "GET", method: "GET",
headers: { headers: {
@ -94,11 +95,14 @@ export async function getAvailableDates(): Promise<string[]> {
throw new Error(errorMessage); throw new Error(errorMessage);
} }
// API returns array of dates in YYYY-MM-DD format // If API returns array directly, wrap it in response object
if (Array.isArray(data)) { if (Array.isArray(data)) {
return data; return {
dates: data,
};
} }
return (data as AvailableDatesResponse).dates || [];
return data as AvailableDatesResponse;
} }
// List appointments (Admin sees all, users see their own) // List appointments (Admin sees all, users see their own)
@ -279,6 +283,43 @@ export async function rejectAppointment(
return data as unknown as Appointment; return data as unknown as Appointment;
} }
// Get admin availability (public version - tries without auth first)
export async function getPublicAvailability(): Promise<AdminAvailability | null> {
try {
const response = await fetch(API_ENDPOINTS.meetings.adminAvailability, {
method: "GET",
headers: {
"Content-Type": "application/json",
},
});
if (!response.ok) {
return null;
}
const data: any = await response.json();
// Handle both string and array formats for available_days
let availableDays: number[] = [];
if (typeof data.available_days === 'string') {
try {
availableDays = JSON.parse(data.available_days);
} catch {
availableDays = data.available_days.split(',').map((d: string) => parseInt(d.trim())).filter((d: number) => !isNaN(d));
}
} else if (Array.isArray(data.available_days)) {
availableDays = data.available_days;
}
return {
available_days: availableDays,
available_days_display: data.available_days_display || [],
} as AdminAvailability;
} catch (error) {
return null;
}
}
// Get admin availability // Get admin availability
export async function getAdminAvailability(): Promise<AdminAvailability> { export async function getAdminAvailability(): Promise<AdminAvailability> {
const tokens = getStoredTokens(); const tokens = getStoredTokens();
@ -411,6 +452,32 @@ export async function getAppointmentStats(): Promise<AppointmentStats> {
return data; return data;
} }
// Get user appointment stats
export async function getUserAppointmentStats(): Promise<UserAppointmentStats> {
const tokens = getStoredTokens();
if (!tokens.access) {
throw new Error("Authentication required.");
}
const response = await fetch(API_ENDPOINTS.meetings.userAppointmentStats, {
method: "GET",
headers: {
"Content-Type": "application/json",
Authorization: `Bearer ${tokens.access}`,
},
});
const data: UserAppointmentStats = await response.json();
if (!response.ok) {
const errorMessage = extractErrorMessage(data as unknown as ApiError);
throw new Error(errorMessage);
}
return data;
}
// Get Jitsi meeting info // Get Jitsi meeting info
export async function getJitsiMeetingInfo(id: string): Promise<JitsiMeetingInfo> { export async function getJitsiMeetingInfo(id: string): Promise<JitsiMeetingInfo> {
const tokens = getStoredTokens(); const tokens = getStoredTokens();

70
lib/actions/auth.ts
View File

@ -8,6 +8,7 @@ import type {
VerifyPasswordResetOtpInput, VerifyPasswordResetOtpInput,
ResetPasswordInput, ResetPasswordInput,
TokenRefreshInput, TokenRefreshInput,
UpdateProfileInput,
} from "@/lib/schema/auth"; } from "@/lib/schema/auth";
import type { AuthResponse, ApiError, AuthTokens, User } from "@/lib/models/auth"; import type { AuthResponse, ApiError, AuthTokens, User } from "@/lib/models/auth";
@ -369,3 +370,72 @@ export async function getAllUsers(): Promise<User[]> {
return []; return [];
} }
// Get user profile
export async function getProfile(): Promise<User> {
const tokens = getStoredTokens();
if (!tokens.access) {
throw new Error("Authentication required.");
}
const response = await fetch(API_ENDPOINTS.auth.getProfile, {
method: "GET",
headers: {
"Content-Type": "application/json",
Authorization: `Bearer ${tokens.access}`,
},
});
const data = await response.json();
if (!response.ok) {
const errorMessage = extractErrorMessage(data);
throw new Error(errorMessage);
}
// Handle different response formats
if (data.user) {
return data.user;
}
if (data.id) {
return data;
}
throw new Error("Invalid profile response format");
}
// Update user profile
export async function updateProfile(input: UpdateProfileInput): Promise<User> {
const tokens = getStoredTokens();
if (!tokens.access) {
throw new Error("Authentication required.");
}
const response = await fetch(API_ENDPOINTS.auth.updateProfile, {
method: "PATCH",
headers: {
"Content-Type": "application/json",
Authorization: `Bearer ${tokens.access}`,
},
body: JSON.stringify(input),
});
const data = await response.json();
if (!response.ok) {
const errorMessage = extractErrorMessage(data);
throw new Error(errorMessage);
}
// Handle different response formats
if (data.user) {
return data.user;
}
if (data.id) {
return data;
}
throw new Error("Invalid profile response format");
}

3
lib/api_urls.ts
View File

@ -13,6 +13,8 @@ export const API_ENDPOINTS = {
resetPassword: `${API_BASE_URL}/auth/reset-password/`, resetPassword: `${API_BASE_URL}/auth/reset-password/`,
tokenRefresh: `${API_BASE_URL}/auth/token/refresh/`, tokenRefresh: `${API_BASE_URL}/auth/token/refresh/`,
allUsers: `${API_BASE_URL}/auth/all-users/`, allUsers: `${API_BASE_URL}/auth/all-users/`,
getProfile: `${API_BASE_URL}/auth/profile/`,
updateProfile: `${API_BASE_URL}/auth/profile/update/`,
}, },
meetings: { meetings: {
base: `${API_BASE_URL}/meetings/`, base: `${API_BASE_URL}/meetings/`,
@ -20,6 +22,7 @@ export const API_ENDPOINTS = {
createAppointment: `${API_BASE_URL}/meetings/appointments/create/`, createAppointment: `${API_BASE_URL}/meetings/appointments/create/`,
listAppointments: `${API_BASE_URL}/meetings/appointments/`, listAppointments: `${API_BASE_URL}/meetings/appointments/`,
userAppointments: `${API_BASE_URL}/meetings/user/appointments/`, userAppointments: `${API_BASE_URL}/meetings/user/appointments/`,
userAppointmentStats: `${API_BASE_URL}/meetings/user/appointments/stats/`,
adminAvailability: `${API_BASE_URL}/meetings/admin/availability/`, adminAvailability: `${API_BASE_URL}/meetings/admin/availability/`,
}, },
} as const; } as const;

11
lib/models/appointments.ts
View File

@ -9,7 +9,7 @@ export interface Appointment {
reason?: string; reason?: string;
preferred_dates: string[]; // YYYY-MM-DD format preferred_dates: string[]; // YYYY-MM-DD format
preferred_time_slots: string[]; // "morning", "afternoon", "evening" preferred_time_slots: string[]; // "morning", "afternoon", "evening"
status: "pending_review" | "scheduled" | "rejected"; status: "pending_review" | "scheduled" | "rejected" | "completed";
created_at: string; created_at: string;
updated_at: string; updated_at: string;
scheduled_datetime?: string; scheduled_datetime?: string;
@ -55,6 +55,15 @@ export interface AppointmentStats {
users?: number; // Total users count from API users?: number; // Total users count from API
} }
export interface UserAppointmentStats {
total_requests: number;
pending_review: number;
scheduled: number;
rejected: number;
completed: number;
completion_rate: number;
}
export interface JitsiMeetingInfo { export interface JitsiMeetingInfo {
meeting_url: string; meeting_url: string;
room_id: string; room_id: string;

9
lib/schema/auth.ts
View File

@ -78,3 +78,12 @@ export const tokenRefreshSchema = z.object({
export type TokenRefreshInput = z.infer<typeof tokenRefreshSchema>; export type TokenRefreshInput = z.infer<typeof tokenRefreshSchema>;
// Update Profile Schema
export const updateProfileSchema = z.object({
first_name: z.string().min(1, "First name is required"),
last_name: z.string().min(1, "Last name is required"),
phone_number: z.string().optional(),
});
export type UpdateProfileInput = z.infer<typeof updateProfileSchema>;

240
lib/utils/encryption.ts Normal file
View File

@ -0,0 +1,240 @@
/**
* Encryption utilities for securing sensitive user data
* Uses Web Crypto API with AES-GCM for authenticated encryption
*/
// Generate a key from a password using PBKDF2
async function deriveKey(password: string, salt: BufferSource): Promise<CryptoKey> {
const encoder = new TextEncoder();
const keyMaterial = await crypto.subtle.importKey(
"raw",
encoder.encode(password),
"PBKDF2",
false,
["deriveBits", "deriveKey"]
);
return crypto.subtle.deriveKey(
{
name: "PBKDF2",
salt: salt,
iterations: 100000,
hash: "SHA-256",
},
keyMaterial,
{ name: "AES-GCM", length: 256 },
false,
["encrypt", "decrypt"]
);
}
// Get or create encryption key from localStorage
async function getEncryptionKey(): Promise<CryptoKey> {
const STORAGE_KEY = "encryption_salt";
const PASSWORD_KEY = "encryption_password";
// Generate a unique password based on user's browser fingerprint
// This creates a consistent key per browser/device
const getBrowserFingerprint = (): string => {
try {
const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
if (ctx) {
ctx.textBaseline = "top";
ctx.font = "14px 'Arial'";
ctx.textBaseline = "alphabetic";
ctx.fillStyle = "#f60";
ctx.fillRect(125, 1, 62, 20);
ctx.fillStyle = "#069";
ctx.fillText("Browser fingerprint", 2, 15);
ctx.fillStyle = "rgba(102, 204, 0, 0.7)";
ctx.fillText("Browser fingerprint", 4, 17);
}
const fingerprint = (canvas.toDataURL() || "") +
(navigator.userAgent || "") +
(navigator.language || "") +
(screen.width || 0) +
(screen.height || 0) +
(new Date().getTimezoneOffset() || 0);
return fingerprint;
} catch (error) {
// Fallback if canvas fingerprinting fails
return (navigator.userAgent || "") +
(navigator.language || "") +
(screen.width || 0) +
(screen.height || 0);
}
};
let salt = localStorage.getItem(STORAGE_KEY);
let password = localStorage.getItem(PASSWORD_KEY);
if (!salt || !password) {
// Generate new salt and password
const saltBytes = crypto.getRandomValues(new Uint8Array(16));
salt = Array.from(saltBytes)
.map(b => b.toString(16).padStart(2, "0"))
.join("");
password = getBrowserFingerprint();
localStorage.setItem(STORAGE_KEY, salt);
localStorage.setItem(PASSWORD_KEY, password);
}
// Convert hex string back to Uint8Array
const saltBytes = salt.match(/.{1,2}/g)?.map(byte => parseInt(byte, 16)) || [];
const saltArray = new Uint8Array(saltBytes);
return deriveKey(password, saltArray);
}
// Encrypt a string value
export async function encryptValue(value: string): Promise<string> {
if (!value || typeof window === "undefined") return value;
try {
const key = await getEncryptionKey();
const encoder = new TextEncoder();
const data = encoder.encode(value);
// Generate a random IV for each encryption
const iv = crypto.getRandomValues(new Uint8Array(12));
const encrypted = await crypto.subtle.encrypt(
{
name: "AES-GCM",
iv: iv,
},
key,
data
);
// Combine IV and encrypted data
const combined = new Uint8Array(iv.length + encrypted.byteLength);
combined.set(iv);
combined.set(new Uint8Array(encrypted), iv.length);
// Convert to base64 for storage
const binaryString = String.fromCharCode(...combined);
return btoa(binaryString);
} catch (error) {
console.error("Encryption error:", error);
// If encryption fails, return original value (graceful degradation)
return value;
}
}
// Decrypt a string value
export async function decryptValue(encryptedValue: string): Promise<string> {
if (!encryptedValue || typeof window === "undefined") return encryptedValue;
try {
const key = await getEncryptionKey();
// Decode from base64
const binaryString = atob(encryptedValue);
const combined = Uint8Array.from(binaryString, c => c.charCodeAt(0));
// Extract IV and encrypted data
const iv = combined.slice(0, 12);
const encrypted = combined.slice(12);
const decrypted = await crypto.subtle.decrypt(
{
name: "AES-GCM",
iv: iv,
},
key,
encrypted
);
const decoder = new TextDecoder();
return decoder.decode(decrypted);
} catch (error) {
console.error("Decryption error:", error);
// If decryption fails, try to return as-is (might be unencrypted legacy data)
return encryptedValue;
}
}
// Encrypt sensitive fields in a user object
export async function encryptUserData(user: any): Promise<any> {
if (!user || typeof window === "undefined") return user;
const encrypted = { ...user };
// Encrypt sensitive fields
const sensitiveFields = ["first_name", "last_name", "phone_number", "email"];
for (const field of sensitiveFields) {
if (encrypted[field]) {
encrypted[field] = await encryptValue(String(encrypted[field]));
}
}
return encrypted;
}
// Decrypt sensitive fields in a user object
export async function decryptUserData(user: any): Promise<any> {
if (!user || typeof window === "undefined") return user;
const decrypted = { ...user };
// Decrypt sensitive fields
const sensitiveFields = ["first_name", "last_name", "phone_number", "email"];
for (const field of sensitiveFields) {
if (decrypted[field]) {
try {
decrypted[field] = await decryptValue(String(decrypted[field]));
} catch (error) {
// If decryption fails, keep original value (might be unencrypted)
console.warn(`Failed to decrypt field ${field}:`, error);
}
}
}
return decrypted;
}
// Check if a value is encrypted (heuristic check)
function isEncrypted(value: string): boolean {
// Encrypted values are base64 encoded and have a specific structure
// This is a simple heuristic - encrypted values will be longer and base64-like
if (!value || value.length < 20) return false;
try {
// Try to decode as base64
atob(value);
// If it decodes successfully and is long enough, it's likely encrypted
return value.length > 30;
} catch {
return false;
}
}
// Smart encrypt/decrypt that handles both encrypted and unencrypted data
export async function smartDecryptUserData(user: any): Promise<any> {
if (!user || typeof window === "undefined") return user;
const decrypted = { ...user };
const sensitiveFields = ["first_name", "last_name", "phone_number", "email"];
for (const field of sensitiveFields) {
if (decrypted[field] && typeof decrypted[field] === "string") {
if (isEncrypted(decrypted[field])) {
try {
decrypted[field] = await decryptValue(decrypted[field]);
} catch (error) {
console.warn(`Failed to decrypt field ${field}:`, error);
}
}
// If not encrypted, keep as-is (backward compatibility)
}
}
return decrypted;
}

1
middleware.ts
View File

@ -72,4 +72,3 @@ export const config = {
"/((?!api|_next/static|_next/image|favicon.ico|.*\\.(?:svg|png|jpg|jpeg|gif|webp)$).*)", "/((?!api|_next/static|_next/image|favicon.ico|.*\\.(?:svg|png|jpg|jpeg|gif|webp)$).*)",
], ],
}; };