feat: Estandarizar fechas, mejorar UI y añadir sección de datos

Se realizan los siguientes cambios:

- Se estandariza el formato de fecha a dd/mm/aaaa en toda la aplicación (tablas, reportes, tickets) para consistencia.
- Se ajusta la versión de la aplicación a 1.3.0.
- Se reduce el tamaño del logo principal para mejorar la proporción visual.
- Se corrige el comportamiento de las pestañas de navegación para que en estado inactivo solo muestren el ícono.
- Se añade una sección discreta para la ubicación y exportación de datos, visible solo para administradores, con instrucciones para acceder a la base de datos en el contenedor Docker.
This commit is contained in:
Marco Gallegos
2025-08-25 08:36:33 -06:00
parent e549a2db9e
commit 00c5a7068c
3 changed files with 35 additions and 10 deletions

10
app.js
View File

@@ -547,9 +547,6 @@ async function deleteProduct(id) {
if (response.ok) {
products = products.filter(p => p.id !== id);
renderProductTables();
} else {
const error = await response.json();
alert(`Error: ${error.error}`);
}
} catch (error) {
alert('Error de conexión al eliminar el producto.');
@@ -999,11 +996,13 @@ function setupUIForRole(role) {
const settingsTab = document.querySelector('[data-tab="settings"]');
const userManagementSection = document.getElementById('user-management-section');
const staffInput = document.getElementById('m-staff');
const dbInfoIcon = document.getElementById('db-info-icon');
if (role === 'admin') {
if (dashboardTab) dashboardTab.style.display = 'block';
if (settingsTab) settingsTab.style.display = 'block';
if (userManagementSection) userManagementSection.style.display = 'block';
if (dbInfoIcon) dbInfoIcon.style.display = 'inline-block';
fetch('/api/users')
.then(res => {
@@ -1019,6 +1018,7 @@ function setupUIForRole(role) {
if (dashboardTab) dashboardTab.style.display = 'none';
if (settingsTab) settingsTab.style.display = 'none';
if (userManagementSection) userManagementSection.style.display = 'none';
if (dbInfoIcon) dbInfoIcon.style.display = 'none';
}
if (staffInput) {
@@ -1070,6 +1070,7 @@ async function initializeApp() {
const btnCancelEditUser = document.getElementById('btnCancelEditUser');
const tipoServicioSelect = document.getElementById('m-tipo');
const clientSubTabs = document.querySelector('#tab-clients .sub-tabs');
const dbInfoIcon = document.getElementById('db-info-icon');
formSettings?.addEventListener('submit', handleSaveSettings);
formCredentials?.addEventListener('submit', handleSaveCredentials);
@@ -1089,6 +1090,9 @@ async function initializeApp() {
if (currentUser.role === 'admin') {
formAddUser?.addEventListener('submit', handleAddOrUpdateUser);
tblUsersBody?.addEventListener('click', handleTableClick);
dbInfoIcon?.addEventListener('click', () => {
document.getElementById('db-instructions').classList.toggle('hidden');
});
}
btnLogout?.addEventListener('click', async () => {

View File

@@ -20,7 +20,7 @@
<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">
<nav class="tabs">
<button type="button" class="tab-link" data-tab="tab-dashboard">
<span class="material-icons-outlined">dashboard</span><span>Dashboard</span>
</button>
@@ -372,11 +372,20 @@
</div>
</form>
</div>
<div class="section">
<h2>Ubicación de los Datos</h2>
<p class="data-location-info">
Toda la información de tu negocio (clientes, recibos y configuración) se guarda de forma segura en el archivo <strong>ap-pos.db</strong>, ubicado en la misma carpeta que la aplicación. Para hacer un respaldo, simplemente copia este archivo.
</p>
<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>La base de datos (<code>ap-pos.db</code>) se encuentra dentro del contenedor de Docker. Para acceder o hacer un respaldo manual:</p>
<ol>
<li>Abre una terminal o línea de comandos.</li>
<li>Ejecuta <code>docker ps</code> para encontrar el nombre o ID de tu contenedor (usualmente 'ap-pos').</li>
<li>Entra al contenedor con: <code>docker exec -it ap-pos /bin/sh</code> (reemplaza 'ap-pos' si es necesario).</li>
<li>Una vez dentro, la base de datos está en <code>/app/ap-pos.db</code>.</li>
<li>Para copiarla a tu máquina local (desde fuera del contenedor), usa:<br><code>docker cp ap-pos:/app/ap-pos.db ./backup_BDD.db</code></li>
</ol>
</div>
</div>
<div class="section" id="credentials-section">
<h2>Mis Credenciales</h2>

View File

@@ -281,6 +281,7 @@ button.action-btn {
.header-logo {
max-width: 20%;
height: auto;
padding-right: 50px;
}
.tabs {
@@ -529,6 +530,17 @@ table tbody tr:hover {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}
.info-icon {
font-size: 18px;
color: #6c757d;
cursor: pointer;
vertical-align: middle;
margin-left: 8px;
}
.info-icon:hover {
color: #343a40;
}
.sub-section {
margin-top: 30px;
padding-top: 20px;