293 lines
15 KiB
HTML
293 lines
15 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="es">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Contabilidad - Nexus POS</title>
|
|
<link rel="stylesheet" href="/pos/static/css/common.css">
|
|
<style>
|
|
.tabs { display: flex; gap: 0; border-bottom: 2px solid var(--border); margin-bottom: 1rem; flex-wrap: wrap; }
|
|
.tab { padding: 0.5rem 1rem; cursor: pointer; border: 1px solid transparent;
|
|
border-bottom: none; border-radius: 6px 6px 0 0; font-size: 0.85rem;
|
|
color: var(--text-muted); transition: all 0.2s; }
|
|
.tab:hover { background: var(--bg-hover); color: var(--text); }
|
|
.tab.active { background: var(--bg); color: var(--primary); border-color: var(--border);
|
|
border-bottom: 2px solid var(--bg); margin-bottom: -2px; font-weight: 600; }
|
|
.tab-content { display: none; }
|
|
.tab-content.active { display: block; }
|
|
|
|
/* Accounts tree */
|
|
.tree { list-style: none; padding-left: 0; }
|
|
.tree ul { list-style: none; padding-left: 1.5rem; }
|
|
.tree li { padding: 0.25rem 0; }
|
|
.tree-toggle { cursor: pointer; user-select: none; }
|
|
.tree-toggle::before { content: '\25B6'; display: inline-block; width: 1rem;
|
|
font-size: 0.7rem; transition: transform 0.2s; }
|
|
.tree-toggle.open::before { transform: rotate(90deg); }
|
|
.tree-code { font-family: monospace; color: var(--text-muted); margin-right: 0.5rem;
|
|
font-size: 0.85rem; }
|
|
.tree-balance { float: right; font-family: monospace; font-weight: 600; }
|
|
.tree-balance.negative { color: var(--danger); }
|
|
|
|
/* Report tables */
|
|
.report-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
|
|
.report-table th { text-align: left; padding: 0.5rem; border-bottom: 2px solid var(--border);
|
|
font-weight: 600; color: var(--text-muted); font-size: 0.8rem;
|
|
text-transform: uppercase; }
|
|
.report-table td { padding: 0.5rem; border-bottom: 1px solid var(--border-light); }
|
|
.report-table .amount { text-align: right; font-family: monospace; }
|
|
.report-table .total-row { font-weight: 700; border-top: 2px solid var(--border); }
|
|
.report-table .subtotal-row { font-weight: 600; background: var(--bg-subtle); }
|
|
|
|
/* Period selector */
|
|
.period-selector { display: flex; gap: 0.5rem; align-items: center; margin-bottom: 1rem; }
|
|
.period-selector select, .period-selector input { padding: 0.4rem 0.5rem; border: 1px solid var(--border);
|
|
border-radius: 4px; font-size: 0.9rem; }
|
|
|
|
/* Entry detail */
|
|
.entry-lines { margin-top: 0.5rem; }
|
|
.entry-header { display: flex; justify-content: space-between; align-items: center;
|
|
padding: 0.5rem; background: var(--bg-subtle); border-radius: 4px;
|
|
margin-bottom: 0.5rem; }
|
|
|
|
/* Status badges */
|
|
.badge { padding: 0.15rem 0.5rem; border-radius: 4px; font-size: 0.75rem; font-weight: 600; }
|
|
.badge-open { background: #dcfce7; color: #166534; }
|
|
.badge-closed { background: #fee2e2; color: #991b1b; }
|
|
|
|
/* Form grid */
|
|
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-bottom: 1rem; }
|
|
.form-group { display: flex; flex-direction: column; gap: 0.25rem; }
|
|
.form-group label { font-size: 0.8rem; font-weight: 600; color: var(--text-muted); }
|
|
.form-group input, .form-group select, .form-group textarea {
|
|
padding: 0.4rem 0.5rem; border: 1px solid var(--border); border-radius: 4px;
|
|
font-size: 0.9rem; }
|
|
|
|
/* Modal */
|
|
.modal-overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0;
|
|
background: rgba(0,0,0,0.5); z-index: 1000; align-items: center;
|
|
justify-content: center; }
|
|
.modal-overlay.active { display: flex; }
|
|
.modal { background: var(--bg); padding: 1.5rem; border-radius: 8px; width: 90%;
|
|
max-width: 600px; max-height: 80vh; overflow-y: auto; }
|
|
.modal h3 { margin-top: 0; }
|
|
|
|
/* Lines editor */
|
|
.lines-table { width: 100%; border-collapse: collapse; margin-top: 0.5rem; }
|
|
.lines-table th { text-align: left; font-size: 0.8rem; padding: 0.3rem; }
|
|
.lines-table td { padding: 0.3rem; }
|
|
.lines-table input, .lines-table select { width: 100%; padding: 0.3rem; border: 1px solid var(--border);
|
|
border-radius: 3px; font-size: 0.85rem; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<div class="header">
|
|
<h1>Contabilidad</h1>
|
|
<div style="display:flex;gap:0.5rem;">
|
|
<a href="/pos/sale" class="btn btn-secondary">POS</a>
|
|
<a href="/pos/invoicing" class="btn btn-secondary">Facturacion</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tabs">
|
|
<div class="tab active" data-tab="accounts">Catalogo de Cuentas</div>
|
|
<div class="tab" data-tab="entries">Polizas</div>
|
|
<div class="tab" data-tab="trial-balance">Balanza</div>
|
|
<div class="tab" data-tab="income-statement">Estado de Resultados</div>
|
|
<div class="tab" data-tab="balance-sheet">Balance General</div>
|
|
<div class="tab" data-tab="aging">Antiguedad Saldos</div>
|
|
<div class="tab" data-tab="periods">Periodos</div>
|
|
</div>
|
|
|
|
<!-- Tab: Chart of Accounts -->
|
|
<div id="tab-accounts" class="tab-content active">
|
|
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;">
|
|
<h2 style="margin:0;">Catalogo de Cuentas</h2>
|
|
<button class="btn btn-primary" onclick="Accounting.showNewAccountModal()">+ Subcuenta</button>
|
|
</div>
|
|
<div id="accounts-tree"></div>
|
|
</div>
|
|
|
|
<!-- Tab: Journal Entries -->
|
|
<div id="tab-entries" class="tab-content">
|
|
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;">
|
|
<h2 style="margin:0;">Polizas Contables</h2>
|
|
<button class="btn btn-primary" onclick="Accounting.showNewEntryModal()">+ Poliza Manual</button>
|
|
</div>
|
|
<div class="period-selector">
|
|
<label>Desde:</label>
|
|
<input type="date" id="entries-from">
|
|
<label>Hasta:</label>
|
|
<input type="date" id="entries-to">
|
|
<select id="entries-type">
|
|
<option value="">Todos</option>
|
|
<option value="ingreso">Ingreso</option>
|
|
<option value="egreso">Egreso</option>
|
|
<option value="diario">Diario</option>
|
|
</select>
|
|
<button class="btn btn-secondary" onclick="Accounting.loadEntries()">Filtrar</button>
|
|
</div>
|
|
<div id="entries-list"></div>
|
|
<div id="entries-pagination"></div>
|
|
</div>
|
|
|
|
<!-- Tab: Trial Balance -->
|
|
<div id="tab-trial-balance" class="tab-content">
|
|
<h2>Balanza de Comprobacion</h2>
|
|
<div class="period-selector">
|
|
<label>Anio:</label>
|
|
<input type="number" id="tb-year" min="2020" max="2030" style="width:80px;">
|
|
<label>Mes:</label>
|
|
<select id="tb-month">
|
|
<option value="1">Enero</option><option value="2">Febrero</option>
|
|
<option value="3">Marzo</option><option value="4">Abril</option>
|
|
<option value="5">Mayo</option><option value="6">Junio</option>
|
|
<option value="7">Julio</option><option value="8">Agosto</option>
|
|
<option value="9">Septiembre</option><option value="10">Octubre</option>
|
|
<option value="11">Noviembre</option><option value="12">Diciembre</option>
|
|
</select>
|
|
<button class="btn btn-secondary" onclick="Accounting.loadTrialBalance()">Generar</button>
|
|
</div>
|
|
<div id="trial-balance-content"></div>
|
|
</div>
|
|
|
|
<!-- Tab: Income Statement -->
|
|
<div id="tab-income-statement" class="tab-content">
|
|
<h2>Estado de Resultados</h2>
|
|
<div class="period-selector">
|
|
<label>Anio:</label>
|
|
<input type="number" id="is-year" min="2020" max="2030" style="width:80px;">
|
|
<label>Mes:</label>
|
|
<select id="is-month">
|
|
<option value="1">Enero</option><option value="2">Febrero</option>
|
|
<option value="3">Marzo</option><option value="4">Abril</option>
|
|
<option value="5">Mayo</option><option value="6">Junio</option>
|
|
<option value="7">Julio</option><option value="8">Agosto</option>
|
|
<option value="9">Septiembre</option><option value="10">Octubre</option>
|
|
<option value="11">Noviembre</option><option value="12">Diciembre</option>
|
|
</select>
|
|
<button class="btn btn-secondary" onclick="Accounting.loadIncomeStatement()">Generar</button>
|
|
</div>
|
|
<div id="income-statement-content"></div>
|
|
</div>
|
|
|
|
<!-- Tab: Balance Sheet -->
|
|
<div id="tab-balance-sheet" class="tab-content">
|
|
<h2>Balance General</h2>
|
|
<div class="period-selector">
|
|
<label>Al dia:</label>
|
|
<input type="date" id="bs-date">
|
|
<button class="btn btn-secondary" onclick="Accounting.loadBalanceSheet()">Generar</button>
|
|
</div>
|
|
<div id="balance-sheet-content"></div>
|
|
</div>
|
|
|
|
<!-- Tab: Aging -->
|
|
<div id="tab-aging" class="tab-content">
|
|
<h2>Antiguedad de Saldos</h2>
|
|
<div id="aging-content"></div>
|
|
</div>
|
|
|
|
<!-- Tab: Fiscal Periods -->
|
|
<div id="tab-periods" class="tab-content">
|
|
<h2>Periodos Fiscales</h2>
|
|
<div style="margin-bottom:1rem;" id="close-period-form">
|
|
<div class="period-selector">
|
|
<label>Cerrar periodo:</label>
|
|
<input type="number" id="cp-year" min="2020" max="2030" style="width:80px;">
|
|
<select id="cp-month">
|
|
<option value="1">Enero</option><option value="2">Febrero</option>
|
|
<option value="3">Marzo</option><option value="4">Abril</option>
|
|
<option value="5">Mayo</option><option value="6">Junio</option>
|
|
<option value="7">Julio</option><option value="8">Agosto</option>
|
|
<option value="9">Septiembre</option><option value="10">Octubre</option>
|
|
<option value="11">Noviembre</option><option value="12">Diciembre</option>
|
|
</select>
|
|
<button class="btn btn-danger" onclick="Accounting.closePeriod()">Cerrar Periodo</button>
|
|
</div>
|
|
</div>
|
|
<div id="periods-list"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- New Account Modal -->
|
|
<div class="modal-overlay" id="new-account-modal">
|
|
<div class="modal">
|
|
<h3>Nueva Subcuenta</h3>
|
|
<div class="form-grid">
|
|
<div class="form-group">
|
|
<label>Codigo</label>
|
|
<input type="text" id="na-code" placeholder="110.01">
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Nombre</label>
|
|
<input type="text" id="na-name" placeholder="Caja chica">
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Cuenta padre</label>
|
|
<select id="na-parent"></select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Tipo</label>
|
|
<select id="na-type">
|
|
<option value="activo">Activo</option>
|
|
<option value="pasivo">Pasivo</option>
|
|
<option value="capital">Capital</option>
|
|
<option value="ingreso">Ingreso</option>
|
|
<option value="costo">Costo</option>
|
|
<option value="gasto">Gasto</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div style="display:flex;gap:0.5rem;justify-content:flex-end;">
|
|
<button class="btn btn-secondary" onclick="Accounting.closeModal('new-account-modal')">Cancelar</button>
|
|
<button class="btn btn-primary" onclick="Accounting.createAccount()">Crear</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- New Entry Modal -->
|
|
<div class="modal-overlay" id="new-entry-modal">
|
|
<div class="modal">
|
|
<h3>Nueva Poliza Manual</h3>
|
|
<div class="form-grid">
|
|
<div class="form-group">
|
|
<label>Fecha</label>
|
|
<input type="date" id="ne-date">
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Descripcion</label>
|
|
<input type="text" id="ne-description" placeholder="Descripcion de la poliza">
|
|
</div>
|
|
</div>
|
|
<h4>Movimientos</h4>
|
|
<table class="lines-table">
|
|
<thead>
|
|
<tr><th>Cuenta</th><th style="width:120px;">Cargo</th><th style="width:120px;">Abono</th><th style="width:30px;"></th></tr>
|
|
</thead>
|
|
<tbody id="ne-lines"></tbody>
|
|
</table>
|
|
<button class="btn btn-secondary" onclick="Accounting.addEntryLine()" style="margin-top:0.5rem;">+ Linea</button>
|
|
<div id="ne-balance" style="margin-top:0.5rem;font-weight:600;"></div>
|
|
<div style="display:flex;gap:0.5rem;justify-content:flex-end;margin-top:1rem;">
|
|
<button class="btn btn-secondary" onclick="Accounting.closeModal('new-entry-modal')">Cancelar</button>
|
|
<button class="btn btn-primary" onclick="Accounting.createEntry()">Guardar</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Entry Detail Modal -->
|
|
<div class="modal-overlay" id="entry-detail-modal">
|
|
<div class="modal">
|
|
<div id="entry-detail-content"></div>
|
|
<div style="text-align:right;margin-top:1rem;">
|
|
<button class="btn btn-secondary" onclick="Accounting.closeModal('entry-detail-modal')">Cerrar</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="/pos/static/js/accounting.js"></script>
|
|
</body>
|
|
</html>
|