# Frontend Admin Dashboard — Detailed Design

| Item | Value |
|------|-------|
| Document ID | DD-FRONT-001 |
| Version | 1.0 |
| Created | 2025-12-01 |
| Status | Approved |

---

## 1. Service Overview

The Frontend Admin Dashboard is a React single-page application (SPA) that provides a web-based management interface for the e-commerce order management system. It connects to all 3 backend microservices via REST API.

| Property | Value |
|----------|-------|
| Framework | React 19 + TypeScript |
| Build Tool | Vite |
| Styling | Tailwind CSS |
| Charts | Recharts |
| Routing | react-router-dom v7 |
| Default Port | 5173 (dev server) |
| State Management | React hooks (no external library) |
| Database | None (stateless SPA) |

---

## 2. Architecture

```mermaid
graph TD
    Browser[Browser — Admin Dashboard :5173]
    OS[Order Service :8000]
    PS[Payment Service :8001]
    NS[Notification Service :8002]

    Browser -->|REST API| OS
    Browser -->|REST API| PS
    Browser -->|REST API| NS
```

The frontend communicates **directly** with all 3 backend services. There is no API gateway or BFF (Backend for Frontend) layer.

---

## 3. Pages

### 3.1 Dashboard (ダッシュボード) — `/`

Aggregated overview of the entire system.

| Component | Data Source | Description |
|-----------|-----------|-------------|
| Stats Cards (4) | Order Service | Total orders, revenue, paid count, notification count |
| Line Chart | Order Service | Orders over time (grouped by date) |
| Pie Chart | Order Service | Order status distribution |
| Bar Chart | Order Service | Revenue over time |
| Recent Orders | Order Service | Last 5 orders |

> **NOTE:** All aggregation is performed client-side. No server-side analytics endpoint exists. For production use with 100,000+ orders, a dedicated analytics service would be needed.

### 3.2 Order Management (注文管理) — `/orders`

- **BulkImportBanner**: Amber warning indicating CSV import is not available
- **Disabled CSV Import button**: Grayed out with "CSVインポート（未実装）"
- Search by customer name/email (client-side filter)
- Status filter dropdown
- Sortable order table
- Single order creation form
- Cancel order with confirmation dialog

### 3.3 Order Detail (注文詳細) — `/orders/:id`

Fetches data from **all 3 services in parallel**:
1. `GET /api/v1/orders/{id}` → Order Service
2. `GET /api/v1/payments/order/{id}` → Payment Service
3. `GET /api/v1/notifications/order/{id}` → Notification Service

Displays order info, items, payment card, notification history.

### 3.4 Payment History (決済履歴) — `/payments`

> **LIMITATION:** Payment Service has no "list all payments" endpoint. Uses N+1 pattern: fetch orders → fetch payment per order.

### 3.5 Notification Log (通知ログ) — `/notifications`

> **LIMITATION:** Same N+1 pattern. No "list all notifications" endpoint.

### 3.6 System Status (システム状態) — `/system`

- Health check cards for all 3 services (auto-refresh every 30s)
- **Capability matrix** showing supported vs unsupported features:

| Feature | Order | Payment | Notification |
|---------|-------|---------|-------------|
| Single Create | Supported | Supported | Supported |
| Bulk Create | **Not Supported** | **Not Supported** | **Not Supported** |
| CSV Import | **Not Supported** | N/A | N/A |
| Batch Processing | **Not Supported** | **Not Supported** | **Not Supported** |

---

## 4. API Consumption Map

| Page | Order Service | Payment Service | Notification Service |
|------|--------------|----------------|---------------------|
| Dashboard | GET /orders | — | GET /notifications/order/{id} |
| Orders | GET/POST/DELETE /orders | — | — |
| Order Detail | GET /orders/{id} | GET /payments/order/{id} | GET /notifications/order/{id} |
| Payments | GET /orders | GET /payments/order/{id} | — |
| Notifications | GET /orders | — | GET /notifications/order/{id} |
| System Status | GET /health | GET /health | GET /health |

---

## 5. Current Limitations

| ID | Limitation | Severity |
|----|-----------|----------|
| DD-FE-LIM-001 | **No bulk order import UI.** No CSV upload, no drag-and-drop, no batch creation form. | High |
| DD-FE-LIM-002 | **N+1 API pattern for payments/notifications.** No list-all endpoints on backend. | Medium |
| DD-FE-LIM-003 | **Client-side aggregation only.** Dashboard stats computed in browser. | Medium |
| DD-FE-LIM-004 | **No real-time updates.** Polling-based, no WebSocket. | Low |
| DD-FE-LIM-005 | **Single-language (Japanese).** No i18n framework. | Low |