rckrdmrd/template-saas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
fa4dd11b5e
template-saas/docs/05-frontend/pages/PAGE-NOTIFICATIONS-ADMIN.md
Adrian Flores Cortes 0ead18e28f [SPRINT-3] docs: Add page specifications and dead code analysis 
## 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>
2026-02-03 20:27:51 -06:00

4.8 KiB
Raw Blame History

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