# 画面設計書 144-配送プロファイル詳細画面

## 概要

本ドキュメントは、Medusa Admin Dashboard における配送プロファイル詳細画面の設計仕様を記述したものである。

### 本画面の処理概要

**業務上の目的・背景**：配送プロファイルの詳細情報を確認することで、管理者は配送方法の分類がどのように設定されているかを把握できる。また、不要になった配送プロファイルの削除や、メタデータの確認など、配送プロファイルの管理業務を行う起点となる画面である。

**画面へのアクセス方法**：配送プロファイル一覧画面から行をクリック、または作成画面から作成成功後に自動遷移してアクセスする。URLパスは `/settings/locations/shipping-profiles/:shipping_profile_id` である。

**主要な操作・処理内容**：
1. 配送プロファイルの詳細情報を表示する
2. 配送プロファイルを削除する
3. JSONデータを確認する
4. メタデータを確認・編集する

**画面遷移**：
- 遷移元: 配送プロファイル一覧画面、配送プロファイル作成画面
- 遷移先: 配送プロファイル一覧画面（削除後）、メタデータ編集画面

**権限による表示制御**：管理者権限を持つユーザーのみアクセス可能。配送プロファイル管理権限がない場合は表示されない。

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 44 | 配送プロファイル管理 | 主機能 | 配送プロファイル詳細の表示 |

## 画面種別

詳細

## URL/ルーティング

```
/settings/locations/shipping-profiles/:shipping_profile_id
```

## 入出力項目

### URLパラメータ

| 項目名 | 項目ID | データ型 | 必須 | 説明 |
|--------|--------|----------|------|------|
| 配送プロファイルID | shipping_profile_id | string | 必須 | 表示対象の配送プロファイルID |

## 表示項目

### 基本情報セクション

| 項目名 | データソース | 説明 |
|--------|-------------|------|
| 名前 | shipping_profile.name | 配送プロファイルの名称（ヘッダーに表示） |
| タイプ | shipping_profile.type | 配送プロファイルのタイプ |
| アクションメニュー | - | 削除ボタンを含むドロップダウンメニュー |

### JSONセクション

| 項目名 | 説明 |
|--------|------|
| JSONデータ | 配送プロファイルの生データをJSON形式で表示 |

### メタデータセクション

| 項目名 | 説明 |
|--------|------|
| メタデータ | 配送プロファイルに付与されたカスタムメタデータ |

## イベント仕様

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

**トリガー**：アクションメニューから「削除」を選択

**処理フロー**：
1. 確認プロンプトを表示（配送プロファイル名の入力を要求）
2. ユーザーが確認テキストを入力し、削除を確定
3. `useDeleteShippingProfile` フックを使用してAPIを呼び出し
4. 成功時: 成功トーストを表示し、配送プロファイル一覧画面へ遷移
5. 失敗時: エラートーストを表示

### 2-メタデータ編集

**トリガー**：メタデータセクションの編集リンクをクリック

**処理フロー**：
1. メタデータ編集画面（モーダル）を表示
2. 編集内容を保存または破棄

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

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

| 操作（イベント） | 対象テーブル | 操作種別 | 概要 |
|----------------|-------------|---------|------|
| 削除アクション | shipping_profile | DELETE | 配送プロファイルを削除 |

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

#### shipping_profile

| 操作 | 項目（カラム名） | 更新値・取得条件 | 備考 |
|-----|-----------------|-----------------|------|
| DELETE | id | URLパラメータshipping_profile_id | 削除対象の特定 |

## メッセージ仕様

| メッセージID | 種別 | メッセージ内容 | 表示条件 |
|-------------|------|---------------|----------|
| shippingProfile.delete.title | 確認 | 削除確認 | 削除アクション選択時 |
| shippingProfile.delete.description | 確認 | {name}を削除しますか？ | 削除アクション選択時 |
| general.typeToConfirm | 確認 | 確認のため名前を入力してください | 削除確認ダイアログ |
| shippingProfile.delete.successToast | 成功 | {name}を削除しました | 削除成功時 |
| - | エラー | {APIエラーメッセージ} | API呼び出し失敗時 |

## 例外処理

| 例外条件 | 処理内容 |
|---------|---------|
| 配送プロファイル取得失敗 | エラーをthrowし、エラーページを表示 |
| 削除処理失敗 | エラートーストを表示 |
| 配送プロファイルが見つからない | エラーページを表示 |

## 備考

- SingleColumnPageレイアウトを使用
- showMetadata と showJSON オプションが有効
- 拡張ウィジェット（before/after）をサポート
- useLoaderDataでサーバーサイドレンダリング用の初期データを取得
- 配送プロファイルに紐付いている商品がある場合の削除制約については要確認

---

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

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

### 推奨読解順序

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

配送プロファイルのデータ構造を把握する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | HttpTypes | `packages/core/types/src/http/shipping-profile/` | AdminShippingProfile、AdminShippingProfileResponseの型定義 |

**読解のコツ**: 配送プロファイルは `id`, `name`, `type`, `metadata`, `created_at`, `updated_at` などのフィールドを持つ。

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

画面のルートコンポーネントを特定する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | shipping-profile-detail.tsx | `packages/admin/dashboard/src/routes/shipping-profiles/shipping-profile-detail/shipping-profile-detail.tsx` | ルートコンポーネント |

**主要処理フロー**:
1. **12行目**: useParamsでshipping_profile_idを取得
2. **14-16行目**: useLoaderDataで初期データを取得
3. **18-22行目**: useShippingProfileでデータ取得
4. **24行目**: useExtensionでウィジェット拡張機能を取得
5. **26-28行目**: ローディング中はスケルトンを表示
6. **30-32行目**: エラー時はerrorをthrow
7. **34-46行目**: SingleColumnPageレイアウトで詳細を表示

#### Step 3: 詳細セクションを理解する

基本情報セクションの実装を読み解く。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | shipping-profile-general-section.tsx | `packages/admin/dashboard/src/routes/shipping-profiles/shipping-profile-detail/components/shipping-profile-general-section/shipping-profile-general-section.tsx` | 基本情報セクション |

**主要処理フロー**:
- **17-18行目**: useTranslation、usePrompt、useNavigateを取得
- **21行目**: useDeleteShippingProfileフックの取得
- **23-52行目**: handleDeleteで削除処理を実行
- **55-74行目**: Containerで基本情報を表示
- **59-70行目**: ActionMenuで削除アクションを提供
- **73行目**: SectionRowでタイプを表示

#### Step 4: ローダーを理解する

サーバーサイドデータ取得の実装を読み解く。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 4-1 | loader.ts | `packages/admin/dashboard/src/routes/shipping-profiles/shipping-profile-detail/loader.ts` | データローダー |

#### Step 5: APIフックを理解する

データ取得・削除のAPIフック実装を読み解く。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 5-1 | shipping-profiles.tsx | `packages/admin/dashboard/src/hooks/api/shipping-profiles.tsx` | useShippingProfile, useDeleteShippingProfile |

**主要処理フロー**:
- **40-60行目**: useShippingProfileでの詳細取得
- **109-131行目**: useDeleteShippingProfileでの削除処理

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

```
ShippingProfileDetail
    │
    ├─ useParams (URLパラメータ取得)
    │
    ├─ useLoaderData (初期データ取得)
    │
    ├─ useShippingProfile (配送プロファイル詳細取得)
    │      └─ sdk.admin.shippingProfile.retrieve
    │
    ├─ useExtension (ウィジェット拡張)
    │
    └─ SingleColumnPage
           │
           ├─ ShippingProfileGeneralSection
           │      │
           │      ├─ ActionMenu (削除アクション)
           │      │
           │      ├─ useDeleteShippingProfile (削除処理)
           │      │      └─ sdk.admin.shippingProfile.delete
           │      │
           │      └─ SectionRow (タイプ表示)
           │
           ├─ [JSON Section] (showJSON=true)
           │
           └─ [Metadata Section] (showMetadata=true)
```

### データフロー図

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

URLパラメータ              ───▶ useParams                       ───▶ shipping_profile_id
(shipping_profile_id)

shipping_profile_id        ───▶ useShippingProfile              ───▶ shipping_profile
                                (APIコール)

shipping_profile           ───▶ ShippingProfileGeneralSection   ───▶ 基本情報UI
                                (コンポーネント)

削除アクション             ───▶ useDeleteShippingProfile        ───▶ 削除結果
                                (APIコール)
                                ↓
                           ───▶ navigate                        ───▶ 一覧画面へ遷移
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| shipping-profile-detail.tsx | `packages/admin/dashboard/src/routes/shipping-profiles/shipping-profile-detail/` | ソース | ルートコンポーネント |
| shipping-profile-general-section.tsx | `packages/admin/dashboard/src/routes/shipping-profiles/shipping-profile-detail/components/shipping-profile-general-section/` | ソース | 基本情報セクション |
| loader.ts | `packages/admin/dashboard/src/routes/shipping-profiles/shipping-profile-detail/` | ソース | データローダー |
| breadcrumb.tsx | `packages/admin/dashboard/src/routes/shipping-profiles/shipping-profile-detail/` | ソース | パンくずリスト |
| shipping-profiles.tsx | `packages/admin/dashboard/src/hooks/api/` | ソース | APIフック |
| index.ts | `packages/admin/dashboard/src/routes/shipping-profiles/shipping-profile-detail/` | ソース | エクスポート定義 |
