# フロントエンド管理画面 詳細設計書

| 項目 | 内容 |
|------|------|
| 文書番号 | DD-FRONT-001 |
| バージョン | 1.0 |
| 作成日 | 2025年12月1日 |
| ステータス | 承認済み |

---

## 1. サービス概要

フロントエンド管理画面は、ECサイト注文管理システムのWeb管理インターフェースを提供するReactシングルページアプリケーション（SPA）である。3つのバックエンドマイクロサービスにREST APIで接続する。

| 項目 | 値 |
|------|-----|
| フレームワーク | React 19 + TypeScript |
| ビルドツール | Vite |
| スタイリング | Tailwind CSS |
| チャート | Recharts |
| ルーティング | react-router-dom v7 |
| デフォルトポート | 5173（開発サーバー） |
| 状態管理 | Reactフック（外部ライブラリ不使用） |
| データベース | なし（ステートレスSPA） |

---

## 2. アーキテクチャ

```mermaid
graph TD
    Browser[ブラウザ — 管理画面 :5173]
    OS[注文サービス :8000]
    PS[決済サービス :8001]
    NS[通知サービス :8002]

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

フロントエンドは3つのバックエンドサービスに**直接**通信する。APIゲートウェイやBFF（Backend for Frontend）レイヤーは存在しない。

---

## 3. ページ構成

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

システム全体の集約概要を表示。

| コンポーネント | データソース | 説明 |
|------------|-----------|------|
| 統計カード（4枚） | 注文サービス | 注文総数、総売上、決済件数、通知件数 |
| 折れ線グラフ | 注文サービス | 注文推移（日別集計） |
| 円グラフ | 注文サービス | 注文ステータス分布 |
| 棒グラフ | 注文サービス | 売上推移 |
| 最近の注文 | 注文サービス | 直近5件の注文 |

> **注記:** 全ての集計はクライアントサイドで実行。サーバーサイドの分析エンドポイントは存在しない。

### 3.2 注文管理 — `/orders`

- **一括インポートバナー**: CSV取り込みが未対応であることを警告表示
- **無効化されたCSVインポートボタン**: 「CSVインポート（未実装）」
- 顧客名・メールでの検索（クライアントサイドフィルタ）
- ステータスフィルタ
- 注文一覧テーブル
- 1件の注文作成フォーム
- キャンセルボタン（確認ダイアログ付き）

### 3.3 注文詳細 — `/orders/:id`

**3つのサービスから並列にデータ取得:**
1. `GET /api/v1/orders/{id}` → 注文サービス
2. `GET /api/v1/payments/order/{id}` → 決済サービス
3. `GET /api/v1/notifications/order/{id}` → 通知サービス

### 3.4 決済履歴 — `/payments`

> **制限事項:** 決済サービスに「全決済一覧取得」エンドポイントがないため、N+1パターンで取得。

### 3.5 通知ログ — `/notifications`

> **制限事項:** 決済履歴と同じN+1パターン。

### 3.6 システム状態 — `/system`

- 3サービスのヘルスチェックカード（30秒自動更新）
- **機能対応表**:

| 機能 | 注文 | 決済 | 通知 |
|------|------|------|------|
| 1件作成 | 対応 | 対応 | 対応 |
| 一括作成 | **非対応** | **非対応** | **非対応** |
| CSV取込 | **非対応** | N/A | N/A |
| バッチ処理 | **非対応** | **非対応** | **非対応** |

---

## 4. API利用マップ

| ページ | 注文サービス | 決済サービス | 通知サービス |
|--------|-----------|-----------|-----------|
| ダッシュボード | GET /orders | — | GET /notifications/order/{id} |
| 注文管理 | GET/POST/DELETE /orders | — | — |
| 注文詳細 | GET /orders/{id} | GET /payments/order/{id} | GET /notifications/order/{id} |
| 決済履歴 | GET /orders | GET /payments/order/{id} | — |
| 通知ログ | GET /orders | — | GET /notifications/order/{id} |
| システム状態 | GET /health | GET /health | GET /health |

---

## 5. 現在の制限事項

| ID | 制限事項 | 深刻度 |
|----|---------|--------|
| DD-FE-LIM-001 | **一括注文インポートUIなし。** CSVアップロード、ドラッグ&ドロップ、バッチ作成フォームは存在しない。 | 高 |
| DD-FE-LIM-002 | **決済・通知のN+1 APIパターン。** バックエンドに一覧取得エンドポイントなし。 | 中 |
| DD-FE-LIM-003 | **クライアントサイド集計のみ。** ダッシュボード統計はブラウザ内で計算。 | 中 |
| DD-FE-LIM-004 | **リアルタイム更新なし。** ポーリングベース、WebSocketなし。 | 低 |
| DD-FE-LIM-005 | **単一言語（日本語）。** i18nフレームワーク不使用。 | 低 |