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)
2026-09-10 11:27:35 -03:00
1 parent 0cca57f21e
commit f56f6365d2
@@ -11,16 +11,7 @@ export default function KnowledgeBasePage() {
  useEffect(() => {
    getKBArticles()
      .then(setArticles)
-      .catch(() => {
-        setArticles([
-          { id: 1, title: "Cómo configurar tu correo en Outlook", content: "Guía paso a paso para configurar...", category: "Correo", publishedAt: "2026-09-01" },
-          { id: 2, title: "Solicitar acceso a una carpeta compartida", content: "Proceso para solicitar acceso...", category: "Acceso", publishedAt: "2026-09-02" },
-          { id: 3, title: "Problemas comunes con la impresora", content: "Soluciones a problemas frecuentes...", category: "Hardware", publishedAt: "2026-09-03" },
-          { id: 4, title: "Instalación de software aprobado", content: "Lista de software aprobado y cómo instalarlo...", category: "Software", publishedAt: "2026-09-04" },
-          { id: 5, title: "Conectar a la VPN corporativa", content: "Instrucciones para conectarse a la VPN...", category: "Red", publishedAt: "2026-09-05" },
-          { id: 6, title: "Resetear tu contraseña", content: "Cómo restablecer tu contraseña del dominio...", category: "Acceso", publishedAt: "2026-09-06" },
-        ]);
-      })
+      .catch(() => setArticles([]))
      .finally(() => setLoading(false));
  }, []);

@@ -31,20 +22,12 @@ export default function KnowledgeBasePage() {
      const results = await searchKB(searchQuery);
      setArticles(results);
    } catch {
-      // Keep existing articles on error
+      // Keep existing
    } finally {
      setLoading(false);
    }
  };

-  const categories = [
-    { name: "Software", icon: "bi-laptop", color: "#0d6efd", count: articles.filter((a) => a.category === "Software").length },
-    { name: "Hardware", icon: "bi-pc-display", color: "#198754", count: articles.filter((a) => a.category === "Hardware").length },
-    { name: "Red", icon: "bi-wifi", color: "#6f42c1", count: articles.filter((a) => a.category === "Red").length },
-    { name: "Acceso", icon: "bi-key", color: "#fd7e14", count: articles.filter((a) => a.category === "Acceso").length },
-    { name: "Correo", icon: "bi-envelope", color: "#dc3545", count: articles.filter((a) => a.category === "Correo").length },
-  ];
-
  return (
    <div>
      <div className="page-header">
@@ -74,28 +57,11 @@ export default function KnowledgeBasePage() {
        </div>
      </div>

-      {/* Categories */}
-      <div className="row g-3 mb-4">
-        {categories.map((cat) => (
-          <div key={cat.name} className="col-6 col-md-4 col-lg">
-            <div className="card h-100 text-center" style={{ cursor: "pointer" }}
-              onClick={() => { setSearchQuery(cat.name); handleSearch(); }}
-            >
-              <div className="card-body py-4">
-                <i className={`bi ${cat.icon} fs-2 mb-2`} style={{ color: cat.color }}></i>
-                <h6 className="mb-1" style={{ fontWeight: 600 }}>{cat.name}</h6>
-                <small className="text-muted">{cat.count} artículos</small>
-              </div>
-            </div>
-          </div>
-        ))}
-      </div>
-
      {/* Articles List */}
      <div className="card">
        <div className="card-header d-flex align-items-center gap-2">
          <i className="bi bi-journal-text" style={{ color: "var(--primary)" }}></i>
-          Artículos Recientes
+          Artículos
        </div>
        <div className="card-body p-0">
          {loading ? (
@@ -125,7 +91,7 @@ export default function KnowledgeBasePage() {
                </div>
                <div className="flex-grow-1">
                  <div className="fw-medium" style={{ fontSize: "0.9rem" }}>{article.title}</div>
-                  <small className="text-muted">{article.category} · {new Date(article.publishedAt).toLocaleDateString("es-CL")}</small>
+                  <small className="text-muted">{article.categoryName || "General"} · {article.authorName || "Autor"}</small>
                </div>
                <i className="bi bi-chevron-right text-muted"></i>
              </div>
@@ -32,20 +32,16 @@ function AppShell({ children }: { children: React.ReactNode }) {

  return (
    <div className="d-flex">
-      {/* Sidebar Overlay for mobile */}
      <div
        className={`sidebar-overlay ${sidebarOpen ? "show" : ""}`}
        onClick={() => setSidebarOpen(false)}
      />

-      {/* Sidebar */}
      <div className={`sidebar ${sidebarOpen ? "show" : ""}`} style={{ zIndex: 1040 }}>
        <Sidebar />
      </div>

-      {/* Main Content */}
      <div className="main-content flex-grow-1">
-        {/* Top Navbar */}
        <header className="top-navbar">
          <button
            className="btn d-lg-none me-3 p-2"
@@ -73,7 +69,6 @@ function AppShell({ children }: { children: React.ReactNode }) {
          </div>
        </header>

-        {/* Page Content */}
        <div className="content-wrapper fade-in">
          {children}
        </div>
@@ -84,18 +79,18 @@ function AppShell({ children }: { children: React.ReactNode }) {

 function TopNavbarUser() {
  const { user } = useAuth();
+  const initials = user?.nombre
+    ?.split(" ")
+    .map((n: string) => n[0])
+    .join("")
+    .toUpperCase()
+    .slice(0, 2) || "U";
+
  return (
    <div className="d-flex align-items-center gap-2">
-      <div className="avatar-circle">
-        {user?.name
-          ?.split(" ")
-          .map((n) => n[0])
-          .join("")
-          .toUpperCase()
-          .slice(0, 2) || "U"}
-      </div>
+      <div className="avatar-circle">{initials}</div>
      <span className="d-none d-md-inline" style={{ fontSize: "0.85rem", fontWeight: 500 }}>
-        {user?.name || "Usuario"}
+        {user?.nombre || "Usuario"}
      </span>
    </div>
  );
@@ -3,7 +3,7 @@
 import { useEffect, useState } from "react";
 import StatsCard from "@/components/StatsCard";
 import BadgeStatus from "@/components/BadgeStatus";
-import { getDashboardStats, type DashboardStats } from "@/lib/api";
+import { getTicketStats, type DashboardStats } from "@/lib/api";
 import Link from "next/link";

 export default function DashboardPage() {
@@ -11,25 +11,18 @@ export default function DashboardPage() {
  const [loading, setLoading] = useState(true);

  useEffect(() => {
-    getDashboardStats()
+    getTicketStats()
      .then(setStats)
      .catch(() => {
-        // Set mock data for demo
        setStats({
-          totalTickets: 128,
-          openTickets: 24,
-          pendingTickets: 18,
-          resolvedTickets: 62,
-          closedTickets: 24,
-          avgResponseTime: "2.4h",
-          ticketsByPriority: { low: 30, medium: 45, high: 38, urgent: 15 },
-          recentTickets: [],
-          agentWorkload: [
-            { agent: "Carlos Méndez", count: 12 },
-            { agent: "Ana García", count: 9 },
-            { agent: "Roberto Díaz", count: 7 },
-            { agent: "María López", count: 5 },
-          ],
+          totalTickets: 0,
+          openTickets: 0,
+          inProgressTickets: 0,
+          resolvedTickets: 0,
+          closedTickets: 0,
+          unassignedTickets: 0,
+          criticalTickets: 0,
+          dailyCounts: [],
        });
      })
      .finally(() => setLoading(false));
@@ -43,8 +36,7 @@ export default function DashboardPage() {
    );
  }

-  const maxPriority = Math.max(...Object.values(stats?.ticketsByPriority || {}), 1);
-  const maxWorkload = Math.max(...(stats?.agentWorkload?.map((a) => a.count) || [1]));
+  const maxDaily = Math.max(...(stats?.dailyCounts?.map((d) => d.count) || [1]));

  return (
    <div>
@@ -65,140 +57,45 @@ export default function DashboardPage() {
          <StatsCard icon="bi-folder2-open" value={stats?.openTickets || 0} label="Abiertos" color="#198754" />
        </div>
        <div className="col-6 col-lg">
-          <StatsCard icon="bi-clock-history" value={stats?.pendingTickets || 0} label="Pendientes" color="#ffc107" />
+          <StatsCard icon="bi-clock-history" value={stats?.inProgressTickets || 0} label="En Progreso" color="#ffc107" />
        </div>
        <div className="col-6 col-lg">
          <StatsCard icon="bi-check-circle" value={stats?.resolvedTickets || 0} label="Resueltos" color="#0d6efd" />
        </div>
        <div className="col-6 col-lg">
-          <StatsCard icon="bi-speedometer" value={stats?.avgResponseTime || "N/A"} label="Tiempo Respuesta" color="#6f42c1" />
+          <StatsCard icon="bi-exclamation-triangle" value={stats?.criticalTickets || 0} label="Críticos" color="#dc3545" />
+        </div>
+        <div className="col-6 col-lg">
+          <StatsCard icon="bi-person-dash" value={stats?.unassignedTickets || 0} label="Sin Asignar" color="#6f42c1" />
        </div>
      </div>

-      <div className="row g-4">
-        {/* Priority Distribution */}
-        <div className="col-lg-6">
-          <div className="card h-100">
-            <div className="card-header d-flex align-items-center gap-2">
-              <i className="bi bi-bar-chart" style={{ color: "var(--primary)" }}></i>
-              Tickets por Prioridad
-            </div>
-            <div className="card-body">
-              {Object.entries(stats?.ticketsByPriority || {}).map(([priority, count]) => {
-                const labels: Record<string, string> = { low: "Baja", medium: "Media", high: "Alta", urgent: "Urgente" };
-                const colors: Record<string, string> = { low: "#6c757d", medium: "#0d6efd", high: "#fd7e14", urgent: "#dc3545" };
-                return (
-                  <div key={priority} className="mb-3">
-                    <div className="d-flex justify-content-between mb-1">
-                      <span style={{ fontSize: "0.85rem", fontWeight: 500 }}>{labels[priority] || priority}</span>
-                      <span className="text-muted" style={{ fontSize: "0.85rem" }}>{count}</span>
-                    </div>
-                    <div className="progress" style={{ height: "8px", borderRadius: "4px" }}>
-                      <div
-                        className="progress-bar"
-                        role="progressbar"
-                        style={{
-                          width: `${(count / maxPriority) * 100}%`,
-                          backgroundColor: colors[priority],
-                          borderRadius: "4px",
-                        }}
-                      ></div>
-                    </div>
-                  </div>
-                );
-              })}
-            </div>
+      {/* Daily Tickets Chart */}
+      {stats?.dailyCounts && stats.dailyCounts.length > 0 && (
+        <div className="card mb-4">
+          <div className="card-header d-flex align-items-center gap-2">
+            <i className="bi bi-graph-up" style={{ color: "var(--primary)" }}></i>
+            Tickets por Día (últimos 30 días)
          </div>
-        </div>
-
-        {/* Agent Workload */}
-        <div className="col-lg-6">
-          <div className="card h-100">
-            <div className="card-header d-flex align-items-center gap-2">
-              <i className="bi bi-people" style={{ color: "var(--primary)" }}></i>
-              Carga de Agentes
-            </div>
-            <div className="card-body">
-              {stats?.agentWorkload?.map((item) => (
-                <div key={item.agent} className="mb-3">
-                  <div className="d-flex justify-content-between mb-1">
-                    <span style={{ fontSize: "0.85rem", fontWeight: 500 }}>{item.agent}</span>
-                    <span className="text-muted" style={{ fontSize: "0.85rem" }}>{item.count} tickets</span>
-                  </div>
-                  <div className="progress" style={{ height: "8px", borderRadius: "4px" }}>
-                    <div
-                      className="progress-bar"
-                      role="progressbar"
-                      style={{
-                        width: `${(item.count / maxWorkload) * 100}%`,
-                        background: "var(--primary-gradient)",
-                        borderRadius: "4px",
-                      }}
-                    ></div>
-                  </div>
-                </div>
+          <div className="card-body">
+            <div className="d-flex align-items-end gap-1" style={{ height: "120px" }}>
+              {stats.dailyCounts.map((d) => (
+                <div
+                  key={d.date}
+                  className="flex-fill rounded"
+                  style={{
+                    height: `${(d.count / maxDaily) * 100}%`,
+                    backgroundColor: "var(--primary)",
+                    opacity: 0.7,
+                    minHeight: "4px",
+                  }}
+                  title={`${d.date}: ${d.count} tickets`}
+                ></div>
              ))}
-
-              {(!stats?.agentWorkload || stats.agentWorkload.length === 0) && (
-                <div className="text-center text-muted py-4">
-                  <i className="bi bi-people fs-1 mb-2 d-block" style={{ opacity: 0.3 }}></i>
-                  Sin datos de agentes disponibles
-                </div>
-              )}
            </div>
          </div>
        </div>
-      </div>
-
-      {/* Recent Tickets */}
-      <div className="card mt-4">
-        <div className="card-header d-flex align-items-center justify-content-between">
-          <div className="d-flex align-items-center gap-2">
-            <i className="bi bi-clock-history" style={{ color: "var(--primary)" }}></i>
-            Tickets Recientes
-          </div>
-          <Link href="/tickets" className="btn btn-sm btn-outline-primary">
-            Ver todos
-          </Link>
-        </div>
-        <div className="table-responsive">
-          <table className="table table-modern mb-0">
-            <thead>
-              <tr>
-                <th>#</th>
-                <th>Asunto</th>
-                <th>Solicitante</th>
-                <th>Estado</th>
-                <th>Prioridad</th>
-                <th>Actualizado</th>
-              </tr>
-            </thead>
-            <tbody>
-              {stats?.recentTickets?.length ? (
-                stats.recentTickets.map((ticket) => (
-                  <tr key={ticket.id} onClick={() => window.location.href = `/tickets/${ticket.id}`}>
-                    <td className="fw-semibold" style={{ color: "var(--primary)" }}>
-                      {ticket.ticketNumber || `#${ticket.id}`}
-                    </td>
-                    <td>{ticket.subject}</td>
-                    <td>{ticket.requester?.name || "N/A"}</td>
-                    <td><BadgeStatus status={ticket.status} /></td>
-                    <td><span className={`badge-priority badge-${ticket.priority}`}>{ticket.priority}</span></td>
-                    <td className="text-muted">{new Date(ticket.updatedAt).toLocaleDateString("es-CL")}</td>
-                  </tr>
-                ))
-              ) : (
-                <tr>
-                  <td colSpan={6} className="text-center text-muted py-4">
-                    <i className="bi bi-inbox fs-3 d-block mb-2" style={{ opacity: 0.3 }}></i>
-                    No hay tickets recientes
-                  </td>
-                </tr>
-              )}
-            </tbody>
-          </table>
-        </div>
-      </div>
+      )}
    </div>
  );
 }
@@ -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>
@@ -1,42 +1,26 @@
 "use client";

-import { useEffect, useState } from "react";
+import { useState } from "react";
 import { useRouter } from "next/navigation";
-import { createTicket, getAgents, type User } from "@/lib/api";
+import { createTicket } from "@/lib/api";
 import Link from "next/link";

 export default function NewTicketPage() {
  const router = useRouter();
-  const [agents, setAgents] = useState<User[]>([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState("");

-  const [subject, setSubject] = useState("");
+  const [title, setTitle] = useState("");
  const [description, setDescription] = useState("");
-  const [priority, setPriority] = useState("medium");
-  const [category, setCategory] = useState("");
-  const [assigneeId, setAssigneeId] = useState("");
-
-  useEffect(() => {
-    getAgents().catch((): User[] => [
-      { id: 2, name: "Carlos Méndez", email: "carlos@test.com", role: "agent" as const },
-      { id: 4, name: "Ana García", email: "ana@test.com", role: "agent" as const },
-    ]).then((data) => setAgents(data));
-  }, []);
+  const [priority, setPriority] = useState("Medium");

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setError("");
    setLoading(true);
    try {
-      const ticket = await createTicket({
-        subject,
-        description,
-        priority,
-        category,
-        assigneeId: assigneeId ? parseInt(assigneeId) : undefined,
-      });
-      router.push(`/tickets/${ticket.id}`);
+      const result = await createTicket({ title, description, priority });
+      router.push(`/tickets/${result.id}`);
    } catch (err: any) {
      setError(err.message || "Error al crear el ticket");
    } finally {
@@ -73,8 +57,8 @@ export default function NewTicketPage() {
                    type="text"
                    className="form-control"
                    placeholder="Describe brevemente el problema o solicitud"
-                    value={subject}
-                    onChange={(e) => setSubject(e.target.value)}
+                    value={title}
+                    onChange={(e) => setTitle(e.target.value)}
                    required
                    autoFocus
                  />
@@ -92,52 +76,19 @@ export default function NewTicketPage() {
                  ></textarea>
                </div>

-                <div className="row g-3 mb-4">
-                  <div className="col-md-4">
-                    <label className="form-label fw-semibold">Prioridad</label>
-                    <select
-                      className="form-select"
-                      value={priority}
-                      onChange={(e) => setPriority(e.target.value)}
-                    >
-                      <option value="low">Baja</option>
-                      <option value="medium">Media</option>
-                      <option value="high">Alta</option>
-                      <option value="urgent">Urgente</option>
-                    </select>
-                  </div>
-
-                  <div className="col-md-4">
-                    <label className="form-label fw-semibold">Categoría</label>
-                    <select
-                      className="form-select"
-                      value={category}
-                      onChange={(e) => setCategory(e.target.value)}
-                      required
-                    >
-                      <option value="">Seleccionar categoría</option>
-                      <option value="Software">Software</option>
-                      <option value="Hardware">Hardware</option>
-                      <option value="Red">Red</option>
-                      <option value="Acceso">Acceso</option>
-                      <option value="Correo">Correo</option>
-                      <option value="Otro">Otro</option>
-                    </select>
-                  </div>
-
-                  <div className="col-md-4">
-                    <label className="form-label fw-semibold">Asignar a</label>
-                    <select
-                      className="form-select"
-                      value={assigneeId}
-                      onChange={(e) => setAssigneeId(e.target.value)}
-                    >
-                      <option value="">Sin asignar</option>
-                      {agents.map((a) => (
-                        <option key={a.id} value={a.id}>{a.name}</option>
-                      ))}
-                    </select>
-                  </div>
+                <div className="mb-4">
+                  <label className="form-label fw-semibold">Prioridad</label>
+                  <select
+                    className="form-select"
+                    style={{ maxWidth: "200px" }}
+                    value={priority}
+                    onChange={(e) => setPriority(e.target.value)}
+                  >
+                    <option value="Low">Baja</option>
+                    <option value="Medium">Media</option>
+                    <option value="High">Alta</option>
+                    <option value="Critical">Crítica</option>
+                  </select>
                </div>

                <div className="d-flex gap-2">
@@ -179,7 +130,6 @@ export default function NewTicketPage() {
                <li>Sé específico en el asunto del ticket</li>
                <li>Incluye pasos para reproducir el problema</li>
                <li>Adjunta capturas de pantalla si es posible</li>
-                <li>Selecciona la categoría correcta para una atención más rápida</li>
                <li>Asigna la prioridad adecuada según el impacto</li>
              </ul>
            </div>
@@ -29,16 +29,11 @@ export default function TicketsPage() {
        page,
        pageSize,
      });
-      setTickets(data.tickets || []);
+      setTickets(data.items || []);
      setTotal(data.total || 0);
    } catch {
-      setTickets([
-        { id: 1, ticketNumber: "#TK-001", subject: "No puedo acceder a mi correo", description: "", status: "open", priority: "high", category: "Software", requesterId: 1, groupId: null, requester: { id: 1, name: "María García", email: "maria@test.com", role: "customer" }, assigneeId: 2, assignee: { id: 2, name: "Carlos Méndez", email: "carlos@test.com", role: "agent" }, createdAt: "2026-09-01", updatedAt: "2026-09-07" },
-        { id: 2, ticketNumber: "#TK-002", subject: "Impresora del piso 3 no funciona", description: "", status: "pending", priority: "medium", category: "Hardware", requesterId: 3, groupId: null, requester: { id: 3, name: "Pedro Soto", email: "pedro@test.com", role: "customer" }, assigneeId: 4, assignee: { id: 4, name: "Ana García", email: "ana@test.com", role: "agent" }, createdAt: "2026-09-05", updatedAt: "2026-09-07" },
-        { id: 3, ticketNumber: "#TK-003", subject: "Solicitud de acceso al sistema contable", description: "", status: "resolved", priority: "low", category: "Acceso", requesterId: 5, groupId: null, requester: { id: 5, name: "Laura Fuentes", email: "laura@test.com", role: "customer" }, assigneeId: null, createdAt: "2026-09-03", updatedAt: "2026-09-06" },
-        { id: 4, ticketNumber: "#TK-004", subject: "Laptop con pantalla parpadeante", description: "", status: "in_progress", priority: "urgent", category: "Hardware", requesterId: 6, groupId: null, requester: { id: 6, name: "Roberto Díaz", email: "roberto@test.com", role: "customer" }, assigneeId: 2, assignee: { id: 2, name: "Carlos Méndez", email: "carlos@test.com", role: "agent" }, createdAt: "2026-09-08", updatedAt: "2026-09-08" },
-      ]);
-      setTotal(4);
+      setTickets([]);
+      setTotal(0);
    } finally {
      setLoading(false);
    }
@@ -74,11 +69,11 @@ export default function TicketsPage() {
          onChange={(e) => { setStatusFilter(e.target.value); setPage(1); }}
        >
          <option value="">Todos los estados</option>
-          <option value="open">Abierto</option>
-          <option value="pending">Pendiente</option>
-          <option value="in_progress">En Progreso</option>
-          <option value="resolved">Resuelto</option>
-          <option value="closed">Cerrado</option>
+          <option value="Open">Abierto</option>
+          <option value="Pending">Pendiente</option>
+          <option value="InProgress">En Progreso</option>
+          <option value="Resolved">Resuelto</option>
+          <option value="Closed">Cerrado</option>
        </select>

        <select
@@ -88,10 +83,10 @@ export default function TicketsPage() {
          onChange={(e) => { setPriorityFilter(e.target.value); setPage(1); }}
        >
          <option value="">Todas las prioridades</option>
-          <option value="low">Baja</option>
-          <option value="medium">Media</option>
-          <option value="high">Alta</option>
-          <option value="urgent">Urgente</option>
+          <option value="Low">Baja</option>
+          <option value="Medium">Media</option>
+          <option value="High">Alta</option>
+          <option value="Critical">Crítica</option>
        </select>

        <div className="position-relative flex-grow-1" style={{ maxWidth: "280px" }}>
@@ -147,13 +142,12 @@ export default function TicketsPage() {
                    {ticket.ticketNumber || `#${ticket.id}`}
                  </td>
                  <td>
-                    <div className="fw-medium">{ticket.subject}</div>
-                    <small className="text-muted">{ticket.category}</small>
+                    <div className="fw-medium">{ticket.title}</div>
                  </td>
-                  <td>{ticket.requester?.name || "N/A"}</td>
+                  <td>{ticket.requesterName || "N/A"}</td>
                  <td><BadgeStatus status={ticket.status} /></td>
                  <td><BadgePriority priority={ticket.priority} /></td>
-                  <td>{ticket.assignee?.name || <span className="text-muted">Sin asignar</span>}</td>
+                  <td>{ticket.assigneeName || <span className="text-muted">Sin asignar</span>}</td>
                  <td className="text-muted" style={{ fontSize: "0.85rem" }}>
                    {new Date(ticket.updatedAt).toLocaleDateString("es-CL")}
                  </td>
@@ -2,11 +2,10 @@

 import { useState } from "react";
 import { useRouter } from "next/navigation";
-import Link from "next/link";
 import { useAuth } from "@/lib/auth";

 export default function LoginPage() {
-  const [email, setEmail] = useState("");
+  const [rut, setRut] = useState("");
  const [password, setPassword] = useState("");
  const [error, setError] = useState("");
  const [loading, setLoading] = useState(false);
@@ -18,7 +17,7 @@ export default function LoginPage() {
    setError("");
    setLoading(true);
    try {
-      await login(email, password);
+      await login(rut, password);
      router.push("/");
    } catch (err: any) {
      setError(err.message || "Credenciales inválidas");
@@ -75,13 +74,13 @@ export default function LoginPage() {

          <form onSubmit={handleSubmit}>
            <div className="mb-3">
-              <label className="form-label">Correo Electrónico</label>
+              <label className="form-label">RUT</label>
              <input
-                type="email"
+                type="text"
                className="form-control"
-                placeholder="tu@email.com"
-                value={email}
-                onChange={(e) => setEmail(e.target.value)}
+                placeholder="12.345.678-9"
+                value={rut}
+                onChange={(e) => setRut(e.target.value)}
                required
                autoFocus
              />
@@ -117,15 +116,6 @@ export default function LoginPage() {
              )}
            </button>
          </form>
-
-          <div className="text-center mt-4">
-            <span className="text-muted" style={{ fontSize: "0.9rem" }}>
-              ¿No tienes cuenta?{" "}
-              <Link href="/register" style={{ color: "var(--primary)", fontWeight: 500 }}>
-                Regístrate aquí
-              </Link>
-            </span>
-          </div>
        </div>
      </div>
    </div>
@@ -1,169 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import { useRouter } from "next/navigation";
-import Link from "next/link";
-import { register as apiRegister } from "@/lib/api";
-import { useAuth } from "@/lib/auth";
-
-export default function RegisterPage() {
-  const [name, setName] = useState("");
-  const [email, setEmail] = useState("");
-  const [password, setPassword] = useState("");
-  const [confirmPassword, setConfirmPassword] = useState("");
-  const [error, setError] = useState("");
-  const [loading, setLoading] = useState(false);
-  const { login } = useAuth();
-  const router = useRouter();
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-    setError("");
-
-    if (password !== confirmPassword) {
-      setError("Las contraseñas no coinciden");
-      return;
-    }
-
-    setLoading(true);
-    try {
-      await apiRegister({ name, email, password });
-      await login(email, password);
-      router.push("/");
-    } catch (err: any) {
-      setError(err.message || "Error al registrar usuario");
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  return (
-    <div className="auth-page d-flex">
-      {/* Left Panel */}
-      <div className="auth-panel-left d-none d-md-flex col-md-5">
-        <div>
-          <i className="bi bi-headset display-1 mb-3"></i>
-          <h2>HelpDesk ICHN</h2>
-          <p>
-            Crea tu cuenta para comenzar a gestionar tickets de soporte técnico
-            y acceder a la base de conocimiento.
-          </p>
-          <div className="mt-4">
-            <div className="d-flex align-items-center gap-2 mb-3">
-              <i className="bi bi-check-circle-fill"></i>
-              <span>Acceso completo al sistema</span>
-            </div>
-            <div className="d-flex align-items-center gap-2 mb-3">
-              <i className="bi bi-check-circle-fill"></i>
-              <span>Crear y responder tickets</span>
-            </div>
-            <div className="d-flex align-items-center gap-2 mb-3">
-              <i className="bi bi-check-circle-fill"></i>
-              <span>Buscar en la base de conocimiento</span>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      {/* Right Panel - Form */}
-      <div className="auth-panel-right col-md-7 col-12">
-        <div className="auth-form">
-          <div className="d-md-none text-center mb-4">
-            <i className="bi bi-headset display-4" style={{ color: "var(--primary)" }}></i>
-            <h4 className="mt-2" style={{ color: "var(--primary)" }}>HelpDesk ICHN</h4>
-          </div>
-
-          <h3>Crear Cuenta</h3>
-          <p className="subtitle">Regístrate para acceder al sistema de soporte</p>
-
-          {error && (
-            <div className="alert alert-danger py-2" role="alert">
-              <i className="bi bi-exclamation-circle me-2"></i>
-              {error}
-            </div>
-          )}
-
-          <form onSubmit={handleSubmit}>
-            <div className="mb-3">
-              <label className="form-label">Nombre Completo</label>
-              <input
-                type="text"
-                className="form-control"
-                placeholder="Juan Pérez"
-                value={name}
-                onChange={(e) => setName(e.target.value)}
-                required
-                autoFocus
-              />
-            </div>
-
-            <div className="mb-3">
-              <label className="form-label">Correo Electrónico</label>
-              <input
-                type="email"
-                className="form-control"
-                placeholder="tu@email.com"
-                value={email}
-                onChange={(e) => setEmail(e.target.value)}
-                required
-              />
-            </div>
-
-            <div className="mb-3">
-              <label className="form-label">Contraseña</label>
-              <input
-                type="password"
-                className="form-control"
-                placeholder="••••••••"
-                value={password}
-                onChange={(e) => setPassword(e.target.value)}
-                required
-                minLength={6}
-              />
-            </div>
-
-            <div className="mb-4">
-              <label className="form-label">Confirmar Contraseña</label>
-              <input
-                type="password"
-                className="form-control"
-                placeholder="••••••••"
-                value={confirmPassword}
-                onChange={(e) => setConfirmPassword(e.target.value)}
-                required
-                minLength={6}
-              />
-            </div>
-
-            <button
-              type="submit"
-              className="btn btn-primary w-100 py-2"
-              disabled={loading}
-            >
-              {loading ? (
-                <>
-                  <span className="spinner-border spinner-border-sm me-2" role="status"></span>
-                  Creando cuenta...
-                </>
-              ) : (
-                <>
-                  <i className="bi bi-person-plus me-2"></i>
-                  Crear Cuenta
-                </>
-              )}
-            </button>
-          </form>
-
-          <div className="text-center mt-4">
-            <span className="text-muted" style={{ fontSize: "0.9rem" }}>
-              ¿Ya tienes cuenta?{" "}
-              <Link href="/login" style={{ color: "var(--primary)", fontWeight: 500 }}>
-                Inicia sesión
-              </Link>
-            </span>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}