103 lines
4.9 KiB
HTML
103 lines
4.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="es">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Cuentas por Cobrar — NEXUS AUTOPARTS</title>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Orbitron:wght@700&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="/shared.css">
|
|
<link rel="stylesheet" href="/cuentas.css">
|
|
</head>
|
|
<body>
|
|
<div id="shared-nav"></div>
|
|
|
|
<div class="cuentas-container">
|
|
<!-- Customer List View -->
|
|
<div id="list-view">
|
|
<div class="cuentas-search">
|
|
<input id="customer-search" type="text" placeholder="Buscar cliente por nombre o RFC...">
|
|
</div>
|
|
<div id="customer-grid" class="customer-grid"></div>
|
|
<div id="customer-pagination" class="cuentas-pagination"></div>
|
|
</div>
|
|
|
|
<!-- Customer Detail View -->
|
|
<div id="detail-view" class="detail-view">
|
|
<div class="detail-header">
|
|
<div class="dh-info">
|
|
<div class="dh-field"><div class="dh-label">Cliente</div><div class="dh-value accent" id="dh-name"></div></div>
|
|
<div class="dh-field"><div class="dh-label">RFC</div><div class="dh-value" id="dh-rfc"></div></div>
|
|
<div class="dh-field"><div class="dh-label">Saldo</div><div class="dh-value" id="dh-balance"></div></div>
|
|
<div class="dh-field"><div class="dh-label">Limite</div><div class="dh-value" id="dh-limit"></div></div>
|
|
<div class="dh-field"><div class="dh-label">Plazo</div><div class="dh-value" id="dh-terms"></div></div>
|
|
</div>
|
|
<button class="btn btn-secondary" id="btn-back-list">« Volver</button>
|
|
</div>
|
|
|
|
<div class="detail-columns">
|
|
<!-- Invoices -->
|
|
<div class="detail-card">
|
|
<h3>Facturas</h3>
|
|
<table class="detail-table">
|
|
<thead>
|
|
<tr><th>Folio</th><th>Fecha</th><th>Total</th><th>Pagado</th><th>Estado</th></tr>
|
|
</thead>
|
|
<tbody id="invoice-list"></tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<!-- Payments + Form -->
|
|
<div class="detail-card">
|
|
<h3>Pagos</h3>
|
|
<table class="detail-table">
|
|
<thead>
|
|
<tr><th>Fecha</th><th>Monto</th><th>Metodo</th><th>Ref</th><th>Factura</th></tr>
|
|
</thead>
|
|
<tbody id="payment-list"></tbody>
|
|
</table>
|
|
|
|
<div class="payment-form">
|
|
<h4>Registrar Pago</h4>
|
|
<div class="pf-row">
|
|
<div class="pf-field">
|
|
<label>Monto *</label>
|
|
<input id="pay-amount" type="number" step="0.01" min="0.01" placeholder="0.00" style="width:120px">
|
|
</div>
|
|
<div class="pf-field">
|
|
<label>Metodo</label>
|
|
<select id="pay-method">
|
|
<option value="efectivo">Efectivo</option>
|
|
<option value="transferencia">Transferencia</option>
|
|
<option value="cheque">Cheque</option>
|
|
<option value="tarjeta">Tarjeta</option>
|
|
</select>
|
|
</div>
|
|
<div class="pf-field">
|
|
<label>Referencia</label>
|
|
<input id="pay-reference" placeholder="# ref" style="width:120px">
|
|
</div>
|
|
<div class="pf-field">
|
|
<label>Aplicar a factura</label>
|
|
<select id="pay-invoice">
|
|
<option value="">Abono general</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="pf-row">
|
|
<div class="pf-field" style="flex:1">
|
|
<label>Notas</label>
|
|
<input id="pay-notes" placeholder="Notas del pago" style="width:100%">
|
|
</div>
|
|
<button class="btn btn-primary" id="btn-pay" style="align-self:flex-end;padding:0.4rem 1.2rem">Registrar Pago</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="/nav.js"></script>
|
|
<script src="/cuentas.js"></script>
|
|
</body>
|
|
</html>
|