# 画面設計書 33-グループ詳細画面

## 概要

本ドキュメントはInvenTreeシステムにおけるグループ詳細画面（GroupDetail）の設計仕様を記載したものである。本画面は個別グループの詳細情報と権限設定を表示するための画面である。

### 本画面の処理概要

本画面は特定のユーザーグループの詳細情報を表示する画面である。グループ名の確認と、そのグループに割り当てられた権限（ロール）の一覧を確認できる。RoleTableコンポーネントにより、各リソースに対するView/Change/Add/Delete権限を視覚的に把握できる。

**業務上の目的・背景**：在庫管理システムでは、ユーザーの権限管理が重要である。グループ単位で権限を設定することで、同じ役割を持つユーザーへ一括で適切なアクセス権限を付与できる。本画面は、特定グループにどのような権限が割り当てられているかを一目で確認するために使用され、権限設計のレビューやトラブルシューティングに活用される。

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

**主要な操作・処理内容**：
1. グループ名を確認する
2. グループに割り当てられた権限一覧をRoleTableで確認する
3. 各リソース（部品、在庫、発注など）に対するCRUD権限を確認する

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

**権限による表示制御**：本画面はログイン済みユーザーであればアクセス可能。権限情報は表示専用であり、編集はシステム概要画面のGroupDrawerまたは管理センター画面で行う。

## 関連機能

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

## 画面種別

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

## URL/ルーティング

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

## 入出力項目

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

## 表示項目

### グループ詳細セクション（Group Details）

| 項目名 | 表示名 | データ型 | コピー | 説明 |
|--------|--------|----------|--------|------|
| name | Group Name | string | 可 | グループ名 |

### グループ権限セクション（Group Roles）

RoleTableコンポーネントにより以下の権限を表示する。

| 項目名 | 表示名 | データ型 | 説明 |
|--------|--------|----------|------|
| label | Role | string | 権限ロール名（部品、在庫、発注等） |
| can_view | View | boolean | 参照権限 |
| can_change | Change | boolean | 更新権限 |
| can_add | Add | boolean | 追加権限 |
| can_delete | Delete | boolean | 削除権限 |

### 権限ロール一覧（RuleSet）

以下のリソースに対する権限が表示される（InvenTree標準ロール）：

| ロール名（name） | 表示名（label） |
|-----------------|----------------|
| admin | Admin |
| part | Part |
| part_category | Part Category |
| stock | Stock |
| stock_location | Stock Location |
| build | Build Order |
| purchase_order | Purchase Order |
| sales_order | Sales Order |
| return_order | Return Order |

## イベント仕様

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

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

**処理内容**：
- URLパラメータからグループID（pk）を取得
- `GET /api/user/group/{id}/`でグループ詳細を取得（permission_detail=true, role_detail=true, user_detail=trueパラメータ付き）
- データ取得中はSkeletonを表示
- 取得完了後、詳細情報とRoleTableを展開

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

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

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

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

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

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

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

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

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

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

#### auth_group

| 操作 | 項目（カラム名） | 更新値・取得条件 | 備考 |
|-----|-----------------|-----------------|------|
| SELECT | pk, name | pk指定 | - |

#### users_ruleset

| 操作 | 項目（カラム名） | 更新値・取得条件 | 備考 |
|-----|-----------------|-----------------|------|
| SELECT | pk, group, name, label, can_view, can_add, can_change, can_delete | group=指定グループID | role_detail=trueで取得 |

## メッセージ仕様

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

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

## 例外処理

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

## 備考

- 本画面のRoleTableは表示専用（editable=false）
- グループ権限の編集は、システム概要画面のGroupDrawerまたは管理センター画面のGroupDrawer（editable=true）で行う
- RoleTableはロール名でアルファベット順にソートして表示される
- グループメンバー（所属ユーザー）の一覧表示は現時点で未実装

---

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

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

### 推奨読解順序

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

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

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | GroupTable.tsx | `src/frontend/src/tables/settings/GroupTable.tsx` | GroupDetailI インターフェース（33-36行目）でグループ基本構造 |
| 1-2 | RoleTable.tsx | `src/frontend/src/components/items/RoleTable.tsx` | RuleSet インターフェース（19-29行目）で権限データ構造 |

**読解のコツ**: RuleSetインターフェースが権限テーブルの各行データを表す

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

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

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

**主要処理フロー**:
1. **27行目**: useParams()でURLからidを取得
2. **29-32行目**: useInstance()でグループ詳細をAPIから取得
3. **34-61行目**: detailsPanelのuseMemoでDetailsTableとRoleTableを構築
4. **39行目**: instance.rolesから権限配列を抽出
5. **63-72行目**: groupPanelsの定義（詳細タブ）
6. **74-98行目**: InstanceDetailとPanelGroupで画面構築

#### Step 3: 権限テーブルコンポーネントを理解する

RoleTableの実装を確認する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | RoleTable.tsx | `src/frontend/src/components/items/RoleTable.tsx` | RoleTable関数コンポーネント（31-232行目） |

**主要処理フロー**:
- **38行目**: rulesets状態管理
- **47-49行目**: sortedRulesetsでラベル順ソート
- **127-231行目**: Table.Thead/Tbodyで権限一覧表示
- **170-173行目**: Checkbox表示（disabled=!editable）

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

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

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

**主要処理フロー**:
- **78行目**: titleにグループ名を表示
- **80-83行目**: breadcrumbsでパンくずリスト定義
- **84-86行目**: lastCrumbで現在ページのパンくず

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

```
GroupDetail
    │
    ├─ useParams() ─── URLからid取得
    │
    ├─ useInstance({
    │      endpoint: ApiEndpoints.group_list,
    │      pk: id,
    │      params: {permission_detail, role_detail, user_detail}
    │  })
    │      └─ GET /api/user/group/{id}/ ─── グループ詳細取得
    │
    ├─ useMemo(detailsPanel)
    │      │
    │      ├─ roles = instance.roles ?? []
    │      │
    │      ├─ ItemDetailsGrid
    │      │      ├─ DetailsTable(tl, instance, 'Group Details')
    │      │      └─ Paper
    │      │             └─ RoleTable(roles, editable=false)
    │      │
    │      └─ (表示のみ、編集なし)
    │
    └─ InstanceDetail
           └─ PageDetail
                  └─ PanelGroup(groupPanels)
                         └─ detailsPanel
```

### データフロー図

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

URL /core/group/:id/ ───▶ useParams()              ───▶ id取得
                           │
                           ▼
                     useInstance(group_list, id)
                     + params: {
                         permission_detail: true,
                         role_detail: true,
                         user_detail: true
                       }
                           │
                           ▼
API Response         ───▶ instance                 ───▶ グループデータ
  {name, roles: [...]}     │
                           ▼
                     useMemo(detailsPanel)
                           │
                           ├─ tl: Group Details     ───▶ グループ名表示
                           │
                           └─ RoleTable(roles)
                                  │
                                  ├─ sortedRulesets ───▶ ラベル順ソート
                                  │
                                  └─ Table          ───▶ 権限一覧表示
                                         ├─ Role
                                         ├─ View (Checkbox)
                                         ├─ Change (Checkbox)
                                         ├─ Add (Checkbox)
                                         └─ Delete (Checkbox)
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| GroupDetail.tsx | `src/frontend/src/pages/core/GroupDetail.tsx` | ソース | メインページコンポーネント |
| router.tsx | `src/frontend/src/router.tsx` | ソース | ルーティング定義（203行目） |
| RoleTable.tsx | `src/frontend/src/components/items/RoleTable.tsx` | ソース | 権限テーブルコンポーネント |
| GroupTable.tsx | `src/frontend/src/tables/settings/GroupTable.tsx` | ソース | GroupDetailI型定義 |
| 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取得カスタムフック |
| StylishText.tsx | `src/frontend/src/components/items/StylishText.tsx` | ソース | スタイル付きテキスト |
| ApiEndpoints.ts | `src/frontend/lib/enums/ApiEndpoints.ts` | ソース | APIエンドポイント定義 |
| ModelType.ts | `src/frontend/lib/enums/ModelType.ts` | ソース | モデルタイプ列挙型 |
