391 lines
16 KiB
TypeScript
391 lines
16 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useEffect } 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,
|
|
Loader2,
|
|
} from "lucide-react";
|
|
import Link from "next/link";
|
|
import { useAppTheme } from "@/components/ThemeProvider";
|
|
import { getProfile, updateProfile } from "@/lib/actions/auth";
|
|
import { toast } from "sonner";
|
|
|
|
export default function AdminSettingsPage() {
|
|
const [loading, setLoading] = useState(false);
|
|
const [fetching, setFetching] = useState(true);
|
|
const [formData, setFormData] = useState({
|
|
firstName: "",
|
|
lastName: "",
|
|
email: "",
|
|
phone: "",
|
|
});
|
|
const [passwordData, setPasswordData] = useState({
|
|
currentPassword: "",
|
|
newPassword: "",
|
|
confirmPassword: "",
|
|
});
|
|
const [showPasswords, setShowPasswords] = useState({
|
|
current: false,
|
|
new: false,
|
|
confirm: false,
|
|
});
|
|
const { theme } = useAppTheme();
|
|
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) => {
|
|
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 () => {
|
|
if (!formData.firstName || !formData.lastName) {
|
|
toast.error("First name and last name are required");
|
|
return;
|
|
}
|
|
|
|
setLoading(true);
|
|
try {
|
|
await updateProfile({
|
|
first_name: formData.firstName,
|
|
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 () => {
|
|
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 (
|
|
<div className={`min-h-screen ${isDark ? "bg-gray-900" : "bg-gray-50"}`}>
|
|
{/* Main Content */}
|
|
<main className="p-4 sm:p-6 lg:p-8 space-y-6">
|
|
{/* Header */}
|
|
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-6">
|
|
<div className="flex items-center gap-4">
|
|
<Link href="/admin/dashboard">
|
|
<Button variant="ghost" size="icon" className={isDark ? "hover:bg-gray-800 text-gray-300" : "hover:bg-gray-100"}>
|
|
<ArrowLeft className="w-4 h-4" />
|
|
</Button>
|
|
</Link>
|
|
<div>
|
|
<h1 className={`text-2xl font-semibold mb-1 ${isDark ? "text-white" : "text-gray-900"}`}>
|
|
Settings
|
|
</h1>
|
|
<p className={`text-sm ${isDark ? "text-gray-400" : "text-gray-600"}`}>
|
|
Manage your account settings and practice information
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<Button
|
|
onClick={handleSave}
|
|
disabled={loading || fetching}
|
|
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 ? (
|
|
<>
|
|
<Loader2 className="w-4 h-4 mr-2 animate-spin" />
|
|
Saving...
|
|
</>
|
|
) : (
|
|
<>
|
|
<Save className="w-4 h-4 mr-2" />
|
|
Save Changes
|
|
</>
|
|
)}
|
|
</Button>
|
|
</div>
|
|
|
|
<div className="max-w-4xl mx-auto">
|
|
<div className="space-y-6">
|
|
{/* Profile Information */}
|
|
<Card className={isDark ? "bg-gray-800 border-gray-700" : "bg-white border-gray-200"}>
|
|
<CardHeader>
|
|
<div className="flex items-center gap-2">
|
|
<User className={`w-5 h-5 ${isDark ? "text-gray-300" : "text-gray-600"}`} />
|
|
<CardTitle className={isDark ? "text-white" : "text-gray-900"}>Profile Information</CardTitle>
|
|
</div>
|
|
<CardDescription className={isDark ? "text-gray-400" : "text-gray-600"}>
|
|
Update your personal information and contact details
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
{fetching ? (
|
|
<div className="flex items-center justify-center py-8">
|
|
<Loader2 className="w-6 h-6 animate-spin text-rose-600" />
|
|
</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">
|
|
<label className={`text-sm font-medium ${isDark ? "text-gray-300" : "text-gray-700"}`}>
|
|
Email Address
|
|
</label>
|
|
<div className="relative">
|
|
<Mail 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="email"
|
|
value={formData.email}
|
|
disabled
|
|
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="Email address"
|
|
/>
|
|
</div>
|
|
<p className={`text-xs ${isDark ? "text-gray-500" : "text-gray-400"}`}>
|
|
Email address cannot be changed
|
|
</p>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<label className={`text-sm font-medium ${isDark ? "text-gray-300" : "text-gray-700"}`}>
|
|
Phone Number
|
|
</label>
|
|
<div className="relative">
|
|
<Phone 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="tel"
|
|
value={formData.phone}
|
|
onChange={(e) => handleInputChange("phone", e.target.value)}
|
|
className={`pl-10 ${isDark ? "bg-gray-700 border-gray-600 text-white placeholder:text-gray-400" : ""}`}
|
|
placeholder="Enter your phone number"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Change Password */}
|
|
<Card className={isDark ? "bg-gray-800 border-gray-700" : "bg-white border-gray-200"}>
|
|
<CardHeader>
|
|
<div className="flex items-center gap-2">
|
|
<Lock className={`w-5 h-5 ${isDark ? "text-gray-300" : "text-gray-600"}`} />
|
|
<CardTitle className={isDark ? "text-white" : "text-gray-900"}>Change Password</CardTitle>
|
|
</div>
|
|
<CardDescription className={isDark ? "text-gray-400" : "text-gray-600"}>
|
|
Update your password to keep your account secure
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
<div className="space-y-2">
|
|
<label className={`text-sm font-medium ${isDark ? "text-gray-300" : "text-gray-700"}`}>
|
|
Current Password
|
|
</label>
|
|
<div className="relative">
|
|
<Lock 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={showPasswords.current ? "text" : "password"}
|
|
value={passwordData.currentPassword}
|
|
onChange={(e) => handlePasswordChange("currentPassword", e.target.value)}
|
|
className={`pl-10 pr-10 ${isDark ? "bg-gray-700 border-gray-600 text-white placeholder:text-gray-400" : ""}`}
|
|
placeholder="Enter your current password"
|
|
/>
|
|
<button
|
|
type="button"
|
|
onClick={() => togglePasswordVisibility("current")}
|
|
className={`absolute right-3 top-1/2 transform -translate-y-1/2 ${isDark ? "text-gray-400 hover:text-gray-300" : "text-gray-400 hover:text-gray-600"}`}
|
|
>
|
|
{showPasswords.current ? (
|
|
<EyeOff className="w-4 h-4" />
|
|
) : (
|
|
<Eye className="w-4 h-4" />
|
|
)}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<label className={`text-sm font-medium ${isDark ? "text-gray-300" : "text-gray-700"}`}>
|
|
New Password
|
|
</label>
|
|
<div className="relative">
|
|
<Lock 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={showPasswords.new ? "text" : "password"}
|
|
value={passwordData.newPassword}
|
|
onChange={(e) => handlePasswordChange("newPassword", e.target.value)}
|
|
className={`pl-10 pr-10 ${isDark ? "bg-gray-700 border-gray-600 text-white placeholder:text-gray-400" : ""}`}
|
|
placeholder="Enter your new password"
|
|
/>
|
|
<button
|
|
type="button"
|
|
onClick={() => togglePasswordVisibility("new")}
|
|
className={`absolute right-3 top-1/2 transform -translate-y-1/2 ${isDark ? "text-gray-400 hover:text-gray-300" : "text-gray-400 hover:text-gray-600"}`}
|
|
>
|
|
{showPasswords.new ? (
|
|
<EyeOff className="w-4 h-4" />
|
|
) : (
|
|
<Eye className="w-4 h-4" />
|
|
)}
|
|
</button>
|
|
</div>
|
|
<p className={`text-xs ${isDark ? "text-gray-400" : "text-gray-500"}`}>
|
|
Password must be at least 8 characters long
|
|
</p>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<label className={`text-sm font-medium ${isDark ? "text-gray-300" : "text-gray-700"}`}>
|
|
Confirm New Password
|
|
</label>
|
|
<div className="relative">
|
|
<Lock 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={showPasswords.confirm ? "text" : "password"}
|
|
value={passwordData.confirmPassword}
|
|
onChange={(e) => handlePasswordChange("confirmPassword", e.target.value)}
|
|
className={`pl-10 pr-10 ${isDark ? "bg-gray-700 border-gray-600 text-white placeholder:text-gray-400" : ""}`}
|
|
placeholder="Confirm your new password"
|
|
/>
|
|
<button
|
|
type="button"
|
|
onClick={() => togglePasswordVisibility("confirm")}
|
|
className={`absolute right-3 top-1/2 transform -translate-y-1/2 ${isDark ? "text-gray-400 hover:text-gray-300" : "text-gray-400 hover:text-gray-600"}`}
|
|
>
|
|
{showPasswords.confirm ? (
|
|
<EyeOff className="w-4 h-4" />
|
|
) : (
|
|
<Eye className="w-4 h-4" />
|
|
)}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="pt-2">
|
|
<Button
|
|
onClick={handlePasswordSave}
|
|
disabled={loading || !passwordData.currentPassword || !passwordData.newPassword || !passwordData.confirmPassword}
|
|
className="bg-linear-to-r from-rose-500 to-pink-600 hover:from-rose-600 hover:to-pink-700 text-white"
|
|
>
|
|
{loading ? (
|
|
<div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white mr-2"></div>
|
|
) : (
|
|
<Lock className="w-4 h-4 mr-2" />
|
|
)}
|
|
Update Password
|
|
</Button>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
);
|
|
}
|
|
|