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

frontend/src/app/(app)/tickets/page.tsx

@@ -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>
+  );
+}