import React, { useState } from "react"; import { SystemSettings } from "../components/System/SystemSettings"; import { User, Mail, Phone, MapPin, Lock, Bell, Palette, Globe, Save, Camera, GraduationCap, Database, } from "lucide-react"; import toast from "react-hot-toast"; import { Button } from "../components/Button"; import { useAuth } from "../contexts/AuthContext"; import { UserRole } from "../types"; export const SettingsPage: React.FC = () => { const { user } = useAuth(); const isAdmin = user?.role === UserRole.SUPERADMIN || user?.role === UserRole.BUSINESS_OWNER; const [activeTab, setActiveTab] = useState< "profile" | "account" | "notifications" | "appearance" | "system" >("profile"); const [profileData, setProfileData] = useState({ name: "", email: "", phone: "", location: "", bio: "", avatar: "https://i.pravatar.cc/150?img=68", }); // Effect to sync state with user data React.useEffect(() => { if (user) { setProfileData({ name: user.name || "", email: user.email || "", phone: user.phone || "", location: user.profissional?.cidade || "", bio: user.profissional?.observacao || "", avatar: user.profissional?.avatar_url || "https://i.pravatar.cc/150?img=68", }); } }, [user]); const [notificationSettings, setNotificationSettings] = useState({ emailNotifications: true, pushNotifications: true, smsNotifications: false, eventReminders: true, paymentAlerts: true, teamUpdates: false, }); const [appearanceSettings, setAppearanceSettings] = useState({ theme: "light", language: "pt-BR", dateFormat: "DD/MM/YYYY", currency: "BRL", }); const handleSaveProfile = async () => { try { if (!user?.profissional?.id) { toast.error("Perfil profissional não encontrado para atualização."); return; } const token = localStorage.getItem("token") || document.cookie.replace(/(?:(?:^|.*;\s*)access_token\s*\=\s*([^;]*).*$)|^.*$/, "$1"); // Prepare payload for Professional Update // Note: The backend expects specific fields. We map what we have. const payload = { nome: profileData.name, email: profileData.email, // Note: Prof service might not update email if it doesn't match User table sync logic, but we send it. whatsapp: profileData.phone, cidade: profileData.location, observacao: profileData.bio, avatar_url: profileData.avatar, // Maintain other required fields if necessary, but PUT usually allows partial or defaults? // Checking backend: It uses 'toPgText', so missing fields become NULL? // We should fetch existing professional data first to merge? // Or assume the backend handles partial updates? // The backend implementation 'CreateProfissionalInput' struct in Update assumes REPLACING values. // Be careful. ideally we should GET /me/profissional first. // But we have 'user.profissional' which might be incomplete. // Let's rely on what we have. }; // Fetch current professional data to avoid overwriting with nulls const responseGet = await fetch(`${import.meta.env.VITE_API_URL || "http://localhost:8080"}/api/profissionais/${user.profissional.id}`, { headers: { Authorization: `Bearer ${token}`, }, }); let currentData = {}; if (responseGet.ok) { currentData = await responseGet.json(); } const finalPayload = { ...currentData, // Merge existing nome: profileData.name, whatsapp: profileData.phone, cidade: profileData.location, observacao: profileData.bio, // email is usually read-only or handled separately in generic updates }; const response = await fetch(`${import.meta.env.VITE_API_URL || "http://localhost:8080"}/api/profissionais/${user.profissional.id}`, { method: "PUT", headers: { "Content-Type": "application/json", Authorization: `Bearer ${token}`, }, body: JSON.stringify(finalPayload), }); if (!response.ok) { throw new Error("Falha ao atualizar perfil"); } toast.success("Perfil atualizado com sucesso!"); // Optionally refresh user context window.location.reload(); // Simple way to refresh context } catch (error) { console.error(error); toast.error("Erro ao salvar perfil."); } }; const handleSaveNotifications = () => { toast.success("Configurações de notificações salvas!"); }; const handleSaveAppearance = () => { toast.success("Configurações de aparência salvas!"); }; return (
{/* Header */}

Configurações

Gerencie suas preferências e informações da conta

{/* Mobile Tabs - Horizontal */}
{/* Desktop Sidebar - Vertical */}
{/* Content */}
{/* Profile Tab */} {activeTab === "profile" && (

Informações do Perfil

Avatar

{profileData.name}

{profileData.email}

setProfileData({ ...profileData, name: e.target.value, }) } className="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-brand-gold" />
setProfileData({ ...profileData, email: e.target.value, }) } className="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-brand-gold" />
setProfileData({ ...profileData, phone: e.target.value, }) } className="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-brand-gold" />
setProfileData({ ...profileData, location: e.target.value, }) } className="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-brand-gold" />