# 画面設計書 94-在庫編集画面

## 概要

本ドキュメントは、Medusa Admin Dashboardの在庫編集画面の設計仕様を定義するものです。

### 本画面の処理概要

在庫編集画面は、既存の在庫アイテム（Inventory Item）の基本情報（タイトル、SKU）を編集するためのドロワー形式の画面です。

**業務上の目的・背景**：在庫アイテムの基本情報を修正する必要がある場合に使用します。SKUの変更や、より分かりやすいタイトルへの変更などを行えます。属性情報（サイズ・重量など）の編集は別画面で行います。

**画面へのアクセス方法**：在庫詳細画面の基本情報セクションから編集ボタンをクリックすることでドロワー形式で表示されます。URL `/inventory/{id}/edit` に直接アクセスすることも可能です。

**主要な操作・処理内容**：
1. タイトルの編集
2. SKUの編集
3. 保存処理の実行

**画面遷移**：
- 遷移元：在庫詳細画面
- 遷移先：保存成功時は在庫詳細画面に戻る（ドロワークローズ）

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

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 48 | 在庫アイテム管理 | 主機能 | 在庫アイテム情報の編集 |

## 画面種別

編集（モーダル形式 / ドロワー）

## URL/ルーティング

`/inventory/{id}/edit`

## 入出力項目

### 入力項目

| 項目名 | 項目ID | 型 | 必須 | バリデーション | 説明 |
|--------|--------|-----|------|--------------|------|
| タイトル | title | string | - | - | 在庫アイテムのタイトル |
| SKU | sku | string | ○ | 1文字以上 | 在庫管理単位コード |

## 表示項目

| 項目名 | 説明 |
|--------|------|
| ヘッダー | 「Edit Item Details」 |
| タイトル入力フィールド | 現在のタイトルがプリセット |
| SKU入力フィールド | 現在のSKUがプリセット |

## イベント仕様

### 1-Saveボタン押下

入力内容でバリデーションを実行し、在庫アイテムを更新します。

**処理フロー**:
1. フォームのバリデーション実行
2. バリデーション成功時、`useUpdateInventoryItem` で API 呼び出し
3. 成功時、トースト通知（inventory.toast.updateItem）を表示しドロワーをクローズ
4. エラー時、エラーメッセージをトースト表示

### 2-Cancelボタン押下

入力内容を破棄してドロワーをクローズします。

### 3-ドロワー外クリック / ESCキー

入力内容を破棄してドロワーをクローズします。

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

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

| 操作（イベント） | 対象テーブル | 操作種別 | 概要 |
|----------------|-------------|---------|------|
| 初期表示 | inventory_item | SELECT | 在庫アイテム情報の取得 |
| Save押下 | inventory_item | UPDATE | 在庫アイテム情報の更新 |

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

#### inventory_item

| 操作 | 項目（カラム名） | 更新値・取得条件 | 備考 |
|-----|-----------------|-----------------|------|
| UPDATE | title | フォーム入力値 | 任意 |
| UPDATE | sku | フォーム入力値 | 必須 |

## メッセージ仕様

| メッセージID | 種別 | メッセージ内容 | 表示条件 |
|-------------|------|--------------|----------|
| inventory.toast.updateItem | 成功 | 在庫アイテムが正常に更新されました | 更新成功時 |
| - | エラー | エラーメッセージ（API エラー内容） | API 呼び出しエラー時 |

## 例外処理

| 例外条件 | 対応 | 画面表示 |
|---------|------|----------|
| 在庫アイテムが存在しない | エラーをスロー | エラー画面を表示 |
| バリデーションエラー | フォームエラー表示 | 入力フィールドにエラーメッセージを表示 |
| APIエラー | トースト通知 | エラーメッセージを表示 |

## 備考

- RouteDrawer形式で実装
- react-hook-formとzodによるバリデーション
- KeyboundFormでキーボードショートカット対応

---

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

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

### 推奨読解順序

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

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | edit-item-form.tsx | `packages/admin/dashboard/src/routes/inventory/inventory-detail/components/edit-inventory-item/components/edit-item-form.tsx` | EditInventoryItemSchemaのバリデーションルールを確認 |

**読解のコツ**: zodスキーマでsku が必須（min(1)）であることを確認。

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

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | edit-item-drawer.tsx | `packages/admin/dashboard/src/routes/inventory/inventory-detail/components/edit-inventory-item/edit-item-drawer.tsx` | ドロワーコンポーネント。useInventoryItemでデータ取得、RouteDrawerでドロワー表示 |
| 2-2 | edit-item-form.tsx | `packages/admin/dashboard/src/routes/inventory/inventory-detail/components/edit-inventory-item/components/edit-item-form.tsx` | フォームコンポーネント。useUpdateInventoryItemで更新処理 |

**主要処理フロー**:
1. **8-9行目（drawer）**: `useParams` でIDを取得
2. **12-17行目（drawer）**: `useInventoryItem` でデータ取得
3. **31-33行目（form）**: `useForm` でフォーム状態管理
4. **40行目（form）**: `useUpdateInventoryItem` で更新フック取得
5. **42-50行目（form）**: `handleSubmit` で更新処理実行

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

```
InventoryItemEdit (edit-item-drawer.tsx)
    │
    ├─ useInventoryItem (inventory.tsx)
    │      └─ sdk.admin.inventoryItem.retrieve()
    │
    └─ EditInventoryItemForm (edit-item-form.tsx)
           │
           └─ useUpdateInventoryItem (inventory.tsx)
                  └─ sdk.admin.inventoryItem.update()
```

### データフロー図

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

タイトル入力 ───────┐
                    │
SKU入力 ───────────┼──▶ useForm (react-hook-form)
                    │         │
                    │         ▼
                    │   zodバリデーション
                    │         │
                    │         ▼
                    └──▶ useUpdateInventoryItem ──▶ inventory_item UPDATE
                                  │
                                  ▼
                            handleSuccess ──▶ ドロワークローズ
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| edit-item-drawer.tsx | `packages/admin/dashboard/src/routes/inventory/inventory-detail/components/edit-inventory-item/edit-item-drawer.tsx` | ソース | ドロワーコンポーネント |
| edit-item-form.tsx | `packages/admin/dashboard/src/routes/inventory/inventory-detail/components/edit-inventory-item/components/edit-item-form.tsx` | ソース | フォームコンポーネント |
| inventory.tsx | `packages/admin/dashboard/src/hooks/api/inventory.tsx` | ソース | API フック |
