app V1 completada

AGENTS.md

@@ -0,0 +1,47 @@
+# Repository Guidelines
+
+## Project Structure & Module Organization
+- `node-api/`: Node.js Express service (ES modules).
+  - `src/app.js`: Express app bootstrap; static files served from `public/`.
+  - `src/routes/`: API (`api.js`) and RADIUS hooks (`radius.js`).
+  - `src/services/`: DB (`db.js`), RADIUS/CoA (`radius.js`).
+  - `src/utils/attrs.js`, `src/sse.js`.
+  - `index.js`: entrypoint (schema ensure + server).
+- `frontend/`: Vue 3 + Vite SPA.
+  - `src/`: `App.vue`, components, `styles.css`.
+  - `index.html` and built assets in `dist/` (ignored).
+- `postgres/init/`: SQL schema files.
+- `freeradius/`: server configuration used by docker.
+- `docker-compose.yml`: local stack (node, postgres, freeradius).
+
+## Build, Test, and Development Commands
+- `npm run dev`: build frontend, start full stack with Docker.
+- `npm run restart`: rebuild + recreate containers.
+- `npm run logs`: follow service logs; `npm run down`: stop stack.
+- Frontend dev (hot-reload): `npm --prefix frontend run dev` (proxy to `:3000`).
+- Manual guest cleanup: `POST /api/guests/disable-yesterday`.
+
+## Coding Style & Naming Conventions
+- JavaScript/Node (ESM), Vue SFCs, 2-space indent, semicolons, single quotes.
+- Filenames: kebab-case for files, PascalCase for Vue components, camelCase for vars/functions.
+- Keep modules small and colocate helpers in `src/utils/` or `src/services/`.
+- No formatter configured; match existing style.
+
+## Testing Guidelines
+- No test harness checked in. If adding tests:
+  - API: Jest + Supertest under `node-api/tests/`.
+  - Frontend: Vitest under `frontend/src/__tests__/`.
+  - Prefer small, fast unit tests; name with `*.test.js`.
+
+## Commit & Pull Request Guidelines
+- Follow Conventional Commits where practical (e.g., `feat:`, `fix:`, `chore:`, `style:`). Examples in history: `chore(git): …`, `style(ui): …`.
+- PRs should include:
+  - Summary, rationale, and scope.
+  - Linked issue (if any) and screenshots/GIFs for UI changes.
+  - Notes on migrations (`postgres/init`) or env changes.
+
+## Security & Configuration Tips
+- Do not commit secrets; `.env` is ignored. Configure `RADIUS_SECRET`, PG creds, VLAN/bandwidth via env.
+- DB schema is auto-ensured at startup; initial SQL runs from `postgres/init/` when the volume is new.
+- SSE endpoints stream events at `/api/events`; be mindful of long-lived connections.
+

frontend/src/App.vue

@@ -19,6 +19,13 @@
         <div v-if="showSettingsMenu" class="menu">
           <button @click="openRawDb">ver rawDB</button>
           <button @click="openVlanForm">crear VLAN</button>
+          <hr/>
+          <a class="icon-btn" href="/api/users.csv">Exportar usuarios CSV</a>
+          <a class="icon-btn" href="/api/devices.csv">Exportar dispositivos CSV</a>
+          <a class="icon-btn" href="/api/vlans.csv">Exportar VLANs CSV</a>
+          <button class="icon-btn" @click="openImport('users')">Importar usuarios CSV</button>
+          <button class="icon-btn" @click="openImport('devices')">Importar dispositivos CSV</button>
+          <button class="icon-btn" @click="openImport('vlans')">Importar VLANs CSV</button>
         </div>
       </div>
     </div>
@@ -30,6 +37,9 @@
       <div class="panel-header">
         <div class="panel-title">Eventos FreeRADIUS</div>
         <div class="panel-actions">
+          <span class="chip">Página {{ reqPage+1 }} / {{ Math.max(1, Math.ceil(filteredRequestsAll.length / pageSize)) }}</span>
+          <button class="icon-btn" @click="reqPage=Math.max(0, reqPage-1)">Anterior</button>
+          <button class="icon-btn" @click="reqPage=Math.min(Math.ceil(filteredRequestsAll.length/pageSize)-1, reqPage+1)">Siguiente</button>
           <button class="icon-btn" title="Filtrar" @click="showEventFilters = true"><img class="icon" src="/icons/filter.svg" alt="filtrar"></button>
           <button class="icon-btn" title="Limpiar" @click="clearRequests"><img class="icon" src="/icons/clear.svg" alt="limpiar"></button>
           <button class="icon-btn" title="Test" @click="selfTest"><img class="icon" src="/icons/test.svg" alt="test"></button>
@@ -40,7 +50,7 @@
       </div>
       <div class="scroll">
         <div v-if="loading.requests" class="muted">Cargando eventos…</div>
-        <EventCard v-for="ev in filteredRequests" :key="ev.id" :ev="ev" />
+        <EventCard v-for="ev in pagedRequests" :key="ev.id" :ev="ev" />
       </div>
     </aside>
 
@@ -50,6 +60,10 @@
         <div class="row">
           <div class="panel-title">Usuarios y Dispositivos</div>
           <span class="spacer"></span>
+          <span class="chip" v-if="layoutMode==='user'">Página {{ userPage+1 }} / {{ Math.max(1, Math.ceil(filteredUsersAll.length / pageSize)) }}</span>
+          <span class="chip" v-else>Página {{ devicePage+1 }} / {{ Math.max(1, Math.ceil(devicesAll.length / pageSize)) }}</span>
+          <button class="icon-btn" @click="layoutMode==='user' ? (userPage=Math.max(0,userPage-1)) : (devicePage=Math.max(0,devicePage-1))">Anterior</button>
+          <button class="icon-btn" @click="layoutMode==='user' ? (userPage=Math.min(Math.ceil(filteredUsersAll.length/pageSize)-1,userPage+1)) : (devicePage=Math.min(Math.ceil(devicesAll.length/pageSize)-1,devicePage+1))">Siguiente</button>
           <button class="icon-btn" title="Vista usuarios" @click="layoutMode='user'">
             <img class="icon" src="/icons/layout-users.svg" alt="usuarios"/> Usuarios
           </button>
@@ -71,7 +85,7 @@
               @disconnect="disconnectUser" @edit-device="openDeviceForm" />
           </div>
           <div v-else class="grid">
-            <DispositivoCard v-for="d in devices" :key="d.id" :device="d" :users="usersForDevice(d.id)" :devicesById="devicesById"
+            <DispositivoCard v-for="d in pagedDevices" :key="d.id" :device="d" :users="usersForDevice(d.id)" :devicesById="devicesById"
               :expanded="!!deviceExpanded[d.id]"
               @toggle-expand="deviceExpanded[d.id] = !deviceExpanded[d.id]"
               @edit="openDeviceForm" @disconnect="disconnectDevice" />
@@ -123,6 +137,22 @@
   <Modal :open="showDevice" title="Editar dispositivo" @close="closeDevice">
     <DeviceForm :model="deviceFormModel" @success="onDeviceSaved" @cancel="closeDevice" />
   </Modal>
+
+  <Modal :open="showImport" :title="'Importar ' + importKind + ' CSV'" @close="closeImport">
+    <div class="column" style="gap:8px;">
+      <div class="row" style="gap:8px; align-items:center; flex-wrap:wrap;">
+        <input id="csvFile" ref="importFile" type="file" accept=".csv,text/csv" @change="onImportFile" style="display:none;" />
+        <button class="icon-btn" @click="$refs.importFile.click()">Seleccionar archivo CSV</button>
+        <span class="muted" v-if="importFilename">{{ importFilename }}</span>
+      </div>
+      <textarea v-model="importText" rows="10" placeholder="Pega CSV aquí o selecciona un archivo" style="width:100%; background:transparent; border: 1px solid rgba(255,255,255,.12); color: inherit; padding:8px;"></textarea>
+      <div v-if="importError" class="muted" style="color:#ff6b6b;">{{ importError }}</div>
+      <div class="modal-footer">
+        <button class="icon-btn" @click="closeImport">Cancelar</button>
+        <button class="icon-btn" @click="submitImport">Importar</button>
+      </div>
+    </div>
+  </Modal>
 </template>
 
 <script setup>
@@ -273,7 +303,7 @@ const filteredRequests = computed(() => {
   });
 });
 
-const filteredUsers = computed(() => {
+const filteredUsersAll = computed(() => {
   return users.value.filter(u => {
     if (userFilters.text && !u.username.toLowerCase().includes(userFilters.text.toLowerCase())) return false;
     if (userFilters.status === 'active' && u.disabled) return false;
@@ -281,6 +311,10 @@ const filteredUsers = computed(() => {
     return true;
   });
 });
+const pageSize = 20;
+const userPage = ref(0);
+const filteredUsers = computed(() => filteredUsersAll.value.slice(userPage.value*pageSize, userPage.value*pageSize + pageSize));
+watch([filteredUsersAll, () => layoutMode.value], () => { userPage.value = 0; });
 
 const devicesById = computed(() => {
   const m = {};
@@ -292,6 +326,18 @@ function usersForDevice(id) {
   return users.value.filter(u => Array.isArray(u.dispositivos_utilizados) && u.dispositivos_utilizados.includes(id));
 }
 
+// Devices pagination
+const devicesAll = computed(() => devices.value);
+const devicePage = ref(0);
+const pagedDevices = computed(() => devicesAll.value.slice(devicePage.value*pageSize, devicePage.value*pageSize + pageSize));
+watch([devicesAll, () => layoutMode.value], () => { devicePage.value = 0; });
+
+// Requests pagination (sidebar)
+const filteredRequestsAll = computed(() => filteredRequests.value);
+const reqPage = ref(0);
+const pagedRequests = computed(() => filteredRequestsAll.value.slice(reqPage.value*pageSize, reqPage.value*pageSize + pageSize));
+watch(filteredRequestsAll, () => { reqPage.value = 0; });
+
 // Persist expansion state
 watch(userExpanded, (v) => {
   try { localStorage.setItem('ui_userExpanded', JSON.stringify(v)); } catch {}
@@ -342,6 +388,67 @@ const deviceFormModel = ref({});
 function openDeviceForm(d) { deviceFormModel.value = d; showDevice.value = true; }
 function closeDevice() { showDevice.value = false; }
 async function onDeviceSaved() { showDevice.value = false; await fetchDevices(); }
+
+// Import CSV modal
+const showImport = ref(false);
+const importKind = ref('users');
+const importText = ref('');
+const importFilename = ref('');
+const importError = ref('');
+function openImport(kind){ importKind.value = kind; importText.value=''; showImport.value = true; }
+function closeImport(){ showImport.value = false; }
+async function submitImport(){
+  importError.value = '';
+  const txt = (importText.value || '').trim();
+  if (!txt) { importError.value = 'El CSV está vacío.'; return; }
+  // Basic header validation
+  const headers = getCsvHeaders(txt);
+  if (!headers.length) { importError.value = 'No se encontraron columnas en el CSV.'; return; }
+  const need = (k)=>headers.includes(k);
+  if (importKind.value === 'users') {
+    const missing = ['username','password'].filter(c=>!need(c));
+    if (missing.length) { importError.value = `CSV de usuarios requiere columnas: username,password. Faltantes: ${missing.join(', ')}`; return; }
+  } else if (importKind.value === 'devices') {
+    const missing = ['mac'].filter(c=>!need(c));
+    if (missing.length) { importError.value = `CSV de dispositivos requiere columna: mac.`; return; }
+  } else if (importKind.value === 'vlans') {
+    const missing = ['id'].filter(c=>!need(c));
+    if (missing.length) { importError.value = `CSV de VLANs requiere columna: id.`; return; }
+  }
+  try {
+    const ep = importKind.value === 'users' ? '/api/users/import' : importKind.value === 'devices' ? '/api/devices/import' : '/api/vlans/import';
+    await fetch(ep, { method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({ csv: importText.value }) });
+    showImport.value = false;
+    await Promise.all([fetchUsers(), fetchDevices()]);
+  } catch {}
+}
+
+function onImportFile(e){
+  const f = e.target.files && e.target.files[0];
+  if (!f) return;
+  importFilename.value = f.name;
+  const reader = new FileReader();
+  reader.onload = () => { importText.value = String(reader.result || ''); };
+  reader.readAsText(f, 'utf-8');
+  e.target.value = '';
+}
+
+function getCsvHeaders(text){
+  const lines = text.split(/\r?\n/).filter(l=>l.trim().length>0);
+  if (!lines.length) return [];
+  const line = lines[0];
+  const out=[]; let cur=''; let q=false;
+  for (let i=0;i<line.length;i++){
+    const ch=line[i];
+    if (ch==='"'){
+      if (q && line[i+1]==='"'){ cur+='"'; i++; }
+      else { q=!q; }
+    } else if (ch===',' && !q){ out.push(cur.trim().toLowerCase()); cur=''; }
+    else { cur+=ch; }
+  }
+  out.push(cur.trim().toLowerCase());
+  return out;
+}
 function openSettings() { showSettingsMenu.value = !showSettingsMenu.value; }
 function openEditUser(u) {
   userFormMode.value = 'edit';

node-api/src/routes/api.js

@@ -104,6 +104,136 @@ router.get('/requests.csv', (_req, res) => {
   res.send(csv);
 });
 
+// Export CSV: users, devices, vlans
+router.get('/users.csv', async (_req, res) => {
+  const items = await readUsersFromDb();
+  const cols = ['username','password','vlan','disabled','etiquetas','created_at','updated_at','habilitado_since'];
+  const esc = (v) => {
+    const s = v == null ? '' : Array.isArray(v) ? v.join(';') : String(v);
+    return /[",\n]/.test(s) ? '"' + s.replace(/"/g, '""') + '"' : s;
+  };
+  const lines = [cols.join(',')];
+  for (const u of items) {
+    lines.push([u.username,u.password,u.vlan,u.disabled ? 'true':'false',u.etiquetas||[],u.created_at||'',u.updated_at||'',u.habilitado_since||''].map(esc).join(','));
+  }
+  res.setHeader('Content-Type','text/csv; charset=utf-8');
+  res.setHeader('Content-Disposition','attachment; filename="users.csv"');
+  res.send(lines.join('\n'));
+});
+
+router.get('/devices.csv', async (_req, res) => {
+  const r = await pool.query('SELECT id,mac,nombre,descripcion,vendor,first_seen,last_seen FROM dispositivos ORDER BY id ASC');
+  const cols = ['id','mac','nombre','descripcion','vendor','first_seen','last_seen'];
+  const esc = (v) => {
+    const s = v == null ? '' : String(v);
+    return /[",\n]/.test(s) ? '"' + s.replace(/"/g, '""') + '"' : s;
+  };
+  const lines = [cols.join(',')];
+  for (const d of r.rows) lines.push(cols.map(c => esc(d[c])).join(','));
+  res.setHeader('Content-Type','text/csv; charset=utf-8');
+  res.setHeader('Content-Disposition','attachment; filename="devices.csv"');
+  res.send(lines.join('\n'));
+});
+
+router.get('/vlans.csv', async (_req, res) => {
+  const r = await pool.query('SELECT id,nombre,descripcion FROM vlans ORDER BY id ASC');
+  const cols = ['id','nombre','descripcion'];
+  const esc = (v) => {
+    const s = v == null ? '' : String(v);
+    return /[",\n]/.test(s) ? '"' + s.replace(/"/g, '""') + '"' : s;
+  };
+  const lines = [cols.join(',')];
+  for (const d of r.rows) lines.push(cols.map(c => esc(d[c])).join(','));
+  res.setHeader('Content-Type','text/csv; charset=utf-8');
+  res.setHeader('Content-Disposition','attachment; filename="vlans.csv"');
+  res.send(lines.join('\n'));
+});
+
+// Import CSV: expect JSON { csv: string }
+function parseCsv(str){
+  const rows=[]; let i=0, cur='', row=[], inq=false; for(; i<str.length; i++){ const ch=str[i]; if(ch==='"'){ if(inq && str[i+1]==='"'){ cur+='"'; i++; } else { inq=!inq; } } else if(ch===',' && !inq){ row.push(cur); cur=''; } else if((ch==='\n' || ch==='\r') && !inq){ if(ch==='\r' && str[i+1]==='\n') i++; row.push(cur); rows.push(row); row=[]; cur=''; } else { cur+=ch; } } if(cur.length||row.length) { row.push(cur); rows.push(row); } return rows; }
+
+router.post('/users/import', async (req, res) => {
+  try {
+    const csv = String((req.body && req.body.csv) || '');
+    const rows = parseCsv(csv).filter(r => r.length>1);
+    if (rows.length === 0) return res.json({ ok: true, count: 0 });
+    const header = rows[0].map(s=>s.trim().toLowerCase());
+    const idx = (k) => header.indexOf(k);
+    let count=0;
+    for (let r of rows.slice(1)) {
+      const user = {
+        username: r[idx('username')]?.trim(),
+        password: r[idx('password')] ?? '',
+        vlan: r[idx('vlan')] ?? '',
+        disabled: /^(true|1|yes)$/i.test(r[idx('disabled')] || ''),
+      };
+      const tags = r[idx('etiquetas')] || '';
+      if (tags) user.etiquetas = String(tags).split(/[;,|]/).map(s=>s.trim()).filter(Boolean).slice(0,100);
+      if (user.username && user.password) { await upsertUserToDb(user); count++; }
+    }
+    res.json({ ok: true, count });
+  } catch (e) {
+    console.error('POST /api/users/import error:', e?.message || e);
+    res.status(500).json({ ok: false, error: 'import_error' });
+  }
+});
+
+router.post('/devices/import', async (req, res) => {
+  try {
+    const csv = String((req.body && req.body.csv) || '');
+    const rows = parseCsv(csv).filter(r => r.length>1);
+    if (rows.length === 0) return res.json({ ok: true, count: 0 });
+    const header = rows[0].map(s=>s.trim().toLowerCase());
+    const idx = (k) => header.indexOf(k);
+    let count=0;
+    for (let r of rows.slice(1)) {
+      const mac = r[idx('mac')]?.trim();
+      if (!mac) continue;
+      const nombre = r[idx('nombre')] || null;
+      const descripcion = r[idx('descripcion')] || null;
+      const vendor = r[idx('vendor')] || null;
+      await pool.query(
+        `INSERT INTO dispositivos (mac,nombre,descripcion,vendor) VALUES ($1,$2,$3,$4)
+         ON CONFLICT (mac) DO UPDATE SET nombre=EXCLUDED.nombre, descripcion=EXCLUDED.descripcion, vendor=EXCLUDED.vendor, last_seen=NOW()`,
+        [mac, nombre, descripcion, vendor]
+      );
+      count++;
+    }
+    res.json({ ok: true, count });
+  } catch (e) {
+    console.error('POST /api/devices/import error:', e?.message || e);
+    res.status(500).json({ ok: false, error: 'import_error' });
+  }
+});
+
+router.post('/vlans/import', async (req, res) => {
+  try {
+    const csv = String((req.body && req.body.csv) || '');
+    const rows = parseCsv(csv).filter(r => r.length>1);
+    if (rows.length === 0) return res.json({ ok: true, count: 0 });
+    const header = rows[0].map(s=>s.trim().toLowerCase());
+    const idx = (k) => header.indexOf(k);
+    let count=0;
+    for (let r of rows.slice(1)) {
+      const id = parseInt(r[idx('id')]||'',10);
+      if (!Number.isInteger(id)) continue;
+      const nombre = r[idx('nombre')] || null;
+      const descripcion = r[idx('descripcion')] || null;
+      await pool.query(
+        `INSERT INTO vlans (id,nombre,descripcion) VALUES ($1,$2,$3)
+         ON CONFLICT (id) DO UPDATE SET nombre=EXCLUDED.nombre, descripcion=EXCLUDED.descripcion`,
+        [id, nombre, descripcion]
+      );
+      count++;
+    }
+    res.json({ ok: true, count });
+  } catch (e) {
+    console.error('POST /api/vlans/import error:', e?.message || e);
+    res.status(500).json({ ok: false, error: 'import_error' });
+  }
+});
+
 // SSE events
 router.get('/events', (req, res) => {
   registerSse(req, res, {});