phase-10: add backoffice sandbox with mock business domain management

src/app/pages/backoffice/backoffice-dashboard.component.ts

@@ -0,0 +1,86 @@
+import { CommonModule } from '@angular/common';
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { BackofficeFacade } from '../../facades/backoffice/backoffice.facade';
+
+@Component({
+  selector: 'app-backoffice-dashboard',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <main class="backoffice-dashboard">
+      <h1>Backoffice Sandbox</h1>
+      <p>Business data management domain (mocked for platform foundation).</p>
+
+      @if (loading()) {
+        <section class="card">Loading backoffice data...</section>
+      } @else {
+        <section class="card">
+          <h2>Products</h2>
+          <table>
+            <thead>
+              <tr>
+                <th>SKU</th>
+                <th>Title</th>
+                <th>Price</th>
+                <th>Status</th>
+              </tr>
+            </thead>
+            <tbody>
+              @for (product of products(); track product.id) {
+                <tr>
+                  <td>{{ product.sku }}</td>
+                  <td>{{ product.title }}</td>
+                  <td>{{ product.price.amount }} {{ product.price.currency }}</td>
+                  <td>{{ product.stockStatus ?? 'n/a' }}</td>
+                </tr>
+              }
+            </tbody>
+          </table>
+        </section>
+
+        <section class="card">
+          <h2>Categories</h2>
+          <ul>
+            @for (category of categories(); track category.id) {
+              <li>{{ category.title }} ({{ category.itemsCount ?? 0 }})</li>
+            }
+          </ul>
+        </section>
+
+        <section class="card placeholders">
+          <h2>Other Domains</h2>
+          <div class="chips">
+            <span>Orders</span>
+            <span>Customers</span>
+            <span>Inventory</span>
+            <span>Media</span>
+            <span>Settings</span>
+          </div>
+        </section>
+      }
+    </main>
+  `,
+  styles: [
+    `
+      .backoffice-dashboard { padding: 1.5rem; display: grid; gap: 1rem; }
+      .card { border: 1px solid var(--border-color, #d3dad9); border-radius: 12px; padding: 1rem; background: #fff; }
+      table { width: 100%; border-collapse: collapse; }
+      th, td { text-align: left; padding: 0.5rem; border-bottom: 1px solid #ececec; }
+      ul { margin: 0; padding-left: 1rem; }
+      .chips { display: flex; gap: 0.5rem; flex-wrap: wrap; }
+      .chips span { padding: 0.25rem 0.5rem; border-radius: 999px; background: var(--bg-secondary, #f5f5f5); }
+    `
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class BackofficeDashboardComponent {
+  private readonly facade = inject(BackofficeFacade);
+
+  readonly products = this.facade.products;
+  readonly categories = this.facade.categories;
+  readonly loading = this.facade.loading;
+
+  constructor() {
+    this.facade.load();
+  }
+}