feat: correo via banco mail, rol supervisor y lint en cero
This commit is contained in:
Nurfog committed
1 parent
2502de4e06
commit
b1cddbac6c
15 files changed
+677
-107
No files matched your search
@@ -2,7 +2,6 @@
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import StatsCard from "@/components/StatsCard";
|
||||
import BadgeStatus from "@/components/BadgeStatus";
|
||||
import { getTicketStats, type DashboardStats } from "@/lib/api";
|
||||
import Link from "next/link";
|
||||
|
||||
|
||||
@@ -38,13 +38,18 @@ export default function DepartmentsPage() {
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (authLoading) return;
|
||||
if (user?.role !== "admin") {
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
fetchGroups();
|
||||
}, [fetchGroups, authLoading, user?.role]);
|
||||
if (authLoading || user?.role !== "admin") return;
|
||||
getGroups()
|
||||
.then((g) => {
|
||||
setGroups(g);
|
||||
setError("");
|
||||
})
|
||||
.catch((err) => {
|
||||
setError(err instanceof Error ? err.message : "Error al cargar");
|
||||
setGroups([]);
|
||||
})
|
||||
.finally(() => setLoading(false));
|
||||
}, [authLoading, user?.role]);
|
||||
|
||||
const openCreate = () => {
|
||||
setEditing(null);
|
||||
|
||||
@@ -3,12 +3,17 @@
|
||||
import { useEffect, useState, useCallback } from "react";
|
||||
import {
|
||||
getEmailTemplates,
|
||||
createEmailTemplate,
|
||||
updateEmailTemplate,
|
||||
getEmailLog,
|
||||
sendTestEmail,
|
||||
syncInboundEmail,
|
||||
getEmailModules,
|
||||
registerEmailModule,
|
||||
revokeEmailModule,
|
||||
type EmailTemplate,
|
||||
type EmailLogEntry,
|
||||
type EmailModule,
|
||||
} from "@/lib/api";
|
||||
import { useAuth } from "@/lib/auth";
|
||||
import Modal from "@/components/Modal";
|
||||
@@ -31,6 +36,8 @@ export default function EmailPage() {
|
||||
const { user, isLoading: authLoading } = useAuth();
|
||||
const [templates, setTemplates] = useState<EmailTemplate[]>([]);
|
||||
const [log, setLog] = useState<EmailLogEntry[]>([]);
|
||||
const [modules, setModules] = useState<EmailModule[]>([]);
|
||||
const [logModule, setLogModule] = useState("helpdesk");
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState("");
|
||||
const [showModal, setShowModal] = useState(false);
|
||||
@@ -40,6 +47,24 @@ export default function EmailPage() {
|
||||
const [isActive, setIsActive] = useState(true);
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [modalError, setModalError] = useState("");
|
||||
// Crear plantilla (POST /api/email/templates)
|
||||
const [showCreate, setShowCreate] = useState(false);
|
||||
const [newKey, setNewKey] = useState("");
|
||||
const [newName, setNewName] = useState("");
|
||||
const [newSubject, setNewSubject] = useState("");
|
||||
const [newBody, setNewBody] = useState("");
|
||||
const [newModule, setNewModule] = useState("helpdesk");
|
||||
const [creating, setCreating] = useState(false);
|
||||
const [createError, setCreateError] = useState("");
|
||||
// Módulos (GET/POST/DELETE /api/email/modules)
|
||||
const [newModuleName, setNewModuleName] = useState("");
|
||||
const [registering, setRegistering] = useState(false);
|
||||
const [registerResult, setRegisterResult] = useState<{
|
||||
ok: boolean;
|
||||
text: string;
|
||||
apiKey?: string;
|
||||
} | null>(null);
|
||||
const [revoking, setRevoking] = useState<string | null>(null);
|
||||
const [testTo, setTestTo] = useState("");
|
||||
const [testResult, setTestResult] = useState<{ ok: boolean; text: string } | null>(null);
|
||||
const [testing, setTesting] = useState(false);
|
||||
@@ -50,26 +75,45 @@ export default function EmailPage() {
|
||||
setLoading(true);
|
||||
setError("");
|
||||
try {
|
||||
const [t, l] = await Promise.all([getEmailTemplates(), getEmailLog(50)]);
|
||||
const [t, l, m] = await Promise.all([
|
||||
getEmailTemplates(),
|
||||
getEmailLog(50, logModule),
|
||||
getEmailModules(),
|
||||
]);
|
||||
setTemplates(t);
|
||||
setLog(l);
|
||||
setModules(m);
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : "Error al cargar");
|
||||
setTemplates([]);
|
||||
setLog([]);
|
||||
setModules([]);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, []);
|
||||
}, [logModule]);
|
||||
|
||||
useEffect(() => {
|
||||
if (authLoading) return;
|
||||
if (user?.role !== "admin") {
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
fetchData();
|
||||
}, [fetchData, authLoading, user?.role]);
|
||||
if (authLoading || user?.role !== "admin") return;
|
||||
Promise.all([
|
||||
getEmailTemplates(),
|
||||
getEmailLog(50, logModule),
|
||||
getEmailModules(),
|
||||
])
|
||||
.then(([t, l, m]) => {
|
||||
setTemplates(t);
|
||||
setLog(l);
|
||||
setModules(m);
|
||||
setError("");
|
||||
})
|
||||
.catch((err) => {
|
||||
setError(err instanceof Error ? err.message : "Error al cargar");
|
||||
setTemplates([]);
|
||||
setLog([]);
|
||||
setModules([]);
|
||||
})
|
||||
.finally(() => setLoading(false));
|
||||
}, [authLoading, user?.role, logModule]);
|
||||
|
||||
const openEdit = (t: EmailTemplate) => {
|
||||
setEditing(t);
|
||||
@@ -103,6 +147,87 @@ export default function EmailPage() {
|
||||
}
|
||||
};
|
||||
|
||||
const openCreate = () => {
|
||||
setNewKey("");
|
||||
setNewName("");
|
||||
setNewSubject("");
|
||||
setNewBody("");
|
||||
setNewModule("helpdesk");
|
||||
setCreateError("");
|
||||
setShowCreate(true);
|
||||
};
|
||||
|
||||
const handleCreate = async () => {
|
||||
const key = newKey.trim().toLowerCase();
|
||||
const modName = (newModule.trim().toLowerCase() || "helpdesk");
|
||||
if (!/^[a-z0-9_]{2,64}$/.test(key)) {
|
||||
setCreateError("Key inválida ([a-z0-9_], 2-64)");
|
||||
return;
|
||||
}
|
||||
if (!newName.trim() || !newSubject.trim() || !newBody.trim()) {
|
||||
setCreateError("Nombre, asunto y cuerpo son requeridos");
|
||||
return;
|
||||
}
|
||||
if (!/^[a-z0-9-]{2,32}$/.test(modName)) {
|
||||
setCreateError("Módulo inválido ([a-z0-9-], 2-32)");
|
||||
return;
|
||||
}
|
||||
setCreating(true);
|
||||
setCreateError("");
|
||||
try {
|
||||
await createEmailTemplate({
|
||||
key,
|
||||
name: newName.trim(),
|
||||
subject: newSubject.trim(),
|
||||
bodyHtml: newBody.trim(),
|
||||
module: modName,
|
||||
});
|
||||
setShowCreate(false);
|
||||
fetchData();
|
||||
} catch (err) {
|
||||
setCreateError(err instanceof Error ? err.message : "Error al crear");
|
||||
} finally {
|
||||
setCreating(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleRegister = async () => {
|
||||
const modName = newModuleName.trim().toLowerCase();
|
||||
if (!/^[a-z0-9-]{2,32}$/.test(modName)) {
|
||||
setRegisterResult({ ok: false, text: "Módulo inválido ([a-z0-9-], 2-32)" });
|
||||
return;
|
||||
}
|
||||
setRegistering(true);
|
||||
setRegisterResult(null);
|
||||
try {
|
||||
const r = await registerEmailModule(modName);
|
||||
setRegisterResult({
|
||||
ok: true,
|
||||
text: `Clave de "${r.module}" generada. Se muestra una sola vez.`,
|
||||
apiKey: r.apiKey,
|
||||
});
|
||||
setNewModuleName("");
|
||||
fetchData();
|
||||
} catch (err) {
|
||||
setRegisterResult({ ok: false, text: err instanceof Error ? err.message : "Error al registrar" });
|
||||
} finally {
|
||||
setRegistering(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleRevoke = async (modName: string) => {
|
||||
if (!window.confirm(`¿Revocar la clave del módulo "${modName}"? Dejará de poder usar POST /api/email/send.`)) return;
|
||||
setRevoking(modName);
|
||||
try {
|
||||
await revokeEmailModule(modName);
|
||||
fetchData();
|
||||
} catch (err) {
|
||||
setRegisterResult({ ok: false, text: err instanceof Error ? err.message : "Error al revocar" });
|
||||
} finally {
|
||||
setRevoking(null);
|
||||
}
|
||||
};
|
||||
|
||||
const handleTest = async () => {
|
||||
if (!testTo.trim() || !testTo.includes("@")) {
|
||||
setTestResult({ ok: false, text: "Destino inválido" });
|
||||
@@ -111,8 +236,9 @@ export default function EmailPage() {
|
||||
setTesting(true);
|
||||
setTestResult(null);
|
||||
try {
|
||||
await sendTestEmail(testTo.trim());
|
||||
setTestResult({ ok: true, text: `Correo de prueba enviado a ${testTo.trim()}` });
|
||||
const r = await sendTestEmail(testTo.trim());
|
||||
const sent = typeof r.sent === "number" ? ` (${r.sent} enviado(s))` : "";
|
||||
setTestResult({ ok: true, text: `Correo de prueba enviado a ${testTo.trim()}${sent} vía módulo helpdesk.` });
|
||||
fetchData();
|
||||
} catch (err) {
|
||||
setTestResult({ ok: false, text: err instanceof Error ? err.message : "Error al enviar" });
|
||||
@@ -155,8 +281,12 @@ export default function EmailPage() {
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="page-header">
|
||||
<div className="page-header d-flex justify-content-between align-items-center">
|
||||
<h1>Plantillas de Correo</h1>
|
||||
<button className="btn btn-primary btn-sm" onClick={openCreate}>
|
||||
<i className="bi bi-plus-lg me-1"></i>
|
||||
Nueva plantilla
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
@@ -173,6 +303,7 @@ export default function EmailPage() {
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Plantilla</th>
|
||||
<th>Módulo</th>
|
||||
<th>Asunto</th>
|
||||
<th>Estado</th>
|
||||
<th className="text-end">Acciones</th>
|
||||
@@ -181,13 +312,13 @@ export default function EmailPage() {
|
||||
<tbody>
|
||||
{loading ? (
|
||||
<tr>
|
||||
<td colSpan={4} className="text-center py-4">
|
||||
<td colSpan={5} className="text-center py-4">
|
||||
<div className="spinner-border spinner-border-sm text-primary" role="status"></div>
|
||||
</td>
|
||||
</tr>
|
||||
) : templates.length === 0 ? (
|
||||
<tr>
|
||||
<td colSpan={4} className="empty-state">
|
||||
<td colSpan={5} className="empty-state">
|
||||
<i className="bi bi-envelope d-block"></i>
|
||||
<h5>Sin plantillas</h5>
|
||||
</td>
|
||||
@@ -201,6 +332,9 @@ export default function EmailPage() {
|
||||
<code>{t.key}</code>
|
||||
</small>
|
||||
</td>
|
||||
<td>
|
||||
<code className="small">{t.module ?? "helpdesk"}</code>
|
||||
</td>
|
||||
<td className="text-muted small">{t.subject}</td>
|
||||
<td>
|
||||
{t.isActive ? (
|
||||
@@ -227,6 +361,95 @@ export default function EmailPage() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="card mb-4">
|
||||
<div className="card-body">
|
||||
<h6 className="fw-semibold mb-3">
|
||||
<i className="bi bi-key me-2"></i>
|
||||
Módulos autorizados
|
||||
</h6>
|
||||
{registerResult && (
|
||||
<div className={`alert ${registerResult.ok ? "alert-success" : "alert-danger"} py-2`} role="alert">
|
||||
{registerResult.text}
|
||||
{registerResult.apiKey && (
|
||||
<div className="mt-2">
|
||||
<code className="user-select-all">{registerResult.apiKey}</code>
|
||||
<div className="small mt-1">
|
||||
Guárdala en el <code>.env</code> del módulo como <code>MAIL_API_KEY</code>. No se vuelve a mostrar.
|
||||
Registrar de nuevo rota la clave anterior.
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
{modules.length > 0 && (
|
||||
<div className="table-responsive mb-3">
|
||||
<table className="table table-sm table-hover align-middle mb-0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Módulo</th>
|
||||
<th>Estado</th>
|
||||
<th className="text-end">Acciones</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{modules.map((m) => (
|
||||
<tr key={m.module}>
|
||||
<td>
|
||||
<code className="small">{m.module}</code>
|
||||
</td>
|
||||
<td>
|
||||
{m.isActive ? (
|
||||
<span className="badge bg-success">Activo</span>
|
||||
) : (
|
||||
<span className="badge bg-secondary">Revocado</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="text-end">
|
||||
<button
|
||||
className="btn btn-sm btn-outline-danger"
|
||||
onClick={() => handleRevoke(m.module)}
|
||||
disabled={revoking === m.module}
|
||||
title="Revocar clave"
|
||||
>
|
||||
{revoking === m.module ? (
|
||||
<span className="spinner-border spinner-border-sm" role="status" />
|
||||
) : (
|
||||
<i className="bi bi-trash"></i>
|
||||
)}
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
<div className="d-flex gap-2">
|
||||
<input
|
||||
type="text"
|
||||
className="form-control"
|
||||
placeholder="nombre-modulo (ej: webpay)"
|
||||
value={newModuleName}
|
||||
onChange={(e) => setNewModuleName(e.target.value)}
|
||||
style={{ maxWidth: 320 }}
|
||||
/>
|
||||
<button className="btn btn-outline-primary" onClick={handleRegister} disabled={registering}>
|
||||
{registering ? (
|
||||
<>
|
||||
<span className="spinner-border spinner-border-sm me-2" role="status" />
|
||||
Generando...
|
||||
</>
|
||||
) : (
|
||||
"Registrar / rotar clave"
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
<small className="text-muted d-block mt-2">
|
||||
La clave plana se muestra una sola vez (<code>POST /api/email/modules</code>).
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="card mb-4">
|
||||
<div className="card-body">
|
||||
<h6 className="fw-semibold mb-3">
|
||||
@@ -259,6 +482,8 @@ export default function EmailPage() {
|
||||
</button>
|
||||
</div>
|
||||
<small className="text-muted d-block mt-2">
|
||||
Va por el route propio <code>/api/correos</code> → <code>POST /api/email/send</code> con
|
||||
módulo <code>helpdesk</code>. Requiere <code>MAIL_API_KEY</code> en el servidor.
|
||||
Si falla, revisa la bitácora y la configuración SMTP del backend.
|
||||
</small>
|
||||
</div>
|
||||
@@ -295,10 +520,25 @@ export default function EmailPage() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h6 className="fw-semibold mb-2">
|
||||
<i className="bi bi-clock-history me-2"></i>
|
||||
Últimos envíos
|
||||
</h6>
|
||||
<div className="d-flex justify-content-between align-items-center mb-2">
|
||||
<h6 className="fw-semibold mb-0">
|
||||
<i className="bi bi-clock-history me-2"></i>
|
||||
Últimos envíos
|
||||
</h6>
|
||||
<select
|
||||
className="form-select form-select-sm"
|
||||
style={{ maxWidth: 220 }}
|
||||
value={logModule}
|
||||
onChange={(e) => {
|
||||
setLogModule(e.target.value);
|
||||
setLoading(true);
|
||||
}}
|
||||
title="Filtrar bitácora por módulo"
|
||||
>
|
||||
<option value="helpdesk">Solo helpdesk</option>
|
||||
<option value="">Todos los módulos</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className="card">
|
||||
<div className="card-body p-0">
|
||||
<div className="table-responsive">
|
||||
@@ -307,6 +547,7 @@ export default function EmailPage() {
|
||||
<tr>
|
||||
<th>Fecha</th>
|
||||
<th>Plantilla</th>
|
||||
<th>Módulo</th>
|
||||
<th>Ticket</th>
|
||||
<th>Destinatario</th>
|
||||
<th>Estado</th>
|
||||
@@ -315,7 +556,7 @@ export default function EmailPage() {
|
||||
<tbody>
|
||||
{log.length === 0 ? (
|
||||
<tr>
|
||||
<td colSpan={5} className="text-center text-muted py-3">
|
||||
<td colSpan={6} className="text-center text-muted py-3">
|
||||
Sin envíos registrados
|
||||
</td>
|
||||
</tr>
|
||||
@@ -328,6 +569,9 @@ export default function EmailPage() {
|
||||
<td>
|
||||
<code className="small">{e.template}</code>
|
||||
</td>
|
||||
<td>
|
||||
<code className="small">{e.module ?? "helpdesk"}</code>
|
||||
</td>
|
||||
<td>{e.ticketId ? `#${e.ticketId}` : "—"}</td>
|
||||
<td className="small">{e.recipient}</td>
|
||||
<td>
|
||||
@@ -403,6 +647,73 @@ export default function EmailPage() {
|
||||
))}
|
||||
</div>
|
||||
</Modal>
|
||||
|
||||
<Modal
|
||||
show={showCreate}
|
||||
title="Nueva plantilla"
|
||||
onClose={() => setShowCreate(false)}
|
||||
onSubmit={handleCreate}
|
||||
submitLabel="Crear"
|
||||
submitting={creating}
|
||||
>
|
||||
{createError && (
|
||||
<div className="alert alert-danger py-2" role="alert">
|
||||
{createError}
|
||||
</div>
|
||||
)}
|
||||
<div className="mb-3">
|
||||
<label className="form-label">Key * <small className="text-muted">([a-z0-9_])</small></label>
|
||||
<input
|
||||
type="text"
|
||||
className="form-control font-monospace"
|
||||
value={newKey}
|
||||
onChange={(e) => setNewKey(e.target.value)}
|
||||
placeholder="ticket_created"
|
||||
autoFocus
|
||||
/>
|
||||
</div>
|
||||
<div className="mb-3">
|
||||
<label className="form-label">Nombre *</label>
|
||||
<input
|
||||
type="text"
|
||||
className="form-control"
|
||||
value={newName}
|
||||
onChange={(e) => setNewName(e.target.value)}
|
||||
placeholder="Ticket creado"
|
||||
/>
|
||||
</div>
|
||||
<div className="mb-3">
|
||||
<label className="form-label">Módulo *</label>
|
||||
<input
|
||||
type="text"
|
||||
className="form-control font-monospace"
|
||||
value={newModule}
|
||||
onChange={(e) => setNewModule(e.target.value)}
|
||||
placeholder="helpdesk"
|
||||
/>
|
||||
</div>
|
||||
<div className="mb-3">
|
||||
<label className="form-label">Asunto *</label>
|
||||
<input
|
||||
type="text"
|
||||
className="form-control"
|
||||
value={newSubject}
|
||||
onChange={(e) => setNewSubject(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="mb-3">
|
||||
<label className="form-label">Cuerpo HTML *</label>
|
||||
<textarea
|
||||
className="form-control font-monospace"
|
||||
rows={8}
|
||||
value={newBody}
|
||||
onChange={(e) => setNewBody(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="alert alert-light border small mb-0">
|
||||
<strong>Variables:</strong> se renderizan como <code>{"{{Clave}}"}</code> (case-sensitive).
|
||||
</div>
|
||||
</Modal>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -39,13 +39,18 @@ export default function SlaPage() {
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (authLoading) return;
|
||||
if (user?.role !== "admin") {
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
fetchPolicies();
|
||||
}, [fetchPolicies, authLoading, user?.role]);
|
||||
if (authLoading || user?.role !== "admin") return;
|
||||
getSLAPolicies()
|
||||
.then((p) => {
|
||||
setPolicies(p);
|
||||
setError("");
|
||||
})
|
||||
.catch((err) => {
|
||||
setError(err instanceof Error ? err.message : "Error al cargar");
|
||||
setPolicies([]);
|
||||
})
|
||||
.finally(() => setLoading(false));
|
||||
}, [authLoading, user?.role]);
|
||||
|
||||
const openCreate = () => {
|
||||
setEditing(null);
|
||||
|
||||
@@ -43,13 +43,19 @@ export default function TeamPage() {
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (authLoading) return;
|
||||
if (user?.role !== "admin") {
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
fetchData();
|
||||
}, [fetchData, authLoading, user?.role]);
|
||||
if (authLoading || user?.role !== "admin") return;
|
||||
Promise.all([getTeam(), getGroups()])
|
||||
.then(([t, g]) => {
|
||||
setTeam(t);
|
||||
setGroups(g.filter((x) => x.isActive));
|
||||
setError("");
|
||||
})
|
||||
.catch((err) => {
|
||||
setError(err instanceof Error ? err.message : "Error al cargar");
|
||||
setTeam([]);
|
||||
})
|
||||
.finally(() => setLoading(false));
|
||||
}, [authLoading, user?.role]);
|
||||
|
||||
const openCreate = () => {
|
||||
setEditing(null);
|
||||
@@ -76,6 +82,10 @@ export default function TeamPage() {
|
||||
setModalError("El ID de usuario es requerido (debe existir en SAM)");
|
||||
return;
|
||||
}
|
||||
if (role === "supervisor" && !departmentId) {
|
||||
setModalError("El supervisor requiere un departamento asignado");
|
||||
return;
|
||||
}
|
||||
setSaving(true);
|
||||
setModalError("");
|
||||
try {
|
||||
@@ -181,6 +191,8 @@ export default function TeamPage() {
|
||||
<td>
|
||||
{m.role === "admin" ? (
|
||||
<span className="badge bg-primary">Admin</span>
|
||||
) : m.role === "supervisor" ? (
|
||||
<span className="badge bg-warning text-dark">Supervisor</span>
|
||||
) : (
|
||||
<span className="badge bg-info text-dark">Agente</span>
|
||||
)}
|
||||
@@ -248,11 +260,14 @@ export default function TeamPage() {
|
||||
<label className="form-label">Rol</label>
|
||||
<select className="form-select" value={role} onChange={(e) => setRole(e.target.value)}>
|
||||
<option value="agent">Agente</option>
|
||||
<option value="supervisor">Supervisor (su departamento)</option>
|
||||
<option value="admin">Admin</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className="col-md-6">
|
||||
<label className="form-label">Departamento</label>
|
||||
<label className="form-label">
|
||||
Departamento{role === "supervisor" ? " *" : ""}
|
||||
</label>
|
||||
<select
|
||||
className="form-select"
|
||||
value={departmentId}
|
||||
@@ -265,6 +280,9 @@ export default function TeamPage() {
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
{role === "supervisor" && (
|
||||
<div className="form-text">Requerido: el supervisor solo ve su departamento.</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{editing && (
|
||||
|
||||
@@ -32,7 +32,8 @@ export default function TicketDetailPage() {
|
||||
const params = useParams();
|
||||
const id = Number(params.id);
|
||||
const { user } = useAuth();
|
||||
const isTeam = user?.role === "admin" || user?.role === "agent";
|
||||
const isTeam =
|
||||
user?.role === "admin" || user?.role === "agent" || user?.role === "supervisor";
|
||||
|
||||
const [ticket, setTicket] = useState<Ticket | null>(null);
|
||||
const [comments, setComments] = useState<Comment[]>([]);
|
||||
@@ -92,8 +93,8 @@ export default function TicketDetailPage() {
|
||||
try {
|
||||
await updateTicketStatus(id, newStatus);
|
||||
await refreshTicket();
|
||||
} catch (err: any) {
|
||||
setError(err.message || "No se pudo cambiar el estado");
|
||||
} catch (err: unknown) {
|
||||
setError(err instanceof Error ? err.message : "No se pudo cambiar el estado");
|
||||
} finally {
|
||||
setActing(false);
|
||||
}
|
||||
@@ -107,8 +108,8 @@ export default function TicketDetailPage() {
|
||||
try {
|
||||
await assignTicket(id, ticket.assigneeId ?? 0, groupId);
|
||||
await refreshTicket();
|
||||
} catch (err: any) {
|
||||
setError(err.message || "No se pudo asignar el departamento");
|
||||
} catch (err: unknown) {
|
||||
setError(err instanceof Error ? err.message : "No se pudo asignar el departamento");
|
||||
} finally {
|
||||
setActing(false);
|
||||
}
|
||||
@@ -126,8 +127,8 @@ export default function TicketDetailPage() {
|
||||
ticket.groupId ?? undefined
|
||||
);
|
||||
await refreshTicket();
|
||||
} catch (err: any) {
|
||||
setError(err.message || "No se pudo asignar el agente");
|
||||
} catch (err: unknown) {
|
||||
setError(err instanceof Error ? err.message : "No se pudo asignar el agente");
|
||||
} finally {
|
||||
setActing(false);
|
||||
}
|
||||
|
||||
@@ -31,8 +31,8 @@ export default function NewTicketPage() {
|
||||
try {
|
||||
const result = await createTicket({ title, description, priority, groupId: Number(groupId) });
|
||||
router.push(`/tickets/${result.id}`);
|
||||
} catch (err: any) {
|
||||
setError(err.message || "Error al crear el ticket");
|
||||
} catch (err: unknown) {
|
||||
setError(err instanceof Error ? err.message : "Error al crear el ticket");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState, useCallback } from "react";
|
||||
import { useEffect, useState } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { getTickets, type Ticket } from "@/lib/api";
|
||||
import { useAuth } from "@/lib/auth";
|
||||
@@ -24,38 +24,34 @@ export default function TicketsPage() {
|
||||
|
||||
const numericId = parseInt(user?.idUsuario ?? "", 10);
|
||||
const hasNumericId = !isNaN(numericId);
|
||||
const isTeam = user?.role === "admin" || user?.role === "agent";
|
||||
|
||||
const fetchTickets = useCallback(async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const data = await getTickets({
|
||||
status: statusFilter || undefined,
|
||||
priority: priorityFilter || undefined,
|
||||
requesterId: view === "mine" || !isTeam ? (hasNumericId ? numericId : undefined) : undefined,
|
||||
assigneeId:
|
||||
view === "assigned" && hasNumericId
|
||||
? numericId
|
||||
: view === "unassigned"
|
||||
? 0
|
||||
: undefined,
|
||||
search: search || undefined,
|
||||
page,
|
||||
pageSize,
|
||||
});
|
||||
setTickets(data.items || []);
|
||||
setTotal(data.total || 0);
|
||||
} catch {
|
||||
setTickets([]);
|
||||
setTotal(0);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [statusFilter, priorityFilter, search, page, view, numericId, hasNumericId, isTeam]);
|
||||
const isTeam =
|
||||
user?.role === "admin" || user?.role === "agent" || user?.role === "supervisor";
|
||||
|
||||
useEffect(() => {
|
||||
fetchTickets();
|
||||
}, [fetchTickets]);
|
||||
getTickets({
|
||||
status: statusFilter || undefined,
|
||||
priority: priorityFilter || undefined,
|
||||
requesterId: view === "mine" || !isTeam ? (hasNumericId ? numericId : undefined) : undefined,
|
||||
assigneeId:
|
||||
view === "assigned" && hasNumericId
|
||||
? numericId
|
||||
: view === "unassigned"
|
||||
? 0
|
||||
: undefined,
|
||||
search: search || undefined,
|
||||
page,
|
||||
pageSize,
|
||||
})
|
||||
.then((data) => {
|
||||
setTickets(data.items || []);
|
||||
setTotal(data.total || 0);
|
||||
})
|
||||
.catch(() => {
|
||||
setTickets([]);
|
||||
setTotal(0);
|
||||
})
|
||||
.finally(() => setLoading(false));
|
||||
}, [statusFilter, priorityFilter, search, page, view, numericId, hasNumericId, isTeam]);
|
||||
|
||||
const totalPages = Math.ceil(total / pageSize);
|
||||
|
||||
@@ -69,6 +65,20 @@ export default function TicketsPage() {
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{user?.role === "supervisor" && (
|
||||
<div className="alert alert-warning py-2" role="alert">
|
||||
<i className="bi bi-eye me-2"></i>
|
||||
Viendo solo el departamento
|
||||
{user?.departmentName ? (
|
||||
<>
|
||||
: <strong>{user.departmentName}</strong>
|
||||
</>
|
||||
) : (
|
||||
" asignado"
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Filters */}
|
||||
{isTeam ? (
|
||||
<div className="filter-bar mb-3">
|
||||
@@ -88,6 +98,7 @@ export default function TicketsPage() {
|
||||
onClick={() => {
|
||||
setView(v);
|
||||
setPage(1);
|
||||
setLoading(true);
|
||||
}}
|
||||
>
|
||||
{label}
|
||||
@@ -110,7 +121,7 @@ export default function TicketsPage() {
|
||||
className="form-select"
|
||||
style={{ width: "auto" }}
|
||||
value={statusFilter}
|
||||
onChange={(e) => { setStatusFilter(e.target.value); setPage(1); }}
|
||||
onChange={(e) => { setStatusFilter(e.target.value); setPage(1); setLoading(true); }}
|
||||
>
|
||||
<option value="">Todos los estados</option>
|
||||
<option value="Open">Abierto</option>
|
||||
@@ -124,7 +135,7 @@ export default function TicketsPage() {
|
||||
className="form-select"
|
||||
style={{ width: "auto" }}
|
||||
value={priorityFilter}
|
||||
onChange={(e) => { setPriorityFilter(e.target.value); setPage(1); }}
|
||||
onChange={(e) => { setPriorityFilter(e.target.value); setPage(1); setLoading(true); }}
|
||||
>
|
||||
<option value="">Todas las prioridades</option>
|
||||
<option value="Low">Baja</option>
|
||||
@@ -141,7 +152,7 @@ export default function TicketsPage() {
|
||||
style={{ paddingLeft: "2rem" }}
|
||||
placeholder="Buscar tickets..."
|
||||
value={search}
|
||||
onChange={(e) => { setSearch(e.target.value); setPage(1); }}
|
||||
onChange={(e) => { setSearch(e.target.value); setPage(1); setLoading(true); }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -19,8 +19,8 @@ export default function LoginPage() {
|
||||
try {
|
||||
await login(idUsuario, password);
|
||||
router.push("/");
|
||||
} catch (err: any) {
|
||||
setError(err.message || "Credenciales inválidas");
|
||||
} catch (err: unknown) {
|
||||
setError(err instanceof Error ? err.message : "Credenciales inválidas");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,128 @@
|
||||
// Route handler server-side para envío de correos vía banco único mail.*.
|
||||
// El navegador NUNCA lleva la X-Api-Key: llama aquí (/api/correos) y este
|
||||
// route llama a SAM.API (POST /api/email/send) con X-Module + X-Api-Key.
|
||||
// Docs: sam/docs/email-modulos.md punto 7.
|
||||
//
|
||||
// Env (servidor, SIN prefijo NEXT_PUBLIC_):
|
||||
// MAIL_API_KEY=clave entregada por POST /api/email/modules (solo servidor)
|
||||
// MAIL_MODULE=helpdesk (opcional, default helpdesk)
|
||||
// SAM_API_URL=https://api.devops.norteamericano.cl (default prod;
|
||||
// en dev cae a NEXT_PUBLIC_API_URL)
|
||||
|
||||
const API_BASE =
|
||||
process.env.SAM_API_URL ??
|
||||
process.env.NEXT_PUBLIC_API_URL ??
|
||||
"https://api.devops.norteamericano.cl";
|
||||
const MODULE = process.env.MAIL_MODULE ?? "helpdesk";
|
||||
|
||||
type SendBody = {
|
||||
to: string | string[];
|
||||
templateKey?: string;
|
||||
subject?: string;
|
||||
htmlBody?: string;
|
||||
vars?: Record<string, string | null>;
|
||||
};
|
||||
|
||||
const EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||||
|
||||
async function requireAdmin(req: Request): Promise<Response | null> {
|
||||
const auth = req.headers.get("authorization") ?? "";
|
||||
if (!auth.toLowerCase().startsWith("bearer ")) {
|
||||
return Response.json(
|
||||
{ success: false, message: "Requiere sesión de admin" },
|
||||
{ status: 401 }
|
||||
);
|
||||
}
|
||||
try {
|
||||
const me = await fetch(`${API_BASE}/api/helpdesk/me`, {
|
||||
headers: { Authorization: auth },
|
||||
});
|
||||
if (!me.ok) {
|
||||
return Response.json(
|
||||
{ success: false, message: "Sesión inválida" },
|
||||
{ status: 401 }
|
||||
);
|
||||
}
|
||||
const user = (await me.json()) as { role?: string };
|
||||
if (user.role !== "admin") {
|
||||
return Response.json(
|
||||
{ success: false, message: "Requiere rol admin" },
|
||||
{ status: 403 }
|
||||
);
|
||||
}
|
||||
return null;
|
||||
} catch (err) {
|
||||
return Response.json(
|
||||
{ success: false, message: `No se pudo verificar admin: ${String(err)}` },
|
||||
{ status: 502 }
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export async function POST(req: Request): Promise<Response> {
|
||||
const denied = await requireAdmin(req);
|
||||
if (denied) return denied;
|
||||
|
||||
const apiKey = process.env.MAIL_API_KEY ?? "";
|
||||
if (!apiKey) {
|
||||
return Response.json(
|
||||
{ success: false, message: "MAIL_API_KEY no configurada en el servidor del módulo" },
|
||||
{ status: 500 }
|
||||
);
|
||||
}
|
||||
|
||||
let body: SendBody;
|
||||
try {
|
||||
body = (await req.json()) as SendBody;
|
||||
} catch {
|
||||
return Response.json({ success: false, message: "JSON inválido" }, { status: 400 });
|
||||
}
|
||||
|
||||
const raw = Array.isArray(body.to) ? body.to : [body.to];
|
||||
const clean = [
|
||||
...new Set(
|
||||
raw.map((e) => String(e ?? "").trim()).filter((e) => EMAIL_RE.test(e))
|
||||
),
|
||||
].slice(0, 50);
|
||||
if (clean.length === 0) {
|
||||
return Response.json({ success: false, message: "Sin destinatarios válidos" }, { status: 400 });
|
||||
}
|
||||
if (!body.templateKey && (!body.subject || !body.htmlBody)) {
|
||||
return Response.json(
|
||||
{ success: false, message: "templateKey o subject+htmlBody requeridos" },
|
||||
{ status: 400 }
|
||||
);
|
||||
}
|
||||
|
||||
let upstream: Response;
|
||||
try {
|
||||
upstream = await fetch(`${API_BASE}/api/email/send`, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
"X-Module": MODULE,
|
||||
"X-Api-Key": apiKey,
|
||||
},
|
||||
body: JSON.stringify({
|
||||
to: clean.length === 1 ? clean[0] : clean,
|
||||
templateKey: body.templateKey,
|
||||
subject: body.subject,
|
||||
htmlBody: body.htmlBody,
|
||||
vars: body.vars ?? {},
|
||||
}),
|
||||
});
|
||||
} catch (err) {
|
||||
return Response.json(
|
||||
{ success: false, message: `No se pudo contactar a SAM.API: ${String(err)}` },
|
||||
{ status: 502 }
|
||||
);
|
||||
}
|
||||
|
||||
let data: unknown = null;
|
||||
try {
|
||||
data = await upstream.json();
|
||||
} catch {
|
||||
data = { success: false, message: `SAM.API respondió ${upstream.status} sin JSON` };
|
||||
}
|
||||
return Response.json(data, { status: upstream.ok ? 200 : upstream.status });
|
||||
}
|
||||
@@ -1,5 +1,5 @@
|
||||
import type { Metadata } from "next";
|
||||
import { Inter } from "next/font/google";
|
||||
import { Inter, Fira_Sans } from "next/font/google";
|
||||
import "bootstrap/dist/css/bootstrap.min.css";
|
||||
import "./globals.css";
|
||||
import { AuthProvider } from "@/lib/auth";
|
||||
@@ -9,6 +9,12 @@ const inter = Inter({
|
||||
subsets: ["latin"],
|
||||
});
|
||||
|
||||
const firaSans = Fira_Sans({
|
||||
variable: "--font-fira-sans",
|
||||
subsets: ["latin"],
|
||||
weight: ["300", "400", "500", "600", "700"],
|
||||
});
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "HelpDesk ICHN",
|
||||
description: "Sistema de Gestión de Tickets de Soporte - ICHN",
|
||||
@@ -20,18 +26,14 @@ export default function RootLayout({
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<html lang="es" className={`${inter.variable} h-full antialiased`}>
|
||||
<html lang="es" className={`${inter.variable} ${firaSans.variable} h-full antialiased`}>
|
||||
<head>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"
|
||||
/>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://fonts.googleapis.com/css2?family=Fira+Sans:wght@300;400;500;600;700&display=swap"
|
||||
/>
|
||||
</head>
|
||||
<body style={{ fontFamily: "'Fira Sans', sans-serif" }}>
|
||||
<body style={{ fontFamily: "var(--font-fira-sans), sans-serif" }}>
|
||||
<AuthProvider>{children}</AuthProvider>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -27,7 +27,13 @@ export default function Sidebar() {
|
||||
const fullName = user ? `${user.nombres} ${user.apPaterno}` : "Usuario";
|
||||
const isAdmin = user?.role === "admin";
|
||||
const roleLabel =
|
||||
user?.role === "admin" ? "Administrador" : user?.role === "agent" ? "Agente" : "Usuario";
|
||||
user?.role === "admin"
|
||||
? "Administrador"
|
||||
: user?.role === "supervisor"
|
||||
? "Supervisor"
|
||||
: user?.role === "agent"
|
||||
? "Agente"
|
||||
: "Usuario";
|
||||
const initials = user?.nombres
|
||||
?.split(" ")
|
||||
.map((n: string) => n[0])
|
||||
|
||||
+77
-8
@@ -339,18 +339,20 @@ export async function updateSla(
|
||||
});
|
||||
}
|
||||
|
||||
// ==================== Correo / plantillas ====================
|
||||
// ==================== Correo / plantillas (banco único mail.* vía /api/email/*) ====================
|
||||
export interface EmailTemplate {
|
||||
key: string;
|
||||
name: string;
|
||||
subject: string;
|
||||
bodyHtml: string;
|
||||
module?: string;
|
||||
isActive: boolean;
|
||||
}
|
||||
|
||||
export interface EmailLogEntry {
|
||||
id: number;
|
||||
template: string;
|
||||
module?: string;
|
||||
ticketId?: number;
|
||||
recipient: string;
|
||||
subject: string;
|
||||
@@ -359,28 +361,95 @@ export interface EmailLogEntry {
|
||||
createdAt: string;
|
||||
}
|
||||
|
||||
export interface EmailModule {
|
||||
module: string;
|
||||
isActive: boolean;
|
||||
}
|
||||
|
||||
export async function getEmailTemplates() {
|
||||
return fetchApi<EmailTemplate[]>("/api/helpdesk/email/templates");
|
||||
return fetchApi<EmailTemplate[]>("/api/email/templates");
|
||||
}
|
||||
|
||||
export async function createEmailTemplate(data: {
|
||||
key: string;
|
||||
name: string;
|
||||
subject: string;
|
||||
bodyHtml: string;
|
||||
module?: string;
|
||||
}) {
|
||||
return fetchApi<{ key: string }>("/api/email/templates", {
|
||||
method: "POST",
|
||||
body: JSON.stringify(data),
|
||||
});
|
||||
}
|
||||
|
||||
export async function updateEmailTemplate(
|
||||
key: string,
|
||||
data: { subject?: string; bodyHtml?: string; isActive?: boolean }
|
||||
) {
|
||||
return fetchApi<void>(`/api/helpdesk/email/templates/${encodeURIComponent(key)}`, {
|
||||
return fetchApi<void>(`/api/email/templates/${encodeURIComponent(key)}`, {
|
||||
method: "PUT",
|
||||
body: JSON.stringify(data),
|
||||
});
|
||||
}
|
||||
|
||||
export async function getEmailLog(limit = 50) {
|
||||
return fetchApi<EmailLogEntry[]>(`/api/helpdesk/email/log?limit=${limit}`);
|
||||
export async function getEmailLog(limit = 50, module = "helpdesk") {
|
||||
const query = new URLSearchParams({ limit: String(limit) });
|
||||
if (module) query.set("module", module);
|
||||
return fetchApi<EmailLogEntry[]>(`/api/email/log?${query.toString()}`);
|
||||
}
|
||||
|
||||
export async function getEmailModules() {
|
||||
return fetchApi<EmailModule[]>("/api/email/modules");
|
||||
}
|
||||
|
||||
export async function registerEmailModule(module: string) {
|
||||
return fetchApi<{ module: string; apiKey: string }>("/api/email/modules", {
|
||||
method: "POST",
|
||||
body: JSON.stringify({ module }),
|
||||
});
|
||||
}
|
||||
|
||||
export async function revokeEmailModule(module: string) {
|
||||
return fetchApi<{ module: string }>(`/api/email/modules/${encodeURIComponent(module)}`, {
|
||||
method: "DELETE",
|
||||
});
|
||||
}
|
||||
|
||||
// Envío vía route handler propio (/api/correos) → POST /api/email/send con
|
||||
// X-Module + X-Api-Key en el servidor (la clave nunca va en el bundle).
|
||||
// Reenvía el Bearer de admin para que el route verifique el rol.
|
||||
export async function sendModuleEmail(data: {
|
||||
to: string | string[];
|
||||
templateKey?: string;
|
||||
subject?: string;
|
||||
htmlBody?: string;
|
||||
vars?: Record<string, string | null>;
|
||||
}) {
|
||||
const token =
|
||||
typeof window !== "undefined" ? localStorage.getItem("helpdesk_token") : null;
|
||||
const res = await fetch("/api/correos", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
...(token ? { Authorization: `Bearer ${token}` } : {}),
|
||||
},
|
||||
body: JSON.stringify(data),
|
||||
});
|
||||
const payload = await res.json().catch(() => ({}));
|
||||
if (!res.ok) {
|
||||
throw new Error(
|
||||
(payload as { message?: string }).message || `Error de envío: ${res.status}`
|
||||
);
|
||||
}
|
||||
return payload as { success: boolean; sent?: number; failed?: number; message?: string };
|
||||
}
|
||||
|
||||
export async function sendTestEmail(to: string) {
|
||||
return fetchApi<{ success: boolean; message?: string }>("/api/helpdesk/email/test", {
|
||||
method: "POST",
|
||||
body: JSON.stringify({ to }),
|
||||
return sendModuleEmail({
|
||||
to,
|
||||
subject: "[HelpDesk] Prueba de correo",
|
||||
htmlBody: `<p>Prueba de envío desde la Mesa de Ayuda ICHN (${new Date().toISOString().slice(0, 16).replace("T", " ")} UTC).</p><p>Vía banco <code>mail.templates</code> + <code>POST /api/email/send</code> (módulo helpdesk).</p>`,
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
@@ -31,7 +31,8 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
|
||||
.catch(() => localStorage.removeItem("helpdesk_token"))
|
||||
.finally(() => setIsLoading(false));
|
||||
} else {
|
||||
setIsLoading(false);
|
||||
// Diferido (no sincrónico en el effect) para no disparar cascading renders.
|
||||
queueMicrotask(() => setIsLoading(false));
|
||||
}
|
||||
}, []);
|
||||
|
||||
|
||||
Reference in new issue
Block a user