feat: version 2.15.0 -- menu Equipos (inventario de TI con agente GLPI)
Ingesta POST /api/inventory (JSON/XML, token de instalacion), upsert por deviceid, historial de cambios, pestañas Resumen/Equipos/Software/Agentes, detalle con buscador por pestaña y casilla para ocultar actualizaciones/drivers/componentes del software. Migraciones 023 y 024. Diseño en docs/ARQUITECTURA-INVENTARIO.md. Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
This commit is contained in:
Milton Gonzalez
@@ -0,0 +1,486 @@
|
||||
import { useState } from 'react';
|
||||
import { Pencil, Save, Plus, Trash2, Power, Copy, Info } from 'lucide-react';
|
||||
import { useUi } from '../../context/ui-context.jsx';
|
||||
import { useAuth } from '../../context/auth-context.jsx';
|
||||
import { useAsync, useAction } from '../../hooks/useAsync.js';
|
||||
import {
|
||||
listDevices, getDevice, updateDevice, getDevicesDashboard, listSoftware, listSoftwareDevices,
|
||||
listInventoryTokens, createInventoryToken, setInventoryTokenActive, deleteInventoryToken,
|
||||
} from '../../services/devices.js';
|
||||
import { listUsers } from '../../services/users.js';
|
||||
import { listDepartments } from '../../services/departments.js';
|
||||
import { Button } from '../../components/Button.jsx';
|
||||
import { Field } from '../../components/Field.jsx';
|
||||
import { ComboBox } from '../../components/ComboBox.jsx';
|
||||
import { DetailPopup } from '../../components/DetailPopup.jsx';
|
||||
import { SearchInput } from '../../components/SearchInput.jsx';
|
||||
import { ListView } from '../../components/ListView.jsx';
|
||||
import { Tabs } from '../../components/Tabs.jsx';
|
||||
import { Badge } from '../../components/Badge.jsx';
|
||||
import { KpiCard } from '../../components/KpiCard.jsx';
|
||||
|
||||
const KINDS = ['desktop', 'laptop', 'server', 'virtual', 'printer', 'network', 'other'];
|
||||
const fmtDate = (v) => (v ? String(v).slice(0, 16).replace('T', ' ') : '—');
|
||||
const gb = (mb) => (mb ? `${(mb / 1024).toFixed(mb >= 10240 ? 0 : 1)} GB` : '—');
|
||||
const dash = (v) => (v === null || v === undefined || v === '' ? '—' : v);
|
||||
const daysAgo = (v) => (v ? (Date.now() - new Date(String(v).replace(' ', 'T')).getTime()) / 86400000 : Infinity);
|
||||
|
||||
function Row({ label, children }) {
|
||||
return (
|
||||
<div style={{ display: 'flex', gap: 12, padding: '5px 0', fontSize: '.82rem' }}>
|
||||
<span className="text-muted" style={{ width: 150, flexShrink: 0 }}>{label}</span>
|
||||
<span style={{ flex: 1, wordBreak: 'break-word' }}>{children}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function SimpleTable({ columns, rows, empty }) {
|
||||
if (!rows?.length) return <div className="text-muted">{empty}</div>;
|
||||
return (
|
||||
<div className="list-card">
|
||||
<table className="list-table">
|
||||
<thead><tr>{columns.map((c) => <th key={c.key}>{c.label}</th>)}</tr></thead>
|
||||
<tbody>
|
||||
{rows.map((r, i) => (
|
||||
<tr key={r.id ?? i}>{columns.map((c) => <td key={c.key}>{c.render ? c.render(r) : dash(r[c.key])}</td>)}</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function DeviceDetail({ id, onClose, onChanged }) {
|
||||
const { t, pushToast } = useUi();
|
||||
const runAction = useAction();
|
||||
const { data: device, reload } = useAsync(() => getDevice(id), [id]);
|
||||
const { data: users } = useAsync(listUsers, []);
|
||||
const { data: departments } = useAsync(listDepartments, []);
|
||||
const [tab, setTab] = useState('general');
|
||||
const [searches, setSearches] = useState({});
|
||||
const [showComponents, setShowComponents] = useState(false);
|
||||
const [editing, setEditing] = useState(false);
|
||||
const [form, setForm] = useState({});
|
||||
|
||||
const flat = (list) => (list || []).flatMap((d) => [d, ...(d.children ? flat(d.children) : [])]);
|
||||
const userOptions = (users || []).map((u) => ({ value: u.id, label: u.name }));
|
||||
const deptOptions = flat(departments).map((d) => ({ value: d.id, label: d.name }));
|
||||
|
||||
function startEdit() {
|
||||
setForm({
|
||||
status: device.status,
|
||||
assignedUserId: device.assigned_user_id || '',
|
||||
departmentId: device.department_id || '',
|
||||
notes: device.notes || '',
|
||||
});
|
||||
setEditing(true);
|
||||
}
|
||||
|
||||
function save() {
|
||||
const changed = form.status !== device.status
|
||||
|| Number(form.assignedUserId || 0) !== Number(device.assigned_user_id || 0)
|
||||
|| Number(form.departmentId || 0) !== Number(device.department_id || 0)
|
||||
|| form.notes !== (device.notes || '');
|
||||
if (!changed) { setEditing(false); return; }
|
||||
runAction(async () => {
|
||||
await updateDevice(id, {
|
||||
status: form.status,
|
||||
assignedUserId: form.assignedUserId ? Number(form.assignedUserId) : null,
|
||||
departmentId: form.departmentId ? Number(form.departmentId) : null,
|
||||
notes: form.notes,
|
||||
});
|
||||
setEditing(false);
|
||||
await reload();
|
||||
onChanged();
|
||||
pushToast({ tone: 'success', message: t('common_saved') });
|
||||
});
|
||||
}
|
||||
|
||||
if (!device) return <div className="text-muted">{t('common_loading')}</div>;
|
||||
|
||||
const tabs = [
|
||||
{ key: 'general', label: t('eq_tab_general') },
|
||||
{ key: 'hardware', label: t('eq_tab_hardware') },
|
||||
{ key: 'network', label: t('eq_tab_network'), count: device.networks.length },
|
||||
{ key: 'software', label: t('eq_tab_software'), count: device.software.filter((r) => showComponents || !r.is_component).length },
|
||||
{ key: 'history', label: t('eq_tab_history'), count: device.changes.length },
|
||||
];
|
||||
|
||||
// Un buscador por pestaña (su texto se conserva al cambiar de pestaña y volver).
|
||||
const q = (searches[tab] || '').trim().toLowerCase();
|
||||
const hit = (...values) => !q || values.join(' ').toLowerCase().includes(q);
|
||||
const emptyText = q ? t('common_search_no_results') : t('common_empty');
|
||||
const only = (rows, fn) => rows.filter((r) => hit(...fn(r)));
|
||||
const showRows = (list) => list.filter(([label, , text]) => hit(label, text)).map(([label, node]) => <Row key={label} label={label}>{node}</Row>);
|
||||
|
||||
const val = (v) => dash(v);
|
||||
const infoRows = [
|
||||
[t('eq_hostname'), val(device.hostname), device.hostname],
|
||||
[t('eq_kind'), t(`eq_kind_${device.kind}`), t(`eq_kind_${device.kind}`)],
|
||||
[t('eq_manufacturer_model'), val([device.manufacturer, device.model].filter(Boolean).join(' ')), `${device.manufacturer || ''} ${device.model || ''}`],
|
||||
[t('eq_serial'), val(device.serial), device.serial],
|
||||
[t('eq_os'), val([device.os_name, device.os_version].filter(Boolean).join(' ')), `${device.os_name || ''} ${device.os_version || ''}`],
|
||||
[t('eq_domain'), val(device.domain), device.domain],
|
||||
[t('eq_last_user'), val(device.last_user), device.last_user],
|
||||
[t('eq_ip'), val(device.ip_main), device.ip_main],
|
||||
[t('eq_first_seen'), fmtDate(device.first_seen), fmtDate(device.first_seen)],
|
||||
[t('eq_last_seen'), fmtDate(device.last_seen), fmtDate(device.last_seen)],
|
||||
[t('eq_agent'), val(device.agent_version), device.agent_version],
|
||||
];
|
||||
const manualRows = [
|
||||
[t('common_status'), <Badge color={device.status === 'active' ? 'success' : 'muted'}>{t(`eq_status_${device.status}`)}</Badge>, t(`eq_status_${device.status}`)],
|
||||
[t('eq_assigned_to'), val(device.assigned_user_name), device.assigned_user_name],
|
||||
[t('common_department'), val(device.department_name), device.department_name],
|
||||
[t('eq_notes'), <span style={{ whiteSpace: 'pre-wrap' }}>{val(device.notes)}</span>, device.notes],
|
||||
];
|
||||
const cpuText = device.cpus.map((c) => `${c.name || ''}${c.cores ? ` · ${c.cores}c/${c.threads || '?'}t` : ''}`).join(' | ');
|
||||
const hwRows = [
|
||||
[t('eq_cpu'), val(cpuText), cpuText],
|
||||
[t('eq_ram'), gb(device.ram_mb), gb(device.ram_mb)],
|
||||
[t('eq_disk_total'), <>{gb(device.disk_total_mb)} {device.max_disk_used_pct != null && <span className="text-muted">· {t('eq_disk_max_used')} {device.max_disk_used_pct}%</span>}</>, `${gb(device.disk_total_mb)} ${device.max_disk_used_pct ?? ''}`],
|
||||
];
|
||||
const memories = only(device.memories, (r) => [r.slot, gb(r.capacity_mb), r.type, r.speed, r.manufacturer]);
|
||||
const disks = only(device.disks, (r) => [r.model, r.type, gb(r.size_mb), r.serial]);
|
||||
const volumes = only(device.volumes, (r) => [r.mount, r.filesystem, gb(r.total_mb), gb(r.free_mb)]);
|
||||
const monitors = only(device.monitors, (r) => [r.manufacturer, r.model, r.serial]);
|
||||
const hwSection = (title, rows, columns) => (!q || rows.length > 0) && (
|
||||
<>
|
||||
<h4>{title}</h4>
|
||||
<SimpleTable empty={emptyText} rows={rows} columns={columns} />
|
||||
</>
|
||||
);
|
||||
const networks = only(device.networks, (r) => [r.description, r.ip, r.mask, r.gateway, r.mac, r.status]);
|
||||
const software = only(device.software.filter((r) => showComponents || !r.is_component), (r) => [r.name, r.version, r.publisher]);
|
||||
const changes = only(device.changes, (r) => [fmtDate(r.created_at), t(`eq_change_${r.change_type}`), r.field, r.old_value, r.new_value]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Tabs tabs={tabs} active={tab} onChange={setTab} />
|
||||
<div style={{ marginTop: 12 }}>
|
||||
<div className="toolbar" style={{ marginBottom: 10 }}>
|
||||
{tab === 'software' ? (
|
||||
<label className="checkbox-row">
|
||||
<input type="checkbox" checked={showComponents} onChange={(e) => setShowComponents(e.target.checked)} />
|
||||
{t('eq_show_components')}
|
||||
</label>
|
||||
) : <div />}
|
||||
<SearchInput value={searches[tab] || ''} onChange={(v) => setSearches({ ...searches, [tab]: v })} />
|
||||
</div>
|
||||
|
||||
{tab === 'general' && (
|
||||
<>
|
||||
{showRows(infoRows)}
|
||||
<hr style={{ margin: '12px 0', border: 0, borderTop: '1px solid rgb(var(--line))' }} />
|
||||
{!editing ? (
|
||||
<>
|
||||
{showRows(manualRows)}
|
||||
{q && showRows(infoRows).length + showRows(manualRows).length === 0 && <div className="text-muted">{t('common_search_no_results')}</div>}
|
||||
<div style={{ marginTop: 10 }}><Button variant="standard" icon={Pencil} onClick={startEdit}>{t('common_edit')}</Button></div>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Field label={t('common_status')}>
|
||||
<ComboBox
|
||||
options={[{ value: 'active', label: t('eq_status_active') }, { value: 'retired', label: t('eq_status_retired') }]}
|
||||
value={form.status} onChange={(v) => setForm({ ...form, status: v })}
|
||||
/>
|
||||
</Field>
|
||||
<Field label={t('eq_assigned_to')}>
|
||||
<ComboBox options={[{ value: '', label: '—' }, ...userOptions]} value={form.assignedUserId} onChange={(v) => setForm({ ...form, assignedUserId: v })} />
|
||||
</Field>
|
||||
<Field label={t('common_department')}>
|
||||
<ComboBox options={[{ value: '', label: '—' }, ...deptOptions]} value={form.departmentId} onChange={(v) => setForm({ ...form, departmentId: v })} />
|
||||
</Field>
|
||||
<Field label={t('eq_notes')}>
|
||||
<textarea className="textarea" rows={3} value={form.notes} onChange={(e) => setForm({ ...form, notes: e.target.value })} />
|
||||
</Field>
|
||||
<div style={{ display: 'flex', gap: 8 }}>
|
||||
<Button variant="accent" icon={Save} onClick={save}>{t('common_save')}</Button>
|
||||
<Button variant="standard" onClick={() => setEditing(false)}>{t('common_cancel')}</Button>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
|
||||
{tab === 'hardware' && (
|
||||
<>
|
||||
{showRows(hwRows)}
|
||||
{hwSection(t('eq_memories'), memories, [
|
||||
{ key: 'slot', label: t('eq_slot') }, { key: 'capacity_mb', label: t('eq_capacity'), render: (r) => gb(r.capacity_mb) },
|
||||
{ key: 'type', label: t('eq_type') }, { key: 'speed', label: t('eq_speed') }, { key: 'manufacturer', label: t('eq_manufacturer') },
|
||||
])}
|
||||
{hwSection(t('eq_disks'), disks, [
|
||||
{ key: 'model', label: t('eq_model') }, { key: 'type', label: t('eq_type') },
|
||||
{ key: 'size_mb', label: t('eq_capacity'), render: (r) => gb(r.size_mb) }, { key: 'serial', label: t('eq_serial') },
|
||||
])}
|
||||
{hwSection(t('eq_volumes'), volumes, [
|
||||
{ key: 'mount', label: t('eq_mount') }, { key: 'filesystem', label: t('eq_fs') },
|
||||
{ key: 'total_mb', label: t('eq_capacity'), render: (r) => gb(r.total_mb) }, { key: 'free_mb', label: t('eq_free'), render: (r) => gb(r.free_mb) },
|
||||
])}
|
||||
{hwSection(t('eq_monitors'), monitors, [
|
||||
{ key: 'manufacturer', label: t('eq_manufacturer') }, { key: 'model', label: t('eq_model') }, { key: 'serial', label: t('eq_serial') },
|
||||
])}
|
||||
{q && showRows(hwRows).length + memories.length + disks.length + volumes.length + monitors.length === 0 && <div className="text-muted">{t('common_search_no_results')}</div>}
|
||||
</>
|
||||
)}
|
||||
|
||||
{tab === 'network' && (
|
||||
<SimpleTable empty={emptyText} rows={networks} columns={[
|
||||
{ key: 'description', label: t('eq_adapter') }, { key: 'ip', label: 'IP' }, { key: 'mask', label: t('eq_mask') },
|
||||
{ key: 'gateway', label: t('eq_gateway') }, { key: 'mac', label: 'MAC' }, { key: 'status', label: t('common_status') },
|
||||
]} />
|
||||
)}
|
||||
|
||||
{tab === 'software' && (
|
||||
<SimpleTable empty={emptyText} rows={software} columns={[
|
||||
{ key: 'name', label: t('common_name') }, { key: 'version', label: t('eq_version') }, { key: 'publisher', label: t('eq_publisher') },
|
||||
]} />
|
||||
)}
|
||||
|
||||
{tab === 'history' && (
|
||||
<SimpleTable empty={q ? emptyText : t('eq_history_empty')} rows={changes} columns={[
|
||||
{ key: 'created_at', label: t('eq_when'), render: (r) => fmtDate(r.created_at) },
|
||||
{ key: 'change_type', label: t('eq_change'), render: (r) => t(`eq_change_${r.change_type}`) },
|
||||
{ key: 'field', label: t('eq_field') },
|
||||
{ key: 'old_value', label: t('eq_before') }, { key: 'new_value', label: t('eq_after') },
|
||||
]} />
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function SummaryTab() {
|
||||
const { t } = useUi();
|
||||
const { data: kpis } = useAsync(getDevicesDashboard, []);
|
||||
if (!kpis) return <div className="text-muted">{t('common_loading')}</div>;
|
||||
return (
|
||||
<>
|
||||
<div className="kpi-grid">
|
||||
<KpiCard label={t('eq_kpi_total')} value={kpis.total} />
|
||||
<KpiCard label={t('eq_kpi_stale')} value={kpis.stale} />
|
||||
<KpiCard label={t('eq_kpi_disk_full')} value={kpis.diskFull} />
|
||||
<KpiCard label={t('eq_kpi_low_ram')} value={kpis.lowRam} />
|
||||
</div>
|
||||
<div className="kpi-grid">
|
||||
{[['eq_by_os', kpis.byOs, (l) => l], ['eq_by_kind', kpis.byKind, (l) => t(`eq_kind_${l}`)], ['eq_top_software', kpis.topSoftware, (l) => l]].map(([title, rows, fmt]) => (
|
||||
<div key={title} className="kpi-card">
|
||||
<div className="kpi-label" style={{ marginBottom: 6 }}>{t(title)}</div>
|
||||
{rows.length === 0 && <div className="text-muted" style={{ fontSize: '.78rem' }}>{t('common_empty')}</div>}
|
||||
{rows.map((r) => (
|
||||
<div key={r.label} style={{ display: 'flex', justifyContent: 'space-between', fontSize: '.8rem', padding: '2px 0' }}>
|
||||
<span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', marginRight: 8 }}>{fmt(r.label)}</span><strong>{r.value}</strong>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function DevicesTab() {
|
||||
const { t } = useUi();
|
||||
const [search, setSearch] = useState('');
|
||||
const [kind, setKind] = useState('');
|
||||
const [status, setStatus] = useState('active');
|
||||
const [selected, setSelected] = useState(null); // { id, view: 'info' }
|
||||
const { data: devices, reload } = useAsync(() => listDevices({ kind, status }), [kind, status]);
|
||||
|
||||
const kindOptions = [{ value: '', label: t('common_all') }, ...KINDS.map((k) => ({ value: k, label: t(`eq_kind_${k}`) }))];
|
||||
const statusOptions = [
|
||||
{ value: 'active', label: t('eq_status_active') }, { value: 'retired', label: t('eq_status_retired') }, { value: '', label: t('common_all') },
|
||||
];
|
||||
|
||||
const columns = [
|
||||
{ key: 'hostname', label: t('eq_hostname'), render: (r) => <strong>{dash(r.hostname)}</strong> },
|
||||
{ key: 'kind', label: t('eq_kind'), render: (r) => t(`eq_kind_${r.kind}`) },
|
||||
{ key: 'model', label: t('eq_manufacturer_model'), sortValue: (r) => r.model || '', render: (r) => dash([r.manufacturer, r.model].filter(Boolean).join(' ')) },
|
||||
{ key: 'os_name', label: t('eq_os'), render: (r) => dash(r.os_name) },
|
||||
{ key: 'ip_main', label: t('eq_ip'), render: (r) => dash(r.ip_main) },
|
||||
{
|
||||
key: 'actions', label: '', sortable: false,
|
||||
render: (r) => (
|
||||
<span style={{ display: 'flex', gap: 6 }} onClick={(e) => e.stopPropagation()}>
|
||||
<Button size="sm" variant="standard" icon={Info} onClick={() => setSelected({ id: r.id, view: 'info' })}>{t('eq_btn_info')}</Button>
|
||||
</span>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
if (!devices) return <div className="text-muted">{t('common_loading')}</div>;
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="toolbar">
|
||||
<div className="toolbar-left">
|
||||
<div style={{ width: 170 }}><ComboBox options={kindOptions} value={kind} onChange={setKind} /></div>
|
||||
<div style={{ width: 150 }}><ComboBox options={statusOptions} value={status} onChange={setStatus} /></div>
|
||||
</div>
|
||||
<SearchInput value={search} onChange={setSearch} />
|
||||
</div>
|
||||
{devices.length === 0 && !search ? (
|
||||
<div className="text-muted">{t('eq_empty')}</div>
|
||||
) : (
|
||||
<ListView
|
||||
columns={columns} rows={devices} searchValue={search} getRowKey={(r) => r.id}
|
||||
getSearchHaystack={(r) => [r.hostname, r.serial, r.model, r.manufacturer, r.ip_main, r.mac_main, r.last_user, r.assigned_user_name, r.os_name].join(' ')}
|
||||
onRowClick={(r) => setSelected({ id: r.id, view: 'info' })} initialSort={{ key: 'hostname', dir: 1 }}
|
||||
/>
|
||||
)}
|
||||
<DetailPopup open={selected?.view === 'info'} title={t('eq_detail')} onClose={() => setSelected(null)} width={860} height={680}>
|
||||
{selected?.view === 'info' && <DeviceDetail key={selected.id} id={selected.id} onClose={() => setSelected(null)} onChanged={reload} />}
|
||||
</DetailPopup>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function SoftwareTab() {
|
||||
const { t } = useUi();
|
||||
const [search, setSearch] = useState('');
|
||||
const [selected, setSelected] = useState(null);
|
||||
const [showComponents, setShowComponents] = useState(false);
|
||||
const { data: rows } = useAsync(() => listSoftware(showComponents), [showComponents]);
|
||||
const { data: installs } = useAsync(() => (selected ? listSoftwareDevices(selected) : Promise.resolve([])), [selected]);
|
||||
|
||||
if (!rows) return <div className="text-muted">{t('common_loading')}</div>;
|
||||
const columns = [
|
||||
{ key: 'name', label: t('common_name'), render: (r) => <strong>{r.name}</strong> },
|
||||
{ key: 'publisher', label: t('eq_publisher'), render: (r) => dash(r.publisher) },
|
||||
{ key: 'version_count', label: t('eq_versions') },
|
||||
{ key: 'device_count', label: t('eq_installed_on') },
|
||||
];
|
||||
return (
|
||||
<>
|
||||
<div className="toolbar">
|
||||
<label className="checkbox-row">
|
||||
<input type="checkbox" checked={showComponents} onChange={(e) => setShowComponents(e.target.checked)} />
|
||||
{t('eq_show_components')}
|
||||
</label>
|
||||
<SearchInput value={search} onChange={setSearch} />
|
||||
</div>
|
||||
<ListView
|
||||
columns={columns} rows={rows} searchValue={search} getRowKey={(r) => r.name}
|
||||
getSearchHaystack={(r) => `${r.name} ${r.publisher || ''}`} onRowClick={(r) => setSelected(r.name)}
|
||||
initialSort={{ key: 'device_count', dir: -1 }}
|
||||
/>
|
||||
<DetailPopup open={!!selected} title={selected || ''} onClose={() => setSelected(null)} width={620} height={520}>
|
||||
<SimpleTable empty={t('common_loading')} rows={installs || []} columns={[
|
||||
{ key: 'hostname', label: t('eq_hostname') }, { key: 'version', label: t('eq_version') }, { key: 'last_user', label: t('eq_last_user') },
|
||||
]} />
|
||||
</DetailPopup>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function AgentsTab() {
|
||||
const { t, pushToast, openDialog } = useUi();
|
||||
const runAction = useAction();
|
||||
const { data: tokens, reload } = useAsync(listInventoryTokens, []);
|
||||
const [label, setLabel] = useState('');
|
||||
const [created, setCreated] = useState(null); // { label, token } mostrado UNA vez
|
||||
const serverUrl = `${window.location.origin}/api/inventory`;
|
||||
|
||||
function create() {
|
||||
runAction(async () => {
|
||||
const res = await createInventoryToken(label.trim());
|
||||
setLabel('');
|
||||
setCreated(res);
|
||||
await reload();
|
||||
});
|
||||
}
|
||||
|
||||
function copy(text) {
|
||||
navigator.clipboard?.writeText(text).then(() => pushToast({ tone: 'success', message: t('eq_copied') })).catch(() => {});
|
||||
}
|
||||
|
||||
function confirmDelete(tk) {
|
||||
openDialog({
|
||||
tone: 'warning', title: t('common_confirm_delete_title'), message: t('eq_token_delete_msg'),
|
||||
actions: [
|
||||
{ label: t('common_cancel'), variant: 'standard' },
|
||||
{ label: t('common_delete'), variant: 'danger', onClick: () => runAction(async () => { await deleteInventoryToken(tk.id); await reload(); }) },
|
||||
],
|
||||
});
|
||||
}
|
||||
|
||||
if (!tokens) return <div className="text-muted">{t('common_loading')}</div>;
|
||||
return (
|
||||
<>
|
||||
<div className="kpi-card" style={{ marginBottom: 16 }}>
|
||||
<div className="kpi-label" style={{ marginBottom: 6 }}>{t('eq_agent_setup')}</div>
|
||||
<div style={{ fontSize: '.8rem', marginBottom: 8 }}>{t('eq_agent_setup_hint')}</div>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
|
||||
<code style={{ flex: 1, wordBreak: 'break-all' }}>server = {serverUrl}</code>
|
||||
<button className="icon-btn" onClick={() => copy(serverUrl)}><Copy size={15} /></button>
|
||||
</div>
|
||||
<div style={{ fontSize: '.75rem', marginTop: 8 }} className="text-muted">{t('eq_agent_setup_auth')}</div>
|
||||
</div>
|
||||
|
||||
<div className="toolbar">
|
||||
<div className="toolbar-left">
|
||||
<input className="input" style={{ width: 260 }} placeholder={t('eq_token_label')} value={label} onChange={(e) => setLabel(e.target.value)} />
|
||||
<Button variant="accent" icon={Plus} onClick={create} disabled={!label.trim()}>{t('eq_token_new')}</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{created && (
|
||||
<div className="kpi-card" style={{ marginBottom: 16, borderColor: 'rgb(var(--accent))' }}>
|
||||
<div className="kpi-label">{t('eq_token_created')} <strong>{created.label}</strong></div>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 8, margin: '8px 0' }}>
|
||||
<code style={{ flex: 1, wordBreak: 'break-all' }}>{created.token}</code>
|
||||
<button className="icon-btn" onClick={() => copy(created.token)}><Copy size={15} /></button>
|
||||
</div>
|
||||
<div style={{ fontSize: '.75rem' }} className="text-muted">{t('eq_token_once')}</div>
|
||||
<div style={{ marginTop: 8 }}><Button variant="standard" onClick={() => setCreated(null)}>{t('common_close')}</Button></div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<ListView
|
||||
columns={[
|
||||
{ key: 'label', label: t('eq_token_label'), render: (r) => <strong>{r.label}</strong> },
|
||||
{ key: 'is_active', label: t('common_status'), render: (r) => <Badge color={r.is_active ? 'success' : 'muted'}>{r.is_active ? t('common_active') : t('common_inactive')}</Badge> },
|
||||
{ key: 'last_used_at', label: t('eq_token_last_used'), render: (r) => fmtDate(r.last_used_at) },
|
||||
{ key: 'created_by_name', label: t('eq_token_created_by'), render: (r) => dash(r.created_by_name) },
|
||||
{
|
||||
key: 'actions', label: '', sortable: false,
|
||||
render: (r) => (
|
||||
<span style={{ display: 'flex', gap: 4 }} onClick={(e) => e.stopPropagation()}>
|
||||
<button className="icon-btn" title={r.is_active ? t('eq_token_disable') : t('eq_token_enable')}
|
||||
onClick={() => runAction(async () => { await setInventoryTokenActive(r.id, !r.is_active); await reload(); })}><Power size={15} /></button>
|
||||
<button className="icon-btn" title={t('common_delete')} onClick={() => confirmDelete(r)}><Trash2 size={15} /></button>
|
||||
</span>
|
||||
),
|
||||
},
|
||||
]}
|
||||
rows={tokens} getRowKey={(r) => r.id}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default function EquiposPage() {
|
||||
const { t } = useUi();
|
||||
const { user } = useAuth();
|
||||
const canTokens = ['superadmin', 'admin'].includes(user?.roleCode);
|
||||
const [tab, setTab] = useState('summary');
|
||||
const tabs = [
|
||||
{ key: 'summary', label: t('eq_tab_summary') },
|
||||
{ key: 'devices', label: t('eq_tab_devices') },
|
||||
{ key: 'software', label: t('eq_tab_software_all') },
|
||||
...(canTokens ? [{ key: 'agents', label: t('eq_tab_agents') }] : []),
|
||||
];
|
||||
return (
|
||||
<div>
|
||||
<h2 className="page-title mt-0">{t('nav_devices')}</h2>
|
||||
<Tabs tabs={tabs} active={tab} onChange={setTab} />
|
||||
<div style={{ marginTop: 14 }}>
|
||||
{tab === 'summary' && <SummaryTab />}
|
||||
{tab === 'devices' && <DevicesTab />}
|
||||
{tab === 'software' && <SoftwareTab />}
|
||||
{tab === 'agents' && canTokens && <AgentsTab />}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user