fix(principal): integra auth, agenda e laudos com a api

src/pages/ProfilePage.jsx

@@ -1,20 +1,62 @@
-import { useState } from 'react'
+import { useRef, useState, useEffect } from 'react'
 
 import { profileRepository } from '../repositories/profileRepository.js'
+import { authRepository } from '../repositories/authRepository.js'
 
 const cardClass = 'rounded-2xl border border-[#404040] bg-[#262626] shadow-sm'
 const inputClass =
   'h-10 rounded-sm border border-[#404040] bg-[#171717] px-3 text-sm text-[#e5e5e5] outline-none transition placeholder:text-[#a3a3a3] focus:border-[#3b82f6] focus:ring-2 focus:ring-[#3b82f6]/20'
 
-export function ProfilePage() {
+export function ProfilePage({ navigate }) {
   const [saved, setSaved] = useState(false)
-  const [profile, setProfile] = useState(() => profileRepository.getCurrentUserProfile())
+  const [profile, setProfile] = useState({ name: '', role: '', email: '', phone: '', unit: '', avatarUrl: '' })
+  const [loading, setLoading] = useState(true)
+  const [uploadingAvatar, setUploadingAvatar] = useState(false)
+  const [avatarError, setAvatarError] = useState('')
+  const fileInputRef = useRef(null)
+
+  useEffect(() => {
+    profileRepository.getCurrentUserProfile().then(data => {
+      setProfile(data)
+      setLoading(false)
+    }).catch(() => setLoading(false))
+  }, [])
 
   function update(field, value) {
     setSaved(false)
     setProfile((current) => ({ ...current, [field]: value }))
   }
 
+  async function handleLogout() {
+    await authRepository.logout()
+    navigate('/login')
+  }
+
+  async function handleAvatarChange(event) {
+    const file = event.target.files?.[0]
+    if (!file) return
+
+    setUploadingAvatar(true)
+    setAvatarError('')
+
+    try {
+      const result = await profileRepository.updateAvatar(file)
+      setProfile((current) => ({
+        ...current,
+        avatarUrl: result.avatarUrl || URL.createObjectURL(file),
+      }))
+    } catch (err) {
+      setAvatarError(err.message || 'Erro ao enviar avatar.')
+    } finally {
+      setUploadingAvatar(false)
+      event.target.value = ''
+    }
+  }
+
+  if (loading) {
+    return <div className="text-center pt-20 text-[#a3a3a3]">Localizando dados do paciente...</div>
+  }
+
   return (
     <div className="mx-auto max-w-6xl space-y-6">
       <header>
@@ -25,15 +67,36 @@ export function ProfilePage() {
       <div className="grid gap-6 lg:grid-cols-[1fr_360px]">
         <section className={`${cardClass} p-6`}>
           <div className="mb-6 flex items-center gap-4">
-            <div className="grid size-16 place-items-center rounded-full border border-[#3b82f6]/30 bg-[#3b82f6]/10 text-xl font-bold text-[#3b82f6]">
-              HC
-            </div>
+            {profile.avatarUrl ? (
+              <img
+                alt=""
+                className="size-16 rounded-full border border-[#3b82f6]/30 object-cover"
+                src={profile.avatarUrl}
+              />
+            ) : (
+              <div className="grid size-16 place-items-center rounded-full border border-[#3b82f6]/30 bg-[#3b82f6]/10 text-xl font-bold text-[#3b82f6]">
+                {initials(profile.name)}
+              </div>
+            )}
             <div>
               <h2 className="text-lg font-bold text-[#f5f5f5]">{profile.name}</h2>
               <p className="mt-1 text-sm text-[#a3a3a3]">{profile.role}</p>
-              <button className="mt-1 text-xs font-semibold text-[#3b82f6]" type="button">
-                Alterar foto
+              <button
+                className="mt-1 text-xs font-semibold text-[#3b82f6] disabled:opacity-60"
+                disabled={uploadingAvatar}
+                onClick={() => fileInputRef.current?.click()}
+                type="button"
+              >
+                {uploadingAvatar ? 'Enviando...' : 'Alterar foto'}
               </button>
+              <input
+                accept="image/*"
+                className="hidden"
+                onChange={handleAvatarChange}
+                ref={fileInputRef}
+                type="file"
+              />
+              {avatarError ? <p className="mt-1 text-xs font-semibold text-red-400">{avatarError}</p> : null}
             </div>
           </div>
 
@@ -79,10 +142,18 @@ export function ProfilePage() {
         <aside className={`${cardClass} p-6`}>
           <h2 className="text-xl font-bold text-[#f5f5f5]">Resumo de acesso</h2>
           <dl className="mt-5 grid gap-4 text-sm">
-            <Info label="Perfil" value="Administrador da clínica" />
-            <Info label="Último acesso" value="07 abr 2026, 09:15" />
+            <Info label="Perfil" value={profile.role} />
+            <Info label="E-mail principal" value={profile.email} />
             <Info label="Permissões" value="Agenda, pacientes, comunicação e configurações" />
           </dl>
+          <div className="mt-8 border-t border-[#404040] pt-6">
+            <button 
+              className="w-full h-10 rounded-sm border border-red-500/30 text-red-500 font-semibold text-sm transition hover:bg-red-500/10"
+              onClick={handleLogout}
+            >
+              Sair da conta
+            </button>
+          </div>
         </aside>
       </div>
     </div>
@@ -106,3 +177,13 @@ function Info({ label, value }) {
     </div>
   )
 }
+
+function initials(name) {
+  return String(name || 'US')
+    .split(' ')
+    .filter(Boolean)
+    .slice(0, 2)
+    .map((part) => part[0])
+    .join('')
+    .toUpperCase()
+}