Release version 1.3.1: Updated backend models and endpoints

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

@@ -14,6 +14,7 @@ from app.models.ticket import Ticket, TicketStatus, TicketPriority
 from app.models.user import User
 from app.models.category import Category  # ✅ CORREGIDO: Era TicketCategory
 from app.models.system import System
+from app.models.comment import TicketComment
 import uuid
 
 router = APIRouter()
@@ -40,6 +41,7 @@ class TicketResponse(BaseModel):
     id: str
     ticket_number: str
     subject: str
+    title: str
     description: str
     status: str
     priority: str
@@ -124,6 +126,7 @@ async def create_ticket(
             "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,
@@ -186,6 +189,7 @@ async def get_tickets(
             "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,
@@ -237,6 +241,7 @@ async def get_ticket(
         "id": str(ticket.id),
         "ticket_number": ticket.ticket_number,
         "subject": ticket.subject,
+        "title": ticket.subject,
         "description": ticket.description,
         "status": ticket.status.value,
         "priority": ticket.priority.value,
@@ -305,6 +310,7 @@ async def update_ticket(
             "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,
@@ -369,6 +375,7 @@ async def close_ticket(
             "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,
@@ -388,11 +395,29 @@ async def close_ticket(
         )
 
 
-# ===================================
+## ===================================
-# COMMENT ENDPOINTS (placeholder)
+# COMMENT ENDPOINTS
 # ===================================
 
-@router.get("/{ticket_id}/comments")
+class CommentCreate(BaseModel):
+    content: str
+    is_internal: bool = False
+
+class CommentResponse(BaseModel):
+    id: str
+    ticket_id: str
+    author_id: str
+    author_name: str
+    content: str
+    is_internal: bool
+    created_at: datetime
+    updated_at: datetime
+    
+    class Config:
+        from_attributes = True
+
+
+@router.get("/{ticket_id}/comments", response_model=List[CommentResponse])
 async def get_ticket_comments(
     ticket_id: str,
     db: AsyncSession = Depends(get_db),
@@ -401,23 +426,151 @@ async def get_ticket_comments(
     """
     Obtener comentarios de un ticket
     """
-    return []
+    try:
+        ticket_uuid = uuid.UUID(ticket_id)
+    except ValueError:
+        raise HTTPException(
+            status_code=status.HTTP_400_BAD_REQUEST,
+            detail="Invalid ticket ID format"
+        )
+    
+    # Verificar que el ticket existe y el usuario tiene acceso
+    ticket_query = select(Ticket).where(
+        Ticket.id == ticket_uuid,
+        Ticket.tenant_id == current_user.tenant_id
+    )
+    ticket_result = await db.execute(ticket_query)
+    ticket = ticket_result.scalars().first()
+    
+    if not ticket:
+        raise HTTPException(
+            status_code=status.HTTP_404_NOT_FOUND,
+            detail=f"Ticket {ticket_id} not found"
+        )
+    
+    # Obtener comentarios
+    comments_query = select(TicketComment, User).join(
+        User, TicketComment.author_id == User.id
+    ).where(
+        TicketComment.ticket_id == ticket_uuid
+    ).order_by(TicketComment.created_at.asc())
+    
+    result = await db.execute(comments_query)
+    comments_with_users = result.all()
+    
+    # Formatear respuesta
+    return [
+        {
+            "id": str(comment.id),
+            "ticket_id": str(comment.ticket_id),
+            "author_id": str(comment.author_id),
+            "author_name": f"{user.first_name} {user.last_name}",
+            "content": comment.content,
+            "is_internal": comment.is_internal,
+            "created_at": comment.created_at,
+            "updated_at": comment.updated_at
+        }
+        for comment, user in comments_with_users
+    ]
 
 
-@router.post("/{ticket_id}/comments", status_code=status.HTTP_201_CREATED)
+@router.post("/{ticket_id}/comments", response_model=CommentResponse, status_code=status.HTTP_201_CREATED)
 async def create_comment(
     ticket_id: str,
+    comment: CommentCreate,
     db: AsyncSession = Depends(get_db),
     current_user: User = Depends(get_current_user)
 ):
     """
     Agregar un comentario a un ticket
     """
-    raise HTTPException(
+    try:
-        status_code=status.HTTP_501_NOT_IMPLEMENTED,
+        ticket_uuid = uuid.UUID(ticket_id)
-        detail="Comments not yet implemented"
+    except ValueError:
+        raise HTTPException(
+            status_code=status.HTTP_400_BAD_REQUEST,
+            detail="Invalid ticket ID format"
+        )
+    
+    # Verificar que el ticket existe y el usuario tiene acceso
+    ticket_query = select(Ticket).where(
+        Ticket.id == ticket_uuid,
+        Ticket.tenant_id == current_user.tenant_id
     )
-
+    ticket_result = await db.execute(ticket_query)
+    ticket_obj = ticket_result.scalars().first()
+    
+    if not ticket_obj:
+        raise HTTPException(
+            status_code=status.HTTP_404_NOT_FOUND,
+            detail=f"Ticket {ticket_id} not found"
+        )
+    
+    # Crear comentario
+    new_comment = TicketComment(
+        id=uuid.uuid4(),
+        ticket_id=ticket_uuid,
+        author_id=current_user.id,
+        content=comment.content,
+        is_internal=comment.is_internal,
+        created_at=datetime.utcnow(),
+        updated_at=datetime.utcnow()
+    )
+    
+    db.add(new_comment)
+    
+    # Actualizar el ticket updated_at
+    ticket_obj.updated_at = datetime.utcnow()
+    
+    await db.commit()
+    await db.refresh(new_comment)
+    
+    # Retornar con el nombre del autor
+    return {
+        "id": str(new_comment.id),
+        "ticket_id": str(new_comment.ticket_id),
+        "author_id": str(new_comment.author_id),
+        "author_name": f"{current_user.first_name} {current_user.last_name}",
+        "content": new_comment.content,
+        "is_internal": new_comment.is_internal,
+        "created_at": new_comment.created_at,
+        "updated_at": new_comment.updated_at
+    }
+@router.delete("/{ticket_id}", status_code=status.HTTP_204_NO_CONTENT)
+async def delete_ticket(
+    ticket_id: str,
+    db: AsyncSession = Depends(get_db),
+    current_user: User = Depends(get_current_user)
+):
+    """
+    Eliminar un ticket (solo admin/manager)
+    """
+    try:
+        ticket_uuid = uuid.UUID(ticket_id)
+    except ValueError:
+        raise HTTPException(
+            status_code=status.HTTP_400_BAD_REQUEST,
+            detail="Invalid ticket ID format"
+        )
+    
+    query = select(Ticket).where(
+        Ticket.id == ticket_uuid,
+        Ticket.tenant_id == current_user.tenant_id
+    )
+    
+    result = await db.execute(query)
+    db_ticket = result.scalars().first()
+    
+    if not db_ticket:
+        raise HTTPException(
+            status_code=status.HTTP_404_NOT_FOUND,
+            detail=f"Ticket {ticket_id} not found"
+        )
+    
+    await db.delete(db_ticket)
+    await db.commit()
+    
+    return {"message": "Ticket deleted successfully"}
 
 # ===================================
 # ATTACHMENT ENDPOINTS (placeholder)

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

@@ -0,0 +1,451 @@
+"""
+Tickets endpoints - ServiceManagerWeb
+"""
+
+from fastapi import APIRouter, Depends, HTTPException, status, UploadFile, File
+from pydantic import BaseModel
+from sqlalchemy.ext.asyncio import AsyncSession
+from sqlalchemy import select, func
+from typing import List, Optional
+from datetime import datetime
+from app.core.database import get_db
+from app.api.deps import get_current_user
+from app.models.ticket import Ticket, TicketStatus, TicketPriority
+from app.models.user import User
+from app.models.category import Category  # ✅ CORREGIDO: Era TicketCategory
+from app.models.system import System
+import uuid
+
+router = APIRouter()
+
+# ===================================
+# SCHEMAS
+# ===================================
+
+class TicketCreate(BaseModel):
+    subject: str
+    description: str
+    category_id: Optional[str] = None
+    affected_system_id: Optional[str] = None  # ✅ CORREGIDO: Era system_id
+    priority: str = "MEDIUM"
+
+class TicketUpdate(BaseModel):
+    subject: Optional[str] = None
+    description: Optional[str] = None
+    status: Optional[str] = None
+    priority: Optional[str] = None
+    assigned_to: Optional[str] = None
+
+class TicketResponse(BaseModel):
+    id: str
+    ticket_number: str
+    subject: str
+    description: str
+    status: str
+    priority: str
+    category_id: Optional[str] = None
+    affected_system_id: Optional[str] = None  # ✅ CORREGIDO: Era system_id
+    created_by: str
+    assigned_to: Optional[str] = None
+    created_at: datetime
+    updated_at: datetime
+    
+    class Config:
+        from_attributes = True
+
+class TicketCloseRequest(BaseModel):
+    resolution: Optional[str] = None
+
+
+# ===================================
+# TICKET ENDPOINTS
+# ===================================
+
+@router.post("/", response_model=TicketResponse, status_code=status.HTTP_201_CREATED)
+async def create_ticket(
+    ticket: TicketCreate,
+    db: AsyncSession = Depends(get_db),
+    current_user: User = Depends(get_current_user)
+):
+    """
+    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."
+                )
+
+        # 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."
+                )
+        
+        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,
+            "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)}"
+        )
+
+
+@router.get("/", response_model=List[TicketResponse])
+async def get_tickets(
+    skip: int = 0,
+    limit: int = 100,
+    status_filter: Optional[str] = None,
+    db: AsyncSession = Depends(get_db),
+    current_user: User = Depends(get_current_user)
+):
+    """
+    Obtener tickets del usuario actual
+    """
+    query = select(Ticket).where(
+        Ticket.tenant_id == current_user.tenant_id,
+        Ticket.created_by == current_user.id
+    )
+    
+    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,
+            "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,
+    db: AsyncSession = Depends(get_db),
+    current_user: User = Depends(get_current_user)
+):
+    """
+    Obtener un ticket específico
+    """
+    try:
+        ticket_uuid = uuid.UUID(ticket_id)
+    except ValueError:
+        raise HTTPException(
+            status_code=status.HTTP_400_BAD_REQUEST,
+            detail="Invalid ticket ID format"
+        )
+    
+    query = select(Ticket).where(
+        Ticket.id == ticket_uuid,
+        Ticket.tenant_id == current_user.tenant_id,
+        Ticket.created_by == current_user.id
+    )
+    
+    result = await db.execute(query)
+    ticket = result.scalars().first()
+    
+    if not ticket:
+        raise HTTPException(
+            status_code=status.HTTP_404_NOT_FOUND,
+            detail=f"Ticket {ticket_id} not found"
+        )
+    
+    # ✅ CORREGIDO: Usar affected_system_id
+    return {
+        "id": str(ticket.id),
+        "ticket_number": ticket.ticket_number,
+        "subject": ticket.subject,
+        "description": ticket.description,
+        "status": ticket.status.value,
+        "priority": ticket.priority.value,
+        "category_id": str(ticket.category_id) if ticket.category_id else None,
+        "affected_system_id": str(ticket.affected_system_id) if ticket.affected_system_id else None,  # ✅ CORREGIDO
+        "created_by": str(ticket.created_by),
+        "assigned_to": str(ticket.assigned_to) if ticket.assigned_to else None,
+        "created_at": ticket.created_at,
+        "updated_at": ticket.updated_at
+    }
+
+
+@router.patch("/{ticket_id}", response_model=TicketResponse)
+async def update_ticket(
+    ticket_id: str,
+    ticket_update: TicketUpdate,
+    db: AsyncSession = Depends(get_db),
+    current_user: User = Depends(get_current_user)
+):
+    """
+    Actualizar un ticket
+    """
+    try:
+        ticket_uuid = uuid.UUID(ticket_id)
+    except ValueError:
+        raise HTTPException(
+            status_code=status.HTTP_400_BAD_REQUEST,
+            detail="Invalid ticket ID format"
+        )
+    
+    query = select(Ticket).where(
+        Ticket.id == ticket_uuid,
+        Ticket.tenant_id == current_user.tenant_id,
+        Ticket.created_by == current_user.id
+    )
+    
+    result = await db.execute(query)
+    db_ticket = result.scalars().first()
+    
+    if not db_ticket:
+        raise HTTPException(
+            status_code=status.HTTP_404_NOT_FOUND,
+            detail=f"Ticket {ticket_id} not found"
+        )
+    
+    try:
+        update_data = ticket_update.dict(exclude_unset=True)
+        
+        for field, value in update_data.items():
+            if field == "status" and value:
+                setattr(db_ticket, field, TicketStatus[value.upper()])
+            elif field == "priority" and value:
+                setattr(db_ticket, field, TicketPriority[value.upper()])
+            elif field == "assigned_to" and value:
+                setattr(db_ticket, field, uuid.UUID(value))
+            else:
+                setattr(db_ticket, field, value)
+        
+        db_ticket.updated_at = datetime.utcnow()
+        
+        await db.commit()
+        await db.refresh(db_ticket)
+        
+        # ✅ CORREGIDO: Usar affected_system_id
+        return {
+            "id": str(db_ticket.id),
+            "ticket_number": db_ticket.ticket_number,
+            "subject": 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 Exception as e:
+        await db.rollback()
+        raise HTTPException(
+            status_code=status.HTTP_400_BAD_REQUEST,
+            detail=f"Error updating ticket: {str(e)}"
+        )
+
+
+@router.patch("/{ticket_id}/close", response_model=TicketResponse)
+async def close_ticket(
+    ticket_id: str,
+    close_request: TicketCloseRequest,
+    db: AsyncSession = Depends(get_db),
+    current_user: User = Depends(get_current_user)
+):
+    """
+    Cerrar un ticket
+    """
+    try:
+        ticket_uuid = uuid.UUID(ticket_id)
+    except ValueError:
+        raise HTTPException(
+            status_code=status.HTTP_400_BAD_REQUEST,
+            detail="Invalid ticket ID format"
+        )
+    
+    query = select(Ticket).where(
+        Ticket.id == ticket_uuid,
+        Ticket.tenant_id == current_user.tenant_id,
+        Ticket.created_by == current_user.id
+    )
+    
+    result = await db.execute(query)
+    db_ticket = result.scalars().first()
+    
+    if not db_ticket:
+        raise HTTPException(
+            status_code=status.HTTP_404_NOT_FOUND,
+            detail=f"Ticket {ticket_id} not found"
+        )
+    
+    try:
+        db_ticket.status = TicketStatus.CLOSED
+        db_ticket.updated_at = datetime.utcnow()
+        
+        await db.commit()
+        await db.refresh(db_ticket)
+        
+        # ✅ CORREGIDO: Usar affected_system_id
+        return {
+            "id": str(db_ticket.id),
+            "ticket_number": db_ticket.ticket_number,
+            "subject": 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 Exception as e:
+        await db.rollback()
+        raise HTTPException(
+            status_code=status.HTTP_400_BAD_REQUEST,
+            detail=f"Error closing ticket: {str(e)}"
+        )
+
+
+# ===================================
+# COMMENT ENDPOINTS (placeholder)
+# ===================================
+
+@router.get("/{ticket_id}/comments")
+async def get_ticket_comments(
+    ticket_id: str,
+    db: AsyncSession = Depends(get_db),
+    current_user: User = Depends(get_current_user)
+):
+    """
+    Obtener comentarios de un ticket
+    """
+    return []
+
+
+@router.post("/{ticket_id}/comments", status_code=status.HTTP_201_CREATED)
+async def create_comment(
+    ticket_id: str,
+    db: AsyncSession = Depends(get_db),
+    current_user: User = Depends(get_current_user)
+):
+    """
+    Agregar un comentario a un ticket
+    """
+    raise HTTPException(
+        status_code=status.HTTP_501_NOT_IMPLEMENTED,
+        detail="Comments not yet implemented"
+    )
+
+
+# ===================================
+# ATTACHMENT ENDPOINTS (placeholder)
+# ===================================
+
+@router.get("/{ticket_id}/attachments")
+async def get_ticket_attachments(
+    ticket_id: str,
+    db: AsyncSession = Depends(get_db),
+    current_user: User = Depends(get_current_user)
+):
+    """
+    Obtener adjuntos de un ticket
+    """
+    return []
+
+
+@router.post("/{ticket_id}/attachments", status_code=status.HTTP_201_CREATED)
+async def upload_attachment(
+    ticket_id: str,
+    file: UploadFile = File(...),
+    db: AsyncSession = Depends(get_db),
+    current_user: User = Depends(get_current_user)
+):
+    """
+    Subir un archivo adjunto a un ticket
+    """
+    raise HTTPException(
+        status_code=status.HTTP_501_NOT_IMPLEMENTED,
+        detail="File uploads not yet implemented"
+    )

backend/app/main.py

@@ -21,6 +21,7 @@ from app.models.system import System
 from app.models.category import Category
 from app.models.user import User
 from app.models.ticket import Ticket
+from app.models.comment import TicketComment
 
 from app.core.logging import setup_logging
 from app.api.v1.router import api_router
@@ -198,4 +199,4 @@ if __name__ == "__main__":
         host="0.0.0.0",
         port=8000,
         reload=settings.ENVIRONMENT == "development"
-    )
+    )

backend/app/models/comment.py

@@ -0,0 +1,69 @@
+"""
+Comment Model - ServiceManagerWeb
+
+Modelo para comentarios en tickets
+"""
+
+from sqlalchemy import Column, String, Text, Boolean, ForeignKey, DateTime
+from sqlalchemy.dialects.postgresql import UUID
+from sqlalchemy.orm import Mapped, mapped_column, relationship
+from datetime import datetime
+import uuid
+
+from app.core.database import Base
+
+
+class TicketComment(Base):
+    """Comentarios en tickets."""
+    
+    __tablename__ = "ticket_comments"
+    
+    # Columnas
+    id: Mapped[uuid.UUID] = mapped_column(
+        UUID(as_uuid=True),
+        primary_key=True,
+        default=uuid.uuid4
+    )
+    
+    ticket_id: Mapped[uuid.UUID] = mapped_column(
+        UUID(as_uuid=True),
+        ForeignKey("tickets.id", ondelete="CASCADE"),
+        nullable=False,
+        index=True
+    )
+    
+    author_id: Mapped[uuid.UUID] = mapped_column(
+        UUID(as_uuid=True),
+        ForeignKey("users.id"),
+        nullable=False,
+        index=True
+    )
+    
+    content: Mapped[str] = mapped_column(Text, nullable=False)
+    
+    is_internal: Mapped[bool] = mapped_column(
+        Boolean,
+        default=False,
+        nullable=False
+    )
+    
+    created_at: Mapped[datetime] = mapped_column(
+        DateTime(timezone=True),
+        default=datetime.utcnow,
+        nullable=False,
+        index=True
+    )
+    
+    updated_at: Mapped[datetime] = mapped_column(
+        DateTime(timezone=True),
+        default=datetime.utcnow,
+        onupdate=datetime.utcnow,
+        nullable=False
+    )
+    
+    # Relationships
+    ticket: Mapped["Ticket"] = relationship("Ticket", back_populates="comments")
+    author: Mapped["User"] = relationship("User")
+    
+    def __repr__(self) -> str:
+        return f"<TicketComment {self.id} by {self.author_id}>"

backend/app/models/ticket.py

@@ -119,6 +119,12 @@ class Ticket(Base):
         foreign_keys=[assigned_to], 
         back_populates="assigned_tickets"
     )
+
+    comments: Mapped[list["TicketComment"]] = relationship(
+        "TicketComment",
+        back_populates="ticket",
+        cascade="all, delete-orphan"
+    )
     
     # ✅ AÑADIDOS: Constraints según schema.sql
     __table_args__ = (

backend/app/models/user.py

@@ -48,7 +48,7 @@ class User(Base):
     
     # Autenticación
     password_hash: Mapped[str] = mapped_column(String(255), nullable=False)
-    role: Mapped[UserRole] = mapped_column(ENUM(UserRole), nullable=False)
+    role: Mapped[UserRole] = mapped_column(ENUM(UserRole, name="user_role_enum"), nullable=False)
     
     # 2FA (opcional para staff interno)
     totp_secret: Mapped[Optional[str]] = mapped_column(String(32))
@@ -132,4 +132,4 @@ class User(Base):
     def requires_2fa(self) -> bool:
         """Check if 2FA is required for this user."""
         # 2FA opcional para staff interno, no requerido para clientes
-        return self.is_staff
+        return self.is_staff

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

@@ -23,12 +23,13 @@ export interface Ticket {
 export interface TicketComment {
   id: string;
   ticket_id: string;
-  user_id: string;
+  author_id: string;
-  user_name: string;
+  author_name: string;
-  user_role: string;
+  author_role: string;
   content: string;
   is_internal: boolean;
   created_at: string;
+  updated_at: string;
 }
 
 export interface TicketAttachment {
@@ -160,6 +161,17 @@ function createTicketsStore() {
         }));
       }
     },
+    // Reload only comments silently (for polling)
+    reloadComments: async (ticketId: string) => {
+      try {
+        const comments = await apiCall(`/tickets/${ticketId}/comments`);
+        update((state: TicketsState) => ({ ...state, comments }));
+      } catch (error) {
+        // Silent fail - no mostrar error en polling
+        console.error('Error reloading comments:', error);
+      }
+    },
+
 
     // Create new ticket
     createTicket: async (ticket: CreateTicketRequest) => {

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

@@ -14,7 +14,17 @@
   let closeResolution = '';
   let fileInput: HTMLInputElement;
   let isUploading = false;
+  let pollingInterval: any = null; 
   
+  async function loadComments() {
+  try {
+    await tickets.reloadComments(ticketId);
+  } catch (error) {
+    // No mostrar error en polling silencioso
+    console.error('Error recargando comentarios:', error);
+  }
+}
+
   onMount(() => {
     // Redirect if not authenticated
     if (!$auth.isAuthenticated) {
@@ -25,8 +35,20 @@
     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);
     }
-  });
+  };
+});
   
   // Format date
   function formatDate(dateString: string): string {
@@ -287,16 +309,17 @@
             {:else}
               <div class="space-y-4">
                 {#each $tickets.comments as 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">
                       <span class="text-primary-600 text-xs font-medium">
-                        {comment.user_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">
                       <div class="flex items-center space-x-2 mb-1">
                         <span class="text-sm font-medium text-gray-900">
-                          {comment.user_name}
+                          {comment.author_name}
                         </span>
                         <span class="text-xs text-gray-500">
                           {formatDate(comment.created_at)}

frontend-client/vite.config.js.timestamp-1770307822256-015e5405d86b4.mjs

@@ -0,0 +1,28 @@
+// vite.config.js
+import { sveltekit } from "file:///app/node_modules/@sveltejs/kit/src/exports/vite/index.js";
+import { defineConfig } from "file:///app/node_modules/vite/dist/node/index.js";
+var vite_config_default = defineConfig({
+  plugins: [sveltekit()],
+  server: {
+    port: 3e3,
+    host: "0.0.0.0",
+    proxy: {
+      "/api": {
+        target: "http://servicemanager-backend:8000",
+        changeOrigin: true,
+        rewrite: (path) => path.replace(/^\/api/, "")
+      }
+    }
+  },
+  preview: {
+    port: 3e3,
+    host: "0.0.0.0"
+  },
+  build: {
+    target: "esnext"
+  }
+});
+export {
+  vite_config_default as default
+};
+//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsidml0ZS5jb25maWcuanMiXSwKICAic291cmNlc0NvbnRlbnQiOiBbImNvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9kaXJuYW1lID0gXCIvYXBwXCI7Y29uc3QgX192aXRlX2luamVjdGVkX29yaWdpbmFsX2ZpbGVuYW1lID0gXCIvYXBwL3ZpdGUuY29uZmlnLmpzXCI7Y29uc3QgX192aXRlX2luamVjdGVkX29yaWdpbmFsX2ltcG9ydF9tZXRhX3VybCA9IFwiZmlsZTovLy9hcHAvdml0ZS5jb25maWcuanNcIjtpbXBvcnQgeyBzdmVsdGVraXQgfSBmcm9tICdAc3ZlbHRlanMva2l0L3ZpdGUnO1xyXG5pbXBvcnQgeyBkZWZpbmVDb25maWcgfSBmcm9tICd2aXRlJztcclxuXHJcbmV4cG9ydCBkZWZhdWx0IGRlZmluZUNvbmZpZyh7XHJcblx0cGx1Z2luczogW3N2ZWx0ZWtpdCgpXSxcclxuXHRzZXJ2ZXI6IHtcclxuXHRcdHBvcnQ6IDMwMDAsXHJcblx0XHRob3N0OiAnMC4wLjAuMCcsXHJcblx0XHRwcm94eToge1xyXG5cdFx0XHQnL2FwaSc6IHtcclxuXHRcdFx0XHR0YXJnZXQ6ICdodHRwOi8vc2VydmljZW1hbmFnZXItYmFja2VuZDo4MDAwJyxcclxuXHRcdFx0XHRjaGFuZ2VPcmlnaW46IHRydWUsXHJcblx0XHRcdFx0cmV3cml0ZTogKHBhdGgpID0+IHBhdGgucmVwbGFjZSgvXlxcL2FwaS8sICcnKVxyXG5cdFx0XHR9XHJcblx0XHR9XHJcblx0fSxcclxuXHRwcmV2aWV3OiB7XHJcblx0XHRwb3J0OiAzMDAwLFxyXG5cdFx0aG9zdDogJzAuMC4wLjAnXHJcblx0fSxcclxuXHRidWlsZDoge1xyXG5cdFx0dGFyZ2V0OiAnZXNuZXh0J1xyXG5cdH1cclxufSk7Il0sCiAgIm1hcHBpbmdzIjogIjtBQUE4TCxTQUFTLGlCQUFpQjtBQUN4TixTQUFTLG9CQUFvQjtBQUU3QixJQUFPLHNCQUFRLGFBQWE7QUFBQSxFQUMzQixTQUFTLENBQUMsVUFBVSxDQUFDO0FBQUEsRUFDckIsUUFBUTtBQUFBLElBQ1AsTUFBTTtBQUFBLElBQ04sTUFBTTtBQUFBLElBQ04sT0FBTztBQUFBLE1BQ04sUUFBUTtBQUFBLFFBQ1AsUUFBUTtBQUFBLFFBQ1IsY0FBYztBQUFBLFFBQ2QsU0FBUyxDQUFDLFNBQVMsS0FBSyxRQUFRLFVBQVUsRUFBRTtBQUFBLE1BQzdDO0FBQUEsSUFDRDtBQUFBLEVBQ0Q7QUFBQSxFQUNBLFNBQVM7QUFBQSxJQUNSLE1BQU07QUFBQSxJQUNOLE1BQU07QUFBQSxFQUNQO0FBQUEsRUFDQSxPQUFPO0FBQUEsSUFDTixRQUFRO0FBQUEsRUFDVDtBQUNELENBQUM7IiwKICAibmFtZXMiOiBbXQp9Cg==

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

@@ -0,0 +1,561 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import { goto } from '$app/navigation';
+  import { api } from '$lib/utils/api';
+  import { toast } from '$lib/stores/toast';
+  import Modal from '$lib/components/Modal.svelte';
+
+  let tickets = [];
+  let categories = [];
+  let systems = [];
+  let users = [];
+  let isLoading = false;
+  let showModal = false;
+  let showEditModal = false;
+  let showDeleteModal = false;
+  let selectedTicket = null;
+
+  // Filtros
+  let filterStatus = '';
+  let filterPriority = '';
+  
+  // Form para editar
+  let editFormData = {
+    status: '',
+    priority: '',
+    assigned_to: ''
+  };
+
+  let formData = {
+    subject: '',
+    description: '',
+    category_id: '',
+    affected_system_id: '',
+    priority: 'MEDIUM'
+  };
+
+  const STATUSES = [
+    { value: 'NEW', label: 'Nuevo', color: 'blue' },
+    { value: 'IN_PROGRESS', label: 'En Progreso', color: 'indigo' },
+    { value: 'WAITING_CUSTOMER', label: 'Esperando Cliente', color: 'orange' },
+    { value: 'RESOLVED', label: 'Resuelto', color: 'green' },
+    { value: 'CLOSED', label: 'Cerrado', color: 'gray' },
+    { value: 'REOPENED', label: 'Reabierto', color: 'red' }
+  ];
+
+  const PRIORITIES = [
+    { value: 'LOW', label: 'Baja', color: 'gray' },
+    { value: 'MEDIUM', label: 'Media', color: 'blue' },
+    { value: 'HIGH', label: 'Alta', color: 'orange' },
+    { value: 'URGENT', label: 'Urgente', color: 'red' }
+  ];
+
+  // Ajustar la función loadData para asegurar que los filtros se envíen correctamente
+  async function loadData() {
+    isLoading = true;
+    try {
+      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/')
+      ]);
+      tickets = ticketsData;
+      categories = categoriesData;
+      systems = systemsData;
+      users = usersData;
+    } catch (e) {
+      toast.error('Error cargando datos: ' + (e.message || 'Error desconocido'));
+    } finally {
+      isLoading = false;
+    }
+  }
+
+  // Asegurar que los filtros se apliquen al cambiar su valor
+  function applyFilters() {
+    loadData();
+  }
+
+  function openCreateModal() {
+    selectedTicket = null;
+    formData = {
+      subject: '',
+      description: '',
+      category_id: '',
+      affected_system_id: '',
+      priority: 'MEDIUM'
+    };
+    showModal = true;
+  }
+
+  function viewTicket(ticket) {
+    // Navegar a la página de detalle del ticket
+    goto(`/tickets/${ticket.id}`);
+  }
+
+  function openEditModal(ticket) {
+    selectedTicket = ticket;
+    editFormData = {
+      status: ticket.status,
+      priority: ticket.priority,
+      assigned_to: ticket.assigned_to || ''
+    };
+    showEditModal = true;
+  }
+
+  function openDeleteModal(ticket) {
+    selectedTicket = ticket;
+    showDeleteModal = true;
+  }
+
+  async function handleDelete() {
+    if (!selectedTicket) return;
+    
+    try {
+      await api.delete(`/tickets/${selectedTicket.id}`);
+      toast.success('Ticket eliminado exitosamente');
+      showDeleteModal = false;
+      selectedTicket = null;
+      loadData();
+    } catch (e) {
+      toast.error(e.message || 'Error eliminando ticket');
+    }
+  }
+
+  async function handleUpdate() {
+    try {
+      const payload = {};
+      
+      if (editFormData.status !== selectedTicket.status) {
+        payload.status = editFormData.status;
+      }
+      if (editFormData.priority !== selectedTicket.priority) {
+        payload.priority = editFormData.priority;
+      }
+      if (editFormData.assigned_to !== selectedTicket.assigned_to) {
+        payload.assigned_to = editFormData.assigned_to || null;
+      }
+
+      if (Object.keys(payload).length === 0) {
+        toast.info('No hay cambios para guardar');
+        showEditModal = false;
+        return;
+      }
+
+      await api.patch(`/tickets/${selectedTicket.id}`, payload);
+      toast.success('Ticket actualizado exitosamente');
+      showEditModal = false;
+      loadData();
+    } catch (e) {
+      toast.error(e.message || 'Error actualizando ticket');
+    }
+  }
+
+  async function handleSubmit() {
+    try {
+      const payload = {
+        subject: formData.subject,
+        description: formData.description,
+        category_id: formData.category_id || null,
+        affected_system_id: formData.affected_system_id || null,
+        priority: formData.priority
+      };
+
+      await api.post('/tickets/', payload);
+      toast.success('Ticket creado exitosamente');
+      showModal = false;
+      loadData();
+    } catch (e) {
+      toast.error(e.message || 'Error creando ticket');
+    }
+  }
+
+  function getStatusBadge(status) {
+    const statusObj = STATUSES.find(s => s.value === status);
+    return statusObj || { label: status, color: 'gray' };
+  }
+
+  function getPriorityBadge(priority) {
+    const priorityObj = PRIORITIES.find(p => p.value === priority);
+    return priorityObj || { label: priority, color: 'gray' };
+  }
+
+  function getCategoryName(id) {
+    if (!id) return '-';
+    const cat = categories.find(c => c.id === id);
+    return cat ? cat.name : '-';
+  }
+
+  function getSystemName(id) {
+    if (!id) return '-';
+    const sys = systems.find(s => s.id === id);
+    return sys ? sys.name : '-';
+  }
+
+  function getUserName(id) {
+    if (!id) return '-';
+    const user = users.find(u => u.id === id);
+    return user ? `${user.first_name} ${user.last_name}` : '-';
+  }
+
+  function formatDate(dateString) {
+    if (!dateString) return '-';
+    const date = new Date(dateString);
+    return date.toLocaleDateString('es-ES', {
+      year: 'numeric',
+      month: 'short',
+      day: 'numeric',
+      hour: '2-digit',
+      minute: '2-digit'
+    });
+  }
+
+  onMount(loadData);
+</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">
+    <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.</p>
+    </div>
+    <div class="mt-4 sm:mt-0 sm:ml-16 sm:flex-none">
+      <button
+        type="button"
+        on:click={openCreateModal}
+        class="inline-flex items-center justify-center px-4 py-2 text-sm font-medium text-white bg-indigo-600 border border-transparent rounded-md shadow-sm hover:bg-indigo-700 sm:w-auto"
+      >
+        Nuevo Ticket
+      </button>
+    </div>
+  </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>
+      
+      <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>
+
+  <!-- Tabla de Tickets -->
+  <div class="mt-8 flex flex-col">
+    <div class="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
+      <div class="inline-block min-w-full py-2 align-middle md:px-6 lg:px-8">
+        <div class="overflow-hidden shadow ring-1 ring-black ring-opacity-5 md:rounded-lg">
+          <table class="min-w-full divide-y divide-gray-300">
+            <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">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">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">Creado</th>
+                <th scope="col" class="relative py-3.5 pl-3 pr-4 sm:pr-6">
+                  <span class="sr-only">Acciones</span>
+                </th>
+              </tr>
+            </thead>
+            <tbody class="divide-y divide-gray-200 bg-white">
+              {#if isLoading}
+                <tr><td colspan="8" class="text-center py-4">Cargando...</td></tr>
+              {:else if tickets.length === 0}
+                <tr><td colspan="8" class="text-center py-4">No hay tickets registrados</td></tr>
+              {:else}
+                {#each tickets as ticket}
+                  <tr 
+                    class="hover:bg-gray-50 cursor-pointer"
+                    on:click={() => viewTicket(ticket)}
+                  >
+                    <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">{ticket.subject}</div>
+                      <div class="text-gray-500 truncate max-w-xs">{ticket.description}</div>
+                    </td>
+                    <td class="whitespace-nowrap px-3 py-4 text-sm">
+                      <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>
+                    </td>
+                    <td class="whitespace-nowrap px-3 py-4 text-sm">
+                      <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>
+                    </td>
+                    <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)}
+                    </td>
+                    <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
+                      {formatDate(ticket.created_at)}
+                    </td>
+                    <td class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6 space-x-2">
+                      <button 
+                        on:click|stopPropagation={() => openEditModal(ticket)} 
+                        class="text-indigo-600 hover:text-indigo-900"
+                      >
+                        Editar
+                      </button>
+                      <button 
+                        on:click|stopPropagation={() => openDeleteModal(ticket)} 
+                        class="text-red-600 hover:text-red-900"
+                      >
+                        Eliminar
+                      </button>
+                    </td>
+                  </tr>
+                {/each}
+              {/if}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- Modal Crear Ticket -->
+<Modal open={showModal} title="Nuevo Ticket" on:close={() => showModal = false}>
+  <form on:submit|preventDefault={handleSubmit} class="space-y-4">
+    <div>
+      <label for="subject" class="block text-sm font-medium text-gray-700">Asunto *</label>
+      <input
+        type="text"
+        id="subject"
+        bind:value={formData.subject}
+        required
+        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"
+        placeholder="Breve descripción del problema"
+      />
+    </div>
+
+    <div>
+      <label for="description" class="block text-sm font-medium text-gray-700">Descripción *</label>
+      <textarea
+        id="description"
+        bind:value={formData.description}
+        required
+        rows="4"
+        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"
+        placeholder="Describe el problema en detalle..."
+      ></textarea>
+    </div>
+
+    <div class="grid grid-cols-2 gap-4">
+      <div>
+        <label for="category" class="block text-sm font-medium text-gray-700">Categoría</label>
+        <select
+          id="category"
+          bind:value={formData.category_id}
+          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="">-- Seleccionar --</option>
+          {#each categories as category}
+            <option value={category.id}>{category.name}</option>
+          {/each}
+        </select>
+      </div>
+
+      <div>
+        <label for="system" class="block text-sm font-medium text-gray-700">Sistema Afectado</label>
+        <select
+          id="system"
+          bind:value={formData.affected_system_id}
+          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="">-- Seleccionar --</option>
+          {#each systems as system}
+            <option value={system.id}>{system.name}</option>
+          {/each}
+        </select>
+      </div>
+    </div>
+
+    <div>
+      <label for="priority" class="block text-sm font-medium text-gray-700">Prioridad *</label>
+      <select
+        id="priority"
+        bind:value={formData.priority}
+        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"
+      >
+        {#each PRIORITIES as priority}
+          <option value={priority.value}>{priority.label}</option>
+        {/each}
+      </select>
+    </div>
+
+    <div class="mt-5 sm:mt-6 sm:grid sm:grid-cols-2 sm:gap-3 sm:grid-flow-row-dense">
+      <button
+        type="submit"
+        class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-indigo-600 text-base font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:col-start-2 sm:text-sm"
+      >
+        Crear Ticket
+      </button>
+      <button
+        type="button"
+        on:click={() => showModal = false}
+        class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:col-start-1 sm:text-sm"
+      >
+        Cancelar
+      </button>
+    </div>
+  </form>
+</Modal>
+
+<!-- Modal Editar Ticket -->
+<Modal open={showEditModal} title="Editar Ticket #{selectedTicket?.ticket_number || ''}" on:close={() => showEditModal = false}>
+  <form on:submit|preventDefault={handleUpdate} class="space-y-4">
+    <div>
+      <label for="editStatus" class="block text-sm font-medium text-gray-700">Estado</label>
+      <select
+        id="editStatus"
+        bind:value={editFormData.status}
+        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"
+      >
+        {#each STATUSES as status}
+          <option value={status.value}>{status.label}</option>
+        {/each}
+      </select>
+    </div>
+
+    <div>
+      <label for="editPriority" class="block text-sm font-medium text-gray-700">Prioridad</label>
+      <select
+        id="editPriority"
+        bind:value={editFormData.priority}
+        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"
+      >
+        {#each PRIORITIES as priority}
+          <option value={priority.value}>{priority.label}</option>
+        {/each}
+      </select>
+    </div>
+
+    <div>
+      <label for="editAssigned" class="block text-sm font-medium text-gray-700">Asignar a</label>
+      <select
+        id="editAssigned"
+        bind:value={editFormData.assigned_to}
+        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="">-- Sin asignar --</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} ({user.role})</option>
+        {/each}
+      </select>
+    </div>
+
+    <div class="bg-gray-50 p-3 rounded">
+      <p class="text-sm text-gray-600"><strong>Asunto:</strong> {selectedTicket?.subject}</p>
+      <p class="text-sm text-gray-600 mt-1"><strong>Creado por:</strong> {getUserName(selectedTicket?.created_by)}</p>
+    </div>
+
+    <div class="mt-5 sm:mt-6 sm:grid sm:grid-cols-2 sm:gap-3 sm:grid-flow-row-dense">
+      <button
+        type="submit"
+        class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-indigo-600 text-base font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:col-start-2 sm:text-sm"
+      >
+        Guardar Cambios
+      </button>
+      <button
+        type="button"
+        on:click={() => showEditModal = false}
+        class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:col-start-1 sm:text-sm"
+      >
+        Cancelar
+      </button>
+    </div>
+  </form>
+</Modal>
+
+<!-- Modal Eliminar Ticket -->
+<Modal open={showDeleteModal} title="Eliminar Ticket" on:close={() => showDeleteModal = false}>
+  <div class="space-y-4">
+    <div class="bg-red-50 border border-red-200 rounded-md p-4">
+      <div class="flex">
+        <div class="flex-shrink-0">
+          <svg class="h-5 w-5 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 class="ml-3">
+          <h3 class="text-sm font-medium text-red-800">
+            ¿Estás seguro de eliminar este ticket?
+          </h3>
+          <div class="mt-2 text-sm text-red-700">
+            <p>Esta acción no se puede deshacer. Se eliminarán también todos los comentarios y adjuntos asociados.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="bg-gray-50 p-3 rounded">
+      <p class="text-sm text-gray-600"><strong>Ticket:</strong> {selectedTicket?.ticket_number}</p>
+      <p class="text-sm text-gray-600 mt-1"><strong>Asunto:</strong> {selectedTicket?.subject}</p>
+    </div>
+
+    <div class="mt-5 sm:mt-6 sm:grid sm:grid-cols-2 sm:gap-3 sm:grid-flow-row-dense">
+      <button
+        type="button"
+        on:click={handleDelete}
+        class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:col-start-2 sm:text-sm"
+      >
+        Sí, Eliminar
+      </button>
+      <button
+        type="button"
+        on:click={() => showDeleteModal = false}
+        class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:col-start-1 sm:text-sm"
+      >
+        Cancelar
+      </button>
+    </div>
+  </div>
+</Modal>

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

@@ -0,0 +1,300 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import { page } from '$app/stores';
+  import { goto } from '$app/navigation';
+  import { api } from '$lib/utils/api';
+  import { toast } from '$lib/stores/toast';
+
+  let ticketId: string;
+  let ticket = null;
+  let comments = [];
+  let users = [];
+  let isLoading = false;
+  let newComment = '';
+  let isSubmittingComment = false;
+  let pollingInterval: any = null;
+
+  const STATUSES = [
+    { value: 'NEW', label: 'Nuevo', color: 'blue' },
+    { value: 'IN_PROGRESS', label: 'En Progreso', color: 'indigo' },
+    { value: 'WAITING_CUSTOMER', label: 'Esperando Cliente', color: 'orange' },
+    { value: 'RESOLVED', label: 'Resuelto', color: 'green' },
+    { value: 'CLOSED', label: 'Cerrado', color: 'gray' },
+    { value: 'REOPENED', label: 'Reabierto', color: 'red' }
+  ];
+
+  const PRIORITIES = [
+    { value: 'LOW', label: 'Baja', color: 'gray' },
+    { value: 'MEDIUM', label: 'Media', color: 'blue' },
+    { value: 'HIGH', label: 'Alta', color: 'orange' },
+    { value: 'URGENT', label: 'Urgente', color: 'red' }
+  ];
+
+  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);
+  }
+}
+
+  async function loadData() {
+    isLoading = true;
+    try {
+      const [ticketData, commentsData, usersData] = await Promise.all([
+        api.get(`/tickets/${ticketId}`),
+        api.get(`/tickets/${ticketId}/comments`),
+        api.get('/users/')
+      ]);
+      ticket = ticketData;
+      comments = commentsData;
+      users = usersData;
+    } catch (e) {
+      toast.error('Error cargando ticket: ' + (e.message || 'Error desconocido'));
+    } finally {
+      isLoading = false;
+    }
+  }
+
+  async function handleAddComment() {
+    if (!newComment.trim()) return;
+
+    isSubmittingComment = true;
+    try {
+      const comment = await api.post(`/tickets/${ticketId}/comments`, {
+        content: newComment.trim(),
+        is_internal: false
+      });
+      comments = [...comments, comment];
+      newComment = '';
+      toast.success('Comentario agregado');
+    } catch (e) {
+      toast.error(e.message || 'Error al agregar comentario');
+    } finally {
+      isSubmittingComment = false;
+    }
+  }
+
+  function getStatusBadge(status) {
+    const statusObj = STATUSES.find(s => s.value === status);
+    return statusObj || { label: status, color: 'gray' };
+  }
+
+  function getPriorityBadge(priority) {
+    const priorityObj = PRIORITIES.find(p => p.value === priority);
+    return priorityObj || { label: priority, color: 'gray' };
+  }
+
+  function getUserName(id) {
+    if (!id) return 'Desconocido';
+    const user = users.find(u => u.id === id);
+    return user ? `${user.first_name} ${user.last_name}` : 'Desconocido';
+  }
+
+  function formatDate(dateString) {
+    if (!dateString) return '-';
+    const date = new Date(dateString);
+    return date.toLocaleString('es-ES', {
+      day: '2-digit',
+      month: '2-digit',
+      year: 'numeric',
+      hour: '2-digit',
+      minute: '2-digit'
+    });
+  }
+
+  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);
+    }
+  };
+});
+
+</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>
+      <p class="mt-2 text-gray-600">Cargando ticket...</p>
+    </div>
+  {:else if ticket}
+    <!-- Breadcrumb -->
+    <div class="flex items-center space-x-2 text-sm text-gray-500 mb-6">
+      <a href="/tickets" class="hover:text-indigo-600">Tickets</a>
+      <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="M9 5l7 7-7 7" />
+      </svg>
+      <span>#{ticket.ticket_number || ticket.id.substring(0, 8)}</span>
+    </div>
+
+    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
+      <!-- Main Content -->
+      <div class="lg:col-span-2 space-y-6">
+        <!-- Ticket Header -->
+        <div class="bg-white shadow rounded-lg">
+          <div class="px-6 py-5 border-b border-gray-200">
+            <div class="flex justify-between items-start">
+              <div class="flex-1">
+                <h1 class="text-2xl font-bold text-gray-900 mb-2">
+                  {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">
+                    {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">
+                    {getPriorityBadge(ticket.priority).label}
+                  </span>
+                  <span class="text-sm text-gray-500">
+                    Creado {formatDate(ticket.created_at)}
+                  </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"
+              >
+                Volver
+              </button>
+            </div>
+          </div>
+
+          <div class="px-6 py-5">
+            <div class="prose max-w-none">
+              <p class="whitespace-pre-wrap text-gray-700">
+                {ticket.description}
+              </p>
+            </div>
+          </div>
+        </div>
+
+        <!-- Comments Section -->
+        <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">Conversación</h3>
+          </div>
+          <div class="px-6 py-5">
+            {#if comments.length === 0}
+              <p class="text-gray-500 text-center py-4">
+                No hay comentarios aún. ¡Sé el primero en comentar!
+              </p>
+            {:else}
+              <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">
+                      <span class="text-indigo-600 text-xs font-medium">
+                        {comment.author_name ? comment.author_name.split(' ').map(n => n[0]).join('') : '??'}
+                      </span>
+                    </div>
+                    <div class="flex-1 min-w-0">
+                      <div class="flex items-center space-x-2 mb-1">
+                        <span class="text-sm font-medium text-gray-900">
+                          {comment.author_name || 'Usuario Desconocido'}
+                        </span>
+                        <span class="text-xs text-gray-500">
+                          {formatDate(comment.created_at)}
+                        </span>
+                        {#if comment.is_internal}
+                          <span class="bg-red-100 text-red-700 text-xs px-2 py-0.5 rounded">
+                            Interno
+                          </span>
+                        {/if}
+                      </div>
+                      <p class="text-gray-700 whitespace-pre-wrap">
+                        {comment.content}
+                      </p>
+                    </div>
+                  </div>
+                {/each}
+              </div>
+            {/if}
+
+            <!-- Add Comment Form -->
+            <div class="mt-6 pt-6 border-t border-gray-200">
+              <form on:submit|preventDefault={handleAddComment} class="space-y-4">
+                <textarea
+                  rows="4"
+                  class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm border p-2"
+                  placeholder="Escribe tu comentario o respuesta..."
+                  bind:value={newComment}
+                  disabled={isSubmittingComment}
+                ></textarea>
+
+                <div class="flex justify-end">
+                  <button
+                    type="submit"
+                    class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 disabled:opacity-50"
+                    disabled={isSubmittingComment || !newComment.trim()}
+                  >
+                    {#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>
+                        <span>Enviando...</span>
+                      </div>
+                    {:else}
+                      Enviar Comentario
+                    {/if}
+                  </button>
+                </div>
+              </form>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Sidebar -->
+      <div class="space-y-6">
+        <!-- Ticket Info -->
+        <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">Información</h3>
+          </div>
+          <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>
+            </div>
+
+            <div>
+              <dt class="text-sm font-medium text-gray-500">Creado por</dt>
+              <dd class="text-sm text-gray-900">{getUserName(ticket.created_by)}</dd>
+            </div>
+
+            {#if ticket.assigned_to}
+              <div>
+                <dt class="text-sm font-medium text-gray-500">Asignado a</dt>
+                <dd class="text-sm text-gray-900">{getUserName(ticket.assigned_to)}</dd>
+              </div>
+            {/if}
+
+            <div>
+              <dt class="text-sm font-medium text-gray-500">Creado</dt>
+              <dd class="text-sm text-gray-900">{formatDate(ticket.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(ticket.updated_at)}</dd>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  {/if}
+</div>

frontend-internal/vite.config.js.timestamp-1770307822353-871a0b3695b19.mjs

@@ -0,0 +1,28 @@
+// vite.config.js
+import { sveltekit } from "file:///app/node_modules/@sveltejs/kit/src/exports/vite/index.js";
+import { defineConfig } from "file:///app/node_modules/vite/dist/node/index.js";
+var vite_config_default = defineConfig({
+  plugins: [sveltekit()],
+  server: {
+    port: 3e3,
+    host: "0.0.0.0",
+    proxy: {
+      "/api": {
+        target: "http://servicemanager-backend:8000",
+        changeOrigin: true,
+        rewrite: (path) => path.replace(/^\/api/, "")
+      }
+    }
+  },
+  preview: {
+    port: 3e3,
+    host: "0.0.0.0"
+  },
+  build: {
+    target: "esnext"
+  }
+});
+export {
+  vite_config_default as default
+};
+//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsidml0ZS5jb25maWcuanMiXSwKICAic291cmNlc0NvbnRlbnQiOiBbImNvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9kaXJuYW1lID0gXCIvYXBwXCI7Y29uc3QgX192aXRlX2luamVjdGVkX29yaWdpbmFsX2ZpbGVuYW1lID0gXCIvYXBwL3ZpdGUuY29uZmlnLmpzXCI7Y29uc3QgX192aXRlX2luamVjdGVkX29yaWdpbmFsX2ltcG9ydF9tZXRhX3VybCA9IFwiZmlsZTovLy9hcHAvdml0ZS5jb25maWcuanNcIjtcdUZFRkZpbXBvcnQgeyBzdmVsdGVraXQgfSBmcm9tICdAc3ZlbHRlanMva2l0L3ZpdGUnO1xuaW1wb3J0IHsgZGVmaW5lQ29uZmlnIH0gZnJvbSAndml0ZSc7XG5cbmV4cG9ydCBkZWZhdWx0IGRlZmluZUNvbmZpZyh7XG4gICAgICAgIHBsdWdpbnM6IFtzdmVsdGVraXQoKV0sXG4gICAgICAgIHNlcnZlcjoge1xuICAgICAgICAgICAgICAgIHBvcnQ6IDMwMDAsXG4gICAgICAgICAgICAgICAgaG9zdDogJzAuMC4wLjAnLFxuICAgICAgICAgICAgICAgIHByb3h5OiB7XG4gICAgICAgICAgICAgICAgICAgICAgICAnL2FwaSc6IHtcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgdGFyZ2V0OiAnaHR0cDovL3NlcnZpY2VtYW5hZ2VyLWJhY2tlbmQ6ODAwMCcsXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIGNoYW5nZU9yaWdpbjogdHJ1ZSxcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgcmV3cml0ZTogKHBhdGgpID0+IHBhdGgucmVwbGFjZSgvXlxcL2FwaS8sICcnKVxuICAgICAgICAgICAgICAgICAgICAgICAgfVxuICAgICAgICAgICAgICAgIH1cbiAgICAgICAgfSxcbiAgICAgICAgcHJldmlldzoge1xuICAgICAgICAgICAgICAgIHBvcnQ6IDMwMDAsXG4gICAgICAgICAgICAgICAgaG9zdDogJzAuMC4wLjAnXG4gICAgICAgIH0sXG4gICAgICAgIGJ1aWxkOiB7XG4gICAgICAgICAgICAgICAgdGFyZ2V0OiAnZXNuZXh0J1xuICAgICAgICB9XG59KTtcclxuIl0sCiAgIm1hcHBpbmdzIjogIjtBQUErTCxTQUFTLGlCQUFpQjtBQUN6TixTQUFTLG9CQUFvQjtBQUU3QixJQUFPLHNCQUFRLGFBQWE7QUFBQSxFQUNwQixTQUFTLENBQUMsVUFBVSxDQUFDO0FBQUEsRUFDckIsUUFBUTtBQUFBLElBQ0EsTUFBTTtBQUFBLElBQ04sTUFBTTtBQUFBLElBQ04sT0FBTztBQUFBLE1BQ0MsUUFBUTtBQUFBLFFBQ0EsUUFBUTtBQUFBLFFBQ1IsY0FBYztBQUFBLFFBQ2QsU0FBUyxDQUFDLFNBQVMsS0FBSyxRQUFRLFVBQVUsRUFBRTtBQUFBLE1BQ3BEO0FBQUEsSUFDUjtBQUFBLEVBQ1I7QUFBQSxFQUNBLFNBQVM7QUFBQSxJQUNELE1BQU07QUFBQSxJQUNOLE1BQU07QUFBQSxFQUNkO0FBQUEsRUFDQSxPQUFPO0FBQUEsSUFDQyxRQUFRO0FBQUEsRUFDaEI7QUFDUixDQUFDOyIsCiAgIm5hbWVzIjogW10KfQo=