first commit
This commit is contained in:
unknown
15
frontend/Dockerfile
Normal file
15
frontend/Dockerfile
Normal file
@@ -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;"]
|
||||
14
frontend/index.html
Normal file
14
frontend/index.html
Normal file
@@ -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>
|
||||
18
frontend/nginx.conf
Normal file
18
frontend/nginx.conf
Normal file
@@ -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;
|
||||
}
|
||||
}
|
||||
1761
frontend/package-lock.json
generated
Normal file
1761
frontend/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
20
frontend/package.json
Normal file
20
frontend/package.json
Normal file
@@ -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"
|
||||
}
|
||||
}
|
||||
50
frontend/src/App.jsx
Normal file
50
frontend/src/App.jsx
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
42
frontend/src/api/client.js
Normal file
42
frontend/src/api/client.js
Normal file
@@ -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}`);
|
||||
},
|
||||
};
|
||||
143
frontend/src/components/GastoSheet.jsx
Normal file
143
frontend/src/components/GastoSheet.jsx
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
148
frontend/src/components/IngresoSheet.jsx
Normal file
148
frontend/src/components/IngresoSheet.jsx
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
52
frontend/src/components/Layout.jsx
Normal file
52
frontend/src/components/Layout.jsx
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
174
frontend/src/components/PersonalSheet.jsx
Normal file
174
frontend/src/components/PersonalSheet.jsx
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
57
frontend/src/context/AuthContext.jsx
Normal file
57
frontend/src/context/AuthContext.jsx
Normal file
@@ -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;
|
||||
}
|
||||
16
frontend/src/main.jsx
Normal file
16
frontend/src/main.jsx
Normal file
@@ -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>
|
||||
);
|
||||
191
frontend/src/pages/AdminPage.jsx
Normal file
191
frontend/src/pages/AdminPage.jsx
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
23
frontend/src/pages/HomePage.jsx
Normal file
23
frontend/src/pages/HomePage.jsx
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
62
frontend/src/pages/LoginPage.jsx
Normal file
62
frontend/src/pages/LoginPage.jsx
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
175
frontend/src/pages/ReportesPage.jsx
Normal file
175
frontend/src/pages/ReportesPage.jsx
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
361
frontend/src/styles/global.css
Normal file
361
frontend/src/styles/global.css
Normal file
@@ -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;
|
||||
}
|
||||
}
|
||||
47
frontend/src/utils/calc.js
Normal file
47
frontend/src/utils/calc.js
Normal file
@@ -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: '',
|
||||
});
|
||||
16
frontend/vite.config.js
Normal file
16
frontend/vite.config.js
Normal file
@@ -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,
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
Reference in New Issue
Block a user