feat: página de plantillas de correo + prueba de envío + bitácora
This commit is contained in:
Nurfog committed
1 parent
a68999eca7
commit
ce008105c9
3 files changed
+402
No files matched your search
@@ -0,0 +1,356 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useEffect, useState, useCallback } from "react";
|
||||||
|
import {
|
||||||
|
getEmailTemplates,
|
||||||
|
updateEmailTemplate,
|
||||||
|
getEmailLog,
|
||||||
|
sendTestEmail,
|
||||||
|
type EmailTemplate,
|
||||||
|
type EmailLogEntry,
|
||||||
|
} from "@/lib/api";
|
||||||
|
import { useAuth } from "@/lib/auth";
|
||||||
|
import Modal from "@/components/Modal";
|
||||||
|
|
||||||
|
const PLACEHOLDERS = [
|
||||||
|
"TicketNumber",
|
||||||
|
"Title",
|
||||||
|
"Description",
|
||||||
|
"Status",
|
||||||
|
"Priority",
|
||||||
|
"RequesterName",
|
||||||
|
"AssigneeName",
|
||||||
|
"Department",
|
||||||
|
"Link",
|
||||||
|
"Comment",
|
||||||
|
"CommentAuthor",
|
||||||
|
];
|
||||||
|
|
||||||
|
export default function EmailPage() {
|
||||||
|
const { user, isLoading: authLoading } = useAuth();
|
||||||
|
const [templates, setTemplates] = useState<EmailTemplate[]>([]);
|
||||||
|
const [log, setLog] = useState<EmailLogEntry[]>([]);
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
const [error, setError] = useState("");
|
||||||
|
const [showModal, setShowModal] = useState(false);
|
||||||
|
const [editing, setEditing] = useState<EmailTemplate | null>(null);
|
||||||
|
const [subject, setSubject] = useState("");
|
||||||
|
const [bodyHtml, setBodyHtml] = useState("");
|
||||||
|
const [isActive, setIsActive] = useState(true);
|
||||||
|
const [saving, setSaving] = useState(false);
|
||||||
|
const [modalError, setModalError] = useState("");
|
||||||
|
const [testTo, setTestTo] = useState("");
|
||||||
|
const [testResult, setTestResult] = useState<{ ok: boolean; text: string } | null>(null);
|
||||||
|
const [testing, setTesting] = useState(false);
|
||||||
|
|
||||||
|
const fetchData = useCallback(async () => {
|
||||||
|
setLoading(true);
|
||||||
|
setError("");
|
||||||
|
try {
|
||||||
|
const [t, l] = await Promise.all([getEmailTemplates(), getEmailLog(50)]);
|
||||||
|
setTemplates(t);
|
||||||
|
setLog(l);
|
||||||
|
} catch (err) {
|
||||||
|
setError(err instanceof Error ? err.message : "Error al cargar");
|
||||||
|
setTemplates([]);
|
||||||
|
setLog([]);
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (authLoading) return;
|
||||||
|
if (user?.role !== "admin") {
|
||||||
|
setLoading(false);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
fetchData();
|
||||||
|
}, [fetchData, authLoading, user?.role]);
|
||||||
|
|
||||||
|
const openEdit = (t: EmailTemplate) => {
|
||||||
|
setEditing(t);
|
||||||
|
setSubject(t.subject);
|
||||||
|
setBodyHtml(t.bodyHtml);
|
||||||
|
setIsActive(t.isActive);
|
||||||
|
setModalError("");
|
||||||
|
setShowModal(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSubmit = async () => {
|
||||||
|
if (!editing) return;
|
||||||
|
if (!subject.trim() || !bodyHtml.trim()) {
|
||||||
|
setModalError("Asunto y cuerpo son requeridos");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
setSaving(true);
|
||||||
|
setModalError("");
|
||||||
|
try {
|
||||||
|
await updateEmailTemplate(editing.key, {
|
||||||
|
subject: subject.trim(),
|
||||||
|
bodyHtml: bodyHtml.trim(),
|
||||||
|
isActive,
|
||||||
|
});
|
||||||
|
setShowModal(false);
|
||||||
|
fetchData();
|
||||||
|
} catch (err) {
|
||||||
|
setModalError(err instanceof Error ? err.message : "Error al guardar");
|
||||||
|
} finally {
|
||||||
|
setSaving(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleTest = async () => {
|
||||||
|
if (!testTo.trim() || !testTo.includes("@")) {
|
||||||
|
setTestResult({ ok: false, text: "Destino inválido" });
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
setTesting(true);
|
||||||
|
setTestResult(null);
|
||||||
|
try {
|
||||||
|
await sendTestEmail(testTo.trim());
|
||||||
|
setTestResult({ ok: true, text: `Correo de prueba enviado a ${testTo.trim()}` });
|
||||||
|
fetchData();
|
||||||
|
} catch (err) {
|
||||||
|
setTestResult({ ok: false, text: err instanceof Error ? err.message : "Error al enviar" });
|
||||||
|
} finally {
|
||||||
|
setTesting(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if (!authLoading && user?.role !== "admin") {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<div className="page-header">
|
||||||
|
<h1>Correo</h1>
|
||||||
|
</div>
|
||||||
|
<div className="alert alert-warning" role="alert">
|
||||||
|
<i className="bi bi-shield-lock me-2"></i>
|
||||||
|
Solo los administradores pueden gestionar las plantillas de correo.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<div className="page-header">
|
||||||
|
<h1>Plantillas de Correo</h1>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{error && (
|
||||||
|
<div className="alert alert-danger" role="alert">
|
||||||
|
<i className="bi bi-exclamation-circle me-2"></i>
|
||||||
|
{error}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="card mb-4">
|
||||||
|
<div className="card-body p-0">
|
||||||
|
<div className="table-responsive">
|
||||||
|
<table className="table table-hover align-middle mb-0">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Plantilla</th>
|
||||||
|
<th>Asunto</th>
|
||||||
|
<th>Estado</th>
|
||||||
|
<th className="text-end">Acciones</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{loading ? (
|
||||||
|
<tr>
|
||||||
|
<td colSpan={4} 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">
|
||||||
|
<i className="bi bi-envelope d-block"></i>
|
||||||
|
<h5>Sin plantillas</h5>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
) : (
|
||||||
|
templates.map((t) => (
|
||||||
|
<tr key={t.key}>
|
||||||
|
<td>
|
||||||
|
<div className="fw-semibold">{t.name}</div>
|
||||||
|
<small className="text-muted">
|
||||||
|
<code>{t.key}</code>
|
||||||
|
</small>
|
||||||
|
</td>
|
||||||
|
<td className="text-muted small">{t.subject}</td>
|
||||||
|
<td>
|
||||||
|
{t.isActive ? (
|
||||||
|
<span className="badge bg-success">Activa</span>
|
||||||
|
) : (
|
||||||
|
<span className="badge bg-secondary">Inactiva</span>
|
||||||
|
)}
|
||||||
|
</td>
|
||||||
|
<td className="text-end">
|
||||||
|
<button
|
||||||
|
className="btn btn-sm btn-outline-primary"
|
||||||
|
onClick={() => openEdit(t)}
|
||||||
|
title="Editar"
|
||||||
|
>
|
||||||
|
<i className="bi bi-pencil"></i>
|
||||||
|
</button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
))
|
||||||
|
)}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="card mb-4">
|
||||||
|
<div className="card-body">
|
||||||
|
<h6 className="fw-semibold mb-3">
|
||||||
|
<i className="bi bi-send me-2"></i>
|
||||||
|
Probar envío
|
||||||
|
</h6>
|
||||||
|
{testResult && (
|
||||||
|
<div className={`alert ${testResult.ok ? "alert-success" : "alert-danger"} py-2`} role="alert">
|
||||||
|
{testResult.text}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<div className="d-flex gap-2">
|
||||||
|
<input
|
||||||
|
type="email"
|
||||||
|
className="form-control"
|
||||||
|
placeholder="destino@ejemplo.cl"
|
||||||
|
value={testTo}
|
||||||
|
onChange={(e) => setTestTo(e.target.value)}
|
||||||
|
style={{ maxWidth: 320 }}
|
||||||
|
/>
|
||||||
|
<button className="btn btn-outline-primary" onClick={handleTest} disabled={testing}>
|
||||||
|
{testing ? (
|
||||||
|
<>
|
||||||
|
<span className="spinner-border spinner-border-sm me-2" role="status" />
|
||||||
|
Enviando...
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
"Enviar prueba"
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<small className="text-muted d-block mt-2">
|
||||||
|
Si falla, revisa la bitácora y la configuración SMTP del backend.
|
||||||
|
</small>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h6 className="fw-semibold mb-2">
|
||||||
|
<i className="bi bi-clock-history me-2"></i>
|
||||||
|
Últimos envíos
|
||||||
|
</h6>
|
||||||
|
<div className="card">
|
||||||
|
<div className="card-body p-0">
|
||||||
|
<div className="table-responsive">
|
||||||
|
<table className="table table-hover align-middle mb-0">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Fecha</th>
|
||||||
|
<th>Plantilla</th>
|
||||||
|
<th>Ticket</th>
|
||||||
|
<th>Destinatario</th>
|
||||||
|
<th>Estado</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{log.length === 0 ? (
|
||||||
|
<tr>
|
||||||
|
<td colSpan={5} className="text-center text-muted py-3">
|
||||||
|
Sin envíos registrados
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
) : (
|
||||||
|
log.map((e) => (
|
||||||
|
<tr key={e.id}>
|
||||||
|
<td className="text-muted small">
|
||||||
|
{new Date(e.createdAt).toLocaleString("es-CL")}
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<code className="small">{e.template}</code>
|
||||||
|
</td>
|
||||||
|
<td>{e.ticketId ? `#${e.ticketId}` : "—"}</td>
|
||||||
|
<td className="small">{e.recipient}</td>
|
||||||
|
<td>
|
||||||
|
{e.status === "sent" ? (
|
||||||
|
<span className="badge bg-success">Enviado</span>
|
||||||
|
) : e.status === "skipped" ? (
|
||||||
|
<span className="badge bg-warning text-dark" title={e.error || ""}>
|
||||||
|
Omitido
|
||||||
|
</span>
|
||||||
|
) : (
|
||||||
|
<span className="badge bg-danger" title={e.error || ""}>
|
||||||
|
Error
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
))
|
||||||
|
)}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Modal
|
||||||
|
show={showModal}
|
||||||
|
title={editing ? `Editar: ${editing.name}` : "Editar plantilla"}
|
||||||
|
onClose={() => setShowModal(false)}
|
||||||
|
onSubmit={handleSubmit}
|
||||||
|
submitting={saving}
|
||||||
|
>
|
||||||
|
{modalError && (
|
||||||
|
<div className="alert alert-danger py-2" role="alert">
|
||||||
|
{modalError}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<div className="mb-3">
|
||||||
|
<label className="form-label">Asunto *</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
className="form-control"
|
||||||
|
value={subject}
|
||||||
|
onChange={(e) => setSubject(e.target.value)}
|
||||||
|
autoFocus
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="mb-3">
|
||||||
|
<label className="form-label">Cuerpo HTML *</label>
|
||||||
|
<textarea
|
||||||
|
className="form-control font-monospace"
|
||||||
|
rows={10}
|
||||||
|
value={bodyHtml}
|
||||||
|
onChange={(e) => setBodyHtml(e.target.value)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="form-check form-switch mb-3">
|
||||||
|
<input
|
||||||
|
className="form-check-input"
|
||||||
|
type="checkbox"
|
||||||
|
role="switch"
|
||||||
|
checked={isActive}
|
||||||
|
onChange={(e) => setIsActive(e.target.checked)}
|
||||||
|
id="tplActive"
|
||||||
|
/>
|
||||||
|
<label className="form-check-label" htmlFor="tplActive">
|
||||||
|
Activa (si no, no se envía)
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div className="alert alert-light border small mb-0">
|
||||||
|
<strong>Variables:</strong>{" "}
|
||||||
|
{PLACEHOLDERS.map((p) => (
|
||||||
|
<code key={p} className="me-1">{`{{${p}}}`}</code>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</Modal>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -18,6 +18,7 @@ export default function Sidebar() {
|
|||||||
{ href: "/settings/departments", icon: "bi-diagram-3", label: "Departamentos" },
|
{ href: "/settings/departments", icon: "bi-diagram-3", label: "Departamentos" },
|
||||||
{ href: "/settings/team", icon: "bi-people", label: "Equipo" },
|
{ href: "/settings/team", icon: "bi-people", label: "Equipo" },
|
||||||
{ href: "/settings/sla", icon: "bi-stopwatch", label: "SLA" },
|
{ href: "/settings/sla", icon: "bi-stopwatch", label: "SLA" },
|
||||||
|
{ href: "/settings/email", icon: "bi-envelope", label: "Correo" },
|
||||||
];
|
];
|
||||||
|
|
||||||
const isActive = (href: string) =>
|
const isActive = (href: string) =>
|
||||||
|
|||||||
@@ -338,3 +338,48 @@ export async function updateSla(
|
|||||||
body: JSON.stringify(data),
|
body: JSON.stringify(data),
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// ==================== Correo / plantillas ====================
|
||||||
|
export interface EmailTemplate {
|
||||||
|
key: string;
|
||||||
|
name: string;
|
||||||
|
subject: string;
|
||||||
|
bodyHtml: string;
|
||||||
|
isActive: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface EmailLogEntry {
|
||||||
|
id: number;
|
||||||
|
template: string;
|
||||||
|
ticketId?: number;
|
||||||
|
recipient: string;
|
||||||
|
subject: string;
|
||||||
|
status: string;
|
||||||
|
error?: string;
|
||||||
|
createdAt: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function getEmailTemplates() {
|
||||||
|
return fetchApi<EmailTemplate[]>("/api/helpdesk/email/templates");
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function updateEmailTemplate(
|
||||||
|
key: string,
|
||||||
|
data: { subject?: string; bodyHtml?: string; isActive?: boolean }
|
||||||
|
) {
|
||||||
|
return fetchApi<void>(`/api/helpdesk/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 sendTestEmail(to: string) {
|
||||||
|
return fetchApi<{ success: boolean; message?: string }>("/api/helpdesk/email/test", {
|
||||||
|
method: "POST",
|
||||||
|
body: JSON.stringify({ to }),
|
||||||
|
});
|
||||||
|
}
|
||||||
Reference in new issue
Block a user