# 画面設計書 34-管理センター画面

## 概要

本ドキュメントはInvenTreeシステムにおける管理センター画面（AdminCenter）の設計仕様を記載したものである。本画面はシステム管理者向けの集中管理インターフェースであり、ユーザー管理、メール設定、バックグラウンドタスク、通貨管理、テンプレート管理、プラグイン管理など、システム運用に必要な各種管理機能を提供する。

### 本画面の処理概要

本画面はスタッフ権限を持つユーザーが、InvenTreeシステム全体の管理・運用タスクを実行するための中央管理画面である。複数のパネルがグループ化されて配置されており、用途に応じて適切な管理機能にアクセスできる。

**業務上の目的・背景**：在庫管理システムの運用には、ユーザーアカウント管理、バックグラウンドジョブの監視、通貨・為替の設定、レポート/ラベルテンプレートの管理、プラグインの設定など多岐にわたる管理作業が必要となる。本画面は従来Djangoバックエンド管理画面で行っていた作業を、新しいReact UIに統合することで、管理者の操作効率を向上させ、一貫したユーザー体験を提供する。

**画面へのアクセス方法**：ログイン後、ナビゲーションメニューから「設定」→「管理センター」を選択、またはURL `/settings/admin/` に直接アクセス。設定インデックスからは自動的にadminへリダイレクトされる。

**主要な操作・処理内容**：
1. ホームパネルでシステムステータスとクイックアクションを確認する
2. ユーザー/アクセスパネルでユーザー・グループ・トークンを管理する
3. メール設定パネルでメール送信設定を確認・管理する
4. データインポート/エクスポートパネルでバルクデータ操作を行う
5. バックグラウンドタスクパネルで非同期ジョブを監視する
6. 通貨パネルで通貨と為替レートを管理する
7. テンプレートパネルでラベル/レポートテンプレートを管理する
8. プラグイン/マシンパネルで拡張機能を管理する

**画面遷移**：
- 遷移元：ホーム画面、ナビゲーションメニュー
- 遷移先：システム概要画面（ユーザー管理から）、各種詳細画面

**権限による表示制御**：本画面はスタッフ権限（is_staff=true）を持つユーザーのみアクセス可能。非スタッフユーザーには「PermissionDenied」が表示される。一部パネルは追加の権限チェックが行われる（例：メール設定はスーパーユーザーのみ、プラグインはadminロールの参照権限が必要）。

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 32 | ユーザーアカウント管理 | 補助機能 | ユーザー/アクセス管理パネル |
| 44 | 通知設定管理 | 補助機能 | メール設定パネル |
| 49 | 通貨・為替管理 | 補助機能 | 通貨管理パネル |
| 50 | 単位変換管理 | 補助機能 | カスタム単位パネル |
| 27 | レポートテンプレート管理 | 補助機能 | レポートテンプレート管理パネル |
| 28 | ラベルテンプレート管理 | 補助機能 | ラベルテンプレート管理パネル |
| 30 | プラグイン設定管理 | 補助機能 | プラグイン管理パネル |
| 43 | マシン設定管理 | 補助機能 | マシン設定パネル |
| 39 | データインポート | 補助機能 | データインポートセッション管理 |
| 40 | データエクスポート | 補助機能 | データエクスポートセッション管理 |
| 38 | プロジェクトコード管理 | 補助機能 | プロジェクトコード設定パネル |
| 4 | 部品パラメータ管理 | 補助機能 | パラメータテンプレート管理パネル |

## 画面種別

管理画面（グループ化されたパネル構成）

## URL/ルーティング

| パス | 説明 |
|------|------|
| `/settings/` | 設定インデックス（`/settings/admin/`へリダイレクト） |
| `/settings/admin/` | 管理センター画面（デフォルトパネル） |
| `/settings/admin/{panel}` | 特定パネルを選択した状態 |

## 入出力項目

各パネルで異なる入出力項目を持つ。主要なものを以下に示す。

### ユーザー管理パネル入力項目

UserManagementPanel内のUserTable、GroupTable、ApiTokenTableを参照。

### プロジェクトコード設定

| 項目名 | 入出力 | データ型 | 説明 |
|--------|--------|----------|------|
| PROJECT_CODES_ENABLED | 入力 | boolean | プロジェクトコード機能の有効/無効 |

## 表示項目

### パネルグループ構成

| グループID | グループ名 | 含まれるパネル |
|-----------|-----------|---------------|
| home | （ラベルなし） | home |
| ops | Operations | user, barcode-history, background, errors, currencies, email |
| data | Data Management | import, export, project-codes, custom-states, custom-units |
| reporting | Reporting | labels, reports |
| plm | PLM | parameters, category-parameters, location-types |
| extend | Extend / Integrate | plugin, machine |

### パネル一覧

| パネル名 | ラベル | アイコン | 権限条件 | コンテンツ |
|---------|--------|---------|---------|-----------|
| home | Home | IconHome | なし | HomePanel |
| user | Users / Access | IconUsersGroup | admin参照権限 | UserManagementPanel |
| email | Email Settings | IconMail | スーパーユーザー | EmailManagementPanel |
| import | Data Import | IconFileUpload | なし | ImportSessionTable |
| export | Data Export | IconFileDownload | なし | ExportSessionTable |
| barcode-history | Barcode Scans | IconQrcode | なし | BarcodeScanHistoryTable |
| background | Background Tasks | IconCpu | なし | TaskManagementPanel |
| errors | Error Reports | IconExclamationCircle | なし | ErrorReportTable |
| currencies | Currencies | IconCoins | なし | CurrencyManagementPanel |
| project-codes | Project Codes | IconListDetails | なし | ProjectCodeTable + 設定 |
| custom-states | Custom States | IconListDetails | なし | CustomStateTable |
| custom-units | Custom Units | IconScale | なし | UnitManagementPanel |
| parameters | Parameters | IconList | part参照権限 | ParameterPanel |
| category-parameters | Category Parameters | IconSitemap | part_category参照権限 | PartCategoryTemplateTable |
| labels | Label Templates | IconTags | なし | LabelTemplatePanel |
| reports | Report Templates | IconReport | なし | ReportTemplatePanel |
| location-types | Location Types | IconPackages | stock_location参照権限 | LocationTypesTable |
| plugin | Plugins | IconPlugConnected | admin参照権限 | PluginManagementPanel |
| machine | Machines | IconDevicesPc | admin参照権限 | MachineManagementPanel |

## イベント仕様

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

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

**処理内容**：
- useUserState()でユーザー認証状態を確認
- スタッフ権限チェック（isStaff()）
- 権限がない場合はPermissionDeniedを表示
- 権限がある場合はパネル一覧をレンダリング

### 2-パネル選択

**トリガー**：サイドバーまたはタブからパネルを選択

**処理内容**：
- URLが更新される（`/settings/admin/{panel}/`）
- 選択されたパネルのコンテンツがロードされる
- 遅延ロード（Lazy loading）によりパネルコンポーネントが動的に読み込まれる

### 3-クイックアクション実行（HomePanel）

**トリガー**：HomePanelのクイックアクションボタンをクリック

**処理内容**：QuickActionコンポーネントにより各種管理操作を実行

### 4-ユーザー追加（UserManagementPanel）

**トリガー**：UserManagementPanel内のUserTableで「Add user」ボタンをクリック

**処理内容**：新規ユーザー作成モーダルを表示、フォーム送信でユーザー作成

### 5-グループ追加（UserManagementPanel）

**トリガー**：UserManagementPanel内のGroupTableで「Add group」ボタンをクリック

**処理内容**：新規グループ作成モーダルを表示、フォーム送信でグループ作成

### 6-プロジェクトコード設定変更

**トリガー**：Project Codesパネルで`PROJECT_CODES_ENABLED`設定を変更

**処理内容**：グローバル設定APIを呼び出して設定を更新

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

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

本画面は多数のパネルから構成されるため、主要な操作のみ記載する。

| 操作（イベント） | 対象テーブル | 操作種別 | 概要 |
|----------------|-------------|---------|------|
| ユーザー一覧表示 | auth_user | SELECT | 登録済みユーザーの取得 |
| グループ一覧表示 | auth_group | SELECT | 登録済みグループの取得 |
| APIトークン一覧表示 | users_apitoken | SELECT | APIトークンの取得 |
| エラーレポート一覧表示 | common_error | SELECT | エラーログの取得 |
| バックグラウンドタスク表示 | - | SELECT | Djangoタスクキューの取得 |
| 通貨一覧表示 | common_currency | SELECT | 通貨マスタの取得 |
| プロジェクトコード一覧表示 | common_projectcode | SELECT | プロジェクトコードの取得 |
| ラベルテンプレート一覧表示 | label_labeltemplate | SELECT | ラベルテンプレートの取得 |
| レポートテンプレート一覧表示 | report_reporttemplate | SELECT | レポートテンプレートの取得 |
| プラグイン一覧表示 | plugin_pluginconfig | SELECT | プラグイン設定の取得 |
| グローバル設定更新 | common_inventreesetting | UPDATE | システム設定の更新 |

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

#### common_inventreesetting（グローバル設定）

| 操作 | 項目（カラム名） | 更新値・取得条件 | 備考 |
|-----|-----------------|-----------------|------|
| UPDATE | value | フォーム入力値 | key=設定キー名で指定 |

## メッセージ仕様

各パネルで独自のメッセージを持つ。代表的なものを記載する。

| 種別 | メッセージ | 表示条件 |
|------|-----------|----------|
| 情報 | Admin Center Information（アラート） | ホームパネル初回表示時 |
| 情報 | The admin center provides a centralized location... | アラート詳細説明 |
| 成功 | User deleted | ユーザー削除成功時 |
| 成功 | Group deleted | グループ削除成功時 |
| 成功 | Setting updated | 設定更新成功時 |
| エラー | （各APIエラー固有） | API呼び出し失敗時 |

## 例外処理

| 例外状況 | 表示内容 | 対応処理 |
|---------|---------|---------|
| 非スタッフユーザー | PermissionDeniedコンポーネント | アクセス拒否表示 |
| パネルロードエラー | Loadableのフォールバック | ローディング表示 |
| API通信エラー | 各テーブル/パネル固有のエラー表示 | エラーメッセージ表示 |

## 備考

- 本画面はInvenTree 1.0以降の新機能であり、従来のDjango管理画面を置き換えることを目的としている
- ホームパネルには情報アラートが表示され、閉じることができる（セッション中のみ非表示）
- 各パネルは遅延ロード（Lazy loading）されるため、初回アクセス時にロード時間が発生する
- パネルの表示/非表示は、ユーザーの権限に応じて動的に制御される
- collapsible=trueによりパネルグループは折りたたみ可能

---

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

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

### 推奨読解順序

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

まず、パネル定義の型構造を理解する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | Panel.tsx | `src/frontend/src/components/panels/Panel.tsx` | PanelType, PanelGroupType インターフェース定義 |

**読解のコツ**: PanelTypeのhiddenプロパティが権限による表示制御に使用される

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

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

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | Index.tsx | `src/frontend/src/pages/Index/Settings/AdminCenter/Index.tsx` | メインコンポーネント全体（108-315行目） |

**主要処理フロー**:
1. **109行目**: useUserState()でユーザー認証状態を取得
2. **111-241行目**: adminCenterPanelsのuseMemoで全パネル定義
3. **242-289行目**: groupingのuseMemoでパネルグループ定義
4. **291-314行目**: レンダリング（スタッフ判定、SettingsHeader、PanelGroup）
5. **294行目**: user.isStaff()によるアクセス制御

#### Step 3: 各パネルコンポーネントを理解する

主要なパネルの実装を確認する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | HomePanel.tsx | `src/frontend/src/pages/Index/Settings/AdminCenter/HomePanel.tsx` | ホームパネル（クイックアクション、システムステータス） |
| 3-2 | UserManagementPanel.tsx | `src/frontend/src/pages/Index/Settings/AdminCenter/UserManagementPanel.tsx` | ユーザー管理パネル（User/Group/Token管理） |

**主要処理フロー**:
- **HomePanel.tsx 28-40行目**: システムステータスアラートの取得
- **HomePanel.tsx 77-117行目**: アコーディオンでQuick ActionsとSystem Status表示
- **UserManagementPanel.tsx 12-48行目**: Users/Groups/Tokens/Settingsのアコーディオン

#### Step 4: 遅延ロードの仕組みを理解する

Loadable関数による遅延ロードを確認する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 4-1 | Index.tsx | `src/frontend/src/pages/Index/Settings/AdminCenter/Index.tsx` | Loadable使用箇所（38-106行目） |

**主要処理フロー**:
- **38-40行目**: ReportTemplatePanel遅延ロード定義
- **42行目**: LabelTemplatePanel遅延ロード定義
- 各パネルはlazy(() => import(...))で動的インポート

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

```
AdminCenter (Index.tsx)
    │
    ├─ useUserState() ─── ユーザー認証状態確認
    │      └─ isStaff() ─── スタッフ権限チェック
    │
    ├─ useMemo(adminCenterPanels)
    │      │
    │      ├─ HomePanel (Loadable)
    │      │      ├─ QuickAction
    │      │      └─ ServerAlert
    │      │
    │      ├─ UserManagementPanel (Loadable, hidden: !hasViewRole(admin))
    │      │      ├─ UserTable
    │      │      ├─ GroupTable
    │      │      ├─ ApiTokenTable
    │      │      └─ GlobalSettingList
    │      │
    │      ├─ EmailManagementPanel (Loadable, hidden: !isSuperuser())
    │      │
    │      ├─ ImportSessionTable (Loadable)
    │      ├─ ExportSessionTable (Loadable)
    │      ├─ BarcodeScanHistoryTable (Loadable)
    │      ├─ TaskManagementPanel (Loadable)
    │      ├─ ErrorReportTable (Loadable)
    │      ├─ CurrencyManagementPanel (Loadable)
    │      ├─ ProjectCodeTable + GlobalSettingList
    │      ├─ CustomStateTable (Loadable)
    │      ├─ UnitManagementPanel (Loadable)
    │      ├─ ParameterPanel (Loadable, hidden: !hasViewRole(part))
    │      ├─ PartCategoryTemplateTable (Loadable, hidden: !hasViewRole(part_category))
    │      ├─ LabelTemplatePanel (Loadable)
    │      ├─ ReportTemplatePanel (Loadable)
    │      ├─ LocationTypesTable (Loadable, hidden: !hasViewRole(stock_location))
    │      ├─ PluginManagementPanel (Loadable, hidden: !hasViewRole(admin))
    │      └─ MachineManagementPanel (Loadable, hidden: !hasViewRole(admin))
    │
    ├─ useMemo(grouping)
    │      └─ PanelGroupType[] ─── パネルグループ定義
    │
    ├─ PageTitle ─── ブラウザタイトル設定
    ├─ SettingsHeader ─── 画面ヘッダー
    └─ PanelGroup
           └─ (各パネルコンテンツ)
```

### データフロー図

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

ログイン状態    ───▶ useUserState()           ───▶ 認証チェック結果
                      │
                      ├─ isStaff() = false     ───▶ PermissionDenied
                      │
                      └─ isStaff() = true      ───▶ 管理画面表示
                            │
                            ▼
                     useMemo(adminCenterPanels)
                            │
                            ├─ hasViewRole(admin)   ───▶ user, plugin, machine表示制御
                            ├─ isSuperuser()        ───▶ email表示制御
                            ├─ hasViewRole(part)    ───▶ parameters表示制御
                            └─ 他の権限チェック     ───▶ 各パネル表示制御

パネル選択      ───▶ PanelGroup               ───▶ URL更新
                      │                              + パネルコンテンツロード
                      ▼
                Loadable(lazy(() => import(...)))
                      │
                      ▼
パネルコンポーネント ───▶ 各パネル固有の処理    ───▶ テーブル/フォーム表示
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| Index.tsx | `src/frontend/src/pages/Index/Settings/AdminCenter/Index.tsx` | ソース | メインページコンポーネント |
| HomePanel.tsx | `src/frontend/src/pages/Index/Settings/AdminCenter/HomePanel.tsx` | ソース | ホームパネル |
| UserManagementPanel.tsx | `src/frontend/src/pages/Index/Settings/AdminCenter/UserManagementPanel.tsx` | ソース | ユーザー管理パネル |
| EmailManagementPanel.tsx | `src/frontend/src/pages/Index/Settings/AdminCenter/EmailManagementPanel.tsx` | ソース | メール設定パネル |
| TaskManagementPanel.tsx | `src/frontend/src/pages/Index/Settings/AdminCenter/TaskManagementPanel.tsx` | ソース | タスク管理パネル |
| CurrencyManagementPanel.tsx | `src/frontend/src/pages/Index/Settings/AdminCenter/CurrencyManagementPanel.tsx` | ソース | 通貨管理パネル |
| UnitManagementPanel.tsx | `src/frontend/src/pages/Index/Settings/AdminCenter/UnitManagementPanel.tsx` | ソース | 単位管理パネル |
| PluginManagementPanel.tsx | `src/frontend/src/pages/Index/Settings/AdminCenter/PluginManagementPanel.tsx` | ソース | プラグイン管理パネル |
| MachineManagementPanel.tsx | `src/frontend/src/pages/Index/Settings/AdminCenter/MachineManagementPanel.tsx` | ソース | マシン管理パネル |
| ParameterPanel.tsx | `src/frontend/src/pages/Index/Settings/AdminCenter/ParameterPanel.tsx` | ソース | パラメータパネル |
| LabelTemplatePanel.tsx | `src/frontend/src/pages/Index/Settings/AdminCenter/LabelTemplatePanel.tsx` | ソース | ラベルテンプレートパネル |
| ReportTemplatePanel.tsx | `src/frontend/src/pages/Index/Settings/AdminCenter/ReportTemplatePanel.tsx` | ソース | レポートテンプレートパネル |
| router.tsx | `src/frontend/src/router.tsx` | ソース | ルーティング定義（157-162行目） |
| PanelGroup.tsx | `src/frontend/src/components/panels/PanelGroup.tsx` | ソース | パネルグループコンポーネント |
| SettingsHeader.tsx | `src/frontend/src/components/nav/SettingsHeader.tsx` | ソース | 設定ヘッダーコンポーネント |
| SettingList.tsx | `src/frontend/src/components/settings/SettingList.tsx` | ソース | 設定リストコンポーネント |
| loading.ts | `src/frontend/src/functions/loading.ts` | ソース | Loadable関数定義 |
| UserState.ts | `src/frontend/src/states/UserState.ts` | ソース | ユーザー状態管理 |
| Roles.ts | `src/frontend/lib/enums/Roles.ts` | ソース | UserRoles列挙型 |
