feat(admin): analytics dashboard

Sprint 27.

New features/admin/analytics/ module + net-new /:lang/backoffice/analytics
route + Dashboard Quick Action.

- revenue/orders/avg-order-value/sales-over-time/top-products computed by
  composing AdminOrdersLocalGateway (Sprint 23's seeded mock orders) - real
  aggregation over mock data, not a separate fabricated dataset
- products/categories counts from AdminProductsLocalGateway/
  AdminCategoriesLocalGateway
- visitors/funnels/heatmaps render pending-backend badges (no analytics
  pipeline exists anywhere in this system) rather than fabricated numbers,
  same convention as the Sprint 19 dashboard's pre-Sprint-23 Orders/Revenue
  cards
- plain div-bar chart (no charting library), 7/30/90-day range toggle,
  CSV export

docs/ADMIN.md + docs/BACKEND.md (new item 16) updated.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

src/app/features/admin/analytics/pages/admin-analytics-page.component.html

@@ -0,0 +1,57 @@
+<section class="admin-analytics-page">
+  <div class="toolbar">
+    <div class="ranges">
+      @for (range of ranges; track range) {
+        <app-button [variant]="facade.dateRange() === range ? 'primary' : 'secondary'" size="sm" (click)="facade.setDateRange(range)">{{ range }}d</app-button>
+      }
+    </div>
+    <app-button variant="secondary" (click)="exportCsv()">{{ 'adminOrders.export' | translate }}</app-button>
+  </div>
+
+  @if (facade.summary(); as summary) {
+    <div class="summary-grid">
+      <div class="summary-card"><span>{{ 'adminAnalytics.revenue' | translate }}</span><strong>{{ summary.revenueTotal }} {{ summary.currency }}</strong></div>
+      <div class="summary-card"><span>{{ 'adminAnalytics.orders' | translate }}</span><strong>{{ summary.ordersCount }}</strong></div>
+      <div class="summary-card"><span>{{ 'adminAnalytics.avgOrderValue' | translate }}</span><strong>{{ summary.avgOrderValue }} {{ summary.currency }}</strong></div>
+      <div class="summary-card"><span>{{ 'adminAnalytics.products' | translate }}</span><strong>{{ summary.productsCount }}</strong></div>
+      <div class="summary-card"><span>{{ 'adminAnalytics.categories' | translate }}</span><strong>{{ summary.categoriesCount }}</strong></div>
+      <div class="summary-card pending"><span>{{ 'adminAnalytics.visitors' | translate }}</span><app-badge variant="neutral">{{ 'adminAnalytics.pendingBackend' | translate }}</app-badge></div>
+    </div>
+  }
+
+  <div class="card">
+    <h2>{{ 'adminAnalytics.salesChart' | translate }}</h2>
+    <div class="chart">
+      @for (point of facade.salesSeries(); track point.date) {
+        <div class="bar" [style.height.%]="barHeight(point.value)" [title]="point.date + ': ' + point.value"></div>
+      }
+    </div>
+  </div>
+
+  <div class="card">
+    <h2>{{ 'adminAnalytics.topProducts' | translate }}</h2>
+    <app-table>
+      <thead>
+        <tr>
+          <th>{{ 'adminProducts.name' | translate }}</th>
+          <th>{{ 'adminAnalytics.quantitySold' | translate }}</th>
+          <th>{{ 'adminAnalytics.revenue' | translate }}</th>
+        </tr>
+      </thead>
+      <tbody>
+        @for (product of facade.topProducts(); track product.productId) {
+          <tr>
+            <td>{{ product.name }}</td>
+            <td>{{ product.quantity }}</td>
+            <td>{{ product.revenue }}</td>
+          </tr>
+        }
+      </tbody>
+    </app-table>
+  </div>
+
+  <div class="card pending-section">
+    <h2>{{ 'adminAnalytics.funnelsHeatmaps' | translate }}</h2>
+    <p><app-badge variant="neutral">{{ 'adminAnalytics.pendingBackend' | translate }}</app-badge> {{ 'adminAnalytics.pendingBackendHint' | translate }}</p>
+  </div>
+</section>

src/app/features/admin/analytics/pages/admin-analytics-page.component.scss

@@ -0,0 +1,13 @@
+.admin-analytics-page { display: grid; gap: 16px; padding: 16px; max-width: 1100px; margin: 0 auto; }
+.toolbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
+.ranges { display: flex; gap: 6px; }
+.summary-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
+.summary-card { border: 1px solid var(--border-color, #d3dad9); border-radius: 12px; padding: 12px; display: grid; gap: 4px; background: #fff; }
+.summary-card span { font-size: 0.75rem; color: var(--text-secondary, #6b7280); }
+.summary-card strong { font-size: 1.1rem; }
+.card { display: grid; gap: 12px; padding: 16px; border: 1px solid var(--border-color, #d3dad9); border-radius: 16px; background: #fff; }
+.card h2 { margin: 0; font-size: 1.1rem; }
+.chart { display: flex; align-items: flex-end; gap: 3px; height: 140px; }
+.chart .bar { flex: 1; background: var(--color-primary, #2f8f5b); border-radius: 3px 3px 0 0; min-height: 2px; }
+.pending-section p { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--text-secondary, #6b7280); }
+@media (max-width: 900px) { .summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

src/app/features/admin/analytics/pages/admin-analytics-page.component.ts

@@ -0,0 +1,41 @@
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { AdminAnalyticsFacade } from '../facade/admin-analytics.facade';
+import { AdminAnalyticsDateRange } from '../models/admin-analytics.model';
+import { TranslatePipe } from '../../../../i18n/translate.pipe';
+import { ButtonComponent } from '../../../../shared/ui/button/button.component';
+import { BadgeComponent } from '../../../../shared/ui/badge/badge.component';
+import { TableComponent } from '../../../../shared/ui/table/table.component';
+
+@Component({
+  selector: 'app-admin-analytics-page',
+  standalone: true,
+  imports: [CommonModule, TranslatePipe, ButtonComponent, BadgeComponent, TableComponent],
+  templateUrl: './admin-analytics-page.component.html',
+  styleUrls: ['./admin-analytics-page.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class AdminAnalyticsPageComponent {
+  readonly facade = inject(AdminAnalyticsFacade);
+
+  readonly ranges: AdminAnalyticsDateRange[] = [7, 30, 90];
+
+  constructor() {
+    this.facade.load();
+  }
+
+  barHeight(value: number): number {
+    return Math.max(2, Math.round((value / this.facade.maxSeriesValue()) * 100));
+  }
+
+  exportCsv(): void {
+    const csv = this.facade.exportCsv();
+    const blob = new Blob([csv], { type: 'text/csv' });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement('a');
+    link.href = url;
+    link.download = 'sales.csv';
+    link.click();
+    URL.revokeObjectURL(url);
+  }
+}