feat(groups): implement group creation functionality and refactor related components

- Removed organization dependency from group creation logic.
- Introduced new route and use-case for creating groups.
- Refactored form handling for group creation into a reusable GroupForm component.
- Updated API calls to support new group creation endpoint.
- Adjusted tests to reflect changes in group creation logic and validation.
- Removed obsolete organizations route and related components.
- Updated breadcrumb navigation and routing for group management.

apps/web/src/components/groups/GroupForm.tsx

@@ -0,0 +1,231 @@
+import { useForm } from 'react-hook-form'
+import { zodResolver } from '@hookform/resolvers/zod'
+import type { BillingType, CreateFirstGroup, WeekDay } from '@gruperly/shared'
+import { CreateFirstGroupSchema } from '@gruperly/shared'
+import { ArrowLeft, Check, Loader2 } from 'lucide-react'
+import { cn } from '../../lib/utils'
+import { Button, Input, Label } from '../ui'
+import { BILLING_TYPES, WEEK_DAY_CHIPS } from '../onboarding/constants'
+
+const defaultValues: CreateFirstGroup = {
+  name: '',
+  days: [],
+  time: '09:00',
+  capacity: 1,
+  price: 0,
+  billingType: 'MONTHLY',
+  dueDay: 1,
+}
+
+type GroupFormProps = {
+  heading: string
+  description: string
+  submitLabel: string
+  isSubmitting: boolean
+  errorMessage?: string | null
+  onSubmit: (values: CreateFirstGroup) => void
+  onBack?: () => void
+}
+
+export function GroupForm({
+  heading,
+  description,
+  submitLabel,
+  isSubmitting,
+  errorMessage,
+  onSubmit,
+  onBack,
+}: GroupFormProps) {
+  const {
+    register,
+    handleSubmit,
+    watch,
+    setValue,
+    formState: { errors },
+  } = useForm<CreateFirstGroup>({
+    resolver: zodResolver(CreateFirstGroupSchema),
+    defaultValues,
+    mode: 'onTouched',
+  })
+
+  const days = watch('days')
+  const billingType = watch('billingType')
+  const dueDay = watch('dueDay')
+
+  const toggleDay = (day: WeekDay) => {
+    const next = days.includes(day) ? days.filter((d) => d !== day) : [...days, day]
+    setValue('days', next, { shouldValidate: true })
+  }
+
+  const selectBillingType = (type: BillingType) => {
+    setValue('billingType', type, { shouldValidate: true })
+  }
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)} noValidate className="space-y-5">
+      <header className="space-y-1">
+        <h2 className="text-2xl font-bold text-primary">{heading}</h2>
+        <p className="text-sm text-foreground/60">{description}</p>
+      </header>
+
+      <div>
+        <Label htmlFor="name">Nombre del grupo</Label>
+        <Input
+          id="name"
+          placeholder="Ej: Yoga Vinyasa · Nivel 1"
+          invalid={!!errors.name}
+          {...register('name')}
+        />
+        {errors.name ? <p className="mt-1 text-sm text-danger">{errors.name.message}</p> : null}
+      </div>
+
+      <div>
+        <Label>Días de clase</Label>
+        <div className="flex flex-wrap gap-2">
+          {WEEK_DAY_CHIPS.map(({ value, label }) => {
+            const isActive = days.includes(value)
+            return (
+              <button
+                key={value}
+                type="button"
+                aria-pressed={isActive}
+                onClick={() => toggleDay(value)}
+                className={cn(
+                  'h-9 rounded-full border px-3.5 text-sm font-medium transition-colors',
+                  isActive
+                    ? 'border-accent bg-accent text-on-accent'
+                    : 'border-border bg-surface text-primary hover:bg-primary-soft',
+                )}
+              >
+                {label}
+              </button>
+            )
+          })}
+        </div>
+        {errors.days ? <p className="mt-1 text-sm text-danger">{errors.days.message}</p> : null}
+      </div>
+
+      <div>
+        <Label htmlFor="time">Horario</Label>
+        <Input
+          id="time"
+          type="time"
+          invalid={!!errors.time}
+          {...register('time')}
+        />
+        {errors.time ? <p className="mt-1 text-sm text-danger">{errors.time.message}</p> : null}
+      </div>
+
+      <div className="grid grid-cols-2 gap-3">
+        <div>
+          <Label htmlFor="capacity">Cupo máximo</Label>
+          <Input
+            id="capacity"
+            type="number"
+            inputMode="numeric"
+            min={1}
+            step={1}
+            invalid={!!errors.capacity}
+            {...register('capacity', { valueAsNumber: true })}
+          />
+          {errors.capacity ? (
+            <p className="mt-1 text-sm text-danger">{errors.capacity.message}</p>
+          ) : null}
+        </div>
+
+        <div>
+          <Label htmlFor="price">Precio</Label>
+          <div className="relative">
+            <span className="pointer-events-none absolute inset-y-0 left-3 flex items-center text-sm text-foreground/50">
+              $
+            </span>
+            <Input
+              id="price"
+              type="number"
+              inputMode="decimal"
+              min={0}
+              step="0.01"
+              placeholder="0.00"
+              className="pl-7"
+              invalid={!!errors.price}
+              {...register('price', { valueAsNumber: true })}
+            />
+          </div>
+          {errors.price ? (
+            <p className="mt-1 text-sm text-danger">{errors.price.message}</p>
+          ) : null}
+        </div>
+      </div>
+
+      <div>
+        <Label>Tipo de cobro</Label>
+        <div className="grid grid-cols-2 gap-2">
+          {BILLING_TYPES.map(({ value, label, hint }) => {
+            const isActive = billingType === value
+            return (
+              <button
+                key={value}
+                type="button"
+                aria-pressed={isActive}
+                onClick={() => selectBillingType(value)}
+                className={cn(
+                  'rounded-xl border px-3 py-2.5 text-left transition-colors',
+                  isActive
+                    ? 'border-accent bg-accent-soft'
+                    : 'border-border bg-surface hover:bg-primary-soft',
+                )}
+              >
+                <span
+                  className={cn(
+                    'block text-sm font-semibold',
+                    isActive ? 'text-accent' : 'text-primary',
+                  )}
+                >
+                  {label}
+                </span>
+                <span className="block text-xs text-foreground/50">{hint}</span>
+              </button>
+            )
+          })}
+        </div>
+      </div>
+
+      <div>
+        <Label htmlFor="dueDay">Día de vencimiento</Label>
+        <Input
+          id="dueDay"
+          type="number"
+          inputMode="numeric"
+          min={1}
+          max={28}
+          step={1}
+          invalid={!!errors.dueDay}
+          {...register('dueDay', { valueAsNumber: true })}
+        />
+        <p className="mt-1 text-xs text-foreground/50">
+          Los cobros vencerán el día {isFinite(dueDay) && dueDay ? dueDay : '1'} de cada mes.
+        </p>
+        {errors.dueDay ? (
+          <p className="mt-1 text-sm text-danger">{errors.dueDay.message}</p>
+        ) : null}
+      </div>
+
+      {errorMessage ? (
+        <p className="rounded-xl bg-danger-soft px-4 py-3 text-sm text-danger">{errorMessage}</p>
+      ) : null}
+
+      <div className="flex items-center gap-3">
+        {onBack ? (
+          <Button variant="outline" onClick={onBack} disabled={isSubmitting}>
+            <ArrowLeft className="size-4" />
+            Volver
+          </Button>
+        ) : null}
+        <Button type="submit" variant="primary" className="flex-1" disabled={isSubmitting}>
+          {isSubmitting ? <Loader2 className="size-4 animate-spin" /> : <Check className="size-4" />}
+          {isSubmitting ? 'Creando…' : submitLabel}
+        </Button>
+      </div>
+    </form>
+  )
+}

apps/web/src/components/layout/Breadcrumb.tsx

@@ -22,11 +22,6 @@ const BREADCRUMBS: Record<string, Crumb[]> = {
     { label: 'Ajustes', to: '/settings' },
     { label: 'Seguridad' },
   ],
-  '/settings/organizations': [
-    { label: 'Inicio', to: '/' },
-    { label: 'Ajustes', to: '/settings' },
-    { label: 'Organizaciones' },
-  ],
   '/profile': [
     { label: 'Inicio', to: '/' },
     { label: 'Mi perfil' },

apps/web/src/components/onboarding/FirstGroupStep.tsx

@@ -1,23 +1,7 @@
 import { useMutation } from '@tanstack/react-query'
-import { zodResolver } from '@hookform/resolvers/zod'
-import { useForm } from 'react-hook-form'
-import type { BillingType, CreateFirstGroup, OnboardingGroupDto, WeekDay } from '@gruperly/shared'
-import { CreateFirstGroupSchema } from '@gruperly/shared'
-import { ArrowLeft, Check, Loader2 } from 'lucide-react'
+import type { CreateFirstGroup, OnboardingGroupDto } from '@gruperly/shared'
 import { createFirstGroup } from '../../lib/api'
-import { cn } from '../../lib/utils'
-import { Button, Input, Label } from '../ui'
-import { BILLING_TYPES, WEEK_DAY_CHIPS } from './constants'
-
-const defaultValues: CreateFirstGroup = {
-  name: '',
-  days: [],
-  time: '09:00',
-  capacity: 1,
-  price: 0,
-  billingType: 'MONTHLY',
-  dueDay: 1,
-}
+import { GroupForm } from '../groups/GroupForm'
 
 type FirstGroupStepProps = {
   onBack: () => void
@@ -25,212 +9,22 @@ type FirstGroupStepProps = {
 }
 
 export function FirstGroupStep({ onBack, onCompleted }: FirstGroupStepProps) {
-  const {
-    register,
-    handleSubmit,
-    watch,
-    setValue,
-    formState: { errors },
-  } = useForm<CreateFirstGroup>({
-    resolver: zodResolver(CreateFirstGroupSchema),
-    defaultValues,
-    mode: 'onTouched',
-  })
-
-  const days = watch('days')
-  const billingType = watch('billingType')
-  const dueDay = watch('dueDay')
-
   const create = useMutation({
     mutationFn: (values: CreateFirstGroup) => createFirstGroup(values),
     onSuccess: (result) => onCompleted(result.group),
   })
 
-  const toggleDay = (day: WeekDay) => {
-    const next = days.includes(day) ? days.filter((d) => d !== day) : [...days, day]
-    setValue('days', next, { shouldValidate: true })
-  }
-
-  const selectBillingType = (type: BillingType) => {
-    setValue('billingType', type, { shouldValidate: true })
-  }
-
   return (
-    <form onSubmit={handleSubmit((values) => create.mutate(values))} noValidate className="space-y-5">
-      <header className="space-y-1">
-        <h2 className="text-2xl font-bold text-primary">Tu primer grupo</h2>
-        <p className="text-sm text-foreground/60">
-          Definí los datos de la clase que vas a cobrar. Después siempre podés editarlos.
-        </p>
-      </header>
-
-      <div>
-        <Label htmlFor="name">Nombre del grupo</Label>
-        <Input
-          id="name"
-          placeholder="Ej: Yoga Vinyasa · Nivel 1"
-          invalid={!!errors.name}
-          {...register('name')}
-        />
-        {errors.name ? <p className="mt-1 text-sm text-danger">{errors.name.message}</p> : null}
-      </div>
-
-      <div>
-        <Label>Días de clase</Label>
-        <div className="flex flex-wrap gap-2">
-          {WEEK_DAY_CHIPS.map(({ value, label }) => {
-            const isActive = days.includes(value)
-            return (
-              <button
-                key={value}
-                type="button"
-                aria-pressed={isActive}
-                onClick={() => toggleDay(value)}
-                className={cn(
-                  'h-9 rounded-full border px-3.5 text-sm font-medium transition-colors',
-                  isActive
-                    ? 'border-accent bg-accent text-on-accent'
-                    : 'border-border bg-surface text-primary hover:bg-primary-soft',
-                )}
-              >
-                {label}
-              </button>
-            )
-          })}
-        </div>
-        {errors.days ? <p className="mt-1 text-sm text-danger">{errors.days.message}</p> : null}
-      </div>
-
-      <div>
-        <Label htmlFor="time">Horario</Label>
-        <Input
-          id="time"
-          type="time"
-          invalid={!!errors.time}
-          {...register('time')}
-        />
-        {errors.time ? <p className="mt-1 text-sm text-danger">{errors.time.message}</p> : null}
-      </div>
-
-      <div className="grid grid-cols-2 gap-3">
-        <div>
-          <Label htmlFor="capacity">Cupo máximo</Label>
-          <Input
-            id="capacity"
-            type="number"
-            inputMode="numeric"
-            min={1}
-            step={1}
-            invalid={!!errors.capacity}
-            {...register('capacity', { valueAsNumber: true })}
-          />
-          {errors.capacity ? (
-            <p className="mt-1 text-sm text-danger">{errors.capacity.message}</p>
-          ) : null}
-        </div>
-
-        <div>
-          <Label htmlFor="price">Precio</Label>
-          <div className="relative">
-            <span className="pointer-events-none absolute inset-y-0 left-3 flex items-center text-sm text-foreground/50">
-              $
-            </span>
-            <Input
-              id="price"
-              type="number"
-              inputMode="decimal"
-              min={0}
-              step="0.01"
-              placeholder="0.00"
-              className="pl-7"
-              invalid={!!errors.price}
-              {...register('price', { valueAsNumber: true })}
-            />
-          </div>
-          {errors.price ? (
-            <p className="mt-1 text-sm text-danger">{errors.price.message}</p>
-          ) : null}
-        </div>
-      </div>
-
-      <div>
-        <Label>Tipo de cobro</Label>
-        <div className="grid grid-cols-2 gap-2">
-          {BILLING_TYPES.map(({ value, label, hint }) => {
-            const isActive = billingType === value
-            return (
-              <button
-                key={value}
-                type="button"
-                aria-pressed={isActive}
-                onClick={() => selectBillingType(value)}
-                className={cn(
-                  'rounded-xl border px-3 py-2.5 text-left transition-colors',
-                  isActive
-                    ? 'border-accent bg-accent-soft'
-                    : 'border-border bg-surface hover:bg-primary-soft',
-                )}
-              >
-                <span
-                  className={cn(
-                    'block text-sm font-semibold',
-                    isActive ? 'text-accent' : 'text-primary',
-                  )}
-                >
-                  {label}
-                </span>
-                <span className="block text-xs text-foreground/50">{hint}</span>
-              </button>
-            )
-          })}
-        </div>
-      </div>
-
-      <div>
-        <Label htmlFor="dueDay">Día de vencimiento</Label>
-        <Input
-          id="dueDay"
-          type="number"
-          inputMode="numeric"
-          min={1}
-          max={28}
-          step={1}
-          invalid={!!errors.dueDay}
-          {...register('dueDay', { valueAsNumber: true })}
-        />
-        <p className="mt-1 text-xs text-foreground/50">
-          Los cobros vencerán el día {isFinite(dueDay) && dueDay ? dueDay : '1'} de cada mes.
-        </p>
-        {errors.dueDay ? (
-          <p className="mt-1 text-sm text-danger">{errors.dueDay.message}</p>
-        ) : null}
-      </div>
-
-      {create.isError ? (
-        <p className="rounded-xl bg-danger-soft px-4 py-3 text-sm text-danger">
-          No pudimos crear el grupo. Revisá los datos e intentá de nuevo.
-        </p>
-      ) : null}
-
-      <div className="flex items-center gap-3">
-        <Button variant="outline" onClick={onBack} disabled={create.isPending}>
-          <ArrowLeft className="size-4" />
-          Volver
-        </Button>
-        <Button
-          type="submit"
-          variant="primary"
-          className="flex-1"
-          disabled={create.isPending}
-        >
-          {create.isPending ? (
-            <Loader2 className="size-4 animate-spin" />
-          ) : (
-            <Check className="size-4" />
-          )}
-          {create.isPending ? 'Creando…' : 'Crear grupo'}
-        </Button>
-      </div>
-    </form>
+    <GroupForm
+      heading="Tu primer grupo"
+      description="Definí los datos de la clase que vas a cobrar. Después siempre podés editarlos."
+      submitLabel="Crear grupo"
+      isSubmitting={create.isPending}
+      errorMessage={
+        create.isError ? 'No pudimos crear el grupo. Revisá los datos e intentá de nuevo.' : null
+      }
+      onSubmit={(values) => create.mutate(values)}
+      onBack={onBack}
+    />
   )
 }

apps/web/src/lib/api.ts

@@ -9,6 +9,7 @@ import type {
   CreateAttendeeResult,
   CreateFirstGroup,
   CreateFirstGroupResult,
+  CreateGroupResult,
   CreateGroupWaitlistEntry,
   GroupDto,
   GroupInviteInfoDto,
@@ -79,6 +80,12 @@ export const createFirstGroup = (payload: CreateFirstGroup) =>
     body: JSON.stringify(payload),
   })
 
+export const createGroup = (payload: CreateFirstGroup) =>
+  apiFetch<CreateGroupResult>('/api/v1/groups', {
+    method: 'POST',
+    body: JSON.stringify(payload),
+  })
+
 export const getGroups = () => apiFetch<GroupList>('/api/v1/groups')
 
 export const getGroup = (groupId: string) =>

apps/web/src/router.tsx

@@ -6,12 +6,12 @@ import { PaymentsView } from './routes/payments'
 import { SettingsView } from './routes/settings'
 import { ProfileView } from './routes/profile'
 import { SecurityPage } from './routes/security'
-import { OrganizationsPage } from './routes/organizations'
 import { LoginPage } from './routes/auth/login'
 import { SignupPage } from './routes/auth/signup'
 import { VerifyEmailPage } from './routes/auth/verify-email'
 import { OnboardingView } from './routes/onboarding'
 import { GroupDetailView } from './routes/group-detail'
+import { CreateGroupView } from './routes/create-group'
 import { JoinGroupView } from './routes/join-group'
 
 const rootRoute = createRootRoute({
@@ -68,6 +68,12 @@ const groupsRoute = createRoute({
   component: GroupsView,
 })
 
+const createGroupRoute = createRoute({
+  getParentRoute: () => appLayoutRoute,
+  path: '/groups/new',
+  component: CreateGroupView,
+})
+
 const groupDetailRoute = createRoute({
   getParentRoute: () => appLayoutRoute,
   path: '/groups/$groupId',
@@ -98,12 +104,6 @@ const profileRoute = createRoute({
   component: ProfileView,
 })
 
-const organizationsRoute = createRoute({
-  getParentRoute: () => appLayoutRoute,
-  path: '/settings/organizations',
-  component: OrganizationsPage,
-})
-
 const routeTree = rootRoute.addChildren([
   loginRoute,
   signupRoute,
@@ -113,11 +113,11 @@ const routeTree = rootRoute.addChildren([
   appLayoutRoute.addChildren([
     indexRoute,
     groupsRoute,
+    createGroupRoute,
     groupDetailRoute,
     paymentsRoute,
     settingsRoute,
     securityRoute,
-    organizationsRoute,
     profileRoute,
   ]),
 ])

apps/web/src/routes/create-group.tsx

@@ -0,0 +1,39 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query'
+import { useNavigate, Link } from '@tanstack/react-router'
+import type { CreateFirstGroup } from '@gruperly/shared'
+import { ChevronLeft } from 'lucide-react'
+import { GroupForm } from '../components/groups/GroupForm'
+import { createGroup } from '../lib/api'
+
+export function CreateGroupView() {
+  const navigate = useNavigate()
+  const queryClient = useQueryClient()
+
+  const create = useMutation({
+    mutationFn: (values: CreateFirstGroup) => createGroup(values),
+    onSuccess: (result) => {
+      void queryClient.invalidateQueries({ queryKey: ['groups'] })
+      void navigate({ to: '/groups/$groupId', params: { groupId: result.group.id } })
+    },
+  })
+
+  return (
+    <section className="mx-auto w-full max-w-md">
+      <Link to="/groups" className="mb-6 inline-flex items-center gap-1 text-sm font-medium text-foreground/70 transition-colors hover:text-primary">
+        <ChevronLeft className="size-4" />
+        Grupos
+      </Link>
+
+      <GroupForm
+        heading="Nuevo grupo"
+        description="Definí los datos de la clase que vas a cobrar. Después siempre podés editarlos."
+        submitLabel="Crear grupo"
+        isSubmitting={create.isPending}
+        errorMessage={
+          create.isError ? 'No pudimos crear el grupo. Revisá los datos e intentá de nuevo.' : null
+        }
+        onSubmit={(values) => create.mutate(values)}
+      />
+    </section>
+  )
+}

apps/web/src/routes/groups.tsx

@@ -70,7 +70,7 @@ export function GroupsView() {
           <h1 className="text-2xl font-bold text-primary">Grupos</h1>
           <p className="mt-2 text-sm text-foreground/60">Tus grupos de cobranza.</p>
         </div>
-        <Button variant="primary" onClick={() => void navigate({ to: '/onboarding' })}>
+        <Button variant="primary" onClick={() => void navigate({ to: '/groups/new' })}>
           <Plus className="size-4" />
           Crear
         </Button>
@@ -100,7 +100,7 @@ export function GroupsView() {
           <Button
             variant="primary"
             className="mt-5"
-            onClick={() => void navigate({ to: '/onboarding' })}
+            onClick={() => void navigate({ to: '/groups/new' })}
           >
             <Plus className="size-4" />
             Crear tu primer grupo

apps/web/src/routes/organizations.tsx

@@ -1,191 +0,0 @@
-import { useState } from 'react'
-import { useForm } from 'react-hook-form'
-import { z } from 'zod'
-import { zodResolver } from '@hookform/resolvers/zod'
-import { Building2, Check, Loader2, Plus } from 'lucide-react'
-import { authClient } from '../lib/auth-client'
-import { Badge, Button, Input, Label } from '../components/ui'
-
-const createOrgSchema = z.object({
-  name: z.string().min(2, 'Ingresá el nombre del grupo'),
-  slug: z
-    .string()
-    .min(2, 'Mínimo 2 caracteres')
-    .regex(/^[a-z0-9-]+$/, 'Solo minúsculas, números y guiones'),
-})
-
-type CreateOrgValues = z.infer<typeof createOrgSchema>
-
-const API_URL = import.meta.env.VITE_API_URL ?? 'http://localhost:4000'
-
-type OrganizationRow = {
-  id: string
-  name: string
-  slug: string
-  logo: string | null
-}
-
-function OrganizationList({ onRefresh }: { onRefresh: () => void }) {
-  const { data, isPending } = authClient.useListOrganizations()
-  const [syncing, setSyncing] = useState<string | null>(null)
-  const [activeId, setActiveId] = useState<string | null>(null)
-
-  const organizations = (data ?? []) as OrganizationRow[]
-
-  const handleSyncGroup = async (org: OrganizationRow) => {
-    setSyncing(org.id)
-    try {
-      const res = await fetch(`${API_URL}/api/v1/groups/from-organization`, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        credentials: 'include',
-        body: JSON.stringify({ organizationId: org.id }),
-      })
-      const body = (await res.json()) as { message?: string }
-      if (!res.ok) {
-        onRefresh()
-        setSyncing(null)
-        return
-      }
-      void body
-    } finally {
-      setSyncing(null)
-    }
-    onRefresh()
-  }
-
-  const handleSetActive = async (organizationId: string) => {
-    setActiveId(organizationId)
-    await authClient.organization.setActive({ organizationId })
-    setActiveId(null)
-  }
-
-  if (isPending) {
-    return <Loader2 className="size-5 animate-spin text-foreground/40" />
-  }
-
-  if (organizations.length === 0) {
-    return <p className="text-sm text-foreground/60">Todavía no pertenecés a ningún grupo.</p>
-  }
-
-  return (
-    <ul className="divide-y divide-border rounded-xl border border-border bg-surface">
-      {organizations.map((org) => (
-        <li key={org.id} className="flex flex-wrap items-center gap-3 px-4 py-3">
-          <span className="rounded-lg bg-accent-soft p-2">
-            <Building2 className="size-4 text-accent" />
-          </span>
-          <div className="min-w-0 flex-1">
-            <p className="truncate text-sm font-medium text-primary">{org.name}</p>
-            <p className="text-xs text-foreground/50">/{org.slug}</p>
-          </div>
-          <Button
-            variant="outline"
-            size="sm"
-            disabled={syncing === org.id}
-            onClick={() => handleSyncGroup(org)}
-          >
-            {syncing === org.id ? <Loader2 className="size-4 animate-spin" /> : <Plus className="size-4" />}
-            Sincronizar grupo
-          </Button>
-          <Button
-            variant="ghost"
-            size="sm"
-            disabled={activeId === org.id}
-            onClick={() => handleSetActive(org.id)}
-          >
-            {activeId === org.id ? (
-              <Loader2 className="size-4 animate-spin" />
-            ) : (
-              <Check className="size-4" />
-            )}
-            <span className="hidden sm:inline">Usar</span>
-          </Button>
-          <Badge>Owner</Badge>
-        </li>
-      ))}
-    </ul>
-  )
-}
-
-export function OrganizationsPage() {
-  const [refreshKey, setRefreshKey] = useState(0)
-  const [feedback, setFeedback] = useState<string | null>(null)
-
-  const {
-    register,
-    handleSubmit,
-    reset,
-    setError,
-    formState: { errors, isSubmitting },
-  } = useForm<CreateOrgValues>({ resolver: zodResolver(createOrgSchema) })
-
-  const refreshOrganizations = () => setRefreshKey((k) => k + 1)
-
-  const onCreateOrg = handleSubmit(async ({ name, slug }) => {
-    setFeedback(null)
-    const { error, data } = await authClient.organization.create({ name, slug })
-    if (error) {
-      setError('root', { message: error.message ?? 'No se pudo crear el grupo' })
-      return
-    }
-    reset({ name: '', slug: '' })
-    setFeedback('Grupo creado. Sincronizalo con el cobro grupal.')
-    refreshOrganizations()
-    void data
-  })
-
-  return (
-    <section className="space-y-6">
-      <div>
-        <h1 className="text-2xl font-bold text-primary">Grupos</h1>
-        <p className="mt-1 text-sm text-foreground/60">
-          Creá un grupo para organizar tus cobros. Cada organización se vincula a un grupo.
-        </p>
-      </div>
-
-      {feedback ? (
-        <p className="rounded-xl bg-success-soft px-4 py-3 text-sm text-success">{feedback}</p>
-      ) : null}
-
-      <div className="rounded-xl border border-border bg-surface p-5">
-        <div className="mb-4 flex items-center gap-2">
-          <Plus className="size-4 text-accent" />
-          <h2 className="text-base font-semibold text-primary">Crear grupo</h2>
-        </div>
-        <form onSubmit={onCreateOrg} className="space-y-4">
-          <div>
-            <Label htmlFor="name">Nombre</Label>
-            <Input
-              id="name"
-              placeholder="Gimnasio, club, kermés…"
-              invalid={!!errors.name}
-              {...register('name')}
-            />
-            {errors.name ? <p className="mt-1 text-sm text-danger">{errors.name.message}</p> : null}
-          </div>
-          <div>
-            <Label htmlFor="slug">Slug</Label>
-            <Input
-              id="slug"
-              placeholder="gimnasio-don-bosco"
-              invalid={!!errors.slug}
-              {...register('slug')}
-            />
-            {errors.slug ? <p className="mt-1 text-sm text-danger">{errors.slug.message}</p> : null}
-          </div>
-          {errors.root ? <p className="text-sm text-danger">{errors.root.message}</p> : null}
-          <Button type="submit" variant="primary" disabled={isSubmitting}>
-            {isSubmitting ? <Loader2 className="size-4 animate-spin" /> : null}
-            Crear grupo
-          </Button>
-        </form>
-      </div>
-
-      <div className="rounded-xl border border-border bg-surface p-5">
-        <h2 className="mb-4 text-base font-semibold text-primary">Tus grupos</h2>
-        <OrganizationList key={refreshKey} onRefresh={refreshOrganizations} />
-      </div>
-    </section>
-  )
-}

apps/web/src/routes/settings.tsx

@@ -1,5 +1,5 @@
 import { Link } from '@tanstack/react-router'
-import { Building2, Check, Fingerprint, Monitor, Moon, Sun } from 'lucide-react'
+import { Check, Fingerprint, Monitor, Moon, Sun } from 'lucide-react'
 import { signOut } from '../lib/auth-client'
 import { Button } from '../components/ui'
 import { useTheme, type Theme } from '../context/ThemeProvider'
@@ -76,19 +76,6 @@ export function SettingsView() {
       </div>
 
       <div className="divide-y divide-border rounded-xl border border-border bg-surface">
-        <Link
-          to="/settings/organizations"
-          className="flex items-center gap-3 px-4 py-3 hover:bg-primary-soft"
-        >
-          <span className="rounded-lg bg-accent-soft p-2">
-            <Building2 className="size-4 text-accent-fg" />
-          </span>
-          <div className="min-w-0 flex-1">
-            <p className="text-sm font-medium text-primary">Grupos</p>
-            <p className="text-xs text-foreground/50">Crear y gestionar tus organizaciones</p>
-          </div>
-        </Link>
-
         <Link to="/seguridad" className="flex items-center gap-3 px-4 py-3 hover:bg-primary-soft">
           <span className="rounded-lg bg-accent-soft p-2">
             <Fingerprint className="size-4 text-accent-fg" />