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