style: Reemplazar escala de grises por colores semánticos en auditoría

- Estadísticas de auditoría con colores apropiados:
  * Total: Negro (neutro)
  * Hoy: Azul (actividad actual)
  * Esta Semana: Indigo (período reciente)
  * Incidentes Críticos: Rojo (alerta máxima)

- Estadísticas de seguridad con colores semánticos:
  * Amenazas Detectadas: Rojo (peligro alto)
  * Intentos Fallidos: Naranja (advertencia)
  * IPs Sospechosas: Amarillo (precaución)
  * Acciones Críticas: Rojo (crítico)

- Recomendaciones de seguridad con esquema azul (informativo)

- Actualizado safelist de Tailwind con nuevos colores:
  * text-blue-600, text-indigo-600, text-red-600
  * text-orange-600, text-yellow-600
  * text-*-400 para iconos
  * bg-blue-50, bg-red-50 para fondos
  * hover:text-red-700, hover:bg-red-50

Mejora significativa en la visualización y jerarquía visual de la información.

backend/add_columns.py

@@ -1,22 +0,0 @@
-import asyncio
-from sqlalchemy import text
-from app.core.database import engine
-
-async def add_columns():
-    print("Starting schema update...")
-    async with engine.begin() as conn:
-        try:
-            await conn.execute(text("ALTER TABLE tickets ADD COLUMN system_id UUID REFERENCES systems(id)"))
-            print("Added system_id column")
-        except Exception as e:
-            print(f"Error adding system_id (might exist): {e}")
-            
-        try:
-            await conn.execute(text("ALTER TABLE tickets ADD COLUMN category_id UUID REFERENCES categories(id)"))
-            print("Added category_id column")
-        except Exception as e:
-            print(f"Error adding category_id (might exist): {e}")
-    print("Schema update finished.")
-
-if __name__ == "__main__":
-    asyncio.run(add_columns())

backend/app/api/schemas/audit.py

@@ -0,0 +1,191 @@
+"""
+Audit Schemas - ServiceManagerWeb
+
+Schemas Pydantic para endpoints de auditoría
+"""
+
+from pydantic import BaseModel, Field, UUID4
+from typing import Optional, Dict, Any
+from datetime import datetime
+
+
+class AuditLogBase(BaseModel):
+    """Schema base para audit logs."""
+    action: str = Field(..., description="Acci├│n realizada (ej: ticket.create)")
+    resource_type: str = Field(..., description="Tipo de recurso (ticket, user, etc.)")
+    resource_id: Optional[UUID4] = Field(None, description="ID del recurso afectado")
+    extra_metadata: Optional[Dict[str, Any]] = Field(None, description="Metadata adicional", alias="metadata")
+
+
+class AuditLogResponse(AuditLogBase):
+    """
+    Schema de respuesta para audit logs.
+    
+    Incluye toda la informaci├│n del log con datos del usuario.
+    """
+    id: UUID4
+    tenant_id: UUID4
+    user_id: Optional[UUID4]
+    
+    # Informaci├│n del usuario (si existe)
+    user_email: Optional[str] = None
+    user_name: Optional[str] = None
+    user_role: Optional[str] = None
+    
+    # Contexto de la acci├│n
+    ip_address: Optional[str]
+    user_agent: Optional[str]
+    correlation_id: Optional[UUID4]
+    
+    # Cambios realizados
+    old_values: Optional[Dict[str, Any]]
+    new_values: Optional[Dict[str, Any]]
+    
+    # Timestamp
+    created_at: datetime
+    
+    # Display friendly
+    action_display: str = Field(description="Acci├│n en formato amigable")
+    
+    class Config:
+        from_attributes = True
+
+
+# ===================================
+# SECURITY ANALYSIS SCHEMAS
+# ===================================
+
+class SecurityThreatPattern(BaseModel):
+    """Patrón de amenaza detectado."""
+    type: str = Field(description="Tipo de amenaza (brute_force, privilege_escalation, etc.)")
+    severity: str = Field(description="Severidad: low, medium, high, critical")
+    description: str = Field(description="Descripción de la amenaza")
+    occurrences: int = Field(description="Número de ocurrencias")
+    affected_ips: list[str] = Field(default=[], description="IPs involucradas")
+    affected_users: list[str] = Field(default=[], description="Usuarios afectados")
+    first_seen: datetime = Field(description="Primera ocurrencia")
+    last_seen: datetime = Field(description="Última ocurrencia")
+    recommendations: list[str] = Field(default=[], description="Recomendaciones de acción")
+
+
+class SecurityAnalysisResponse(BaseModel):
+    """Análisis completo de seguridad."""
+    overall_risk_level: str = Field(description="Nivel de riesgo general: safe, low, medium, high, critical")
+    total_threats_detected: int = Field(description="Total de amenazas detectadas")
+    threats: list[SecurityThreatPattern] = Field(description="Lista de amenazas detectadas")
+    analysis_period_hours: int = Field(description="Período de análisis en horas")
+    generated_at: datetime = Field(description="Timestamp del análisis")
+    
+    # Estadísticas de seguridad
+    failed_login_attempts: int = Field(description="Intentos fallidos de login")
+    suspicious_ips_count: int = Field(description="IPs sospechosas detectadas")
+    critical_actions_count: int = Field(description="Acciones críticas realizadas")
+    
+    # Opciones de acción
+    recommended_actions: list[str] = Field(default=[], description="Acciones recomendadas")
+
+
+class SecurityActionRequest(BaseModel):
+    """Solicitud de acción de seguridad."""
+    action_type: str = Field(description="Tipo de acción: block_ip, notify_admin, reset_password, etc.")
+    target: str = Field(description="Objetivo de la acción (IP, email, etc.)")
+    reason: str = Field(description="Razón de la acción")
+    duration_minutes: Optional[int] = Field(None, description="Duración del bloqueo en minutos")
+
+
+class SecurityActionResponse(BaseModel):
+    """Respuesta de acción de seguridad."""
+    success: bool = Field(description="Si la acción fue exitosa")
+    message: str = Field(description="Mensaje descriptivo")
+    action_id: Optional[UUID4] = Field(None, description="ID de la acción registrada")
+
+
+class SecurityIncidentResponse(BaseModel):
+    """Respuesta para incidentes de seguridad."""
+    id: str = Field(description="ID único del incidente")
+    title: str = Field(description="Título del incidente")
+    description: Optional[str] = Field(None, description="Descripción detallada")
+    severity: str = Field(description="Severidad: low, medium, high, critical")
+    status: str = Field(description="Estado: active, investigating, resolved")
+    incident_type: str = Field(description="Tipo de incidente")
+    affected_user: Optional[str] = Field(None, description="Usuario afectado")
+    source_ip: Optional[str] = Field(None, description="IP origen del incidente")
+    evidence: list[str] = Field(default=[], description="Evidencia del incidente")
+    metadata: Optional[Dict[str, Any]] = Field(None, description="Metadata adicional")
+    created_at: datetime = Field(description="Fecha de creación")
+    updated_at: Optional[datetime] = Field(None, description="Última actualización")
+    resolved_at: Optional[datetime] = Field(None, description="Fecha de resolución")
+
+    class Config:
+        from_attributes = True
+
+
+class SecurityIncidentListResponse(BaseModel):
+    """Respuesta paginada de incidentes de seguridad."""
+    incidents: list[SecurityIncidentResponse]
+    total: int = Field(description="Total de incidentes")
+    page: int = Field(description="Página actual")
+    per_page: int = Field(description="Incidentes por página")
+    total_pages: int = Field(description="Total de páginas")
+
+    class Config:
+        from_attributes = True
+
+
+class AuditLogFilters(BaseModel):
+    """
+    Filtros para consulta de audit logs.
+    
+    Permite filtrar por m├║ltiples criterios.
+    """
+    # Paginaci├│n
+    page: int = Field(default=1, ge=1, description="Número de página")
+    per_page: int = Field(default=50, ge=1, le=100, description="Elementos por página")
+    
+    # Filtros
+    user_id: Optional[UUID4] = Field(None, description="Filtrar por usuario")
+    action: Optional[str] = Field(None, description="Filtrar por acción específica")
+    resource_type: Optional[str] = Field(None, description="Filtrar por tipo de recurso")
+    resource_id: Optional[UUID4] = Field(None, description="Filtrar por ID de recurso")
+    
+    # Rango de fechas
+    date_from: Optional[datetime] = Field(None, description="Fecha inicio (ISO 8601)")
+    date_to: Optional[datetime] = Field(None, description="Fecha fin (ISO 8601)")
+    
+    # B├║squeda
+    search: Optional[str] = Field(None, description="B├║squeda en acciones o recursos")
+
+
+class AuditLogStats(BaseModel):
+    """
+    Estadísticas de auditoría.
+    
+    Resumen de actividad del sistema.
+    """
+    total_actions: int = Field(description="Total de acciones registradas")
+    actions_today: int = Field(description="Acciones en las ├║ltimas 24 horas")
+    actions_this_week: int = Field(description="Acciones en los últimos 7 días")
+    critical_actions_today: int = Field(description="Acciones críticas hoy (delete, cambios sensibles)")
+    
+    # Top acciones
+    top_actions: Dict[str, int] = Field(description="Acciones más frecuentes")
+    
+    # Top usuarios
+    top_users: Dict[str, int] = Field(description="Usuarios más activos")
+    
+    # Actividad por tipo de recurso
+    by_resource_type: Dict[str, int] = Field(description="Acciones por tipo de recurso")
+
+
+class AuditLogListResponse(BaseModel):
+    """
+    Respuesta paginada de audit logs.
+    """
+    logs: list[AuditLogResponse]
+    total: int = Field(description="Total de registros")
+    page: int = Field(description="Página actual")
+    per_page: int = Field(description="Registros por página")
+    total_pages: int = Field(description="Total de páginas")
+    
+    class Config:
+        from_attributes = True

backend/app/api/schemas/client_profile.py

@@ -133,10 +133,10 @@ class ClientProfileUpdate(ClientProfileBase):
 class ClientProfileResponse(ClientProfileBase):
     """Schema de respuesta para ClientProfile."""
     
-    id: Optional[uuid.UUID] = None
+    id: uuid.UUID
     tenant_id: uuid.UUID
-    created_at: Optional[datetime] = None
-    updated_at: Optional[datetime] = None
+    created_at: datetime
+    updated_at: datetime
 
     class Config:
         from_attributes = True

backend/app/api/v1/endpoints/auth.py

@@ -18,6 +18,7 @@ from app.core.security import security
 from app.core.config import get_settings
 from app.models.user import User
 from app.models.tenant import Tenant
+from app.services.audit_service import AuditService
 
 router = APIRouter()
 logger = structlog.get_logger(__name__)
@@ -99,6 +100,23 @@ async def login(
             "Login failed - invalid credentials",
             email=login_data.email
         )
+        
+        # Registrar intento fallido en auditoría (si el usuario existe)
+        if user:
+            try:
+                await AuditService.log(
+                    db=db,
+                    tenant_id=user.tenant_id,
+                    user_id=None,  # Login fallido = sin user_id
+                    action="user.login_failed",
+                    resource_type="user",
+                    resource_id=user.id,
+                    metadata={"email": login_data.email, "reason": "invalid_password"}
+                )
+                await db.commit()
+            except Exception as e:
+                logger.warning("Failed to log audit entry", error=str(e))
+        
         raise HTTPException(
             status_code=status.HTTP_401_UNAUTHORIZED,
             detail="Credenciales inválidas"
@@ -126,6 +144,21 @@ async def login(
     access_token = security.create_access_token(token_data)
     refresh_token = security.create_refresh_token(token_data)
     
+    # Registrar login exitoso en auditoría
+    try:
+        await AuditService.log(
+            db=db,
+            tenant_id=user.tenant_id,
+            user_id=user.id,
+            action="user.login",
+            resource_type="user",
+            resource_id=user.id,
+            metadata={"email": user.email, "success": True}
+        )
+        await db.commit()
+    except Exception as e:
+        logger.warning("Failed to log audit entry", error=str(e))
+    
     logger.info(
         "Login successful",
         email=login_data.email,
@@ -227,6 +260,25 @@ async def logout(
     
     # TODO: Revoke refresh token in database
     
+    # Registrar logout en auditoría
+    try:
+        import uuid
+        user_id = uuid.UUID(payload["sub"])
+        tenant_id = uuid.UUID(payload["tenant_id"])
+        
+        await AuditService.log(
+            db=db,
+            tenant_id=tenant_id,
+            user_id=user_id,
+            action="user.logout",
+            resource_type="user",
+            resource_id=user_id,
+            metadata={"email": payload.get("email")}
+        )
+        await db.commit()
+    except Exception as e:
+        logger.warning("Failed to log audit entry", error=str(e))
+    
     logger.info("Logout successful", user_id=payload["sub"])
     
     return {"message": "Successfully logged out"}

backend/app/api/v1/endpoints/client_profile.py

@@ -50,49 +50,11 @@ async def get_current_client_profile(
     profile = result.scalar_one_or_none()
     
     if not profile:
-        # Si no existe, devolver un perfil vacío con solo tenant_id
-        # No crear en base de datos hasta que el usuario guarde
-        return ClientProfileResponse(
-            id=None,
-            tenant_id=current_tenant.id,
-            business_name=None,
-            commercial_name=None,
-            client_code=None,
-            client_type=None,
-            rfc=None,
-            tax_id=None,
-            country=None,
-            state=None,
-            city=None,
-            address=None,
-            external_number=None,
-            internal_number=None,
-            postal_code=None,
-            neighborhood=None,
-            main_phone=None,
-            secondary_phone=None,
-            direct_phone=None,
-            phone_extension=None,
-            fax=None,
-            business_hours=None,
-            website=None,
-            main_email=None,
-            billing_email=None,
-            advertising_medium=None,
-            nationality=None,
-            logo_url=None,
-            company_representative=None,
-            legal_representative=None,
-            credit_limit=None,
-            payment_terms=None,
-            preferred_currency="MXN",
-            send_to_billing=False,
-            is_active_client=True,
-            is_prospect=False,
-            notes=None,
-            created_at=None,
-            updated_at=None
-        )
+        # Si no existe, crear uno vacío
+        profile = ClientProfile(tenant_id=current_tenant.id)
+        db.add(profile)
+        await db.commit()
+        await db.refresh(profile)
     
     return profile
 

backend/app/api/v1/endpoints/tickets.py

@@ -21,6 +21,7 @@ from app.models.comment import TicketComment
 from app.models.attachment import TicketAttachment
 from app.api.schemas.attachment import AttachmentResponse
 from app.core.file_handler import file_handler
+from app.services.audit_service import AuditService
 import uuid
 
 router = APIRouter()
@@ -78,84 +79,139 @@ async def create_ticket(
     """
     Crear un nuevo ticket
     """
-    try:
-        # Generar número de ticket único
-        result = await db.execute(
-            select(func.count(Ticket.id)).where(Ticket.tenant_id == current_user.tenant_id)
-        )
-        count = result.scalar() or 0
-        ticket_number = f"TK-{count + 1:06d}"
-        
-        # Convertir IDs de string a UUID si son proporcionados
-        category_uuid = uuid.UUID(ticket.category_id) if ticket.category_id else None
-        system_uuid = uuid.UUID(ticket.affected_system_id) if ticket.affected_system_id else None  # ✅ CORREGIDO
-        
-        # ✅ CORREGIDO: Validar en la tabla correcta con el nombre correcto del modelo
-        if category_uuid:
-            category = await db.get(Category, category_uuid)  # ✅ Category, no TicketCategory
-            if not category:
-                raise HTTPException(
-                    status_code=status.HTTP_400_BAD_REQUEST,
-                    detail=f"La categoría con ID {ticket.category_id} no existe."
-                )
+    # Retry logic para evitar race conditions en generación de ticket_number
+    max_retries = 3
+    last_error = None
+    
+    for attempt in range(max_retries):
+        try:
+            # Generar número de ticket único basado en el máximo existente
+            result = await db.execute(
+                select(Ticket.ticket_number)
+                .where(Ticket.tenant_id == current_user.tenant_id)
+                .order_by(Ticket.ticket_number.desc())
+                .limit(1)
+            )
+            last_ticket_number = result.scalar_one_or_none()
+            
+            if last_ticket_number:
+                # Extraer el número del formato TK-XXXXXX
+                last_number = int(last_ticket_number.split('-')[1])
+                next_number = last_number + 1
+            else:
+                next_number = 1
+            
+            ticket_number = f"TK-{next_number:06d}"
+            
+            # Convertir IDs de string a UUID si son proporcionados
+            category_uuid = uuid.UUID(ticket.category_id) if ticket.category_id else None
+            system_uuid = uuid.UUID(ticket.affected_system_id) if ticket.affected_system_id else None
+            
+            # Validar categoría
+            if category_uuid:
+                category = await db.get(Category, category_uuid)
+                if not category:
+                    raise HTTPException(
+                        status_code=status.HTTP_400_BAD_REQUEST,
+                        detail=f"La categoría con ID {ticket.category_id} no existe."
+                    )
 
-        # Validar si el system_id existe en la tabla affected_systems
-        if system_uuid:
-            system = await db.get(System, system_uuid)
-            if not system:
-                raise HTTPException(
-                    status_code=status.HTTP_400_BAD_REQUEST,
-                    detail=f"El sistema con ID {ticket.affected_system_id} no existe."
+            # Validar sistema
+            if system_uuid:
+                system = await db.get(System, system_uuid)
+                if not system:
+                    raise HTTPException(
+                        status_code=status.HTTP_400_BAD_REQUEST,
+                        detail=f"El sistema con ID {ticket.affected_system_id} no existe."
+                    )
+            
+            db_ticket = Ticket(
+                id=uuid.uuid4(),
+                tenant_id=current_user.tenant_id,
+                ticket_number=ticket_number,
+                subject=ticket.subject,
+                description=ticket.description,
+                category_id=category_uuid,
+                affected_system_id=system_uuid,
+                priority=TicketPriority[ticket.priority.upper()],
+                created_by=current_user.id,
+                status=TicketStatus.NEW,
+                created_at=datetime.utcnow(),
+                updated_at=datetime.utcnow()
+            )
+            
+            db.add(db_ticket)
+            await db.commit()
+            await db.refresh(db_ticket)
+            
+            # Registrar creación en auditoría
+            try:
+                await AuditService.log(
+                    db=db,
+                    tenant_id=current_user.tenant_id,
+                    user_id=current_user.id,
+                    action="ticket.create",
+                    resource_type="ticket",
+                    resource_id=db_ticket.id,
+                    new_values={
+                        "ticket_number": db_ticket.ticket_number,
+                        "subject": db_ticket.subject,
+                        "priority": db_ticket.priority.value,
+                        "status": db_ticket.status.value
+                    }
                 )
-        
-        db_ticket = Ticket(
-            id=uuid.uuid4(),
-            tenant_id=current_user.tenant_id,
-            ticket_number=ticket_number,
-            subject=ticket.subject,
-            description=ticket.description,
-            category_id=category_uuid,
-            affected_system_id=system_uuid,  # ✅ CORREGIDO: Nombre correcto del campo
-            priority=TicketPriority[ticket.priority.upper()],
-            created_by=current_user.id,
-            status=TicketStatus.NEW,
-            created_at=datetime.utcnow(),
-            updated_at=datetime.utcnow()
-        )
-        
-        db.add(db_ticket)
-        await db.commit()
-        await db.refresh(db_ticket)
-        
-        # ✅ CORREGIDO: Usar affected_system_id en respuesta
-        return {
-            "id": str(db_ticket.id),
-            "ticket_number": db_ticket.ticket_number,
-            "subject": db_ticket.subject,
-            "title": db_ticket.subject,
-            "description": db_ticket.description,
-            "status": db_ticket.status.value,
-            "priority": db_ticket.priority.value,
-            "category_id": str(db_ticket.category_id) if db_ticket.category_id else None,
-            "affected_system_id": str(db_ticket.affected_system_id) if db_ticket.affected_system_id else None,  # ✅ CORREGIDO
-            "created_by": str(db_ticket.created_by),
-            "assigned_to": str(db_ticket.assigned_to) if db_ticket.assigned_to else None,
-            "created_at": db_ticket.created_at,
-            "updated_at": db_ticket.updated_at
-        }
-        
-    except ValueError as e:
-        await db.rollback()
-        raise HTTPException(
-            status_code=status.HTTP_400_BAD_REQUEST,
-            detail=f"Invalid UUID format: {str(e)}"
-        )
-    except Exception as e:
-        await db.rollback()
-        raise HTTPException(
-            status_code=status.HTTP_400_BAD_REQUEST,
-            detail=f"Error creating ticket: {str(e)}"
-        )
+                await db.commit()
+            except Exception as e:
+                # No fallar si falla el audit log
+                pass
+            
+            # ✅ Éxito - retornar ticket creado
+            return {
+                "id": str(db_ticket.id),
+                "ticket_number": db_ticket.ticket_number,
+                "subject": db_ticket.subject,
+                "title": db_ticket.subject,
+                "description": db_ticket.description,
+                "status": db_ticket.status.value,
+                "priority": db_ticket.priority.value,
+                "category_id": str(db_ticket.category_id) if db_ticket.category_id else None,
+                "affected_system_id": str(db_ticket.affected_system_id) if db_ticket.affected_system_id else None,
+                "created_by": str(db_ticket.created_by),
+                "assigned_to": str(db_ticket.assigned_to) if db_ticket.assigned_to else None,
+                "created_at": db_ticket.created_at,
+                "updated_at": db_ticket.updated_at
+            }
+            
+        except ValueError as e:
+            await db.rollback()
+            raise HTTPException(
+                status_code=status.HTTP_400_BAD_REQUEST,
+                detail=f"Invalid UUID format: {str(e)}"
+            )
+        except HTTPException:
+            # Re-lanzar HTTPExceptions directamente
+            await db.rollback()
+            raise
+        except Exception as e:
+            await db.rollback()
+            last_error = e
+            
+            # Si es un error de llave duplicada, reintentar
+            if "duplicate key" in str(e).lower() and "ticket_number" in str(e).lower():
+                if attempt < max_retries - 1:
+                    continue  # Reintentar
+            
+            # Para cualquier otro error, fallar inmediatamente
+            raise HTTPException(
+                status_code=status.HTTP_400_BAD_REQUEST,
+                detail=f"Error creating ticket: {str(e)}"
+            )
+    
+    # Si llegamos aquí después de todos los reintentos
+    raise HTTPException(
+        status_code=status.HTTP_500_INTERNAL_SERVER_ERROR,
+        detail=f"No se pudo crear el ticket después de {max_retries} intentos: {str(last_error)}"
+    )
 
 
 @router.get("/", response_model=List[TicketResponse])
@@ -167,13 +223,19 @@ async def get_tickets(
     current_user: User = Depends(get_current_user)
 ):
     """
-    Obtener tickets del usuario actual
+    Obtener tickets
+    Roles ADMIN/SUPPORT_MANAGER/AGENT: Ven todos los tickets del tenant
+    Roles CLIENT_USER/CLIENT_ADMIN: Solo ven sus propios tickets
     """
+    # Construir query base filtrado por tenant
     query = select(Ticket).where(
-        Ticket.tenant_id == current_user.tenant_id,
-        Ticket.created_by == current_user.id
+        Ticket.tenant_id == current_user.tenant_id
     )
     
+    # Si es cliente, solo puede ver sus propios tickets
+    if current_user.role in ["CLIENT_USER", "CLIENT_ADMIN"]:
+        query = query.where(Ticket.created_by == current_user.id)
+    
     if status_filter:
         try:
             status_enum = TicketStatus[status_filter.upper()]
@@ -200,7 +262,7 @@ async def get_tickets(
             "status": t.status.value,
             "priority": t.priority.value,
             "category_id": str(t.category_id) if t.category_id else None,
-            "affected_system_id": str(t.affected_system_id) if t.affected_system_id else None,  # ✅ CORREGIDO
+            "affected_system_id": str(t.affected_system_id) if t.affected_system_id else None,
             "created_by": str(t.created_by),
             "assigned_to": str(t.assigned_to) if t.assigned_to else None,
             "created_at": t.created_at,
@@ -366,49 +428,6 @@ async def get_all_tickets_admin(
     ]
 
 
-@router.get("/{ticket_id}", response_model=TicketResponse)
-async def get_ticket(
-    ticket_id: str,
-    db: AsyncSession = Depends(get_db),
-    current_user: User = Depends(get_current_user)
-):
-    
-    if status_filter:
-        try:
-            status_enum = TicketStatus[status_filter.upper()]
-            query = query.where(Ticket.status == status_enum)
-        except KeyError:
-            raise HTTPException(
-                status_code=status.HTTP_400_BAD_REQUEST,
-                detail=f"Invalid status: {status_filter}"
-            )
-    
-    query = query.order_by(Ticket.created_at.desc()).offset(skip).limit(limit)
-    
-    result = await db.execute(query)
-    tickets = result.scalars().all()
-    
-    # ✅ CORREGIDO: Usar affected_system_id
-    return [
-        {
-            "id": str(t.id),
-            "ticket_number": t.ticket_number,
-            "subject": t.subject,
-            "title": t.subject,
-            "description": t.description,
-            "status": t.status.value,
-            "priority": t.priority.value,
-            "category_id": str(t.category_id) if t.category_id else None,
-            "affected_system_id": str(t.affected_system_id) if t.affected_system_id else None,  # ✅ CORREGIDO
-            "created_by": str(t.created_by),
-            "assigned_to": str(t.assigned_to) if t.assigned_to else None,
-            "created_at": t.created_at,
-            "updated_at": t.updated_at
-        }
-        for t in tickets
-    ]
-
-
 @router.get("/{ticket_id}", response_model=TicketResponse)
 async def get_ticket(
     ticket_id: str,
@@ -417,6 +436,8 @@ async def get_ticket(
 ):
     """
     Obtener un ticket específico
+    Roles ADMIN/SUPPORT_MANAGER/AGENT: Pueden ver todos los tickets del tenant
+    Roles CLIENT_USER/CLIENT_ADMIN: Solo pueden ver sus propios tickets
     """
     try:
         ticket_uuid = uuid.UUID(ticket_id)
@@ -426,12 +447,16 @@ async def get_ticket(
             detail="Invalid ticket ID format"
         )
     
+    # Construir query basado en el rol del usuario
     query = select(Ticket).where(
         Ticket.id == ticket_uuid,
-        Ticket.tenant_id == current_user.tenant_id,
-        Ticket.created_by == current_user.id
+        Ticket.tenant_id == current_user.tenant_id
     )
     
+    # Si es cliente, solo puede ver sus propios tickets
+    if current_user.role in ["CLIENT_USER", "CLIENT_ADMIN"]:
+        query = query.where(Ticket.created_by == current_user.id)
+    
     result = await db.execute(query)
     ticket = result.scalars().first()
     
@@ -468,6 +493,8 @@ async def update_ticket(
 ):
     """
     Actualizar un ticket
+    Roles ADMIN/SUPPORT_MANAGER/AGENT: Pueden actualizar cualquier ticket del tenant
+    Roles CLIENT_USER/CLIENT_ADMIN: Solo pueden actualizar sus propios tickets
     """
     try:
         ticket_uuid = uuid.UUID(ticket_id)
@@ -477,12 +504,16 @@ async def update_ticket(
             detail="Invalid ticket ID format"
         )
     
+    # Construir query basado en el rol del usuario
     query = select(Ticket).where(
         Ticket.id == ticket_uuid,
-        Ticket.tenant_id == current_user.tenant_id,
-        Ticket.created_by == current_user.id
+        Ticket.tenant_id == current_user.tenant_id
     )
     
+    # Si es cliente, solo puede actualizar sus propios tickets
+    if current_user.role in ["CLIENT_USER", "CLIENT_ADMIN"]:
+        query = query.where(Ticket.created_by == current_user.id)
+    
     result = await db.execute(query)
     db_ticket = result.scalars().first()
     
@@ -492,6 +523,15 @@ async def update_ticket(
             detail=f"Ticket {ticket_id} not found"
         )
     
+    # Guardar valores anteriores para audit
+    old_values = {
+        "subject": db_ticket.subject,
+        "description": db_ticket.description,
+        "status": db_ticket.status.value,
+        "priority": db_ticket.priority.value,
+        "assigned_to": str(db_ticket.assigned_to) if db_ticket.assigned_to else None
+    }
+    
     try:
         update_data = ticket_update.dict(exclude_unset=True)
         
@@ -510,6 +550,34 @@ async def update_ticket(
         await db.commit()
         await db.refresh(db_ticket)
         
+        # Registrar actualización en auditoría
+        try:
+            new_values = {
+                "subject": db_ticket.subject,
+                "description": db_ticket.description,
+                "status": db_ticket.status.value,
+                "priority": db_ticket.priority.value,
+                "assigned_to": str(db_ticket.assigned_to) if db_ticket.assigned_to else None
+            }
+            
+            # Si cambió assigned_to, registrar como acción de asignación
+            action = "ticket.assign" if old_values["assigned_to"] != new_values["assigned_to"] else "ticket.update"
+            
+            await AuditService.log(
+                db=db,
+                tenant_id=current_user.tenant_id,
+                user_id=current_user.id,
+                action=action,
+                resource_type="ticket",
+                resource_id=db_ticket.id,
+                old_values=old_values,
+                new_values=new_values
+            )
+            await db.commit()
+        except Exception as e:
+            # No fallar si falla el audit log
+            pass
+        
         # ✅ CORREGIDO: Usar affected_system_id
         return {
             "id": str(db_ticket.id),
@@ -544,6 +612,8 @@ async def close_ticket(
 ):
     """
     Cerrar un ticket
+    Roles ADMIN/SUPPORT_MANAGER/AGENT: Pueden cerrar cualquier ticket del tenant
+    Roles CLIENT_USER/CLIENT_ADMIN: Solo pueden cerrar sus propios tickets
     """
     try:
         ticket_uuid = uuid.UUID(ticket_id)
@@ -553,12 +623,16 @@ async def close_ticket(
             detail="Invalid ticket ID format"
         )
     
+    # Construir query basado en el rol del usuario
     query = select(Ticket).where(
         Ticket.id == ticket_uuid,
-        Ticket.tenant_id == current_user.tenant_id,
-        Ticket.created_by == current_user.id
+        Ticket.tenant_id == current_user.tenant_id
     )
     
+    # Si es cliente, solo puede cerrar sus propios tickets
+    if current_user.role in ["CLIENT_USER", "CLIENT_ADMIN"]:
+        query = query.where(Ticket.created_by == current_user.id)
+    
     result = await db.execute(query)
     db_ticket = result.scalars().first()
     
@@ -772,9 +846,33 @@ async def delete_ticket(
             detail=f"Ticket {ticket_id} not found"
         )
     
+    # Guardar datos del ticket antes de eliminar para audit
+    old_values = {
+        "ticket_number": db_ticket.ticket_number,
+        "subject": db_ticket.subject,
+        "status": db_ticket.status.value,
+        "priority": db_ticket.priority.value
+    }
+    
     await db.delete(db_ticket)
     await db.commit()
     
+    # Registrar eliminación en auditoría
+    try:
+        await AuditService.log(
+            db=db,
+            tenant_id=current_user.tenant_id,
+            user_id=current_user.id,
+            action="ticket.delete",
+            resource_type="ticket",
+            resource_id=ticket_uuid,
+            old_values=old_values
+        )
+        await db.commit()
+    except Exception as e:
+        # No fallar si falla el audit log
+        pass
+    
     return {"message": "Ticket deleted successfully"}
 
 # ===================================
@@ -908,10 +1006,16 @@ async def download_attachment(
     current_tenant: Tenant = Depends(get_current_tenant)
 ):
     """Descargar un archivo adjunto"""
+    import logging
+    logger = logging.getLogger(__name__)
+    
+    logger.info(f"Download request - ticket_id: {ticket_id}, attachment_id: {attachment_id}")
+    
     try:
         ticket_uuid = uuid.UUID(ticket_id)
         attachment_uuid = uuid.UUID(attachment_id)
     except ValueError:
+        logger.error(f"Invalid UUID format - ticket_id: {ticket_id}, attachment_id: {attachment_id}")
         raise HTTPException(status_code=400, detail="ID inválido")
     
     # Verificar ticket
@@ -921,6 +1025,7 @@ async def download_attachment(
     ticket = result.scalar_one_or_none()
     
     if not ticket:
+        logger.error(f"Ticket not found - ticket_id: {ticket_id}")
         raise HTTPException(status_code=404, detail="Ticket no encontrado")
     
     # Obtener attachment
@@ -931,12 +1036,26 @@ async def download_attachment(
     attachment = result.scalar_one_or_none()
     
     if not attachment:
+        logger.error(f"Attachment not found - attachment_id: {attachment_id}")
         raise HTTPException(status_code=404, detail="Adjunto no encontrado")
     
+    logger.info(f"Attachment found - file_path: {attachment.file_path}, original_filename: {attachment.original_filename}")
+    
     # Obtener path del archivo
-    file_path = file_handler.get_file_path(attachment.file_path)
+    try:
+        file_path = file_handler.get_file_path(attachment.file_path)
+        logger.info(f"Absolute file path: {file_path}")
+        
+        if not file_path.exists():
+            logger.error(f"File does not exist at path: {file_path}")
+            raise HTTPException(status_code=404, detail="Archivo no encontrado en el sistema")
+            
+    except Exception as e:
+        logger.error(f"Error getting file path: {str(e)}")
+        raise
     
     # Retornar archivo
+    logger.info(f"Returning file: {attachment.original_filename}")
     return FileResponse(
         path=file_path,
         filename=attachment.original_filename,

backend/app/api/v1/endpoints/users.py

@@ -9,6 +9,7 @@ import uuid
 from app.core.database import get_db
 from app.core.security import security
 from app.models.user import User, UserRole
+from app.services.audit_service import AuditService
 from app.api import deps 
 
 router = APIRouter()
@@ -147,6 +148,28 @@ async def create_user(
     db.add(db_user)
     await db.commit()
     await db.refresh(db_user)
+    
+    # Registrar creación en auditoría
+    try:
+        await AuditService.log(
+            db=db,
+            tenant_id=current_user.tenant_id,
+            user_id=current_user.id,
+            action="user.create",
+            resource_type="user",
+            resource_id=db_user.id,
+            new_values=AuditService.sanitize_values({
+                "email": db_user.email,
+                "first_name": db_user.first_name,
+                "last_name": db_user.last_name,
+                "role": db_user.role.value
+            })
+        )
+        await db.commit()
+    except Exception as e:
+        # No fallar si falla el audit log
+        pass
+    
     return db_user
 
 
@@ -214,6 +237,15 @@ async def update_user(
             detail="User not found"
         )
     
+    # Guardar valores anteriores para audit
+    old_values = {
+        "email": db_user.email,
+        "first_name": db_user.first_name,
+        "last_name": db_user.last_name,
+        "role": db_user.role.value,
+        "is_active": db_user.is_active
+    }
+    
     # Verificar email único si se está cambiando
     update_data = user_update.model_dump(exclude_unset=True)
     if "email" in update_data and update_data["email"] != db_user.email:
@@ -239,6 +271,32 @@ async def update_user(
     
     await db.commit()
     await db.refresh(db_user)
+    
+    # Registrar actualización en auditoría
+    try:
+        new_values = {
+            "email": db_user.email,
+            "first_name": db_user.first_name,
+            "last_name": db_user.last_name,
+            "role": db_user.role.value,
+            "is_active": db_user.is_active
+        }
+        
+        await AuditService.log(
+            db=db,
+            tenant_id=current_user.tenant_id,
+            user_id=current_user.id,
+            action="user.update",
+            resource_type="user",
+            resource_id=db_user.id,
+            old_values=AuditService.sanitize_values(old_values),
+            new_values=AuditService.sanitize_values(new_values)
+        )
+        await db.commit()
+    except Exception as e:
+        # No fallar si falla el audit log
+        pass
+    
     return db_user
 
 
@@ -306,6 +364,28 @@ async def delete_user(
     # Soft delete
     db_user.is_active = False
     await db.commit()
+    
+    # Registrar eliminación en auditoría
+    try:
+        await AuditService.log(
+            db=db,
+            tenant_id=current_user.tenant_id,
+            user_id=current_user.id,
+            action="user.delete",
+            resource_type="user",
+            resource_id=db_user.id,
+            old_values={
+                "email": db_user.email,
+                "role": db_user.role.value,
+                "was_active": True
+            },
+            metadata={"action_type": "soft_delete"}
+        )
+        await db.commit()
+    except Exception as e:
+        # No fallar si falla el audit log
+        pass
+    
     return None
 
 

backend/app/api/v1/router.py

@@ -6,7 +6,7 @@ Router principal para la API v1
 
 from fastapi import APIRouter
 
-from app.api.v1.endpoints import auth, health, tenants, users, systems, categories, tickets, client_profile
+from app.api.v1.endpoints import auth, health, tenants, users, systems, categories, tickets, client_profile, audit
 
 api_router = APIRouter()
 
@@ -59,4 +59,11 @@ api_router.include_router(
     client_profile.router,
     prefix="/client-profile",
     tags=["client-profile"]
+)
+
+# Audit routes
+api_router.include_router(
+    audit.router,
+    prefix="/audit",
+    tags=["audit"]
 )

backend/app/core/config.py

@@ -27,6 +27,7 @@ class Settings(BaseSettings):
     DEBUG: bool = Field(default=False)
     SECRET_KEY: str = Field(...)
     API_VERSION: str = Field(default="v1")
+    APP_VERSION: str = Field(default="1.6.0")
     
     # ===================================
     # DATABASE

backend/app/main.py

@@ -23,6 +23,8 @@ from app.models.user import User
 from app.models.ticket import Ticket
 from app.models.comment import TicketComment
 from app.models.attachment import TicketAttachment
+from app.models.audit import AuditLog
+from app.models.refresh_token import RefreshToken
 
 from app.core.logging import setup_logging
 from app.api.v1.router import api_router
@@ -54,7 +56,7 @@ async def lifespan(app: FastAPI):
 app = FastAPI(
     title="ServiceManagerWeb API",
     description="Mesa de Ayuda B2B multi-tenant para Aduanasoft",
-    version=settings.API_VERSION,
+    version=settings.APP_VERSION,
     lifespan=lifespan,
     docs_url=f"/{settings.API_VERSION}/docs" if settings.ENVIRONMENT == "development" else None,
     redoc_url=f"/{settings.API_VERSION}/redoc" if settings.ENVIRONMENT == "development" else None,
@@ -161,7 +163,8 @@ async def health_check():
     return {
         "status": "healthy",
         "service": "ServiceManagerWeb API",
-        "version": settings.API_VERSION,
+        "version": settings.APP_VERSION,
+        "api_version": settings.API_VERSION,
         "environment": settings.ENVIRONMENT
     }
 
@@ -172,7 +175,8 @@ async def root():
     """Endpoint raíz con información básica."""
     return {
         "service": "ServiceManagerWeb API",
-        "version": settings.API_VERSION,
+        "version": settings.APP_VERSION,
+        "api_version": settings.API_VERSION,
         "docs": f"/{settings.API_VERSION}/docs",
         "environment": settings.ENVIRONMENT
     }

backend/app/middleware/tenant.py

@@ -24,10 +24,17 @@ class TenantMiddleware(BaseHTTPMiddleware):
     EXCLUDED_PATHS = {
         "/health",
         "/",
+        "/api/v1/auth/login",
         "/v1/auth/login",
         "/docs",
+        "/api/v1/docs",
+        "/v1/docs",
         "/openapi.json",
-        "/redoc"
+        "/api/v1/openapi.json",
+        "/v1/openapi.json",
+        "/redoc",
+        "/api/v1/redoc",
+        "/v1/redoc"
     }
     
     async def dispatch(self, request: Request, call_next) -> Response:

backend/app/models/__init__.py

@@ -8,6 +8,8 @@ from .system import System
 from .category import Category
 from .client_profile import ClientProfile
 from .attachment import TicketAttachment
+from .audit import AuditLog
+from .refresh_token import RefreshToken
 
 __all__ = [
     "User",
@@ -17,5 +19,7 @@ __all__ = [
     "System",
     "Category",
     "ClientProfile",
-    "TicketAttachment"
+    "TicketAttachment",
+    "AuditLog",
+    "RefreshToken"
 ]

backend/app/models/audit.py

@@ -0,0 +1,148 @@
+"""
+Audit Log Model - ServiceManagerWeb
+
+Modelo para bitácora de auditoría y compliance.
+Registra todas las acciones importantes del sistema.
+"""
+
+from sqlalchemy import String, Text, DateTime, ForeignKey, Index
+from sqlalchemy.orm import Mapped, mapped_column, relationship
+from sqlalchemy.dialects.postgresql import UUID, INET, JSONB
+from typing import Optional, Dict, Any, TYPE_CHECKING
+import uuid
+from datetime import datetime
+
+from app.core.database import Base
+
+if TYPE_CHECKING:
+    from app.models.tenant import Tenant
+    from app.models.user import User
+
+
+class AuditLog(Base):
+    """
+    Bitácora de auditoría para tracking completo de acciones.
+    
+    Registra:
+    - Qui├®n hizo la acci├│n (user_id)
+    - Qu├® hizo (action)
+    - Sobre qu├® recurso (resource_type + resource_id)
+    - Cuándo lo hizo (created_at)
+    - Desde d├│nde (ip_address, user_agent)
+    - Qu├® cambi├│ (old_values, new_values)
+    """
+    
+    __tablename__ = "audit_logs"
+    
+    # Multi-tenancy
+    tenant_id: Mapped[uuid.UUID] = mapped_column(
+        UUID(as_uuid=True),
+        ForeignKey("tenants.id", ondelete="CASCADE"),
+        nullable=False,
+        index=True
+    )
+    
+    # Usuario que ejecut├│ la acci├│n (NULL = acci├│n del sistema)
+    user_id: Mapped[Optional[uuid.UUID]] = mapped_column(
+        UUID(as_uuid=True),
+        ForeignKey("users.id", ondelete="SET NULL"),
+        nullable=True,
+        index=True
+    )
+    
+    # Acci├│n realizada (ej: "user.login", "ticket.create", "ticket.assign")
+    action: Mapped[str] = mapped_column(
+        String(100),
+        nullable=False,
+        index=True
+    )
+    
+    # Tipo de recurso afectado (user, ticket, comment, category, etc.)
+    resource_type: Mapped[str] = mapped_column(
+        String(50),
+        nullable=False,
+        index=True
+    )
+    
+    # ID del recurso afectado
+    resource_id: Mapped[Optional[uuid.UUID]] = mapped_column(
+        UUID(as_uuid=True),
+        nullable=True
+    )
+    
+    # Contexto de la request
+    ip_address: Mapped[Optional[str]] = mapped_column(INET, nullable=True)
+    user_agent: Mapped[Optional[str]] = mapped_column(Text, nullable=True)
+    
+    # Correlation ID para rastrear requests relacionadas
+    correlation_id: Mapped[Optional[uuid.UUID]] = mapped_column(
+        UUID(as_uuid=True),
+        nullable=True,
+        index=True
+    )
+    
+    # Valores antes del cambio (JSON)
+    old_values: Mapped[Optional[Dict[str, Any]]] = mapped_column(
+        JSONB,
+        nullable=True
+    )
+    
+    # Valores despu├®s del cambio (JSON)
+    new_values: Mapped[Optional[Dict[str, Any]]] = mapped_column(
+        JSONB,
+        nullable=True
+    )
+    
+    # Metadata adicional (cualquier info relevante)
+    # Nota: 'metadata' está reservado en SQLAlchemy, usamos 'extra_metadata'
+    extra_metadata: Mapped[Optional[Dict[str, Any]]] = mapped_column(
+        'metadata',  # Nombre real de la columna en BD
+        JSONB,
+        nullable=True
+    )
+    
+    # Timestamp
+    created_at: Mapped[datetime] = mapped_column(
+        DateTime(timezone=True),
+        default=datetime.utcnow,
+        nullable=False,
+        index=True
+    )
+    
+    # Relaciones
+    tenant: Mapped["Tenant"] = relationship("Tenant", foreign_keys=[tenant_id])
+    user: Mapped[Optional["User"]] = relationship("User", foreign_keys=[user_id])
+    
+    # Índices compuestos para queries comunes
+    __table_args__ = (
+        Index('idx_audit_logs_tenant_action', 'tenant_id', 'action'),
+        Index('idx_audit_logs_resource', 'resource_type', 'resource_id'),
+        Index('idx_audit_logs_user_created', 'user_id', 'created_at'),
+    )
+    
+    # Configuraci├│n del mapper: excluir updated_at porque audit logs son inmutables
+    __mapper_args__ = {
+        "exclude_properties": ["updated_at"]
+    }
+    
+    def __repr__(self) -> str:
+        return f"<AuditLog(action='{self.action}', resource='{self.resource_type}:{self.resource_id}')>"
+    
+    @property
+    def action_display(self) -> str:
+        """Formato amigable de la acci├│n."""
+        parts = self.action.split('.')
+        if len(parts) == 2:
+            resource, verb = parts
+            verb_map = {
+                'create': 'cre├│',
+                'update': 'actualiz├│',
+                'delete': 'elimin├│',
+                'login': 'inici├│ sesi├│n',
+                'logout': 'cerr├│ sesi├│n',
+                'assign': 'asign├│',
+                'close': 'cerr├│',
+                'reopen': 'reabri├│'
+            }
+            return f"{verb_map.get(verb, verb)} {resource}"
+        return self.action

backend/app/models/refresh_token.py

@@ -0,0 +1,171 @@
+"""
+Refresh Token Model - ServiceManagerWeb
+
+Modelo para persistencia de refresh tokens con revocaci├│n y tracking.
+"""
+
+from sqlalchemy import String, Boolean, DateTime, ForeignKey, Index, Integer
+from sqlalchemy.orm import Mapped, mapped_column, relationship
+from sqlalchemy.dialects.postgresql import UUID
+from typing import Optional, TYPE_CHECKING
+import uuid
+from datetime import datetime
+
+from app.core.database import Base
+
+if TYPE_CHECKING:
+    from app.models.user import User
+
+
+class RefreshToken(Base):
+    """
+    Refresh Token persistente para gesti├│n de sesiones.
+    
+    Almacena refresh tokens con informaci├│n de dispositivo y permite
+    revocaci├│n para mejorar la seguridad.
+    
+    Características:
+    - Token hasheado (no se guarda en texto plano)
+    - Device fingerprinting
+    - Revocaci├│n individual con tracking
+    - Auto-expiraci├│n
+    - Tracking de IP y uso
+    """
+    
+    __tablename__ = "refresh_tokens"
+    
+    # User relationship
+    user_id: Mapped[uuid.UUID] = mapped_column(
+        UUID(as_uuid=True),
+        ForeignKey("users.id", ondelete="CASCADE"),
+        nullable=False,
+        index=True
+    )
+    
+    # Token JWT (almacenado directamente - firmado y verificable)
+    # VARCHAR(500) para acomodar JWTs con payload extenso
+    token: Mapped[str] = mapped_column(
+        String(500),
+        nullable=False,
+        unique=True
+    )
+    
+    # Device information
+    device_id: Mapped[Optional[str]] = mapped_column(
+        String(100),
+        nullable=True
+    )
+    
+    device_name: Mapped[Optional[str]] = mapped_column(
+        String(200),
+        nullable=True
+    )
+    
+    user_agent: Mapped[Optional[str]] = mapped_column(
+        String(500),
+        nullable=True
+    )
+    
+    # IP address del cliente (varchar(45) para IPv6)
+    ip_address: Mapped[Optional[str]] = mapped_column(
+        String(45),
+        nullable=True
+    )
+    
+    # Expiraci├│n del token
+    expires_at: Mapped[datetime] = mapped_column(
+        DateTime(timezone=True),
+        nullable=False,
+        index=True
+    )
+    
+    # Estado de revocaci├│n
+    revoked: Mapped[bool] = mapped_column(
+        Boolean,
+        default=False,
+        nullable=False
+    )
+    
+    revoked_at: Mapped[Optional[datetime]] = mapped_column(
+        DateTime(timezone=True),
+        nullable=True
+    )
+    
+    revoked_by: Mapped[Optional[uuid.UUID]] = mapped_column(
+        UUID(as_uuid=True),
+        ForeignKey("users.id", ondelete="SET NULL"),
+        nullable=True
+    )
+    
+    # Tracking de uso
+    last_used_at: Mapped[Optional[datetime]] = mapped_column(
+        DateTime(timezone=True),
+        nullable=True
+    )
+    
+    usage_count: Mapped[int] = mapped_column(
+        Integer,
+        default=0,
+        nullable=False
+    )
+    
+    # Timestamps
+    created_at: Mapped[datetime] = mapped_column(
+        DateTime(timezone=True),
+        default=datetime.utcnow,
+        nullable=False,
+        server_default="NOW()"
+    )
+    
+    updated_at: Mapped[datetime] = mapped_column(
+        DateTime(timezone=True),
+        default=datetime.utcnow,
+        onupdate=datetime.utcnow,
+        nullable=False,
+        server_default="NOW()"
+    )
+    
+    # Relaci├│n con usuario
+    user: Mapped["User"] = relationship("User", foreign_keys=[user_id], back_populates="refresh_tokens")
+    revoker: Mapped[Optional["User"]] = relationship("User", foreign_keys=[revoked_by])
+    
+    # Índices compuestos
+    __table_args__ = (
+        Index('idx_refresh_tokens_user_expires', 'user_id', 'expires_at'),
+    )
+    
+    def __repr__(self) -> str:
+        return f"<RefreshToken(user_id='{self.user_id}', revoked={self.revoked}, expires={self.expires_at})>"
+    
+    @property
+    def is_valid(self) -> bool:
+        """
+        Verificar si el token es válido.
+        
+        Un token es válido si:
+        - No está revocado
+        - No ha expirado
+        """
+        return not self.revoked and self.expires_at > datetime.utcnow()
+    
+    @property
+    def is_expired(self) -> bool:
+        """Verificar si el token ha expirado."""
+        return datetime.utcnow() >= self.expires_at
+    
+    def revoke(self, revoked_by: Optional[uuid.UUID] = None) -> None:
+        """
+        Marcar el token como revocado.
+        
+        Args:
+            revoked_by: ID del usuario que revoc├│ el token
+        """
+        self.revoked = True
+        self.revoked_at = datetime.utcnow()
+        if revoked_by:
+            self.revoked_by = revoked_by
+    
+    def track_usage(self) -> None:
+        """Registrar uso del token."""
+        self.last_used_at = datetime.utcnow()
+        self.usage_count += 1

backend/app/models/user.py

@@ -78,6 +78,12 @@ class User(Base):
         back_populates="assigned_to_user", 
         foreign_keys="Ticket.assigned_to"
     )
+    refresh_tokens: Mapped[List["RefreshToken"]] = relationship(
+        "RefreshToken",
+        back_populates="user",
+        foreign_keys="RefreshToken.user_id",
+        cascade="all, delete-orphan"
+    )
     
     # Unique constraint por tenant
     __table_args__ = (

backend/app/services/audit_service.py

@@ -0,0 +1,311 @@
+"""
+Audit Service - ServiceManagerWeb
+
+Funciones helper para facilitar el registro de auditoría.
+Simplifica el proceso de logging en toda la aplicaci├│n.
+"""
+
+from typing import Optional, Dict, Any
+from sqlalchemy.ext.asyncio import AsyncSession
+from fastapi import Request
+import uuid
+import structlog
+
+from app.models.audit import AuditLog
+from app.models.user import User
+
+logger = structlog.get_logger(__name__)
+
+
+class AuditService:
+    """
+    Servicio centralizado para registro de auditoría.
+    
+    Uso básico:
+        await AuditService.log(
+            db=db,
+            tenant_id=tenant.id,
+            user_id=current_user.id,
+            action="ticket.create",
+            resource_type="ticket",
+            resource_id=new_ticket.id,
+            new_values={"subject": "...", "status": "NEW"}
+        )
+    """
+    
+    @staticmethod
+    async def log(
+        db: AsyncSession,
+        tenant_id: uuid.UUID,
+        action: str,
+        resource_type: str,
+        resource_id: Optional[uuid.UUID] = None,
+        user_id: Optional[uuid.UUID] = None,
+        old_values: Optional[Dict[str, Any]] = None,
+        new_values: Optional[Dict[str, Any]] = None,
+        metadata: Optional[Dict[str, Any]] = None,
+        request: Optional[Request] = None
+    ) -> AuditLog:
+        """
+        Registra una acción en la bitácora de auditoría.
+        
+        Args:
+            db: Sesi├│n de base de datos
+            tenant_id: ID del tenant
+            action: Acci├│n realizada (formato: "recurso.verbo")
+                   Ejemplos: "user.login", "ticket.create", "ticket.assign"
+            resource_type: Tipo de recurso ("user", "ticket", "comment", etc.)
+            resource_id: ID del recurso afectado (opcional)
+            user_id: ID del usuario que ejecut├│ la acci├│n (opcional = sistema)
+            old_values: Valores antes del cambio (opcional)
+            new_values: Valores despu├®s del cambio (opcional)
+            metadata: Informaci├│n adicional (opcional)
+            request: Request de FastAPI para extraer IP y user agent (opcional)
+            
+        Returns:
+            AuditLog creado
+        """
+        # Extraer información del request si está disponible
+        ip_address = None
+        user_agent = None
+        correlation_id = None
+        
+        if request:
+            # IP del cliente
+            if request.client:
+                ip_address = request.client.host
+            
+            # User agent
+            user_agent = request.headers.get("user-agent")
+            
+            # Correlation ID (si existe en el request state)
+            correlation_id = getattr(request.state, "correlation_id", None)
+        
+        # Crear registro de auditoría
+        audit_log = AuditLog(
+            tenant_id=tenant_id,
+            user_id=user_id,
+            action=action,
+            resource_type=resource_type,
+            resource_id=resource_id,
+            ip_address=ip_address,
+            user_agent=user_agent,
+            correlation_id=correlation_id,
+            old_values=old_values,
+            new_values=new_values,
+            extra_metadata=metadata  # Mapeo metadata -> extra_metadata
+        )
+        
+        db.add(audit_log)
+        await db.flush()  # No commit, se hará con la transacción principal
+        
+        # Log estructurado para debugging
+        logger.info(
+            "Audit log created",
+            action=action,
+            resource_type=resource_type,
+            resource_id=str(resource_id) if resource_id else None,
+            user_id=str(user_id) if user_id else "system",
+            tenant_id=str(tenant_id)
+        )
+        
+        return audit_log
+    
+    @staticmethod
+    async def log_login(
+        db: AsyncSession,
+        user: User,
+        request: Request,
+        success: bool = True
+    ) -> AuditLog:
+        """
+        Registra un intento de login.
+        
+        Args:
+            db: Sesi├│n de base de datos
+            user: Usuario que intent├│ loguearse
+            request: Request de FastAPI
+            success: Si el login fue exitoso
+            
+        Returns:
+            AuditLog creado
+        """
+        return await AuditService.log(
+            db=db,
+            tenant_id=user.tenant_id,
+            user_id=user.id if success else None,
+            action="user.login" if success else "user.login_failed",
+            resource_type="user",
+            resource_id=user.id,
+            metadata={
+                "success": success,
+                "email": user.email
+            },
+            request=request
+        )
+    
+    @staticmethod
+    async def log_logout(
+        db: AsyncSession,
+        user: User,
+        request: Request
+    ) -> AuditLog:
+        """
+        Registra un logout.
+        
+        Args:
+            db: Sesi├│n de base de datos
+            user: Usuario que cerr├│ sesi├│n
+            request: Request de FastAPI
+            
+        Returns:
+            AuditLog creado
+        """
+        return await AuditService.log(
+            db=db,
+            tenant_id=user.tenant_id,
+            user_id=user.id,
+            action="user.logout",
+            resource_type="user",
+            resource_id=user.id,
+            request=request
+        )
+    
+    @staticmethod
+    async def log_create(
+        db: AsyncSession,
+        tenant_id: uuid.UUID,
+        user_id: uuid.UUID,
+        resource_type: str,
+        resource_id: uuid.UUID,
+        new_values: Dict[str, Any],
+        request: Optional[Request] = None
+    ) -> AuditLog:
+        """
+        Registra la creaci├│n de un recurso.
+        
+        Args:
+            db: Sesi├│n de base de datos
+            tenant_id: ID del tenant
+            user_id: ID del usuario que cre├│ el recurso
+            resource_type: Tipo de recurso ("ticket", "user", etc.)
+            resource_id: ID del recurso creado
+            new_values: Valores del nuevo recurso
+            request: Request de FastAPI (opcional)
+            
+        Returns:
+            AuditLog creado
+        """
+        return await AuditService.log(
+            db=db,
+            tenant_id=tenant_id,
+            user_id=user_id,
+            action=f"{resource_type}.create",
+            resource_type=resource_type,
+            resource_id=resource_id,
+            new_values=new_values,
+            request=request
+        )
+    
+    @staticmethod
+    async def log_update(
+        db: AsyncSession,
+        tenant_id: uuid.UUID,
+        user_id: uuid.UUID,
+        resource_type: str,
+        resource_id: uuid.UUID,
+        old_values: Dict[str, Any],
+        new_values: Dict[str, Any],
+        request: Optional[Request] = None
+    ) -> AuditLog:
+        """
+        Registra la actualizaci├│n de un recurso.
+        
+        Args:
+            db: Sesi├│n de base de datos
+            tenant_id: ID del tenant
+            user_id: ID del usuario que actualiz├│
+            resource_type: Tipo de recurso
+            resource_id: ID del recurso
+            old_values: Valores anteriores
+            new_values: Valores nuevos
+            request: Request de FastAPI (opcional)
+            
+        Returns:
+            AuditLog creado
+        """
+        return await AuditService.log(
+            db=db,
+            tenant_id=tenant_id,
+            user_id=user_id,
+            action=f"{resource_type}.update",
+            resource_type=resource_type,
+            resource_id=resource_id,
+            old_values=old_values,
+            new_values=new_values,
+            request=request
+        )
+    
+    @staticmethod
+    async def log_delete(
+        db: AsyncSession,
+        tenant_id: uuid.UUID,
+        user_id: uuid.UUID,
+        resource_type: str,
+        resource_id: uuid.UUID,
+        old_values: Dict[str, Any],
+        request: Optional[Request] = None
+    ) -> AuditLog:
+        """
+        Registra la eliminaci├│n de un recurso.
+        
+        Args:
+            db: Sesi├│n de base de datos
+            tenant_id: ID del tenant
+            user_id: ID del usuario que elimin├│
+            resource_type: Tipo de recurso
+            resource_id: ID del recurso eliminado
+            old_values: Valores del recurso antes de eliminar
+            request: Request de FastAPI (opcional)
+            
+        Returns:
+            AuditLog creado
+        """
+        return await AuditService.log(
+            db=db,
+            tenant_id=tenant_id,
+            user_id=user_id,
+            action=f"{resource_type}.delete",
+            resource_type=resource_type,
+            resource_id=resource_id,
+            old_values=old_values,
+            request=request
+        )
+    
+    @staticmethod
+    def sanitize_values(values: Dict[str, Any]) -> Dict[str, Any]:
+        """
+        Sanitiza valores sensibles antes de guardarlos en audit log.
+        
+        Remueve campos como passwords, tokens, etc.
+        
+        Args:
+            values: Diccionario de valores
+            
+        Returns:
+            Diccionario sanitizado
+        """
+        sensitive_fields = {
+            'password',
+            'password_hash',
+            'totp_secret',
+            'backup_codes',
+            'token',
+            'access_token',
+            'refresh_token'
+        }
+        
+        return {
+            key: '***REDACTED***' if key in sensitive_fields else value
+            for key, value in values.items()
+        }

backend/app/services/token_service.py

@@ -0,0 +1,270 @@
+"""
+Token Service - ServiceManagerWeb
+
+Servicio para gesti├│n de refresh tokens persistentes.
+"""
+
+from sqlalchemy.ext.asyncio import AsyncSession
+from sqlalchemy import select, delete
+from datetime import datetime, timedelta
+from typing import Optional
+import uuid
+import structlog
+
+from app.models.refresh_token import RefreshToken
+from app.models.user import User
+from app.core.config import get_settings
+
+logger = structlog.get_logger(__name__)
+settings = get_settings()
+
+
+class TokenService:
+    """
+    Servicio para gesti├│n de refresh tokens.
+    
+    Proporciona m├®todos para crear, validar, revocar y limpiar
+    refresh tokens persistentes.
+    
+    NOTA: Los tokens se almacenan directamente en BD (no hash)
+    ya que los JWTs son firmados y verificables.
+    """
+    
+    @staticmethod
+    async def create_refresh_token(
+        db: AsyncSession,
+        user: User,
+        refresh_token: str,
+        device_id: Optional[str] = None,
+        device_name: Optional[str] = None,
+        user_agent: Optional[str] = None,
+        ip_address: Optional[str] = None
+    ) -> RefreshToken:
+        """
+        Crear y persistir un refresh token.
+        
+        Args:
+            db: Sesi├│n de base de datos
+            user: Usuario propietario del token
+            refresh_token: Token JWT generado (se almacena directamente)
+            device_id: ID ├║nico del dispositivo (UUID generado por cliente)
+            device_name: Nombre del dispositivo (ej: "Chrome en Windows")
+            user_agent: User agent completo del navegador
+            ip_address: IP del cliente
+            
+        Returns:
+            RefreshToken creado
+        """
+        # Calcular expiraci├│n
+        expires_at = datetime.utcnow() + timedelta(
+            days=settings.REFRESH_TOKEN_EXPIRE_DAYS
+        )
+        
+        # Crear registro - almacena JWT directamente (columna UNIQUE)
+        db_token = RefreshToken(
+            user_id=user.id,
+            token=refresh_token,  # JWT almacenado directamente
+            device_id=device_id,
+            device_name=device_name,
+            user_agent=user_agent,
+            ip_address=ip_address,
+            expires_at=expires_at,
+            revoked=False,
+            usage_count=0
+        )
+        
+        db.add(db_token)
+        await db.flush()
+        
+        logger.info(
+            "Refresh token created",
+            user_id=str(user.id),
+            token_id=str(db_token.id),
+            device_name=device_name,
+            expires_at=expires_at.isoformat()
+        )
+        
+        return db_token
+    
+    @staticmethod
+    async def verify_refresh_token(
+        db: AsyncSession,
+        refresh_token: str
+    ) -> Optional[RefreshToken]:
+        """
+        Verificar que el refresh token exista y sea válido.
+        
+        Busca el JWT directamente en la BD y verifica su estado.
+        
+        Args:
+            db: Sesi├│n de base de datos
+            refresh_token: Token JWT a verificar
+            
+        Returns:
+            RefreshToken si es válido, None si no existe o está revocado/expirado
+        """
+        # Buscar token directamente en BD (sin hash)
+        query = select(RefreshToken).where(
+            RefreshToken.token == refresh_token
+        )
+        result = await db.execute(query)
+        db_token = result.scalar_one_or_none()
+        
+        if not db_token:
+            logger.warning("Refresh token not found in database")
+            return None
+        
+        # Verificar si es válido (usa property is_valid del modelo)
+        if not db_token.is_valid:
+            logger.warning(
+                "Invalid refresh token",
+                token_id=str(db_token.id),
+                revoked=db_token.revoked,
+                expired=db_token.is_expired
+            )
+            return None
+        
+        # Actualizar estadísticas de uso
+        db_token.track_usage()
+        await db.flush()
+        
+        logger.info(
+            "Refresh token verified and usage tracked",
+            token_id=str(db_token.id),
+            usage_count=db_token.usage_count
+        )
+        return db_token
+    
+    @staticmethod
+    async def revoke_token(
+        db: AsyncSession,
+        refresh_token: str,
+        revoked_by_user_id: Optional[uuid.UUID] = None
+    ) -> bool:
+        """
+        Revocar un refresh token específico.
+        
+        Args:
+            db: Sesi├│n de base de datos
+            refresh_token: Token JWT a revocar
+            revoked_by_user_id: ID del usuario que revoca (para auditoría)
+            
+        Returns:
+            True si se revoc├│, False si no se encontr├│
+        """
+        # Buscar token directamente (sin hash)
+        query = select(RefreshToken).where(
+            RefreshToken.token == refresh_token
+        )
+        result = await db.execute(query)
+        db_token = result.scalar_one_or_none()
+        
+        if not db_token:
+            logger.warning("Refresh token not found for revocation")
+            return False
+        
+        # Revocar usando m├®todo del modelo
+        db_token.revoke(revoked_by=revoked_by_user_id)
+        await db.flush()
+        
+        logger.info(
+            "Refresh token revoked",
+            token_id=str(db_token.id),
+            revoked_by=str(revoked_by_user_id) if revoked_by_user_id else None
+        )
+        return True
+    
+    @staticmethod
+    async def revoke_all_user_tokens(
+        db: AsyncSession,
+        user_id: uuid.UUID,
+        revoked_by_user_id: Optional[uuid.UUID] = None
+    ) -> int:
+        """
+        Revocar todos los tokens activos de un usuario.
+        
+        Útil para logout en todos los dispositivos.
+        
+        Args:
+            db: Sesi├│n de base de datos
+            user_id: ID del usuario
+            revoked_by_user_id: ID del usuario que ejecuta la revocación (para auditoría)
+            
+        Returns:
+            N├║mero de tokens revocados
+        """
+        # Buscar todos los tokens activos del usuario
+        query = select(RefreshToken).where(
+            RefreshToken.user_id == user_id,
+            RefreshToken.revoked == False
+        )
+        result = await db.execute(query)
+        tokens = result.scalars().all()
+        
+        count = 0
+        for token in tokens:
+            token.revoke(revoked_by=revoked_by_user_id)
+            count += 1
+        
+        await db.flush()
+        
+        logger.info(
+            "All user tokens revoked",
+            user_id=str(user_id),
+            count=count,
+            revoked_by=str(revoked_by_user_id) if revoked_by_user_id else None
+        )
+        return count
+    
+    @staticmethod
+    async def cleanup_expired_tokens(
+        db: AsyncSession
+    ) -> int:
+        """
+        Eliminar tokens expirados de la base de datos.
+        
+        Tarea de mantenimiento para limpiar tokens antiguos.
+        
+        Args:
+            db: Sesi├│n de base de datos
+            
+        Returns:
+            N├║mero de tokens eliminados
+        """
+        # Eliminar tokens expirados hace más de 7 días
+        cutoff_date = datetime.utcnow() - timedelta(days=7)
+        
+        query = delete(RefreshToken).where(
+            RefreshToken.expires_at < cutoff_date
+        )
+        result = await db.execute(query)
+        await db.flush()
+        
+        deleted_count = result.rowcount
+        
+        logger.info("Expired tokens cleaned up", count=deleted_count)
+        return deleted_count
+    
+    @staticmethod
+    async def get_user_tokens(
+        db: AsyncSession,
+        user_id: uuid.UUID
+    ) -> list[RefreshToken]:
+        """
+        Obtener todos los tokens activos de un usuario.
+        
+        Args:
+            db: Sesi├│n de base de datos
+            user_id: ID del usuario
+            
+        Returns:
+            Lista de RefreshTokens activos
+        """
+        query = select(RefreshToken).where(
+            RefreshToken.user_id == user_id,
+            RefreshToken.revoked == False,
+            RefreshToken.expires_at > datetime.utcnow()
+        ).order_by(RefreshToken.created_at.desc())
+        
+        result = await db.execute(query)
+        return list(result.scalars().all())

backend/check_test_user_password.py

@@ -1,77 +0,0 @@
-"""
-Script para verificar y actualizar password del test_user
-"""
-import asyncio
-import sys
-import os
-from sqlalchemy import select
-from passlib.context import CryptContext
-
-# Configurar el path
-backend_path = os.path.join(os.path.dirname(__file__), 'backend')
-sys.path.insert(0, backend_path)
-
-from app.core.database import AsyncSessionLocal 
-from app.models.user import User
-
-# Configurar passlib igual que en security.py
-pwd_context = CryptContext(
-    schemes=["argon2", "bcrypt"],
-    deprecated="auto",
-    argon2__memory_cost=65536,
-    argon2__time_cost=3,
-    argon2__parallelism=4,
-)
-
-async def check_and_fix_test_user():
-    """Verificar y actualizar password del test_user"""
-    
-    # Contraseñas posibles
-    possible_passwords = [
-        "admin123",
-        "TestPassword123!",
-        "password123",
-        "test123",
-        "hashed_password"
-    ]
-    
-    async with AsyncSessionLocal() as session:
-        try:
-            # Buscar test_user
-            result = await session.execute(
-                select(User).where(User.email == "test_user@example.com")
-            )
-            user = result.scalar_one_or_none()
-            
-            if not user:
-                print("❌ Usuario test_user@example.com no encontrado")
-                return
-            
-            print(f"✅ Usuario encontrado: {user.email}")
-            print(f"Hash actual: {user.password_hash}")
-            
-            # Probar contraseñas posibles
-            found_password = None
-            for password in possible_passwords:
-                if pwd_context.verify(password, user.password_hash):
-                    found_password = password
-                    break
-                    
-            if found_password:
-                print(f"🎉 Contraseña encontrada: {found_password}")
-            else:
-                print("❌ Ninguna contraseña coincide")
-                print("Estableciendo nueva contraseña: admin123")
-                
-                # Establecer nueva contraseña
-                new_password = "admin123"
-                user.password_hash = pwd_context.hash(new_password)
-                await session.commit()
-                print(f"✅ Contraseña actualizada a: {new_password}")
-                
-        except Exception as e:
-            print(f"❌ Error: {e}")
-            await session.rollback()
-
-if __name__ == "__main__":
-    asyncio.run(check_and_fix_test_user())

backend/create_test_user.py

@@ -0,0 +1,67 @@
+"""
+Script para crear/actualizar usuario de prueba con contraseña conocida
+"""
+import asyncio
+from sqlalchemy import select, update
+from app.core.database import AsyncSessionLocal
+from app.core.security import security
+from app.models.user import User, UserRole
+from app.models.tenant import Tenant
+import uuid
+
+async def create_test_user():
+    async with AsyncSessionLocal() as db:
+        # Buscar tenant
+        tenant_query = select(Tenant).where(Tenant.slug.like('%aduanasoft%')).limit(1)
+        result = await db.execute(tenant_query)
+        tenant = result.scalar_one_or_none()
+        
+        if not tenant:
+            print("❌ No se encontró tenant")
+            return
+        
+        print(f"✅ Tenant encontrado: {tenant.name} ({tenant.slug})")
+        
+        # Buscar o crear usuario admin
+        user_query = select(User).where(
+            User.email == "admin@aduanasoft.com",
+            User.tenant_id == tenant.id
+        )
+        result = await db.execute(user_query)
+        user = result.scalar_one_or_none()
+        
+        # Hash de la contraseña "admin123"
+        password_hash = security.hash_password("admin123")
+        
+        if user:
+            # Actualizar contraseña
+            user.password_hash = password_hash
+            user.is_active = True
+            user.email_verified = True
+            await db.commit()
+            print(f"✅ Usuario actualizado: {user.email}")
+        else:
+            # Crear usuario nuevo
+            user = User(
+                id=uuid.uuid4(),
+                tenant_id=tenant.id,
+                email="admin@aduanasoft.com",
+                first_name="Admin",
+                last_name="Sistema",
+                password_hash=password_hash,
+                role=UserRole.ADMIN,
+                is_active=True,
+                email_verified=True
+            )
+            db.add(user)
+            await db.commit()
+            print(f"✅ Usuario creado: {user.email}")
+        
+        print(f"\n📋 Credenciales de prueba:")
+        print(f"   Email: admin@aduanasoft.com")
+        print(f"   Password: admin123")
+        print(f"   Tenant: {tenant.slug}")
+        print(f"   Role: ADMIN")
+
+if __name__ == "__main__":
+    asyncio.run(create_test_user())

backend/fix_password_script.py

@@ -1,42 +0,0 @@
-import asyncio
-import sys
-import os
-
-# Add parent directory to path so we can import 'app'
-sys.path.append(os.path.dirname(os.path.abspath(__file__)))
-
-from sqlalchemy import select
-from app.core.database import AsyncSessionLocal
-from app.models.tenant import Tenant
-from app.models.ticket import Ticket
-from app.models.category import Category  # ✅ AÑADIR ESTO
-from app.models.system import System      # ✅ AÑADIR ESTO
-from app.models.user import User
-from app.core.security import SecurityUtils
-
-async def fix_password():
-    async with AsyncSessionLocal() as session:
-        # Find the admin user
-        email = "admin@aduanasoft.com"
-        result = await session.execute(select(User).where(User.email == email))
-        user = result.scalar_one_or_none()
-        
-        if user:
-            print(f"User {email} found.")
-            # Reset password to 'admin123'
-            new_password = "admin123"
-            hashed = SecurityUtils.hash_password(new_password)
-            user.password_hash = hashed
-            
-            try:
-                await session.commit()
-                print(f"Password for {email} updated successfully!")
-                print(f"New password is: {new_password}")
-            except Exception as e:
-                await session.rollback()
-                print(f"Error updating password: {e}")
-        else:
-            print(f"User {email} not found!")
-
-if __name__ == "__main__":
-    asyncio.run(fix_password())

backend/migrations/versions/a1b2c3d4e5f6_add_audit_logs_table.py

@@ -0,0 +1,81 @@
+"""add_audit_logs_table
+
+Revision ID: a1b2c3d4e5f6
+Revises: 13362e8c493a
+Create Date: 2026-02-12 10:00:00.000000
+
+Registra el modelo AuditLog en Alembic.
+La tabla audit_logs ya existe en schema.sql, esta migraci├│n solo
+la registra en el control de versiones de Alembic.
+"""
+from alembic import op
+import sqlalchemy as sa
+from sqlalchemy.dialects import postgresql
+
+# revision identifiers, used by Alembic.
+revision = 'a1b2c3d4e5f6'
+down_revision = '13362e8c493a'
+branch_labels = None
+depends_on = None
+
+
+def upgrade():
+    """
+    Verificar que audit_logs existe y registrarla en Alembic.
+    
+    La tabla fue creada por schema.sql, esta migraci├│n solo verifica
+    que exista y está disponible para usar.
+    """
+    from sqlalchemy import inspect
+    
+    bind = op.get_bind()
+    inspector = inspect(bind)
+    tables = inspector.get_table_names()
+    
+    if 'audit_logs' in tables:
+        print(" Tabla audit_logs encontrada (creada por schema.sql)")
+        print(" Modelo AuditLog registrado en Alembic")
+        
+        # Verificar que tenga los índices necesarios
+        existing_indexes = [idx['name'] for idx in inspector.get_indexes('audit_logs')]
+        missing_indexes = []
+        
+        required_indexes = [
+            'idx_audit_logs_tenant_id',
+            'idx_audit_logs_user_id',
+            'idx_audit_logs_action',
+            'idx_audit_logs_correlation_id',
+            'idx_audit_logs_created_at'
+        ]
+        
+        for idx in required_indexes:
+            if idx not in existing_indexes:
+                missing_indexes.append(idx)
+        
+        if missing_indexes:
+            print(f"ÔÜá´©Å  ├ìndices faltantes: {', '.join(missing_indexes)}")
+            print("   (Esto es normal si usaste schema.sql completo)")
+        else:
+            print("Ô£à Todos los ├¡ndices necesarios est├ín presentes")
+        
+    else:
+        print("ÔÜá´©Å  La tabla audit_logs NO existe")
+        print("   Ejecuta: docker-compose exec -T postgres psql -U postgres -d servicemanager < db/schema.sql")
+        print("   O crea la tabla manualmente desde schema.sql")
+        
+        # No crear la tabla aquí - debe venir de schema.sql para mantener consistencia
+        raise Exception(
+            "La tabla audit_logs no existe. "
+            "Por favor ejecuta el schema.sql completo primero."
+        )
+
+
+def downgrade():
+    """
+    No eliminar la tabla - fue creada por schema.sql.
+    
+    Solo des-registrar de Alembic.
+    """
+    print("Ôä╣´©Å  Tabla audit_logs NO ser├í eliminada (creada por schema.sql)")
+    print(" Modelo AuditLog des-registrado de Alembic")
+

backend/pyproject.toml

@@ -6,7 +6,7 @@ build-backend = "setuptools.build_meta"
 
 [project]
 name = "servicemanager-backend"
-version = "0.1.0"
+version = "1.6.0"
 description = "ServiceManagerWeb Backend - Mesa de Ayuda B2B"
 authors = [
     {name = "Aduanasoft", email = "dev@aduanasoft.com"}

backend/set_test_password.py

@@ -1,59 +0,0 @@
-"""
-Script para establecer contraseña real al test_user
-"""
-import asyncio
-import sys
-import os
-from sqlalchemy import select
-from passlib.context import CryptContext
-
-# Configurar el path
-backend_path = os.path.join(os.path.dirname(__file__), 'backend')
-sys.path.insert(0, backend_path)
-
-from app.core.database import AsyncSessionLocal 
-from app.models.user import User
-
-# Configurar passlib
-pwd_context = CryptContext(
-    schemes=["argon2", "bcrypt"],
-    deprecated="auto",
-    argon2__memory_cost=65536,
-    argon2__time_cost=3,
-    argon2__parallelism=4,
-)
-
-async def set_test_user_password():
-    """Establecer contraseña admin123 para test_user"""
-    
-    new_password = "admin123"
-    password_hash = pwd_context.hash(new_password)
-    
-    async with AsyncSessionLocal() as session:
-        try:
-            # Buscar test_user
-            result = await session.execute(
-                select(User).where(User.email == "test_user@example.com")
-            )
-            user = result.scalar_one_or_none()
-            
-            if not user:
-                print("❌ Usuario test_user@example.com no encontrado")
-                return
-            
-            print(f"✅ Usuario encontrado: {user.email}")
-            print(f"Hash anterior: {user.password_hash}")
-            
-            # Establecer nueva contraseña hash
-            user.password_hash = password_hash
-            await session.commit()
-            
-            print(f"🎉 Contraseña establecida: {new_password}")
-            print(f"✅ Nuevo hash: {password_hash[:50]}...")
-                
-        except Exception as e:
-            print(f"❌ Error: {e}")
-            await session.rollback()
-
-if __name__ == "__main__":
-    asyncio.run(set_test_user_password())

db/schema.sql

@@ -369,10 +369,14 @@ CREATE TABLE audit_logs (
 CREATE INDEX idx_audit_logs_tenant_id ON audit_logs(tenant_id);
 CREATE INDEX idx_audit_logs_user_id ON audit_logs(user_id);
 CREATE INDEX idx_audit_logs_action ON audit_logs(action);
-CREATE INDEX idx_audit_logs_resource ON audit_logs(resource_type, resource_id);
 CREATE INDEX idx_audit_logs_correlation_id ON audit_logs(correlation_id);
 CREATE INDEX idx_audit_logs_created_at ON audit_logs(created_at);
 
+-- Índices compuestos para queries comunes de auditoría
+CREATE INDEX idx_audit_logs_tenant_action ON audit_logs(tenant_id, action);
+CREATE INDEX idx_audit_logs_resource ON audit_logs(resource_type, resource_id);
+CREATE INDEX idx_audit_logs_user_created ON audit_logs(user_id, created_at);
+
 -- ===================================
 -- FUNCIONES Y TRIGGERS
 -- ===================================

fix_admin_password.py

@@ -1,67 +0,0 @@
-"""
-Script para actualizar el password del usuario admin
-Ejecutar: python fix_admin_password.py
-"""
-import asyncio
-import sys
-from sqlalchemy import select, update
-from passlib.context import CryptContext
-
-# Importar desde el proyecto
-sys.path.insert(0, '/app')
-from app.core.database import AsyncSessionLocal
-from app.models.user import User
-
-# Configurar passlib igual que en security.py
-pwd_context = CryptContext(
-    schemes=["argon2", "bcrypt"],
-    deprecated="auto",
-    argon2__memory_cost=65536,
-    argon2__time_cost=3,
-    argon2__parallelism=4,
-)
-
-async def fix_admin_password():
-    """Actualizar password del admin a 'admin123'"""
-    
-    # Generar hash del password
-    new_password = "admin123"
-    password_hash = pwd_context.hash(new_password)
-    
-    print(f"Nuevo hash generado para password: {new_password}")
-    print(f"Hash: {password_hash[:50]}...")
-    
-    async with AsyncSessionLocal() as session:
-        try:
-            # Buscar usuario admin
-            result = await session.execute(
-                select(User).where(User.email == "admin@aduanasoft.com")
-            )
-            user = result.scalar_one_or_none()
-            
-            if not user:
-                print("❌ Usuario admin no encontrado")
-                return
-            
-            print(f"✅ Usuario encontrado: {user.email} (ID: {user.id})")
-            
-            # Actualizar password
-            user.password_hash = password_hash
-            
-            await session.commit()
-            
-            print("✅ Password actualizado exitosamente")
-            print(f"   Email: admin@aduanasoft.com")
-            print(f"   Password: admin123")
-            
-        except Exception as e:
-            await session.rollback()
-            print(f"❌ Error: {e}")
-            raise
-
-if __name__ == "__main__":
-    print("=" * 60)
-    print("ACTUALIZAR PASSWORD DEL ADMIN")
-    print("=" * 60)
-    asyncio.run(fix_admin_password())
-    print("=" * 60)

frontend-client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@servicemanager/client-frontend",
-  "version": "0.1.0",
+  "version": "1.6.0",
   "private": true,
   "type": "module",
   "scripts": {

frontend-client/src/lib/components/Header.svelte

@@ -1,24 +1,25 @@
 <script lang="ts">
   import { onMount } from 'svelte';
+  import { goto } from '$app/navigation';
   import { auth } from '$lib/stores/auth.js';
   import Icon from './Icon.svelte';
-  
+
   export let showLogo = true;
   export let showNavigation = true;
-  
+
   let isMenuOpen = false;
-  
+
   onMount(() => {
     auth.init();
   });
-  
+
   function toggleMenu() {
     isMenuOpen = !isMenuOpen;
   }
-  
+
   function handleLogout() {
-    auth.logout();
     isMenuOpen = false;
+    auth.logout(); // El store maneja la redirección automática
   }
 </script>
 
@@ -43,10 +44,16 @@
       <!-- Navigation -->
       {#if showNavigation && $auth.isAuthenticated}
         <nav class="hidden md:flex space-x-8">
-          <a href="/tickets" class="text-gray-700 hover:text-primary-600 px-3 py-2 text-sm font-medium">
+          <a
+            href="/tickets"
+            class="text-gray-700 hover:text-primary-600 px-3 py-2 text-sm font-medium"
+          >
             Mis Tickets
           </a>
-          <a href="/tickets/new" class="text-gray-700 hover:text-primary-600 px-3 py-2 text-sm font-medium">
+          <a
+            href="/tickets/new"
+            class="text-gray-700 hover:text-primary-600 px-3 py-2 text-sm font-medium"
+          >
             Crear Ticket
           </a>
         </nav>
@@ -59,9 +66,8 @@
             <button
               on:click={toggleMenu}
               class="flex items-center space-x-2 text-gray-700 hover:text-primary-600 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 rounded-md p-2"
-              role="button"
               tabindex="0"
-              on:keydown={(e) => e.key === 'Enter' && toggleMenu()}
+              on:keydown={e => e.key === 'Enter' && toggleMenu()}
             >
               <div class="w-8 h-8 bg-primary-100 rounded-full flex items-center justify-center">
                 <span class="text-primary-600 text-sm font-medium">
@@ -69,13 +75,16 @@
                 </span>
               </div>
               <span class="hidden sm:block text-sm">
-                {$auth.user?.first_name} {$auth.user?.last_name}
+                {$auth.user?.first_name}
+                {$auth.user?.last_name}
               </span>
               <Icon name="chevronDown" size="w-4 h-4" />
             </button>
 
             {#if isMenuOpen}
-              <div class="absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg border border-gray-200 z-50">
+              <div
+                class="absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg border border-gray-200 z-50"
+              >
                 <div class="py-1">
                   <div class="px-4 py-2 text-xs text-gray-500 border-b border-gray-200">
                     {$auth.user?.email}
@@ -83,7 +92,7 @@
                   <a
                     href="/profile"
                     class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
-                    on:click={() => isMenuOpen = false}
+                    on:click={() => (isMenuOpen = false)}
                   >
                     Mi Perfil
                   </a>
@@ -92,7 +101,7 @@
                     class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
                     role="button"
                     tabindex="0"
-                    on:keydown={(e) => e.key === 'Enter' && handleLogout()}
+                    on:keydown={e => e.key === 'Enter' && handleLogout()}
                   >
                     Cerrar Sesión
                   </button>
@@ -101,10 +110,7 @@
             {/if}
           </div>
         {:else}
-          <a
-            href="/login"
-            class="text-gray-700 hover:text-primary-600 text-sm font-medium"
-          >
+          <a href="/login" class="text-gray-700 hover:text-primary-600 text-sm font-medium">
             Iniciar Sesión
           </a>
         {/if}
@@ -115,10 +121,16 @@
     {#if showNavigation && $auth.isAuthenticated}
       <div class="md:hidden border-t border-gray-200 py-2">
         <nav class="flex space-x-4">
-          <a href="/tickets" class="text-gray-700 hover:text-primary-600 px-3 py-2 text-sm font-medium">
+          <a
+            href="/tickets"
+            class="text-gray-700 hover:text-primary-600 px-3 py-2 text-sm font-medium"
+          >
             Mis Tickets
           </a>
-          <a href="/tickets/new" class="text-gray-700 hover:text-primary-600 px-3 py-2 text-sm font-medium">
+          <a
+            href="/tickets/new"
+            class="text-gray-700 hover:text-primary-600 px-3 py-2 text-sm font-medium"
+          >
             Crear Ticket
           </a>
         </nav>
@@ -129,8 +141,5 @@
 
 <!-- Backdrop for mobile menu -->
 {#if isMenuOpen}
-  <div 
-    class="fixed inset-0 z-40 md:hidden" 
-    on:click={() => isMenuOpen = false}
-  ></div>
-{/if}
+  <div class="fixed inset-0 z-40 md:hidden" on:click={() => (isMenuOpen = false)} />
+{/if}

frontend-client/src/lib/stores/auth.ts

@@ -1,5 +1,5 @@
-import { writable } from 'svelte/store';
 import type { Writable } from 'svelte/store';
+import { writable } from 'svelte/store';
 
 // Types
 export interface User {
@@ -49,13 +49,13 @@ function createAuthStore() {
 
   return {
     subscribe,
-    
+
     // Initialize auth from localStorage
     init: () => {
       if (typeof window !== 'undefined') {
         const token = localStorage.getItem('auth_token');
         const user = localStorage.getItem('auth_user');
-        
+
         if (token && user) {
           try {
             const parsedUser = JSON.parse(user);
@@ -77,7 +77,7 @@ function createAuthStore() {
     // Login
     login: async (credentials: LoginRequest): Promise<void> => {
       update(state => ({ ...state, isLoading: true }));
-      
+
       try {
         const response = await fetch('/api/v1/auth/login', {
           method: 'POST',
@@ -93,7 +93,7 @@ function createAuthStore() {
         }
 
         const data: LoginResponse = await response.json();
-        
+
         // Store auth data
         if (typeof window !== 'undefined') {
           localStorage.setItem('auth_token', data.access_token);
@@ -117,6 +117,8 @@ function createAuthStore() {
       if (typeof window !== 'undefined') {
         localStorage.removeItem('auth_token');
         localStorage.removeItem('auth_user');
+        // Immediate redirect after cleanup
+        window.location.href = '/login';
       }
       set(initialState);
     },

frontend-client/src/lib/stores/tickets.ts

@@ -328,6 +328,39 @@ function createTicketsStore() {
         comments: [],
         attachments: []
       }));
+    },
+
+    // Download attachment
+    downloadAttachment: async (ticketId: string, attachmentId: string, filename: string) => {
+      const authState = get(auth);
+
+      if (!authState.token || !authState.user) {
+        throw new Error('Not authenticated');
+      }
+
+      const response = await fetch(`/api/v1/tickets/${ticketId}/attachments/${attachmentId}/download`, {
+        method: 'GET',
+        headers: {
+          'Authorization': `Bearer ${authState.token}`,
+          'X-Tenant-ID': authState.user.tenant_id
+        }
+      });
+
+      if (!response.ok) {
+        const error = await response.json().catch(() => ({ detail: 'Download failed' }));
+        throw new Error(error.detail || 'Download failed');
+      }
+
+      // Crear blob y descargar
+      const blob = await response.blob();
+      const url = window.URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = filename;
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+      window.URL.revokeObjectURL(url);
     }
   };
 }

frontend-client/src/routes/+layout.svelte

@@ -23,6 +23,11 @@
     <slot />
   </main>
   
+  <!-- Footer with version -->
+  <footer class="py-4 text-center border-t border-gray-200 bg-white">
+    <p class="text-xs text-gray-400">ServiceManagerWeb v1.6.0 · © 2026 Aduanasoft</p>
+  </footer>
+  
   <!-- Toast notifications -->
   {#each $toast.toasts as toastMessage (toastMessage.id)}
     <Toast

frontend-client/src/routes/+page.svelte

@@ -4,14 +4,14 @@
   import { tickets } from '$lib/stores/tickets.js';
   import { goto } from '$app/navigation';
   import Icon from '$lib/components/Icon.svelte';
-  
+
   onMount(() => {
     // Redirect if not authenticated
     if (!$auth.isAuthenticated) {
       goto('/login');
       return;
     }
-    
+
     // Load user's tickets
     tickets.loadTickets();
   });
@@ -26,102 +26,108 @@
   <div class="bg-gradient-to-r from-primary-500 to-primary-600 rounded-lg p-8 text-white mb-8">
     <div class="max-w-3xl">
       <h1 class="text-3xl font-bold mb-2">
-        Bienvenido, {$auth.user?.first_name} {$auth.user?.last_name}
+        Bienvenido, {$auth.user?.first_name}
+        {$auth.user?.last_name}
       </h1>
       <p class="text-primary-100 text-lg">
-        Gestiona tus tickets de soporte de manera eficiente. Crea nuevos tickets, 
-        da seguimiento a los existentes y mantente actualizado con el estado de tus solicitudes.
+        Gestiona tus tickets de soporte de manera eficiente. Crea nuevos tickets, da seguimiento a
+        los existentes y mantente actualizado con el estado de tus solicitudes.
       </p>
     </div>
   </div>
-  
+
   <!-- Quick Actions -->
   <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
-    <a 
-      href="/tickets/new" 
-      class="card hover:shadow-lg transition-shadow group cursor-pointer"
-    >
+    <a href="/tickets/new" class="card hover:shadow-lg transition-shadow group cursor-pointer">
       <div class="card-content text-center">
-        <div class="w-12 h-12 bg-primary-100 rounded-lg flex items-center justify-center mx-auto mb-4 group-hover:bg-primary-200 transition-colors">
+        <div
+          class="w-12 h-12 bg-primary-100 rounded-lg flex items-center justify-center mx-auto mb-4 group-hover:bg-primary-200 transition-colors"
+        >
           <Icon name="plus" size="w-6 h-6" className="text-primary-600" />
         </div>
         <h3 class="text-lg font-medium text-gray-900 mb-2">Crear Ticket</h3>
-        <p class="text-gray-600 text-sm">
-          Reporta un problema o solicita soporte técnico
-        </p>
+        <p class="text-gray-600 text-sm">Reporta un problema o solicita soporte técnico</p>
       </div>
     </a>
-    
-    <a 
-      href="/tickets" 
-      class="card hover:shadow-lg transition-shadow group cursor-pointer"
-    >
+
+    <a href="/tickets" class="card hover:shadow-lg transition-shadow group cursor-pointer">
       <div class="card-content text-center">
-        <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mx-auto mb-4 group-hover:bg-blue-200 transition-colors">
+        <div
+          class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mx-auto mb-4 group-hover:bg-blue-200 transition-colors"
+        >
           <Icon name="ticket" size="w-6 h-6" className="text-blue-600" />
         </div>
         <h3 class="text-lg font-medium text-gray-900 mb-2">Mis Tickets</h3>
-        <p class="text-gray-600 text-sm">
-          Consulta el estado de todos tus tickets
-        </p>
+        <p class="text-gray-600 text-sm">Consulta el estado de todos tus tickets</p>
       </div>
     </a>
-    
-    <a 
-      href="/profile" 
-      class="card hover:shadow-lg transition-shadow group cursor-pointer"
-    >
+
+    <a href="/profile" class="card hover:shadow-lg transition-shadow group cursor-pointer">
       <div class="card-content text-center">
-        <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mx-auto mb-4 group-hover:bg-green-200 transition-colors">
+        <div
+          class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mx-auto mb-4 group-hover:bg-green-200 transition-colors"
+        >
           <Icon name="user" size="w-6 h-6" className="text-green-600" />
         </div>
         <h3 class="text-lg font-medium text-gray-900 mb-2">Mi Perfil</h3>
-        <p class="text-gray-600 text-sm">
-          Actualiza tu información personal
-        </p>
+        <p class="text-gray-600 text-sm">Actualiza tu información personal</p>
       </div>
     </a>
   </div>
-  
+
   <!-- Recent Tickets -->
   <div class="card">
     <div class="card-header">
       <h2 class="text-xl font-semibold text-gray-900">Tickets Recientes</h2>
       <p class="text-gray-600 mt-1">Últimos tickets que has creado o actualizado</p>
     </div>
-    
+
     <div class="card-content">
       {#if $tickets.isLoading}
         <div class="text-center py-8">
-          <div class="spinner w-8 h-8 mx-auto mb-4"></div>
+          <div class="spinner w-8 h-8 mx-auto mb-4" />
           <p class="text-gray-600">Cargando tickets...</p>
         </div>
       {:else if $tickets.error}
         <div class="text-center py-8">
-          <div class="w-12 h-12 bg-red-100 rounded-lg flex items-center justify-center mx-auto mb-4">
+          <div
+            class="w-12 h-12 bg-red-100 rounded-lg flex items-center justify-center mx-auto mb-4"
+          >
             <svg class="w-6 h-6 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+              />
             </svg>
           </div>
           <p class="text-gray-600 mb-4">Error al cargar los tickets</p>
-          <button 
-            on:click={() => tickets.loadTickets()}
-            class="btn-primary px-4 py-2"
-          >
+          <button on:click={() => tickets.loadTickets()} class="btn-primary px-4 py-2">
             Reintentar
           </button>
         </div>
       {:else if $tickets.tickets.length === 0}
         <div class="text-center py-8">
-          <div class="w-12 h-12 bg-gray-100 rounded-lg flex items-center justify-center mx-auto mb-4">
-            <svg class="w-6 h-6 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
+          <div
+            class="w-12 h-12 bg-gray-100 rounded-lg flex items-center justify-center mx-auto mb-4"
+          >
+            <svg
+              class="w-6 h-6 text-gray-400"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"
+              />
             </svg>
           </div>
           <p class="text-gray-600 mb-4">No tienes tickets creados</p>
-          <a href="/tickets/new" class="btn-primary px-4 py-2">
-            Crear tu primer ticket
-          </a>
+          <a href="/tickets/new" class="btn-primary px-4 py-2"> Crear tu primer ticket </a>
         </div>
       {:else}
         <div class="space-y-4">
@@ -144,17 +150,23 @@
                 </div>
                 <div class="ml-4">
                   <span class="badge-{ticket.status.toLowerCase().replace('_', '-')}">
-                    {ticket.status === 'NEW' ? 'Nuevo' : 
-                     ticket.status === 'IN_PROGRESS' ? 'En Progreso' :
-                     ticket.status === 'WAITING_FOR_CLIENT' ? 'Esperando Cliente' :
-                     ticket.status === 'RESOLVED' ? 'Resuelto' :
-                     ticket.status === 'CLOSED' ? 'Cerrado' : 'Reabierto'}
+                    {ticket.status === 'NEW'
+                      ? 'Nuevo'
+                      : ticket.status === 'IN_PROGRESS'
+                      ? 'En Progreso'
+                      : ticket.status === 'WAITING_FOR_CLIENT'
+                      ? 'Esperando Cliente'
+                      : ticket.status === 'RESOLVED'
+                      ? 'Resuelto'
+                      : ticket.status === 'CLOSED'
+                      ? 'Cerrado'
+                      : 'Reabierto'}
                   </span>
                 </div>
               </div>
             </div>
           {/each}
-          
+
           {#if $tickets.tickets.length > 5}
             <div class="text-center pt-4 border-t border-gray-200">
               <a href="/tickets" class="btn-secondary px-4 py-2">
@@ -174,5 +186,6 @@
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
     overflow: hidden;
+    line-clamp: 2; /* Propiedad estándar para compatibilidad */
   }
-</style>
+</style>

frontend-client/src/routes/login/+page.svelte

@@ -4,7 +4,7 @@
   import { goto } from '$app/navigation';
   import { onMount } from 'svelte';
   import Icon from '$lib/components/Icon.svelte';
-  
+
   let email = '';
   let password = '';
   let totpCode = '';
@@ -12,23 +12,23 @@
   let showTwoFactor = false;
   let errorMessage = '';
   let showPassword = false;
-  
+
   onMount(() => {
     // Redirect if already authenticated
     if ($auth.isAuthenticated) {
       goto('/');
     }
   });
-  
+
   async function handleLogin() {
     if (!email || !password) {
       errorMessage = 'Por favor completa todos los campos';
       return;
     }
-    
+
     isLoading = true;
     errorMessage = '';
-    
+
     try {
       await auth.login({
         email,
@@ -36,12 +36,12 @@
         tenant_slug: 'aduanasoft', // Default tenant for now
         totp_code: totpCode || undefined
       });
-      
+
       toast.success('¡Bienvenido! Has iniciado sesión correctamente');
       goto('/');
     } catch (error: any) {
       console.error('Login error:', error);
-      
+
       // Check if 2FA is required
       if (error.message.includes('two-factor') || error.message.includes('2FA')) {
         showTwoFactor = true;
@@ -54,7 +54,7 @@
       isLoading = false;
     }
   }
-  
+
   function handleKeyDown(event: KeyboardEvent) {
     if (event.key === 'Enter') {
       handleLogin();
@@ -62,183 +62,213 @@
   }
 </script>
 
-
 <div class="min-h-screen flex font-sans bg-white overflow-hidden">
-  
   <!-- Left Side: Hero Image & Overlay (55% width) -->
   <div class="hidden lg:flex w-[55%] relative bg-gray-900">
     <!-- Background Image -->
-    <div 
-        class="absolute inset-0 bg-cover bg-center z-0" 
-        style="background-image: url('/images/SOPORTE.webp'); opacity: 1;"
-    ></div>
-    
+    <div
+      class="absolute inset-0 bg-cover bg-center z-0"
+      style="background-image: url('/images/SOPORTE.webp'); opacity: 1;"
+    />
+
     <!-- Gradient Overlay -->
-    <div class="absolute inset-0 bg-gradient-to-br from-[#1e3a8a]/75 to-[#172554]/75 z-10"></div>
-    <div class="absolute inset-0 bg-gradient-to-t from-black/50 via-transparent to-transparent z-10"></div>
+    <div class="absolute inset-0 bg-gradient-to-br from-[#1e3a8a]/75 to-[#172554]/75 z-10" />
+    <div
+      class="absolute inset-0 bg-gradient-to-t from-black/50 via-transparent to-transparent z-10"
+    />
 
     <!-- Content -->
     <div class="relative z-20 w-full h-full flex flex-col justify-between p-16 text-white">
-        <!-- Top Logo (Left) -->
-        <div class="flex flex-col">
-            <img src="/images/Logo%20AS%20blanco(1).png" alt="AduanaSoft" class="h-32 w-auto object-contain self-start drop-shadow-lg" />
-        </div>
+      <!-- Top Logo (Left) -->
+      <div class="flex flex-col">
+        <img
+          src="/images/Logo%20AS%20blanco(1).png"
+          alt="AduanaSoft"
+          class="h-32 w-auto object-contain self-start drop-shadow-lg"
+        />
+      </div>
 
-        <!-- Main Hero Text -->
-        <div class="space-y-4 mb-12">
-            <h2 class="text-5xl font-extrabold tracking-tight drop-shadow-xl leading-tight">
-                Control Total <br/>
-                de Servicios de TI
-            </h2>
-            <p class="text-lg text-blue-100/90 font-light max-w-lg leading-relaxed drop-shadow-md">
-                Portal de atención a clientes. Genere tickets de soporte técnico para nuestros sistemas y reciba asistencia especializada para garantizar la continuidad de su operación.
-            </p>
-        </div>
+      <!-- Main Hero Text -->
+      <div class="space-y-4 mb-12">
+        <h2 class="text-5xl font-extrabold tracking-tight drop-shadow-xl leading-tight">
+          Control Total <br />
+          de Servicios de TI
+        </h2>
+        <p class="text-lg text-blue-100/90 font-light max-w-lg leading-relaxed drop-shadow-md">
+          Portal de atención a clientes. Genere tickets de soporte técnico para nuestros sistemas y
+          reciba asistencia especializada para garantizar la continuidad de su operación.
+        </p>
+      </div>
 
-        <!-- Bottom Footer -->
-        <div class="text-xs font-bold tracking-[0.2em] text-blue-200/60 uppercase">
-            ServiceManager Enterprise Platform
-        </div>
+      <!-- Bottom Footer -->
+      <div class="text-xs font-bold tracking-[0.2em] text-blue-200/60 uppercase">
+        ServiceManager Enterprise Platform
+      </div>
     </div>
   </div>
 
   <!-- Right Side: Login Form (45% width) -->
-  <div class="w-full lg:w-[45%] flex flex-col justify-center items-center p-8 lg:p-16 bg-white relative">
-    
+  <div
+    class="w-full lg:w-[45%] flex flex-col justify-center items-center p-8 lg:p-16 bg-white relative"
+  >
     <div class="w-full max-w-md space-y-8">
-        <!-- Logo & Header -->
-        <div class="text-center space-y-2">
-            <h2 class="text-3xl font-bold text-gray-900">Bienvenido</h2>
-            <p class="text-gray-500 text-sm">Ingrese a su cuenta corporativa</p>
+      <!-- Logo & Header -->
+      <div class="text-center space-y-2">
+        <h2 class="text-3xl font-bold text-gray-900">Bienvenido</h2>
+        <p class="text-gray-500 text-sm">Ingrese a su cuenta corporativa</p>
+      </div>
+
+      <!-- Form -->
+      <form on:submit|preventDefault={handleLogin} class="space-y-6 mt-8">
+        {#if errorMessage}
+          <div
+            class="p-3 rounded-md bg-red-50 border border-red-100 flex items-center gap-3 animate-fade-in text-sm text-red-600"
+          >
+            <Icon name="alert-circle" class="w-4 h-4 flex-shrink-0" />
+            {errorMessage}
+          </div>
+        {/if}
+
+        {#if !showTwoFactor}
+          <div class="space-y-5">
+            <!-- Email Input -->
+            <div class="space-y-1.5">
+              <label for="email" class="block text-sm font-semibold text-gray-700"
+                >Correo Electrónico</label
+              >
+              <div class="relative group">
+                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                  <Icon
+                    name="mail"
+                    class="w-5 h-5 text-gray-400 group-focus-within:text-blue-600 transition-colors"
+                  />
+                </div>
+                <input
+                  id="email"
+                  type="email"
+                  bind:value={email}
+                  on:keydown={handleKeyDown}
+                  class="block w-full pl-10 pr-3 py-3 bg-[#fff9c4]/0 hover:bg-gray-50 focus:bg-white border text-gray-900 border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-600 focus:border-transparent transition-all duration-200 sm:text-sm"
+                  placeholder="admin@aduanasoft.com"
+                  required
+                  disabled={isLoading}
+                />
+              </div>
+            </div>
+
+            <!-- Password Input -->
+            <div class="space-y-1.5">
+              <label for="password" class="block text-sm font-semibold text-gray-700"
+                >Contraseña</label
+              >
+              <div class="relative group">
+                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                  <Icon
+                    name="lock"
+                    class="w-5 h-5 text-gray-400 group-focus-within:text-blue-600 transition-colors"
+                  />
+                </div>
+                {#if showPassword}
+                  <input
+                    id="password"
+                    type="text"
+                    bind:value={password}
+                    on:keydown={handleKeyDown}
+                    class="block w-full pl-10 pr-10 py-3 bg-[#fff9c4]/0 hover:bg-gray-50 focus:bg-white border text-gray-900 border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-600 focus:border-transparent transition-all duration-200 sm:text-sm"
+                    placeholder="••••••••"
+                    required
+                    disabled={isLoading}
+                  />
+                {:else}
+                  <input
+                    id="password"
+                    type="password"
+                    bind:value={password}
+                    on:keydown={handleKeyDown}
+                    class="block w-full pl-10 pr-10 py-3 bg-[#fff9c4]/0 hover:bg-gray-50 focus:bg-white border text-gray-900 border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-600 focus:border-transparent transition-all duration-200 sm:text-sm"
+                    placeholder="••••••••"
+                    required
+                    disabled={isLoading}
+                  />
+                {/if}
+                <button
+                  type="button"
+                  class="absolute inset-y-0 right-0 pr-3 flex items-center cursor-pointer text-gray-400 hover:text-gray-600 focus:outline-none"
+                  on:click={() => (showPassword = !showPassword)}
+                >
+                  <Icon name={showPassword ? 'eye-off' : 'eye'} class="w-5 h-5" />
+                </button>
+              </div>
+            </div>
+
+            <div class="flex items-center justify-between">
+              <div class="flex items-center">
+                <input
+                  id="remember-me"
+                  name="remember-me"
+                  type="checkbox"
+                  class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded cursor-pointer"
+                />
+                <label
+                  for="remember-me"
+                  class="ml-2 block text-sm text-gray-500 cursor-pointer select-none"
+                  >Recordar en este equipo</label
+                >
+              </div>
+              <a
+                href="/forgot-password"
+                class="text-sm font-medium text-blue-600 hover:text-blue-500"
+              >
+                Olvide mi clave
+              </a>
+            </div>
+          </div>
+        {:else}
+          <!-- 2FA Input -->
+          <div class="space-y-4 animate-slide-up">
+            <label for="code" class="block text-sm font-medium text-gray-700 text-center"
+              >Código de Verificación (2FA)</label
+            >
+            <p class="text-xs text-center text-gray-500 mb-4">Ingrese el código de 6 dígitos</p>
+
+            <div class="relative">
+              <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                <Icon name="shield-check" class="w-5 h-5 text-blue-500" />
+              </div>
+              <input
+                id="code"
+                type="text"
+                bind:value={totpCode}
+                on:keydown={handleKeyDown}
+                class="block w-full pl-10 py-3 text-center tracking-[0.5em] font-mono text-lg border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-600 focus:border-transparent"
+                placeholder="000000"
+                maxlength="6"
+                required
+                disabled={isLoading}
+              />
+            </div>
+          </div>
+        {/if}
+
+        <div class="pt-2">
+          <button
+            type="submit"
+            class="w-full flex justify-center py-3.5 px-4 border border-transparent rounded-lg shadow-sm text-sm font-bold text-white bg-blue-700 hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200"
+            disabled={isLoading}
+          >
+            {#if isLoading}
+              <Icon name="loader-2" class="w-5 h-5 animate-spin mr-2" />
+              Procesando...
+            {:else}
+              {showTwoFactor ? 'Verificar Acceso' : 'Acceder al Portal'}
+            {/if}
+          </button>
         </div>
 
-        <!-- Form -->
-        <form on:submit|preventDefault={handleLogin} class="space-y-6 mt-8">
-           {#if errorMessage}
-             <div class="p-3 rounded-md bg-red-50 border border-red-100 flex items-center gap-3 animate-fade-in text-sm text-red-600">
-               <Icon name="alert-circle" class="w-4 h-4 flex-shrink-0" />
-               {errorMessage}
-             </div>
-           {/if}
-
-           {#if !showTwoFactor}
-             <div class="space-y-5">
-               <!-- Email Input -->
-               <div class="space-y-1.5">
-                 <label for="email" class="block text-sm font-semibold text-gray-700">Correo Electrónico</label>
-                 <div class="relative group">
-                   <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
-                     <Icon name="mail" class="w-5 h-5 text-gray-400 group-focus-within:text-blue-600 transition-colors" />
-                   </div>
-                   <input
-                     id="email"
-                     type="email"
-                     bind:value={email}
-                     on:keydown={handleKeyDown}
-                     class="block w-full pl-10 pr-3 py-3 bg-[#fff9c4]/0 hover:bg-gray-50 focus:bg-white border text-gray-900 border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-600 focus:border-transparent transition-all duration-200 sm:text-sm"
-                     placeholder="admin@aduanasoft.com"
-                     required
-                     disabled={isLoading}
-                   />
-                 </div>
-               </div>
-
-               <!-- Password Input -->
-               <div class="space-y-1.5">
-                 <label for="password" class="block text-sm font-semibold text-gray-700">Contraseña</label>
-                 <div class="relative group">
-                   <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
-                     <Icon name="lock" class="w-5 h-5 text-gray-400 group-focus-within:text-blue-600 transition-colors" />
-                   </div>
-                   {#if showPassword}
-                     <input
-                       id="password"
-                       type="text"
-                       bind:value={password}
-                       on:keydown={handleKeyDown}
-                       class="block w-full pl-10 pr-10 py-3 bg-[#fff9c4]/0 hover:bg-gray-50 focus:bg-white border text-gray-900 border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-600 focus:border-transparent transition-all duration-200 sm:text-sm"
-                       placeholder="••••••••"
-                       required
-                       disabled={isLoading}
-                     />
-                   {:else}
-                     <input
-                       id="password"
-                       type="password"
-                       bind:value={password}
-                       on:keydown={handleKeyDown}
-                       class="block w-full pl-10 pr-10 py-3 bg-[#fff9c4]/0 hover:bg-gray-50 focus:bg-white border text-gray-900 border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-600 focus:border-transparent transition-all duration-200 sm:text-sm"
-                       placeholder="••••••••"
-                       required
-                       disabled={isLoading}
-                     />
-                   {/if}
-                   <button 
-                     type="button"
-                     class="absolute inset-y-0 right-0 pr-3 flex items-center cursor-pointer text-gray-400 hover:text-gray-600 focus:outline-none"
-                     on:click={() => showPassword = !showPassword}
-                   >
-                     <Icon name={showPassword ? 'eye-off' : 'eye'} class="w-5 h-5" />
-                   </button>
-                 </div>
-               </div>
-               
-               <div class="flex items-center justify-between">
-                 <div class="flex items-center">
-                    <input id="remember-me" name="remember-me" type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded cursor-pointer">
-                    <label for="remember-me" class="ml-2 block text-sm text-gray-500 cursor-pointer select-none">Recordar en este equipo</label>
-                 </div>
-                 <a href="/forgot-password" class="text-sm font-medium text-blue-600 hover:text-blue-500">
-                    Olvide mi clave
-                 </a>
-               </div>
-             </div>
-           
-           {:else}
-             <!-- 2FA Input -->
-             <div class="space-y-4 animate-slide-up">
-               <label for="code" class="block text-sm font-medium text-gray-700 text-center">Código de Verificación (2FA)</label>
-               <p class="text-xs text-center text-gray-500 mb-4">Ingrese el código de 6 dígitos</p>
-               
-               <div class="relative">
-                 <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
-                   <Icon name="shield-check" class="w-5 h-5 text-blue-500" />
-                 </div>
-                 <input
-                   id="code"
-                   type="text"
-                   bind:value={totpCode}
-                   on:keydown={handleKeyDown}
-                   class="block w-full pl-10 py-3 text-center tracking-[0.5em] font-mono text-lg border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-600 focus:border-transparent"
-                   placeholder="000000"
-                   maxlength="6"
-                   required
-                   disabled={isLoading}
-                   autofocus
-                 />
-               </div>
-             </div>
-           {/if}
-
-           <div class="pt-2">
-             <button
-               type="submit"
-               class="w-full flex justify-center py-3.5 px-4 border border-transparent rounded-lg shadow-sm text-sm font-bold text-white bg-blue-700 hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200"
-               disabled={isLoading}
-             >
-               {#if isLoading}
-                 <Icon name="loader-2" class="w-5 h-5 animate-spin mr-2" />
-                 Procesando...
-               {:else}
-                 {showTwoFactor ? 'Verificar Acceso' : 'Acceder al Portal'}
-               {/if}
-             </button>
-           </div>
-           
-           <div class="mt-8 text-center text-xs text-gray-400">
-             © 2026 Aduanasoft. Acceso exclusivo autorizado.
-           </div>
-        </form>
+        <div class="mt-8 text-center text-xs text-gray-400">
+          © 2026 Aduanasoft. Acceso exclusivo autorizado.
+        </div>
+      </form>
     </div>
   </div>
-</div>
+</div>

frontend-client/src/routes/profile/+page.svelte

@@ -430,7 +430,11 @@
             </div>
 
             <div class="flex justify-end">
-              <button type="submit" class="bg-white border border-gray-300 text-gray-700 hover:bg-gray-50 px-6 py-2 rounded-md font-medium transition-colors" disabled={isUpdatingProfile}>
+              <button
+                type="submit"
+                class="bg-white border border-gray-300 text-gray-700 hover:bg-gray-50 px-6 py-2 rounded-md font-medium transition-colors"
+                disabled={isUpdatingProfile}
+              >
                 {#if isUpdatingProfile}
                   <div class="flex items-center space-x-2">
                     <div class="spinner w-4 h-4" />
@@ -461,8 +465,9 @@
               <h3 class="font-medium text-gray-900 mb-4">Información General</h3>
               <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                 <div>
-                  <label class="form-label">Razón Social</label>
+                  <label class="form-label" for="business_name">Razón Social</label>
                   <input
+                    id="business_name"
                     type="text"
                     class="form-input"
                     bind:value={businessProfile.business_name}
@@ -471,8 +476,9 @@
                 </div>
 
                 <div>
-                  <label class="form-label">Nombre Comercial</label>
+                  <label class="form-label" for="commercial_name">Nombre Comercial</label>
                   <input
+                    id="commercial_name"
                     type="text"
                     class="form-input"
                     bind:value={businessProfile.commercial_name}
@@ -481,8 +487,9 @@
                 </div>
 
                 <div>
-                  <label class="form-label">Clave de Cliente</label>
+                  <label class="form-label" for="client_code">Clave de Cliente</label>
                   <input
+                    id="client_code"
                     type="text"
                     class="form-input"
                     bind:value={businessProfile.client_code}
@@ -491,7 +498,7 @@
                 </div>
 
                 <div>
-                  <label class="form-label">Tipo de Cliente</label>
+                  <label class="form-label" for="client_type">Tipo de Cliente</label>
                   <select class="form-input" bind:value={businessProfile.client_type}>
                     <option value="">Seleccionar...</option>
                     <option value="corporativo">Corporativo</option>
@@ -503,8 +510,9 @@
                 </div>
 
                 <div>
-                  <label class="form-label">RFC</label>
+                  <label class="form-label" for="rfc">RFC</label>
                   <input
+                    id="rfc"
                     type="text"
                     class="form-input {businessProfileErrors.rfc ? 'border-red-300' : ''}"
                     bind:value={businessProfile.rfc}
@@ -518,8 +526,9 @@
                 </div>
 
                 <div>
-                  <label class="form-label">ID Fiscal (Otros países)</label>
+                  <label class="form-label" for="tax_id">ID Fiscal (Otros países)</label>
                   <input
+                    id="tax_id"
                     type="text"
                     class="form-input"
                     bind:value={businessProfile.tax_id}
@@ -619,8 +628,11 @@
               <h3 class="font-medium text-gray-900 mb-4">Representantes</h3>
               <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                 <div>
-                  <label class="form-label">Encargado/Representante</label>
+                  <label class="form-label" for="company_representative"
+                    >Encargado/Representante</label
+                  >
                   <input
+                    id="company_representative"
                     type="text"
                     class="form-input"
                     bind:value={businessProfile.company_representative}
@@ -629,8 +641,9 @@
                 </div>
 
                 <div>
-                  <label class="form-label">Representante Legal</label>
+                  <label class="form-label" for="legal_representative">Representante Legal</label>
                   <input
+                    id="legal_representative"
                     type="text"
                     class="form-input"
                     bind:value={businessProfile.legal_representative}
@@ -645,7 +658,7 @@
               <h3 class="font-medium text-gray-900 mb-4">Configuración</h3>
               <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                 <div>
-                  <label class="form-label">Moneda Preferida</label>
+                  <label class="form-label" for="preferred_currency">Moneda Preferida</label>
                   <select class="form-input" bind:value={businessProfile.preferred_currency}>
                     <option value="MXN">MXN - Peso Mexicano</option>
                     <option value="USD">USD - Dólar Americano</option>
@@ -654,12 +667,12 @@
                 </div>
 
                 <div>
-                  <label class="form-label">Nacionalidad</label>
+                  <label class="form-label" for="nationality">Nacionalidad</label>
                   <input type="text" class="form-input" bind:value={businessProfile.nationality} />
                 </div>
 
                 <div class="md:col-span-2">
-                  <label class="form-label">Notas Adicionales</label>
+                  <label class="form-label" for="notes">Notas Adicionales</label>
                   <textarea
                     class="form-input"
                     rows="3"
@@ -972,7 +985,11 @@
             </div>
 
             <div class="flex justify-end">
-              <button type="submit" class="bg-white border border-gray-300 text-gray-700 hover:bg-gray-50 px-6 py-2 rounded-md font-medium transition-colors" disabled={isChangingPassword}>
+              <button
+                type="submit"
+                class="bg-white border border-gray-300 text-gray-700 hover:bg-gray-50 px-6 py-2 rounded-md font-medium transition-colors"
+                disabled={isChangingPassword}
+              >
                 {#if isChangingPassword}
                   <div class="flex items-center space-x-2">
                     <div class="spinner w-4 h-4" />
@@ -1074,7 +1091,7 @@
     border-color: #d1d5db;
     color: #2563eb;
   }
-  
+
   .form-checkbox:focus {
     ring-color: #3b82f6;
     border-color: #3b82f6;

frontend-client/src/routes/tickets/[id]/+page.svelte

@@ -5,7 +5,7 @@
   import { tickets } from '$lib/stores/tickets.js';
   import { toast } from '$lib/stores/toast.js';
   import { goto } from '$app/navigation';
-  
+
   let ticketId: string;
   let newComment = '';
   let isSubmittingComment = false;
@@ -15,16 +15,16 @@
   let fileInput: HTMLInputElement;
   let isUploading = false;
   let pollingInterval: any = null;
-  let showAttachments = true; // Variable para controlar la visibilidad de attachments 
-  
+  let showAttachments = true; // Variable para controlar la visibilidad de attachments
+
   async function loadComments() {
-  try {
-    await tickets.reloadComments(ticketId);
-  } catch (error) {
-    // No mostrar error en polling silencioso
-    console.error('Error recargando comentarios:', error);
+    try {
+      await tickets.reloadComments(ticketId);
+    } catch (error) {
+      // No mostrar error en polling silencioso
+      console.error('Error recargando comentarios:', error);
+    }
   }
-}
 
   onMount(() => {
     // Redirect if not authenticated
@@ -32,25 +32,25 @@
       goto('/login');
       return;
     }
-    
+
     ticketId = $page.params.id;
     if (ticketId) {
       tickets.loadTicket(ticketId);
-      
-    // Polling cada 3 segundos
-    pollingInterval = setInterval(() => {
-      loadComments();
-    }, 3000);
-  }
-  
-  // Cleanup cuando se desmonte el componente
-  return () => {
-    if (pollingInterval) {
-      clearInterval(pollingInterval);
+
+      // Polling cada 3 segundos
+      pollingInterval = setInterval(() => {
+        loadComments();
+      }, 3000);
     }
-  };
-});
-  
+
+    // Cleanup cuando se desmonte el componente
+    return () => {
+      if (pollingInterval) {
+        clearInterval(pollingInterval);
+      }
+    };
+  });
+
   // Format date
   function formatDate(dateString: string): string {
     return new Date(dateString).toLocaleString('es-ES', {
@@ -61,7 +61,7 @@
       minute: '2-digit'
     });
   }
-  
+
   // Status mapping
   const statusConfig = {
     NEW: { label: 'Nuevo', class: 'badge-new' },
@@ -71,7 +71,7 @@
     CLOSED: { label: 'Cerrado', class: 'badge-closed' },
     REOPENED: { label: 'Reabierto', class: 'badge-reopened' }
   };
-  
+
   // Priority mapping
   const priorityConfig = {
     LOW: { label: 'Baja', class: 'badge-priority-low' },
@@ -79,10 +79,10 @@
     HIGH: { label: 'Alta', class: 'badge-priority-high' },
     URGENT: { label: 'Urgente', class: 'badge-priority-urgent' }
   };
-  
+
   async function handleAddComment() {
     if (!newComment.trim()) return;
-    
+
     isSubmittingComment = true;
     try {
       await tickets.addComment(ticketId, newComment.trim());
@@ -94,34 +94,39 @@
       isSubmittingComment = false;
     }
   }
-  
+
   async function handleFileUpload(event: Event) {
     const target = event.target as HTMLInputElement;
     const file = target.files?.[0];
     if (!file) return;
-    
+
     // Validate file size (max 10MB)
     if (file.size > 10 * 1024 * 1024) {
       toast.error('El archivo es demasiado grande. Máximo 10MB');
       target.value = '';
       return;
     }
-    
+
     // Validate file type
     const allowedTypes = [
-      'image/jpeg', 'image/png', 'image/gif', 'image/webp',
-      'application/pdf', 'text/plain', 'application/msword',
+      'image/jpeg',
+      'image/png',
+      'image/gif',
+      'image/webp',
+      'application/pdf',
+      'text/plain',
+      'application/msword',
       'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
       'application/vnd.ms-excel',
       'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
     ];
-    
+
     if (!allowedTypes.includes(file.type)) {
       toast.error('Tipo de archivo no permitido');
       target.value = '';
       return;
     }
-    
+
     isUploading = true;
     try {
       await tickets.uploadAttachment(ticketId, file);
@@ -133,11 +138,21 @@
       isUploading = false;
     }
   }
-  
+
+  async function handleDownloadAttachment(attachment: any) {
+    try {
+      await tickets.downloadAttachment(ticketId, attachment.id, attachment.original_filename);
+      toast.success('Descarga iniciada');
+    } catch (error: any) {
+      console.error('Download error:', error);
+      toast.error(error.message || 'Error al descargar el archivo');
+    }
+  }
+
   function handleCloseTicket() {
     showCloseDialog = true;
   }
-  
+
   async function confirmCloseTicket() {
     isClosingTicket = true;
     try {
@@ -151,14 +166,15 @@
       isClosingTicket = false;
     }
   }
-  
+
   function cancelCloseTicket() {
     showCloseDialog = false;
     closeResolution = '';
   }
-  
+
   // Check if user can close ticket
-  $: canClose = $tickets.currentTicket && 
+  $: canClose =
+    $tickets.currentTicket &&
     ['RESOLVED', 'WAITING_FOR_CLIENT'].includes($tickets.currentTicket.status);
 </script>
 
@@ -171,22 +187,24 @@
 <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
   {#if $tickets.isLoading}
     <div class="text-center py-12">
-      <div class="spinner w-8 h-8 mx-auto mb-4"></div>
+      <div class="spinner w-8 h-8 mx-auto mb-4" />
       <p class="text-gray-600">Cargando ticket...</p>
     </div>
   {:else if $tickets.error}
     <div class="text-center py-12">
       <div class="w-12 h-12 bg-red-100 rounded-lg flex items-center justify-center mx-auto mb-4">
         <svg class="w-6 h-6 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+          />
         </svg>
       </div>
       <h3 class="text-lg font-medium text-gray-900 mb-2">Error al cargar ticket</h3>
       <p class="text-gray-600 mb-4">{$tickets.error}</p>
-      <button 
-        on:click={() => tickets.loadTicket(ticketId)}
-        class="btn-primary px-4 py-2"
-      >
+      <button on:click={() => tickets.loadTicket(ticketId)} class="btn-primary px-4 py-2">
         Reintentar
       </button>
     </div>
@@ -199,7 +217,7 @@
       </svg>
       <span>#{$tickets.currentTicket.id.substring(0, 8)}</span>
     </div>
-    
+
     <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
       <!-- Main Content -->
       <div class="lg:col-span-2 space-y-6">
@@ -223,7 +241,7 @@
                   </span>
                 </div>
               </div>
-              
+
               {#if canClose}
                 <button
                   on:click={handleCloseTicket}
@@ -235,14 +253,14 @@
               {/if}
             </div>
           </div>
-          
+
           <div class="card-content">
             <div class="prose max-w-none">
               <p class="whitespace-pre-wrap text-gray-700">
                 {$tickets.currentTicket.description}
               </p>
             </div>
-            
+
             {#if $tickets.currentTicket.resolution}
               <div class="mt-6 p-4 bg-green-50 border border-green-200 rounded-lg">
                 <h4 class="font-medium text-green-900 mb-2">Resolución:</h4>
@@ -253,7 +271,7 @@
             {/if}
           </div>
         </div>
-        
+
         <!-- Attachments -->
         {#if $tickets.attachments.length > 0}
           <div class="card">
@@ -261,14 +279,18 @@
               <div class="flex items-center justify-between">
                 <h3 class="text-lg font-semibold text-gray-900 flex items-center space-x-2">
                   <span>Archivos Adjuntos</span>
-                  <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
-                    {$tickets.attachments.length} archivo{$tickets.attachments.length !== 1 ? 's' : ''}
+                  <span
+                    class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800"
+                  >
+                    {$tickets.attachments.length} archivo{$tickets.attachments.length !== 1
+                      ? 's'
+                      : ''}
                   </span>
                 </h3>
-                <button 
+                <button
                   class="text-sm text-gray-500 hover:text-gray-700"
                   title="Ver/Ocultar archivos adjuntos"
-                  on:click={() => showAttachments = !showAttachments}
+                  on:click={() => (showAttachments = !showAttachments)}
                 >
                   {showAttachments ? 'Ocultar' : 'Ver'} archivos
                 </button>
@@ -278,11 +300,23 @@
               <div class="card-content">
                 <div class="space-y-3">
                   {#each $tickets.attachments as attachment}
-                    <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors">
+                    <div
+                      class="flex items-center justify-between p-3 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors"
+                    >
                       <div class="flex items-center space-x-3">
                         <div class="w-8 h-8 bg-gray-200 rounded flex items-center justify-center">
-                          <svg class="w-4 h-4 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13" />
+                          <svg
+                            class="w-4 h-4 text-gray-600"
+                            fill="none"
+                            stroke="currentColor"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              stroke-linecap="round"
+                              stroke-linejoin="round"
+                              stroke-width="2"
+                              d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13"
+                            />
                           </svg>
                         </div>
                         <div>
@@ -290,22 +324,26 @@
                             {attachment.original_filename}
                           </p>
                           <p class="text-xs text-gray-500">
-                            {Math.round(attachment.size_bytes / 1024)} KB • 
-                            Subido por {attachment.uploaded_by_name} • 
+                            {Math.round(attachment.size_bytes / 1024)} KB • Subido por {attachment.uploaded_by_name}
+                            •
                             {formatDate(attachment.uploaded_at)}
                           </p>
                         </div>
                       </div>
-                      <a
-                        href="/api/v1/tickets/{ticketId}/attachments/{attachment.id}/download"
+                      <button
+                        on:click={() => handleDownloadAttachment(attachment)}
                         class="btn-ghost p-2 hover:bg-blue-100 rounded-md transition-colors"
-                        target="_blank"
                         title="Descargar archivo"
                       >
                         <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+                          <path
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            stroke-width="2"
+                            d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
+                          />
                         </svg>
-                      </a>
+                      </button>
                     </div>
                   {/each}
                 </div>
@@ -313,7 +351,7 @@
             {/if}
           </div>
         {/if}
-        
+
         <!-- Comments -->
         <div class="card">
           <div class="card-header">
@@ -327,11 +365,18 @@
             {:else}
               <div class="space-y-4">
                 {#each $tickets.comments as comment}
-                {console.log('Comment:', comment)}
+                  {console.log('Comment:', comment)}
                   <div class="flex space-x-3">
-                    <div class="w-8 h-8 bg-primary-100 rounded-full flex items-center justify-center flex-shrink-0">
+                    <div
+                      class="w-8 h-8 bg-primary-100 rounded-full flex items-center justify-center flex-shrink-0"
+                    >
                       <span class="text-primary-600 text-xs font-medium">
-                       {comment.author_name ? comment.author_name.split(' ').map(n => n[0]).join('') : '??'} 
+                        {comment.author_name
+                          ? comment.author_name
+                              .split(' ')
+                              .map(n => n[0])
+                              .join('')
+                          : '??'}
                       </span>
                     </div>
                     <div class="flex-1 min-w-0">
@@ -356,7 +401,7 @@
                 {/each}
               </div>
             {/if}
-            
+
             <!-- Add Comment Form -->
             <div class="mt-6 pt-6 border-t border-gray-200">
               <div class="space-y-4">
@@ -366,8 +411,8 @@
                   placeholder="Escribe tu comentario o respuesta..."
                   bind:value={newComment}
                   disabled={isSubmittingComment}
-                ></textarea>
-                
+                />
+
                 <div class="flex justify-between items-center">
                   <div class="flex items-center space-x-4">
                     <input
@@ -385,16 +430,21 @@
                       disabled={isUploading}
                     >
                       {#if isUploading}
-                        <div class="spinner w-4 h-4"></div>
+                        <div class="spinner w-4 h-4" />
                       {:else}
                         <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13" />
+                          <path
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            stroke-width="2"
+                            d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13"
+                          />
                         </svg>
                       {/if}
                       <span class="text-sm">Adjuntar archivo</span>
                     </button>
                   </div>
-                  
+
                   <button
                     on:click={handleAddComment}
                     class="btn-primary px-4 py-2"
@@ -402,7 +452,7 @@
                   >
                     {#if isSubmittingComment}
                       <div class="flex items-center space-x-2">
-                        <div class="spinner w-4 h-4"></div>
+                        <div class="spinner w-4 h-4" />
                         <span>Enviando...</span>
                       </div>
                     {:else}
@@ -415,7 +465,7 @@
           </div>
         </div>
       </div>
-      
+
       <!-- Sidebar -->
       <div class="space-y-6">
         <!-- Ticket Info -->
@@ -426,35 +476,44 @@
           <div class="card-content space-y-4">
             <div>
               <dt class="text-sm font-medium text-gray-500">ID del Ticket</dt>
-              <dd class="text-sm text-gray-900 font-mono">#{$tickets.currentTicket.id.substring(0, 8)}</dd>
+              <dd class="text-sm text-gray-900 font-mono">
+                #{$tickets.currentTicket.id.substring(0, 8)}
+              </dd>
             </div>
-            
+
             <div>
               <dt class="text-sm font-medium text-gray-500">Categoría</dt>
-              <dd class="text-sm text-gray-900">{$tickets.currentTicket.category_name || 'Sin categoría'}</dd>
+              <dd class="text-sm text-gray-900">
+                {$tickets.currentTicket.category_name || 'Sin categoría'}
+              </dd>
             </div>
-            
+
             {#if $tickets.currentTicket.assigned_to_name}
               <div>
                 <dt class="text-sm font-medium text-gray-500">Asignado a</dt>
                 <dd class="text-sm text-gray-900">{$tickets.currentTicket.assigned_to_name}</dd>
               </div>
             {/if}
-            
+
             <div>
               <dt class="text-sm font-medium text-gray-500">Creado</dt>
               <dd class="text-sm text-gray-900">{formatDate($tickets.currentTicket.created_at)}</dd>
             </div>
-            
+
             <div>
               <dt class="text-sm font-medium text-gray-500">Última actualización</dt>
               <dd class="text-sm text-gray-900">{formatDate($tickets.currentTicket.updated_at)}</dd>
             </div>
-            
+
             {#if $tickets.currentTicket.due_date}
               <div>
                 <dt class="text-sm font-medium text-gray-500">Fecha límite</dt>
-                <dd class="text-sm text-gray-900 {new Date($tickets.currentTicket.due_date) < new Date() ? 'text-red-600' : ''}">
+                <dd
+                  class="text-sm text-gray-900 {new Date($tickets.currentTicket.due_date) <
+                  new Date()
+                    ? 'text-red-600'
+                    : ''}"
+                >
                   {formatDate($tickets.currentTicket.due_date)}
                   {#if new Date($tickets.currentTicket.due_date) < new Date()}
                     <span class="block text-xs text-red-500">¡Vencido!</span>
@@ -472,29 +531,50 @@
 <!-- Close Ticket Dialog -->
 {#if showCloseDialog}
   <div class="fixed inset-0 z-50 overflow-y-auto">
-    <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
-      <div class="fixed inset-0 transition-opacity" on:click={cancelCloseTicket}>
-        <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
+    <div
+      class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"
+    >
+      <div
+        class="fixed inset-0 transition-opacity"
+        role="dialog"
+        tabindex="0"
+        on:click={cancelCloseTicket}
+        on:keydown={e => e.key === 'Escape' && cancelCloseTicket()}
+      >
+        <div class="absolute inset-0 bg-gray-500 opacity-75" />
       </div>
-      
-      <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
+
+      <div
+        class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
+      >
         <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
           <div class="sm:flex sm:items-start">
-            <div class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-green-100 sm:mx-0 sm:h-10 sm:w-10">
-              <svg class="h-6 w-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
+            <div
+              class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-green-100 sm:mx-0 sm:h-10 sm:w-10"
+            >
+              <svg
+                class="h-6 w-6 text-green-600"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="M5 13l4 4L19 7"
+                />
               </svg>
             </div>
             <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
-              <h3 class="text-lg leading-6 font-medium text-gray-900">
-                Cerrar Ticket
-              </h3>
+              <h3 class="text-lg leading-6 font-medium text-gray-900">Cerrar Ticket</h3>
               <div class="mt-2">
                 <p class="text-sm text-gray-500">
-                  ¿Estás seguro de que quieres cerrar este ticket? Esta acción indica que el problema ha sido resuelto satisfactoriamente.
+                  ¿Estás seguro de que quieres cerrar este ticket? Esta acción indica que el
+                  problema ha sido resuelto satisfactoriamente.
                 </p>
               </div>
-              
+
               <div class="mt-4">
                 <label for="close-resolution" class="form-label">
                   Comentario de cierre (opcional)
@@ -506,7 +586,7 @@
                   placeholder="Describe cómo se resolvió el problema o agrega comentarios finales..."
                   bind:value={closeResolution}
                   disabled={isClosingTicket}
-                ></textarea>
+                />
               </div>
             </div>
           </div>
@@ -520,7 +600,7 @@
           >
             {#if isClosingTicket}
               <div class="flex items-center space-x-2">
-                <div class="spinner w-4 h-4"></div>
+                <div class="spinner w-4 h-4" />
                 <span>Cerrando...</span>
               </div>
             {:else}
@@ -539,4 +619,4 @@
       </div>
     </div>
   </div>
-{/if}
+{/if}

frontend-client/tsconfig.json

@@ -18,7 +18,8 @@
             "DOM.Iterable"
         ],
         "allowSyntheticDefaultImports": true,
-        "isolatedModules": true
+        "isolatedModules": true,
+        "verbatimModuleSyntax": true
     },
     "include": [
         "src/**/*",

frontend-client/vite.config.js

@@ -8,7 +8,7 @@ export default defineConfig({
 		host: '0.0.0.0',
 		proxy: {
 			'/api': {
-				target: 'http://backend:8000',
+				target: 'http://servicemanager-backend:8000',
 				changeOrigin: true,
 				rewrite: (path) => path.replace(/^\/api/, '')
 			}

frontend-internal/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@servicemanager/internal-frontend",
-  "version": "0.1.0",
+  "version": "1.6.0",
   "private": true,
   "type": "module",
   "scripts": {

frontend-internal/src/lib/components/Header.svelte

@@ -1,14 +1,15 @@
 <script lang="ts">
   import { auth } from '$lib/stores/auth.js';
-  
+;
+
   export let toggleSidebar: () => void;
-  
+
   function handleLogout() {
     auth.logout();
   }
-  
+
   let isMenuOpen = false;
-  
+
   function toggleMenu() {
     isMenuOpen = !isMenuOpen;
   }
@@ -23,15 +24,20 @@
         class="p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-primary-500 lg:hidden"
       >
         <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M4 6h16M4 12h16M4 18h16"
+          />
         </svg>
       </button>
-      
+
       <div class="hidden lg:block">
         <h1 class="text-lg font-semibold text-gray-900">ServiceManager Internal</h1>
       </div>
     </div>
-    
+
     <!-- Right side -->
     <div class="flex items-center space-x-4">
       <!-- User menu -->
@@ -46,15 +52,23 @@
             </span>
           </div>
           <span class="hidden sm:block text-sm">
-            {$auth.user?.first_name} {$auth.user?.last_name}
+            {$auth.user?.first_name}
+            {$auth.user?.last_name}
           </span>
           <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M19 9l-7 7-7-7"
+            />
           </svg>
         </button>
 
         {#if isMenuOpen}
-          <div class="absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg border border-gray-200 z-50">
+          <div
+            class="absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg border border-gray-200 z-50"
+          >
             <div class="py-1">
               <div class="px-4 py-2 text-xs text-gray-500 border-b border-gray-200">
                 {$auth.user?.email}
@@ -62,7 +76,7 @@
               <a
                 href="/profile"
                 class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
-                on:click={() => isMenuOpen = false}
+                on:click={() => (isMenuOpen = false)}
               >
                 Mi Perfil
               </a>
@@ -82,8 +96,11 @@
 
 <!-- Backdrop for mobile menu -->
 {#if isMenuOpen}
-  <div 
-    class="fixed inset-0 z-40 lg:hidden" 
-    on:click={() => isMenuOpen = false}
-  ></div>
-{/if}
+  <div
+    class="fixed inset-0 z-40 lg:hidden"
+    role="dialog"
+    tabindex="0"
+    on:click={() => (isMenuOpen = false)}
+    on:keydown={e => e.key === 'Escape' && (isMenuOpen = false)}
+  />
+{/if}

frontend-internal/src/lib/components/Modal.svelte

@@ -1,8 +1,9 @@
 <script>
-  import { createEventDispatcher, onMount, onDestroy } from 'svelte';
+  import { createEventDispatcher } from 'svelte';
   
   export let open = false;
   export let title = '';
+  export let size = 'lg'; // sm, md, lg, xl, 2xl
   
   const dispatch = createEventDispatcher();
   
@@ -15,6 +16,20 @@
       close();
     }
   }
+  
+  function handleBackdropClick(e) {
+    if (e.target === e.currentTarget) {
+      close();
+    }
+  }
+  
+  const sizeClasses = {
+    sm: 'sm:max-w-sm',
+    md: 'sm:max-w-md',
+    lg: 'sm:max-w-lg',
+    xl: 'sm:max-w-xl',
+    '2xl': 'sm:max-w-2xl'
+  };
 </script>
 
 <svelte:window on:keydown={handleKeydown}/>
@@ -23,21 +38,45 @@
   <div class="fixed inset-0 z-50 overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true">
     <div class="flex items-end justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
       
-      <div class="fixed inset-0 transition-opacity bg-gray-500 bg-opacity-75" aria-hidden="true" on:click={close}></div>
+      <!-- Backdrop -->
+      <div 
+        class="fixed inset-0 transition-opacity bg-gray-500 bg-opacity-75" 
+        aria-hidden="true" 
+        on:click={handleBackdropClick}
+      ></div>
 
+      <!-- Center trick -->
       <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
 
-      <div class="inline-block px-4 pt-5 pb-4 overflow-hidden text-left align-bottom transition-all transform bg-white rounded-lg shadow-xl sm:my-8 sm:align-middle sm:max-w-lg sm:w-full sm:p-6">
-        <div class="sm:flex sm:items-start">
-          <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full">
-            <h3 class="text-lg leading-6 font-medium text-gray-900" id="modal-title">
-              {title}
-            </h3>
-            <div class="mt-2 text-sm text-gray-500">
-              <slot />
-            </div>
-          </div>
+      <!-- Modal panel -->
+      <div class="inline-block w-full align-bottom bg-white rounded-lg shadow-xl transform transition-all sm:my-8 sm:align-middle {sizeClasses[size]} sm:w-full">
+        <!-- Header -->
+        <div class="px-6 py-4 border-b border-gray-200 flex items-center justify-between">
+          <h3 class="text-lg font-semibold text-gray-900" id="modal-title">
+            {title}
+          </h3>
+          <button 
+            type="button"
+            on:click={close}
+            class="text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-primary-500 rounded-lg p-1"
+          >
+            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+            </svg>
+          </button>
         </div>
+        
+        <!-- Body -->
+        <div class="px-6 py-4 max-h-[70vh] overflow-y-auto">
+          <slot />
+        </div>
+        
+        <!-- Footer (optional) -->
+        {#if $$slots.footer}
+          <div class="px-6 py-4 bg-gray-50 border-t border-gray-200 rounded-b-lg">
+            <slot name="footer" />
+          </div>
+        {/if}
       </div>
     </div>
   </div>

frontend-internal/src/lib/components/Sidebar.svelte

@@ -1,12 +1,12 @@
 <script lang="ts">
-  import { auth } from '$lib/stores/auth.js';
   import { page } from '$app/stores';
-  
+  import { auth } from '$lib/stores/auth.js';
+
   export let open = false;
-  
+
   // Navigation items based on user role
   $: navigation = getNavigationForRole($auth.user?.role);
-  
+
   function getNavigationForRole(role: string | undefined) {
     const baseNavigation = [
       {
@@ -20,7 +20,7 @@
         icon: 'M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2'
       }
     ];
-    
+
     if (role === 'ADMIN' || role === 'SUPPORT_MANAGER') {
       baseNavigation.push(
         {
@@ -45,7 +45,7 @@
         }
       );
     }
-    
+
     if (role === 'ADMIN') {
       baseNavigation.push(
         {
@@ -62,35 +62,59 @@
           name: 'Auditoría',
           href: '/audit',
           icon: 'M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z'
+        },
+        {
+          name: 'Seguridad',
+          href: '/audit/security',
+          icon: 'M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z'
         }
       );
     }
-    
+
     return baseNavigation;
   }
-  
+
   function isCurrentPage(href: string) {
-    return $page.url.pathname === href || 
-           ($page.url.pathname.startsWith(href) && href !== '/');
+    return $page.url.pathname === href || ($page.url.pathname.startsWith(href) && href !== '/');
   }
 </script>
 
 <!-- Mobile sidebar backdrop -->
 {#if open}
   <div class="fixed inset-0 z-40 lg:hidden">
-    <div class="fixed inset-0 bg-gray-600 bg-opacity-75" on:click={() => open = false}></div>
+    <div
+      class="fixed inset-0 bg-gray-600 bg-opacity-75"
+      role="dialog"
+      tabindex="0"
+      on:click={() => (open = false)}
+      on:keydown={e => e.key === 'Escape' && (open = false)}
+    />
   </div>
 {/if}
 
 <!-- Sidebar -->
-<div class="fixed inset-y-0 left-0 z-50 w-64 bg-white shadow-lg transform {open ? 'translate-x-0' : '-translate-x-full'} transition-transform duration-300 ease-in-out lg:translate-x-0 lg:static lg:inset-0">
+<div
+  class="fixed inset-y-0 left-0 z-50 w-64 bg-white shadow-lg transform {open
+    ? 'translate-x-0'
+    : '-translate-x-full'} transition-transform duration-300 ease-in-out lg:translate-x-0 lg:static lg:inset-0"
+>
   <div class="flex flex-col h-full">
     <!-- Logo -->
     <div class="flex items-center justify-between h-16 px-6 bg-primary-600">
       <div class="flex items-center space-x-2">
         <div class="w-8 h-8 bg-white rounded-lg flex items-center justify-center">
-          <svg class="w-5 h-5 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 5.636l-3.536 3.536m0 5.656l3.536 3.536M9.172 9.172L5.636 5.636m3.536 9.192L5.636 18.364M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-5 0a4 4 0 11-8 0 4 4 0 018 0z" />
+          <svg
+            class="w-5 h-5 text-primary-600"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M18.364 5.636l-3.536 3.536m0 5.656l3.536 3.536M9.172 9.172L5.636 5.636m3.536 9.192L5.636 18.364M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-5 0a4 4 0 11-8 0 4 4 0 018 0z"
+            />
           </svg>
         </div>
         <div class="text-white">
@@ -98,28 +122,33 @@
           <p class="text-xs text-primary-100">Panel Interno</p>
         </div>
       </div>
-      
+
       <button
-        on:click={() => open = false}
+        on:click={() => (open = false)}
         class="p-2 rounded-md text-primary-100 hover:text-white hover:bg-primary-500 lg:hidden"
       >
         <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M6 18L18 6M6 6l12 12"
+          />
         </svg>
       </button>
     </div>
-    
+
     <!-- Navigation -->
     <nav class="flex-1 px-4 py-6 space-y-2">
       {#each navigation as item}
         <a
           href={item.href}
-          class="flex items-center space-x-3 px-3 py-2 rounded-md text-sm font-medium transition-colors {
-            isCurrentPage(item.href)
-              ? 'bg-primary-100 text-primary-700'
-              : 'text-gray-600 hover:bg-gray-100 hover:text-gray-900'
-          }"
-          on:click={() => open = false}
+          class="flex items-center space-x-3 px-3 py-2 rounded-md text-sm font-medium transition-colors {isCurrentPage(
+            item.href
+          )
+            ? 'bg-primary-100 text-primary-700'
+            : 'text-gray-600 hover:bg-gray-100 hover:text-gray-900'}"
+          on:click={() => (open = false)}
         >
           <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d={item.icon} />
@@ -128,7 +157,7 @@
         </a>
       {/each}
     </nav>
-    
+
     <!-- User info -->
     <div class="px-4 py-4 border-t border-gray-200">
       <div class="flex items-center space-x-3">
@@ -139,15 +168,25 @@
         </div>
         <div class="flex-1 min-w-0">
           <p class="text-sm font-medium text-gray-900 truncate">
-            {$auth.user?.first_name} {$auth.user?.last_name}
+            {$auth.user?.first_name}
+            {$auth.user?.last_name}
           </p>
           <p class="text-xs text-gray-500 truncate">
-            {$auth.user?.role === 'ADMIN' ? 'Administrador' :
-             $auth.user?.role === 'SUPPORT_MANAGER' ? 'Gerente de Soporte' :
-             $auth.user?.role === 'AGENT' ? 'Agente' : 'Auditor'}
+            {$auth.user?.role === 'ADMIN'
+              ? 'Administrador'
+              : $auth.user?.role === 'SUPPORT_MANAGER'
+              ? 'Gerente de Soporte'
+              : $auth.user?.role === 'AGENT'
+              ? 'Agente'
+              : 'Auditor'}
           </p>
         </div>
       </div>
     </div>
+    
+    <!-- Version info -->
+    <div class="px-4 py-2 border-t border-gray-100">
+      <p class="text-xs text-gray-400 text-center">v1.6.0</p>
+    </div>
   </div>
-</div>
+</div>

frontend-internal/src/lib/utils/api.ts

@@ -9,14 +9,14 @@ interface RequestOptions extends RequestInit {
 
 async function request<T>(endpoint: string, options: RequestOptions = {}): Promise<T> {
   const { params, ...init } = options;
-  
+
   let url = `${API_BASE}${endpoint}`;
   if (params) {
     // Filtrar parámetros undefined y null
     const filteredParams = Object.entries(params)
       .filter(([key, value]) => value !== undefined && value !== null && value !== '')
       .reduce((acc, [key, value]) => ({ ...acc, [key]: value }), {});
-    
+
     if (Object.keys(filteredParams).length > 0) {
       const searchParams = new URLSearchParams(filteredParams);
       url += `?${searchParams.toString()}`;
@@ -42,9 +42,9 @@ async function request<T>(endpoint: string, options: RequestOptions = {}): Promi
   if (response.status === 401) {
     // Token expired or invalid
     if (typeof window !== 'undefined') {
-        localStorage.removeItem('internal_auth_token');
-        localStorage.removeItem('internal_auth_user');
-        window.location.href = '/login'; 
+      localStorage.removeItem('internal_auth_token');
+      localStorage.removeItem('internal_auth_user');
+      window.location.href = '/login';
     }
     throw new Error('Unauthorized');
   }
@@ -56,25 +56,68 @@ async function request<T>(endpoint: string, options: RequestOptions = {}): Promi
 
   // Handle empty responses (like 204 No Content)
   if (response.status === 204) {
-      return {} as T;
+    return {} as T;
   }
 
   return response.json();
 }
 
+async function downloadFile(endpoint: string, filename: string): Promise<void> {
+  const authState = get(auth);
+  const token = authState.token || (typeof window !== 'undefined' ? localStorage.getItem('internal_auth_token') : null);
+
+  const headers = new Headers();
+  if (token) {
+    headers.set('Authorization', `Bearer ${token}`);
+  }
+
+  const response = await fetch(`${API_BASE}${endpoint}`, {
+    method: 'GET',
+    headers
+  });
+
+  if (response.status === 401) {
+    if (typeof window !== 'undefined') {
+      localStorage.removeItem('internal_auth_token');
+      localStorage.removeItem('internal_auth_user');
+      window.location.href = '/login';
+    }
+    throw new Error('Unauthorized');
+  }
+
+  if (!response.ok) {
+    const errorData = await response.json().catch(() => ({}));
+    throw new Error(errorData.detail || `Download error: ${response.statusText}`);
+  }
+
+  // Crear blob y descargar
+  const blob = await response.blob();
+  const url = window.URL.createObjectURL(blob);
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = filename;
+  document.body.appendChild(a);
+  a.click();
+  document.body.removeChild(a);
+  window.URL.revokeObjectURL(url);
+}
+
 export const api = {
-  get: <T>(endpoint: string, params?: Record<string, string>) => 
+  get: <T>(endpoint: string, params?: Record<string, string>) =>
     request<T>(endpoint, { method: 'GET', params }),
-    
-  post: <T>(endpoint: string, body: any) => 
+
+  post: <T>(endpoint: string, body: any) =>
     request<T>(endpoint, { method: 'POST', body: JSON.stringify(body) }),
-    
-  put: <T>(endpoint: string, body: any) => 
+
+  put: <T>(endpoint: string, body: any) =>
     request<T>(endpoint, { method: 'PUT', body: JSON.stringify(body) }),
-    
-  patch: <T>(endpoint: string, body: any) => 
+
+  patch: <T>(endpoint: string, body: any) =>
     request<T>(endpoint, { method: 'PATCH', body: JSON.stringify(body) }),
-    
-  delete: <T>(endpoint: string) => 
-    request<T>(endpoint, { method: 'DELETE' })
+
+  delete: <T>(endpoint: string) =>
+    request<T>(endpoint, { method: 'DELETE' }),
+
+  downloadFile: (endpoint: string, filename: string) =>
+    downloadFile(endpoint, filename)
 };

frontend-internal/src/routes/audit/security/+page.svelte

@@ -0,0 +1,532 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import { api } from '$lib/utils/api';
+  import { toast } from '$lib/stores/toast';
+  import { auth } from '$lib/stores/auth';
+  import Modal from '$lib/components/Modal.svelte';
+
+  // Estado
+  let isLoading = false;
+  let analysis = null;
+  let analysisHours = 24;
+  let selectedThreat = null;
+  let showActionModal = false;
+  let actionType = '';
+  let actionTarget = '';
+  let actionReason = '';
+  let actionDuration = 60;
+
+  // Usuario actual
+  $: currentUser = $auth.user;
+  $: canExecuteActions = currentUser && (currentUser.role === 'ADMIN' || currentUser.role === 'SUPPORT_MANAGER');
+
+  /**
+   * Cargar análisis de seguridad
+   */
+  async function loadSecurityAnalysis() {
+    isLoading = true;
+    try {
+      analysis = await api.get('/audit/security/analysis', { hours: analysisHours });
+      console.log('Security analysis loaded:', analysis);
+    } catch (e: any) {
+      toast.error('Error cargando análisis de seguridad: ' + (e.message || 'Error desconocido'));
+    } finally {
+      isLoading = false;
+    }
+  }
+
+  /**
+   * Cambiar período de análisis
+   */
+  function changeAnalysisPeriod(hours: number) {
+    analysisHours = hours;
+    loadSecurityAnalysis();
+  }
+
+  /**
+   * Obtener color según nivel de riesgo
+   */
+  function getRiskColor(level: string) {
+    const colors: any = {
+      safe: 'bg-green-100 text-green-800 border-green-300',
+      low: 'bg-blue-100 text-blue-800 border-blue-300',
+      medium: 'bg-yellow-100 text-yellow-800 border-yellow-300',
+      high: 'bg-orange-100 text-orange-800 border-orange-300',
+      critical: 'bg-red-100 text-red-800 border-red-300'
+    };
+    return colors[level] || colors.low;
+  }
+
+  /**
+   * Obtener color de severidad de amenaza
+   */
+  function getSeverityColor(severity: string) {
+    const colors: any = {
+      low: 'bg-blue-600 text-white',
+      medium: 'bg-yellow-500 text-white',
+      high: 'bg-orange-600 text-white',
+      critical: 'bg-red-600 text-white'
+    };
+    return colors[severity] || colors.low;
+  }
+
+  /**
+   * Obtener icono de tipo de amenaza
+   */
+  function getThreatIcon(type: string) {
+    const icons: any = {
+      brute_force_attack: 'M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z',
+      privilege_escalation: 'M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z',
+      mass_deletion: 'M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16',
+      account_compromise: 'M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z'
+    };
+    return icons[type] || icons.account_compromise;
+  }
+
+  /**
+   * Obtener texto legible del tipo de amenaza
+   */
+  function getThreatTypeText(type: string) {
+    const texts: any = {
+      brute_force_attack: 'Ataque de Fuerza Bruta',
+      privilege_escalation: 'Escalada de Privilegios',
+      mass_deletion: 'Eliminación Masiva',
+      account_compromise: 'Cuenta Comprometida'
+    };
+    return texts[type] || type;
+  }
+
+  /**
+   * Abrir modal para acción de seguridad
+   */
+  function openActionModal(threat: any, action: string) {
+    if (!canExecuteActions) {
+      toast.error('No tienes permisos para ejecutar acciones de seguridad');
+      return;
+    }
+    
+    selectedThreat = threat;
+    actionType = action;
+    
+    // Pre-llenar campos según el tipo de acción
+    if (action === 'block_ip' && threat.affected_ips.length > 0) {
+      actionTarget = threat.affected_ips[0];
+      actionReason = `Bloqueo automático: ${threat.description}`;
+    } else if (action === 'force_password_reset' && threat.affected_users.length > 0) {
+      actionTarget = threat.affected_users[0];
+      actionReason = `Reseteo de seguridad: ${threat.description}`;
+    } else {
+      actionTarget = '';
+      actionReason = threat.description;
+    }
+    
+    showActionModal = true;
+  }
+
+  /**
+   * Ejecutar acción de seguridad
+   */
+  async function executeSecurityAction() {
+    if (!actionTarget || !actionReason) {
+      toast.error('Completa todos los campos requeridos');
+      return;
+    }
+
+    try {
+      const response = await api.post('/audit/security/action', {
+        action_type: actionType,
+        target: actionTarget,
+        reason: actionReason,
+        duration_minutes: actionDuration
+      });
+
+      if (response.success) {
+        toast.success(response.message);
+        showActionModal = false;
+        loadSecurityAnalysis(); // Recargar análisis
+      } else {
+        toast.error(response.message);
+      }
+    } catch (e: any) {
+      toast.error('Error ejecutando acción: ' + (e.message || 'Error desconocido'));
+    }
+  }
+
+  /**
+   * Formatear fecha
+   */
+  function formatDate(dateString: string) {
+    const date = new Date(dateString);
+    return new Intl.DateTimeFormat('es-MX', {
+      year: 'numeric',
+      month: 'short',
+      day: 'numeric',
+      hour: '2-digit',
+      minute: '2-digit',
+      timeZone: 'UTC',
+      timeZoneName: 'short'
+    }).format(date);
+  }
+
+  onMount(() => {
+    loadSecurityAnalysis();
+  });
+</script>
+
+<div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
+  <!-- Header -->
+  <div class="mb-6">
+    <div class="flex items-center justify-between">
+      <div>
+        <h1 class="text-2xl font-bold text-gray-900 flex items-center gap-2">
+          <svg class="w-8 h-8 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+          </svg>
+          Análisis de Seguridad
+        </h1>
+        <p class="mt-1 text-sm text-gray-500">
+          Detección de amenazas y análisis de vulnerabilidades
+        </p>
+      </div>
+      <button
+        on:click={() => loadSecurityAnalysis()}
+        class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 flex items-center gap-2"
+      >
+        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+        </svg>
+        Actualizar
+      </button>
+    </div>
+  </div>
+
+  <!-- Selector de Período -->
+  <div class="bg-white shadow rounded-lg p-4 mb-6">
+    <div class="flex items-center gap-2 mb-2">
+      <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+      </svg>
+      <span class="text-sm font-medium text-gray-700">Período de Análisis</span>
+    </div>
+    <div class="flex flex-wrap gap-2">
+      <button
+        on:click={() => changeAnalysisPeriod(24)}
+        class="px-4 py-2 rounded-lg text-sm font-medium transition-colors {analysisHours === 24 ? 'bg-indigo-600 text-white' : 'bg-gray-100 text-gray-700 hover:bg-indigo-50'}"
+      >
+        Últimas 24 horas
+      </button>
+      <button
+        on:click={() => changeAnalysisPeriod(48)}
+        class="px-4 py-2 rounded-lg text-sm font-medium transition-colors {analysisHours === 48 ? 'bg-indigo-600 text-white' : 'bg-gray-100 text-gray-700 hover:bg-indigo-50'}"
+      >
+        Últimas 48 horas
+      </button>
+      <button
+        on:click={() => changeAnalysisPeriod(168)}
+        class="px-4 py-2 rounded-lg text-sm font-medium transition-colors {analysisHours === 168 ? 'bg-indigo-600 text-white' : 'bg-gray-100 text-gray-700 hover:bg-indigo-50'}"
+      >
+        Última semana
+      </button>
+    </div>
+  </div>
+
+  {#if isLoading}
+    <div class="flex justify-center items-center py-12">
+      <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-gray-600"></div>
+    </div>
+  {:else if analysis}
+    <!-- Resumen de Riesgo -->
+    <div class="bg-white shadow rounded-lg p-6 mb-6 border-l-4 {getRiskColor(analysis.overall_risk_level)}">
+      <div class="flex items-center justify-between">
+        <div>
+          <h3 class="text-lg font-semibold text-gray-900">Nivel de Riesgo General</h3>
+          <p class="text-sm text-gray-600 mt-1">Análisis de {analysis.analysis_period_hours} horas</p>
+        </div>
+        <div class="text-right">
+          <span class="inline-block px-4 py-2 text-2xl font-bold rounded-lg {getRiskColor(analysis.overall_risk_level)}">
+            {analysis.overall_risk_level.toUpperCase()}
+          </span>
+          <p class="text-xs text-gray-500 mt-1">Generado: {formatDate(analysis.generated_at)}</p>
+        </div>
+      </div>
+    </div>
+
+    <!-- Estadísticas Rápidas -->
+    <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
+      <div class="bg-white rounded-lg shadow p-4">
+        <div class="flex items-center justify-between">
+          <div>
+            <p class="text-sm text-gray-500">Amenazas Detectadas</p>
+            <p class="text-2xl font-bold text-red-600">{analysis.total_threats_detected}</p>
+          </div>
+          <svg class="w-10 h-10 text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+          </svg>
+        </div>
+      </div>
+
+      <div class="bg-white rounded-lg shadow p-4">
+        <div class="flex items-center justify-between">
+          <div>
+            <p class="text-sm text-gray-500">Intentos Fallidos</p>
+            <p class="text-2xl font-bold text-orange-600">{analysis.failed_login_attempts}</p>
+          </div>
+          <svg class="w-10 h-10 text-orange-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
+          </svg>
+        </div>
+      </div>
+
+      <div class="bg-white rounded-lg shadow p-4">
+        <div class="flex items-center justify-between">
+          <div>
+            <p class="text-sm text-gray-500">IPs Sospechosas</p>
+            <p class="text-2xl font-bold text-yellow-600">{analysis.suspicious_ips_count}</p>
+          </div>
+          <svg class="w-10 h-10 text-yellow-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9" />
+          </svg>
+        </div>
+      </div>
+
+      <div class="bg-white rounded-lg shadow p-4">
+        <div class="flex items-center justify-between">
+          <div>
+            <p class="text-sm text-gray-500">Acciones Críticas</p>
+            <p class="text-2xl font-bold text-red-600">{analysis.critical_actions_count}</p>
+          </div>
+          <svg class="w-10 h-10 text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
+          </svg>
+        </div>
+      </div>
+    </div>
+
+    <!-- Recomendaciones Generales -->
+    {#if analysis.recommended_actions && analysis.recommended_actions.length > 0}
+      <div class="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-6">
+        <div class="flex items-start gap-3">
+          <svg class="w-6 h-6 text-blue-600 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+          </svg>
+          <div class="flex-1">
+            <h4 class="text-sm font-semibold text-blue-900 mb-2">Acciones Recomendadas</h4>
+            <ul class="space-y-1">
+              {#each analysis.recommended_actions as action}
+                <li class="text-sm text-blue-800 flex items-start gap-2">
+                  <svg class="w-4 h-4 text-blue-600 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+                  </svg>
+                  {action}
+                </li>
+              {/each}
+            </ul>
+          </div>
+        </div>
+      </div>
+    {/if}
+
+    <!-- Lista de Amenazas -->
+    {#if analysis.threats && analysis.threats.length > 0}
+      <div class="space-y-4">
+        <h3 class="text-lg font-semibold text-gray-900">Amenazas Detectadas</h3>
+        
+        {#each analysis.threats as threat}
+          <div class="bg-white shadow rounded-lg p-6 border-l-4 {threat.severity === 'critical' ? 'border-gray-900' : threat.severity === 'high' ? 'border-gray-600' : threat.severity === 'medium' ? 'border-gray-400' : 'border-gray-200'}">
+            <!-- Header de Amenaza -->
+            <div class="flex items-start justify-between mb-4">
+              <div class="flex items-start gap-3 flex-1">
+                <div class="p-2 rounded-lg {threat.severity === 'critical' ? 'bg-gray-100' : threat.severity === 'high' ? 'bg-gray-100' : threat.severity === 'medium' ? 'bg-gray-100' : 'bg-gray-50'}">
+                  <svg class="w-6 h-6 {threat.severity === 'critical' ? 'text-gray-900' : threat.severity === 'high' ? 'text-gray-700' : threat.severity === 'medium' ? 'text-gray-600' : 'text-gray-500'}" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d={getThreatIcon(threat.type)} />
+                  </svg>
+                </div>
+                <div class="flex-1">
+                  <div class="flex items-center gap-2 mb-1">
+                    <h4 class="text-lg font-semibold text-gray-900">{getThreatTypeText(threat.type)}</h4>
+                    <span class="px-2 py-1 text-xs font-semibold rounded-full {getSeverityColor(threat.severity)}">
+                      {threat.severity.toUpperCase()}
+                    </span>
+                  </div>
+                  <p class="text-sm text-gray-700">{threat.description}</p>
+                </div>
+              </div>
+            </div>
+
+            <!-- Detalles -->
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4 text-sm">
+              <div>
+                <span class="font-medium text-gray-600">Ocurrencias:</span>
+                <span class="ml-2 text-gray-900 font-semibold">{threat.occurrences}</span>
+              </div>
+              <div>
+                <span class="font-medium text-gray-600">Primera detección:</span>
+                <span class="ml-2 text-gray-900">{formatDate(threat.first_seen)}</span>
+              </div>
+              <div>
+                <span class="font-medium text-gray-600">Última detección:</span>
+                <span class="ml-2 text-gray-900">{formatDate(threat.last_seen)}</span>
+              </div>
+            </div>
+
+            <!-- IPs y Usuarios Afectados -->
+            {#if threat.affected_ips.length > 0 || threat.affected_users.length > 0}
+              <div class="mb-4 text-sm">
+                {#if threat.affected_ips.length > 0}
+                  <div class="mb-2">
+                    <span class="font-medium text-gray-600">IPs involucradas:</span>
+                    <div class="mt-1 flex flex-wrap gap-1">
+                      {#each threat.affected_ips as ip}
+                        <code class="px-2 py-1 bg-gray-100 rounded text-xs font-mono">{ip}</code>
+                      {/each}
+                    </div>
+                  </div>
+                {/if}
+                {#if threat.affected_users.length > 0}
+                  <div>
+                    <span class="font-medium text-gray-600">Usuarios afectados:</span>
+                    <div class="mt-1 flex flex-wrap gap-1">
+                      {#each threat.affected_users as user}
+                        <span class="px-2 py-1 bg-gray-100 rounded text-xs">{user}</span>
+                      {/each}
+                    </div>
+                  </div>
+                {/if}
+              </div>
+            {/if}
+
+            <!-- Recomendaciones -->
+            {#if threat.recommendations && threat.recommendations.length > 0}
+              <div class="bg-gray-50 rounded-lg p-3 mb-4">
+                <p class="text-xs font-semibold text-gray-700 mb-2">Recomendaciones:</p>
+                <ul class="space-y-1">
+                  {#each threat.recommendations as rec}
+                    <li class="text-xs text-gray-600 flex items-start gap-2">
+                      <svg class="w-3 h-3 text-gray-400 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+                      </svg>
+                      {rec}
+                    </li>
+                  {/each}
+                </ul>
+              </div>
+            {/if}
+
+            <!-- Acciones -->
+            {#if canExecuteActions}
+              <div class="flex flex-wrap gap-2">
+                {#if threat.affected_ips.length > 0}
+                  <button
+                    on:click={() => openActionModal(threat, 'block_ip')}
+                    class="px-3 py-1.5 bg-red-600 text-white text-sm rounded hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 flex items-center gap-1"
+                  >
+                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636" />
+                    </svg>
+                    Bloquear IP
+                  </button>
+                {/if}
+                {#if threat.affected_users.length > 0}
+                  <button
+                    on:click={() => openActionModal(threat, 'force_password_reset')}
+                    class="px-3 py-1.5 bg-orange-600 text-white text-sm rounded hover:bg-orange-700 focus:outline-none focus:ring-2 focus:ring-orange-500 flex items-center gap-1"
+                  >
+                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z" />
+                    </svg>
+                    Resetear Contraseña
+                  </button>
+                {/if}
+                <button
+                  on:click={() => openActionModal(threat, 'notify_admin')}
+                  class="px-3 py-1.5 bg-blue-600 text-white text-sm rounded hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 flex items-center gap-1"
+                >
+                  <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
+                  </svg>
+                  Notificar Admin
+                </button>
+              </div>
+            {/if}
+          </div>
+        {/each}
+      </div>
+    {:else}
+      <!-- No hay amenazas -->
+      <div class="bg-gray-50 border border-gray-200 rounded-lg p-8 text-center">
+        <svg class="w-16 h-16 text-gray-500 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
+        </svg>
+        <h3 class="text-lg font-semibold text-gray-900 mb-2">Sistema Seguro</h3>
+        <p class="text-sm text-gray-600">No se detectaron amenazas en el período analizado</p>
+      </div>
+    {/if}
+  {/if}
+</div>
+
+<!-- Modal de Acción de Seguridad -->
+{#if showActionModal}
+  <Modal open={showActionModal} size="lg" title="Ejecutar Acción de Seguridad" on:close={() => showActionModal = false}>
+    <div class="space-y-4">
+      <div>
+        <label class="block text-sm font-medium text-gray-700 mb-1">Tipo de Acción</label>
+        <input
+          type="text"
+          bind:value={actionType}
+          readonly
+          class="block w-full rounded-md border-gray-300 bg-gray-50 shadow-sm sm:text-sm"
+        />
+      </div>
+
+      <div>
+        <label class="block text-sm font-medium text-gray-700 mb-1">
+          Objetivo {#if actionType === 'block_ip'}(IP){:else if actionType === 'force_password_reset'}(Email){/if}
+        </label>
+        <input
+          type="text"
+          bind:value={actionTarget}
+          placeholder="IP o email del usuario"
+          class="block w-full rounded-md border-gray-300 shadow-sm focus:border-gray-500 focus:ring-gray-500 sm:text-sm"
+        />
+      </div>
+
+      <div>
+        <label class="block text-sm font-medium text-gray-700 mb-1">Razón</label>
+        <textarea
+          bind:value={actionReason}
+          rows="3"
+          placeholder="Razón de la acción de seguridad"
+          class="block w-full rounded-md border-gray-300 shadow-sm focus:border-gray-500 focus:ring-gray-500 sm:text-sm"
+        ></textarea>
+      </div>
+
+      {#if actionType === 'block_ip'}
+        <div>
+          <label class="block text-sm font-medium text-gray-700 mb-1">Duración del Bloqueo (minutos)</label>
+          <input
+            type="number"
+            bind:value={actionDuration}
+            min="1"
+            max="10080"
+            class="block w-full rounded-md border-gray-300 shadow-sm focus:border-gray-500 focus:ring-gray-500 sm:text-sm"
+          />
+        </div>
+      {/if}
+
+      <div class="flex justify-end gap-3 pt-4 border-t">
+        <button
+          on:click={() => showActionModal = false}
+          class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-gray-500"
+        >
+          Cancelar
+        </button>
+        <button
+          on:click={executeSecurityAction}
+          class="px-4 py-2 text-sm font-medium text-white bg-indigo-600 rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500"
+        >
+          Ejecutar Acción
+        </button>
+      </div>
+    </div>
+  </Modal>
+{/if}

frontend-internal/src/routes/tickets/+page.svelte

@@ -9,7 +9,6 @@
   let categories = [];
   let systems = [];
   let users = [];
-  let tenants = []; // Nueva lista de tenants
   let isLoading = false;
   let showModal = false;
   let showEditModal = false;
@@ -19,15 +18,6 @@
   // Filtros
   let filterStatus = '';
   let filterPriority = '';
-  let filterTenant = ''; // Nuevo filtro por cliente/tenant
-  let filterCategory = ''; // Filtro por categoría
-  let filterAssignedTo = ''; // Filtro por asignado a
-  let searchText = ''; // Búsqueda por texto
-  let filterDateFrom = ''; // Fecha desde
-  let filterDateTo = ''; // Fecha hasta
-  
-  // Estado de filtros
-  $: activeFiltersCount = [filterTenant, filterStatus, filterPriority, filterCategory, filterAssignedTo, searchText, filterDateFrom, filterDateTo].filter(f => f && f.trim()).length;
   
   // Form para editar
   let editFormData = {
@@ -60,34 +50,25 @@
     { value: 'URGENT', label: 'Urgente', color: 'red' }
   ];
 
-  // Ajustar la función loadData para usar el endpoint administrativo con filtros
+  // Ajustar la función loadData para asegurar que los filtros se envíen correctamente
   async function loadData() {
     isLoading = true;
     try {
-      // Preparar parámetros filtrando valores vacíos
-      const ticketParams = {};
-      if (filterStatus) ticketParams.status_filter = filterStatus;
-      if (filterPriority) ticketParams.priority_filter = filterPriority;
-      if (filterTenant) ticketParams.tenant_id_filter = filterTenant;
-      if (filterCategory) ticketParams.category_filter = filterCategory;
-      if (filterAssignedTo) ticketParams.assigned_to_filter = filterAssignedTo;
-      if (searchText) ticketParams.search = searchText;
-      if (filterDateFrom) ticketParams.date_from = filterDateFrom;
-      if (filterDateTo) ticketParams.date_to = filterDateTo;
-
-      const [ticketsData, categoriesData, systemsData, usersData, tenantsData] = await Promise.all([
-        // Usar el nuevo endpoint administrativo
-        api.get('/tickets/admin/all', ticketParams),
+      const [ticketsData, categoriesData, systemsData, usersData] = await Promise.all([
+        api.get('/tickets/', {
+          params: {
+            status: filterStatus || undefined,
+            priority: filterPriority || undefined
+          }
+        }),
         api.get('/categories/'),
         api.get('/systems/'),
-        api.get('/users/'),
-        api.get('/tenants/') // Cargar lista de tenants
+        api.get('/users/')
       ]);
       tickets = ticketsData;
       categories = categoriesData;
       systems = systemsData;
       users = usersData;
-      tenants = tenantsData;
     } catch (e) {
       toast.error('Error cargando datos: ' + (e.message || 'Error desconocido'));
     } finally {
@@ -99,28 +80,6 @@
   function applyFilters() {
     loadData();
   }
-  
-  // Limpiar todos los filtros
-  function clearFilters() {
-    filterStatus = '';
-    filterPriority = '';
-    filterTenant = '';
-    filterCategory = '';
-    filterAssignedTo = '';
-    searchText = '';
-    filterDateFrom = '';
-    filterDateTo = '';
-    applyFilters();
-  }
-  
-  // Búsqueda en tiempo real (debounced)
-  let searchTimeout;
-  function handleSearchInput() {
-    clearTimeout(searchTimeout);
-    searchTimeout = setTimeout(() => {
-      applyFilters();
-    }, 500);
-  }
 
   function openCreateModal() {
     selectedTicket = null;
@@ -260,31 +219,12 @@
 </script>
 
 <div class="px-4 py-8 mx-auto max-w-7xl sm:px-6 lg:px-8">
-  <div class="sm:flex sm:items-center sm:justify-between">
+  <div class="sm:flex sm:items-center">
     <div class="sm:flex-auto">
       <h1 class="text-xl font-semibold text-gray-900">Tickets de Soporte</h1>
-      <p class="mt-2 text-sm text-gray-700">
-        Gestión de tickets del sistema de mesa de ayuda.
-        {#if activeFiltersCount > 0}
-          <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800 ml-2">
-            {activeFiltersCount} filtro{activeFiltersCount !== 1 ? 's' : ''} activo{activeFiltersCount !== 1 ? 's' : ''}
-          </span>
-        {/if}
-      </p>
+      <p class="mt-2 text-sm text-gray-700">Gestión de tickets del sistema de mesa de ayuda.</p>
     </div>
-    <div class="mt-4 sm:mt-0 sm:ml-16 sm:flex-none space-x-3">
-      {#if activeFiltersCount > 0}
-        <button
-          type="button"
-          on:click={clearFilters}
-          class="inline-flex items-center justify-center px-3 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md shadow-sm hover:bg-gray-50"
-        >
-          <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
-          </svg>
-          Limpiar filtros
-        </button>
-      {/if}
+    <div class="mt-4 sm:mt-0 sm:ml-16 sm:flex-none">
       <button
         type="button"
         on:click={openCreateModal}
@@ -295,139 +235,46 @@
     </div>
   </div>
 
-  <!-- Filtros Avanzados -->
-  <div class="mt-6 bg-white shadow sm:rounded-lg">
-    <div class="px-4 py-5 sm:p-6">
-      <h3 class="text-lg leading-6 font-medium text-gray-900 mb-4">Filtros</h3>
-      
-      <!-- Primera fila - Búsqueda y Filtros principales -->
-      <div class="grid grid-cols-1 gap-4 sm:grid-cols-4 mb-4">
-        <!-- Búsqueda por texto -->
-        <div class="sm:col-span-2">
-          <label for="searchText" class="block text-sm font-medium text-gray-700 mb-1">Búsqueda</label>
-          <div class="relative">
-            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
-              <svg class="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
-              </svg>
-            </div>
-            <input
-              type="text"
-              id="searchText"
-              bind:value={searchText}
-              on:input={handleSearchInput}
-              placeholder="Buscar en título o descripción..."
-              class="pl-10 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
-            />
-          </div>
-        </div>
-        
-        <!-- Cliente/Empresa -->
-        <div>
-          <label for="filterTenant" class="block text-sm font-medium text-gray-700 mb-1">Cliente/Empresa</label>
-          <select
-            id="filterTenant"
-            bind:value={filterTenant}
-            on:change={applyFilters}
-            class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
-          >
-            <option value="">Todos los clientes</option>
-            {#each tenants as tenant}
-              <option value={tenant.id}>{tenant.name}</option>
-            {/each}
-          </select>
-        </div>
-        
-        <!-- Estado -->
-        <div>
-          <label for="filterStatus" class="block text-sm font-medium text-gray-700 mb-1">Estado</label>
-          <select
-            id="filterStatus"
-            bind:value={filterStatus}
-            on:change={applyFilters}
-            class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
-          >
-            <option value="">Todos</option>
-            {#each STATUSES as status}
-              <option value={status.value}>{status.label}</option>
-            {/each}
-          </select>
-        </div>
+  <!-- Filtros -->
+  <div class="mt-6 bg-white shadow sm:rounded-lg p-4">
+    <div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
+      <div>
+        <label for="filterStatus" class="block text-sm font-medium text-gray-700">Estado</label>
+        <select
+          id="filterStatus"
+          bind:value={filterStatus}
+          on:change={applyFilters}
+          class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm border p-2"
+        >
+          <option value="">Todos</option>
+          {#each STATUSES as status}
+            <option value={status.value}>{status.label}</option>
+          {/each}
+        </select>
       </div>
       
-      <!-- Segunda fila - Filtros secundarios -->
-      <div class="grid grid-cols-1 gap-4 sm:grid-cols-5">
-        <!-- Prioridad -->
-        <div>
-          <label for="filterPriority" class="block text-sm font-medium text-gray-700 mb-1">Prioridad</label>
-          <select
-            id="filterPriority"
-            bind:value={filterPriority}
-            on:change={applyFilters}
-            class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
-          >
-            <option value="">Todas</option>
-            {#each PRIORITIES as priority}
-              <option value={priority.value}>{priority.label}</option>
-            {/each}
-          </select>
-        </div>
-        
-        <!-- Categoría -->
-        <div>
-          <label for="filterCategory" class="block text-sm font-medium text-gray-700 mb-1">Categoría</label>
-          <select
-            id="filterCategory"
-            bind:value={filterCategory}
-            on:change={applyFilters}
-            class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
-          >
-            <option value="">Todas</option>
-            {#each categories as category}
-              <option value={category.id}>{category.name}</option>
-            {/each}
-          </select>
-        </div>
-        
-        <!-- Asignado a -->
-        <div>
-          <label for="filterAssignedTo" class="block text-sm font-medium text-gray-700 mb-1">Asignado a</label>
-          <select
-            id="filterAssignedTo"
-            bind:value={filterAssignedTo}
-            on:change={applyFilters}
-            class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
-          >
-            <option value="">Todos</option>
-            {#each users.filter(u => u.role === 'AGENT' || u.role === 'SUPPORT_MANAGER' || u.role === 'ADMIN') as user}
-              <option value={user.id}>{user.first_name} {user.last_name}</option>
-            {/each}
-          </select>
-        </div>
-        
-        <!-- Fecha desde -->
-        <div>
-          <label for="filterDateFrom" class="block text-sm font-medium text-gray-700 mb-1">Desde</label>
-          <input
-            type="date"
-            id="filterDateFrom"
-            bind:value={filterDateFrom}
-            on:change={applyFilters}
-            class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
-          />
-        </div>
-        
-        <!-- Fecha hasta -->
-        <div>
-          <label for="filterDateTo" class="block text-sm font-medium text-gray-700 mb-1">Hasta</label>
-          <input
-            type="date"
-            id="filterDateTo"
-            bind:value={filterDateTo}
-            on:change={applyFilters}
-            class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
-          />
-        </div>
+      <div>
+        <label for="filterPriority" class="block text-sm font-medium text-gray-700">Prioridad</label>
+        <select
+          id="filterPriority"
+          bind:value={filterPriority}
+          on:change={applyFilters}
+          class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm border p-2"
+        >
+          <option value="">Todas</option>
+          {#each PRIORITIES as priority}
+            <option value={priority.value}>{priority.label}</option>
+          {/each}
+        </select>
+      </div>
+
+      <div class="flex items-end">
+        <button
+          on:click={loadData}
+          class="w-full inline-flex justify-center items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
+        >
+          Actualizar
+        </button>
       </div>
     </div>
   </div>
@@ -441,13 +288,12 @@
             <thead class="bg-gray-50">
               <tr>
                 <th scope="col" class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6">Ticket</th>
-                <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Cliente/Empresa</th>
                 <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Asunto</th>
                 <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Estado</th>
                 <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Prioridad</th>
-                <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Creado por</th>
+                <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Categoría</th>
                 <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Asignado a</th>
-                <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Fecha</th>
+                <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Creado</th>
                 <th scope="col" class="relative py-3.5 pl-3 pr-4 sm:pr-6">
                   <span class="sr-only">Acciones</span>
                 </th>
@@ -455,9 +301,9 @@
             </thead>
             <tbody class="divide-y divide-gray-200 bg-white">
               {#if isLoading}
-                <tr><td colspan="9" class="text-center py-4">Cargando...</td></tr>
+                <tr><td colspan="8" class="text-center py-4">Cargando...</td></tr>
               {:else if tickets.length === 0}
-                <tr><td colspan="9" class="text-center py-4">No hay tickets registrados</td></tr>
+                <tr><td colspan="8" class="text-center py-4">No hay tickets registrados</td></tr>
               {:else}
                 {#each tickets as ticket}
                   <tr 
@@ -467,10 +313,6 @@
                     <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6">
                       {ticket.ticket_number || ticket.id.substring(0, 8)}
                     </td>
-                    <td class="px-3 py-4 text-sm text-gray-900">
-                      <div class="font-medium text-indigo-600">{ticket.tenant?.name || 'N/A'}</div>
-                      <div class="text-xs text-gray-500">{ticket.tenant?.contact_email || ''}</div>
-                    </td>
                     <td class="px-3 py-4 text-sm text-gray-900">
                       <div class="font-medium">{ticket.subject}</div>
                       <div class="text-gray-500 truncate max-w-xs">{ticket.description}</div>
@@ -485,10 +327,8 @@
                         {getPriorityBadge(ticket.priority).label}
                       </span>
                     </td>
-                    <td class="px-3 py-4 text-sm text-gray-900">
-                      <div class="font-medium">{ticket.created_by_user?.first_name} {ticket.created_by_user?.last_name}</div>
-                      <div class="text-xs text-gray-500">{ticket.created_by_user?.email}</div>
-                      <div class="text-xs text-indigo-600">{ticket.created_by_user?.role || ''}</div>
+                    <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
+                      {getCategoryName(ticket.category_id)}
                     </td>
                     <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
                       {getUserName(ticket.assigned_to)}

frontend-internal/src/routes/tickets/[id]/+page.svelte

@@ -1,13 +1,14 @@
 <script lang="ts">
-  import { onMount } from 'svelte';
-  import { page } from '$app/stores';
   import { goto } from '$app/navigation';
-  import { api } from '$lib/utils/api';
+  import { page } from '$app/stores';
   import { toast } from '$lib/stores/toast';
+  import { api } from '$lib/utils/api';
+  import { onMount } from 'svelte';
 
   let ticketId: string;
   let ticket = null;
   let comments = [];
+  let attachments = [];
   let users = [];
   let isLoading = false;
   let newComment = '';
@@ -31,25 +32,27 @@
   ];
 
   async function loadComments() {
-  try {
-    const commentsData = await api.get(`/tickets/${ticketId}/comments`);
-    comments = commentsData;
-  } catch (e) {
-    // No mostrar error en polling silencioso
-    console.error('Error recargando comentarios:', e);
+    try {
+      const commentsData = await api.get(`/tickets/${ticketId}/comments`);
+      comments = commentsData;
+    } catch (e) {
+      // No mostrar error en polling silencioso
+      console.error('Error recargando comentarios:', e);
+    }
   }
-}
 
   async function loadData() {
     isLoading = true;
     try {
-      const [ticketData, commentsData, usersData] = await Promise.all([
+      const [ticketData, commentsData, attachmentsData, usersData] = await Promise.all([
         api.get(`/tickets/${ticketId}`),
         api.get(`/tickets/${ticketId}/comments`),
+        api.get(`/tickets/${ticketId}/attachments`),
         api.get('/users/')
       ]);
       ticket = ticketData;
       comments = commentsData;
+      attachments = attachmentsData;
       users = usersData;
     } catch (e) {
       toast.error('Error cargando ticket: ' + (e.message || 'Error desconocido'));
@@ -105,30 +108,42 @@
     });
   }
 
+  async function handleDownloadAttachment(attachment: any) {
+    try {
+      await api.downloadFile(
+        `/tickets/${ticketId}/attachments/${attachment.id}/download`,
+        attachment.original_filename
+      );
+      toast.success('Descarga iniciada');
+    } catch (error) {
+      console.error('Download error:', error);
+      toast.error('Error al descargar el archivo');
+    }
+  }
+
   onMount(() => {
     ticketId = $page.params.id;
     if (ticketId) {
       loadData();
-     // Polling cada 3 segundos
-    pollingInterval = setInterval(() => {
-      loadComments();
-    }, 3000);
-  }
-  
-  // Cleanup cuando se desmonte el componente
-  return () => {
-    if (pollingInterval) {
-      clearInterval(pollingInterval);
+      // Polling cada 3 segundos
+      pollingInterval = setInterval(() => {
+        loadComments();
+      }, 3000);
     }
-  };
-});
 
+    // Cleanup cuando se desmonte el componente
+    return () => {
+      if (pollingInterval) {
+        clearInterval(pollingInterval);
+      }
+    };
+  });
 </script>
 
 <div class="px-4 py-8 mx-auto max-w-7xl sm:px-6 lg:px-8">
   {#if isLoading}
     <div class="text-center py-12">
-      <div class="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-indigo-600"></div>
+      <div class="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-indigo-600" />
       <p class="mt-2 text-gray-600">Cargando ticket...</p>
     </div>
   {:else if ticket}
@@ -153,10 +168,18 @@
                   {ticket.subject || ticket.title}
                 </h1>
                 <div class="flex items-center space-x-3">
-                  <span class="inline-flex rounded-full px-2 text-xs font-semibold leading-5 bg-{getStatusBadge(ticket.status).color}-100 text-{getStatusBadge(ticket.status).color}-800">
+                  <span
+                    class="inline-flex rounded-full px-2 text-xs font-semibold leading-5 bg-{getStatusBadge(
+                      ticket.status
+                    ).color}-100 text-{getStatusBadge(ticket.status).color}-800"
+                  >
                     {getStatusBadge(ticket.status).label}
                   </span>
-                  <span class="inline-flex rounded-full px-2 text-xs font-semibold leading-5 bg-{getPriorityBadge(ticket.priority).color}-100 text-{getPriorityBadge(ticket.priority).color}-800">
+                  <span
+                    class="inline-flex rounded-full px-2 text-xs font-semibold leading-5 bg-{getPriorityBadge(
+                      ticket.priority
+                    ).color}-100 text-{getPriorityBadge(ticket.priority).color}-800"
+                  >
                     {getPriorityBadge(ticket.priority).label}
                   </span>
                   <span class="text-sm text-gray-500">
@@ -164,7 +187,7 @@
                   </span>
                 </div>
               </div>
-              
+
               <button
                 on:click={() => goto('/tickets')}
                 class="inline-flex items-center px-3 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
@@ -183,6 +206,74 @@
           </div>
         </div>
 
+        <!-- Attachments Section -->
+        {#if attachments && attachments.length > 0}
+          <div class="bg-white shadow rounded-lg">
+            <div class="px-6 py-5 border-b border-gray-200">
+              <h3 class="text-lg font-semibold text-gray-900">
+                Archivos Adjuntos ({attachments.length})
+              </h3>
+            </div>
+            <div class="px-6 py-5">
+              <div class="space-y-2">
+                {#each attachments as attachment}
+                  <div
+                    class="flex items-center justify-between p-3 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors"
+                  >
+                    <div class="flex items-center space-x-3">
+                      <div
+                        class="w-10 h-10 bg-indigo-100 rounded-lg flex items-center justify-center flex-shrink-0"
+                      >
+                        <svg
+                          class="w-5 h-5 text-indigo-600"
+                          fill="none"
+                          stroke="currentColor"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            stroke-width="2"
+                            d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13"
+                          />
+                        </svg>
+                      </div>
+                      <div class="flex-1 min-w-0">
+                        <p class="text-sm font-medium text-gray-900 truncate">
+                          {attachment.original_filename}
+                        </p>
+                        <p class="text-xs text-gray-500">
+                          {Math.round(attachment.size_bytes / 1024)} KB
+                          {#if attachment.uploaded_by_name}
+                            • Subido por {attachment.uploaded_by_name}
+                          {/if}
+                          {#if attachment.uploaded_at}
+                            • {formatDate(attachment.uploaded_at)}
+                          {/if}
+                        </p>
+                      </div>
+                    </div>
+                    <button
+                      on:click={() => handleDownloadAttachment(attachment)}
+                      class="inline-flex items-center p-2 text-sm font-medium text-indigo-600 hover:bg-indigo-50 rounded-md transition-colors"
+                      title="Descargar {attachment.original_filename}"
+                    >
+                      <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                          stroke-width="2"
+                          d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
+                        />
+                      </svg>
+                    </button>
+                  </div>
+                {/each}
+              </div>
+            </div>
+          </div>
+        {/if}
+
         <!-- Comments Section -->
         <div class="bg-white shadow rounded-lg">
           <div class="px-6 py-5 border-b border-gray-200">
@@ -197,9 +288,16 @@
               <div class="space-y-4">
                 {#each comments as comment}
                   <div class="flex space-x-3">
-                    <div class="w-8 h-8 bg-indigo-100 rounded-full flex items-center justify-center flex-shrink-0">
+                    <div
+                      class="w-8 h-8 bg-indigo-100 rounded-full flex items-center justify-center flex-shrink-0"
+                    >
                       <span class="text-indigo-600 text-xs font-medium">
-                        {comment.author_name ? comment.author_name.split(' ').map(n => n[0]).join('') : '??'}
+                        {comment.author_name
+                          ? comment.author_name
+                              .split(' ')
+                              .map(n => n[0])
+                              .join('')
+                          : '??'}
                       </span>
                     </div>
                     <div class="flex-1 min-w-0">
@@ -234,7 +332,7 @@
                   placeholder="Escribe tu comentario o respuesta..."
                   bind:value={newComment}
                   disabled={isSubmittingComment}
-                ></textarea>
+                />
 
                 <div class="flex justify-end">
                   <button
@@ -244,7 +342,9 @@
                   >
                     {#if isSubmittingComment}
                       <div class="flex items-center space-x-2">
-                        <div class="inline-block animate-spin rounded-full h-4 w-4 border-b-2 border-white"></div>
+                        <div
+                          class="inline-block animate-spin rounded-full h-4 w-4 border-b-2 border-white"
+                        />
                         <span>Enviando...</span>
                       </div>
                     {:else}
@@ -268,7 +368,9 @@
           <div class="px-6 py-5 space-y-4">
             <div>
               <dt class="text-sm font-medium text-gray-500">ID del Ticket</dt>
-              <dd class="text-sm text-gray-900 font-mono">#{ticket.ticket_number || ticket.id.substring(0, 8)}</dd>
+              <dd class="text-sm text-gray-900 font-mono">
+                #{ticket.ticket_number || ticket.id.substring(0, 8)}
+              </dd>
             </div>
 
             <div>
@@ -297,4 +399,4 @@
       </div>
     </div>
   {/if}
-</div>
+</div>

frontend-internal/tailwind.config.js

@@ -1,6 +1,75 @@
 /** @type {import('tailwindcss').Config} */
 export default {
 	content: ['./src/**/*.{html,js,svelte,ts}'],
+	safelist: [
+		// Colores de acciones
+		'bg-red-600',
+		'bg-blue-600',
+		'bg-green-600',
+		'bg-indigo-600',
+		'bg-orange-600',
+		'bg-yellow-500',
+		'bg-yellow-600',
+		'bg-gray-600',
+		// Colores de severidad/riesgo
+		'bg-red-50',
+		'bg-red-100',
+		'bg-red-800',
+		'bg-orange-100',
+		'bg-orange-300',
+		'bg-orange-600',
+		'bg-orange-700',
+		'bg-orange-800',
+		'bg-yellow-100',
+		'bg-yellow-300',
+		'bg-yellow-800',
+		'bg-blue-50',
+		'bg-blue-100',
+		'bg-blue-300',
+		'bg-blue-800',
+		'bg-green-100',
+		'bg-green-300',
+		'bg-green-800',
+		// Bordes
+		'border-red-300',
+		'border-blue-200',
+		'border-orange-300',
+		'border-yellow-300',
+		'border-blue-300',
+		'border-green-300',
+		// Text colors
+		'text-red-400',
+		'text-red-600',
+		'text-red-700',
+		'text-red-800',
+		'text-orange-400',
+		'text-orange-600',
+		'text-orange-800',
+		'text-yellow-400',
+		'text-yellow-600',
+		'text-yellow-800',
+		'text-blue-400',
+		'text-blue-600',
+		'text-blue-800',
+		'text-blue-900',
+		'text-green-600',
+		'text-green-800',
+		'text-indigo-600',
+		'text-white',
+		// Hover states
+		'hover:bg-red-50',
+		'hover:bg-red-700',
+		'hover:bg-orange-700',
+		'hover:bg-blue-700',
+		'hover:bg-indigo-50',
+		'hover:bg-indigo-700',
+		'hover:text-red-700',
+		// Focus rings
+		'focus:ring-red-500',
+		'focus:ring-orange-500',
+		'focus:ring-blue-500',
+		'focus:ring-indigo-500',
+	],
 	theme: {
 		extend: {
 			colors: {

frontend-internal/tsconfig.json

@@ -18,7 +18,8 @@
             "DOM.Iterable"
         ],
         "allowSyntheticDefaultImports": true,
-        "isolatedModules": true
+        "isolatedModules": true,
+        "verbatimModuleSyntax": true
     },
     "include": [
         "src/**/*",

test_attachments.ps1

@@ -1,34 +0,0 @@
-# Test de Attachments API
-# Ejecutar desde PowerShell
-
-# 1. Login
-$body = '{"email":"admin@aduanasoft.com","password":"admin123","tenant_slug":"aduanasoft"}'
-$login = Invoke-RestMethod -Uri "http://localhost:8000/v1/auth/login" -Method POST -Body $body -ContentType "application/json"
-
-$token = $login.data.access_token
-$tenantId = $login.data.user.tenant_id
-
-$headers = @{
-    "Authorization" = "Bearer $token"
-    "X-Tenant-ID" = $tenantId
-}
-
-Write-Host "Autenticacion exitosa" -ForegroundColor Green
-
-# 2. Listar tickets
-$tickets = Invoke-RestMethod -Uri "http://localhost:8000/v1/tickets" -Headers $headers
-$ticketId = $tickets.data[0].id
-
-Write-Host "Ticket ID obtenido: $ticketId" -ForegroundColor Green
-
-# 3. Listar attachments del ticket
-$attachments = Invoke-RestMethod -Uri "http://localhost:8000/v1/tickets/$ticketId/attachments" -Headers $headers
-
-Write-Host "Attachments listados: $($attachments.Count) encontrados" -ForegroundColor Green
-
-if ($attachments.Count -gt 0) {
-    $attachments | Format-Table id, original_filename, file_size, created_at
-}
-
-Write-Host ""
-Write-Host "TEST COMPLETADO" -ForegroundColor Cyan

test_attachments_endpoint.ps1

@@ -1,45 +0,0 @@
-# Test script para attachments endpoint
-Write-Host "=== Testing Attachments Endpoint ===" -ForegroundColor Cyan
-
-# 1. Login
-$body = '{"email":"admin@aduanasoft.com","password":"admin123","tenant_slug":"aduanasoft"}'
-try {
-    $login = Invoke-RestMethod -Uri "http://localhost:8000/v1/auth/login" -Method POST -Body $body -ContentType "application/json"
-    Write-Host "[OK] Login exitoso" -ForegroundColor Green
-    
-    $token = $login.access_token
-    $tenantId = $login.user.tenant_id
-    
-    Write-Host "Token: $($token.Substring(0,20))..." -ForegroundColor Gray
-    Write-Host "Tenant ID: $tenantId" -ForegroundColor Gray
-    
-    # 2. Test attachments endpoint
-    $headers = @{
-        "Authorization" = "Bearer $token"
-        "X-Tenant-ID" = $tenantId
-    }
-    
-    $url = "http://localhost:8000/v1/tickets/68eaf0fe-b5c3-4d42-9b36-895b439be583/attachments"
-    Write-Host "`nProbando GET $url" -ForegroundColor Yellow
-    
-    try {
-        $response = Invoke-WebRequest -Uri $url -Headers $headers -Method GET
-        Write-Host "[OK] Status Code: $($response.StatusCode)" -ForegroundColor Green
-        
-        $data = $response.Content | ConvertFrom-Json
-        Write-Host "[OK] Attachments encontrados: $($data.Count)" -ForegroundColor Green
-        
-        if ($data.Count -gt 0) {
-            $data | Format-Table id, original_filename, file_size
-        } else {
-            Write-Host "  (No hay attachments para este ticket)" -ForegroundColor Gray
-        }
-        
-    } catch {
-        Write-Host "[ERROR] En request: $($_.Exception.Message)" -ForegroundColor Red
-        Write-Host "Status Code: $($_.Exception.Response.StatusCode.value__)" -ForegroundColor Red
-    }
-    
-} catch {
-    Write-Host "[ERROR] En login: $($_.Exception.Message)" -ForegroundColor Red
-}