New fields for complex

2026-04-09 16:18:58 -03:00
parent ae90562d88
commit 3cba2fa485
15 changed files with 603 additions and 7 deletions
--- a/apps/frontend/src/features/complex/complex-settings-page.tsx
+++ b/apps/frontend/src/features/complex/complex-settings-page.tsx
@@ -0,0 +1,87 @@
+import { useEffect, useState } from 'react'
+import { useQuery } from '@tanstack/react-query'
+import { Building2, MapPin, Settings } from 'lucide-react'
+import { apiClient } from '@/lib/api-client'
+import { setCurrentComplexSlug } from '@/lib/current-complex'
+import { ComplexDetailsSection } from './components/complex-details-section'
+import { ComplexCourtsSection } from './components/complex-courts-section'
+
+type ComplexSettingsPageProps = {
+  complexSlug: string
+}
+
+type TabOption = 'details' | 'courts'
+
+export function ComplexSettingsPage({ complexSlug }: ComplexSettingsPageProps) {
+  const [activeTab, setActiveTab] = useState<TabOption>('details')
+
+  useEffect(() => {
+    setCurrentComplexSlug(complexSlug)
+  }, [complexSlug])
+
+  const complexQuery = useQuery({
+    queryKey: ['complex-by-slug', complexSlug],
+    queryFn: () => apiClient.complexes.getBySlug(complexSlug),
+  })
+
+  const complexId = complexQuery.data?.id ?? null
+
+  const tabs = [
+    { id: 'details' as const, label: 'Datos del complejo', icon: Building2 },
+    { id: 'courts' as const, label: 'Canchas', icon: MapPin },
+  ]
+
+  return (
+    <div className="mx-auto w-full max-w-6xl px-4 py-4 sm:px-6">
+      <section className="rounded-xl border bg-card p-4 text-card-foreground shadow-sm sm:p-5">
+        <h2 className="text-2xl font-semibold">
+          <Settings className="mb-1 mr-2 inline size-6" />
+          Configuración del complejo
+        </h2>
+        <p className="mt-2 text-sm text-muted-foreground">
+          {complexQuery.data?.complexName ?? 'Configura los datos de tu complejo'}
+        </p>
+      </section>
+
+      <div className="mt-6 grid gap-6 lg:grid-cols-[200px_1fr]">
+        <nav className="flex flex-row gap-1 overflow-x-auto lg:flex-col lg:overflow-visible">
+          {tabs.map((tab) => {
+            const Icon = tab.icon
+            const isActive = activeTab === tab.id
+            return (
+              <button
+                key={tab.id}
+                type="button"
+                onClick={() => setActiveTab(tab.id)}
+                className={`inline-flex items-center gap-2 rounded-lg px-3 py-2 text-sm font-medium transition-colors lg:w-full lg:justify-start ${
+                  isActive
+                    ? 'bg-muted text-foreground'
+                    : 'text-muted-foreground hover:bg-muted hover:text-foreground'
+                }`}
+              >
+                <Icon className="size-4" />
+                {tab.label}
+              </button>
+            )
+          })}
+        </nav>
+
+        <div className="min-w-0">
+          {activeTab === 'details' && (
+            <ComplexDetailsSection
+              complex={complexQuery.data ?? null}
+              isLoading={complexQuery.isLoading}
+              isError={complexQuery.isError}
+            />
+          )}
+
+          {activeTab === 'courts' && (
+            <ComplexCourtsSection
+              complexId={complexId}
+            />
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}