feat: páginas de configuración (departamentos, equipo, SLA)
This commit is contained in:
Nurfog committed
1 parent
7d72970f8a
commit
3a1fee74e7
6 files changed
+920
No files matched your search
@@ -0,0 +1,256 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState, useCallback } from "react";
|
||||
import {
|
||||
getSLAPolicies,
|
||||
createSla,
|
||||
updateSla,
|
||||
type SLAPolicy,
|
||||
} from "@/lib/api";
|
||||
import Modal from "@/components/Modal";
|
||||
|
||||
export default function SlaPage() {
|
||||
const [policies, setPolicies] = useState<SLAPolicy[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState("");
|
||||
const [showModal, setShowModal] = useState(false);
|
||||
const [editing, setEditing] = useState<SLAPolicy | null>(null);
|
||||
const [name, setName] = useState("");
|
||||
const [description, setDescription] = useState("");
|
||||
const [responseHours, setResponseHours] = useState("4");
|
||||
const [resolutionHours, setResolutionHours] = useState("24");
|
||||
const [isActive, setIsActive] = useState(true);
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [modalError, setModalError] = useState("");
|
||||
|
||||
const fetchPolicies = useCallback(async () => {
|
||||
setLoading(true);
|
||||
setError("");
|
||||
try {
|
||||
setPolicies(await getSLAPolicies());
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : "Error al cargar");
|
||||
setPolicies([]);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
fetchPolicies();
|
||||
}, [fetchPolicies]);
|
||||
|
||||
const openCreate = () => {
|
||||
setEditing(null);
|
||||
setName("");
|
||||
setDescription("");
|
||||
setResponseHours("4");
|
||||
setResolutionHours("24");
|
||||
setIsActive(true);
|
||||
setModalError("");
|
||||
setShowModal(true);
|
||||
};
|
||||
|
||||
const openEdit = (p: SLAPolicy) => {
|
||||
setEditing(p);
|
||||
setName(p.name);
|
||||
setDescription(p.description || "");
|
||||
setResponseHours(String(p.responseTimeHours));
|
||||
setResolutionHours(String(p.resolutionTimeHours));
|
||||
setIsActive(p.isActive);
|
||||
setModalError("");
|
||||
setShowModal(true);
|
||||
};
|
||||
|
||||
const handleSubmit = async () => {
|
||||
if (!name.trim()) {
|
||||
setModalError("El nombre es requerido");
|
||||
return;
|
||||
}
|
||||
const resp = parseFloat(responseHours);
|
||||
const resol = parseFloat(resolutionHours);
|
||||
if (isNaN(resp) || resp < 0 || isNaN(resol) || resol < 0) {
|
||||
setModalError("Las horas deben ser números positivos");
|
||||
return;
|
||||
}
|
||||
setSaving(true);
|
||||
setModalError("");
|
||||
try {
|
||||
if (editing) {
|
||||
await updateSla(editing.id, {
|
||||
name: name.trim(),
|
||||
description: description.trim() || undefined,
|
||||
responseTimeHours: resp,
|
||||
resolutionTimeHours: resol,
|
||||
isActive,
|
||||
});
|
||||
} else {
|
||||
await createSla({
|
||||
name: name.trim(),
|
||||
description: description.trim() || undefined,
|
||||
responseTimeHours: resp,
|
||||
resolutionTimeHours: resol,
|
||||
});
|
||||
}
|
||||
setShowModal(false);
|
||||
fetchPolicies();
|
||||
} catch (err) {
|
||||
setModalError(err instanceof Error ? err.message : "Error al guardar");
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="page-header">
|
||||
<h1>Políticas SLA</h1>
|
||||
<button className="btn btn-primary" onClick={openCreate}>
|
||||
<i className="bi bi-plus-lg me-2"></i>
|
||||
Nueva Política
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="alert alert-danger" role="alert">
|
||||
<i className="bi bi-exclamation-circle me-2"></i>
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<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>Nombre</th>
|
||||
<th>Descripción</th>
|
||||
<th>Respuesta (h)</th>
|
||||
<th>Resolución (h)</th>
|
||||
<th>Estado</th>
|
||||
<th className="text-end">Acciones</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{loading ? (
|
||||
<tr>
|
||||
<td colSpan={6} className="text-center py-4">
|
||||
<div className="spinner-border spinner-border-sm text-primary" role="status"></div>
|
||||
</td>
|
||||
</tr>
|
||||
) : policies.length === 0 ? (
|
||||
<tr>
|
||||
<td colSpan={6} className="empty-state">
|
||||
<i className="bi bi-stopwatch d-block"></i>
|
||||
<h5>Sin políticas SLA</h5>
|
||||
<p className="text-muted mb-0">Define los tiempos comprometidos de atención</p>
|
||||
</td>
|
||||
</tr>
|
||||
) : (
|
||||
policies.map((p) => (
|
||||
<tr key={p.id}>
|
||||
<td className="fw-semibold">{p.name}</td>
|
||||
<td className="text-muted">{p.description || "—"}</td>
|
||||
<td>{p.responseTimeHours}</td>
|
||||
<td>{p.resolutionTimeHours}</td>
|
||||
<td>
|
||||
{p.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(p)}
|
||||
title="Editar"
|
||||
>
|
||||
<i className="bi bi-pencil"></i>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
))
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Modal
|
||||
show={showModal}
|
||||
title={editing ? "Editar Política SLA" : "Nueva Política SLA"}
|
||||
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">Nombre *</label>
|
||||
<input
|
||||
type="text"
|
||||
className="form-control"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
placeholder="ej: Crítico"
|
||||
autoFocus
|
||||
/>
|
||||
</div>
|
||||
<div className="mb-3">
|
||||
<label className="form-label">Descripción</label>
|
||||
<textarea
|
||||
className="form-control"
|
||||
rows={2}
|
||||
value={description}
|
||||
onChange={(e) => setDescription(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="row g-3">
|
||||
<div className="col-md-6">
|
||||
<label className="form-label">Respuesta (horas)</label>
|
||||
<input
|
||||
type="number"
|
||||
min={0}
|
||||
step="any"
|
||||
className="form-control"
|
||||
value={responseHours}
|
||||
onChange={(e) => setResponseHours(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="col-md-6">
|
||||
<label className="form-label">Resolución (horas)</label>
|
||||
<input
|
||||
type="number"
|
||||
min={0}
|
||||
step="any"
|
||||
className="form-control"
|
||||
value={resolutionHours}
|
||||
onChange={(e) => setResolutionHours(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{editing && (
|
||||
<div className="form-check form-switch mt-3">
|
||||
<input
|
||||
className="form-check-input"
|
||||
type="checkbox"
|
||||
role="switch"
|
||||
checked={isActive}
|
||||
onChange={(e) => setIsActive(e.target.checked)}
|
||||
id="slaActive"
|
||||
/>
|
||||
<label className="form-check-label" htmlFor="slaActive">
|
||||
Activa
|
||||
</label>
|
||||
</div>
|
||||
)}
|
||||
</Modal>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user