Initial commit: HelpDesk ICHN - .NET 10 backend + Next.js 16 frontend

2026-09-10 10:20:51 -03:00
commit 359f0caf85
@@ -0,0 +1,138 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { getKBArticles, searchKB, type KBArticle } from "@/lib/api";
+
+export default function KnowledgeBasePage() {
+  const [articles, setArticles] = useState<KBArticle[]>([]);
+  const [searchQuery, setSearchQuery] = useState("");
+  const [loading, setLoading] = useState(true);
+
+  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" },
+        ]);
+      })
+      .finally(() => setLoading(false));
+  }, []);
+
+  const handleSearch = async () => {
+    if (!searchQuery.trim()) return;
+    setLoading(true);
+    try {
+      const results = await searchKB(searchQuery);
+      setArticles(results);
+    } catch {
+      // Keep existing articles on error
+    } 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">
+        <h1>Base de Conocimiento</h1>
+      </div>
+
+      {/* Search */}
+      <div className="card mb-4">
+        <div className="card-body">
+          <div className="input-group">
+            <span className="input-group-text bg-white border-end-0">
+              <i className="bi bi-search text-muted"></i>
+            </span>
+            <input
+              type="text"
+              className="form-control border-start-0"
+              placeholder="Buscar artículos, guías, tutoriales..."
+              style={{ fontSize: "1rem", padding: "0.75rem 1rem" }}
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              onKeyDown={(e) => e.key === "Enter" && handleSearch()}
+            />
+            <button className="btn btn-primary px-4" onClick={handleSearch}>
+              Buscar
+            </button>
+          </div>
+        </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
+        </div>
+        <div className="card-body p-0">
+          {loading ? (
+            <div className="text-center py-4">
+              <div className="spinner-border spinner-border-sm text-primary" role="status"></div>
+            </div>
+          ) : articles.length === 0 ? (
+            <div className="empty-state">
+              <i className="bi bi-journal-x d-block"></i>
+              <h5>No se encontraron artículos</h5>
+              <p className="text-muted mb-0">Intenta con otros términos de búsqueda</p>
+            </div>
+          ) : (
+            articles.map((article) => (
+              <div
+                key={article.id}
+                className="d-flex align-items-center gap-3 p-3 border-bottom"
+                style={{ cursor: "pointer", transition: "background 0.15s" }}
+                onMouseEnter={(e) => (e.currentTarget.style.backgroundColor = "#f8f9fa")}
+                onMouseLeave={(e) => (e.currentTarget.style.backgroundColor = "transparent")}
+              >
+                <div
+                  className="d-flex align-items-center justify-content-center"
+                  style={{ width: 44, height: 44, borderRadius: 10, backgroundColor: "#00285d10", color: "var(--primary)", fontSize: "1.1rem" }}
+                >
+                  <i className="bi bi-journal-text"></i>
+                </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>
+                </div>
+                <i className="bi bi-chevron-right text-muted"></i>
+              </div>
+            ))
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
@@ -0,0 +1,110 @@
+"use client";
+
+import { useState } from "react";
+import { AuthProvider, useAuth } from "@/lib/auth";
+import Sidebar from "@/components/Sidebar";
+import { useRouter } from "next/navigation";
+import { useEffect } from "react";
+
+function AppShell({ children }: { children: React.ReactNode }) {
+  const { isAuthenticated, isLoading } = useAuth();
+  const router = useRouter();
+  const [sidebarOpen, setSidebarOpen] = useState(false);
+
+  useEffect(() => {
+    if (!isLoading && !isAuthenticated) {
+      router.push("/login");
+    }
+  }, [isLoading, isAuthenticated, router]);
+
+  if (isLoading) {
+    return (
+      <div className="d-flex align-items-center justify-content-center" style={{ minHeight: "100vh" }}>
+        <div className="text-center">
+          <div className="spinner-border text-primary" role="status" style={{ width: "3rem", height: "3rem" }}></div>
+          <p className="mt-3 text-muted">Cargando...</p>
+        </div>
+      </div>
+    );
+  }
+
+  if (!isAuthenticated) return null;
+
+  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"
+            onClick={() => setSidebarOpen(!sidebarOpen)}
+          >
+            <i className="bi bi-list fs-4"></i>
+          </button>
+
+          <div className="position-relative flex-grow-1" style={{ maxWidth: "400px" }}>
+            <i className="bi bi-search position-absolute" style={{ left: "12px", top: "50%", transform: "translateY(-50%)", color: "#6c757d" }}></i>
+            <input
+              type="text"
+              className="form-control search-input"
+              placeholder="Buscar tickets, usuarios..."
+            />
+          </div>
+
+          <div className="d-flex align-items-center gap-3 ms-auto">
+            <button className="notification-btn">
+              <i className="bi bi-bell"></i>
+              <span className="notification-badge">3</span>
+            </button>
+
+            <TopNavbarUser />
+          </div>
+        </header>
+
+        {/* Page Content */}
+        <div className="content-wrapper fade-in">
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function TopNavbarUser() {
+  const { user } = useAuth();
+  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>
+      <span className="d-none d-md-inline" style={{ fontSize: "0.85rem", fontWeight: 500 }}>
+        {user?.name || "Usuario"}
+      </span>
+    </div>
+  );
+}
+
+export default function AppLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <AuthProvider>
+      <AppShell>{children}</AppShell>
+    </AuthProvider>
+  );
+}
@@ -0,0 +1,204 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import StatsCard from "@/components/StatsCard";
+import BadgeStatus from "@/components/BadgeStatus";
+import { getDashboardStats, type DashboardStats } from "@/lib/api";
+import Link from "next/link";
+
+export default function DashboardPage() {
+  const [stats, setStats] = useState<DashboardStats | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    getDashboardStats()
+      .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 },
+          ],
+        });
+      })
+      .finally(() => setLoading(false));
+  }, []);
+
+  if (loading) {
+    return (
+      <div className="loading-spinner">
+        <div className="spinner-border text-primary" role="status"></div>
+      </div>
+    );
+  }
+
+  const maxPriority = Math.max(...Object.values(stats?.ticketsByPriority || {}), 1);
+  const maxWorkload = Math.max(...(stats?.agentWorkload?.map((a) => a.count) || [1]));
+
+  return (
+    <div>
+      <div className="page-header">
+        <h1>Dashboard</h1>
+        <Link href="/tickets/new" className="btn btn-primary">
+          <i className="bi bi-plus-lg me-2"></i>
+          Nuevo Ticket
+        </Link>
+      </div>
+
+      {/* Stats Cards */}
+      <div className="row g-3 mb-4">
+        <div className="col-6 col-lg">
+          <StatsCard icon="bi-ticket-detailed" value={stats?.totalTickets || 0} label="Total Tickets" color="#00285d" />
+        </div>
+        <div className="col-6 col-lg">
+          <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" />
+        </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" />
+        </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>
+          </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>
+              ))}
+
+              {(!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>
+  );
+}
@@ -0,0 +1,320 @@
+"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 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 [ticket, setTicket] = useState<Ticket | null>(null);
+  const [agents, setAgents] = useState<User[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [comment, setComment] = useState("");
+  const [isInternal, setIsInternal] = useState(false);
+  const [submitting, setSubmitting] = useState(false);
+
+  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));
+  }, [id]);
+
+  const handleAddComment = async (e: React.FormEvent) => {
+    e.preventDefault();
+    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] };
+      });
+      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);
+      }
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  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 });
+    } catch {
+      // ignore
+    }
+  };
+
+  if (loading) {
+    return (
+      <div className="loading-spinner">
+        <div className="spinner-border text-primary" role="status"></div>
+      </div>
+    );
+  }
+
+  if (!ticket) {
+    return (
+      <div className="empty-state">
+        <i className="bi bi-exclamation-triangle d-block"></i>
+        <h5>Ticket no encontrado</h5>
+        <Link href="/tickets" className="btn btn-primary mt-3">Volver a tickets</Link>
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      {/* Ticket Header */}
+      <div className="ticket-header">
+        <div>
+          <div className="ticket-number mb-1">
+            <Link href="/tickets" className="text-decoration-none me-2">
+              <i className="bi bi-arrow-left"></i>
+            </Link>
+            {ticket.ticketNumber || `#${ticket.id}`}
+          </div>
+          <h3 className="ticket-subject">{ticket.subject}</h3>
+          <div className="d-flex gap-2 mt-2">
+            <BadgeStatus status={ticket.status} />
+            <BadgePriority priority={ticket.priority} />
+          </div>
+        </div>
+        <div className="d-flex gap-2">
+          {/* Status Change */}
+          <div className="dropdown">
+            <button className="btn btn-outline-primary btn-sm dropdown-toggle" data-bs-toggle="dropdown">
+              <i className="bi bi-arrow-repeat me-1"></i>Cambiar Estado
+            </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" },
+              ].map((s) => (
+                <li key={s.value}>
+                  <button className="dropdown-item" onClick={() => handleStatusChange(s.value)}>
+                    {s.label}
+                  </button>
+                </li>
+              ))}
+            </ul>
+          </div>
+
+          {/* Assign */}
+          <div className="dropdown">
+            <button className="btn btn-outline-primary btn-sm dropdown-toggle" data-bs-toggle="dropdown">
+              <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>
+              ))}
+            </ul>
+          </div>
+        </div>
+      </div>
+
+      <div className="row g-4">
+        {/* Comments Timeline */}
+        <div className="col-lg-8">
+          <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})
+            </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>
+                      </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>
+                  No hay comentarios aún
+                </div>
+              )}
+            </div>
+          </div>
+
+          {/* Comment Form */}
+          <div className="comment-form">
+            <form onSubmit={handleAddComment}>
+              <div className="mb-3">
+                <textarea
+                  className="form-control"
+                  rows={3}
+                  placeholder="Escribe tu comentario..."
+                  value={comment}
+                  onChange={(e) => setComment(e.target.value)}
+                  required
+                ></textarea>
+              </div>
+              <div className="d-flex align-items-center justify-content-between">
+                <div className="form-check">
+                  <input
+                    className="form-check-input"
+                    type="checkbox"
+                    id="internalCheck"
+                    checked={isInternal}
+                    onChange={(e) => setIsInternal(e.target.checked)}
+                  />
+                  <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)
+                  </label>
+                </div>
+                <button
+                  type="submit"
+                  className="btn btn-primary"
+                  disabled={!comment.trim() || submitting}
+                >
+                  {submitting ? (
+                    <span className="spinner-border spinner-border-sm" role="status"></span>
+                  ) : (
+                    <>
+                      <i className="bi bi-send me-2"></i>
+                      Enviar
+                    </>
+                  )}
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+
+        {/* Ticket Info Sidebar */}
+        <div className="col-lg-4">
+          <div className="ticket-info-card">
+            <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>
+            </div>
+            <div className="ticket-info-row">
+              <span className="label">Email</span>
+              <span className="value" style={{ fontSize: "0.8rem" }}>{ticket.requester?.email || "N/A"}</span>
+            </div>
+            <div className="ticket-info-row">
+              <span className="label">Asignado a</span>
+              <span className="value">{ticket.assignee?.name || "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>
+            </div>
+            <div className="ticket-info-row">
+              <span className="label">Creado</span>
+              <span className="value">{new Date(ticket.createdAt).toLocaleString("es-CL")}</span>
+            </div>
+            <div className="ticket-info-row">
+              <span className="label">Actualizado</span>
+              <span className="value">{new Date(ticket.updatedAt).toLocaleString("es-CL")}</span>
+            </div>
+          </div>
+
+          {/* Description */}
+          <div className="ticket-info-card">
+            <h6>Descripción</h6>
+            <p style={{ fontSize: "0.875rem", lineHeight: 1.6, marginBottom: 0 }}>
+              {ticket.description || "Sin descripción"}
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
@@ -0,0 +1,191 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useRouter } from "next/navigation";
+import { createTicket, getAgents, type User } 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 [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 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}`);
+    } catch (err: any) {
+      setError(err.message || "Error al crear el ticket");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div>
+      <div className="page-header">
+        <div>
+          <Link href="/tickets" className="text-decoration-none text-muted" style={{ fontSize: "0.85rem" }}>
+            <i className="bi bi-arrow-left me-1"></i>Volver a tickets
+          </Link>
+          <h1 className="mt-1">Nuevo Ticket</h1>
+        </div>
+      </div>
+
+      <div className="row">
+        <div className="col-lg-8">
+          <div className="card">
+            <div className="card-body p-4">
+              {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 fw-semibold">Asunto</label>
+                  <input
+                    type="text"
+                    className="form-control"
+                    placeholder="Describe brevemente el problema o solicitud"
+                    value={subject}
+                    onChange={(e) => setSubject(e.target.value)}
+                    required
+                    autoFocus
+                  />
+                </div>
+
+                <div className="mb-3">
+                  <label className="form-label fw-semibold">Descripción</label>
+                  <textarea
+                    className="form-control"
+                    rows={6}
+                    placeholder="Proporciona detalles sobre el problema, pasos para reproducir, etc."
+                    value={description}
+                    onChange={(e) => setDescription(e.target.value)}
+                    required
+                  ></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>
+
+                <div className="d-flex gap-2">
+                  <button
+                    type="submit"
+                    className="btn btn-primary px-4"
+                    disabled={loading}
+                  >
+                    {loading ? (
+                      <>
+                        <span className="spinner-border spinner-border-sm me-2" role="status"></span>
+                        Creando...
+                      </>
+                    ) : (
+                      <>
+                        <i className="bi bi-plus-lg me-2"></i>
+                        Crear Ticket
+                      </>
+                    )}
+                  </button>
+                  <Link href="/tickets" className="btn btn-outline-secondary">
+                    Cancelar
+                  </Link>
+                </div>
+              </form>
+            </div>
+          </div>
+        </div>
+
+        {/* Tips */}
+        <div className="col-lg-4">
+          <div className="card">
+            <div className="card-body">
+              <h6 className="d-flex align-items-center gap-2 mb-3">
+                <i className="bi bi-lightbulb" style={{ color: "#ffc107" }}></i>
+                Consejos
+              </h6>
+              <ul className="mb-0" style={{ fontSize: "0.85rem", lineHeight: 1.7 }}>
+                <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>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
@@ -0,0 +1,176 @@
+"use client";
+
+import { useEffect, useState, useCallback } from "react";
+import { useRouter } from "next/navigation";
+import { getTickets, type Ticket } from "@/lib/api";
+import BadgeStatus from "@/components/BadgeStatus";
+import BadgePriority from "@/components/BadgePriority";
+import PaginationComponent from "@/components/Pagination";
+import Link from "next/link";
+
+export default function TicketsPage() {
+  const router = useRouter();
+  const [tickets, setTickets] = useState<Ticket[]>([]);
+  const [total, setTotal] = useState(0);
+  const [page, setPage] = useState(1);
+  const [loading, setLoading] = useState(true);
+  const [statusFilter, setStatusFilter] = useState("");
+  const [priorityFilter, setPriorityFilter] = useState("");
+  const [search, setSearch] = useState("");
+  const pageSize = 10;
+
+  const fetchTickets = useCallback(async () => {
+    setLoading(true);
+    try {
+      const data = await getTickets({
+        status: statusFilter || undefined,
+        priority: priorityFilter || undefined,
+        search: search || undefined,
+        page,
+        pageSize,
+      });
+      setTickets(data.tickets || []);
+      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);
+    } finally {
+      setLoading(false);
+    }
+  }, [statusFilter, priorityFilter, search, page]);
+
+  useEffect(() => {
+    fetchTickets();
+  }, [fetchTickets]);
+
+  const totalPages = Math.ceil(total / pageSize);
+
+  return (
+    <div>
+      <div className="page-header">
+        <h1>Tickets</h1>
+        <Link href="/tickets/new" className="btn btn-primary">
+          <i className="bi bi-plus-lg me-2"></i>
+          Nuevo Ticket
+        </Link>
+      </div>
+
+      {/* Filters */}
+      <div className="filter-bar mb-4">
+        <div className="d-flex align-items-center gap-2">
+          <i className="bi bi-funnel text-muted"></i>
+          <span className="fw-semibold" style={{ fontSize: "0.85rem" }}>Filtros:</span>
+        </div>
+
+        <select
+          className="form-select"
+          style={{ width: "auto" }}
+          value={statusFilter}
+          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>
+        </select>
+
+        <select
+          className="form-select"
+          style={{ width: "auto" }}
+          value={priorityFilter}
+          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>
+        </select>
+
+        <div className="position-relative flex-grow-1" style={{ maxWidth: "280px" }}>
+          <i className="bi bi-search position-absolute" style={{ left: "10px", top: "50%", transform: "translateY(-50%)", color: "#6c757d" }}></i>
+          <input
+            type="text"
+            className="form-control"
+            style={{ paddingLeft: "2rem" }}
+            placeholder="Buscar tickets..."
+            value={search}
+            onChange={(e) => { setSearch(e.target.value); setPage(1); }}
+          />
+        </div>
+      </div>
+
+      {/* Tickets Table */}
+      <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>Asignado</th>
+              <th>Actualizado</th>
+            </tr>
+          </thead>
+          <tbody>
+            {loading ? (
+              <tr>
+                <td colSpan={7} className="text-center py-4">
+                  <div className="spinner-border spinner-border-sm text-primary" role="status"></div>
+                </td>
+              </tr>
+            ) : tickets.length === 0 ? (
+              <tr>
+                <td colSpan={7} className="empty-state">
+                  <i className="bi bi-inbox d-block"></i>
+                  <h5>No se encontraron tickets</h5>
+                  <p className="text-muted mb-0">Prueba ajustando los filtros de búsqueda</p>
+                </td>
+              </tr>
+            ) : (
+              tickets.map((ticket) => (
+                <tr
+                  key={ticket.id}
+                  onClick={() => router.push(`/tickets/${ticket.id}`)}
+                  style={{ cursor: "pointer" }}
+                >
+                  <td className="fw-semibold" style={{ color: "var(--primary)" }}>
+                    {ticket.ticketNumber || `#${ticket.id}`}
+                  </td>
+                  <td>
+                    <div className="fw-medium">{ticket.subject}</div>
+                    <small className="text-muted">{ticket.category}</small>
+                  </td>
+                  <td>{ticket.requester?.name || "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 className="text-muted" style={{ fontSize: "0.85rem" }}>
+                    {new Date(ticket.updatedAt).toLocaleDateString("es-CL")}
+                  </td>
+                </tr>
+              ))
+            )}
+          </tbody>
+        </table>
+      </div>
+
+      {/* Pagination */}
+      <div className="pagination-wrapper">
+        <span className="pagination-info">
+          Mostrando {tickets.length} de {total} tickets
+        </span>
+        <PaginationComponent currentPage={page} totalPages={totalPages} onPageChange={setPage} />
+      </div>
+    </div>
+  );
+}