marcogll/ap_pos
1
0
Fork 0
mirror of https://github.com/marcogll/ap_pos.git synced 2026-01-13 13:15:16 +00:00
Code Issues Packages Projects Releases Wiki Activity
Files
a12ac988ebd9755fce8271681169271ec20e2d47
ap_pos/index.html
Marco Gallegos 6e97309323 fix: Fix product import display and add payment methods 
- Fix category mapping from 'Vanity Lashes'/'PMU Services' to 'Pestañas'/'Microblading'
- Update global products array when loading from API
- Add debug logging for categories and products count
- Add new payment methods: Otros, Interno, GiftCard

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-09-08 19:01:09 -06:00

773 lines
34 KiB
HTML
Raw Blame History

<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Ale Ponce | AlMa</title>
<!-- Favicon SVG -->
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23444' d='M20 4H4c-1.11 0-1.99.89-1.99 2L2 18c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V6c0-1.11-.89-2-2-2zm0 14H4V6h16v12zM6 10h2v4H6zm3 0h2v4H9zm3 0h2v4h-2zm3 0h2v4h-2z'/%3E%3C/svg%3E">
<!-- Google Fonts & Icons -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600&family=Open+Sans:wght@400;600&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Material+Icons+Outlined" rel="stylesheet">
<!-- Styles -->
<link rel="stylesheet" href="styles.css?v=1757039804" />
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<main class="container">
<header class="main-header">
<!-- Logo del negocio en lugar de texto -->
<img src="src/logo.png" alt="Ale Ponce" class="header-logo">
<nav class="tabs">
<button type="button" class="tab-link" data-tab="tab-dashboard">
<span class="material-icons-outlined">dashboard</span><span>Dashboard</span>
</button>
<button type="button" class="tab-link" data-tab="tab-movements">
<span class="material-icons-outlined">receipt_long</span><span>Ventas</span>
</button>
<button type="button" class="tab-link" data-tab="tab-clients">
<span class="material-icons-outlined">groups</span><span>Clientes</span>
</button>
<button type="button" class="tab-link" data-tab="tab-products">
<span class="material-icons-outlined">inventory_2</span><span>Productos</span>
</button>
<button type="button" class="tab-link" data-tab="tab-cancellation-requests" id="tab-cancellation-requests-btn" style="display: none;">
<span class="material-icons-outlined">cancel_presentation</span><span>Solicitudes</span>
</button>
<button type="button" class="tab-link" data-tab="tab-settings">
<span class="material-icons-outlined">settings</span><span>Configuración</span>
</button>
</nav>
<button type="button" id="btnLogout" class="btn-icon btn-danger">
<span class="material-icons-outlined">logout</span>
</button>
</header>
<!-- Pestaña de Dashboard -->
<div id="tab-dashboard" class="tab-content">
<div class="section">
<h2>Dashboard</h2>
<div class="dashboard-stats">
<div class="stat-card">
<h3>Ingresos Totales</h3>
<p id="stat-total-income">$0.00</p>
</div>
<div class="stat-card">
<h3>Servicios Realizados</h3>
<p id="stat-total-movements">0</p>
</div>
</div>
<div class="dashboard-grid">
<div class="dashboard-chart">
<h3>Ingresos por Servicio</h3>
<canvas id="incomeChart"></canvas>
</div>
<div class="dashboard-chart">
<h3>Ingresos por Método de Pago</h3>
<canvas id="paymentMethodChart"></canvas>
</div>
</div>
<div class="section">
<h3>Próximas Citas</h3>
<div id="upcoming-appointments-list" class="appointments-list">
<!-- Las citas se renderizarán aquí -->
</div>
</div>
</div>
</div>
<!-- Pestaña de Movimientos/Recibos -->
<div id="tab-movements" class="tab-content">
<div class="sub-tabs">
<button type="button" class="sub-tab-link active" data-subtab="sub-tab-ventas">💰 Ventas</button>
<button type="button" class="sub-tab-link" data-subtab="sub-tab-tickets">🎫 Tickets</button>
</div>
<!-- Sub-Pestaña de Ventas -->
<div id="sub-tab-ventas" class="sub-tab-content active">
<div class="sales-container">
<!-- Header -->
<div class="sales-header">
<h2>💰 Nueva Venta</h2>
<div class="sales-summary">
<span class="cart-count" id="cart-count">0 productos</span>
<span class="cart-total" id="cart-total">$0.00</span>
</div>
</div>
<div class="sales-layout">
<!-- Panel de Productos (Izquierda) -->
<div class="products-panel">
<!-- Cliente -->
<div class="client-selector">
<div class="form-group modern-input">
<label>👤 Cliente</label>
<input type="text" id="m-cliente" list="client-list" autocomplete="off" placeholder="Buscar o crear cliente... (opcional)" />
<datalist id="client-list"></datalist>
</div>
</div>
<!-- Categorías de Productos -->
<div class="categories-container">
<h3>Selecciona tus servicios</h3>
<!-- Vanity Lashes -->
<div class="category-section" data-category="Vanity Lashes">
<div class="category-header">
<span class="category-icon">👁️</span>
<h4>Vanity Lashes</h4>
<button class="category-toggle">▶</button>
</div>
<div class="products-grid" id="pestanas-products">
<!-- Los productos se cargarán dinámicamente aquí -->
</div>
</div>
<!-- PMU Services -->
<div class="category-section" data-category="PMU Services">
<div class="category-header">
<span class="category-icon">✏️</span>
<h4>PMU Services</h4>
<button class="category-toggle">▶</button>
</div>
<div class="products-grid" id="microblading-products">
<!-- Los productos se cargarán dinámicamente aquí -->
</div>
</div>
<!-- Uñas -->
<div class="category-section" data-category="Uñas">
<div class="category-header">
<span class="category-icon">💅</span>
<h4>Nail Art</h4>
<button class="category-toggle">▶</button>
</div>
<div class="products-grid" id="unas-products">
<!-- Los productos se cargarán dinámicamente aquí -->
</div>
</div>
<!-- Anticipos -->
<div class="category-section" data-category="Anticipos">
<div class="category-header">
<span class="category-icon">💰</span>
<h4>Anticipos</h4>
<button class="category-toggle">▶</button>
</div>
<div class="anticipos-grid" id="anticipos-products">
<div class="anticipo-form">
<div class="anticipo-input-group">
<input type="number" id="anticipo-amount" min="1" placeholder="Cantidad" />
<input type="text" id="anticipo-comment" placeholder="Comentario (opcional)" />
<button class="btn-add-anticipo" onclick="addAnticipo()">Agregar</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Panel de Carrito y Checkout (Derecha) -->
<div class="checkout-panel">
<!-- Carrito de Productos -->
<div class="cart-section">
<h3>🛒 Carrito de Compras</h3>
<div id="selected-products-container" class="cart-items">
<div class="empty-cart">
<span class="empty-icon">🛒</span>
<p>Selecciona servicios para comenzar</p>
</div>
</div>
</div>
<!-- Descuentos y Anticipos -->
<div class="discount-section modern-card">
<div class="discount-header">
<input type="checkbox" id="discount-toggle" class="modern-checkbox">
<label for="discount-toggle" class="discount-label">
<span class="discount-icon">🏷️</span>
<span>Descuentos y Anticipos</span>
</label>
</div>
<div class="discount-container" id="discount-container" style="display: none;">
<div class="discount-options">
<select id="discount-type" class="modern-select">
<option value="">Sin descuento</option>
<option value="percentage">💯 Porcentaje (%)</option>
<option value="amount">💰 Cantidad fija ($)</option>
<option value="anticipo">💳 Aplicar Anticipo</option>
<option value="warrior">🎗️ Vanity (100%)</option>
</select>
<div class="discount-input-group">
<input type="number" id="discount-value" min="0" step="0.01" placeholder="0" disabled />
<span class="input-symbol" id="discount-symbol">%</span>
</div>
</div>
<input type="text" id="discount-reason" placeholder="Motivo del descuento (opcional)" disabled class="modern-input" />
<!-- Checkbox de confirmación para anticipo manual -->
<div id="anticipo-manual-confirmation" style="display: none; margin-top: 10px;">
<label class="checkbox-container">
<input type="checkbox" id="confirm-anticipo-manual">
<span class="checkmark"></span>
<span class="checkbox-text">✅ Confirmo que el anticipo existe y fue dado por la cliente</span>
</label>
</div>
</div>
</div>
<!-- Anticipos Disponibles -->
<div id="anticipos-section" class="anticipos-section modern-card" style="display: none;">
<h4>💰 Anticipos Disponibles</h4>
<div id="anticipos-disponibles" class="anticipos-list">
<!-- Se llenan dinámicamente -->
</div>
</div>
<!-- Datos de Cita -->
<div class="appointment-section modern-card">
<h4>📅 Datos de la Cita</h4>
<div class="appointment-inputs">
<input type="date" id="m-fecha-cita" class="modern-input" placeholder="Fecha" />
<select id="m-hora-cita" class="modern-select">
<option value="">Seleccionar hora</option>
<option value="10:00">10:00 AM</option>
<option value="10:30">10:30 AM</option>
<option value="11:00">11:00 AM</option>
<option value="11:30">11:30 AM</option>
<option value="12:00">12:00 PM</option>
<option value="12:30">12:30 PM</option>
<option value="13:00">1:00 PM</option>
<option value="13:30">1:30 PM</option>
<option value="14:00">2:00 PM</option>
<option value="14:30">2:30 PM</option>
<option value="15:00">3:00 PM</option>
<option value="15:30">3:30 PM</option>
<option value="16:00">4:00 PM</option>
<option value="16:30">4:30 PM</option>
<option value="17:00">5:00 PM</option>
<option value="17:30">5:30 PM</option>
<option value="18:00">6:00 PM</option>
</select>
</div>
</div>
<!-- Resumen y Totales -->
<div class="totals-section modern-card">
<div class="totals-breakdown">
<div class="total-row">
<span>Subtotal:</span>
<span id="subtotal-display">$0.00</span>
</div>
<div class="total-row discount-row" id="discount-display-row" style="display: none;">
<span>Descuento:</span>
<span id="discount-display" class="discount-amount">-$0.00</span>
</div>
<div class="total-row final-total">
<span><strong>TOTAL:</strong></span>
<span id="total-display" class="final-amount"><strong>$0.00</strong></span>
</div>
</div>
</div>
<!-- Método de Pago -->
<div class="payment-section modern-card">
<h4>💳 Método de Pago</h4>
<div class="payment-grid">
<label class="payment-option">
<input type="radio" name="m-metodo" value="Efectivo" checked />
<div class="payment-card">
<span class="payment-icon">💵</span>
<span>Efectivo</span>
</div>
</label>
<label class="payment-option">
<input type="radio" name="m-metodo" value="Tarjeta" />
<div class="payment-card">
<span class="payment-icon">💳</span>
<span>Tarjeta</span>
</div>
</label>
<label class="payment-option">
<input type="radio" name="m-metodo" value="Transferencia" />
<div class="payment-card">
<span class="payment-icon">🏦</span>
<span>Transferencia</span>
</div>
</label>
<label class="payment-option">
<input type="radio" name="m-metodo" value="Otros" />
<div class="payment-card">
<span class="payment-icon">💼</span>
<span>Otros</span>
</div>
</label>
<label class="payment-option">
<input type="radio" name="m-metodo" value="Interno" />
<div class="payment-card">
<span class="payment-icon">🏢</span>
<span>Interno</span>
</div>
</label>
<label class="payment-option">
<input type="radio" name="m-metodo" value="GiftCard" />
<div class="payment-card">
<span class="payment-icon">🎁</span>
<span>GiftCard</span>
</div>
</label>
</div>
</div>
<!-- Notas -->
<div class="notes-section modern-card">
<h4>📝 Notas Adicionales</h4>
<textarea id="m-notas" placeholder="Comentarios especiales sobre la venta..." class="modern-textarea"></textarea>
</div>
<!-- Botones de Acción -->
<form id="formMove" class="checkout-form">
<input type="hidden" id="m-monto" />
<input type="hidden" id="m-concepto" />
<input type="hidden" id="m-staff" />
<input type="hidden" id="m-metodo" value="Efectivo" />
<div class="action-buttons">
<button type="submit" class="btn-checkout">
<span class="btn-icon">🎫</span>
<span>Generar Venta</span>
</button>
<button type="reset" class="btn-clear">
<span class="btn-icon">🗑️</span>
<span>Limpiar</span>
</button>
</div>
</form>
</div> <!-- fin checkout-panel -->
</div> <!-- fin sales-layout -->
</div> <!-- fin sales-container -->
</div> <!-- fin sub-tab-ventas -->
<!-- Sub-Pestaña de Tickets -->
<div id="sub-tab-tickets" class="sub-tab-content">
<div class="section">
<h2>🎫 Historial de Tickets y Movimientos</h2>
<button id="btnExport" class="btn-secondary">Exportar a CSV</button>
<div class="table-wrapper">
<table id="tblMoves">
<thead>
<tr>
<th>Folio</th>
<th>Fecha</th>
<th>Cita</th>
<th>Cliente</th>
<th>Servicio</th>
<th>Monto</th>
<th>Acciones</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
</div> <!-- fin sub-tab-tickets -->
</div>
<!-- Pestaña de Clientes -->
<div id="tab-clients" class="tab-content">
<div class="sub-tabs">
<button type="button" class="sub-tab-link active" data-subtab="sub-tab-register">Registro de Cliente</button>
<button type="button" class="sub-tab-link" data-subtab="sub-tab-consult">Consulta de Clientes</button>
</div>
<!-- Sub-Pestaña de Registro -->
<div id="sub-tab-register" class="sub-tab-content active">
<div class="section">
<h2>Registrar Nuevo Cliente</h2>
<form id="formClient">
<input type="hidden" id="c-id" />
<div class="form-grid-single">
<label for="c-nombre">Nombre:</label>
<input type="text" id="c-nombre" required />
<label for="c-telefono">Teléfono:</label>
<input type="tel" id="c-telefono" />
<label for="c-genero">Género:</label>
<select id="c-genero">
<option value="">-- Seleccionar --</option>
<option value="Mujer">Mujer</option>
<option value="Hombre">Hombre</option>
</select>
<label for="c-cumple">Cumpleaños:</label>
<input type="date" id="c-cumple" />
<div class="checkbox-container">
<input type="checkbox" id="c-consent" />
<label for="c-consent">¿Consentimiento médico informado completo?</label>
</div>
<div class="checkbox-container">
<input type="checkbox" id="c-pacienteOncologico" />
<label for="c-pacienteOncologico">🎗️ Paciente Oncológico</label>
</div>
</div>
<!-- Campos condicionales para paciente oncológico -->
<div id="oncologico-fields" class="sub-section hidden">
<h3>📋 Información Médica Oncológica</h3>
<div class="form-grid-single">
<div class="checkbox-container">
<input type="checkbox" id="c-oncologoAprueba" />
<label for="c-oncologoAprueba">¿Oncólogo aprueba procedimiento?</label>
</div>
<label for="c-nombreMedico">Nombre del Médico:</label>
<input type="text" id="c-nombreMedico" />
<label for="c-telefonoMedico">Teléfono del Médico:</label>
<input type="tel" id="c-telefonoMedico" />
<label for="c-cedulaMedico">Cédula Profesional:</label>
<input type="text" id="c-cedulaMedico" />
<div class="checkbox-container">
<input type="checkbox" id="c-pruebaAprobacion" />
<label for="c-pruebaAprobacion">🎗️ Presenta autorización médica explícita firmada</label>
</div>
<p class="data-location-info">
El consentimiento del médico debe ser presentado físicamente antes de la evaluación.
</p>
</div>
</div>
<div id="client-courses-section" class="sub-section">
<h3>Cursos Registrados</h3>
<div id="client-courses-list"></div>
<button type="button" id="btnAddCourseToClient" class="btn-secondary">Registrar Curso</button>
</div>
<div class="form-actions-single">
<button type="submit">Guardar Cliente</button>
<button type="reset" id="btnCancelEditClient" class="btn-danger">Limpiar</button>
</div>
</form>
</div>
</div>
<!-- Sub-Pestaña de Consulta -->
<div id="sub-tab-consult" class="sub-tab-content">
<div class="section">
<div class="consult-grid">
<div class="client-list-container">
<h2>Lista de Clientes</h2>
<input type="text" id="search-client" placeholder="Buscar por nombre o teléfono..." />
<div class="table-wrapper">
<table id="tblClients">
<thead>
<tr>
<th>Nombre</th>
<th>Teléfono</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
<div id="client-record-container" class="client-record-container">
<h2>Expediente del Cliente</h2>
<div id="client-record-content" class="hidden">
<div id="client-details"></div>
<h3>Historial de Servicios</h3>
<div id="client-history-table-container" class="table-wrapper">
<table id="client-history-table">
<thead>
<tr>
<th>Folio</th>
<th>Fecha</th>
<th>Servicio</th>
<th>Monto</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
<h3>Historial de Cursos</h3>
<div id="client-courses-history-container" class="table-wrapper">
<!-- Course history will be rendered here -->
</div>
<div class="form-actions-single">
<button id="btn-edit-client" class="btn-secondary">Editar Cliente</button>
<button id="btn-delete-client" class="btn-danger">Eliminar Cliente</button>
</div>
</div>
<div id="client-record-placeholder">
<p>Selecciona un cliente de la lista para ver su expediente.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Pestaña de Productos -->
<div id="tab-products" class="tab-content">
<div class="section">
<h2>Gestión de Productos, Servicios y Anticipos</h2>
<!-- Formulario para añadir/editar -->
<div class="sub-section">
<h3>Añadir/Editar Producto</h3>
<form id="formProduct">
<input type="hidden" id="p-id" />
<div class="form-grid">
<label>Descripción:</label>
<input type="text" id="p-name" required placeholder="Nombre del producto/servicio" />
<label>Tipo/Categoría:</label>
<select id="p-type" required>
<option value="service">Servicio</option>
<option value="course">Curso</option>
</select>
<label>Precio (MXN):</label>
<input type="number" id="p-price" step="0.01" min="0" placeholder="0.00" />
</div>
<div class="form-actions">
<button type="submit">Guardar</button>
<button type="reset" id="btnCancelEditProduct" class="btn-danger">Cancelar</button>
<button type="button" id="btnImportProducts" class="btn-secondary" onclick="importProductsFromJSON()">
📥 Importar Productos JSON
</button>
</div>
</form>
</div>
<hr class="section-divider">
<!-- Tabla unificada -->
<div class="sub-section">
<h3>Todos los Productos
<button id="filter-toggle-btn" class="filter-toggle-btn" title="Filtros">
<span class="material-icons-outlined">tune</span>
</button>
</h3>
<p class="table-note">
<strong>Nota:</strong> Esta tabla muestra solo productos reales (servicios y cursos).
Los anticipos se manejan únicamente en notas de ventas y en la app de citas.
</p>
<div class="table-wrapper">
<table id="tblAllProducts">
<thead>
<tr>
<th class="sortable" data-field="folio">
Folio <span class="sort-icon">↕</span>
</th>
<th class="sortable" data-field="fecha">
Fecha <span class="sort-icon">↕</span>
</th>
<th class="sortable" data-field="cita">
Cita <span class="sort-icon">↕</span>
</th>
<th class="sortable" data-field="descripcion">
Descripción <span class="sort-icon">↕</span>
</th>
<th class="sortable" data-field="categoria">
Categoría <span class="sort-icon">↕</span>
</th>
<th>Precio</th>
<th>Acciones</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
<!-- Filter Modal -->
<div id="filter-modal" class="filter-modal" style="display: none;">
<div class="filter-modal-content">
<div class="filter-modal-header">
<h4>Filtrar por...</h4>
<button id="filter-modal-close" class="filter-modal-close">
<span class="material-icons-outlined">close</span>
</button>
</div>
<div class="filter-modal-body">
<div class="filter-group">
<label>Descripción</label>
<input type="text" id="filter-description" placeholder="Buscar por descripción...">
</div>
<div class="filter-group">
<label>Tipo</label>
<select id="filter-category">
<option value="">Todos</option>
<option value="service">Servicios</option>
<option value="course">Cursos</option>
</select>
</div>
<div class="filter-group">
<label>Fecha desde</label>
<input type="date" id="filter-date-from">
</div>
<div class="filter-group">
<label>Fecha hasta</label>
<input type="date" id="filter-date-to">
</div>
<div class="filter-group">
<label>Precio mínimo</label>
<input type="number" id="filter-price-min" placeholder="0.00" step="0.01">
</div>
<div class="filter-group">
<label>Precio máximo</label>
<input type="number" id="filter-price-max" placeholder="0.00" step="0.01">
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Pestaña de Solicitudes de Cancelación (Solo Admins) -->
<div id="tab-cancellation-requests" class="tab-content">
<div class="section">
<h2>Solicitudes de Cancelación</h2>
<p class="section-description">Aquí puedes revisar y gestionar las solicitudes de cancelación de ventas enviadas por los usuarios.</p>
<div class="table-wrapper">
<table id="tblCancellationRequests">
<thead>
<tr>
<th>Folio</th>
<th>Cliente</th>
<th>Monto</th>
<th>Solicitado por</th>
<th>Fecha Solicitud</th>
<th>Motivo</th>
<th>Estado</th>
<th>Acciones</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
<div id="no-cancellation-requests" style="display: none;">
<p style="text-align: center; color: #6c757d; font-style: italic; margin-top: 2rem;">
No hay solicitudes de cancelación pendientes.
</p>
</div>
</div>
</div>
<!-- Pestaña de Configuración -->
<div id="tab-settings" class="tab-content">
<div class="section">
<h2>Configuración del Negocio</h2>
<form id="formSettings">
<div class="form-grid">
<label>Nombre del negocio:</label><input type="text" id="s-negocio" required />
<label>Eslogan (opcional):</label><input type="text" id="s-tagline" />
<label>Calle y Número:</label><input type="text" id="s-calle" placeholder="Ej: Av. Siempre Viva 123" />
<label>Colonia y C.P.:</label><input type="text" id="s-colonia-cp" placeholder="Ej: Centro, 25000" />
<label>Teléfono:</label><input type="text" id="s-tel" />
<label>RFC:</label><input type="text" id="s-rfc" />
<label>Leyenda pie de ticket:</label><input type="text" id="s-leyenda" />
<label>Prefijo de folio:</label><input type="text"id="s-folioPrefix" />
</div>
<div class="form-actions">
<button type="submit">Guardar Configuración</button>
<button type="button" id="btnTestTicket" class="btn-secondary">Probar Ticket</button>
</div>
</form>
</div>
<div class="section" id="credentials-section">
<h2>Mis Credenciales</h2>
<form id="formCredentials">
<div class="form-grid">
<label>Mi Nombre:</label>
<input type="text" id="s-name" required />
<label>Mi Usuario:</label>
<input type="text" id="s-username" required />
<label>Nueva Contraseña:</label>
<input type="password" id="s-password" placeholder="Dejar en blanco para no cambiar" />
</div>
<div class="form-actions">
<button type="submit">Guardar Credenciales</button>
</div>
</form>
</div>
<!-- Sección de Gestión de Usuarios (Solo para Admins) -->
<div class="section" id="user-management-section" style="display: none;">
<h2>Gestión de Usuarios</h2>
<div class="sub-section">
<h3>Añadir/Editar Usuario</h3>
<form id="formAddUser">
<input type="hidden" id="u-id" />
<div class="form-grid">
<label>Nombre:</label>
<input type="text" id="u-name" required />
<label>Usuario:</label>
<input type="text" id="u-username" required />
<label>Contraseña:</label>
<input type="password" id="u-password" placeholder="Dejar en blanco para no cambiar" />
<label>Rol:</label>
<select id="u-role">
<option value="user">Usuario (Ventas)</option>
<option value="admin">Administrador</option>
</select>
</div>
<div class="form-actions">
<button type="submit">Guardar Usuario</button>
<button type="reset" id="btnCancelEditUser" class="btn-danger">Cancelar Edición</button>
</div>
</form>
</div>
<div class="sub-section">
<h3>Usuarios Existentes</h3>
<div class="table-wrapper">
<table id="tblUsers">
<thead>
<tr>
<th>Nombre</th>
<th>Usuario</th>
<th>Rol</th>
<th>Acciones</th>
</tr>
</thead>
<tbody>
<!-- Los usuarios se insertarán aquí -->
</tbody>
</table>
</div>
</div>
</div>
<div class="section" id="db-location-section">
<h2>Ubicación y Exportación de Datos
<span class="material-icons-outlined info-icon" id="db-info-icon" style="display: none;">help_outline</span>
</h2>
<div id="db-instructions" class="data-location-info hidden">
<p>Toda la información de tu negocio (clientes, recibos, configuración) se guarda localmente. Para respaldar tus datos, simplemente copia el archivo correspondiente.</p>
<p>Para usuarios avanzados, la base de datos (<code>ap-pos.db</code>) se encuentra dentro del contenedor de la aplicación. Puedes acceder a ella usando los comandos estándar de Docker para copiar el archivo.</p>
</div>
</div>
</div>
</div>
</main>
<footer class="main-footer">
</footer>
<div id="printArea" class="no-print"></div>
<script src="https://cdn.jsdelivr.net/npm/qrcode@1/build/qrcode.min.js"></script>
<script type="module" src="app.js?v=1757039803"></script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink