From 3a1fee74e7fadca4f2ada8b69cf631033fa02b13 Mon Sep 17 00:00:00 2001
From: Nurfog <juan.allende@gmail.com>
Date: Thu, 10 Sep 2026 14:47:15 -0300
Subject: [PATCH] =?UTF-8?q?feat:=20p=C3=A1ginas=20de=20configuraci=C3=B3n?=
 =?UTF-8?q?=20(departamentos,=20equipo,=20SLA)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../app/(app)/settings/departments/page.tsx   | 228 +++++++++++++++
 frontend/src/app/(app)/settings/sla/page.tsx  | 256 +++++++++++++++++
 frontend/src/app/(app)/settings/team/page.tsx | 267 ++++++++++++++++++
 frontend/src/components/Modal.tsx             |  60 ++++
 frontend/src/components/Sidebar.tsx           |  25 ++
 frontend/src/lib/api.ts                       |  84 ++++++
 6 files changed, 920 insertions(+)
 create mode 100644 frontend/src/app/(app)/settings/departments/page.tsx
 create mode 100644 frontend/src/app/(app)/settings/sla/page.tsx
 create mode 100644 frontend/src/app/(app)/settings/team/page.tsx
 create mode 100644 frontend/src/components/Modal.tsx

diff --git a/frontend/src/app/(app)/settings/departments/page.tsx b/frontend/src/app/(app)/settings/departments/page.tsx
new file mode 100644
index 0000000..e35d8d8
--- /dev/null
+++ b/frontend/src/app/(app)/settings/departments/page.tsx
@@ -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>
+  );
+}
diff --git a/frontend/src/app/(app)/settings/sla/page.tsx b/frontend/src/app/(app)/settings/sla/page.tsx
new file mode 100644
index 0000000..ac35dac
--- /dev/null
+++ b/frontend/src/app/(app)/settings/sla/page.tsx
@@ -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>
+  );
+}
diff --git a/frontend/src/app/(app)/settings/team/page.tsx b/frontend/src/app/(app)/settings/team/page.tsx
new file mode 100644
index 0000000..d6efb21
--- /dev/null
+++ b/frontend/src/app/(app)/settings/team/page.tsx
@@ -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>
+  );
+}
diff --git a/frontend/src/components/Modal.tsx b/frontend/src/components/Modal.tsx
new file mode 100644
index 0000000..d74647c
--- /dev/null
+++ b/frontend/src/components/Modal.tsx
@@ -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>
+    </>
+  );
+}
diff --git a/frontend/src/components/Sidebar.tsx b/frontend/src/components/Sidebar.tsx
index c794026..1bcc00f 100644
--- a/frontend/src/components/Sidebar.tsx
+++ b/frontend/src/components/Sidebar.tsx
@@ -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">
diff --git a/frontend/src/lib/api.ts b/frontend/src/lib/api.ts
index b6b6d0c..8c479a7 100644
--- a/frontend/src/lib/api.ts
+++ b/frontend/src/lib/api.ts
@@ -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),
+  });
+}