consultoria-as/Autoparts-DB
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): dashboard skeletons, empty states, Cmd+K registration, improved loading states

Browse Source
This commit is contained in:
consultoria-as
2026-05-26 08:42:17 +00:00
parent 23dbf54f3f
commit 7020890b0e
2 changed files with 54 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
pos/templates/dashboard.html
View File

@@ -255,9 +255,9 @@
</svg>
</span>
</div>
<div class="kpi-card__value" id="kpi-ventas-total">--</div>
<div class="kpi-card__value" id="kpi-ventas-total"><div class="skeleton skeleton--text" style="width:60%;"></div></div>
<div class="kpi-card__meta" id="kpi-ventas-meta">
<span class="kpi-tag kpi-tag--neutral">Cargando...</span>
<div class="skeleton skeleton--text-sm" style="width:80%;"></div>
</div>
</div>
@@ -273,9 +273,9 @@
</svg>
</span>
</div>
<div class="kpi-card__value" id="kpi-tickets-count">--</div>
<div class="kpi-card__value" id="kpi-tickets-count"><div class="skeleton skeleton--text" style="width:40%;"></div></div>
<div class="kpi-card__meta" id="kpi-tickets-meta">
<span class="kpi-tag kpi-tag--neutral">Cargando...</span>
<div class="skeleton skeleton--text-sm" style="width:70%;"></div>
</div>
</div>
@@ -291,9 +291,9 @@
</svg>
</span>
</div>
<div class="kpi-card__value" id="kpi-promedio-value">--</div>
<div class="kpi-card__value" id="kpi-promedio-value"><div class="skeleton skeleton--text" style="width:60%;"></div></div>
<div class="kpi-card__meta" id="kpi-promedio-meta">
<span class="kpi-tag kpi-tag--neutral">Cargando...</span>
<div class="skeleton skeleton--text-sm" style="width:75%;"></div>
</div>
</div>
@@ -308,9 +308,9 @@
</svg>
</span>
</div>
<div class="kpi-card__value" id="kpi-cajas-count">--</div>
<div class="kpi-card__value" id="kpi-cajas-count"><div class="skeleton skeleton--text" style="width:30%;"></div></div>
<div class="kpi-card__meta" id="kpi-cajas-meta">
<span class="kpi-tag kpi-tag--neutral">Cargando...</span>
<div class="skeleton skeleton--text-sm" style="width:80%;"></div>
</div>
</div>
@@ -399,7 +399,9 @@
<a href="/pos/inventory" style="font-size:var(--text-caption);color:var(--color-primary);font-weight:var(--font-weight-semibold);cursor:pointer;text-decoration:none;">Ver todos</a>
</div>
<div class="rank-list" id="top-products-list">
<div class="rank-item" style="justify-content:center;color:var(--color-text-muted);font-size:var(--text-caption);">Cargando...</div>
<div class="rank-item"><div class="skeleton skeleton--text" style="width:90%;"></div></div>
<div class="rank-item"><div class="skeleton skeleton--text" style="width:70%;"></div></div>
<div class="rank-item"><div class="skeleton skeleton--text" style="width:80%;"></div></div>
</div>
</div><!-- end Top Productos -->
@@ -412,7 +414,8 @@
<a href="/pos/config" style="font-size:var(--text-caption);color:var(--color-primary);font-weight:var(--font-weight-semibold);cursor:pointer;text-decoration:none;">Gestionar</a>
</div>
<div class="rank-list" id="registers-list">
<div class="rank-item" style="justify-content:center;color:var(--color-text-muted);font-size:var(--text-caption);">Cargando...</div>
<div class="rank-item"><div class="skeleton skeleton--text" style="width:85%;"></div></div>
<div class="rank-item"><div class="skeleton skeleton--text" style="width:65%;"></div></div>
</div>
</div><!-- end Cajas del Día -->
@@ -429,7 +432,8 @@
<span class="section-action">Gestionar todo &rarr;</span>
</div>
<div class="alerts-grid" id="alerts-grid">
<div class="alert-item" style="justify-content:center;color:var(--color-text-muted);font-size:var(--text-caption);border-left:none;">Cargando alertas...</div>
<div class="alert-item" style="border-left:none;"><div class="skeleton skeleton--text" style="width:100%;"></div></div>
<div class="alert-item" style="border-left:none;"><div class="skeleton skeleton--text" style="width:80%;"></div></div>
</div><!-- end alerts-grid -->
</section>
@@ -467,7 +471,9 @@
</tr>
</thead>
<tbody id="recent-sales-tbody">
<tr><td colspan="5" style="text-align:center;color:var(--color-text-muted);font-size:var(--text-caption);">Cargando ventas recientes...</td></tr>
<tr><td colspan="5"><div class="skeleton skeleton--text" style="width:100%;"></div></td></tr>
<tr><td colspan="5"><div class="skeleton skeleton--text" style="width:80%;"></div></td></tr>
<tr><td colspan="5"><div class="skeleton skeleton--text" style="width:90%;"></div></td></tr>
</tbody>
</table>
</div>
@@ -487,7 +493,7 @@
<script src="/pos/static/js/pos-utils.js?v=2" defer></script>
<script src="/pos/static/js/sidebar.js" defer></script>
<script src="/pos/static/js/dashboard-stats.js" defer></script>
<script src="/pos/static/js/dashboard.js" defer></script>
<script src="/pos/static/js/dashboard.js?v=2" defer></script>
<script src="/pos/static/js/sync-engine.js" defer></script>
<script>if('serviceWorker' in navigator){navigator.serviceWorker.register('/pos/sw.js',{scope:'/pos/'});}</script>
<script src="/pos/static/js/pwa-install.js" defer></script>