feat(admin): implement order and customer operations experience

Orders dashboard (real orders-today/pending/paid/cancelled/refunded/customers/returning-customers/average-order/recent-activity/system-alerts, computed from the full order book not just the current page); orders list gains density, saved column visibility, bulk status change/archive/delete/export/print alongside existing search+status filter+pagination, sticky table header; order detail gets a visual status workflow stepper in business language (Pending/Packing/Shipping/Completed, with Cancelled/Refunded as terminal states) and a reusable OrderTimelineComponent replacing the flat text log; added a derived Customers feature (list + profile detail: statistics/lifetime value/addresses/orders/activity/notes) built entirely by grouping existing AdminOrder records by email - no new backend, no invented gateway, since no customer entity existed. Added archive/restore/delete to the orders gateway (soft-delete pattern mirroring categories) and filled in the adminOrders/adminCustomers i18n namespaces, which previously didn't exist at all (every adminOrders.* label was rendering as a raw key).

src/app/features/admin/customers/facade/admin-customers.facade.ts

@@ -0,0 +1,79 @@
+import { Injectable, inject, signal } from '@angular/core';
+import { take } from 'rxjs/operators';
+import { AdminOrdersLocalGateway } from '../../orders/services/admin-orders-local.gateway';
+import { AdminOrder } from '../../orders/models/admin-order.model';
+import { AdminCustomer } from '../models/admin-customer.model';
+
+@Injectable({ providedIn: 'root' })
+export class AdminCustomersFacade {
+  private readonly ordersGateway = inject(AdminOrdersLocalGateway);
+
+  readonly customers = signal<AdminCustomer[]>([]);
+  readonly loading = signal(false);
+  readonly search = signal('');
+  readonly selected = signal<AdminCustomer | null>(null);
+
+  private buildCustomers(orders: AdminOrder[]): AdminCustomer[] {
+    const byEmail = new Map<string, AdminOrder[]>();
+    for (const order of orders) {
+      const list = byEmail.get(order.customer.email) ?? [];
+      list.push(order);
+      byEmail.set(order.customer.email, list);
+    }
+
+    return [...byEmail.entries()].map(([email, customerOrders]) => {
+      const sorted = [...customerOrders].sort((a, b) => a.createdAt.localeCompare(b.createdAt));
+      const latest = customerOrders[0];
+      return {
+        email,
+        name: latest.customer.name,
+        phone: latest.customer.phone,
+        orderCount: customerOrders.length,
+        totalSpent: customerOrders.reduce((sum, order) => sum + order.total, 0),
+        currency: latest.currency,
+        firstOrderAt: sorted[0].createdAt,
+        lastOrderAt: sorted[sorted.length - 1].createdAt,
+        addresses: [...new Set(customerOrders.map(order => order.shipping.address))],
+        orders: [...customerOrders].sort((a, b) => b.createdAt.localeCompare(a.createdAt)),
+      };
+    });
+  }
+
+  loadList(): void {
+    this.loading.set(true);
+    this.ordersGateway.loadOrders({ search: '', status: 'all', page: 1, pageSize: 100000 }).pipe(take(1)).subscribe({
+      next: result => {
+        this.customers.set(this.buildCustomers(result.items));
+        this.loading.set(false);
+      },
+      error: () => {
+        this.customers.set([]);
+        this.loading.set(false);
+      }
+    });
+  }
+
+  loadDetail(email: string): void {
+    this.ordersGateway.loadOrders({ search: '', status: 'all', page: 1, pageSize: 100000 }).pipe(take(1)).subscribe({
+      next: result => {
+        const decoded = decodeURIComponent(email);
+        const customers = this.buildCustomers(result.items);
+        this.selected.set(customers.find(customer => customer.email === decoded) ?? null);
+      }
+    });
+  }
+
+  setSearch(value: string): void {
+    this.search.set(value);
+  }
+
+  filteredCustomers(): AdminCustomer[] {
+    const query = this.search().trim().toLowerCase();
+    if (!query) {
+      return this.customers();
+    }
+    return this.customers().filter(customer =>
+      `${customer.name} ${customer.email} ${customer.phone}`.toLowerCase().includes(query)
+    );
+  }
+}

src/app/features/admin/customers/models/admin-customer.model.ts

@@ -0,0 +1,19 @@
+import { AdminOrder } from '../../orders/models/admin-order.model';
+
+/**
+ * A customer is not its own stored entity - it's derived by grouping existing
+ * AdminOrder records by customer.email, since no customer gateway/backend exists.
+ * Every field here is a real aggregate over that customer's orders, never fabricated.
+ */
+export interface AdminCustomer {
+  email: string;
+  name: string;
+  phone: string;
+  orderCount: number;
+  totalSpent: number;
+  currency: string;
+  firstOrderAt: string;
+  lastOrderAt: string;
+  addresses: string[];
+  orders: AdminOrder[];
+}

src/app/features/admin/customers/pages/admin-customer-detail-page.component.html

@@ -0,0 +1,53 @@
+@if (facade.selected(); as customer) {
+<main class="customer-detail">
+  <header class="toolbar">
+    <app-button variant="secondary" size="sm" (click)="back()">{{ 'adminOrders.back' | translate }}</app-button>
+    <h1>{{ customer.name }}</h1>
+    @if (customer.orderCount > 1) {
+      <app-badge variant="success">{{ 'adminCustomers.returning' | translate }}</app-badge>
+    }
+  </header>
+
+  <section class="grid two">
+    <div class="card">
+      <h3>{{ 'adminCustomers.profile' | translate }}</h3>
+      <p>{{ customer.email }}</p>
+      <p>{{ customer.phone }}</p>
+    </div>
+    <div class="card">
+      <h3>{{ 'adminCustomers.statistics' | translate }}</h3>
+      <p>{{ 'adminCustomers.orderCount' | translate }}: {{ customer.orderCount }}</p>
+      <p>{{ 'adminCustomers.lifetimeValue' | translate }}: {{ customer.totalSpent }} {{ customer.currency }}</p>
+      <p>{{ 'adminCustomers.firstOrder' | translate }}: {{ customer.firstOrderAt | date:'short' }}</p>
+      <p>{{ 'adminCustomers.lastOrder' | translate }}: {{ customer.lastOrderAt | date:'short' }}</p>
+    </div>
+    <div class="card">
+      <h3>{{ 'adminCustomers.addresses' | translate }}</h3>
+      @for (address of customer.addresses; track address) { <p>{{ address }}</p> }
+    </div>
+    <div class="card">
+      <h3>{{ 'adminCustomers.notes' | translate }}</h3>
+      <p class="muted">{{ 'adminCustomers.notesUnavailable' | translate }}</p>
+    </div>
+  </section>
+
+  <section class="card">
+    <h3>{{ 'adminCustomers.orders' | translate }}</h3>
+    @for (order of customer.orders; track order.id) {
+      <div class="order-row">
+        <button type="button" class="link-button" (click)="viewOrder(order.id)">{{ order.orderNumber }}</button>
+        <app-badge variant="neutral">{{ ('adminOrders.status.' + order.status) | translate }}</app-badge>
+        <span>{{ order.total }} {{ order.currency }}</span>
+        <span class="muted">{{ order.createdAt | date:'short' }}</span>
+      </div>
+    }
+  </section>
+
+  <section class="card">
+    <h3>{{ 'adminCustomers.activity' | translate }}</h3>
+    <app-order-timeline [entries]="activity()" [showOrderNumber]="true" />
+  </section>
+</main>
+} @else {
+  <p>{{ 'common.loading' | translate }}</p>
+}

src/app/features/admin/customers/pages/admin-customer-detail-page.component.scss

@@ -0,0 +1,13 @@
+.customer-detail { max-width: 1000px; margin: 0 auto; padding: 24px; display: grid; gap: 16px; }
+.toolbar { display: flex; align-items: center; gap: 12px; }
+.toolbar h1 { margin: 0; font-size: 1.25rem; }
+.grid { display: grid; gap: 16px; }
+.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+.card { border: 1px solid var(--border-color, #d3dad9); border-radius: 12px; padding: 14px; display: grid; gap: 6px; }
+.card h3 { margin: 0 0 6px; }
+.card p { margin: 0; }
+.muted { color: var(--text-secondary, #5f6e6a); font-size: 0.85rem; }
+.order-row { display: flex; align-items: center; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--border-subtle, #e7ece9); }
+.link-button { all: unset; cursor: pointer; color: var(--brand-primary, #1e8a6e); font-weight: 600; }
+.link-button:hover, .link-button:focus-visible { text-decoration: underline; }
+@media (max-width: 700px) { .grid.two { grid-template-columns: 1fr; } }

src/app/features/admin/customers/pages/admin-customer-detail-page.component.ts

@@ -0,0 +1,47 @@
+import { ChangeDetectionStrategy, Component, computed, inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ActivatedRoute, Router } from '@angular/router';
+import { AdminCustomersFacade } from '../facade/admin-customers.facade';
+import { TranslatePipe } from '../../../../i18n/translate.pipe';
+import { LanguageService } from '../../../../services/language.service';
+import { ButtonComponent } from '../../../../shared/ui/button/button.component';
+import { BadgeComponent } from '../../../../shared/ui/badge/badge.component';
+import { OrderTimelineComponent, OrderTimelineEntry } from '../../orders/components/order-timeline/order-timeline.component';
+
+@Component({
+  selector: 'app-admin-customer-detail-page',
+  standalone: true,
+  imports: [CommonModule, TranslatePipe, ButtonComponent, BadgeComponent, OrderTimelineComponent],
+  templateUrl: './admin-customer-detail-page.component.html',
+  styleUrls: ['./admin-customer-detail-page.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class AdminCustomerDetailPageComponent {
+  readonly facade = inject(AdminCustomersFacade);
+  private readonly route = inject(ActivatedRoute);
+  private readonly router = inject(Router);
+  private readonly languageService = inject(LanguageService);
+
+  readonly activity = computed<OrderTimelineEntry[]>(() => {
+    const customer = this.facade.selected();
+    if (!customer) return [];
+    return customer.orders
+      .flatMap(order => order.timeline.map(entry => ({ status: entry.status, timestamp: entry.timestamp, note: entry.note, orderNumber: order.orderNumber })))
+      .sort((a, b) => b.timestamp.localeCompare(a.timestamp));
+  });
+
+  constructor() {
+    const email = this.route.snapshot.paramMap.get('email');
+    if (email) {
+      this.facade.loadDetail(email);
+    }
+  }
+
+  back(): void {
+    void this.router.navigate([this.languageService.currentLanguage(), 'backoffice', 'customers']);
+  }
+
+  viewOrder(id: string): void {
+    void this.router.navigate([this.languageService.currentLanguage(), 'backoffice', 'orders', id]);
+  }
+}

src/app/features/admin/customers/pages/admin-customers-list-page.component.html

@@ -0,0 +1,45 @@
+<section class="admin-customers-card">
+  <div class="toolbar">
+    <app-input type="search" [ngModel]="facade.search()" (ngModelChange)="facade.setSearch($event)" [placeholder]="'adminCustomers.search' | translate" />
+  </div>
+
+  @if (facade.loading()) {
+    <div class="skeleton-rows">
+      @for (i of [1,2,3,4]; track i) { <app-skeleton shape="rect" height="40px" /> }
+    </div>
+  } @else if (facade.filteredCustomers().length === 0) {
+    <app-empty-state [title]="'adminCustomers.emptyTitle' | translate" [description]="'adminCustomers.emptyDescription' | translate" />
+  } @else {
+    <app-table>
+      <thead>
+        <tr>
+          <th>{{ 'adminCustomers.name' | translate }}</th>
+          <th>{{ 'adminCustomers.email' | translate }}</th>
+          <th>{{ 'adminCustomers.phone' | translate }}</th>
+          <th>{{ 'adminCustomers.orderCount' | translate }}</th>
+          <th>{{ 'adminCustomers.lifetimeValue' | translate }}</th>
+          <th>{{ 'adminOrders.createdAt' | translate }}</th>
+          <th>{{ 'adminProducts.actions' | translate }}</th>
+        </tr>
+      </thead>
+      <tbody>
+        @for (customer of facade.filteredCustomers(); track customer.email) {
+          <tr>
+            <td>{{ customer.name }}</td>
+            <td>{{ customer.email }}</td>
+            <td>{{ customer.phone }}</td>
+            <td>
+              {{ customer.orderCount }}
+              @if (customer.orderCount > 1) {
+                <app-badge variant="success">{{ 'adminCustomers.returning' | translate }}</app-badge>
+              }
+            </td>
+            <td>{{ customer.totalSpent }} {{ customer.currency }}</td>
+            <td>{{ customer.lastOrderAt | date:'short' }}</td>
+            <td><app-button variant="secondary" size="sm" (click)="view(customer.email)">{{ 'adminOrders.view' | translate }}</app-button></td>
+          </tr>
+        }
+      </tbody>
+    </app-table>
+  }
+</section>

src/app/features/admin/customers/pages/admin-customers-list-page.component.scss

@@ -0,0 +1,3 @@
+.admin-customers-card { display: grid; gap: 16px; padding: 16px; border: 1px solid var(--border-color, #d3dad9); border-radius: 16px; background: #fff; }
+.toolbar { display: flex; }
+.skeleton-rows { display: grid; gap: 8px; }

src/app/features/admin/customers/pages/admin-customers-list-page.component.ts

@@ -0,0 +1,35 @@
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { Router } from '@angular/router';
+import { AdminCustomersFacade } from '../facade/admin-customers.facade';
+import { TranslatePipe } from '../../../../i18n/translate.pipe';
+import { LanguageService } from '../../../../services/language.service';
+import { ButtonComponent } from '../../../../shared/ui/button/button.component';
+import { InputComponent } from '../../../../shared/ui/input/input.component';
+import { BadgeComponent } from '../../../../shared/ui/badge/badge.component';
+import { TableComponent } from '../../../../shared/ui/table/table.component';
+import { EmptyStateComponent } from '../../../../shared/ui/empty-state/empty-state.component';
+import { SkeletonComponent } from '../../../../shared/ui/skeleton/skeleton.component';
+
+@Component({
+  selector: 'app-admin-customers-list-page',
+  standalone: true,
+  imports: [CommonModule, FormsModule, TranslatePipe, ButtonComponent, InputComponent, BadgeComponent, TableComponent, EmptyStateComponent, SkeletonComponent],
+  templateUrl: './admin-customers-list-page.component.html',
+  styleUrls: ['./admin-customers-list-page.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class AdminCustomersListPageComponent {
+  readonly facade = inject(AdminCustomersFacade);
+  private readonly router = inject(Router);
+  private readonly languageService = inject(LanguageService);
+
+  constructor() {
+    this.facade.loadList();
+  }
+
+  view(email: string): void {
+    void this.router.navigate([this.languageService.currentLanguage(), 'backoffice', 'customers', encodeURIComponent(email)]);
+  }
+}

src/app/features/admin/orders/components/order-timeline/order-timeline.component.html

@@ -0,0 +1,19 @@
+<ol class="order-timeline">
+  @for (entry of entries(); track entry.timestamp + (entry.note || '')) {
+    <li class="order-timeline__item">
+      <span class="order-timeline__dot" aria-hidden="true"></span>
+      <div class="order-timeline__body">
+        <div class="order-timeline__meta">
+          <time>{{ entry.timestamp | date:'short' }}</time>
+          @if (entry.status) {
+            <span class="order-timeline__status">{{ ('adminOrders.status.' + entry.status) | translate }}</span>
+          }
+          @if (showOrderNumber() && entry.orderNumber) {
+            <span class="order-timeline__order">{{ entry.orderNumber }}</span>
+          }
+        </div>
+        <p class="order-timeline__note">{{ entry.note }}</p>
+      </div>
+    </li>
+  }
+</ol>

src/app/features/admin/orders/components/order-timeline/order-timeline.component.scss

@@ -0,0 +1,57 @@
+.order-timeline {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: grid;
+  gap: 0;
+}
+
+.order-timeline__item {
+  display: flex;
+  gap: 12px;
+  position: relative;
+  padding-bottom: 16px;
+
+  &:not(:last-child)::before {
+    content: '';
+    position: absolute;
+    left: 4px;
+    top: 14px;
+    bottom: 0;
+    width: 2px;
+    background: var(--border-subtle, #e7ece9);
+  }
+}
+
+.order-timeline__dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 999px;
+  background: var(--brand-primary, #1e8a6e);
+  margin-top: 4px;
+  flex-shrink: 0;
+}
+
+.order-timeline__body {
+  display: grid;
+  gap: 2px;
+}
+
+.order-timeline__meta {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  font-size: 0.78rem;
+  color: var(--text-tertiary, #9aa6a2);
+}
+
+.order-timeline__status {
+  font-weight: 700;
+  color: var(--text-primary, #1e3c38);
+}
+
+.order-timeline__note {
+  margin: 0;
+  font-size: 0.88rem;
+  color: var(--text-secondary, #5f6e6a);
+}

src/app/features/admin/orders/components/order-timeline/order-timeline.component.ts

@@ -0,0 +1,24 @@
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+import { DatePipe } from '@angular/common';
+import { TranslatePipe } from '../../../../../i18n/translate.pipe';
+
+export interface OrderTimelineEntry {
+  status?: string;
+  timestamp: string;
+  note: string;
+  orderNumber?: string;
+}
+
+/** Reusable vertical event timeline - used on both the order detail page and the customer activity tab. */
+@Component({
+  selector: 'app-order-timeline',
+  standalone: true,
+  imports: [DatePipe, TranslatePipe],
+  templateUrl: './order-timeline.component.html',
+  styleUrl: './order-timeline.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class OrderTimelineComponent {
+  readonly entries = input.required<OrderTimelineEntry[]>();
+  readonly showOrderNumber = input(false);
+}

src/app/features/admin/orders/components/orders-dashboard/orders-dashboard.component.html

@@ -0,0 +1,33 @@
+<div class="orders-dashboard">
+  <div class="orders-dashboard__metrics">
+    <app-dashboard-metric labelKey="adminOrders.ordersToday" [value]="stats().ordersToday.toString()" />
+    <app-dashboard-metric labelKey="adminOrders.status.pending" [value]="stats().pending.toString()" />
+    <app-dashboard-metric labelKey="adminOrders.paidCount" [value]="stats().paid.toString()" />
+    <app-dashboard-metric labelKey="adminOrders.status.cancelled" [value]="stats().cancelled.toString()" />
+    <app-dashboard-metric labelKey="adminOrders.status.refunded" [value]="stats().refunded.toString()" />
+    <app-dashboard-metric labelKey="adminOrders.customersCount" [value]="stats().customers.toString()" />
+    <app-dashboard-metric labelKey="adminOrders.returningCustomers" [value]="stats().returningCustomers.toString()" />
+    <app-dashboard-metric labelKey="adminOrders.averageOrder" [value]="stats().averageOrder + ' ' + stats().currency" />
+  </div>
+
+  @if (stats().alerts.length > 0) {
+    <app-card padding="sm" class="orders-dashboard__alerts">
+      @for (alert of stats().alerts; track alert.labelKey) {
+        <app-badge variant="warning">{{ alert.count }} — {{ alert.labelKey | translate }}</app-badge>
+      }
+    </app-card>
+  }
+
+  <app-card padding="sm" class="orders-dashboard__activity">
+    <h4>{{ 'adminOrders.recentActivity' | translate }}</h4>
+    @if (stats().recentActivity.length === 0) {
+      <p>{{ 'adminOrders.noRecentActivity' | translate }}</p>
+    } @else {
+      <ul>
+        @for (entry of stats().recentActivity; track entry.timestamp + entry.orderId) {
+          <li>{{ entry.timestamp | date:'short' }} — {{ entry.orderNumber }} — {{ entry.note }}</li>
+        }
+      </ul>
+    }
+  </app-card>
+</div>

src/app/features/admin/orders/components/orders-dashboard/orders-dashboard.component.scss

@@ -0,0 +1,51 @@
+.orders-dashboard {
+  display: grid;
+  gap: 16px;
+  margin-bottom: 8px;
+}
+
+.orders-dashboard__metrics {
+  display: grid;
+  grid-template-columns: repeat(8, minmax(0, 1fr));
+  gap: 12px;
+}
+
+@media (max-width: 1200px) {
+  .orders-dashboard__metrics {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 640px) {
+  .orders-dashboard__metrics {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+.orders-dashboard__alerts {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.orders-dashboard__activity h4 {
+  margin: 0 0 8px;
+  font-size: 0.95rem;
+  font-weight: 700;
+}
+
+.orders-dashboard__activity ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: grid;
+  gap: 4px;
+  font-size: 0.85rem;
+  color: var(--text-secondary, #5f6e6a);
+}
+
+.orders-dashboard__activity p {
+  margin: 0;
+  font-size: 0.85rem;
+  color: var(--text-secondary, #5f6e6a);
+}

src/app/features/admin/orders/components/orders-dashboard/orders-dashboard.component.ts

@@ -0,0 +1,19 @@
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+import { DatePipe } from '@angular/common';
+import { TranslatePipe } from '../../../../../i18n/translate.pipe';
+import { CardComponent } from '../../../../../shared/ui/card/card.component';
+import { BadgeComponent } from '../../../../../shared/ui/badge/badge.component';
+import { DashboardMetricComponent } from '../../../dashboard/components/dashboard-metric.component';
+import { AdminOrdersDashboardStats } from '../../facade/admin-orders.facade';
+
+@Component({
+  selector: 'app-orders-dashboard',
+  standalone: true,
+  imports: [TranslatePipe, DatePipe, CardComponent, BadgeComponent, DashboardMetricComponent],
+  templateUrl: './orders-dashboard.component.html',
+  styleUrl: './orders-dashboard.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class OrdersDashboardComponent {
+  readonly stats = input.required<AdminOrdersDashboardStats>();
+}

src/app/features/admin/orders/facade/admin-orders.facade.ts

@@ -1,11 +1,37 @@
-import { Injectable, inject, signal } from '@angular/core';
+import { Injectable, computed, inject, signal } from '@angular/core';
 import { take } from 'rxjs/operators';
 import { AdminOrder, AdminOrderListFilters, AdminOrderStatus } from '../models/admin-order.model';
 import { AdminOrdersLocalGateway } from '../services/admin-orders-local.gateway';
+import { LocalStorageService } from '../../../../core/storage/local-storage.service';
+
+export type AdminOrdersViewMode = 'table' | 'cards';
+export type AdminOrdersDensity = 'comfortable' | 'compact';
+
+export const ALL_ORDER_COLUMNS = ['customer', 'status', 'payment', 'total', 'created'] as const;
+export type AdminOrderColumn = typeof ALL_ORDER_COLUMNS[number];
+
+export interface AdminOrdersDashboardStats {
+  ordersToday: number;
+  pending: number;
+  paid: number;
+  cancelled: number;
+  refunded: number;
+  customers: number;
+  returningCustomers: number;
+  averageOrder: number;
+  currency: string;
+  recentActivity: { orderNumber: string; orderId: string; note: string; status: AdminOrderStatus; timestamp: string }[];
+  alerts: { labelKey: string; count: number }[];
+}
+
+const VIEW_MODE_KEY = 'admin-orders:view-mode';
+const DENSITY_KEY = 'admin-orders:density';
+const COLUMNS_KEY = 'admin-orders:visible-columns';
 
 @Injectable({ providedIn: 'root' })
 export class AdminOrdersFacade {
   private readonly gateway = inject(AdminOrdersLocalGateway);
+  private readonly localStorage = inject(LocalStorageService);
 
   readonly filters = signal<AdminOrderListFilters>({ search: '', status: 'all', page: 1, pageSize: 10 });
   readonly orders = signal<AdminOrder[]>([]);
@@ -13,6 +39,41 @@ export class AdminOrdersFacade {
   readonly loading = signal(false);
   readonly selected = signal<AdminOrder | null>(null);
 
+  readonly viewMode = signal<AdminOrdersViewMode>((this.localStorage.getItem(VIEW_MODE_KEY) as AdminOrdersViewMode) || 'table');
+  readonly density = signal<AdminOrdersDensity>((this.localStorage.getItem(DENSITY_KEY) as AdminOrdersDensity) || 'comfortable');
+  readonly visibleColumns = signal<AdminOrderColumn[]>(this.localStorage.getJSON<AdminOrderColumn[]>(COLUMNS_KEY) ?? [...ALL_ORDER_COLUMNS]);
+  readonly selectedIds = signal<string[]>([]);
+  readonly hasSelection = computed(() => this.selectedIds().length > 0);
+  readonly dashboardStats = signal<AdminOrdersDashboardStats | null>(null);
+
+  setViewMode(mode: AdminOrdersViewMode): void {
+    this.viewMode.set(mode);
+    this.localStorage.setItem(VIEW_MODE_KEY, mode);
+  }
+
+  setDensity(density: AdminOrdersDensity): void {
+    this.density.set(density);
+    this.localStorage.setItem(DENSITY_KEY, density);
+  }
+
+  setColumnVisible(column: AdminOrderColumn, visible: boolean): void {
+    const next = visible ? [...new Set([...this.visibleColumns(), column])] : this.visibleColumns().filter(c => c !== column);
+    this.visibleColumns.set(next);
+    this.localStorage.setJSON(COLUMNS_KEY, next);
+  }
+
+  toggleSelection(id: string, checked: boolean): void {
+    this.selectedIds.update(current => checked ? [...new Set([...current, id])] : current.filter(item => item !== id));
+  }
+
+  toggleAll(checked: boolean): void {
+    this.selectedIds.set(checked ? this.orders().map(order => order.id) : []);
+  }
+
+  clearSelection(): void {
+    this.selectedIds.set([]);
+  }
+
   loadList(): void {
     this.loading.set(true);
     this.gateway.loadOrders(this.filters()).pipe(take(1)).subscribe({
@@ -55,6 +116,29 @@ export class AdminOrdersFacade {
     this.gateway.addNote(id, note.trim(), internal).pipe(take(1)).subscribe({ next: order => this.selected.set(order) });
   }
 
+  applyBulkStatus(status: AdminOrderStatus): void {
+    const ids = [...this.selectedIds()];
+    ids.forEach(id => this.gateway.updateStatus(id, status, `Bulk status change to ${status}`).pipe(take(1)).subscribe());
+    this.clearSelection();
+    this.loadList();
+    this.loadDashboardStats();
+  }
+
+  applyBulkArchive(archived: boolean): void {
+    const ids = [...this.selectedIds()];
+    ids.forEach(id => (archived ? this.gateway.archiveOrder(id) : this.gateway.restoreOrder(id)).pipe(take(1)).subscribe());
+    this.clearSelection();
+    this.loadList();
+  }
+
+  applyBulkDelete(): void {
+    const ids = [...this.selectedIds()];
+    ids.forEach(id => this.gateway.deleteOrder(id).pipe(take(1)).subscribe());
+    this.clearSelection();
+    this.loadList();
+    this.loadDashboardStats();
+  }
+
   exportCsv(): string {
     const header = 'Order Number,Status,Customer,Email,Total,Currency,Created At';
     const rows = this.orders().map(order =>
@@ -62,4 +146,68 @@ export class AdminOrdersFacade {
     );
     return [header, ...rows].join('\n');
   }
+
+  exportSelectedAsCsv(): void {
+    const selected = new Set(this.selectedIds());
+    const rows = this.orders().filter(order => selected.has(order.id));
+    const header = 'Order Number,Status,Customer,Email,Total,Currency,Created At';
+    const lines = rows.map(order => [order.orderNumber, order.status, order.customer.name, order.customer.email, order.total, order.currency, order.createdAt].join(','));
+    const csv = [header, ...lines].join('\n');
+    const blob = new Blob([csv], { type: 'text/csv' });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement('a');
+    link.href = url;
+    link.download = 'orders-export.csv';
+    link.click();
+    URL.revokeObjectURL(url);
+  }
+
+  /** Dashboard reflects the whole order book, not just the current filtered/paginated page. */
+  loadDashboardStats(): void {
+    this.gateway.loadOrders({ search: '', status: 'all', page: 1, pageSize: 100000 }).pipe(take(1))
+      .subscribe({ next: result => this.dashboardStats.set(this.computeDashboardStats(result.items)) });
+  }
+
+  private computeDashboardStats(orders: AdminOrder[]): AdminOrdersDashboardStats {
+    const startOfToday = new Date();
+    startOfToday.setHours(0, 0, 0, 0);
+    const ordersToday = orders.filter(order => new Date(order.createdAt) >= startOfToday).length;
+
+    const byEmail = new Map<string, AdminOrder[]>();
+    for (const order of orders) {
+      const list = byEmail.get(order.customer.email) ?? [];
+      list.push(order);
+      byEmail.set(order.customer.email, list);
+    }
+    const returningCustomers = [...byEmail.values()].filter(list => list.length > 1).length;
+
+    const total = orders.reduce((sum, order) => sum + order.total, 0);
+    const averageOrder = orders.length > 0 ? Math.round(total / orders.length) : 0;
+
+    const recentActivity = orders
+      .flatMap(order => order.timeline.map(entry => ({ orderNumber: order.orderNumber, orderId: order.id, note: entry.note, status: entry.status, timestamp: entry.timestamp })))
+      .sort((a, b) => b.timestamp.localeCompare(a.timestamp))
+      .slice(0, 8);
+
+    const stuckPending = orders.filter(order => order.status === 'pending' && Date.now() - new Date(order.createdAt).getTime() > 48 * 60 * 60 * 1000).length;
+    const refundRequested = orders.filter(order => order.payment.status === 'refund_requested').length;
+    const alerts: AdminOrdersDashboardStats['alerts'] = [
+      ...(stuckPending > 0 ? [{ labelKey: 'adminOrders.alertStuckPending', count: stuckPending }] : []),
+      ...(refundRequested > 0 ? [{ labelKey: 'adminOrders.alertRefundRequested', count: refundRequested }] : []),
+    ];
+
+    return {
+      ordersToday,
+      pending: orders.filter(order => order.status === 'pending').length,
+      paid: orders.filter(order => order.payment.status === 'paid').length,
+      cancelled: orders.filter(order => order.status === 'cancelled').length,
+      refunded: orders.filter(order => order.status === 'refunded').length,
+      customers: byEmail.size,
+      returningCustomers,
+      averageOrder,
+      currency: orders[0]?.currency ?? '',
+      recentActivity,
+      alerts,
+    };
+  }
 }

src/app/features/admin/orders/models/admin-order.model.ts

@@ -46,6 +46,7 @@ export interface AdminOrder {
   notes: string;
   internalNotes: string;
   timeline: AdminOrderTimelineEntry[];
+  archived: boolean;
   createdAt: string;
   updatedAt: string;
 }

src/app/features/admin/orders/pages/admin-order-detail-page.component.html

@@ -8,10 +8,28 @@
     <app-button variant="secondary" (click)="printInvoice()">{{ 'adminOrders.printInvoice' | translate }}</app-button>
   </header>
 
+  @if (!isTerminal()) {
+    <ol class="status-stepper no-print" aria-label="Order status">
+      @for (step of workflowSteps; track step; let i = $index) {
+        <li
+          class="status-stepper__step"
+          [class.status-stepper__step--done]="i < currentStepIndex()"
+          [class.status-stepper__step--current]="i === currentStepIndex()"
+        >
+          <span class="status-stepper__dot" aria-hidden="true"></span>
+          <span class="status-stepper__label">{{ ('adminOrders.status.' + step) | translate }}</span>
+        </li>
+      }
+    </ol>
+  } @else {
+    <p class="status-stepper__terminal no-print">{{ ('adminOrders.status.' + order.status) | translate }}</p>
+  }
+
   <section class="grid two">
     <div class="card">
       <h3>{{ 'adminOrders.customer' | translate }}</h3>
-      <p>{{ order.customer.name }}</p>
+      <button type="button" class="link-button no-print" (click)="viewCustomer(order.customer.email)">{{ order.customer.name }}</button>
+      <p class="print-only">{{ order.customer.name }}</p>
       <p>{{ order.customer.email }}</p>
       <p>{{ order.customer.phone }}</p>
     </div>
@@ -21,10 +39,10 @@
       <p>{{ order.payment.amount }} {{ order.payment.currency }}</p>
     </div>
     <div class="card">
-      <h3>{{ 'adminOrders.shipping' | translate }}</h3>
+      <h3>{{ 'adminOrders.delivery' | translate }}</h3>
       <p>{{ order.shipping.address }}</p>
       <p>{{ order.shipping.method }}</p>
-      @if (order.shipping.trackingNumber) { <p>{{ order.shipping.trackingNumber }}</p> }
+      @if (order.shipping.trackingNumber) { <p>{{ 'adminOrders.trackingNumber' | translate }}: {{ order.shipping.trackingNumber }}</p> }
     </div>
     <div class="card no-print">
       <h3>{{ 'adminOrders.changeStatus' | translate }}</h3>
@@ -50,9 +68,7 @@
 
   <section class="card">
     <h3>{{ 'adminOrders.timeline' | translate }}</h3>
-    @for (entry of order.timeline; track $index) {
-      <p>{{ entry.timestamp | date:'short' }} — {{ ('adminOrders.status.' + entry.status) | translate }} — {{ entry.note }}</p>
-    }
+    <app-order-timeline [entries]="order.timeline" />
   </section>
 
   <section class="grid two no-print">

src/app/features/admin/orders/pages/admin-order-detail-page.component.scss

@@ -11,4 +11,65 @@
 select, textarea { width: 100%; padding: 8px 10px; border: 1px solid var(--border-color, #d3dad9); border-radius: 8px; font: inherit; }
 .actions { display: flex; gap: 8px; }
 @media (max-width: 700px) { .grid.two { grid-template-columns: 1fr; } }
-@media print { .no-print { display: none !important; } }
+@media print { .no-print { display: none !important; } .print-only { display: block !important; } }
+
+.link-button {
+  all: unset;
+  cursor: pointer;
+  color: var(--brand-primary, #1e8a6e);
+  font-weight: 600;
+
+  &:hover, &:focus-visible { text-decoration: underline; }
+}
+
+.print-only { display: none; margin: 0; font-weight: 600; }
+
+.status-stepper {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0;
+}
+
+.status-stepper__step {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex: 1;
+  min-width: 120px;
+  position: relative;
+  padding: 8px 0;
+}
+
+.status-stepper__dot {
+  width: 14px;
+  height: 14px;
+  border-radius: 999px;
+  background: var(--surface-muted, #eef2f0);
+  border: 2px solid var(--border-subtle, #e7ece9);
+  flex-shrink: 0;
+}
+
+.status-stepper__step--done .status-stepper__dot,
+.status-stepper__step--current .status-stepper__dot {
+  background: var(--brand-primary, #1e8a6e);
+  border-color: var(--brand-primary, #1e8a6e);
+}
+
+.status-stepper__label {
+  font-size: 0.85rem;
+  font-weight: 600;
+  color: var(--text-secondary, #5f6e6a);
+}
+
+.status-stepper__step--done .status-stepper__label,
+.status-stepper__step--current .status-stepper__label {
+  color: var(--text-primary, #1e3c38);
+}
+
+.status-stepper__terminal {
+  font-weight: 700;
+  color: var(--text-primary, #1e3c38);
+}

src/app/features/admin/orders/pages/admin-order-detail-page.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, inject, signal } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, inject, signal } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
@@ -9,11 +9,15 @@ import { TranslateService } from '../../../../i18n/translate.service';
 import { LanguageService } from '../../../../services/language.service';
 import { ButtonComponent } from '../../../../shared/ui/button/button.component';
 import { BadgeComponent } from '../../../../shared/ui/badge/badge.component';
+import { OrderTimelineComponent } from '../components/order-timeline/order-timeline.component';
+
+const WORKFLOW_STEPS: AdminOrderStatus[] = ['pending', 'processing', 'shipped', 'delivered'];
+const TERMINAL_STATUSES: AdminOrderStatus[] = ['cancelled', 'refunded'];
 
 @Component({
   selector: 'app-admin-order-detail-page',
   standalone: true,
-  imports: [CommonModule, FormsModule, TranslatePipe, ButtonComponent, BadgeComponent],
+  imports: [CommonModule, FormsModule, TranslatePipe, ButtonComponent, BadgeComponent, OrderTimelineComponent],
   templateUrl: './admin-order-detail-page.component.html',
   styleUrls: ['./admin-order-detail-page.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush
@@ -26,9 +30,21 @@ export class AdminOrderDetailPageComponent {
   private readonly translate = inject(TranslateService);
 
   readonly statuses: AdminOrderStatus[] = ['pending', 'processing', 'shipped', 'delivered', 'cancelled', 'refunded'];
+  readonly workflowSteps = WORKFLOW_STEPS;
   readonly noteDraft = signal('');
   readonly internalNoteDraft = signal('');
 
+  readonly isTerminal = computed(() => {
+    const order = this.facade.selected();
+    return !!order && TERMINAL_STATUSES.includes(order.status);
+  });
+
+  readonly currentStepIndex = computed(() => {
+    const order = this.facade.selected();
+    if (!order) return -1;
+    return WORKFLOW_STEPS.indexOf(order.status);
+  });
+
   constructor() {
     const id = this.route.snapshot.paramMap.get('id');
     if (id) {
@@ -40,6 +56,10 @@ export class AdminOrderDetailPageComponent {
     void this.router.navigate([this.languageService.currentLanguage(), 'backoffice', 'orders']);
   }
 
+  viewCustomer(email: string): void {
+    void this.router.navigate([this.languageService.currentLanguage(), 'backoffice', 'customers', encodeURIComponent(email)]);
+  }
+
   setStatus(id: string, status: AdminOrderStatus): void {
     this.facade.setStatus(id, status, `Status changed to ${status}`);
   }

src/app/features/admin/orders/pages/admin-orders-list-page.component.html

@@ -1,4 +1,8 @@
 <section class="admin-orders-card">
+  @if (facade.dashboardStats(); as stats) {
+    <app-orders-dashboard [stats]="stats" />
+  }
+
   <div class="toolbar">
     <div class="filters">
       <app-input type="search" [ngModel]="facade.filters().search" (ngModelChange)="facade.updateFilters({ search: $event })" [placeholder]="'adminOrders.search' | translate" />
@@ -8,9 +12,43 @@
         }
       </select>
     </div>
-    <app-button variant="secondary" (click)="exportCsv()">{{ 'adminOrders.export' | translate }}</app-button>
+    <div class="toolbar__view-controls">
+      <div class="view-toggle" role="group" [attr.aria-label]="'adminProducts.density' | translate">
+        <app-button variant="ghost" size="sm" [attr.aria-pressed]="facade.density() === 'comfortable'" (click)="facade.setDensity('comfortable')">{{ 'adminProducts.densityComfortable' | translate }}</app-button>
+        <app-button variant="ghost" size="sm" [attr.aria-pressed]="facade.density() === 'compact'" (click)="facade.setDensity('compact')">{{ 'adminProducts.densityCompact' | translate }}</app-button>
+      </div>
+      <app-button variant="ghost" size="sm" (click)="columnsPanelOpen.set(!columnsPanelOpen())">{{ 'adminProducts.columns' | translate }}</app-button>
+      <app-button variant="secondary" (click)="exportCsv()">{{ 'adminOrders.export' | translate }}</app-button>
+    </div>
   </div>
 
+  @if (columnsPanelOpen()) {
+    <app-card padding="sm" class="columns-panel">
+      @for (column of allColumns; track column) {
+        <label class="check">
+          <input type="checkbox" [checked]="isColumnVisible(column)" (change)="facade.setColumnVisible(column, $any($event.target).checked)" />
+          <span>{{ ('adminOrders.column_' + column) | translate }}</span>
+        </label>
+      }
+    </app-card>
+  }
+
+  @if (facade.selectedIds().length > 0) {
+    <div class="bulk-actions">
+      <span>{{ facade.selectedIds().length }} {{ 'adminProducts.selectedCount' | translate }}</span>
+      <select [attr.aria-label]="'adminOrders.changeStatus' | translate" [ngModel]="bulkStatusValue()" (ngModelChange)="bulkStatusValue.set($event)">
+        @for (status of statuses; track status) {
+          @if (status !== 'all') { <option [value]="status">{{ ('adminOrders.status.' + status) | translate }}</option> }
+        }
+      </select>
+      <app-button variant="secondary" size="sm" (click)="applyBulkStatus()">{{ 'adminOrders.applyStatus' | translate }}</app-button>
+      <app-button variant="secondary" size="sm" (click)="facade.applyBulkArchive(true)">{{ 'adminOrders.archiveSelected' | translate }}</app-button>
+      <app-button variant="secondary" size="sm" (click)="facade.exportSelectedAsCsv()">{{ 'adminProducts.bulkExportAction' | translate }}</app-button>
+      <app-button variant="secondary" size="sm" (click)="printSelection()">{{ 'adminOrders.printSelected' | translate }}</app-button>
+      <app-button variant="danger" size="sm" (click)="facade.applyBulkDelete()">{{ 'adminProducts.bulkDelete' | translate }}</app-button>
+    </div>
+  }
+
   @if (facade.loading()) {
     <div class="skeleton-rows">
       @for (i of [1,2,3,4]; track i) { <app-skeleton shape="rect" height="40px" /> }
@@ -18,30 +56,36 @@
   } @else if (facade.orders().length === 0) {
     <app-empty-state [title]="'adminOrders.emptyTitle' | translate" [description]="'adminOrders.emptyDescription' | translate" />
   } @else {
-    <app-table>
-      <thead>
-        <tr>
-          <th>{{ 'adminOrders.orderNumber' | translate }}</th>
-          <th>{{ 'adminOrders.customer' | translate }}</th>
-          <th>{{ 'backoffice.status' | translate }}</th>
-          <th>{{ 'backoffice.price' | translate }}</th>
-          <th>{{ 'adminOrders.createdAt' | translate }}</th>
-          <th>{{ 'adminProducts.actions' | translate }}</th>
-        </tr>
-      </thead>
-      <tbody>
-        @for (order of facade.orders(); track order.id) {
+    <div class="table-scroll" [class.density-compact]="facade.density() === 'compact'">
+      <app-table>
+        <thead>
           <tr>
-            <td>{{ order.orderNumber }}</td>
-            <td>{{ order.customer.name }}</td>
-            <td><app-badge variant="neutral">{{ ('adminOrders.status.' + order.status) | translate }}</app-badge></td>
-            <td>{{ order.total }} {{ order.currency }}</td>
-            <td>{{ order.createdAt | date:'short' }}</td>
-            <td><app-button variant="secondary" size="sm" (click)="view(order.id)">{{ 'adminOrders.view' | translate }}</app-button></td>
+            <th><input type="checkbox" (change)="facade.toggleAll($any($event.target).checked)" /></th>
+            <th>{{ 'adminOrders.orderNumber' | translate }}</th>
+            @if (isColumnVisible('customer')) { <th>{{ 'adminOrders.customer' | translate }}</th> }
+            @if (isColumnVisible('status')) { <th>{{ 'backoffice.status' | translate }}</th> }
+            @if (isColumnVisible('payment')) { <th>{{ 'adminOrders.payment' | translate }}</th> }
+            @if (isColumnVisible('total')) { <th>{{ 'backoffice.price' | translate }}</th> }
+            @if (isColumnVisible('created')) { <th>{{ 'adminOrders.createdAt' | translate }}</th> }
+            <th>{{ 'adminProducts.actions' | translate }}</th>
           </tr>
-        }
-      </tbody>
-    </app-table>
+        </thead>
+        <tbody>
+          @for (order of facade.orders(); track order.id) {
+            <tr>
+              <td><input type="checkbox" [checked]="isSelected(order.id)" (change)="facade.toggleSelection(order.id, $any($event.target).checked)" /></td>
+              <td>{{ order.orderNumber }}</td>
+              @if (isColumnVisible('customer')) { <td>{{ order.customer.name }}</td> }
+              @if (isColumnVisible('status')) { <td><app-badge variant="neutral">{{ ('adminOrders.status.' + order.status) | translate }}</app-badge></td> }
+              @if (isColumnVisible('payment')) { <td><app-badge [variant]="order.payment.status === 'paid' ? 'success' : order.payment.status === 'refund_requested' ? 'warning' : 'neutral'">{{ ('adminOrders.paymentStatus.' + order.payment.status) | translate }}</app-badge></td> }
+              @if (isColumnVisible('total')) { <td>{{ order.total }} {{ order.currency }}</td> }
+              @if (isColumnVisible('created')) { <td>{{ order.createdAt | date:'short' }}</td> }
+              <td><app-button variant="secondary" size="sm" (click)="view(order.id)">{{ 'adminOrders.view' | translate }}</app-button></td>
+            </tr>
+          }
+        </tbody>
+      </app-table>
+    </div>
 
     <div class="pager">
       <span>{{ facade.total() }} {{ 'adminProducts.items' | translate }}</span>

src/app/features/admin/orders/pages/admin-orders-list-page.component.scss

@@ -5,3 +5,23 @@ select { min-height: 40px; padding: 0 10px; border: 1px solid var(--border-color
 .pager { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
 .skeleton-rows { display: grid; gap: 8px; }
 @media (max-width: 640px) { .filters { flex-direction: column; align-items: stretch; } }
+
+.toolbar__view-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
+.view-toggle { display: flex; gap: 2px; }
+.columns-panel { display: flex; flex-wrap: wrap; gap: 12px; }
+.check { display: inline-flex; align-items: center; gap: 6px; }
+.bulk-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
+
+.table-scroll {
+  max-height: 70vh;
+  overflow: auto;
+
+  thead th {
+    position: sticky;
+    top: 0;
+    background: #fff;
+    z-index: 1;
+  }
+}
+
+.density-compact td, .density-compact th { padding: 4px 8px; }

src/app/features/admin/orders/pages/admin-orders-list-page.component.ts

@@ -1,8 +1,9 @@
-import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { ChangeDetectionStrategy, Component, inject, signal } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { Router } from '@angular/router';
-import { AdminOrdersFacade } from '../facade/admin-orders.facade';
+import { AdminOrdersFacade, AdminOrderColumn, ALL_ORDER_COLUMNS } from '../facade/admin-orders.facade';
+import { AdminOrderStatus } from '../models/admin-order.model';
 import { TranslatePipe } from '../../../../i18n/translate.pipe';
 import { LanguageService } from '../../../../services/language.service';
 import { ButtonComponent } from '../../../../shared/ui/button/button.component';
@@ -12,11 +13,13 @@ import { TableComponent } from '../../../../shared/ui/table/table.component';
 import { PaginationComponent } from '../../../../shared/ui/pagination/pagination.component';
 import { EmptyStateComponent } from '../../../../shared/ui/empty-state/empty-state.component';
 import { SkeletonComponent } from '../../../../shared/ui/skeleton/skeleton.component';
+import { CardComponent } from '../../../../shared/ui/card/card.component';
+import { OrdersDashboardComponent } from '../components/orders-dashboard/orders-dashboard.component';
 
 @Component({
   selector: 'app-admin-orders-list-page',
   standalone: true,
-  imports: [CommonModule, FormsModule, TranslatePipe, ButtonComponent, InputComponent, BadgeComponent, TableComponent, PaginationComponent, EmptyStateComponent, SkeletonComponent],
+  imports: [CommonModule, FormsModule, TranslatePipe, ButtonComponent, InputComponent, BadgeComponent, TableComponent, PaginationComponent, EmptyStateComponent, SkeletonComponent, CardComponent, OrdersDashboardComponent],
   templateUrl: './admin-orders-list-page.component.html',
   styleUrls: ['./admin-orders-list-page.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush
@@ -27,9 +30,13 @@ export class AdminOrdersListPageComponent {
   private readonly languageService = inject(LanguageService);
 
   readonly statuses = ['all', 'pending', 'processing', 'shipped', 'delivered', 'cancelled', 'refunded'] as const;
+  readonly allColumns = ALL_ORDER_COLUMNS;
+  protected readonly columnsPanelOpen = signal(false);
+  protected readonly bulkStatusValue = signal<AdminOrderStatus>('pending');
 
   constructor() {
     this.facade.loadList();
+    this.facade.loadDashboardStats();
   }
 
   totalPages(): number {
@@ -40,6 +47,22 @@ export class AdminOrdersListPageComponent {
     void this.router.navigate([this.languageService.currentLanguage(), 'backoffice', 'orders', id]);
   }
 
+  isSelected(id: string): boolean {
+    return this.facade.selectedIds().includes(id);
+  }
+
+  isColumnVisible(column: AdminOrderColumn): boolean {
+    return this.facade.visibleColumns().includes(column);
+  }
+
+  applyBulkStatus(): void {
+    this.facade.applyBulkStatus(this.bulkStatusValue());
+  }
+
+  printSelection(): void {
+    window.print();
+  }
+
   exportCsv(): void {
     const csv = this.facade.exportCsv();
     const blob = new Blob([csv], { type: 'text/csv' });

src/app/features/admin/orders/services/admin-orders-gateway.interface.ts

@@ -7,4 +7,7 @@ export interface AdminOrdersGateway {
   updateStatus(id: string, status: AdminOrderStatus, note: string): Observable<AdminOrder | null>;
   requestRefund(id: string): Observable<AdminOrder | null>;
   addNote(id: string, note: string, internal: boolean): Observable<AdminOrder | null>;
+  archiveOrder(id: string): Observable<AdminOrder | null>;
+  restoreOrder(id: string): Observable<AdminOrder | null>;
+  deleteOrder(id: string): Observable<void>;
 }

src/app/features/admin/orders/services/admin-orders-local.gateway.ts

@@ -58,6 +58,19 @@ export class AdminOrdersLocalGateway implements AdminOrdersGateway {
     }));
   }
 
+  archiveOrder(id: string): Observable<AdminOrder | null> {
+    return this.mutate(id, order => ({ ...order, archived: true, updatedAt: new Date().toISOString() }));
+  }
+
+  restoreOrder(id: string): Observable<AdminOrder | null> {
+    return this.mutate(id, order => ({ ...order, archived: false, updatedAt: new Date().toISOString() }));
+  }
+
+  deleteOrder(id: string): Observable<void> {
+    this.cache = this.ensureData().filter(order => order.id !== id);
+    return of(void 0).pipe(delay(50));
+  }
+
   private mutate(id: string, update: (order: AdminOrder) => AdminOrder): Observable<AdminOrder | null> {
     const all = this.ensureData();
     const existing = all.find(order => order.id === id);
@@ -112,6 +125,7 @@ export class AdminOrdersLocalGateway implements AdminOrdersGateway {
         { status: 'pending', timestamp: createdAt, note: 'Order created' },
         ...(status !== 'pending' ? [{ status, timestamp: createdAt, note: `Status set to ${status}` }] : []),
       ],
+      archived: false,
       createdAt,
       updatedAt: createdAt,
     };

src/app/features/admin/shell/admin-nav.model.ts

@@ -31,6 +31,7 @@ export const ADMIN_NAV_PRIMARY: AdminNavEntry[] = [
   { type: 'link', id: 'products', icon: 'pi-box', labelKey: 'adminShell.nav.products', path: ['products'] },
   { type: 'link', id: 'categories', icon: 'pi-tags', labelKey: 'adminShell.nav.categories', path: ['categories'] },
   { type: 'link', id: 'orders', icon: 'pi-shopping-cart', labelKey: 'adminShell.nav.orders', path: ['orders'] },
+  { type: 'link', id: 'customers', icon: 'pi-user', labelKey: 'adminShell.nav.customers', path: ['customers'] },
   { type: 'link', id: 'transactions', icon: 'pi-credit-card', labelKey: 'adminShell.nav.transactions', path: ['transactions'] },
   { type: 'link', id: 'reviews', icon: 'pi-star', labelKey: 'adminShell.nav.reviews', comingSoon: true },
   { type: 'link', id: 'reports', icon: 'pi-chart-bar', labelKey: 'adminShell.nav.reports', comingSoon: true },