# 画面設計書 32-ユーザー詳細画面

## 概要

本ドキュメントはInvenTreeシステムにおけるユーザー詳細画面（UserDetail）の設計仕様を記載したものである。本画面は個別ユーザーの詳細情報を表示し、ユーザープロファイルの確認を行うための画面である。

### 本画面の処理概要

本画面は特定のユーザーアカウントの詳細情報を表示する画面である。ユーザー名、メールアドレス、権限情報、所属グループ、プロファイル情報など、ユーザーに関する包括的な情報を一画面で確認できる。

**業務上の目的・背景**：組織内のユーザー情報を詳細に確認する必要がある場面は多い。例えば、特定ユーザーの権限レベルの確認、連絡先情報の参照、所属グループの確認などである。本画面は、システム概要画面のユーザー一覧から個別ユーザーの詳細を確認するための遷移先として機能し、ユーザー管理業務の効率化に寄与する。

**画面へのアクセス方法**：システム概要画面（CoreIndex）のユーザー一覧から特定ユーザーの「Open Profile」アクションをクリック、または直接URLパス `/core/user/{id}/` でアクセスする。パンくずリストから「System Overview」「Users」の階層でナビゲーション可能。

**主要な操作・処理内容**：
1. ユーザー基本情報（ユーザー名、名、姓、メールアドレス）を確認する
2. ユーザー権限情報（アクティブ、スタッフ、スーパーユーザー）を確認する
3. 所属グループ一覧をバッジ形式で確認する
4. プロファイル情報（表示名、役職、連絡先、所属組織、ステータス、所在地）を確認する

**画面遷移**：
- 遷移元：システム概要画面（ユーザー一覧のOpen Profile）、管理センター画面
- 遷移先：システム概要画面（パンくずリストから）、ユーザー一覧画面

**権限による表示制御**：本画面はログイン済みユーザーであればアクセス可能。プロファイル情報セクションは、グローバル設定`DISPLAY_PROFILE_INFO`が有効かつプロファイル情報が存在する場合のみ表示される。

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 32 | ユーザーアカウント管理 | 主機能 | ユーザー詳細情報の表示・編集 |
| 35 | 権限・ロール管理 | 補助機能 | ユーザー権限の表示 |

## 画面種別

詳細画面（パネルグループ形式）

## URL/ルーティング

| パス | 説明 |
|------|------|
| `/core/user/:id/` | ユーザー詳細画面（id=ユーザーPK） |
| `/core/user/:id/*` | サブパネル対応 |

## 入出力項目

本画面は表示専用であり、ユーザー入力項目はない。

## 表示項目

### ユーザー情報セクション（User Information）

| 項目名 | 表示名 | データ型 | コピー | 説明 |
|--------|--------|----------|--------|------|
| username | Username | string | 可 | ユーザー名（ログインID） |
| first_name | First Name | string | 可 | 名（存在する場合のみ表示） |
| last_name | Last Name | string | 可 | 姓（存在する場合のみ表示） |
| email | Email | string | 可 | メールアドレス（存在する場合のみ表示） |

### ユーザー権限セクション（User Permissions）

| 項目名 | 表示名 | データ型 | 説明 |
|--------|--------|----------|------|
| is_active | Active | boolean | アクティブ状態 |
| is_staff | Staff | boolean | スタッフ権限 |
| is_superuser | Superuser | boolean | スーパーユーザー権限 |
| groups | Groups | array | 所属グループ一覧（バッジ表示） |

### ユーザープロファイルセクション（User Profile）

※ `DISPLAY_PROFILE_INFO`設定が有効かつ情報が存在する場合のみ表示

| 項目名 | 表示名 | データ型 | コピー | 説明 |
|--------|--------|----------|--------|------|
| displayname | Display Name | string | 可 | 表示名 |
| position | Position | string | - | 役職 |
| contact | Contact | string | 可 | 連絡先 |
| organisation | Organisation | string | 可 | 所属組織 |
| status | Status | string | - | ステータス |
| location | Location | string | 可 | 所在地 |

### ページヘッダーバッジ

| バッジ | 条件 | 色 |
|--------|------|-----|
| Staff | is_staff=true | blue |
| Superuser | is_superuser=true | red |
| Basic user | is_staff=false かつ is_superuser=false | yellow |
| Active | is_active=true | green |
| Inactive | is_active=false | red |

## イベント仕様

### 1-ページ読み込み

**トリガー**：画面アクセス時

**処理内容**：
- URLパラメータからユーザーID（pk）を取得
- `GET /api/user/{id}/`でユーザー詳細を取得
- データ取得中はSkeletonを表示
- 取得完了後、詳細情報を各セクションに展開

### 2-パンくずリストクリック

**トリガー**：パンくずリストの項目をクリック

**処理内容**：
- 「System Overview」クリック → `/core/` へ遷移
- 「Users」クリック → `/core/index/users/` へ遷移

### 3-詳細タブクリック

**トリガー**：「User Details」タブをクリック

**処理内容**：詳細パネルの表示（現在は詳細タブのみ実装）

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

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

| 操作（イベント） | 対象テーブル | 操作種別 | 概要 |
|----------------|-------------|---------|------|
| ページ読み込み | auth_user | SELECT | ユーザー詳細情報の取得 |
| ページ読み込み | auth_group | SELECT | ユーザー所属グループの取得 |

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

#### auth_user

| 操作 | 項目（カラム名） | 更新値・取得条件 | 備考 |
|-----|-----------------|-----------------|------|
| SELECT | pk, username, email, first_name, last_name, is_active, is_staff, is_superuser | pk指定 | - |
| SELECT | displayname, position, contact, organisation, status, location | pk指定 | プロファイル拡張フィールド |

#### auth_group (via auth_user_groups)

| 操作 | 項目（カラム名） | 更新値・取得条件 | 備考 |
|-----|-----------------|-----------------|------|
| SELECT | pk, name | user_id経由で関連グループ取得 | groups配列として返却 |

## メッセージ仕様

本画面は表示専用のため、ユーザー操作による成功・エラーメッセージは発生しない。

| 種別 | メッセージ | 表示条件 |
|------|-----------|----------|
| - | - | - |

## 例外処理

| 例外状況 | 表示内容 | 対応処理 |
|---------|---------|---------|
| データ取得中 | Skeleton | ローディング表示 |
| ユーザーが存在しない | （InstanceDetailの既定動作） | 404相当の表示 |
| API通信エラー | （InstanceDetailの既定動作） | エラー表示 |

## 備考

- 本画面は表示専用であり、ユーザー情報の編集は行えない
- ユーザー情報の編集は、管理センター画面（AdminCenter）のUserManagementPanelまたはシステム概要画面のUserDrawerで行う
- プロファイル情報はInvenTreeの拡張フィールドであり、Django標準のauth_userには含まれない
- グループ情報はバッジ形式で表示され、グループ詳細へのリンクは現時点で未実装
- ユーザー画像（image）がある場合はページヘッダーに表示される

---

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

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

### 推奨読解順序

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

まず、画面で扱うデータの型定義を理解する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | UserDetail.tsx | `src/frontend/src/pages/core/UserDetail.tsx` | instanceの構造（32-35行目のuseInstanceで取得） |
| 1-2 | UserTable.tsx | `src/frontend/src/tables/settings/UserTable.tsx` | UserDetailI インターフェース（50-60行目）で型定義参照 |

**読解のコツ**: useInstanceフックの戻り値`instance`がAPIレスポンスをそのまま保持している

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

処理の起点となるページコンポーネントを特定する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | UserDetail.tsx | `src/frontend/src/pages/core/UserDetail.tsx` | メインコンポーネント全体（26-243行目） |

**主要処理フロー**:
1. **27行目**: useParams()でURLからidを取得
2. **29行目**: useUserState()で現在のユーザー状態取得
3. **30行目**: useGlobalSettingsState()でグローバル設定取得
4. **32-35行目**: useInstance()でユーザー詳細をAPIから取得
5. **37行目**: userGroupsをinstance.groupsから抽出
6. **39-182行目**: detailsPanelのuseMemoで詳細表示UIを構築
7. **184-193行目**: userPanelsの定義（詳細タブ）
8. **195-214行目**: userBadgesの定義（ステータスバッジ）
9. **216-242行目**: InstanceDetailとPanelGroupで画面構築

#### Step 3: 詳細表示フィールドを理解する

DetailsTable用のフィールド定義を確認する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | UserDetail.tsx | `src/frontend/src/pages/core/UserDetail.tsx` | tl配列（44-75行目）でUser Information定義 |
| 3-2 | UserDetail.tsx | `src/frontend/src/pages/core/UserDetail.tsx` | tr配列（77-113行目）でUser Permissions定義 |
| 3-3 | UserDetail.tsx | `src/frontend/src/pages/core/UserDetail.tsx` | br配列（115-163行目）でUser Profile定義 |

**主要処理フロー**:
- **44-75行目**: 左上セクション（ユーザー情報）のフィールド定義
- **77-113行目**: 右上セクション（権限情報）のフィールド定義、グループはBadge表示
- **115-163行目**: 下部セクション（プロファイル）のフィールド定義
- **165-171行目**: hasProfileフラグでプロファイルセクション表示判定
- **177-179行目**: DISPLAY_PROFILE_INFO設定との組み合わせで表示制御

#### Step 4: ページヘッダーとナビゲーションを理解する

PageDetailコンポーネントの使用方法を確認する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 4-1 | UserDetail.tsx | `src/frontend/src/pages/core/UserDetail.tsx` | PageDetail使用箇所（219-231行目） |

**主要処理フロー**:
- **220行目**: titleにユーザー名を表示
- **221行目**: imageUrlにユーザー画像を設定
- **222行目**: badgesにステータスバッジを設定
- **223-227行目**: breadcrumbsでパンくずリスト定義
- **228-230行目**: lastCrumbで現在ページのパンくず

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

```
UserDetail
    │
    ├─ useParams() ─── URLからid取得
    │
    ├─ useUserState() ─── ユーザー認証状態
    │
    ├─ useGlobalSettingsState() ─── グローバル設定
    │      └─ isSet('DISPLAY_PROFILE_INFO')
    │
    ├─ useInstance({endpoint: ApiEndpoints.user_list, pk: id})
    │      └─ GET /api/user/{id}/ ─── ユーザー詳細取得
    │
    ├─ useMemo(detailsPanel)
    │      ├─ DetailsTable(tl, instance, 'User Information')
    │      ├─ DetailsTable(tr, instance, 'User Permissions')
    │      └─ DetailsTable(br, instance, 'User Profile') ※条件付き
    │
    ├─ useMemo(userBadges)
    │      └─ Badge[] ─── Staff/Superuser/Basic user/Active/Inactive
    │
    └─ InstanceDetail
           └─ PageDetail
                  └─ PanelGroup(userPanels)
                         └─ detailsPanel
```

### データフロー図

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

URL /core/user/:id/  ───▶ useParams()              ───▶ id取得
                           │
                           ▼
                     useInstance(user_list, id)
                           │
                           ▼
API Response         ───▶ instance                 ───▶ ユーザーデータ
  {username, email,        │
   first_name, ...}        │
                           ▼
                     useMemo(detailsPanel)
                           │
                           ├─ tl: User Information  ───▶ 左上セクション
                           ├─ tr: User Permissions  ───▶ 右上セクション
                           └─ br: User Profile      ───▶ 下部セクション
                                                          (条件付き)

instance.groups      ───▶ userGroups               ───▶ グループバッジ配列
                           │
                           ▼
                     Badge mapping                 ───▶ <Badge>{name}</Badge>

instance.is_*        ───▶ useMemo(userBadges)      ───▶ ステータスバッジ配列
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| UserDetail.tsx | `src/frontend/src/pages/core/UserDetail.tsx` | ソース | メインページコンポーネント |
| router.tsx | `src/frontend/src/router.tsx` | ソース | ルーティング定義（202行目） |
| Details.tsx | `src/frontend/src/components/details/Details.tsx` | ソース | DetailsField型定義、DetailsTableコンポーネント |
| ItemDetails.tsx | `src/frontend/src/components/details/ItemDetails.tsx` | ソース | ItemDetailsGridコンポーネント |
| InstanceDetail.tsx | `src/frontend/src/components/nav/InstanceDetail.tsx` | ソース | インスタンス詳細ラッパー |
| PageDetail.tsx | `src/frontend/src/components/nav/PageDetail.tsx` | ソース | ページヘッダーコンポーネント |
| PanelGroup.tsx | `src/frontend/src/components/panels/PanelGroup.tsx` | ソース | タブパネル管理 |
| UseInstance.ts | `src/frontend/src/hooks/UseInstance.ts` | ソース | API取得カスタムフック |
| SettingsStates.ts | `src/frontend/src/states/SettingsStates.ts` | ソース | グローバル設定状態管理 |
| UserState.ts | `src/frontend/src/states/UserState.ts` | ソース | ユーザー状態管理 |
| ApiEndpoints.ts | `src/frontend/lib/enums/ApiEndpoints.ts` | ソース | APIエンドポイント定義 |
| ModelType.ts | `src/frontend/lib/enums/ModelType.ts` | ソース | モデルタイプ列挙型 |
