Better court configuration

apps/frontend/src/features/layout/root-layout.tsx

@@ -1,5 +1,5 @@
 import { Link, Outlet, useNavigate } from '@tanstack/react-router'
-import { useEffect, useState } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 import { useQuery } from '@tanstack/react-query'
 import { LogOut, Menu, UserRound } from 'lucide-react'
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
@@ -44,6 +44,17 @@ export function RootLayout() {
     }
   }, [currentComplexSlug, myComplexesQuery.data])
 
+  const currentComplexName = useMemo(() => {
+    const complexes = myComplexesQuery.data ?? []
+    if (complexes.length === 0) return 'Mi complejo'
+
+    const selected = complexes.find(
+      (complex) => complex.complexSlug === currentComplexSlug,
+    )
+
+    return selected?.complexName ?? complexes[0]?.complexName ?? 'Mi complejo'
+  }, [currentComplexSlug, myComplexesQuery.data])
+
   const handleSignOut = async () => {
     await signOut()
     await navigate({ to: '/login' })
@@ -53,7 +64,7 @@ export function RootLayout() {
     <div className="flex min-h-screen flex-col">
       <header className="mx-auto flex w-full max-w-6xl items-center justify-between px-6 py-4">
         <div className="flex items-center gap-6">
-          <h1 className="text-sm font-semibold">TanStack Router</h1>
+          <h1 className="text-sm font-semibold">{currentComplexName}</h1>
           <nav className="hidden items-center gap-3 text-sm md:flex">
             <Link
               to="/"