# Notifications Admin Pages Specification

**Modulo:** notifications
**Ultima actualizacion:** 2026-02-03
**Total Paginas:** 2

---

## 1. NotificationsPage

**Ruta:** `/dashboard/notifications`
**Archivo:** `src/pages/dashboard/notifications/NotificationsPage.tsx`

### Descripcion
Centro de notificaciones del usuario. Muestra notificaciones recibidas con tabs para filtrar y configurar preferencias.

### Componentes Utilizados
- Tab Navigation - Tabs All/Unread/Settings
- Notification Item - Card de notificacion con acciones
- Preferences Section - Toggles de preferencias
- Pagination - Navegacion de paginas
- Icons: Bell, CheckCheck, ExternalLink, Settings, Mail, Smartphone, MessageSquare, FileText (lucide-react)

### Hooks Utilizados
- `useNotifications({page, limit, unreadOnly})` - Lista notificaciones
- `useUnreadCount()` - Contador de no leidas
- `useMarkAsRead()` - Marca como leida
- `useMarkAllAsRead()` - Marca todas como leidas
- `useNotificationPreferences()` - Obtiene preferencias
- `useUpdatePreferences()` - Actualiza preferencias
- `getNotificationTypeColor()` - Color segun tipo
- `formatNotificationTime()` - Formato de tiempo

### Funcionalidades
1. Ver notificaciones con titulo, cuerpo, tiempo
2. Filtrar por todas o solo no leidas
3. Marcar individual como leida
4. Marcar todas como leidas
5. Ver action link si existe
6. Configurar preferencias por canal (email, push, in-app, SMS)
7. Navegar a gestion de templates

### Estados
- Loading: Spinner centrado
- Success: Lista de notificaciones
- Empty All: "No notifications yet"
- Empty Unread: "No unread notifications"

### Acciones del Usuario
| Accion | Resultado |
|--------|-----------|
| Click tab "All" | Muestra todas |
| Click tab "Unread" | Filtra no leidas |
| Click tab "Settings" | Muestra preferencias |
| Click "Mark as read" | Marca como leida |
| Click "Mark all as read" | Confirm + marca todas |
| Click action link | Navega a URL |
| Toggle preferencia | Actualiza setting |
| Click "Manage Templates" | Navega a templates |
| Click Previous/Next | Cambia pagina |

### Permisos Requeridos
- Usuario autenticado

---

## 2. TemplatesPage

**Ruta:** `/dashboard/notifications/templates`
**Archivo:** `src/pages/dashboard/notifications/TemplatesPage.tsx`

### Descripcion
Gestion de templates de notificacion. Permite crear, editar, previsualizar y gestionar templates para diferentes canales.

### Componentes Utilizados
- Search Input - Busqueda de templates
- Channel Filter - Filtro por canal (email, push, in_app, sms)
- Category Filter - Filtro por categoria
- Templates Grid - Grid de cards de template
- TemplateCard - Card con preview y acciones
- TemplateForm - Formulario de creacion/edicion
- TemplatePreview - Modal de preview
- Delete Confirmation Modal - Modal de confirmacion
- Icons: Plus, ArrowLeft, FileText, AlertTriangle, Search, Filter (lucide-react)

### Hooks Utilizados
- `useNotificationTemplates()` - Lista templates
- `useCreateTemplate()` - Crea template
- `useUpdateTemplate()` - Actualiza template
- `useDeleteTemplate()` - Elimina template
- `useToggleTemplateActive()` - Activa/desactiva template

### Funcionalidades
1. Buscar templates por nombre, codigo o descripcion
2. Filtrar por canal (email, push, in_app, sms)
3. Filtrar por categoria
4. Ver grid de templates con preview rapido
5. Toggle active/inactive desde card
6. Crear nuevo template con formulario completo
7. Editar template existente
8. Previsualizar template
9. Eliminar template con confirmacion

### Estados
- View Modes: list, create, edit
- Loading: Spinner en grid
- Success: Grid de templates
- Empty: "No templates yet" + CTA
- Filtered Empty: "No matching templates"

### Acciones del Usuario
| Accion | Resultado |
|--------|-----------|
| Click "Create Template" | Cambia a vista create |
| Buscar | Filtra templates |
| Seleccionar canal | Filtra por canal |
| Seleccionar categoria | Filtra por categoria |
| Click edit en card | Cambia a vista edit |
| Click preview en card | Abre modal preview |
| Click delete en card | Abre modal confirm |
| Toggle active | Activa/desactiva |
| Submit form | Crea o actualiza |
| Click "Cancel" | Vuelve a lista |
| Confirm delete | Elimina template |

### Permisos Requeridos
- `notifications:read` - Ver templates
- `notifications:write` - Crear/editar/toggle
- `notifications:delete` - Eliminar templates

### Notas
- Los templates usan variables con formato `{{variable}}`
- Cada canal tiene campos especificos (email tiene subject, html_body)
- La preview muestra como se veria la notificacion

---

## Canales de Notificacion

| Canal | Campos | Descripcion |
|-------|--------|-------------|
| email | subject, html_body, text_body | Correo electronico |
| push | title, body | Notificacion push del navegador |
| in_app | title, body, action_url | Notificacion dentro de la app |
| sms | body | Mensaje SMS |

---

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