feat(reports/dashboard): integrate historical sales viewer
- Add 'Histórico' tab inside Reports page with date/customer filters - Show historical sales KPIs and detail table in reports - Add historical sales summary cards to Dashboard - Load current month totals and total imported records
This commit is contained in:
@@ -329,6 +329,68 @@
|
||||
</div><!-- end kpi-grid -->
|
||||
</section>
|
||||
|
||||
<!-- =================================================================
|
||||
HISTÓRICO IMPORTADO
|
||||
================================================================= -->
|
||||
<section>
|
||||
<div class="section-header">
|
||||
<span class="section-title">Histórico importado</span>
|
||||
<a href="/pos/reports" class="section-action" style="text-decoration:none;color:inherit;">Ver en reportes →</a>
|
||||
</div>
|
||||
<div class="kpi-grid">
|
||||
<div class="kpi-card" id="kpi-historico-total">
|
||||
<div class="kpi-card__accent-bar"></div>
|
||||
<div class="kpi-card__label">
|
||||
Total Histórico
|
||||
<span class="kpi-card__icon">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none">
|
||||
<rect x="1" y="2" width="12" height="11" rx="1" stroke="currentColor" stroke-width="1.4"/>
|
||||
<path d="M4 1v2M10 1v2M1 6h12" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
<div class="kpi-card__value" id="kpi-historico-total-value"><div class="skeleton skeleton--text" style="width:60%;"></div></div>
|
||||
<div class="kpi-card__meta" id="kpi-historico-total-meta">
|
||||
<div class="skeleton skeleton--text-sm" style="width:80%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="kpi-card" id="kpi-historico-mes">
|
||||
<div class="kpi-card__accent-bar"></div>
|
||||
<div class="kpi-card__label">
|
||||
Este Mes (Histórico)
|
||||
<span class="kpi-card__icon">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none">
|
||||
<path d="M2 3h10v9H2z" stroke="currentColor" stroke-width="1.4"/>
|
||||
<path d="M2 6h10M5 1v2M9 1v2" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
<div class="kpi-card__value" id="kpi-historico-mes-value"><div class="skeleton skeleton--text" style="width:60%;"></div></div>
|
||||
<div class="kpi-card__meta" id="kpi-historico-mes-meta">
|
||||
<div class="skeleton skeleton--text-sm" style="width:80%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="kpi-card" id="kpi-historico-count">
|
||||
<div class="kpi-card__accent-bar"></div>
|
||||
<div class="kpi-card__label">
|
||||
Tickets Históricos
|
||||
<span class="kpi-card__icon">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none">
|
||||
<path d="M2 2h10a1 1 0 011 1v8a1 1 0 01-1 1H2a1 1 0 01-1-1V3a1 1 0 011-1z" stroke="currentColor" stroke-width="1.4"/>
|
||||
<path d="M3.5 5.5h7M3.5 7.5h5" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
<div class="kpi-card__value" id="kpi-historico-count-value"><div class="skeleton skeleton--text" style="width:40%;"></div></div>
|
||||
<div class="kpi-card__meta" id="kpi-historico-count-meta">
|
||||
<div class="skeleton skeleton--text-sm" style="width:70%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- =================================================================
|
||||
SALES CHART (CSS-only bar chart)
|
||||
================================================================= -->
|
||||
|
||||
@@ -216,6 +216,14 @@
|
||||
</svg>
|
||||
Financieros
|
||||
</button>
|
||||
<button class="tab-btn" onclick="switchTab('historico', this)">
|
||||
<svg viewBox="0 0 15 15" fill="none" stroke="currentColor" stroke-width="1.4">
|
||||
<rect x="1" y="4" width="13" height="10" rx="1"/>
|
||||
<path d="M1 7h13"/>
|
||||
<path d="M4 2v2M10 2v2"/>
|
||||
</svg>
|
||||
Histórico
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- ==================================================================
|
||||
@@ -318,6 +326,30 @@
|
||||
<!-- Cortes de caja -->
|
||||
<div class="table-card mb-5" id="financieros-cortes"></div>
|
||||
|
||||
</div>
|
||||
<!-- ==================================================================
|
||||
TAB 5: HISTÓRICO
|
||||
================================================================== -->
|
||||
<div class="tab-panel" id="panel-historico">
|
||||
|
||||
<!-- Filter Bar -->
|
||||
<div class="filter-bar">
|
||||
<span class="filter-bar__label">Desde</span>
|
||||
<input type="date" class="filter-input" id="historico-date-from" />
|
||||
<span class="filter-bar__label">Hasta</span>
|
||||
<input type="date" class="filter-input" id="historico-date-to" />
|
||||
<span class="filter-bar__label">Cliente</span>
|
||||
<input type="text" class="filter-input" id="historico-customer" placeholder="Nombre..." />
|
||||
<div class="filter-bar__spacer"></div>
|
||||
<button class="btn btn-primary btn-sm" onclick="Reports.loadHistorico()">Generar</button>
|
||||
</div>
|
||||
|
||||
<!-- KPI Cards (dynamic) -->
|
||||
<div class="kpi-grid" id="historico-kpis"></div>
|
||||
|
||||
<!-- Sales detail table -->
|
||||
<div class="table-card mb-5" id="historico-detalle"></div>
|
||||
|
||||
</div>
|
||||
<!-- End panels -->
|
||||
|
||||
|
||||
Reference in New Issue
Block a user