feat: implement complex selection flow

2026-04-20 15:47:47 -03:00
parent a5e39c94c5
commit 28fd51f926
17 changed files with 453 additions and 38 deletions
--- a/apps/frontend/src/features/select-complex/select-complex-page.tsx
+++ b/apps/frontend/src/features/select-complex/select-complex-page.tsx
@@ -0,0 +1,98 @@
+import { Button } from '@/components/ui/button';
+import { apiClient } from '@/lib/api-client';
+import type { ComplexWithRole } from '@repo/api-contract';
+import { useMutation, useQuery } from '@tanstack/react-query';
+import { useNavigate } from '@tanstack/react-router';
+import { Building2, Loader2 } from 'lucide-react';
+
+export function SelectComplexPage() {
+  const navigate = useNavigate();
+
+  const complexesQuery = useQuery({
+    queryKey: ['my-complexes'],
+    queryFn: () => apiClient.complexes.listMine(),
+  });
+
+  const selectMutation = useMutation({
+    mutationFn: async (complexId: string) => {
+      const response = await apiClient.complexes.select({ complexId });
+      return response;
+    },
+    onSuccess: () => {
+      navigate({ to: '/' });
+    },
+  });
+
+  const handleSelect = (complex: ComplexWithRole) => {
+    selectMutation.mutate(complex.id);
+  };
+
+  if (complexesQuery.isLoading) {
+    return (
+      <main className="flex min-h-screen w-full items-center justify-center px-6">
+        <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
+      </main>
+    );
+  }
+
+  if (complexesQuery.isError) {
+    return (
+      <main className="flex min-h-screen w-full items-center justify-center px-6">
+        <div className="text-center">
+          <p className="text-destructive">Error al cargar tus complejos.</p>
+          <Button variant="link" className="mt-2" onClick={() => complexesQuery.refetch()}>
+            Reintentar
+          </Button>
+        </div>
+      </main>
+    );
+  }
+
+  const complexes = complexesQuery.data ?? [];
+
+  if (complexes.length === 0) {
+    return (
+      <main className="flex min-h-screen w-full items-center justify-center px-6">
+        <div className="text-center">
+          <p className="text-muted-foreground">No tenés complejos asociados.</p>
+        </div>
+      </main>
+    );
+  }
+
+  return (
+    <main className="flex min-h-screen w-full items-center justify-center px-6">
+      <section className="w-full max-w-md space-y-6">
+        <div className="space-y-2">
+          <h1 className="text-2xl font-semibold">Seleccioná un complejo</h1>
+          <p className="text-sm text-muted-foreground">
+            Elegí el complejo con el que vas a trabajar.
+          </p>
+        </div>
+
+        <div className="space-y-2">
+          {complexes.map((complex) => (
+            <button
+              key={complex.id}
+              type="button"
+              className="flex w-full items-center gap-3 rounded-lg border p-4 text-left transition-colors hover:bg-accent"
+              onClick={() => handleSelect(complex)}
+              disabled={selectMutation.isPending}
+            >
+              <Building2 className="h-5 w-5 text-muted-foreground" />
+              <div className="flex-1">
+                <p className="font-medium">{complex.complexName}</p>
+                <p className="text-sm text-muted-foreground">
+                  {complex.city ?? 'Sin ciudad'} · {complex.role}
+                </p>
+              </div>
+              {selectMutation.isPending && selectMutation.variables === complex.id && (
+                <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
+              )}
+            </button>
+          ))}
+        </div>
+      </section>
+    </main>
+  );
+}