diff --git a/app/(admin)/_components/header.tsx b/app/(admin)/_components/header.tsx index c1a65a0..bd15560 100644 --- a/app/(admin)/_components/header.tsx +++ b/app/(admin)/_components/header.tsx @@ -53,7 +53,7 @@ export function Header() {
{/* Logo */} - +
@@ -63,9 +63,9 @@ export function Header() { {/* Navigation Links */}
+ ); +} + diff --git a/app/book-now/page.tsx b/app/(pages)/book-now/page.tsx similarity index 100% rename from app/book-now/page.tsx rename to app/(pages)/book-now/page.tsx diff --git a/app/(pages)/layout.tsx b/app/(pages)/layout.tsx new file mode 100644 index 0000000..2302d56 --- /dev/null +++ b/app/(pages)/layout.tsx @@ -0,0 +1,8 @@ +export default function PagesLayout({ children }: { children: React.ReactNode }) { + return ( +
+ {children} +
+ ) +} + diff --git a/app/(user)/layout.tsx b/app/(user)/layout.tsx new file mode 100644 index 0000000..4a75296 --- /dev/null +++ b/app/(user)/layout.tsx @@ -0,0 +1,8 @@ +export default function UserLayout({ children }: { children: React.ReactNode }) { + return ( +
+ {children} +
+ ) +} + diff --git a/app/user/dashboard/page.tsx b/app/(user)/user/dashboard/page.tsx similarity index 94% rename from app/user/dashboard/page.tsx rename to app/(user)/user/dashboard/page.tsx index e622c67..63064aa 100644 --- a/app/user/dashboard/page.tsx +++ b/app/(user)/user/dashboard/page.tsx @@ -15,6 +15,7 @@ import { XCircle, CalendarCheck, ArrowUpRight, + Settings, } from "lucide-react"; import Link from "next/link"; import { Navbar } from "@/components/Navbar"; @@ -139,14 +140,25 @@ export default function UserDashboard() { Here's an overview of your appointments

- - - +
+ + + + + + +
{loading ? ( diff --git a/app/(user)/user/settings/page.tsx b/app/(user)/user/settings/page.tsx new file mode 100644 index 0000000..face2da --- /dev/null +++ b/app/(user)/user/settings/page.tsx @@ -0,0 +1,310 @@ +"use client"; + +import { useState } from "react"; +import { Button } from "@/components/ui/button"; +import { Input } from "@/components/ui/input"; +import { Card, CardHeader, CardTitle, CardDescription, CardContent } from "@/components/ui/card"; +import { + User, + Mail, + Phone, + Save, + ArrowLeft, + Lock, + Eye, + EyeOff, +} from "lucide-react"; +import Link from "next/link"; +import { Navbar } from "@/components/Navbar"; + +export default function SettingsPage() { + const [loading, setLoading] = useState(false); + const [formData, setFormData] = useState({ + fullName: "John Doe", + email: "john.doe@example.com", + phone: "+1 (555) 123-4567", + }); + const [passwordData, setPasswordData] = useState({ + currentPassword: "", + newPassword: "", + confirmPassword: "", + }); + const [showPasswords, setShowPasswords] = useState({ + current: false, + new: false, + confirm: false, + }); + + const handleInputChange = (field: string, value: string) => { + setFormData((prev) => ({ + ...prev, + [field]: value, + })); + }; + + const handlePasswordChange = (field: string, value: string) => { + setPasswordData((prev) => ({ + ...prev, + [field]: value, + })); + }; + + const togglePasswordVisibility = (field: "current" | "new" | "confirm") => { + setShowPasswords((prev) => ({ + ...prev, + [field]: !prev[field], + })); + }; + + const handleSave = async () => { + setLoading(true); + // Simulate API call + await new Promise((resolve) => setTimeout(resolve, 1000)); + setLoading(false); + // In a real app, you would show a success message here + }; + + const handlePasswordSave = async () => { + if (passwordData.newPassword !== passwordData.confirmPassword) { + // In a real app, you would show an error message here + alert("New passwords do not match"); + return; + } + if (passwordData.newPassword.length < 8) { + // In a real app, you would show an error message here + alert("Password must be at least 8 characters long"); + return; + } + setLoading(true); + // Simulate API call + await new Promise((resolve) => setTimeout(resolve, 1000)); + setLoading(false); + // Reset password fields + setPasswordData({ + currentPassword: "", + newPassword: "", + confirmPassword: "", + }); + // In a real app, you would show a success message here + }; + + return ( +
+ + + {/* Main Content */} +
+ {/* Header */} +
+
+ + + +
+

+ Settings +

+

+ Manage your account settings and preferences +

+
+
+ +
+ +
+
+ {/* Profile Information */} + + +
+ + Profile Information +
+ + Update your personal information and contact details + + + +
+ +
+ + handleInputChange("fullName", e.target.value)} + className="pl-10" + placeholder="Enter your full name" + /> +
+
+ +
+ +
+ + handleInputChange("email", e.target.value)} + className="pl-10" + placeholder="Enter your email" + /> +
+
+ +
+ +
+ + handleInputChange("phone", e.target.value)} + className="pl-10" + placeholder="Enter your phone number" + /> +
+
+ + + + {/* Change Password */} + + +
+ + Change Password +
+ + Update your password to keep your account secure + + + +
+ +
+ + handlePasswordChange("currentPassword", e.target.value)} + className="pl-10 pr-10" + placeholder="Enter your current password" + /> + +
+
+ +
+ +
+ + handlePasswordChange("newPassword", e.target.value)} + className="pl-10 pr-10" + placeholder="Enter your new password" + /> + +
+

+ Password must be at least 8 characters long +

+
+ +
+ +
+ + handlePasswordChange("confirmPassword", e.target.value)} + className="pl-10 pr-10" + placeholder="Confirm your new password" + /> + +
+
+ +
+ +
+ + +
+
+
+
+ ); +} + diff --git a/components/Navbar.tsx b/components/Navbar.tsx index 29f4165..9826e01 100644 --- a/components/Navbar.tsx +++ b/components/Navbar.tsx @@ -5,9 +5,13 @@ import { Button } from "@/components/ui/button"; import { Heart } from "lucide-react"; import { ThemeToggle } from "@/components/ThemeToggle"; import { useEffect, useState } from "react"; +import { LoginDialog } from "@/components/LoginDialog"; +import { useRouter } from "next/navigation"; export function Navbar() { const [isDark, setIsDark] = useState(false); + const [loginDialogOpen, setLoginDialogOpen] = useState(false); + const router = useRouter(); useEffect(() => { const checkTheme = () => { @@ -31,6 +35,11 @@ export function Navbar() { } }; + const handleLoginSuccess = () => { + // Redirect to user dashboard after successful login + router.push("/user/dashboard"); + }; + return (
-
+ + {/* Login Dialog */} + ); }