70 lines
2.5 KiB
HTML
70 lines
2.5 KiB
HTML
<!-- /src/app/features/admin/components/analytics/analytics.component.html -->
|
|
|
|
<div>
|
|
<h1>Analytics Dashboard</h1>
|
|
|
|
<div class="period-selector">
|
|
<button (click)="loadAnalytics('Last7Days')" [class.active]="selectedPeriod === 'Last7Days'">Letzte 7 Tage</button>
|
|
<button (click)="loadAnalytics('Last30Days')" [class.active]="selectedPeriod === 'Last30Days'">Letzte 30 Tage</button>
|
|
<button (click)="loadAnalytics('AllTime')" [class.active]="selectedPeriod === 'AllTime'">Gesamt</button>
|
|
</div>
|
|
|
|
<hr>
|
|
|
|
<div *ngIf="analytics$ | async as data; else loading">
|
|
|
|
<fieldset>
|
|
<legend>KPI Übersicht</legend>
|
|
<div class="kpi-grid">
|
|
<div><strong>Umsatz:</strong> {{ data.kpiSummary.totalRevenue | currency:'EUR' }}</div>
|
|
<div><strong>Bestellungen:</strong> {{ data.kpiSummary.totalOrders }}</div>
|
|
<div><strong>Ø Bestellwert:</strong> {{ data.kpiSummary.averageOrderValue | currency:'EUR' }}</div>
|
|
<div><strong>Gesamtkunden:</strong> {{ data.kpiSummary.totalCustomers }}</div>
|
|
<div><strong>Neukunden (im Zeitraum):</strong> {{ data.kpiSummary.newCustomersThisPeriod }}</div>
|
|
</div>
|
|
</fieldset>
|
|
|
|
<fieldset>
|
|
<legend>Top Produkte</legend>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Produkt</th>
|
|
<th>SKU</th>
|
|
<th>Verkaufte Einheiten</th>
|
|
<th>Umsatz</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr *ngFor="let product of data.topPerformingProducts">
|
|
<td>{{ product.name }}</td>
|
|
<td>{{ product.sku }}</td>
|
|
<td>{{ product.unitsSold }}</td>
|
|
<td>{{ product.totalRevenue | currency:'EUR' }}</td>
|
|
</tr>
|
|
<tr *ngIf="!data.topPerformingProducts || data.topPerformingProducts.length === 0">
|
|
<td colspan="4">Keine Produktdaten in diesem Zeitraum.</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</fieldset>
|
|
|
|
<fieldset>
|
|
<legend>Lagerstatus</legend>
|
|
<div class="kpi-grid">
|
|
<div><strong>Produkte mit niedrigem Lagerbestand:</strong> {{ data.inventoryStatus.productsWithLowStock }}</div>
|
|
<div><strong>Lagerverfügbarkeit (gesamt):</strong> {{ data.inventoryStatus.overallStockAvailabilityPercentage | number:'1.1-2' }}%</div>
|
|
</div>
|
|
</fieldset>
|
|
|
|
<fieldset>
|
|
<legend>Verkaufsverlauf (Rohdaten)</legend>
|
|
<pre>{{ data.salesOverTime | json }}</pre>
|
|
</fieldset>
|
|
|
|
</div>
|
|
|
|
<ng-template #loading>
|
|
<p>Lade Analysedaten...</p>
|
|
</ng-template>
|
|
</div> |