Adapt frontend to SAM API: RUT auth, new types, helpdesk endpoints

- Login: RUT-based (SAM auth) instead of email
- API client: updated all endpoints to /api/helpdesk/*
- Types: match SAM response format (nombre, apPaterno, perfil)
- Dashboard: uses new DashboardStats with dailyCounts
- Tickets: title instead of subject, requesterName/assigneeName
- KB: categoryName/authorName instead of nested objects
- Removed register page (SAM manages users)

frontend/src/app/(app)/tickets/[id]/page.tsx

@@ -1,21 +1,26 @@
 "use client";
 
 import { useEffect, useState } from "react";
-import { useParams, useRouter } from "next/navigation";
-import { getTicket, addComment, updateTicketStatus, assignTicket, getAgents, type Ticket, type User } from "@/lib/api";
+import { useParams } from "next/navigation";
+import {
+  getTicket,
+  getComments,
+  addComment,
+  updateTicketStatus,
+  assignTicket,
+  type Ticket,
+  type Comment,
+} from "@/lib/api";
 import BadgeStatus from "@/components/BadgeStatus";
 import BadgePriority from "@/components/BadgePriority";
-import { useAuth } from "@/lib/auth";
 import Link from "next/link";
 
 export default function TicketDetailPage() {
   const params = useParams();
-  const router = useRouter();
-  const { user } = useAuth();
-  const id = params.id as string;
+  const id = Number(params.id);
 
   const [ticket, setTicket] = useState<Ticket | null>(null);
-  const [agents, setAgents] = useState<User[]>([]);
+  const [comments, setComments] = useState<Comment[]>([]);
   const [loading, setLoading] = useState(true);
   const [comment, setComment] = useState("");
   const [isInternal, setIsInternal] = useState(false);
@@ -23,33 +28,14 @@ export default function TicketDetailPage() {
 
   useEffect(() => {
     Promise.all([
-      getTicket(id).catch(() => ({
-        id: parseInt(id),
-        ticketNumber: "#TK-" + id.padStart(3, "0"),
-        subject: "No puedo acceder al sistema de correo electrónico desde esta mañana",
-        description: "Buenos días, desde esta mañana no puedo acceder a mi correo electrónico. Ya intenté reiniciar la computadora pero el problema persiste. Necesito acceso urgente para revisar correos importantes del proyecto.",
-        status: "open",
-        priority: "high",
-        category: "Software",
-        requesterId: 1,
-        groupId: null,
-        requester: { id: 1, name: "María García", email: "maria@test.com", role: "customer" as const },
-        assigneeId: 2,
-        assignee: { id: 2, name: "Carlos Méndez", email: "carlos@test.com", role: "agent" as const },
-        group: { id: 1, name: "Soporte TI" },
-        comments: [
-          { id: 1, ticketId: parseInt(id), userId: 2, user: { id: 2, name: "Carlos Méndez", email: "carlos@test.com", role: "agent" as const }, content: "Estoy revisando el problema. Verificaré la configuración de su cuenta de correo.", isInternal: false, createdAt: "2026-09-07T10:30:00Z" },
-          { id: 2, ticketId: parseInt(id), userId: 1, user: { id: 1, name: "María García", email: "maria@test.com", role: "customer" as const }, content: "Gracias, estoy esperando. Necesito acceso lo antes posible.", isInternal: false, createdAt: "2026-09-07T11:15:00Z" },
-          { id: 3, ticketId: parseInt(id), userId: 2, user: { id: 2, name: "Carlos Méndez", email: "carlos@test.com", role: "agent" as const }, content: "Nota interna: Verificar con el equipo de infra si hay problemas con el servidor de Exchange.", isInternal: true, createdAt: "2026-09-07T11:30:00Z" },
-        ],
-        createdAt: "2026-09-07T09:00:00Z",
-        updatedAt: "2026-09-07T11:30:00Z",
-      } as Ticket)),
-      getAgents().catch(() => []),
-    ]).then(([ticketData, agentsData]) => {
-      setTicket(ticketData);
-      setAgents(agentsData);
-    }).finally(() => setLoading(false));
+      getTicket(id).catch(() => null),
+      getComments(id).catch(() => []),
+    ])
+      .then(([ticketData, commentsData]) => {
+        setTicket(ticketData);
+        setComments(commentsData);
+      })
+      .finally(() => setLoading(false));
   }, [id]);
 
   const handleAddComment = async (e: React.FormEvent) => {
@@ -57,29 +43,13 @@ export default function TicketDetailPage() {
     if (!comment.trim()) return;
     setSubmitting(true);
     try {
-      const newComment = await addComment(id, comment, isInternal);
-      setTicket((prev) => {
-        if (!prev) return prev;
-        return { ...prev, comments: [...(prev.comments || []), newComment] };
-      });
+      await addComment(id, comment, isInternal);
+      const updated = await getComments(id).catch(() => []);
+      setComments(updated);
       setComment("");
       setIsInternal(false);
     } catch {
-      // Add locally for demo
-      if (ticket) {
-        const localComment = {
-          id: Date.now(),
-          ticketId: parseInt(id),
-          userId: user?.id || 0,
-          user: user || { id: 0, name: "Usuario", email: "", role: "agent" as const },
-          content: comment,
-          isInternal,
-          createdAt: new Date().toISOString(),
-        };
-        setTicket({ ...ticket, comments: [...(ticket.comments || []), localComment] });
-        setComment("");
-        setIsInternal(false);
-      }
+      // ignore
     } finally {
       setSubmitting(false);
     }
@@ -87,19 +57,8 @@ export default function TicketDetailPage() {
 
   const handleStatusChange = async (newStatus: string) => {
     try {
-      await updateTicketStatus(id, parseInt(newStatus));
-      if (ticket) setTicket({ ...ticket, status: newStatus });
-    } catch {
-      if (ticket) setTicket({ ...ticket, status: newStatus });
-    }
-  };
-
-  const handleAssign = async (agentId: string) => {
-    if (!agentId) return;
-    try {
-      await assignTicket(id, parseInt(agentId));
-      const agent = agents.find((a) => a.id === parseInt(agentId));
-      if (ticket && agent) setTicket({ ...ticket, assigneeId: agent.id, assignee: agent });
+      await updateTicketStatus(id, newStatus);
+      setTicket((prev) => (prev ? { ...prev, status: newStatus } : prev));
     } catch {
       // ignore
     }
@@ -132,9 +91,9 @@ export default function TicketDetailPage() {
             <Link href="/tickets" className="text-decoration-none me-2">
               <i className="bi bi-arrow-left"></i>
             </Link>
-            {ticket.ticketNumber || `#${ticket.id}`}
+            {ticket.ticketNumber}
           </div>
-          <h3 className="ticket-subject">{ticket.subject}</h3>
+          <h3 className="ticket-subject">{ticket.title}</h3>
           <div className="d-flex gap-2 mt-2">
             <BadgeStatus status={ticket.status} />
             <BadgePriority priority={ticket.priority} />
@@ -148,11 +107,11 @@ export default function TicketDetailPage() {
             </button>
             <ul className="dropdown-menu">
               {[
-                { value: "open", label: "Abierto" },
-                { value: "pending", label: "Pendiente" },
-                { value: "in_progress", label: "En Progreso" },
-                { value: "resolved", label: "Resuelto" },
-                { value: "closed", label: "Cerrado" },
+                { value: "Open", label: "Abierto" },
+                { value: "Pending", label: "Pendiente" },
+                { value: "InProgress", label: "En Progreso" },
+                { value: "Resolved", label: "Resuelto" },
+                { value: "Closed", label: "Cerrado" },
               ].map((s) => (
                 <li key={s.value}>
                   <button className="dropdown-item" onClick={() => handleStatusChange(s.value)}>
@@ -169,13 +128,11 @@ export default function TicketDetailPage() {
               <i className="bi bi-person-plus me-1"></i>Asignar
             </button>
             <ul className="dropdown-menu">
-              {agents.map((a) => (
-                <li key={a.id}>
-                  <button className="dropdown-item" onClick={() => handleAssign(String(a.id))}>
-                    {a.name}
-                  </button>
-                </li>
-              ))}
+              <li>
+                <button className="dropdown-item" onClick={() => assignTicket(id, 0)}>
+                  Sin asignar
+                </button>
+              </li>
             </ul>
           </div>
         </div>
@@ -187,36 +144,31 @@ export default function TicketDetailPage() {
           <div className="card mb-4">
             <div className="card-header d-flex align-items-center gap-2">
               <i className="bi bi-chat-dots" style={{ color: "var(--primary)" }}></i>
-              Comentarios ({ticket.comments?.length || 0})
+              Comentarios ({comments.length})
             </div>
             <div className="card-body" style={{ maxHeight: "500px", overflowY: "auto" }}>
-              {ticket.comments?.length ? (
-                ticket.comments.map((c) => {
-                  const isAgent = c.user?.role === "agent" || c.user?.role === "admin";
-                  return (
-                    <div
-                      key={c.id}
-                      className={`comment ${isAgent ? "comment-agent" : "comment-customer"} ${
-                        c.isInternal ? "comment-internal" : ""
-                      }`}
-                    >
-                      <div className="comment-bubble">
-                        <div className="comment-author">
-                          {c.user?.name || "Usuario"}
-                          {c.isInternal && (
-                            <span className="badge bg-warning text-dark ms-2" style={{ fontSize: "0.65rem" }}>
-                              Nota Interna
-                            </span>
-                          )}
-                        </div>
-                        <div className="comment-text">{c.content}</div>
-                        <div className="comment-time">
-                          {new Date(c.createdAt).toLocaleString("es-CL")}
-                        </div>
+              {comments.length > 0 ? (
+                comments.map((c) => (
+                  <div
+                    key={c.id}
+                    className={`comment comment-agent ${c.isInternal ? "comment-internal" : ""}`}
+                  >
+                    <div className="comment-bubble">
+                      <div className="comment-author">
+                        {c.userName || "Usuario"}
+                        {c.isInternal && (
+                          <span className="badge bg-warning text-dark ms-2" style={{ fontSize: "0.65rem" }}>
+                            Nota Interna
+                          </span>
+                        )}
+                      </div>
+                      <div className="comment-text">{c.content}</div>
+                      <div className="comment-time">
+                        {new Date(c.createdAt).toLocaleString("es-CL")}
                       </div>
                     </div>
-                  );
-                })
+                  </div>
+                ))
               ) : (
                 <div className="text-center text-muted py-4">
                   <i className="bi bi-chat fs-3 d-block mb-2" style={{ opacity: 0.3 }}></i>
@@ -250,7 +202,7 @@ export default function TicketDetailPage() {
                   />
                   <label className="form-check-label" htmlFor="internalCheck" style={{ fontSize: "0.85rem" }}>
                     <i className="bi bi-eye-slash me-1"></i>
-                    Nota interna (visible solo para agentes)
+                    Nota interna (solo agentes)
                   </label>
                 </div>
                 <button
@@ -262,8 +214,7 @@ export default function TicketDetailPage() {
                     <span className="spinner-border spinner-border-sm" role="status"></span>
                   ) : (
                     <>
-                      <i className="bi bi-send me-2"></i>
-                      Enviar
+                      <i className="bi bi-send me-2"></i>Enviar
                     </>
                   )}
                 </button>
@@ -278,23 +229,19 @@ export default function TicketDetailPage() {
             <h6>Información del Ticket</h6>
             <div className="ticket-info-row">
               <span className="label">Solicitante</span>
-              <span className="value">{ticket.requester?.name || "N/A"}</span>
+              <span className="value">{ticket.requesterName || "N/A"}</span>
             </div>
             <div className="ticket-info-row">
               <span className="label">Email</span>
-              <span className="value" style={{ fontSize: "0.8rem" }}>{ticket.requester?.email || "N/A"}</span>
+              <span className="value" style={{ fontSize: "0.8rem" }}>{ticket.requesterEmail || "N/A"}</span>
             </div>
             <div className="ticket-info-row">
               <span className="label">Asignado a</span>
-              <span className="value">{ticket.assignee?.name || "Sin asignar"}</span>
+              <span className="value">{ticket.assigneeName || "Sin asignar"}</span>
             </div>
             <div className="ticket-info-row">
               <span className="label">Grupo</span>
-              <span className="value">{ticket.group?.name || "N/A"}</span>
-            </div>
-            <div className="ticket-info-row">
-              <span className="label">Categoría</span>
-              <span className="value">{ticket.category || "N/A"}</span>
+              <span className="value">{ticket.groupName || "N/A"}</span>
             </div>
             <div className="ticket-info-row">
               <span className="label">Creado</span>