# Webhooks Page Specification

**Modulo:** webhooks
**Ultima actualizacion:** 2026-02-03
**Total Paginas:** 1

---

## WebhooksPage

**Ruta:** `/dashboard/webhooks`
**Archivo:** `src/pages/dashboard/WebhooksPage.tsx`

### Descripcion
Configuracion de webhooks outbound. Permite crear endpoints que reciben notificaciones de eventos del sistema.

### Componentes Utilizados
- WebhookCard - Tarjeta de webhook con estado
- WebhookForm - Formulario de creacion/edicion
- WebhookDeliveryList - Lista de entregas recientes
- EventSelector - Selector de eventos a escuchar

### Hooks Utilizados
- `useWebhooks()` - Lista webhooks
- `useCreateWebhook()` - Crea webhook
- `useUpdateWebhook()` - Actualiza webhook
- `useDeleteWebhook()` - Elimina webhook
- `useWebhookDeliveries(webhookId)` - Lista entregas
- `useRetryDelivery()` - Reintenta entrega fallida
- `useTestWebhook()` - Envia test

### Funcionalidades
1. Crear nuevo webhook con URL y eventos
2. Configurar headers custom (ej: Authorization)
3. Ver estado (active/paused)
4. Ver historial de entregas con status
5. Reintentar entregas fallidas
6. Enviar evento de test
7. Ver secreto para validar firma
8. Editar y eliminar webhooks

### Eventos Disponibles

| Evento | Descripcion |
|--------|-------------|
| user.created | Usuario creado |
| user.updated | Usuario actualizado |
| user.deleted | Usuario eliminado |
| subscription.created | Suscripcion creada |
| subscription.updated | Suscripcion actualizada |
| subscription.cancelled | Suscripcion cancelada |
| invoice.paid | Factura pagada |
| invoice.failed | Pago fallido |

### Estados
- Loading: Spinner en lista
- Success: Lista de webhooks
- Empty: Mensaje "No webhooks configured"
- Delivery Success: Badge verde
- Delivery Failed: Badge rojo con retry

### Acciones del Usuario
| Accion | Resultado |
|--------|-----------|
| Click "Create Webhook" | Abre formulario |
| Submit formulario | Crea webhook |
| Click "Edit" | Abre edicion |
| Click "Delete" | Confirm + elimina |
| Click "Test" | Envia evento test |
| Click "Retry" en delivery | Reintenta envio |
| Toggle active | Activa/pausa webhook |

### Permisos Requeridos
- `webhooks:read` - Ver webhooks y entregas
- `webhooks:write` - Crear/editar webhooks
- `webhooks:delete` - Eliminar webhooks

### Estructura de Entrega

```typescript
interface WebhookDelivery {
  id: string;
  webhook_id: string;
  event: string;
  payload: Record<string, any>;
  response_status?: number;
  response_body?: string;
  error?: string;
  attempts: number;
  delivered_at?: string;
  created_at: string;
}
```

### Seguridad

- Cada webhook tiene un `secret` unico
- Las entregas incluyen header `X-Webhook-Signature` con HMAC-SHA256
- Los endpoints deben responder con 2xx en 30 segundos
- Reintentos automaticos: 3 intentos con backoff exponencial

### Notas
- Los webhooks pausados no reciben eventos
- Las entregas fallidas se retienen por 7 dias
- El payload incluye `event`, `data`, `timestamp` y `webhook_id`

---

*Documentacion generada - Template SaaS - 2026-02-03*