3.1 Interfaces de Usuario

Las interfaces de usuario del Sistema de Registro y Seguimiento de Reclamos son accesibles a través de navegadores web.
El sistema utiliza un diseño responsivo que se adapta a dispositivos móviles, tablets y computadoras de escritorio.

---

Style Tile del Sistema

Paleta de Colores

Color	Código	Uso
Verde	#27AE60	Estados de éxito, reclamos resueltos, acciones confirmadas
Amarillo	#F39C12	Estados en progreso, alertas moderadas, acciones pendientes
Rojo	#E74C3C	Estados críticos, reclamos urgentes, errores
Gris	#95A5A6	Estados cerrados, información inactiva, fondos secundarios
Azul	#3498DB	Enlaces, botones primarios, información destacada
Blanco	#FFFFFF	Fondos principales, tarjetas
Negro	#2C3E50	Texto principal

---

Componentes Visuales

• Botones con iconografía (crear, editar, eliminar, guardar)
• Tarjetas (cards) para mostrar información de reclamos
• Badges/etiquetas para estados y prioridades
• Tablas responsivas para listados
• Formularios con campos validados
• Barras de navegación consistentes
• Iconos de Font Awesome para acciones

---

Estructura General

• Barra de navegación superior con logo y menú
• Indicador de notificaciones no leídas
• Perfil de usuario en esquina superior
• Panel lateral (en versión desktop) con menú
• Área de contenido principal responsiva
• Pie de página con información

---

Interfaces Principales

1. Pantalla de Autenticación (Login)

• Campo de usuario/correo
• Campo de contraseña
• Botón “Iniciar Sesión”
• Enlace “¿Olvidó su contraseña?”
• Mensajes de error/validación

2. Dashboard de Cliente

• Resumen de reclamos activos
• Botón destacado “Crear Nuevo Reclamo”
• Lista de reclamos con estado visual (color badge)
• Número de reclamo para consulta
• Notificaciones recientes

3. Formulario de Nuevo Reclamo

• Campo: Tipo de reclamo (selector)
• Campo: Descripción (texto largo)
• Campo: Archivo adjunto (carga de archivo)
• Validación en tiempo real
• Botones: Enviar, Cancelar

4. Detalle de Reclamo

• Información completa del reclamo
• Estado actual con indicador visual
• Historial de cambios
• Sección de comentarios
• Archivos adjuntos
• Botones de acción según rol

5. Dashboard de Gestor

• Reclamos asignados
• Tablero tipo Kanban (Pendiente, En Revisión, Resuelto)
• Acceso rápido a casos urgentes
• Métricas personales

6. Dashboard de Administrador

• Estadísticas globales (gráficos)
• Total de reclamos por estado
• Botones de acceso a gestión de usuarios
• Acceso a reportes
• Control de configuración

---

3.2 Interfaces Hardware

Configuración Actual del Sistema

Requisitos del Servidor Implementado

• Compatibilidad con Django 5.2.1
• Soporte para Python
• Capacidad de almacenamiento para archivos adjuntos
• Procesamiento para múltiples usuarios concurrentes

Dispositivos Cliente Soportados

• Computadoras de escritorio
• Laptops
• Tablets
• Smartphones
• Cualquier dispositivo con navegador moderno

---

3.3 Interfaces de Software

Diagrama de Interfaces de Software

El sistema interactúa con los siguientes componentes externos:

1. Servicio de Correo (SMTP)

• Proveedor: SendGrid, Gmail SMTP, Amazon SES u otro
• Protocolo: SMTP/TLS
• Funciones: Confirmación de registro, notificaciones, alertas
• Formato: HTML y texto plano

2. Base de Datos

• Motor: PostgreSQL o SQLite
• Funciones: Almacenar reclamos, usuarios, auditoría, archivos metadata
• Conexión: Protocolo TCP

3. Almacenamiento de Archivos (Opcional)

• Ubicación: Servidor local o servicio en la nube
• Tipos: PDF, JPG, PNG
• Tamaño máximo: 5MB por archivo

---

3.4 Interfaces de Comunicación

Protocolos y Comunicación

---

Protocolos Web

• HTTP/HTTPS para todas las comunicaciones
• WebSockets para notificaciones en tiempo real
• Formularios seguros con protección CSRF

---

Sistema de Archivos

• Gestión de uploads hasta 5MB
• Validación de tipos de archivo
• Almacenamiento estructurado por categorías

---

Seguridad Implementada

• Autenticación de usuarios
• Protección CSRF
• Validación completa de formularios
• Control de acceso basado en roles

---

Características de Comunicación

Interacción Cliente-Servidor

• Peticiones AJAX para actualizaciones dinámicas
• Formularios con validación en tiempo real
• Carga asíncrona de contenido
• Manejo seguro de sesiones

Gestión de Datos

• Almacenamiento en SQLite
• Cache para optimización de consultas
• Backup automático programado
• Validación de integridad referencial

Notificaciones

• Sistema en tiempo real mediante WebSockets
• Actualizaciones automáticas de estado
• Alertas por nuevos comentarios
• Confirmaciones de acciones de usuario

---

Especificaciones Técnicas

Formato de Datos

• JSON para intercambio entre cliente y servidor
• Archivos multimedia validados y estructurados
• Texto plano para comentarios
• Referencias estructuradas: INT-XXXXX

Optimización

• Compresión de respuestas HTTP
• Caché de consultas frecuentes
• Carga diferida (lazy loading) de recursos
• Minimización de assets estáticos (CSS, JS)

Seguridad de Datos

• Validación de entrada y sanitización de datos
• Control de acceso por roles y permisos
• Registro de actividades del sistema y usuarios