222 lines
12 KiB
HTML
222 lines
12 KiB
HTML
<!-- /home/Autopartes/pos/templates/customers.html -->
|
|
<!DOCTYPE html>
|
|
<html lang="es">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Clientes - Nexus POS</title>
|
|
<link rel="stylesheet" href="/pos/static/css/common.css">
|
|
<style>
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
body { font-family: var(--font-body, 'Segoe UI', system-ui, sans-serif); background: var(--color-bg, #f0f2f5); color: var(--color-text, #1a1a2e); }
|
|
|
|
.topbar { background: var(--color-primary, #1a1a2e); color: #fff; padding: 12px 24px; display: flex; align-items: center; justify-content: space-between; }
|
|
.topbar h1 { font-size: 18px; font-weight: 600; }
|
|
.topbar .nav-links a { color: #b0bec5; text-decoration: none; margin-left: 16px; font-size: 14px; }
|
|
.topbar .nav-links a:hover { color: #fff; }
|
|
|
|
.container { max-width: 1200px; margin: 0 auto; padding: 20px; }
|
|
|
|
.toolbar { display: flex; gap: 12px; margin-bottom: 16px; align-items: center; }
|
|
.toolbar input { flex: 1; padding: 10px 14px; border: 1px solid var(--color-border, #ddd); border-radius: var(--radius, 6px); font-size: 14px; }
|
|
.toolbar .btn { padding: 10px 20px; border: none; border-radius: var(--radius, 6px); cursor: pointer; font-size: 14px; font-weight: 500; }
|
|
.btn-primary { background: var(--color-primary, #1a1a2e); color: #fff; }
|
|
.btn-secondary { background: #e0e0e0; color: #333; }
|
|
|
|
.customers-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: var(--radius, 6px); overflow: hidden; box-shadow: var(--shadow, 0 1px 3px rgba(0,0,0,0.1)); }
|
|
.customers-table th { background: var(--color-surface, #f8f9fa); padding: 10px 12px; text-align: left; font-size: 12px; font-weight: 600; color: #666; border-bottom: 2px solid var(--color-border, #ddd); }
|
|
.customers-table td { padding: 10px 12px; font-size: 13px; border-bottom: 1px solid #f0f0f0; }
|
|
.customers-table tr { cursor: pointer; }
|
|
.customers-table tr:hover { background: #f8f9fa; }
|
|
|
|
.tier-badge { display: inline-block; padding: 2px 8px; border-radius: 12px; font-size: 11px; font-weight: 600; }
|
|
.tier-1 { background: #e3f2fd; color: #1565c0; }
|
|
.tier-2 { background: #e8f5e9; color: #2e7d32; }
|
|
.tier-3 { background: #fff3e0; color: #e65100; }
|
|
|
|
.credit-bar { width: 80px; height: 6px; background: #e0e0e0; border-radius: 3px; display: inline-block; vertical-align: middle; margin-left: 6px; }
|
|
.credit-fill { height: 100%; border-radius: 3px; background: #4caf50; }
|
|
.credit-fill.warning { background: #ff9800; }
|
|
.credit-fill.danger { background: #f44336; }
|
|
|
|
.pagination { display: flex; justify-content: center; gap: 8px; margin-top: 16px; }
|
|
.pagination .btn { padding: 6px 12px; font-size: 13px; }
|
|
.pagination .btn.active { background: var(--color-primary, #1a1a2e); color: #fff; }
|
|
|
|
/* Detail panel */
|
|
.detail-panel { display: none; position: fixed; top: 0; right: 0; width: 480px; height: 100vh; background: #fff; box-shadow: -4px 0 20px rgba(0,0,0,0.15); z-index: 100; overflow-y: auto; }
|
|
.detail-panel.active { display: block; }
|
|
.detail-header { padding: 16px 20px; background: var(--color-primary, #1a1a2e); color: #fff; display: flex; justify-content: space-between; align-items: center; }
|
|
.detail-header h2 { font-size: 16px; }
|
|
.detail-header .btn-close { background: none; border: none; color: #fff; font-size: 24px; cursor: pointer; }
|
|
.detail-body { padding: 20px; }
|
|
.detail-section { margin-bottom: 20px; }
|
|
.detail-section h3 { font-size: 14px; font-weight: 600; color: #666; margin-bottom: 8px; border-bottom: 1px solid #eee; padding-bottom: 4px; }
|
|
.detail-field { display: flex; justify-content: space-between; padding: 4px 0; font-size: 13px; }
|
|
.detail-field .label { color: #999; }
|
|
|
|
.credit-summary { background: #f5f5f5; padding: 12px; border-radius: 8px; margin-bottom: 16px; }
|
|
.credit-summary .big-number { font-size: 24px; font-weight: 700; }
|
|
|
|
.purchases-list { max-height: 300px; overflow-y: auto; }
|
|
.purchase-item { padding: 8px 0; border-bottom: 1px solid #f0f0f0; font-size: 13px; display: flex; justify-content: space-between; }
|
|
|
|
.vehicle-card { background: #f5f5f5; padding: 10px 12px; border-radius: 8px; margin-bottom: 8px; font-size: 13px; }
|
|
|
|
/* Modal */
|
|
.modal-overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 200; align-items: center; justify-content: center; }
|
|
.modal-overlay.active { display: flex; }
|
|
.modal { background: #fff; border-radius: 12px; padding: 24px; width: 550px; max-width: 95vw; max-height: 90vh; overflow-y: auto; }
|
|
.modal h2 { margin-bottom: 16px; }
|
|
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
|
|
.form-grid .full-width { grid-column: 1 / -1; }
|
|
.form-field { display: flex; flex-direction: column; gap: 4px; }
|
|
.form-field label { font-size: 12px; color: #666; font-weight: 500; }
|
|
.form-field input, .form-field select { padding: 8px; border: 1px solid #ddd; border-radius: 6px; font-size: 13px; }
|
|
.modal-actions { display: flex; gap: 8px; margin-top: 16px; justify-content: flex-end; }
|
|
.modal-actions .btn { padding: 10px 20px; border: none; border-radius: 6px; cursor: pointer; font-size: 14px; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="topbar">
|
|
<h1>Clientes</h1>
|
|
<div class="nav-links">
|
|
<a href="/pos/sale">POS</a>
|
|
<a href="/pos/catalog">Catalogo</a>
|
|
<a href="/pos/inventory">Inventario</a>
|
|
<a href="/pos/customers">Clientes</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<div class="toolbar">
|
|
<input type="text" id="searchInput" placeholder="Buscar por nombre, RFC, telefono..." oninput="Customers.search()">
|
|
<button class="btn btn-primary" onclick="Customers.showCreateModal()">+ Nuevo Cliente</button>
|
|
</div>
|
|
|
|
<table class="customers-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Nombre</th>
|
|
<th>RFC</th>
|
|
<th>Telefono</th>
|
|
<th>Lista</th>
|
|
<th>Credito</th>
|
|
<th>Saldo</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="customersBody"></tbody>
|
|
</table>
|
|
|
|
<div class="pagination" id="pagination"></div>
|
|
</div>
|
|
|
|
<!-- Detail Panel (slides in from right) -->
|
|
<div class="detail-panel" id="detailPanel">
|
|
<div class="detail-header">
|
|
<h2 id="detailName">Cliente</h2>
|
|
<button class="btn-close" onclick="Customers.closeDetail()">×</button>
|
|
</div>
|
|
<div class="detail-body">
|
|
<div class="detail-section">
|
|
<div class="credit-summary">
|
|
<div>Credito disponible</div>
|
|
<div class="big-number" id="detailCreditAvailable">$0.00</div>
|
|
<div style="font-size: 12px; color: #666;">
|
|
Limite: <span id="detailCreditLimit">$0.00</span> |
|
|
Saldo: <span id="detailCreditBalance">$0.00</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="detail-section">
|
|
<h3>Datos Fiscales</h3>
|
|
<div id="detailFiscal"></div>
|
|
</div>
|
|
|
|
<div class="detail-section">
|
|
<h3>Contacto</h3>
|
|
<div id="detailContact"></div>
|
|
</div>
|
|
|
|
<div class="detail-section">
|
|
<h3>Vehiculos</h3>
|
|
<div id="detailVehicles"></div>
|
|
</div>
|
|
|
|
<div class="detail-section">
|
|
<h3>Compras Recientes</h3>
|
|
<div class="purchases-list" id="detailPurchases"></div>
|
|
</div>
|
|
|
|
<div style="display: flex; gap: 8px; margin-top: 16px;">
|
|
<button class="btn btn-primary" onclick="Customers.editCurrent()">Editar</button>
|
|
<button class="btn btn-secondary" onclick="Customers.showStatement()">Estado de Cuenta</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Create/Edit Modal -->
|
|
<div class="modal-overlay" id="customerModal">
|
|
<div class="modal">
|
|
<h2 id="modalTitle">Nuevo Cliente</h2>
|
|
<input type="hidden" id="editId">
|
|
<div class="form-grid">
|
|
<div class="form-field full-width"><label>Nombre *</label><input type="text" id="fName"></div>
|
|
<div class="form-field"><label>RFC</label><input type="text" id="fRfc" maxlength="13"></div>
|
|
<div class="form-field"><label>Razon Social</label><input type="text" id="fRazonSocial"></div>
|
|
<div class="form-field"><label>Regimen Fiscal</label>
|
|
<select id="fRegimenFiscal">
|
|
<option value="">Seleccionar...</option>
|
|
<option value="601">601 - General de Ley PM</option>
|
|
<option value="603">603 - PM Fines No Lucrativos</option>
|
|
<option value="605">605 - Sueldos y Salarios</option>
|
|
<option value="606">606 - Arrendamiento</option>
|
|
<option value="612">612 - PF Actividad Empresarial</option>
|
|
<option value="616">616 - Sin Obligaciones Fiscales</option>
|
|
<option value="621">621 - Incorporacion Fiscal</option>
|
|
<option value="625">625 - RESICO</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-field"><label>Uso CFDI</label>
|
|
<select id="fUsoCfdi">
|
|
<option value="G03">G03 - Gastos en general</option>
|
|
<option value="G01">G01 - Adquisicion de mercancias</option>
|
|
<option value="P01">P01 - Por definir</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-field"><label>Codigo Postal</label><input type="text" id="fCp" maxlength="5"></div>
|
|
<div class="form-field"><label>Telefono</label><input type="tel" id="fPhone"></div>
|
|
<div class="form-field"><label>Email</label><input type="email" id="fEmail"></div>
|
|
<div class="form-field full-width"><label>Direccion</label><input type="text" id="fAddress"></div>
|
|
<div class="form-field"><label>Lista de precio</label>
|
|
<select id="fPriceTier">
|
|
<option value="1">1 - Mostrador</option>
|
|
<option value="2">2 - Taller</option>
|
|
<option value="3">3 - Mayoreo</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-field"><label>Limite de credito</label><input type="number" id="fCreditLimit" value="0" min="0" step="100"></div>
|
|
</div>
|
|
<div class="modal-actions">
|
|
<button class="btn btn-secondary" onclick="Customers.closeModal()">Cancelar</button>
|
|
<button class="btn btn-primary" onclick="Customers.save()">Guardar</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Statement Modal -->
|
|
<div class="modal-overlay" id="statementModal">
|
|
<div class="modal" style="width: 650px;">
|
|
<h2>Estado de Cuenta: <span id="statementName"></span></h2>
|
|
<div id="statementContent" style="max-height: 500px; overflow-y: auto;"></div>
|
|
<div class="modal-actions" style="margin-top: 16px;">
|
|
<button class="btn btn-secondary" onclick="document.getElementById('statementModal').classList.remove('active')">Cerrar</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="/pos/static/js/customers.js"></script>
|
|
</body>
|
|
</html>
|