# 画面設計書 100-予約一覧画面

## 概要

本ドキュメントは、Medusa Admin Dashboardの予約一覧画面の設計仕様を定義するものです。

### 本画面の処理概要

予約一覧画面は、在庫の予約（Reservation）情報を一覧表示するための画面です。

**業務上の目的・背景**：予約は、注文が確定した際に在庫を確保するために作成されます。予約により、他の注文に対して在庫が重複して割り当てられることを防ぎます。本画面では、すべての予約を一覧で確認し、予約の作成・編集・削除を行うことができます。

**画面へのアクセス方法**：サイドメニューの「Inventory」セクションから「Reservations」をクリックすることで表示されます。URL `/reservations` に直接アクセスすることも可能です。

**主要な操作・処理内容**：
1. 予約一覧の表示（ページネーション付き）
2. ロケーション別フィルタリング
3. 作成日時でのフィルタリング
4. 予約の作成・編集・削除

**画面遷移**：
- 遷移先：予約詳細画面（行クリック）
- 遷移先：予約作成画面（Createボタン）
- 遷移先：予約編集画面（編集アクション）

**権限による表示制御**：認証済みユーザーであれば全機能を利用可能です。

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 50 | 在庫予約管理 | 主機能 | 予約一覧の表示・削除 |
| 79 | 在庫ロケーションCRUD | フィルタ連携 | ロケーション別フィルタ |

## 画面種別

一覧（検索・フィルタ機能あり）

## URL/ルーティング

`/reservations`

## 入出力項目

### 入力項目

| 項目名 | 項目ID | 型 | 必須 | 説明 |
|--------|--------|-----|------|------|
| ロケーションフィルタ | location_id | string | - | ロケーションでの絞り込み |
| 作成日時フィルタ | created_at | date | - | 作成日時での絞り込み |

## 表示項目

| 項目名 | 項目ID | 型 | 説明 |
|--------|--------|-----|------|
| SKU | inventory_item.sku | string | 在庫アイテムのSKU |
| 説明 | description | string | 予約の説明 |
| 作成日時 | created_at | date | 予約の作成日時 |
| 数量 | quantity | number | 予約数量（右寄せ） |
| アクション | - | - | 編集・削除メニュー |

## イベント仕様

### 1-Createボタン押下

予約作成画面に遷移します。

### 2-行クリック

クリックした予約の詳細画面に遷移します（`/reservations/{id}`）。

### 3-編集アクション

予約編集画面に遷移します（`/reservations/{id}/edit`）。

### 4-削除アクション

確認ダイアログを表示し、確認後に予約を削除します。

**処理フロー**:
1. promptで削除確認ダイアログを表示
2. 確認された場合、`useDeleteReservationItem` で削除API呼び出し
3. 削除成功後、一覧が自動更新される

### 5-ロケーションフィルタ変更

選択されたロケーションで予約一覧をフィルタリングします。

### 6-作成日時フィルタ変更

指定された日時範囲で予約一覧をフィルタリングします。

## データベース更新仕様

### 操作別データベース影響一覧

| 操作（イベント） | 対象テーブル | 操作種別 | 概要 |
|----------------|-------------|---------|------|
| 初期表示 | reservation_item | SELECT | 予約一覧の取得 |
| 初期表示 | stock_location | SELECT | フィルタ用ロケーション一覧の取得 |
| 削除アクション | reservation_item | DELETE | 予約の削除 |

### テーブル別更新項目詳細

#### reservation_item

| 操作 | 項目（カラム名） | 更新値・取得条件 | 備考 |
|-----|-----------------|-----------------|------|
| DELETE | id | 対象予約のID | - |

## メッセージ仕様

| メッセージID | 種別 | メッセージ内容 | 表示条件 |
|-------------|------|--------------|----------|
| general.areYouSure | 確認 | 本当に実行しますか？ | 削除確認時 |
| reservations.deleteWarning | 警告 | この予約を削除すると、在庫が解放されます | 削除確認時 |
| - | エラー | エラーメッセージ（API エラー内容） | API 呼び出しエラー時 |

## 例外処理

| 例外条件 | 対応 | 画面表示 |
|---------|------|----------|
| 予約一覧取得エラー | エラーをスロー | エラー画面を表示 |
| 削除エラー | トースト通知 | エラーメッセージを表示 |

## 備考

- SingleColumnPage形式で実装
- DataTableコンポーネントで一覧表示（PAGE_SIZE: 20）
- 検索機能は無効化（search={false}）
- フィルタはロケーションと作成日時の2種類
- ロケーションフィルタはsearchable（検索可能）
- 行クリックで詳細画面へ遷移（navigateTo={row => row.id}）
- 拡張ウィジェット対応（reservation.list.before/after）

---

## コードリーディングガイド

本画面を理解するために参照すべきファイルと、推奨する読み解き順序を以下に示す。

### 推奨読解順序

#### Step 1: データ構造を理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | reservation-item.ts | `packages/modules/inventory/src/models/reservation-item.ts` | ReservationItemエンティティ。inventory_item_id, location_id, quantity等 |

**読解のコツ**: ReservationItemは在庫アイテムとロケーションの組み合わせで在庫を予約する。

#### Step 2: エントリーポイントを理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | reservation-list.tsx | `packages/admin/dashboard/src/routes/reservations/reservation-list/reservation-list.tsx` | ページコンポーネント。SingleColumnPageレイアウト |
| 2-2 | reservation-list-table.tsx | `packages/admin/dashboard/src/routes/reservations/reservation-list/components/reservation-list-table/reservation-list-table.tsx` | テーブルコンポーネント |

**主要処理フロー**:
1. **12行目（table）**: PAGE_SIZE = 20
2. **17-19行目（table）**: useReservationTableQueryでクエリパラメータ取得
3. **20-23行目（table）**: useReservationItemsで予約一覧取得
4. **25-26行目（table）**: useReservationTableFilters/Columnsでフィルタとカラム定義
5. **28-35行目（table）**: useDataTableでテーブル状態管理
6. **54-64行目（table）**: _DataTableで表示

#### Step 3: フィルタとカラムを理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | use-reservation-table-filters.tsx | `packages/admin/dashboard/src/routes/reservations/reservation-list/components/reservation-list-table/use-reservation-table-filters.tsx` | ロケーションと作成日時フィルタ |
| 3-2 | use-reservation-table-columns.tsx | `packages/admin/dashboard/src/routes/reservations/reservation-list/components/reservation-list-table/use-reservation-table-columns.tsx` | SKU、説明、作成日時、数量カラム |

**読解のコツ**: フィルタでuseStockLocations（limit: 1000）を使用してロケーション選択肢を取得。

#### Step 4: アクションメニューを理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 4-1 | reservation-actions.tsx | `packages/admin/dashboard/src/routes/reservations/reservation-list/components/reservation-list-table/reservation-actions.tsx` | 編集・削除アクション |

**主要処理フロー**:
1. **16行目**: useDeleteReservationItemでミューテーション取得
2. **18-30行目**: handleDeleteで確認ダイアログ表示後に削除
3. **37-55行目**: ActionMenuで編集リンクと削除ボタンを表示

### プログラム呼び出し階層図

```
ReservationList (reservation-list.tsx)
    │
    └─ ReservationListTable (reservation-list-table.tsx)
           │
           ├─ useReservationTableQuery (use-reservation-table-query.tsx)
           │      └─ クエリパラメータの取得
           │
           ├─ useReservationItems (reservations.tsx)
           │      └─ sdk.admin.reservation.list()
           │
           ├─ useReservationTableFilters (use-reservation-table-filters.tsx)
           │      └─ useStockLocations()
           │
           ├─ useReservationTableColumns (use-reservation-table-columns.tsx)
           │      └─ カラム定義
           │
           ├─ _DataTable
           │      └─ テーブル表示
           │
           └─ ReservationActions (reservation-actions.tsx)
                  └─ useDeleteReservationItem (reservations.tsx)
                         └─ sdk.admin.reservation.delete()
```

### データフロー図

```
[入力]                          [処理]                          [出力]

初期表示 ───────────────────▶ useReservationItems ──▶ 予約一覧表示
                                     │
フィルタ選択 ──────────────────────────┤
(ロケーション/作成日時)                  │
                                     ▼
                            searchParams更新
                                     │
                                     ▼
                            useReservationItems ──▶ 一覧更新
                                     │
行クリック ─────────────────────────────────────────▶ 詳細画面遷移
                                     │
編集アクション ──────────────────────────────────────▶ 編集画面遷移
                                     │
削除アクション ──────────────────▶ prompt確認
                                     │
                                     ▼
                          useDeleteReservationItem
                                     │
                                     ▼
                            queryClient.invalidate ──▶ 一覧更新
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| reservation-list.tsx | `packages/admin/dashboard/src/routes/reservations/reservation-list/reservation-list.tsx` | ソース | ページコンポーネント |
| reservation-list-table.tsx | `packages/admin/dashboard/src/routes/reservations/reservation-list/components/reservation-list-table/reservation-list-table.tsx` | ソース | テーブルコンポーネント |
| use-reservation-table-columns.tsx | `packages/admin/dashboard/src/routes/reservations/reservation-list/components/reservation-list-table/use-reservation-table-columns.tsx` | ソース | カラム定義フック |
| use-reservation-table-filters.tsx | `packages/admin/dashboard/src/routes/reservations/reservation-list/components/reservation-list-table/use-reservation-table-filters.tsx` | ソース | フィルタ定義フック |
| use-reservation-table-query.tsx | `packages/admin/dashboard/src/routes/reservations/reservation-list/components/reservation-list-table/use-reservation-table-query.tsx` | ソース | クエリパラメータフック |
| reservation-actions.tsx | `packages/admin/dashboard/src/routes/reservations/reservation-list/components/reservation-list-table/reservation-actions.tsx` | ソース | アクションメニュー |
| reservations.tsx | `packages/admin/dashboard/src/hooks/api/reservations.tsx` | ソース | API フック |
