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,228 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState, useCallback } from "react";
|
||||
import {
|
||||
getGroups,
|
||||
createGroup,
|
||||
updateGroup,
|
||||
deleteGroup,
|
||||
type Group,
|
||||
} from "@/lib/api";
|
||||
import Modal from "@/components/Modal";
|
||||
|
||||
export default function DepartmentsPage() {
|
||||
const [groups, setGroups] = useState<Group[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState("");
|
||||
const [showModal, setShowModal] = useState(false);
|
||||
const [editing, setEditing] = useState<Group | null>(null);
|
||||
const [name, setName] = useState("");
|
||||
const [description, setDescription] = useState("");
|
||||
const [isActive, setIsActive] = useState(true);
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [modalError, setModalError] = useState("");
|
||||
|
||||
const fetchGroups = useCallback(async () => {
|
||||
setLoading(true);
|
||||
setError("");
|
||||
try {
|
||||
setGroups(await getGroups());
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : "Error al cargar");
|
||||
setGroups([]);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
fetchGroups();
|
||||
}, [fetchGroups]);
|
||||
|
||||
const openCreate = () => {
|
||||
setEditing(null);
|
||||
setName("");
|
||||
setDescription("");
|
||||
setIsActive(true);
|
||||
setModalError("");
|
||||
setShowModal(true);
|
||||
};
|
||||
|
||||
const openEdit = (g: Group) => {
|
||||
setEditing(g);
|
||||
setName(g.name);
|
||||
setDescription(g.description || "");
|
||||
setIsActive(g.isActive);
|
||||
setModalError("");
|
||||
setShowModal(true);
|
||||
};
|
||||
|
||||
const handleSubmit = async () => {
|
||||
if (!name.trim()) {
|
||||
setModalError("El nombre es requerido");
|
||||
return;
|
||||
}
|
||||
setSaving(true);
|
||||
setModalError("");
|
||||
try {
|
||||
if (editing) {
|
||||
await updateGroup(editing.id, {
|
||||
name: name.trim(),
|
||||
description: description.trim() || undefined,
|
||||
isActive,
|
||||
});
|
||||
} else {
|
||||
await createGroup({ name: name.trim(), description: description.trim() || undefined });
|
||||
}
|
||||
setShowModal(false);
|
||||
fetchGroups();
|
||||
} catch (err) {
|
||||
setModalError(err instanceof Error ? err.message : "Error al guardar");
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDelete = async (g: Group) => {
|
||||
if (!confirm(`¿Eliminar el departamento "${g.name}"?`)) return;
|
||||
setError("");
|
||||
try {
|
||||
await deleteGroup(g.id);
|
||||
fetchGroups();
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : "Error al eliminar");
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="page-header">
|
||||
<h1>Departamentos</h1>
|
||||
<button className="btn btn-primary" onClick={openCreate}>
|
||||
<i className="bi bi-plus-lg me-2"></i>
|
||||
Nuevo Departamento
|
||||
</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>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>
|
||||
) : groups.length === 0 ? (
|
||||
<tr>
|
||||
<td colSpan={4} className="empty-state">
|
||||
<i className="bi bi-diagram-3 d-block"></i>
|
||||
<h5>Sin departamentos</h5>
|
||||
<p className="text-muted mb-0">Crea el primero para organizar los tickets</p>
|
||||
</td>
|
||||
</tr>
|
||||
) : (
|
||||
groups.map((g) => (
|
||||
<tr key={g.id}>
|
||||
<td className="fw-semibold">{g.name}</td>
|
||||
<td className="text-muted">{g.description || "—"}</td>
|
||||
<td>
|
||||
{g.isActive ? (
|
||||
<span className="badge bg-success">Activo</span>
|
||||
) : (
|
||||
<span className="badge bg-secondary">Inactivo</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="text-end">
|
||||
<button
|
||||
className="btn btn-sm btn-outline-primary me-2"
|
||||
onClick={() => openEdit(g)}
|
||||
title="Editar"
|
||||
>
|
||||
<i className="bi bi-pencil"></i>
|
||||
</button>
|
||||
<button
|
||||
className="btn btn-sm btn-outline-danger"
|
||||
onClick={() => handleDelete(g)}
|
||||
title="Eliminar"
|
||||
>
|
||||
<i className="bi bi-trash"></i>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
))
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Modal
|
||||
show={showModal}
|
||||
title={editing ? "Editar Departamento" : "Nuevo Departamento"}
|
||||
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: Soporte Nivel 1"
|
||||
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>
|
||||
{editing && (
|
||||
<div className="form-check form-switch">
|
||||
<input
|
||||
className="form-check-input"
|
||||
type="checkbox"
|
||||
role="switch"
|
||||
checked={isActive}
|
||||
onChange={(e) => setIsActive(e.target.checked)}
|
||||
id="deptActive"
|
||||
/>
|
||||
<label className="form-check-label" htmlFor="deptActive">
|
||||
Activo
|
||||
</label>
|
||||
</div>
|
||||
)}
|
||||
</Modal>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,267 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState, useCallback } from "react";
|
||||
import {
|
||||
getTeam,
|
||||
addMember,
|
||||
updateMember,
|
||||
getGroups,
|
||||
type TeamMember,
|
||||
type Group,
|
||||
} from "@/lib/api";
|
||||
import Modal from "@/components/Modal";
|
||||
|
||||
export default function TeamPage() {
|
||||
const [team, setTeam] = useState<TeamMember[]>([]);
|
||||
const [groups, setGroups] = useState<Group[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState("");
|
||||
const [showModal, setShowModal] = useState(false);
|
||||
const [editing, setEditing] = useState<TeamMember | null>(null);
|
||||
const [idUsuario, setIdUsuario] = useState("");
|
||||
const [role, setRole] = useState("agent");
|
||||
const [departmentId, setDepartmentId] = useState("");
|
||||
const [isActive, setIsActive] = useState(true);
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [modalError, setModalError] = useState("");
|
||||
|
||||
const fetchData = useCallback(async () => {
|
||||
setLoading(true);
|
||||
setError("");
|
||||
try {
|
||||
const [t, g] = await Promise.all([getTeam(), getGroups()]);
|
||||
setTeam(t);
|
||||
setGroups(g.filter((x) => x.isActive));
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : "Error al cargar");
|
||||
setTeam([]);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
fetchData();
|
||||
}, [fetchData]);
|
||||
|
||||
const openCreate = () => {
|
||||
setEditing(null);
|
||||
setIdUsuario("");
|
||||
setRole("agent");
|
||||
setDepartmentId("");
|
||||
setIsActive(true);
|
||||
setModalError("");
|
||||
setShowModal(true);
|
||||
};
|
||||
|
||||
const openEdit = (m: TeamMember) => {
|
||||
setEditing(m);
|
||||
setIdUsuario(m.idUsuario);
|
||||
setRole(m.role || "agent");
|
||||
setDepartmentId(m.departmentId ? String(m.departmentId) : "");
|
||||
setIsActive(m.isActive !== false && m.activo !== 0);
|
||||
setModalError("");
|
||||
setShowModal(true);
|
||||
};
|
||||
|
||||
const handleSubmit = async () => {
|
||||
if (!idUsuario.trim()) {
|
||||
setModalError("El ID de usuario es requerido (debe existir en SAM)");
|
||||
return;
|
||||
}
|
||||
setSaving(true);
|
||||
setModalError("");
|
||||
try {
|
||||
const dept = departmentId ? parseInt(departmentId, 10) : undefined;
|
||||
if (editing) {
|
||||
await updateMember(editing.idUsuario, { role, departmentId: dept, isActive });
|
||||
} else {
|
||||
await addMember({ idUsuario: idUsuario.trim(), role, departmentId: dept });
|
||||
}
|
||||
setShowModal(false);
|
||||
fetchData();
|
||||
} catch (err) {
|
||||
setModalError(err instanceof Error ? err.message : "Error al guardar");
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
const toggleActive = async (m: TeamMember) => {
|
||||
setError("");
|
||||
try {
|
||||
await updateMember(m.idUsuario, { isActive: !(m.activo !== 0) });
|
||||
fetchData();
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : "Error al actualizar");
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="page-header">
|
||||
<h1>Equipo de Soporte</h1>
|
||||
<button className="btn btn-primary" onClick={openCreate}>
|
||||
<i className="bi bi-person-plus me-2"></i>
|
||||
Agregar Integrante
|
||||
</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>ID Usuario</th>
|
||||
<th>Email</th>
|
||||
<th>Departamento</th>
|
||||
<th>Rol</th>
|
||||
<th>Estado</th>
|
||||
<th className="text-end">Acciones</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>
|
||||
) : team.length === 0 ? (
|
||||
<tr>
|
||||
<td colSpan={7} className="empty-state">
|
||||
<i className="bi bi-people d-block"></i>
|
||||
<h5>Sin integrantes</h5>
|
||||
<p className="text-muted mb-0">Agrega usuarios de SAM al equipo de soporte</p>
|
||||
</td>
|
||||
</tr>
|
||||
) : (
|
||||
team.map((m) => {
|
||||
const active = m.activo !== 0;
|
||||
return (
|
||||
<tr key={m.idUsuario} className={active ? "" : "text-muted"}>
|
||||
<td className="fw-semibold">
|
||||
{m.nombres} {m.apPaterno}
|
||||
</td>
|
||||
<td>
|
||||
<code>{m.idUsuario}</code>
|
||||
</td>
|
||||
<td>{m.email || "—"}</td>
|
||||
<td>{m.departmentName || "—"}</td>
|
||||
<td>
|
||||
{m.role === "admin" ? (
|
||||
<span className="badge bg-primary">Admin</span>
|
||||
) : (
|
||||
<span className="badge bg-info text-dark">Agente</span>
|
||||
)}
|
||||
</td>
|
||||
<td>
|
||||
{active ? (
|
||||
<span className="badge bg-success">Activo</span>
|
||||
) : (
|
||||
<span className="badge bg-secondary">Inactivo</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="text-end">
|
||||
<button
|
||||
className="btn btn-sm btn-outline-primary me-2"
|
||||
onClick={() => openEdit(m)}
|
||||
title="Editar"
|
||||
>
|
||||
<i className="bi bi-pencil"></i>
|
||||
</button>
|
||||
<button
|
||||
className={`btn btn-sm ${active ? "btn-outline-warning" : "btn-outline-success"}`}
|
||||
onClick={() => toggleActive(m)}
|
||||
title={active ? "Desactivar" : "Activar"}
|
||||
>
|
||||
<i className={`bi ${active ? "bi-pause" : "bi-play"}`}></i>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Modal
|
||||
show={showModal}
|
||||
title={editing ? "Editar Integrante" : "Agregar Integrante"}
|
||||
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">ID Usuario (SAM) *</label>
|
||||
<input
|
||||
type="text"
|
||||
className="form-control"
|
||||
value={idUsuario}
|
||||
onChange={(e) => setIdUsuario(e.target.value)}
|
||||
placeholder="ej: 14399848"
|
||||
disabled={!!editing}
|
||||
autoFocus
|
||||
/>
|
||||
<div className="form-text">Debe existir como usuario activo en SAM.</div>
|
||||
</div>
|
||||
<div className="row g-3">
|
||||
<div className="col-md-6">
|
||||
<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="admin">Admin</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className="col-md-6">
|
||||
<label className="form-label">Departamento</label>
|
||||
<select
|
||||
className="form-select"
|
||||
value={departmentId}
|
||||
onChange={(e) => setDepartmentId(e.target.value)}
|
||||
>
|
||||
<option value="">Sin asignar</option>
|
||||
{groups.map((g) => (
|
||||
<option key={g.id} value={g.id}>
|
||||
{g.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</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="memberActive"
|
||||
/>
|
||||
<label className="form-check-label" htmlFor="memberActive">
|
||||
Activo en el equipo
|
||||
</label>
|
||||
</div>
|
||||
)}
|
||||
</Modal>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,60 @@
|
||||
"use client";
|
||||
|
||||
import React from "react";
|
||||
|
||||
// Modal simple sin JS de Bootstrap (controlado por estado).
|
||||
export default function Modal({
|
||||
show,
|
||||
title,
|
||||
onClose,
|
||||
onSubmit,
|
||||
submitLabel = "Guardar",
|
||||
submitting = false,
|
||||
children,
|
||||
}: {
|
||||
show: boolean;
|
||||
title: string;
|
||||
onClose: () => void;
|
||||
onSubmit: () => void;
|
||||
submitLabel?: string;
|
||||
submitting?: boolean;
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
if (!show) return null;
|
||||
return (
|
||||
<>
|
||||
<div className="modal-backdrop fade show" onClick={onClose} />
|
||||
<div className="modal fade show d-block" tabIndex={-1} role="dialog">
|
||||
<div className="modal-dialog" role="document">
|
||||
<div className="modal-content">
|
||||
<div className="modal-header">
|
||||
<h5 className="modal-title">{title}</h5>
|
||||
<button type="button" className="btn-close" onClick={onClose} aria-label="Cerrar" />
|
||||
</div>
|
||||
<div className="modal-body">{children}</div>
|
||||
<div className="modal-footer">
|
||||
<button type="button" className="btn btn-secondary" onClick={onClose}>
|
||||
Cancelar
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-primary"
|
||||
onClick={onSubmit}
|
||||
disabled={submitting}
|
||||
>
|
||||
{submitting ? (
|
||||
<>
|
||||
<span className="spinner-border spinner-border-sm me-2" role="status" />
|
||||
Guardando...
|
||||
</>
|
||||
) : (
|
||||
submitLabel
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -14,6 +14,15 @@ export default function Sidebar() {
|
||||
{ href: "/knowledge-base", icon: "bi-journal-bookmark", label: "Knowledge Base" },
|
||||
];
|
||||
|
||||
const configItems = [
|
||||
{ href: "/settings/departments", icon: "bi-diagram-3", label: "Departamentos" },
|
||||
{ href: "/settings/team", icon: "bi-people", label: "Equipo" },
|
||||
{ href: "/settings/sla", icon: "bi-stopwatch", label: "SLA" },
|
||||
];
|
||||
|
||||
const isActive = (href: string) =>
|
||||
pathname === href || (href !== "/" && pathname.startsWith(href));
|
||||
|
||||
const fullName = user ? `${user.nombres} ${user.apPaterno}` : "Usuario";
|
||||
const initials = user?.nombres
|
||||
?.split(" ")
|
||||
@@ -45,6 +54,22 @@ export default function Sidebar() {
|
||||
<span>{item.label}</span>
|
||||
</Link>
|
||||
))}
|
||||
<div
|
||||
className="text-uppercase mt-3 mb-1 px-3"
|
||||
style={{ fontSize: "0.7rem", letterSpacing: "0.08em", opacity: 0.6 }}
|
||||
>
|
||||
Configuración
|
||||
</div>
|
||||
{configItems.map((item) => (
|
||||
<Link
|
||||
key={item.href}
|
||||
href={item.href}
|
||||
className={`nav-link ${isActive(item.href) ? "active" : ""}`}
|
||||
>
|
||||
<i className={`bi ${item.icon}`}></i>
|
||||
<span>{item.label}</span>
|
||||
</Link>
|
||||
))}
|
||||
</nav>
|
||||
|
||||
<div className="sidebar-user">
|
||||
|
||||
@@ -250,3 +250,87 @@ export interface DashboardStats {
|
||||
criticalTickets: number;
|
||||
dailyCounts: { date: string; count: number }[];
|
||||
}
|
||||
|
||||
// ==================== Departamentos ====================
|
||||
export async function createGroup(data: { name: string; description?: string }) {
|
||||
return fetchApi<Group>("/api/helpdesk/groups", {
|
||||
method: "POST",
|
||||
body: JSON.stringify(data),
|
||||
});
|
||||
}
|
||||
|
||||
export async function updateGroup(
|
||||
id: number,
|
||||
data: { name?: string; description?: string; isActive?: boolean }
|
||||
) {
|
||||
return fetchApi<void>(`/api/helpdesk/groups/${id}`, {
|
||||
method: "PUT",
|
||||
body: JSON.stringify(data),
|
||||
});
|
||||
}
|
||||
|
||||
export async function deleteGroup(id: number) {
|
||||
return fetchApi<void>(`/api/helpdesk/groups/${id}`, { method: "DELETE" });
|
||||
}
|
||||
|
||||
// ==================== Equipo ====================
|
||||
export interface TeamMember extends HelpDeskUser {
|
||||
role: string;
|
||||
departmentId?: number;
|
||||
departmentName?: string;
|
||||
isActive?: boolean;
|
||||
}
|
||||
|
||||
export async function getTeam() {
|
||||
return fetchApi<TeamMember[]>("/api/helpdesk/users");
|
||||
}
|
||||
|
||||
export async function addMember(data: {
|
||||
idUsuario: string;
|
||||
role?: string;
|
||||
departmentId?: number;
|
||||
}) {
|
||||
return fetchApi<TeamMember>("/api/helpdesk/users", {
|
||||
method: "POST",
|
||||
body: JSON.stringify(data),
|
||||
});
|
||||
}
|
||||
|
||||
export async function updateMember(
|
||||
idUsuario: string,
|
||||
data: { role?: string; departmentId?: number; isActive?: boolean }
|
||||
) {
|
||||
return fetchApi<TeamMember>(`/api/helpdesk/users/${encodeURIComponent(idUsuario)}`, {
|
||||
method: "PUT",
|
||||
body: JSON.stringify(data),
|
||||
});
|
||||
}
|
||||
|
||||
// ==================== SLA ====================
|
||||
export async function createSla(data: {
|
||||
name: string;
|
||||
description?: string;
|
||||
responseTimeHours?: number;
|
||||
resolutionTimeHours?: number;
|
||||
}) {
|
||||
return fetchApi<SLAPolicy>("/api/helpdesk/sla", {
|
||||
method: "POST",
|
||||
body: JSON.stringify(data),
|
||||
});
|
||||
}
|
||||
|
||||
export async function updateSla(
|
||||
id: number,
|
||||
data: {
|
||||
name?: string;
|
||||
description?: string;
|
||||
responseTimeHours?: number;
|
||||
resolutionTimeHours?: number;
|
||||
isActive?: boolean;
|
||||
}
|
||||
) {
|
||||
return fetchApi<void>(`/api/helpdesk/sla/${id}`, {
|
||||
method: "PUT",
|
||||
body: JSON.stringify(data),
|
||||
});
|
||||
}
|
||||
Reference in new issue
Block a user