0ead18e28f
## ST-3.3 Documentation (3 SP) - Add 11 page specification files documenting 25 pages - Create docs/05-frontend/pages/ directory - Specs: Goals, MLM, Portfolio, RBAC, Notifications, Analytics, Audit, Storage, Webhooks, Settings - Add _INDEX.md with complete listing ## ST-3.4 Dead Code Analysis (1 SP) - Analyze usePortfolio hook usage (18/21 functions used) - Document components ready for future use - Decision: Keep all code as preparation for features - Create DEAD-CODE-REPORT.md ## Frontend Submodule - WCAG improvements (11 files) - 160 unit tests (8 new test files) Sprint 3 (P2) completed: 14 SP Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
150 lines
4.8 KiB
Markdown
150 lines
4.8 KiB
Markdown
# 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*
|