# 画面設計書 106-プロフィール詳細画面

## 概要

本ドキュメントは、Medusa Admin Dashboard におけるプロフィール詳細画面の設計仕様を定義する。

### 本画面の処理概要

プロフィール詳細画面は、ログイン中の管理者ユーザーの個人プロフィール情報を表示する画面である。

**業務上の目的・背景**：管理者は自身のアカウント情報（名前、メールアドレス、言語設定など）を確認・管理する必要がある。この画面により、ログインユーザーが自身のプロフィール情報を一目で確認でき、必要に応じて編集画面へ遷移して情報を更新できる。

**画面へのアクセス方法**：ヘッダーのユーザーアイコンメニューから「プロフィール」を選択、または直接 /settings/profile にアクセスする。

**主要な操作・処理内容**：
1. ログインユーザーの名前、メールアドレス、言語設定の表示
2. 編集画面への遷移

**画面遷移**：
- 遷移元：ヘッダーメニュー、設定画面
- 遷移先：プロフィール編集画面（/settings/profile/edit）

**権限による表示制御**：認証済みの管理者ユーザーのみアクセス可能。自分自身のプロフィールのみ表示される。

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 62 | ユーザーCRUD | 主機能 | ログインユーザーのプロフィール表示 |

## 画面種別

詳細（SingleColumnPage形式）

## URL/ルーティング

- パス: `/settings/profile`

## 入出力項目

本画面は表示専用のため、入力項目は存在しない。

## 表示項目

| 項目名 | データソース | 表示形式 | 備考 |
|--------|-------------|---------|------|
| ヘッダータイトル | 固定値 | テキスト | 「プロフィール」 |
| サブタイトル | 固定値 | テキスト | 「プロフィール詳細を管理」 |
| 名前 | user.first_name + user.last_name | テキスト | 姓名を連結、未設定時は "-" |
| メールアドレス | user.email | テキスト | - |
| 言語 | i18n.language | テキスト | 言語コードを表示名に変換 |

## イベント仕様

### 1-編集ボタン押下

- トリガー：ActionMenuの「編集」をクリック
- 処理内容：プロフィール編集画面へ遷移
- 画面遷移：/settings/profile/edit

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

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

| 操作（イベント） | 対象テーブル | 操作種別 | 概要 |
|----------------|-------------|---------|------|
| 画面表示 | user | SELECT | ログインユーザー情報の取得 |

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

本画面では参照のみのため、更新処理は発生しない。

## メッセージ仕様

本画面ではメッセージ表示は発生しない。

## 例外処理

| 例外条件 | 処理内容 | ユーザーへの通知 |
|---------|---------|----------------|
| ユーザー情報取得失敗 | エラーをスロー | エラー画面表示 |
| ローディング中 | スケルトン表示 | - |

## 備考

- useMeフックを使用してログインユーザー情報を取得
- SingleColumnPage形式でシンプルなレイアウト
- 拡張ポイント（widgets）が設定されており、プラグインによる画面拡張が可能
  - profile.details.before
  - profile.details.after
- 言語表示は i18n の languages 配列から display_name を取得

---

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

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

### 推奨読解順序

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

ユーザーデータの構造を理解する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | users.tsx | `packages/admin/dashboard/src/hooks/api/users.tsx` | 20-39行目のuseMeでログインユーザー情報の取得方法を確認 |

**読解のコツ**: useMeはsdk.admin.user.me()を呼び出し、HttpTypes.AdminUserResponse型のデータを返す。userオブジェクトにはid, email, first_name, last_name等が含まれる。

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

画面全体の構造を確認。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | profile-detail.tsx | `packages/admin/dashboard/src/routes/profile/profile-detail/profile-detail.tsx` | 画面全体の構成、データ取得、条件分岐を確認 |

**主要処理フロー**:
1. **9行目**: useMeでログインユーザーデータを取得
2. **10行目**: useExtensionでウィジェット取得関数を取得
3. **12-14行目**: ローディング状態の処理（スケルトン表示）
4. **16-18行目**: エラー状態の処理
5. **20-28行目**: SingleColumnPageでレイアウト構成、ProfileGeneralSectionをレンダリング

#### Step 3: 表示コンポーネントを理解する

プロフィール情報表示の詳細を確認。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | profile-general-section.tsx | `packages/admin/dashboard/src/routes/profile/profile-detail/components/profile-general-section/profile-general-section.tsx` | プロフィール表示項目とレイアウトを確認 |

**主要処理フロー**:
- **13行目**: i18nから言語情報を取得
- **15行目**: first_nameとlast_nameを連結して名前を生成
- **17-38行目**: Containerでヘッダーとアクションメニューを表示
- **40-47行目**: 名前の表示
- **48-55行目**: メールアドレスの表示
- **56-64行目**: 言語の表示（languagesから表示名を取得）

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

```
ProfileDetail (profile-detail.tsx)
    │
    ├─ useMe (users.tsx)
    │      └─ sdk.admin.user.me
    │
    ├─ useExtension (extension-provider)
    │      └─ getWidgets
    │
    └─ ProfileGeneralSection (profile-general-section.tsx)
           │
           └─ ActionMenu
                  └─ to: "edit" → /settings/profile/edit
```

### データフロー図

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

(認証セッション) ───▶ useMe ───▶ user データ
         │                          │
         │                          ▼
         │              ProfileGeneralSection
         │                          │
         │                          ▼
         │              ┌───────────┴───────────┐
         │              │                       │
         │              ▼                       ▼
         │         名前表示               言語表示
         │         (連結)              (i18n変換)
         │
         ▼
編集ボタン ─────────▶ navigate ───▶ /settings/profile/edit
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| profile-detail.tsx | `packages/admin/dashboard/src/routes/profile/profile-detail/profile-detail.tsx` | ソース | 画面エントリーポイント |
| profile-general-section.tsx | `packages/admin/dashboard/src/routes/profile/profile-detail/components/profile-general-section/profile-general-section.tsx` | ソース | プロフィール表示コンポーネント |
| users.tsx | `packages/admin/dashboard/src/hooks/api/users.tsx` | ソース | ユーザーAPI hooks |
| languages.ts | `packages/admin/dashboard/src/i18n/languages.ts` | ソース | 言語定義 |
| index.ts | `packages/admin/dashboard/src/routes/profile/profile-detail/index.ts` | ソース | エクスポート定義 |
