Initial commit

apps/frontend/src/features/profile/profile-page.tsx

@@ -0,0 +1,71 @@
+import { Link } from '@tanstack/react-router'
+import { useQuery } from '@tanstack/react-query'
+import type { UserProfileResponse } from '@repo/api-contract'
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
+import { Button } from '@/components/ui/button'
+import { apiClient } from '@/lib/api-client'
+import { useAuth } from '@/lib/auth'
+
+export function ProfilePage() {
+  const { user, displayName, initials, avatarUrl, isAuthenticated } = useAuth()
+  const profileQuery = useQuery({
+    queryKey: ['user-profile'],
+    enabled: isAuthenticated,
+    queryFn: (): Promise<UserProfileResponse> => apiClient.user.getProfile(),
+  })
+
+  if (!isAuthenticated) {
+    return (
+      <main className="mx-auto flex min-h-[60vh] w-full max-w-6xl items-center justify-center px-6">
+        <section className="w-full max-w-3xl rounded-xl border bg-card p-6 text-card-foreground shadow-sm">
+          <h1 className="text-2xl font-semibold">Perfil</h1>
+          <p className="mt-2 text-sm text-muted-foreground">
+            Necesitás iniciar sesión para ver tu perfil.
+          </p>
+          <Button asChild className="mt-4">
+            <Link to="/login">Ir a Login</Link>
+          </Button>
+        </section>
+      </main>
+    )
+  }
+
+  return (
+    <main className="mx-auto flex min-h-[60vh] w-full max-w-6xl items-center justify-center px-6">
+      <section className="w-full max-w-3xl rounded-xl border bg-card p-6 text-card-foreground shadow-sm">
+        <div className="flex items-center gap-3">
+          <Avatar size="lg">
+            <AvatarImage
+              src={profileQuery.data?.avatarUrl ?? avatarUrl ?? undefined}
+              alt={displayName}
+            />
+            <AvatarFallback>{initials}</AvatarFallback>
+          </Avatar>
+          <div>
+            <h1 className="text-2xl font-semibold">
+              {profileQuery.data?.fullName ?? displayName}
+            </h1>
+            <p className="text-sm text-muted-foreground">
+              {profileQuery.data?.email ?? user?.email}
+            </p>
+            {profileQuery.data?.role && (
+              <p className="text-sm text-muted-foreground">
+                Rol: {profileQuery.data.role}
+              </p>
+            )}
+          </div>
+        </div>
+
+        {profileQuery.isLoading && (
+          <p className="mt-4 text-sm text-muted-foreground">Cargando perfil...</p>
+        )}
+
+        {profileQuery.isError && (
+          <p className="mt-4 text-sm text-destructive">
+            No se pudo cargar el perfil desde el backend.
+          </p>
+        )}
+      </section>
+    </main>
+  )
+}