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>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user