first commit

2026-06-03 16:59:27 -04:00
commit b35cc2f54b
36 changed files with 5634 additions and 0 deletions
--- a/.env.example
+++ b/.env.example
@@ -0,0 +1,3 @@
+JWT_SECRET=cambiar-por-un-secreto-largo-y-aleatorio
+# Puerto API (solo desarrollo local sin Docker)
+PORT=4000
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,8 @@
+node_modules/
+dist/
+backend/data/
+*.db
+.env
+.env.local
+.DS_Store
+npm-debug.log*
--- a/README.md
+++ b/README.md
@@ -0,0 +1,134 @@
+# Don Marco — Administración Financiera (LAN)
+
+Aplicación web multiusuario para gestión de **ingresos** (ventas, servicios, alquileres), **egresos** (gastos diarios/fijos), **personal** y **reportes** consolidados. Pensada para operar en la red local de una pequeña empresa con un servidor central.
+
+## 1. Stack tecnológico recomendado
+
+| Capa | Tecnología | Motivo |
+|------|------------|--------|
+| **Frontend** | React 18 + Vite | UI rápida, componentes reutilizables para planillas dinámicas |
+| **Backend** | Node.js + Express | API REST ligera, fácil de mantener en LAN |
+| **Base de datos** | SQLite (`better-sqlite3`) | Almacenamiento local en el servidor, sin instalar MySQL/PostgreSQL |
+| **Auth** | JWT + bcrypt | Sesiones stateless, contraseñas hasheadas |
+| **Despliegue** | Docker Compose + Nginx | Un solo comando en el servidor de la red |
+
+> **Nota:** Aunque mencionaste “almacenamiento local”, para **multiusuario en red** conviene SQLite en el servidor (no `localStorage` del navegador), para que todos vean los mismos datos. El token JWT sí se guarda en `localStorage` del cliente.
+
+## 2. Estructura del proyecto
+
+```
+DonMarcoBackend/
+├── docker-compose.yml
+├── README.md
+├── .env.example
+├── backend/
+│   ├── Dockerfile
+│   ├── package.json
+│   └── src/
+│       ├── index.js
+│       ├── db.js
+│       ├── seed.js
+│       ├── middleware/auth.js
+│       ├── routes/
+│       │   ├── auth.js
+│       │   ├── users.js
+│       │   ├── sheets.js
+│       │   └── reports.js
+│       └── utils/calculations.js
+└── frontend/
+    ├── Dockerfile
+    ├── nginx.conf
+    ├── package.json
+    ├── vite.config.js
+    └── src/
+        ├── App.jsx
+        ├── api/client.js
+        ├── context/AuthContext.jsx
+        ├── components/
+        │   ├── Layout.jsx
+        │   ├── IngresoSheet.jsx
+        │   ├── GastoSheet.jsx
+        │   └── PersonalSheet.jsx
+        ├── pages/
+        │   ├── LoginPage.jsx
+        │   ├── HomePage.jsx
+        │   ├── ReportesPage.jsx
+        │   └── AdminPage.jsx
+        ├── utils/calc.js
+        └── styles/global.css
+```
+
+## 3. Credenciales por defecto
+
+| Usuario | Contraseña | Rol |
+|---------|------------|-----|
+| `JEFE` | `MACAN` | Superusuario / administrador |
+
+**Cambie la contraseña del JEFE en producción** desde el panel de administración o actualizando la base de datos.
+
+## 4. Funcionalidades implementadas
+
+- Login seguro y menú con pestañas (Ventas, Servicios, Alquileres, Gastos, Personal, Reportes, Salir).
+- Panel de administración: crear usuarios, contraseñas y permisos **ver/editar** por planilla.
+- Planillas con filas en blanco al inicio y botón **+** para agregar líneas ilimitadas.
+- Cálculos automáticos: Precio Total, Utilidad, totales de cierre.
+- Gastos con clasificación diario / fijo / variable.
+- Personal: hasta 10 mensualizados y 5 eventuales por registro.
+- Reportes diario, semanal y mensual con filtro de fechas y selección de planillas.
+- Cierre semanal de gastos diarios y consolidado mensual en reportes.
+
+## 5. Ejecución con Docker (recomendado en el servidor LAN)
+
+```bash
+cd DonMarcoBackend
+docker compose up -d --build
+```
+
+Acceso desde cualquier PC de la red:
+
+- **Web:** `http://IP-DEL-SERVIDOR` (puerto 80)
+- **API directa (opcional):** `http://IP-DEL-SERVIDOR:4000/api/health`
+
+## 6. Desarrollo local (sin Docker)
+
+**Terminal 1 — API:**
+
+```bash
+cd backend
+npm install
+npm run dev
+```
+
+**Terminal 2 — Web:**
+
+```bash
+cd frontend
+npm install
+npm run dev
+```
+
+Abrir `http://localhost:3000` (el proxy de Vite redirige `/api` al puerto 4000).
+
+## 7. Variables de entorno
+
+Copie `.env.example` a `.env` y defina al menos:
+
+```env
+JWT_SECRET=un-secreto-largo-unico
+```
+
+En Docker, `JWT_SECRET` se lee desde el entorno del host o del archivo `.env` junto a `docker-compose.yml`.
+
+## 8. Fórmula de reportes
+
+Para diario, semanal y mensual (en el rango de fechas seleccionado):
+
+```
+Resultado = (Ventas + Alquileres + Servicios) − Total Gastos − Total Personal
+```
+
+El sistema indica **UTILIDAD** o **PÉRDIDA** según el signo del resultado neto.
+
+---
+
+Desarrollado como base funcional lista para ampliar (exportación PDF, respaldos automáticos, HTTPS con certificado interno, etc.).
--- a/backend/Dockerfile
+++ b/backend/Dockerfile
@@ -0,0 +1,19 @@
+FROM node:20-alpine
+
+RUN apk add --no-cache python3 make g++
+
+WORKDIR /app
+
+COPY package.json package-lock.json* ./
+RUN npm install --omit=dev
+
+COPY src ./src
+
+RUN mkdir -p /app/data
+
+ENV PORT=4000
+ENV DB_PATH=/app/data/donmarco.db
+
+EXPOSE 4000
+
+CMD ["node", "src/index.js"]
--- a/backend/package-lock.json
+++ b/backend/package-lock.json
--- a/backend/package.json
+++ b/backend/package.json
@@ -0,0 +1,19 @@
+{
+  "name": "donmarco-backend",
+  "version": "1.0.0",
+  "description": "API administración financiera Don Marco",
+  "main": "src/index.js",
+  "type": "module",
+  "scripts": {
+    "start": "node src/index.js",
+    "dev": "node --watch src/index.js",
+    "seed": "node src/seed.js"
+  },
+  "dependencies": {
+    "bcryptjs": "^2.4.3",
+    "better-sqlite3": "^11.7.0",
+    "cors": "^2.8.5",
+    "express": "^4.21.2",
+    "jsonwebtoken": "^9.0.2"
+  }
+}
--- a/backend/src/db.js
+++ b/backend/src/db.js
@@ -0,0 +1,56 @@
+import Database from 'better-sqlite3';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const dbPath = process.env.DB_PATH || path.join(__dirname, '..', 'data', 'donmarco.db');
+
+import fs from 'fs';
+fs.mkdirSync(path.dirname(dbPath), { recursive: true });
+
+export const db = new Database(dbPath);
+db.pragma('journal_mode = WAL');
+
+export const SHEETS = [
+  'ventas',
+  'servicios',
+  'alquileres',
+  'gastos_diarios',
+  'gastos_fijos',
+  'personal',
+  'reportes',
+];
+
+export function initDb() {
+  db.exec(`
+    CREATE TABLE IF NOT EXISTS users (
+      id INTEGER PRIMARY KEY AUTOINCREMENT,
+      username TEXT UNIQUE NOT NULL,
+      password_hash TEXT NOT NULL,
+      is_admin INTEGER DEFAULT 0,
+      active INTEGER DEFAULT 1,
+      created_at TEXT DEFAULT (datetime('now'))
+    );
+
+    CREATE TABLE IF NOT EXISTS permissions (
+      id INTEGER PRIMARY KEY AUTOINCREMENT,
+      user_id INTEGER NOT NULL,
+      sheet_key TEXT NOT NULL,
+      can_view INTEGER DEFAULT 1,
+      can_edit INTEGER DEFAULT 0,
+      UNIQUE(user_id, sheet_key),
+      FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE
+    );
+
+    CREATE TABLE IF NOT EXISTS registros (
+      id INTEGER PRIMARY KEY AUTOINCREMENT,
+      sheet_type TEXT NOT NULL,
+      data TEXT NOT NULL,
+      created_by INTEGER,
+      updated_at TEXT DEFAULT (datetime('now')),
+      FOREIGN KEY (created_by) REFERENCES users(id)
+    );
+
+    CREATE INDEX IF NOT EXISTS idx_registros_sheet ON registros(sheet_type);
+  `);
+}
--- a/backend/src/index.js
+++ b/backend/src/index.js
@@ -0,0 +1,42 @@
+import express from 'express';
+import cors from 'cors';
+import { initDb } from './db.js';
+import authRoutes from './routes/auth.js';
+import userRoutes from './routes/users.js';
+import sheetRoutes from './routes/sheets.js';
+import reportRoutes from './routes/reports.js';
+import bcrypt from 'bcryptjs';
+import { db, SHEETS } from './db.js';
+
+initDb();
+
+// Seed automático del superusuario JEFE si no existe
+const jefe = db.prepare('SELECT id FROM users WHERE username = ?').get('JEFE');
+if (!jefe) {
+  const hash = bcrypt.hashSync('MACAN', 10);
+  const result = db
+    .prepare('INSERT INTO users (username, password_hash, is_admin, active) VALUES (?, ?, 1, 1)')
+    .run('JEFE', hash);
+  const userId = result.lastInsertRowid;
+  const permStmt = db.prepare(
+    'INSERT INTO permissions (user_id, sheet_key, can_view, can_edit) VALUES (?, ?, 1, 1)'
+  );
+  for (const sheet of SHEETS) permStmt.run(userId, sheet);
+  console.log('Superusuario JEFE creado (contraseña: MACAN)');
+}
+
+const app = express();
+const PORT = process.env.PORT || 4000;
+
+app.use(cors({ origin: true, credentials: true }));
+app.use(express.json({ limit: '2mb' }));
+
+app.get('/api/health', (_req, res) => res.json({ ok: true, service: 'DonMarco API' }));
+app.use('/api/auth', authRoutes);
+app.use('/api/users', userRoutes);
+app.use('/api/sheets', sheetRoutes);
+app.use('/api/reports', reportRoutes);
+
+app.listen(PORT, '0.0.0.0', () => {
+  console.log(`Don Marco API escuchando en http://0.0.0.0:${PORT}`);
+});
--- a/backend/src/middleware/auth.js
+++ b/backend/src/middleware/auth.js
@@ -0,0 +1,31 @@
+import jwt from 'jsonwebtoken';
+
+const JWT_SECRET = process.env.JWT_SECRET || 'donmarco-lan-secret-change-in-prod';
+
+export function signToken(user) {
+  return jwt.sign(
+    { id: user.id, username: user.username, isAdmin: !!user.is_admin },
+    JWT_SECRET,
+    { expiresIn: '12h' }
+  );
+}
+
+export function authRequired(req, res, next) {
+  const header = req.headers.authorization;
+  if (!header?.startsWith('Bearer ')) {
+    return res.status(401).json({ error: 'No autenticado' });
+  }
+  try {
+    req.user = jwt.verify(header.slice(7), JWT_SECRET);
+    next();
+  } catch {
+    return res.status(401).json({ error: 'Token inválido o expirado' });
+  }
+}
+
+export function adminRequired(req, res, next) {
+  if (!req.user?.isAdmin) {
+    return res.status(403).json({ error: 'Solo administrador' });
+  }
+  next();
+}
--- a/backend/src/routes/auth.js
+++ b/backend/src/routes/auth.js
@@ -0,0 +1,52 @@
+import { Router } from 'express';
+import bcrypt from 'bcryptjs';
+import { db } from '../db.js';
+import { signToken, authRequired } from '../middleware/auth.js';
+
+const router = Router();
+
+router.post('/login', (req, res) => {
+  const { username, password } = req.body;
+  if (!username || !password) {
+    return res.status(400).json({ error: 'Usuario y contraseña requeridos' });
+  }
+  const user = db.prepare('SELECT * FROM users WHERE username = ? AND active = 1').get(username);
+  if (!user || !bcrypt.compareSync(password, user.password_hash)) {
+    return res.status(401).json({ error: 'Credenciales inválidas' });
+  }
+  const permissions = db
+    .prepare('SELECT sheet_key, can_view, can_edit FROM permissions WHERE user_id = ?')
+    .all(user.id);
+  const token = signToken(user);
+  res.json({
+    token,
+    user: {
+      id: user.id,
+      username: user.username,
+      isAdmin: !!user.is_admin,
+      permissions: permissions.reduce((acc, p) => {
+        acc[p.sheet_key] = { view: !!p.can_view, edit: !!p.can_edit };
+        return acc;
+      }, {}),
+    },
+  });
+});
+
+router.get('/me', authRequired, (req, res) => {
+  const user = db.prepare('SELECT id, username, is_admin, active FROM users WHERE id = ?').get(req.user.id);
+  if (!user || !user.active) return res.status(401).json({ error: 'Usuario inactivo' });
+  const permissions = db
+    .prepare('SELECT sheet_key, can_view, can_edit FROM permissions WHERE user_id = ?')
+    .all(user.id);
+  res.json({
+    id: user.id,
+    username: user.username,
+    isAdmin: !!user.is_admin,
+    permissions: permissions.reduce((acc, p) => {
+      acc[p.sheet_key] = { view: !!p.can_view, edit: !!p.can_edit };
+      return acc;
+    }, {}),
+  });
+});
+
+export default router;
--- a/backend/src/routes/reports.js
+++ b/backend/src/routes/reports.js
@@ -0,0 +1,169 @@
+import { Router } from 'express';
+import { db } from '../db.js';
+import { authRequired } from '../middleware/auth.js';
+import {
+  inRange,
+  sumIngresos,
+  sumGastos,
+  sumPersonal,
+  weekKey,
+  monthKey,
+  parseFecha,
+} from '../utils/calculations.js';
+
+const router = Router();
+router.use(authRequired);
+
+function loadRows(sheetType) {
+  return db
+    .prepare('SELECT data FROM registros WHERE sheet_type = ?')
+    .all(sheetType)
+    .map((r) => JSON.parse(r.data));
+}
+
+function filterByDate(rows, fechaField, desde, hasta) {
+  return rows.filter((r) => inRange(r[fechaField], desde, hasta));
+}
+
+function buildReport(desde, hasta, include = {}) {
+  const inc = {
+    ventas: include.ventas !== false,
+    servicios: include.servicios !== false,
+    alquileres: include.alquileres !== false,
+    gastos_diarios: include.gastos_diarios !== false,
+    gastos_fijos: include.gastos_fijos !== false,
+    personal: include.personal !== false,
+  };
+
+  const ventas = inc.ventas ? filterByDate(loadRows('ventas'), 'fecha', desde, hasta) : [];
+  const servicios = inc.servicios ? filterByDate(loadRows('servicios'), 'fecha', desde, hasta) : [];
+  const alquileres = inc.alquileres ? filterByDate(loadRows('alquileres'), 'fecha', desde, hasta) : [];
+  const gastosDiarios = inc.gastos_diarios
+    ? filterByDate(loadRows('gastos_diarios'), 'fecha', desde, hasta)
+    : [];
+  const gastosFijos = inc.gastos_fijos
+    ? filterByDate(loadRows('gastos_fijos'), 'fecha', desde, hasta)
+    : [];
+
+  const personalRows = inc.personal ? loadRows('personal') : [];
+  const mensualizados = personalRows.filter((r) => r.tipo === 'mensualizado');
+  const eventuales = inc.personal
+    ? filterByDate(
+        personalRows.filter((r) => r.tipo === 'eventual'),
+        'fecha',
+        desde,
+        hasta
+      )
+    : [];
+
+  const tVentas = sumIngresos(ventas);
+  const tServicios = sumIngresos(servicios);
+  const tAlquileres = sumIngresos(alquileres);
+  const totalIngresos =
+    tVentas.totalIngresos + tServicios.totalIngresos + tAlquileres.totalIngresos;
+  const totalUtilidad =
+    tVentas.totalUtilidad + tServicios.totalUtilidad + tAlquileres.totalUtilidad;
+
+  const gastosDiariosTotal = sumGastos(gastosDiarios);
+  const gastosFijosTotal = sumGastos(gastosFijos);
+  const gastosVariables = [...gastosDiarios, ...gastosFijos].filter(
+    (g) => g.clasificacion === 'variable'
+  );
+  const gastosVariablesTotal = sumGastos(gastosVariables);
+  const totalGastos = gastosDiariosTotal + gastosFijosTotal;
+
+  const totalPersonal = sumPersonal(mensualizados, eventuales);
+
+  const resultadoNeto = totalIngresos - totalGastos - totalPersonal;
+
+  return {
+    periodo: { desde: desde || null, hasta: hasta || null },
+    desglose: {
+      ventas: tVentas,
+      servicios: tServicios,
+      alquileres: tAlquileres,
+      gastosDiarios: { total: gastosDiariosTotal, filas: gastosDiarios.length },
+      gastosFijos: { total: gastosFijosTotal, filas: gastosFijos.length },
+      gastosVariables: { total: gastosVariablesTotal },
+      personal: { total: totalPersonal, mensualizados: mensualizados.length, eventuales: eventuales.length },
+    },
+    totales: {
+      totalIngresos,
+      totalUtilidad,
+      totalGastos,
+      totalPersonal,
+      resultadoNeto,
+      estado: resultadoNeto >= 0 ? 'utilidad' : 'perdida',
+    },
+  };
+}
+
+router.get('/', (req, res) => {
+  const { desde, hasta, tipo = 'mensual', include } = req.query;
+  let d = desde;
+  let h = hasta;
+
+  const today = new Date();
+  if (tipo === 'diario') {
+    const f = (h || d || today.toISOString().slice(0, 10));
+    d = f;
+    h = f;
+  } else if (tipo === 'semanal') {
+    const ref = parseFecha(h || d || today.toISOString().slice(0, 10));
+    const day = ref.getDay();
+    const diff = day === 0 ? -6 : 1 - day;
+    const monday = new Date(ref);
+    monday.setDate(ref.getDate() + diff);
+    const sunday = new Date(monday);
+    sunday.setDate(monday.getDate() + 6);
+    d = monday.toISOString().slice(0, 10);
+    h = sunday.toISOString().slice(0, 10);
+  } else if (tipo === 'mensual' && !d && !h) {
+    d = `${today.getFullYear()}-${String(today.getMonth() + 1).padStart(2, '0')}-01`;
+    const last = new Date(today.getFullYear(), today.getMonth() + 1, 0);
+    h = last.toISOString().slice(0, 10);
+  }
+
+  let includeObj = {};
+  if (include) {
+    try {
+      includeObj = typeof include === 'string' ? JSON.parse(include) : include;
+    } catch {
+      includeObj = {};
+    }
+  }
+
+  const report = buildReport(d, h, includeObj);
+
+  if (tipo === 'semanal' || tipo === 'mensual') {
+    const gastosDiariosAll = loadRows('gastos_diarios');
+    const weekly = {};
+    for (const g of gastosDiariosAll) {
+      const wk = weekKey(g.fecha);
+      if (!inRange(g.fecha, d, h)) continue;
+      weekly[wk] = (weekly[wk] || 0) + (Number(g.monto) || 0);
+    }
+    report.cierreSemanal = weekly;
+    report.totalGastosSemanales = Object.values(weekly).reduce((a, b) => a + b, 0);
+
+    if (tipo === 'mensual') {
+      const monthly = {};
+      for (const g of gastosDiariosAll) {
+        const mk = monthKey(g.fecha);
+        if (!inRange(g.fecha, d, h)) continue;
+        monthly[mk] = (monthly[mk] || 0) + (Number(g.monto) || 0);
+      }
+      const fijosAll = filterByDate(loadRows('gastos_fijos'), 'fecha', d, h);
+      report.cierreMensual = {
+        gastosDiariosPorMes: monthly,
+        gastosFijosEnPeriodo: sumGastos(fijosAll),
+        totalGastosMensualesConsolidado:
+          Object.values(monthly).reduce((a, b) => a + b, 0) + sumGastos(fijosAll),
+      };
+    }
+  }
+
+  res.json(report);
+});
+
+export default router;
--- a/backend/src/routes/sheets.js
+++ b/backend/src/routes/sheets.js
@@ -0,0 +1,95 @@
+import { Router } from 'express';
+import { db, SHEETS } from '../db.js';
+import { authRequired } from '../middleware/auth.js';
+import { sumIngresos, sumGastos, sumPersonal } from '../utils/calculations.js';
+
+const router = Router();
+router.use(authRequired);
+
+const INGRESO_SHEETS = ['ventas', 'servicios', 'alquileres'];
+const GASTO_SHEETS = ['gastos_diarios', 'gastos_fijos'];
+
+function checkPermission(req, sheet, needEdit = false) {
+  if (req.user.isAdmin) return true;
+  const row = db
+    .prepare('SELECT can_view, can_edit FROM permissions WHERE user_id = ? AND sheet_key = ?')
+    .get(req.user.id, sheet);
+  if (!row) return false;
+  if (needEdit) return !!row.can_edit;
+  return !!row.can_view;
+}
+
+function getSheetPayload(sheetType) {
+  const rows = db
+    .prepare('SELECT id, data, updated_at FROM registros WHERE sheet_type = ? ORDER BY id')
+    .all(sheetType);
+  const parsed = rows.map((r) => ({ id: r.id, ...JSON.parse(r.data), updated_at: r.updated_at }));
+
+  if (INGRESO_SHEETS.includes(sheetType)) {
+    const totals = sumIngresos(parsed);
+    return { rows: parsed, totals };
+  }
+  if (GASTO_SHEETS.includes(sheetType)) {
+    const total = sumGastos(parsed);
+    return { rows: parsed, totals: { totalGastos: total } };
+  }
+  if (sheetType === 'personal') {
+    const mensualizados = parsed.filter((r) => r.tipo === 'mensualizado');
+    const eventuales = parsed.filter((r) => r.tipo === 'eventual');
+    return {
+      mensualizados,
+      eventuales,
+      totals: { totalPersonal: sumPersonal(mensualizados, eventuales) },
+    };
+  }
+  return { rows: parsed };
+}
+
+router.get('/:sheetType', (req, res) => {
+  const { sheetType } = req.params;
+  if (!SHEETS.includes(sheetType) || sheetType === 'reportes') {
+    return res.status(400).json({ error: 'Planilla inválida' });
+  }
+  if (!checkPermission(req, sheetType)) {
+    return res.status(403).json({ error: 'Sin permiso para ver esta planilla' });
+  }
+  res.json(getSheetPayload(sheetType));
+});
+
+router.put('/:sheetType', (req, res) => {
+  const { sheetType } = req.params;
+  if (!SHEETS.includes(sheetType) || sheetType === 'reportes') {
+    return res.status(400).json({ error: 'Planilla inválida' });
+  }
+  if (!checkPermission(req, sheetType, true)) {
+    return res.status(403).json({ error: 'Sin permiso para editar' });
+  }
+
+  const { rows, mensualizados, eventuales } = req.body;
+
+  db.prepare('DELETE FROM registros WHERE sheet_type = ?').run(sheetType);
+
+  const insert = db.prepare(
+    'INSERT INTO registros (sheet_type, data, created_by) VALUES (?, ?, ?)'
+  );
+
+  if (sheetType === 'personal') {
+    const all = [
+      ...(mensualizados || []).map((r) => ({ ...r, tipo: 'mensualizado' })),
+      ...(eventuales || []).map((r) => ({ ...r, tipo: 'eventual' })),
+    ];
+    for (const row of all) {
+      const { id: _id, updated_at: _u, ...data } = row;
+      insert.run(sheetType, JSON.stringify(data), req.user.id);
+    }
+  } else {
+    for (const row of rows || []) {
+      const { id: _id, updated_at: _u, ...data } = row;
+      insert.run(sheetType, JSON.stringify(data), req.user.id);
+    }
+  }
+
+  res.json(getSheetPayload(sheetType));
+});
+
+export default router;
--- a/backend/src/routes/users.js
+++ b/backend/src/routes/users.js
@@ -0,0 +1,96 @@
+import { Router } from 'express';
+import bcrypt from 'bcryptjs';
+import { db, SHEETS } from '../db.js';
+import { authRequired, adminRequired } from '../middleware/auth.js';
+
+const router = Router();
+router.use(authRequired, adminRequired);
+
+router.get('/', (_req, res) => {
+  const users = db
+    .prepare('SELECT id, username, is_admin, active, created_at FROM users ORDER BY username')
+    .all();
+  const withPerms = users.map((u) => {
+    const permissions = db
+      .prepare('SELECT sheet_key, can_view, can_edit FROM permissions WHERE user_id = ?')
+      .all(u.id);
+    return {
+      ...u,
+      isAdmin: !!u.is_admin,
+      active: !!u.active,
+      permissions: permissions.reduce((acc, p) => {
+        acc[p.sheet_key] = { view: !!p.can_view, edit: !!p.can_edit };
+        return acc;
+      }, {}),
+    };
+  });
+  res.json(withPerms);
+});
+
+router.post('/', (req, res) => {
+  const { username, password, permissions = {} } = req.body;
+  if (!username || !password) {
+    return res.status(400).json({ error: 'Usuario y contraseña requeridos' });
+  }
+  const hash = bcrypt.hashSync(password, 10);
+  try {
+    const result = db
+      .prepare('INSERT INTO users (username, password_hash, is_admin, active) VALUES (?, ?, 0, 1)')
+      .run(username, hash);
+    const userId = result.lastInsertRowid;
+    const permStmt = db.prepare(
+      'INSERT INTO permissions (user_id, sheet_key, can_view, can_edit) VALUES (?, ?, ?, ?)'
+    );
+    for (const sheet of SHEETS) {
+      if (sheet === 'reportes') continue;
+      const p = permissions[sheet] || { view: false, edit: false };
+      permStmt.run(userId, sheet, p.view ? 1 : 0, p.edit ? 1 : 0);
+    }
+    permStmt.run(userId, 'reportes', 1, 0);
+    res.status(201).json({ id: userId, username });
+  } catch (e) {
+    if (e.code === 'SQLITE_CONSTRAINT_UNIQUE') {
+      return res.status(409).json({ error: 'El usuario ya existe' });
+    }
+    throw e;
+  }
+});
+
+router.patch('/:id', (req, res) => {
+  const id = Number(req.params.id);
+  const { password, active, permissions } = req.body;
+  const user = db.prepare('SELECT * FROM users WHERE id = ?').get(id);
+  if (!user) return res.status(404).json({ error: 'Usuario no encontrado' });
+  if (user.is_admin && req.user.id !== id && active === 0) {
+    return res.status(400).json({ error: 'No se puede desactivar al administrador principal' });
+  }
+  if (password) {
+    db.prepare('UPDATE users SET password_hash = ? WHERE id = ?').run(bcrypt.hashSync(password, 10), id);
+  }
+  if (active !== undefined) {
+    db.prepare('UPDATE users SET active = ? WHERE id = ?').run(active ? 1 : 0, id);
+  }
+  if (permissions) {
+    const upsert = db.prepare(`
+      INSERT INTO permissions (user_id, sheet_key, can_view, can_edit)
+      VALUES (?, ?, ?, ?)
+      ON CONFLICT(user_id, sheet_key) DO UPDATE SET can_view = excluded.can_view, can_edit = excluded.can_edit
+    `);
+    for (const [sheet, p] of Object.entries(permissions)) {
+      if (!SHEETS.includes(sheet)) continue;
+      upsert.run(id, sheet, p.view ? 1 : 0, p.edit ? 1 : 0);
+    }
+  }
+  res.json({ ok: true });
+});
+
+router.delete('/:id', (req, res) => {
+  const id = Number(req.params.id);
+  const user = db.prepare('SELECT is_admin FROM users WHERE id = ?').get(id);
+  if (!user) return res.status(404).json({ error: 'Usuario no encontrado' });
+  if (user.is_admin) return res.status(400).json({ error: 'No se puede eliminar al administrador' });
+  db.prepare('DELETE FROM users WHERE id = ?').run(id);
+  res.json({ ok: true });
+});
+
+export default router;
--- a/backend/src/seed.js
+++ b/backend/src/seed.js
@@ -0,0 +1,25 @@
+import bcrypt from 'bcryptjs';
+import { db, initDb, SHEETS } from './db.js';
+
+initDb();
+
+const existing = db.prepare('SELECT id FROM users WHERE username = ?').get('JEFE');
+if (existing) {
+  console.log('Usuario JEFE ya existe.');
+  process.exit(0);
+}
+
+const hash = bcrypt.hashSync('MACAN', 10);
+const result = db
+  .prepare('INSERT INTO users (username, password_hash, is_admin, active) VALUES (?, ?, 1, 1)')
+  .run('JEFE', hash);
+
+const userId = result.lastInsertRowid;
+const permStmt = db.prepare(
+  'INSERT INTO permissions (user_id, sheet_key, can_view, can_edit) VALUES (?, ?, 1, 1)'
+);
+for (const sheet of SHEETS) {
+  permStmt.run(userId, sheet);
+}
+
+console.log('Superusuario JEFE creado (contraseña: MACAN)');
--- a/backend/src/utils/calculations.js
+++ b/backend/src/utils/calculations.js
@@ -0,0 +1,69 @@
+/** Cálculos compartidos para ingresos, egresos y reportes */
+
+export function calcIngresoRow(row) {
+  const cantidad = Number(row.cantidad) || 0;
+  const precioUnitario = Number(row.precioUnitario) || 0;
+  const costoUnitario = Number(row.costoUnitario) || 0;
+  const precioTotal = cantidad * precioUnitario;
+  const utilidad = precioTotal - cantidad * costoUnitario;
+  return { precioTotal, utilidad };
+}
+
+export function sumIngresos(rows) {
+  let totalIngresos = 0;
+  let totalUtilidad = 0;
+  for (const row of rows) {
+    const { precioTotal, utilidad } = calcIngresoRow(row);
+    totalIngresos += precioTotal;
+    totalUtilidad += utilidad;
+  }
+  return { totalIngresos, totalUtilidad };
+}
+
+export function sumGastos(rows) {
+  return rows.reduce((acc, r) => acc + (Number(r.monto) || 0), 0);
+}
+
+export function sumPersonal(mensualizados = [], eventuales = []) {
+  const mensual = mensualizados.reduce((acc, e) => {
+    const base = Number(e.sueldoBase) || 0;
+    const cargas = Number(e.cargasSociales) || 0;
+    const bonos = Number(e.bonos) || 0;
+    return acc + base + cargas + bonos;
+  }, 0);
+  const event = eventuales.reduce((acc, e) => acc + (Number(e.pagoDiario) || 0), 0);
+  return mensual + event;
+}
+
+export function parseFecha(fecha) {
+  if (!fecha) return null;
+  const d = new Date(fecha + 'T12:00:00');
+  return isNaN(d.getTime()) ? null : d;
+}
+
+export function inRange(fecha, desde, hasta) {
+  const d = parseFecha(fecha);
+  if (!d) return !desde && !hasta;
+  const ds = desde ? parseFecha(desde) : null;
+  const hs = hasta ? parseFecha(hasta) : null;
+  if (ds && d < ds) return false;
+  if (hs && d > hs) return false;
+  return true;
+}
+
+/** Lunes de la semana ISO (lunes como inicio) */
+export function weekKey(fecha) {
+  const d = parseFecha(fecha);
+  if (!d) return 'sin-fecha';
+  const day = d.getDay();
+  const diff = day === 0 ? -6 : 1 - day;
+  const monday = new Date(d);
+  monday.setDate(d.getDate() + diff);
+  return monday.toISOString().slice(0, 10);
+}
+
+export function monthKey(fecha) {
+  const d = parseFecha(fecha);
+  if (!d) return 'sin-fecha';
+  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}`;
+}
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -0,0 +1,39 @@
+services:
+  backend:
+    build:
+      context: ./backend
+      dockerfile: Dockerfile
+    container_name: donmarco-api
+    restart: unless-stopped
+    environment:
+      - PORT=4000
+      - JWT_SECRET=${JWT_SECRET:-cambiar-este-secreto-en-produccion}
+      - DB_PATH=/app/data/donmarco.db
+    volumes:
+      - donmarco_data:/app/data
+    ports:
+      - "4000:4000"
+    networks:
+      - donmarco_net
+
+  frontend:
+    build:
+      context: ./frontend
+      dockerfile: Dockerfile
+      args:
+        VITE_API_URL: /api
+    container_name: donmarco-web
+    restart: unless-stopped
+    ports:
+      - "80:80"
+    depends_on:
+      - backend
+    networks:
+      - donmarco_net
+
+volumes:
+  donmarco_data:
+
+networks:
+  donmarco_net:
+    driver: bridge
--- a/frontend/Dockerfile
+++ b/frontend/Dockerfile
@@ -0,0 +1,15 @@
+FROM node:20-alpine AS build
+
+WORKDIR /app
+COPY package.json package-lock.json* ./
+RUN npm install
+COPY . .
+ARG VITE_API_URL=/api
+ENV VITE_API_URL=$VITE_API_URL
+RUN npm run build
+
+FROM nginx:alpine
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+COPY --from=build /app/dist /usr/share/nginx/html
+EXPOSE 80
+CMD ["nginx", "-g", "daemon off;"]
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="es">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Don Marco — Administración Financiera</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap" rel="stylesheet" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>
--- a/frontend/nginx.conf
+++ b/frontend/nginx.conf
@@ -0,0 +1,18 @@
+server {
+    listen 80;
+    server_name _;
+    root /usr/share/nginx/html;
+    index index.html;
+
+    location /api/ {
+        proxy_pass http://backend:4000/api/;
+        proxy_http_version 1.1;
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+    }
+
+    location / {
+        try_files $uri $uri/ /index.html;
+    }
+}
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -0,0 +1,20 @@
+{
+  "name": "donmarco-frontend",
+  "version": "1.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.28.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^4.3.4",
+    "vite": "^5.4.11"
+  }
+}
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -0,0 +1,50 @@
+import { Routes, Route, Navigate } from 'react-router-dom';
+import { useAuth } from './context/AuthContext';
+import Layout from './components/Layout';
+import LoginPage from './pages/LoginPage';
+import HomePage from './pages/HomePage';
+import ReportesPage from './pages/ReportesPage';
+import AdminPage from './pages/AdminPage';
+import IngresoSheet from './components/IngresoSheet';
+import GastoSheet from './components/GastoSheet';
+import PersonalSheet from './components/PersonalSheet';
+
+function PrivateRoute({ children, sheet }) {
+  const { user, loading, canView } = useAuth();
+  if (loading) return <p className="loading">Cargando…</p>;
+  if (!user) return <Navigate to="/login" replace />;
+  if (sheet && !canView(sheet)) return <div className="alert alert-error">Sin acceso a esta planilla</div>;
+  return <Layout>{children}</Layout>;
+}
+
+function AdminRoute({ children }) {
+  const { user, loading } = useAuth();
+  if (loading) return <p className="loading">Cargando…</p>;
+  if (!user) return <Navigate to="/login" replace />;
+  if (!user.isAdmin) return <Navigate to="/" replace />;
+  return <Layout>{children}</Layout>;
+}
+
+export default function App() {
+  const { user, loading } = useAuth();
+
+  if (loading) {
+    return <p className="loading">Iniciando aplicación…</p>;
+  }
+
+  return (
+    <Routes>
+      <Route path="/login" element={user ? <Navigate to="/" /> : <LoginPage />} />
+      <Route path="/" element={<PrivateRoute><HomePage /></PrivateRoute>} />
+      <Route path="/ventas" element={<PrivateRoute sheet="ventas"><IngresoSheet sheetType="ventas" title="Planilla de Ventas" /></PrivateRoute>} />
+      <Route path="/servicios" element={<PrivateRoute sheet="servicios"><IngresoSheet sheetType="servicios" title="Planilla de Servicios" /></PrivateRoute>} />
+      <Route path="/alquileres" element={<PrivateRoute sheet="alquileres"><IngresoSheet sheetType="alquileres" title="Planilla de Alquileres" /></PrivateRoute>} />
+      <Route path="/gastos-diarios" element={<PrivateRoute sheet="gastos_diarios"><GastoSheet sheetType="gastos_diarios" title="Gastos Diarios" defaultClasificacion="diario" /></PrivateRoute>} />
+      <Route path="/gastos-fijos" element={<PrivateRoute sheet="gastos_fijos"><GastoSheet sheetType="gastos_fijos" title="Gastos Fijos" defaultClasificacion="fijo" /></PrivateRoute>} />
+      <Route path="/personal" element={<PrivateRoute sheet="personal"><PersonalSheet /></PrivateRoute>} />
+      <Route path="/reportes" element={<PrivateRoute sheet="reportes"><ReportesPage /></PrivateRoute>} />
+      <Route path="/admin" element={<AdminRoute><AdminPage /></AdminRoute>} />
+      <Route path="*" element={<Navigate to="/" replace />} />
+    </Routes>
+  );
+}
--- a/frontend/src/api/client.js
+++ b/frontend/src/api/client.js
@@ -0,0 +1,42 @@
+const API_BASE = import.meta.env.VITE_API_URL || '/api';
+
+function getToken() {
+  return localStorage.getItem('donmarco_token');
+}
+
+export async function api(path, options = {}) {
+  const headers = { 'Content-Type': 'application/json', ...options.headers };
+  const token = getToken();
+  if (token) headers.Authorization = `Bearer ${token}`;
+
+  const res = await fetch(`${API_BASE}${path}`, { ...options, headers });
+  const data = await res.json().catch(() => ({}));
+  if (!res.ok) throw new Error(data.error || 'Error en la solicitud');
+  return data;
+}
+
+export const authApi = {
+  login: (username, password) =>
+    api('/auth/login', { method: 'POST', body: JSON.stringify({ username, password }) }),
+  me: () => api('/auth/me'),
+};
+
+export const usersApi = {
+  list: () => api('/users'),
+  create: (body) => api('/users', { method: 'POST', body: JSON.stringify(body) }),
+  update: (id, body) => api(`/users/${id}`, { method: 'PATCH', body: JSON.stringify(body) }),
+  remove: (id) => api(`/users/${id}`, { method: 'DELETE' }),
+};
+
+export const sheetsApi = {
+  get: (sheet) => api(`/sheets/${sheet}`),
+  save: (sheet, body) =>
+    api(`/sheets/${sheet}`, { method: 'PUT', body: JSON.stringify(body) }),
+};
+
+export const reportsApi = {
+  get: (params) => {
+    const q = new URLSearchParams(params).toString();
+    return api(`/reports?${q}`);
+  },
+};
--- a/frontend/src/components/GastoSheet.jsx
+++ b/frontend/src/components/GastoSheet.jsx
@@ -0,0 +1,143 @@
+import { useState, useEffect, useMemo } from 'react';
+import { sheetsApi } from '../api/client';
+import { useAuth } from '../context/AuthContext';
+import { emptyGastoRow, formatMoney } from '../utils/calc';
+
+export default function GastoSheet({ sheetType, title, defaultClasificacion }) {
+  const { canEdit } = useAuth();
+  const editable = canEdit(sheetType);
+  const [rows, setRows] = useState([emptyGastoRow()]);
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [message, setMessage] = useState(null);
+  const [error, setError] = useState(null);
+
+  useEffect(() => {
+    (async () => {
+      try {
+        const data = await sheetsApi.get(sheetType);
+        const loaded = data.rows?.length ? data.rows : [emptyGastoRow()];
+        setRows(
+          loaded.map((r) => ({
+            ...r,
+            clasificacion: r.clasificacion || defaultClasificacion,
+          }))
+        );
+      } catch (e) {
+        setError(e.message);
+      } finally {
+        setLoading(false);
+      }
+    })();
+  }, [sheetType, defaultClasificacion]);
+
+  const total = useMemo(
+    () => rows.reduce((acc, r) => acc + (Number(r.monto) || 0), 0),
+    [rows]
+  );
+
+  const updateRow = (index, field, value) => {
+    setRows((prev) => prev.map((r, i) => (i === index ? { ...r, [field]: value } : r)));
+  };
+
+  const addRow = () =>
+    setRows((prev) => [...prev, { ...emptyGastoRow(), clasificacion: defaultClasificacion }]);
+  const removeRow = (index) => setRows((prev) => (prev.length > 1 ? prev.filter((_, i) => i !== index) : prev));
+
+  const handleSave = async () => {
+    if (!editable) return;
+    setSaving(true);
+    setMessage(null);
+    setError(null);
+    try {
+      const data = await sheetsApi.save(sheetType, { rows });
+      setRows(data.rows?.length ? data.rows : [{ ...emptyGastoRow(), clasificacion: defaultClasificacion }]);
+      setMessage('Planilla guardada correctamente');
+    } catch (e) {
+      setError(e.message);
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  if (loading) return <p className="loading">Cargando planilla…</p>;
+
+  return (
+    <div>
+      <h1 className="page-title">{title}</h1>
+      {error && <div className="alert alert-error">{error}</div>}
+      {message && <div className="alert alert-success">{message}</div>}
+      {!editable && <div className="alert alert-info">Solo lectura</div>}
+
+      <div className="toolbar">
+        {editable && (
+          <>
+            <button type="button" className="btn btn-primary btn-icon" onClick={addRow}>
+              +
+            </button>
+            <button type="button" className="btn btn-primary" onClick={handleSave} disabled={saving}>
+              {saving ? 'Guardando…' : 'Guardar planilla'}
+            </button>
+          </>
+        )}
+      </div>
+
+      <div className="card sheet-table-wrap">
+        <table className="sheet-table">
+          <thead>
+            <tr>
+              <th>Fecha</th>
+              <th>Detalle</th>
+              <th>Impuestos</th>
+              <th>Nº Factura</th>
+              <th>Monto</th>
+              <th>Clasificación</th>
+              {editable && <th></th>}
+            </tr>
+          </thead>
+          <tbody>
+            {rows.map((row, i) => (
+              <tr key={i}>
+                <td>
+                  <input type="date" value={row.fecha || ''} disabled={!editable} onChange={(e) => updateRow(i, 'fecha', e.target.value)} />
+                </td>
+                <td>
+                  <input value={row.detalle || ''} disabled={!editable} onChange={(e) => updateRow(i, 'detalle', e.target.value)} />
+                </td>
+                <td>
+                  <input type="number" min="0" step="any" value={row.impuestos ?? ''} disabled={!editable} onChange={(e) => updateRow(i, 'impuestos', e.target.value)} />
+                </td>
+                <td>
+                  <input value={row.numeroFactura || ''} disabled={!editable} onChange={(e) => updateRow(i, 'numeroFactura', e.target.value)} />
+                </td>
+                <td>
+                  <input type="number" min="0" step="any" value={row.monto ?? ''} disabled={!editable} onChange={(e) => updateRow(i, 'monto', e.target.value)} />
+                </td>
+                <td>
+                  <select value={row.clasificacion || 'diario'} disabled={!editable} onChange={(e) => updateRow(i, 'clasificacion', e.target.value)}>
+                    <option value="diario">Gasto Diario</option>
+                    <option value="fijo">Gasto Fijo</option>
+                    <option value="variable">Gasto Variable</option>
+                  </select>
+                </td>
+                {editable && (
+                  <td>
+                    <button type="button" className="btn btn-danger btn-icon" onClick={() => removeRow(i)}>
+                      ×
+                    </button>
+                  </td>
+                )}
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+
+      <div className="totals-bar">
+        <span>
+          Total gastos: <strong>{formatMoney(total)}</strong>
+        </span>
+      </div>
+    </div>
+  );
+}
--- a/frontend/src/components/IngresoSheet.jsx
+++ b/frontend/src/components/IngresoSheet.jsx
@@ -0,0 +1,148 @@
+import { useState, useEffect, useMemo } from 'react';
+import { sheetsApi } from '../api/client';
+import { useAuth } from '../context/AuthContext';
+import { calcIngresoRow, emptyIngresoRow, formatMoney } from '../utils/calc';
+
+export default function IngresoSheet({ sheetType, title }) {
+  const { canEdit } = useAuth();
+  const editable = canEdit(sheetType);
+  const [rows, setRows] = useState([emptyIngresoRow()]);
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [message, setMessage] = useState(null);
+  const [error, setError] = useState(null);
+
+  useEffect(() => {
+    (async () => {
+      try {
+        const data = await sheetsApi.get(sheetType);
+        setRows(data.rows?.length ? data.rows : [emptyIngresoRow()]);
+      } catch (e) {
+        setError(e.message);
+      } finally {
+        setLoading(false);
+      }
+    })();
+  }, [sheetType]);
+
+  const totals = useMemo(() => {
+    let totalIngresos = 0;
+    let totalUtilidad = 0;
+    rows.forEach((row) => {
+      const { precioTotal, utilidad } = calcIngresoRow(row);
+      totalIngresos += precioTotal;
+      totalUtilidad += utilidad;
+    });
+    return { totalIngresos, totalUtilidad };
+  }, [rows]);
+
+  const updateRow = (index, field, value) => {
+    setRows((prev) => prev.map((r, i) => (i === index ? { ...r, [field]: value } : r)));
+  };
+
+  const addRow = () => setRows((prev) => [...prev, emptyIngresoRow()]);
+  const removeRow = (index) => setRows((prev) => (prev.length > 1 ? prev.filter((_, i) => i !== index) : prev));
+
+  const handleSave = async () => {
+    if (!editable) return;
+    setSaving(true);
+    setMessage(null);
+    setError(null);
+    try {
+      const data = await sheetsApi.save(sheetType, { rows });
+      setRows(data.rows?.length ? data.rows : [emptyIngresoRow()]);
+      setMessage('Planilla guardada correctamente');
+    } catch (e) {
+      setError(e.message);
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  if (loading) return <p className="loading">Cargando planilla…</p>;
+
+  return (
+    <div>
+      <h1 className="page-title">{title}</h1>
+      {error && <div className="alert alert-error">{error}</div>}
+      {message && <div className="alert alert-success">{message}</div>}
+      {!editable && <div className="alert alert-info">Solo lectura — sin permiso de edición</div>}
+
+      <div className="toolbar">
+        {editable && (
+          <>
+            <button type="button" className="btn btn-primary btn-icon" onClick={addRow} title="Agregar línea">
+              +
+            </button>
+            <button type="button" className="btn btn-primary" onClick={handleSave} disabled={saving}>
+              {saving ? 'Guardando…' : 'Guardar planilla'}
+            </button>
+          </>
+        )}
+      </div>
+
+      <div className="card sheet-table-wrap">
+        <table className="sheet-table">
+          <thead>
+            <tr>
+              <th>Fecha</th>
+              <th>Cliente</th>
+              <th>Detalle</th>
+              <th>Cantidad</th>
+              <th>P. Unitario</th>
+              <th>C. Unitario</th>
+              <th>Precio Total</th>
+              <th>Utilidad</th>
+              {editable && <th></th>}
+            </tr>
+          </thead>
+          <tbody>
+            {rows.map((row, i) => {
+              const { precioTotal, utilidad } = calcIngresoRow(row);
+              return (
+                <tr key={i}>
+                  <td>
+                    <input type="date" value={row.fecha || ''} disabled={!editable} onChange={(e) => updateRow(i, 'fecha', e.target.value)} />
+                  </td>
+                  <td>
+                    <input value={row.cliente || ''} disabled={!editable} onChange={(e) => updateRow(i, 'cliente', e.target.value)} />
+                  </td>
+                  <td>
+                    <input value={row.detalle || ''} disabled={!editable} onChange={(e) => updateRow(i, 'detalle', e.target.value)} />
+                  </td>
+                  <td>
+                    <input type="number" min="0" step="any" value={row.cantidad ?? ''} disabled={!editable} onChange={(e) => updateRow(i, 'cantidad', e.target.value)} />
+                  </td>
+                  <td>
+                    <input type="number" min="0" step="any" value={row.precioUnitario ?? ''} disabled={!editable} onChange={(e) => updateRow(i, 'precioUnitario', e.target.value)} />
+                  </td>
+                  <td>
+                    <input type="number" min="0" step="any" value={row.costoUnitario ?? ''} disabled={!editable} onChange={(e) => updateRow(i, 'costoUnitario', e.target.value)} />
+                  </td>
+                  <td className="computed">{formatMoney(precioTotal)}</td>
+                  <td className="computed">{formatMoney(utilidad)}</td>
+                  {editable && (
+                    <td>
+                      <button type="button" className="btn btn-danger btn-icon" onClick={() => removeRow(i)} title="Quitar fila">
+                        ×
+                      </button>
+                    </td>
+                  )}
+                </tr>
+              );
+            })}
+          </tbody>
+        </table>
+      </div>
+
+      <div className="totals-bar">
+        <span>
+          Sumatoria ingresos: <strong>{formatMoney(totals.totalIngresos)}</strong>
+        </span>
+        <span>
+          Sumatoria utilidad: <strong>{formatMoney(totals.totalUtilidad)}</strong>
+        </span>
+      </div>
+    </div>
+  );
+}
--- a/frontend/src/components/Layout.jsx
+++ b/frontend/src/components/Layout.jsx
@@ -0,0 +1,52 @@
+import { NavLink, useNavigate } from 'react-router-dom';
+import { useAuth } from '../context/AuthContext';
+
+const TABS = [
+  { key: 'ventas', label: 'Planilla de Ventas', path: '/ventas' },
+  { key: 'servicios', label: 'Planilla de Servicios', path: '/servicios' },
+  { key: 'alquileres', label: 'Planilla de Alquileres', path: '/alquileres' },
+  { key: 'gastos_diarios', label: 'Gastos Diarios', path: '/gastos-diarios' },
+  { key: 'gastos_fijos', label: 'Gastos Fijos', path: '/gastos-fijos' },
+  { key: 'personal', label: 'Planilla de Personal', path: '/personal' },
+  { key: 'reportes', label: 'Planilla de Reportes', path: '/reportes' },
+];
+
+export default function Layout({ children }) {
+  const { user, logout, canView } = useAuth();
+  const navigate = useNavigate();
+
+  const handleLogout = () => {
+    logout();
+    navigate('/login');
+  };
+
+  const visibleTabs = TABS.filter((t) => canView(t.key));
+
+  return (
+    <div className="app-shell">
+      <nav className="navbar">
+        <NavLink to="/" className="nav-tab" end>
+          Inicio
+        </NavLink>
+        {visibleTabs.map((tab) => (
+          <NavLink
+            key={tab.path}
+            to={tab.path}
+            className={({ isActive }) => `nav-tab${isActive ? ' active' : ''}`}
+          >
+            {tab.label}
+          </NavLink>
+        ))}
+        {user?.isAdmin && (
+          <NavLink to="/admin" className={({ isActive }) => `nav-tab${isActive ? ' active' : ''}`}>
+            Administración
+          </NavLink>
+        )}
+        <button type="button" className="nav-tab logout" onClick={handleLogout}>
+          Salir
+        </button>
+      </nav>
+      <main className="main-content">{children}</main>
+    </div>
+  );
+}
--- a/frontend/src/components/PersonalSheet.jsx
+++ b/frontend/src/components/PersonalSheet.jsx
@@ -0,0 +1,174 @@
+import { useState, useEffect, useMemo } from 'react';
+import { sheetsApi } from '../api/client';
+import { useAuth } from '../context/AuthContext';
+import { emptyMensualizado, emptyEventual, formatMoney } from '../utils/calc';
+
+const MAX_MENSUAL = 10;
+const MAX_EVENTUAL = 5;
+
+function rowCostMensual(r) {
+  return (Number(r.sueldoBase) || 0) + (Number(r.cargasSociales) || 0) + (Number(r.bonos) || 0);
+}
+
+export default function PersonalSheet() {
+  const { canEdit } = useAuth();
+  const editable = canEdit('personal');
+  const [mensualizados, setMensualizados] = useState([emptyMensualizado()]);
+  const [eventuales, setEventuales] = useState([emptyEventual()]);
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [message, setMessage] = useState(null);
+  const [error, setError] = useState(null);
+
+  useEffect(() => {
+    (async () => {
+      try {
+        const data = await sheetsApi.get('personal');
+        setMensualizados(
+          data.mensualizados?.length ? data.mensualizados.slice(0, MAX_MENSUAL) : [emptyMensualizado()]
+        );
+        setEventuales(data.eventuales?.length ? data.eventuales : [emptyEventual()]);
+      } catch (e) {
+        setError(e.message);
+      } finally {
+        setLoading(false);
+      }
+    })();
+  }, []);
+
+  const total = useMemo(() => {
+    const m = mensualizados.reduce((a, r) => a + rowCostMensual(r), 0);
+    const e = eventuales.reduce((a, r) => a + (Number(r.pagoDiario) || 0), 0);
+    return m + e;
+  }, [mensualizados, eventuales]);
+
+  const handleSave = async () => {
+    if (!editable) return;
+    setSaving(true);
+    setMessage(null);
+    setError(null);
+    try {
+      await sheetsApi.save('personal', { mensualizados, eventuales });
+      setMessage('Planilla de personal guardada');
+    } catch (e) {
+      setError(e.message);
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const updateMensual = (i, field, value) =>
+    setMensualizados((p) => p.map((r, idx) => (idx === i ? { ...r, [field]: value } : r)));
+  const updateEventual = (i, field, value) =>
+    setEventuales((p) => p.map((r, idx) => (idx === i ? { ...r, [field]: value } : r)));
+
+  if (loading) return <p className="loading">Cargando planilla…</p>;
+
+  return (
+    <div>
+      <h1 className="page-title">Planilla de Personal</h1>
+      {error && <div className="alert alert-error">{error}</div>}
+      {message && <div className="alert alert-success">{message}</div>}
+
+      <div className="toolbar">
+        {editable && (
+          <>
+            <button
+              type="button"
+              className="btn btn-primary btn-icon"
+              disabled={mensualizados.length >= MAX_MENSUAL}
+              onClick={() => setMensualizados((p) => (p.length < MAX_MENSUAL ? [...p, emptyMensualizado()] : p))}
+              title="Agregar mensualizado"
+            >
+              + Mensual
+            </button>
+            <button
+              type="button"
+              className="btn btn-secondary btn-icon"
+              disabled={eventuales.length >= MAX_EVENTUAL}
+              onClick={() => setEventuales((p) => (p.length < MAX_EVENTUAL ? [...p, emptyEventual()] : p))}
+              title="Agregar eventual"
+            >
+              + Eventual
+            </button>
+            <button type="button" className="btn btn-primary" onClick={handleSave} disabled={saving}>
+              Guardar
+            </button>
+          </>
+        )}
+      </div>
+
+      <div className="card" style={{ marginBottom: '1rem' }}>
+        <h2 style={{ marginTop: 0, fontSize: '1.1rem' }}>Funcionarios mensualizados (máx. {MAX_MENSUAL})</h2>
+        <div className="sheet-table-wrap">
+          <table className="sheet-table">
+            <thead>
+              <tr>
+                <th>Nombre</th>
+                <th>Sueldo base</th>
+                <th>Cargas sociales</th>
+                <th>Bonos</th>
+                <th>Subtotal</th>
+              </tr>
+            </thead>
+            <tbody>
+              {mensualizados.map((row, i) => (
+                <tr key={i}>
+                  <td>
+                    <input value={row.nombre || ''} disabled={!editable} onChange={(e) => updateMensual(i, 'nombre', e.target.value)} />
+                  </td>
+                  <td>
+                    <input type="number" value={row.sueldoBase ?? ''} disabled={!editable} onChange={(e) => updateMensual(i, 'sueldoBase', e.target.value)} />
+                  </td>
+                  <td>
+                    <input type="number" value={row.cargasSociales ?? ''} disabled={!editable} onChange={(e) => updateMensual(i, 'cargasSociales', e.target.value)} />
+                  </td>
+                  <td>
+                    <input type="number" value={row.bonos ?? ''} disabled={!editable} onChange={(e) => updateMensual(i, 'bonos', e.target.value)} />
+                  </td>
+                  <td className="computed">{formatMoney(rowCostMensual(row))}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+      <div className="card">
+        <h2 style={{ marginTop: 0, fontSize: '1.1rem' }}>Trabajadores eventuales por día (máx. {MAX_EVENTUAL} filas)</h2>
+        <div className="sheet-table-wrap">
+          <table className="sheet-table">
+            <thead>
+              <tr>
+                <th>Fecha</th>
+                <th>Nombre</th>
+                <th>Pago diario</th>
+              </tr>
+            </thead>
+            <tbody>
+              {eventuales.map((row, i) => (
+                <tr key={i}>
+                  <td>
+                    <input type="date" value={row.fecha || ''} disabled={!editable} onChange={(e) => updateEventual(i, 'fecha', e.target.value)} />
+                  </td>
+                  <td>
+                    <input value={row.nombre || ''} disabled={!editable} onChange={(e) => updateEventual(i, 'nombre', e.target.value)} />
+                  </td>
+                  <td>
+                    <input type="number" value={row.pagoDiario ?? ''} disabled={!editable} onChange={(e) => updateEventual(i, 'pagoDiario', e.target.value)} />
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+      <div className="totals-bar" style={{ marginTop: '1rem' }}>
+        <span>
+          Sumatoria total personal: <strong>{formatMoney(total)}</strong>
+        </span>
+      </div>
+    </div>
+  );
+}
--- a/frontend/src/context/AuthContext.jsx
+++ b/frontend/src/context/AuthContext.jsx
@@ -0,0 +1,57 @@
+import { createContext, useContext, useState, useEffect, useCallback } from 'react';
+import { authApi } from '../api/client';
+
+const AuthContext = createContext(null);
+
+export function AuthProvider({ children }) {
+  const [user, setUser] = useState(null);
+  const [loading, setLoading] = useState(true);
+
+  const loadUser = useCallback(async () => {
+    const token = localStorage.getItem('donmarco_token');
+    if (!token) {
+      setLoading(false);
+      return;
+    }
+    try {
+      const me = await authApi.me();
+      setUser(me);
+    } catch {
+      localStorage.removeItem('donmarco_token');
+      setUser(null);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    loadUser();
+  }, [loadUser]);
+
+  const login = async (username, password) => {
+    const data = await authApi.login(username, password);
+    localStorage.setItem('donmarco_token', data.token);
+    setUser(data.user);
+    return data.user;
+  };
+
+  const logout = () => {
+    localStorage.removeItem('donmarco_token');
+    setUser(null);
+  };
+
+  const canView = (sheet) => user?.isAdmin || user?.permissions?.[sheet]?.view;
+  const canEdit = (sheet) => user?.isAdmin || user?.permissions?.[sheet]?.edit;
+
+  return (
+    <AuthContext.Provider value={{ user, loading, login, logout, canView, canEdit }}>
+      {children}
+    </AuthContext.Provider>
+  );
+}
+
+export function useAuth() {
+  const ctx = useContext(AuthContext);
+  if (!ctx) throw new Error('useAuth debe usarse dentro de AuthProvider');
+  return ctx;
+}
--- a/frontend/src/main.jsx
+++ b/frontend/src/main.jsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { BrowserRouter } from 'react-router-dom';
+import App from './App';
+import { AuthProvider } from './context/AuthContext';
+import './styles/global.css';
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <BrowserRouter>
+      <AuthProvider>
+        <App />
+      </AuthProvider>
+    </BrowserRouter>
+  </React.StrictMode>
+);
--- a/frontend/src/pages/AdminPage.jsx
+++ b/frontend/src/pages/AdminPage.jsx
@@ -0,0 +1,191 @@
+import { useState, useEffect } from 'react';
+import { usersApi } from '../api/client';
+
+const SHEET_LABELS = {
+  ventas: 'Ventas',
+  servicios: 'Servicios',
+  alquileres: 'Alquileres',
+  gastos_diarios: 'Gastos diarios',
+  gastos_fijos: 'Gastos fijos',
+  personal: 'Personal',
+  reportes: 'Reportes',
+};
+
+const SHEET_KEYS = Object.keys(SHEET_LABELS);
+
+function emptyPerms() {
+  return Object.fromEntries(SHEET_KEYS.map((k) => [k, { view: false, edit: false }]));
+}
+
+export default function AdminPage() {
+  const [users, setUsers] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState('');
+  const [newUser, setNewUser] = useState({ username: '', password: '', permissions: emptyPerms() });
+
+  const load = async () => {
+    try {
+      setUsers(await usersApi.list());
+    } catch (e) {
+      setError(e.message);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    load();
+  }, []);
+
+  const handleCreate = async (e) => {
+    e.preventDefault();
+    setError('');
+    try {
+      await usersApi.create(newUser);
+      setNewUser({ username: '', password: '', permissions: emptyPerms() });
+      await load();
+    } catch (err) {
+      setError(err.message);
+    }
+  };
+
+  const updateUserPerms = async (user, sheet, field, value) => {
+    const permissions = { ...user.permissions, [sheet]: { ...user.permissions[sheet], [field]: value } };
+    try {
+      await usersApi.update(user.id, { permissions });
+      await load();
+    } catch (err) {
+      setError(err.message);
+    }
+  };
+
+  const toggleActive = async (user) => {
+    if (user.isAdmin) return;
+    try {
+      await usersApi.update(user.id, { active: !user.active });
+      await load();
+    } catch (err) {
+      setError(err.message);
+    }
+  };
+
+  if (loading) return <p className="loading">Cargando usuarios…</p>;
+
+  return (
+    <div>
+      <h1 className="page-title">Administración de usuarios</h1>
+      <p style={{ color: 'var(--muted)' }}>
+        El superusuario <strong>JEFE</strong> puede crear usuarios, asignar contraseñas y habilitar acceso por planilla.
+      </p>
+      {error && <div className="alert alert-error">{error}</div>}
+
+      <div className="card admin-grid" style={{ marginBottom: '1.5rem' }}>
+        <h2 style={{ marginTop: 0 }}>Nuevo usuario</h2>
+        <form onSubmit={handleCreate}>
+          <div className="form-group">
+            <label>Usuario</label>
+            <input
+              value={newUser.username}
+              onChange={(e) => setNewUser((p) => ({ ...p, username: e.target.value }))}
+              required
+            />
+          </div>
+          <div className="form-group">
+            <label>Contraseña</label>
+            <input
+              type="password"
+              value={newUser.password}
+              onChange={(e) => setNewUser((p) => ({ ...p, password: e.target.value }))}
+              required
+            />
+          </div>
+          <p style={{ fontSize: '0.85rem' }}>Permisos por planilla:</p>
+          <div className="perm-grid">
+            {SHEET_KEYS.filter((k) => k !== 'reportes').map((key) => (
+              <div key={key} className="perm-item">
+                <strong>{SHEET_LABELS[key]}</strong>
+                <label className="checkbox-row">
+                  <input
+                    type="checkbox"
+                    checked={newUser.permissions[key]?.view}
+                    onChange={(e) =>
+                      setNewUser((p) => ({
+                        ...p,
+                        permissions: {
+                          ...p.permissions,
+                          [key]: { ...p.permissions[key], view: e.target.checked },
+                        },
+                      }))
+                    }
+                  />
+                  Ver
+                </label>
+                <label className="checkbox-row">
+                  <input
+                    type="checkbox"
+                    checked={newUser.permissions[key]?.edit}
+                    onChange={(e) =>
+                      setNewUser((p) => ({
+                        ...p,
+                        permissions: {
+                          ...p.permissions,
+                          [key]: { ...p.permissions[key], edit: e.target.checked },
+                        },
+                      }))
+                    }
+                  />
+                  Editar
+                </label>
+              </div>
+            ))}
+          </div>
+          <button type="submit" className="btn btn-primary" style={{ marginTop: '1rem' }}>
+            Crear usuario
+          </button>
+        </form>
+      </div>
+
+      <div className="card">
+        <h2 style={{ marginTop: 0 }}>Usuarios del sistema</h2>
+        {users.map((u) => (
+          <div key={u.id} style={{ borderBottom: '1px solid var(--border)', padding: '1rem 0' }}>
+            <div style={{ display: 'flex', alignItems: 'center', gap: '1rem', flexWrap: 'wrap' }}>
+              <strong>{u.username}</strong>
+              {u.isAdmin && <span style={{ color: 'var(--accent)' }}>Administrador</span>}
+              {!u.isAdmin && (
+                <button type="button" className="btn btn-secondary" onClick={() => toggleActive(u)}>
+                  {u.active ? 'Deshabilitar' : 'Habilitar'}
+                </button>
+              )}
+            </div>
+            {!u.isAdmin && (
+              <div className="perm-grid" style={{ marginTop: '0.75rem' }}>
+                {SHEET_KEYS.map((key) => (
+                  <div key={key} className="perm-item">
+                    <span>{SHEET_LABELS[key]}</span>
+                    <label className="checkbox-row">
+                      <input
+                        type="checkbox"
+                        checked={u.permissions?.[key]?.view}
+                        onChange={(e) => updateUserPerms(u, key, 'view', e.target.checked)}
+                      />
+                      Ver
+                    </label>
+                    <label className="checkbox-row">
+                      <input
+                        type="checkbox"
+                        checked={u.permissions?.[key]?.edit}
+                        onChange={(e) => updateUserPerms(u, key, 'edit', e.target.checked)}
+                      />
+                      Editar
+                    </label>
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
--- a/frontend/src/pages/HomePage.jsx
+++ b/frontend/src/pages/HomePage.jsx
@@ -0,0 +1,23 @@
+import { useAuth } from '../context/AuthContext';
+
+export default function HomePage() {
+  const { user } = useAuth();
+
+  return (
+    <div className="card">
+      <h1 className="page-title">Menú principal</h1>
+      <p>
+        Bienvenido, <strong>{user?.username}</strong>. Utilice la barra superior para acceder a cada planilla.
+      </p>
+      <ul style={{ color: 'var(--muted)', lineHeight: 1.8 }}>
+        <li>Planillas de ingresos: Ventas, Servicios y Alquileres</li>
+        <li>Planillas de egresos: Gastos Diarios y Gastos Fijos</li>
+        <li>Planilla de Personal y Reportes consolidados</li>
+        {user?.isAdmin && <li>Panel de Administración para gestionar usuarios y permisos</li>}
+      </ul>
+      <p style={{ fontSize: '0.85rem', color: 'var(--muted)', marginTop: '1.5rem' }}>
+        Los datos se almacenan en el servidor de la red local. Use el botón <strong>+</strong> en cada planilla para agregar filas y <strong>Guardar</strong> para persistir.
+      </p>
+    </div>
+  );
+}
--- a/frontend/src/pages/LoginPage.jsx
+++ b/frontend/src/pages/LoginPage.jsx
@@ -0,0 +1,62 @@
+import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useAuth } from '../context/AuthContext';
+
+export default function LoginPage() {
+  const [username, setUsername] = useState('');
+  const [password, setPassword] = useState('');
+  const [error, setError] = useState('');
+  const [loading, setLoading] = useState(false);
+  const { login } = useAuth();
+  const navigate = useNavigate();
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setError('');
+    setLoading(true);
+    try {
+      await login(username.trim(), password);
+      navigate('/');
+    } catch (err) {
+      setError(err.message);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="login-page">
+      <div className="card login-card">
+        <h1>Don Marco</h1>
+        <p className="subtitle">Administración financiera — Ingreso con credenciales</p>
+        {error && <div className="alert alert-error">{error}</div>}
+        <form onSubmit={handleSubmit}>
+          <div className="form-group">
+            <label htmlFor="user">Usuario</label>
+            <input
+              id="user"
+              value={username}
+              onChange={(e) => setUsername(e.target.value)}
+              autoComplete="username"
+              required
+            />
+          </div>
+          <div className="form-group">
+            <label htmlFor="pass">Contraseña</label>
+            <input
+              id="pass"
+              type="password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              autoComplete="current-password"
+              required
+            />
+          </div>
+          <button type="submit" className="btn btn-primary" style={{ width: '100%' }} disabled={loading}>
+            {loading ? 'Ingresando…' : 'Iniciar sesión'}
+          </button>
+        </form>
+      </div>
+    </div>
+  );
+}
--- a/frontend/src/pages/ReportesPage.jsx
+++ b/frontend/src/pages/ReportesPage.jsx
@@ -0,0 +1,175 @@
+import { useState, useEffect } from 'react';
+import { reportsApi } from '../api/client';
+import { formatMoney } from '../utils/calc';
+
+const INCLUDE_OPTS = [
+  { key: 'ventas', label: 'Ventas' },
+  { key: 'servicios', label: 'Servicios' },
+  { key: 'alquileres', label: 'Alquileres' },
+  { key: 'gastos_diarios', label: 'Gastos diarios' },
+  { key: 'gastos_fijos', label: 'Gastos fijos' },
+  { key: 'personal', label: 'Personal' },
+];
+
+export default function ReportesPage() {
+  const [tipo, setTipo] = useState('mensual');
+  const [desde, setDesde] = useState('');
+  const [hasta, setHasta] = useState('');
+  const [include, setInclude] = useState(
+    Object.fromEntries(INCLUDE_OPTS.map((o) => [o.key, true]))
+  );
+  const [report, setReport] = useState(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+
+  const loadReport = async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const data = await reportsApi.get({
+        tipo,
+        desde: desde || undefined,
+        hasta: hasta || undefined,
+        include: JSON.stringify(include),
+      });
+      setReport(data);
+    } catch (e) {
+      setError(e.message);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    loadReport();
+  }, []);
+
+  const toggleInclude = (key) => setInclude((p) => ({ ...p, [key]: !p[key] }));
+
+  return (
+    <div>
+      <h1 className="page-title">Planilla de Reportes</h1>
+
+      <div className="card" style={{ marginBottom: '1rem' }}>
+        <div className="toolbar" style={{ flexWrap: 'wrap' }}>
+          <label>
+            Tipo de reporte{' '}
+            <select value={tipo} onChange={(e) => setTipo(e.target.value)}>
+              <option value="diario">Diario</option>
+              <option value="semanal">Semanal</option>
+              <option value="mensual">Mensual</option>
+              <option value="custom">Rango personalizado</option>
+            </select>
+          </label>
+          <label>
+            Desde <input type="date" value={desde} onChange={(e) => setDesde(e.target.value)} />
+          </label>
+          <label>
+            Hasta <input type="date" value={hasta} onChange={(e) => setHasta(e.target.value)} />
+          </label>
+          <button type="button" className="btn btn-primary" onClick={loadReport} disabled={loading}>
+            {loading ? 'Calculando…' : 'Generar reporte'}
+          </button>
+        </div>
+
+        <p style={{ fontSize: '0.85rem', color: 'var(--muted)' }}>Planillas a incluir en el cálculo:</p>
+        <div className="perm-grid">
+          {INCLUDE_OPTS.map((o) => (
+            <label key={o.key} className="perm-item checkbox-row">
+              <input type="checkbox" checked={!!include[o.key]} onChange={() => toggleInclude(o.key)} />
+              {o.label}
+            </label>
+          ))}
+        </div>
+      </div>
+
+      {error && <div className="alert alert-error">{error}</div>}
+
+      {report && (
+        <>
+          <div className="card">
+            <h2 style={{ marginTop: 0 }}>Desglose por planilla</h2>
+            <table className="sheet-table" style={{ minWidth: 'auto' }}>
+              <tbody>
+                <tr>
+                  <td>Ventas (ingresos)</td>
+                  <td className="computed">{formatMoney(report.desglose.ventas.totalIngresos)}</td>
+                  <td>Utilidad: {formatMoney(report.desglose.ventas.totalUtilidad)}</td>
+                </tr>
+                <tr>
+                  <td>Servicios</td>
+                  <td className="computed">{formatMoney(report.desglose.servicios.totalIngresos)}</td>
+                  <td>Utilidad: {formatMoney(report.desglose.servicios.totalUtilidad)}</td>
+                </tr>
+                <tr>
+                  <td>Alquileres</td>
+                  <td className="computed">{formatMoney(report.desglose.alquileres.totalIngresos)}</td>
+                  <td>Utilidad: {formatMoney(report.desglose.alquileres.totalUtilidad)}</td>
+                </tr>
+                <tr>
+                  <td>Gastos diarios</td>
+                  <td colSpan={2} className="computed">{formatMoney(report.desglose.gastosDiarios.total)}</td>
+                </tr>
+                <tr>
+                  <td>Gastos fijos</td>
+                  <td colSpan={2} className="computed">{formatMoney(report.desglose.gastosFijos.total)}</td>
+                </tr>
+                <tr>
+                  <td>Gastos variables (clasificados)</td>
+                  <td colSpan={2} className="computed">{formatMoney(report.desglose.gastosVariables.total)}</td>
+                </tr>
+                <tr>
+                  <td>Planilla de personal</td>
+                  <td colSpan={2} className="computed">{formatMoney(report.desglose.personal.total)}</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+
+          <div className="totals-bar" style={{ marginTop: '1rem' }}>
+            <span>Total ingresos: {formatMoney(report.totales.totalIngresos)}</span>
+            <span>Total gastos: {formatMoney(report.totales.totalGastos)}</span>
+            <span>Total personal: {formatMoney(report.totales.totalPersonal)}</span>
+          </div>
+
+          {report.cierreSemanal && Object.keys(report.cierreSemanal).length > 0 && (
+            <div className="card" style={{ marginTop: '1rem' }}>
+              <h3>Cierre semanal — gastos diarios por semana</h3>
+              <ul>
+                {Object.entries(report.cierreSemanal).map(([sem, monto]) => (
+                  <li key={sem}>
+                    Semana desde {sem}: <strong>{formatMoney(monto)}</strong>
+                  </li>
+                ))}
+              </ul>
+              <p>
+                Total gastos semanales en periodo:{' '}
+                <strong>{formatMoney(report.totalGastosSemanales)}</strong>
+              </p>
+            </div>
+          )}
+
+          {report.cierreMensual && (
+            <div className="card" style={{ marginTop: '1rem' }}>
+              <h3>Cierre mensual consolidado</h3>
+              <p>Gastos fijos en periodo: {formatMoney(report.cierreMensual.gastosFijosEnPeriodo)}</p>
+              <p>
+                Total gastos mensuales consolidado:{' '}
+                <strong>{formatMoney(report.cierreMensual.totalGastosMensualesConsolidado)}</strong>
+              </p>
+            </div>
+          )}
+
+          <div className={`report-result ${report.totales.estado}`}>
+            Resultado neto ({tipo}): {formatMoney(report.totales.resultadoNeto)} —{' '}
+            {report.totales.estado === 'utilidad' ? 'UTILIDAD (Ganancia)' : 'PÉRDIDA'}
+          </div>
+
+          <p style={{ fontSize: '0.8rem', color: 'var(--muted)', marginTop: '0.5rem' }}>
+            Fórmula: (Ventas + Alquileres + Servicios) − Total Gastos − Total Personal
+          </p>
+        </>
+      )}
+    </div>
+  );
+}
--- a/frontend/src/styles/global.css
+++ b/frontend/src/styles/global.css
@@ -0,0 +1,361 @@
+:root {
+  --bg: #0f1419;
+  --surface: #1a2332;
+  --surface2: #243044;
+  --border: #2d3f56;
+  --text: #e8edf4;
+  --muted: #8b9cb3;
+  --accent: #3d9cf5;
+  --accent-hover: #5aadff;
+  --success: #34c759;
+  --danger: #ff5c5c;
+  --warning: #ffb020;
+  --radius: 10px;
+  --shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: 'DM Sans', system-ui, sans-serif;
+  background: var(--bg);
+  color: var(--text);
+  min-height: 100vh;
+  line-height: 1.5;
+}
+
+#root {
+  min-height: 100vh;
+}
+
+a {
+  color: var(--accent);
+  text-decoration: none;
+}
+
+button {
+  font-family: inherit;
+  cursor: pointer;
+}
+
+input,
+select,
+textarea {
+  font-family: inherit;
+  font-size: 0.9rem;
+}
+
+.app-shell {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
+
+.navbar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.35rem;
+  padding: 0.75rem 1rem;
+  background: var(--surface);
+  border-bottom: 1px solid var(--border);
+  position: sticky;
+  top: 0;
+  z-index: 100;
+}
+
+.nav-tab {
+  padding: 0.5rem 0.85rem;
+  border-radius: var(--radius);
+  border: 1px solid transparent;
+  background: transparent;
+  color: var(--muted);
+  font-size: 0.85rem;
+  font-weight: 500;
+  transition: all 0.15s;
+}
+
+.nav-tab:hover {
+  color: var(--text);
+  background: var(--surface2);
+}
+
+.nav-tab.active {
+  color: var(--text);
+  background: var(--accent);
+  border-color: var(--accent);
+}
+
+.nav-tab.logout {
+  margin-left: auto;
+  color: var(--danger);
+}
+
+.nav-tab.logout:hover {
+  background: rgba(255, 92, 92, 0.15);
+}
+
+.main-content {
+  flex: 1;
+  padding: 1.25rem;
+  max-width: 1400px;
+  margin: 0 auto;
+  width: 100%;
+}
+
+.page-title {
+  margin: 0 0 1rem;
+  font-size: 1.5rem;
+  font-weight: 700;
+}
+
+.card {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 1.25rem;
+  box-shadow: var(--shadow);
+}
+
+.login-page {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh;
+  padding: 1rem;
+  background: radial-gradient(ellipse at top, #1a2a42 0%, var(--bg) 60%);
+}
+
+.login-card {
+  width: 100%;
+  max-width: 400px;
+}
+
+.login-card h1 {
+  margin: 0 0 0.25rem;
+  font-size: 1.75rem;
+}
+
+.login-card .subtitle {
+  color: var(--muted);
+  margin-bottom: 1.5rem;
+}
+
+.form-group {
+  margin-bottom: 1rem;
+}
+
+.form-group label {
+  display: block;
+  margin-bottom: 0.35rem;
+  font-size: 0.85rem;
+  color: var(--muted);
+}
+
+.form-group input,
+.form-group select {
+  width: 100%;
+  padding: 0.65rem 0.75rem;
+  border-radius: var(--radius);
+  border: 1px solid var(--border);
+  background: var(--bg);
+  color: var(--text);
+}
+
+.btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  padding: 0.55rem 1rem;
+  border-radius: var(--radius);
+  border: none;
+  font-weight: 600;
+  font-size: 0.9rem;
+  transition: background 0.15s;
+}
+
+.btn-primary {
+  background: var(--accent);
+  color: #fff;
+}
+
+.btn-primary:hover {
+  background: var(--accent-hover);
+}
+
+.btn-secondary {
+  background: var(--surface2);
+  color: var(--text);
+  border: 1px solid var(--border);
+}
+
+.btn-danger {
+  background: transparent;
+  color: var(--danger);
+  border: 1px solid var(--danger);
+}
+
+.btn-icon {
+  width: 36px;
+  height: 36px;
+  padding: 0;
+  justify-content: center;
+  font-size: 1.25rem;
+  line-height: 1;
+}
+
+.toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  margin-bottom: 1rem;
+  align-items: center;
+}
+
+.sheet-table-wrap {
+  overflow-x: auto;
+  margin-bottom: 1rem;
+}
+
+.sheet-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.85rem;
+  min-width: 800px;
+}
+
+.sheet-table th,
+.sheet-table td {
+  padding: 0.45rem 0.5rem;
+  border: 1px solid var(--border);
+  text-align: left;
+}
+
+.sheet-table th {
+  background: var(--surface2);
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+.sheet-table input,
+.sheet-table select {
+  width: 100%;
+  min-width: 70px;
+  padding: 0.35rem;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: var(--bg);
+  color: var(--text);
+}
+
+.sheet-table .computed {
+  color: var(--accent);
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+.totals-bar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1.5rem;
+  padding: 1rem;
+  background: var(--surface2);
+  border-radius: var(--radius);
+  border: 1px solid var(--border);
+}
+
+.totals-bar strong {
+  color: var(--accent);
+}
+
+.alert {
+  padding: 0.75rem 1rem;
+  border-radius: var(--radius);
+  margin-bottom: 1rem;
+}
+
+.alert-error {
+  background: rgba(255, 92, 92, 0.15);
+  border: 1px solid var(--danger);
+  color: #ffb0b0;
+}
+
+.alert-success {
+  background: rgba(52, 199, 89, 0.15);
+  border: 1px solid var(--success);
+}
+
+.alert-info {
+  background: rgba(61, 156, 245, 0.12);
+  border: 1px solid var(--accent);
+}
+
+.report-result {
+  font-size: 1.5rem;
+  font-weight: 700;
+  padding: 1rem;
+  border-radius: var(--radius);
+  text-align: center;
+  margin-top: 1rem;
+}
+
+.report-result.utilidad {
+  background: rgba(52, 199, 89, 0.2);
+  color: var(--success);
+}
+
+.report-result.perdida {
+  background: rgba(255, 92, 92, 0.2);
+  color: var(--danger);
+}
+
+.admin-grid {
+  display: grid;
+  gap: 1rem;
+}
+
+.perm-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+  gap: 0.5rem;
+  margin-top: 0.5rem;
+}
+
+.perm-item {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  font-size: 0.8rem;
+  padding: 0.5rem;
+  background: var(--bg);
+  border-radius: 6px;
+}
+
+.checkbox-row {
+  display: flex;
+  align-items: center;
+  gap: 0.35rem;
+}
+
+.loading {
+  text-align: center;
+  padding: 3rem;
+  color: var(--muted);
+}
+
+@media (max-width: 768px) {
+  .navbar {
+    padding: 0.5rem;
+  }
+  .nav-tab {
+    font-size: 0.75rem;
+    padding: 0.4rem 0.6rem;
+  }
+  .main-content {
+    padding: 0.75rem;
+  }
+}
--- a/frontend/src/utils/calc.js
+++ b/frontend/src/utils/calc.js
@@ -0,0 +1,47 @@
+export function calcIngresoRow(row) {
+  const cantidad = Number(row.cantidad) || 0;
+  const precioUnitario = Number(row.precioUnitario) || 0;
+  const costoUnitario = Number(row.costoUnitario) || 0;
+  const precioTotal = cantidad * precioUnitario;
+  const utilidad = precioTotal - cantidad * costoUnitario;
+  return { precioTotal, utilidad };
+}
+
+export function formatMoney(n) {
+  return new Intl.NumberFormat('es-AR', {
+    style: 'currency',
+    currency: 'ARS',
+    minimumFractionDigits: 2,
+  }).format(n || 0);
+}
+
+export const emptyIngresoRow = () => ({
+  fecha: '',
+  cliente: '',
+  detalle: '',
+  cantidad: '',
+  precioUnitario: '',
+  costoUnitario: '',
+});
+
+export const emptyGastoRow = () => ({
+  fecha: '',
+  detalle: '',
+  impuestos: '',
+  numeroFactura: '',
+  monto: '',
+  clasificacion: 'diario',
+});
+
+export const emptyMensualizado = () => ({
+  nombre: '',
+  sueldoBase: '',
+  cargasSociales: '',
+  bonos: '',
+});
+
+export const emptyEventual = () => ({
+  fecha: '',
+  nombre: '',
+  pagoDiario: '',
+});
--- a/frontend/vite.config.js
+++ b/frontend/vite.config.js
@@ -0,0 +1,16 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    host: '0.0.0.0',
+    port: 3000,
+    proxy: {
+      '/api': {
+        target: process.env.VITE_API_PROXY || 'http://localhost:4000',
+        changeOrigin: true,
+      },
+    },
+  },
+});