# 画面設計書 14-部品詳細画面

## 概要

本ドキュメントは、InvenTreeフロントエンドアプリケーションの「部品詳細画面」に関する設計仕様を記載する。

### 本画面の処理概要

本画面は、個別の部品（Part）の詳細情報を表示し、部品に関連する在庫、バリアント、BOM（部品表）、価格、サプライヤー、注文、テストなど多岐にわたる情報を管理するための画面である。

**業務上の目的・背景**：在庫管理システムにおいて、部品は最も基本的な管理単位である。部品詳細画面では、部品の技術仕様、在庫状況、調達先、価格情報、製造情報などを一元的に管理し、購買判断、製造計画、在庫管理の意思決定を支援する。

**画面へのアクセス方法**：部品一覧からの行クリック、部品カテゴリ画面からの遷移、在庫アイテムからの部品リンク、またはURL `/part/:id/*` に直接アクセスする。

**主要な操作・処理内容**：
1. 部品基本情報の表示・編集
2. 部品画像の管理（アップロード、削除）
3. 在庫アイテム一覧の表示と在庫操作（カウント、移動、追加）
4. バリアント（派生部品）の管理
5. BOM（部品表）の表示・編集・検証
6. 価格情報の表示・分析
7. サプライヤー部品情報の管理
8. 発注書・販売注文・製造オーダーの一覧表示
9. テストテンプレートとテスト結果の管理
10. パラメータの管理
11. 添付ファイル・メモの管理
12. バーコードの生成・印刷

**画面遷移**：
- 遷移元：部品カテゴリ画面、在庫アイテム詳細画面、注文詳細画面
- 遷移先：在庫アイテム詳細画面、発注書詳細画面、販売注文詳細画面、製造オーダー詳細画面、サプライヤー部品詳細画面

**権限による表示制御**：`part`ロールに基づき表示・編集・削除の可否が制御。各パネルは関連ロール（stock, purchase_order, sales_order, build等）でも制御される。

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 2 | 部品マスタ管理 | 主機能 | 部品情報の表示・編集・削除、部品画像の管理 |
| 3 | BOM（部品表）管理 | 補助機能 | 部品表の表示・編集、BOM検証処理 |
| 4 | 部品パラメータ管理 | 補助機能 | 部品パラメータの表示・編集 |
| 5 | 部品テスト管理 | 補助機能 | テストテンプレートの表示・設定 |
| 6 | 部品価格管理 | 補助機能 | 価格情報の表示・分析 |
| 8 | 在庫アイテム管理 | 遷移先機能 | 在庫アイテム一覧の表示・在庫詳細への遷移 |
| 9 | 在庫移動・調整 | API連携 | 在庫カウント、移動、追加の処理 |
| 12 | 発注書管理 | 遷移先機能 | 発注書一覧の表示・発注詳細への遷移 |
| 15 | 販売注文管理 | 遷移先機能 | 販売注文一覧の表示・注文詳細への遷移 |
| 19 | 製造オーダー管理 | 遷移先機能 | 製造オーダー一覧の表示・オーダー詳細への遷移 |
| 24 | サプライヤー部品管理 | 補助機能 | サプライヤー部品情報の表示 |
| 41 | バーコード生成 | 補助機能 | 部品バーコードの生成・印刷 |
| 47 | 添付ファイル管理 | 補助機能 | 添付ファイルの表示・アップロード・削除 |
| 48 | メモ・ノート管理 | 補助機能 | 部品メモの表示・編集 |

## 画面種別

詳細

## URL/ルーティング

`/part/:id/*`

## 入出力項目

### 入力項目（部品編集モーダル）

| 項目名 | 項目種別 | データ型 | 必須 | 説明 |
|--------|----------|----------|------|------|
| 名前（Name） | テキスト入力 | 文字列 | ○ | 部品名 |
| IPN | テキスト入力 | 文字列 | - | 内部部品番号 |
| 説明（Description） | テキスト入力 | 文字列 | - | 部品の説明 |
| カテゴリ（Category） | セレクト | 数値 | - | 部品カテゴリID |
| リビジョン（Revision） | テキスト入力 | 文字列 | - | リビジョン番号 |
| リビジョン元（Revision of） | セレクト | 数値 | - | 元部品のID |
| バリアント元（Variant of） | セレクト | 数値 | - | テンプレート部品のID |
| デフォルトロケーション | セレクト | 数値 | - | デフォルト在庫ロケーション |
| デフォルトサプライヤー | セレクト | 数値 | - | デフォルトサプライヤー部品 |
| 単位（Units） | テキスト入力 | 文字列 | - | 単位 |
| キーワード（Keywords） | テキスト入力 | 文字列 | - | 検索用キーワード |
| リンク（Link） | URL入力 | 文字列 | - | 外部リンク |
| 最小在庫（Minimum Stock） | 数値入力 | 数値 | - | 最小在庫数量 |
| デフォルト有効期限 | 数値入力 | 数値 | - | デフォルト有効期限（日数） |
| アクティブ（Active） | チェックボックス | 真偽値 | - | 有効フラグ |
| ロック（Locked） | チェックボックス | 真偽値 | - | 編集ロックフラグ |
| テンプレート（Is Template） | チェックボックス | 真偽値 | - | テンプレート部品フラグ |
| アセンブリ（Assembly） | チェックボックス | 真偽値 | - | 組立部品フラグ |
| コンポーネント（Component） | チェックボックス | 真偽値 | - | 構成部品フラグ |
| テスト可能（Testable） | チェックボックス | 真偽値 | - | テスト可能フラグ |
| トラッキング（Trackable） | チェックボックス | 真偽値 | - | シリアル追跡フラグ |
| 購入可能（Purchaseable） | チェックボックス | 真偽値 | - | 購入可能フラグ |
| 販売可能（Salable） | チェックボックス | 真偽値 | - | 販売可能フラグ |
| 仮想（Virtual） | チェックボックス | 真偽値 | - | 仮想部品フラグ |

## 表示項目

### 詳細パネル

#### 基本情報（左上）

| 項目名 | データ型 | 説明 |
|--------|----------|------|
| 名前（Name） | 文字列 | 部品名 |
| IPN | 文字列 | 内部部品番号 |
| 説明（Description） | 文字列 | 部品の説明 |
| バリアント元（Variant of） | リンク | テンプレート部品へのリンク |
| リビジョン元（Revision of） | リンク | 元部品へのリンク |
| リビジョン（Revision） | 文字列 | リビジョン番号 |
| カテゴリ（Category） | リンク | カテゴリへのリンク |
| デフォルトロケーション | リンク | デフォルト在庫ロケーション |
| 単位（Units） | 文字列 | 単位 |
| キーワード（Keywords） | 文字列 | 検索用キーワード |
| リンク（Link） | URL | 外部リンク |

#### 在庫情報（右上）

| 項目名 | データ型 | 説明 |
|--------|----------|------|
| 在庫数（In Stock） | 数値 | 総在庫数量 |
| 利用可能在庫（Available Stock） | 進捗バー | 未割当在庫数量 |
| 発注中（On order） | 数値 | 発注中数量 |
| 必要数（Required for Orders） | 数値 | 注文に必要な数量 |
| 製造オーダー割当 | 進捗バー | 製造オーダーへの割当状況 |
| 販売オーダー割当 | 進捗バー | 販売オーダーへの割当状況 |
| 製造中（In Production） | 進捗バー | 製造中数量 |
| 製造可能数（Can Build） | 数値 | BOMに基づく製造可能数 |
| 最小在庫（Minimum Stock） | 数値 | 最小在庫数量 |

#### 属性情報（左下）

| 項目名 | データ型 | 説明 |
|--------|----------|------|
| アクティブ（Active） | 真偽値 | 有効フラグ |
| ロック（Locked） | 真偽値 | 編集ロックフラグ |
| テンプレート（Template Part） | 真偽値 | テンプレート部品フラグ |
| 組立部品（Assembled Part） | 真偽値 | アセンブリフラグ |
| 構成部品（Component Part） | 真偽値 | コンポーネントフラグ |
| テスト可能（Testable Part） | 真偽値 | テスト可能フラグ |
| トラッキング（Trackable Part） | 真偽値 | シリアル追跡フラグ |
| 購入可能（Purchaseable Part） | 真偽値 | 購入可能フラグ |
| 販売可能（Saleable Part） | 真偽値 | 販売可能フラグ |
| 仮想（Virtual Part） | 真偽値 | 仮想部品フラグ |
| 購読（Subscribed） | 真偽値 | お気に入り登録状態 |

#### その他情報（右下）

| 項目名 | データ型 | 説明 |
|--------|----------|------|
| 作成日（Creation Date） | 日付 | 部品作成日 |
| 作成者（Created By） | ユーザー | 部品作成者 |
| 責任者（Responsible） | ユーザー/グループ | 責任者 |
| デフォルトサプライヤー | リンク | デフォルトサプライヤー部品 |
| デフォルト有効期限 | 文字列 | デフォルト有効期限（日数） |
| 価格範囲（Price Range） | 文字列 | 価格の最小〜最大 |
| 最新シリアル番号 | 文字列 | 最新のシリアル番号 |

### パネル一覧

| パネル名 | 表示条件 | 内容 |
|---------|----------|------|
| 部品詳細（Part Details） | 常時 | 上記詳細項目 |
| 在庫（Stock） | 非仮想部品 & stock権限 | 在庫アイテム一覧 |
| バリアント（Variants） | is_template=true | バリアント部品一覧 |
| 割当（Allocations） | component or salable & 非仮想 | 製造・販売オーダー割当 |
| BOM（Bill of Materials） | assembly=true | 部品表一覧（検証機能付き） |
| 使用先（Used In） | component=true | この部品を使用する製品一覧 |
| 価格（Part Pricing） | 常時 | 価格分析パネル |
| サプライヤー（Suppliers） | purchaseable=true & purchase_order権限 | サプライヤー部品一覧 |
| 発注書（Purchase Orders） | purchaseable=true & purchase_order権限 | 発注書一覧 |
| 販売注文（Sales Orders） | salable=true & sales_order権限 | 販売注文一覧 |
| 返品オーダー（Return Orders） | salable=true & return_order権限 & 設定有効 | 返品オーダー一覧 |
| 製造オーダー（Build Orders） | assembly=true & build権限 | 製造オーダー一覧 |
| 在庫履歴（Stock History） | 非仮想 & stock権限 & 設定有効 | 在庫履歴パネル |
| テストテンプレート | testable=true | テストテンプレート一覧 |
| テスト結果（Test Results） | testable=true & stock権限 | テスト結果一覧 |
| 関連部品（Related Parts） | 常時 | 関連部品一覧 |
| パラメータ（Parameters） | 常時 | 部品パラメータ一覧 |
| 添付ファイル（Attachments） | 常時 | 添付ファイル一覧 |
| メモ（Notes） | 常時 | メモ表示・編集 |

## イベント仕様

### 1-部品編集

アクションメニューの「Edit Part」選択時の処理。

**処理フロー**：
1. 編集モーダルを表示（usePartFieldsでフィールド定義）
2. 送信時に `PUT /api/part/{id}/` を呼び出し
3. 成功後、インスタンスをリフレッシュ

### 2-部品複製

アクションメニューの「Duplicate」選択時の処理。

**処理フロー**：
1. 複製モーダルを表示（現在の部品データをinitialDataに設定）
2. active=true, locked=falseを初期設定
3. 送信時に `POST /api/part/` を呼び出し
4. 成功後、新しい部品詳細画面に遷移

### 3-部品削除

アクションメニューの「Delete」選択時の処理（非アクティブ部品のみ）。

**処理フロー**：
1. 削除確認モーダルを表示（サムネイル付き警告）
2. 送信時に `DELETE /api/part/{id}/` を呼び出し
3. 成功後、部品カテゴリまたは部品一覧に遷移

### 4-在庫操作

Stock Actionsドロップダウンからの操作。

**処理フロー**（useStockAdjustActionsフックで実装）：
1. Count（カウント）：在庫数量の確認・修正
2. Transfer（移動）：在庫ロケーション間の移動
3. Add（追加）：在庫の追加
4. Remove（削除）：在庫の削除
5. Order（発注）：発注ウィザードを開く

### 5-シリアル番号検索

Stock Actionsの「Search by serial number」選択時。

**処理フロー**：
1. シリアル番号検索モーダルを表示
2. 入力されたシリアル番号で在庫アイテムを検索
3. 該当アイテムの詳細画面に遷移

### 6-BOM検証

BOMパネルの「Validate BOM」ボタン押下時。

**処理フロー**：
1. 検証確認モーダルを表示
2. `PUT /api/part/{id}/bom-validate/` を呼び出し
3. 検証結果に応じてアイコン・色を更新

### 7-リビジョン選択

リビジョンセレクター（PART_ENABLE_REVISION設定有効時）での選択変更。

**処理フロー**：
1. 選択されたリビジョンのPKを取得
2. 該当リビジョンの部品詳細画面に遷移

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

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

| 操作（イベント） | 対象テーブル | 操作種別 | 概要 |
|----------------|-------------|---------|------|
| 部品編集 | part_part | UPDATE | 部品情報を更新 |
| 部品複製 | part_part | INSERT | 新規部品を作成 |
| 部品削除 | part_part | DELETE | 部品を削除 |
| 在庫カウント | stock_stockitemtracking, stock_stockitem | INSERT, UPDATE | 在庫追跡履歴追加、数量更新 |
| 在庫移動 | stock_stockitemtracking, stock_stockitem | INSERT, UPDATE | 在庫追跡履歴追加、ロケーション更新 |
| BOM検証 | part_part | UPDATE | bom_checked_date, bom_checked_by 更新 |
| お気に入り切替 | part_partstar | INSERT/DELETE | スター登録/解除 |

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

#### part_part

| 操作 | 項目（カラム名） | 更新値・取得条件 | 備考 |
|-----|-----------------|-----------------|------|
| UPDATE | name, IPN, description, revision, ... | フォーム入力値 | 部品マスタ情報 |
| UPDATE | bom_checked_date | 現在日時 | BOM検証日時 |
| UPDATE | bom_checked_by | 実行ユーザーID | BOM検証者 |

## メッセージ仕様

| メッセージ種別 | 条件 | メッセージ内容 |
|---------------|------|---------------|
| 確認 | 部品削除時 | Deleting this part cannot be reversed |
| 確認 | BOM検証時 | Do you want to validate the bill of materials for this assembly? |
| 成功 | BOM検証成功 | Bill of materials scheduled for validation |
| 警告 | ロック中の編集 | Part parameters cannot be edited, as the part is locked |

## 例外処理

| 例外条件 | 処理内容 |
|----------|----------|
| 部品が見つからない | InstanceDetailコンポーネントが404処理 |
| 権限不足 | 対応するボタン/パネルが非表示 |
| API通信エラー | エラー通知を表示 |
| アクティブ部品の削除試行 | 削除ボタンが無効化 |

## 備考

- 部品画像はDetailsImageコンポーネントで管理（アップロード、削除、既存選択）
- リビジョン機能はグローバル設定 `PART_ENABLE_REVISION` で有効/無効を制御
- 在庫履歴タブはグローバル設定 `STOCKTAKE_ENABLE` とユーザー設定 `DISPLAY_STOCKTAKE_TAB` で制御
- 返品オーダータブはグローバル設定 `RETURNORDER_ENABLED` で制御
- ロック中の部品はBOMとパラメータの編集が制限される

---

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

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

### 推奨読解順序

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

部品データの構造と関連APIを確認する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | ApiEndpoints.ts | `src/frontend/lib/enums/ApiEndpoints.ts` | part_list, part_requirements, bom_validate等のエンドポイント |
| 1-2 | ModelType.ts | `src/frontend/lib/enums/ModelType.ts` | ModelType.part の定義 |

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

画面のメインコンポーネントを確認する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | PartDetail.tsx | `src/frontend/src/pages/part/PartDetail.tsx` | メイン画面コンポーネント（約1275行） |

**主要処理フロー**:
1. **270-274行**: コンポーネント定義、フック初期化
2. **282-301行**: useInstanceで部品データ・シリアル番号・要件情報を取得
3. **303-391行**: リビジョン情報の取得とオプション生成
4. **400-783行**: detailsPanel定義（4領域の詳細表示）
5. **786-978行**: partPanels定義（多数のタブパネル）
6. **1066-1077行**: editPart編集モーダル
7. **1084-1095行**: duplicatePart複製モーダル
8. **1097-1115行**: deletePart削除モーダル
9. **1128-1132行**: stockAdjustActions（在庫操作）
10. **1140-1210行**: partActions（アクションボタン群）
11. **1212-1273行**: レンダリング部分

#### Step 3: 補助コンポーネントを理解する

部品詳細で使用される補助コンポーネントを確認する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | PartPricingPanel.tsx | `src/frontend/src/pages/part/PartPricingPanel.tsx` | 価格分析パネル |
| 3-2 | PartSupplierDetail.tsx | `src/frontend/src/pages/part/PartSupplierDetail.tsx` | サプライヤー詳細パネル |
| 3-3 | PartAllocationPanel.tsx | `src/frontend/src/pages/part/PartAllocationPanel.tsx` | 割当パネル |

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

各パネルで使用されるテーブルを確認する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 4-1 | StockItemTable.tsx | `src/frontend/src/tables/stock/StockItemTable.tsx` | 在庫アイテム一覧 |
| 4-2 | BomTable.tsx | `src/frontend/src/tables/bom/BomTable.tsx` | BOM一覧 |
| 4-3 | PartVariantTable.tsx | `src/frontend/src/tables/part/PartVariantTable.tsx` | バリアント一覧 |

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

```
PartDetail (PartDetail.tsx:270)
    │
    ├─ useParams() - URLから部品ID取得
    │
    ├─ useInstance(ApiEndpoints.part_list)
    │      └─ GET /api/part/{id}/ - 部品詳細取得
    │
    ├─ useInstance(ApiEndpoints.part_requirements)
    │      └─ GET /api/part/{id}/requirements/ - 部品要件取得
    │
    ├─ useInstance(ApiEndpoints.part_serial_numbers)
    │      └─ GET /api/part/{id}/serial-numbers/ - シリアル番号情報
    │
    ├─ useQuery(part_revisions) - リビジョン一覧取得
    │
    ├─ useStockAdjustActions() - 在庫操作フック
    │      ├─ Count modal
    │      ├─ Transfer modal
    │      ├─ Add modal
    │      └─ Remove modal
    │
    ├─ OrderPartsWizard - 発注ウィザード
    │
    └─ PanelGroup
           ├─ detailsPanel
           ├─ StockItemTable
           ├─ PartVariantTable
           ├─ PartAllocationPanel
           ├─ BomTable
           ├─ UsedInTable
           ├─ PartPricingPanel
           ├─ PartSupplierDetail
           ├─ PartPurchaseOrdersTable
           ├─ SalesOrderTable
           ├─ ReturnOrderTable
           ├─ BuildOrderTable
           ├─ PartTestTemplateTable
           ├─ PartTestResultTable
           ├─ RelatedPartTable
           ├─ ParameterTable
           ├─ AttachmentPanel
           └─ NotesPanel
```

### データフロー図

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

URL パラメータ ───▶ PartDetail ───▶ 画面表示
(:id)                    │
                         ├─▶ part詳細取得
                         │         │
                         │         ▼
                         │   GET /api/part/{id}/
                         │
                         ├─▶ requirements取得
                         │         │
                         │         ▼
                         │   GET /api/part/{id}/requirements/
                         │
                         └─▶ 各パネルデータ取得
                                   │
                                   ▼
                            関連API呼び出し
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| PartDetail.tsx | `src/frontend/src/pages/part/PartDetail.tsx` | ソース | 部品詳細画面メインコンポーネント |
| PartPricingPanel.tsx | `src/frontend/src/pages/part/PartPricingPanel.tsx` | ソース | 価格分析パネル |
| PartSupplierDetail.tsx | `src/frontend/src/pages/part/PartSupplierDetail.tsx` | ソース | サプライヤー詳細パネル |
| PartAllocationPanel.tsx | `src/frontend/src/pages/part/PartAllocationPanel.tsx` | ソース | 割当パネル |
| PartForms.tsx | `src/frontend/src/forms/PartForms.tsx` | ソース | 部品フォームフィールド定義 |
| StockItemTable.tsx | `src/frontend/src/tables/stock/StockItemTable.tsx` | ソース | 在庫アイテムテーブル |
| BomTable.tsx | `src/frontend/src/tables/bom/BomTable.tsx` | ソース | BOMテーブル |
| PartVariantTable.tsx | `src/frontend/src/tables/part/PartVariantTable.tsx` | ソース | バリアントテーブル |
| PartTestTemplateTable.tsx | `src/frontend/src/tables/part/PartTestTemplateTable.tsx` | ソース | テストテンプレートテーブル |
| ParameterTable.tsx | `src/frontend/src/tables/general/ParameterTable.tsx` | ソース | パラメータテーブル |
| UseStockAdjustActions.ts | `src/frontend/src/hooks/UseStockAdjustActions.ts` | ソース | 在庫操作フック |
| OrderPartsWizard.tsx | `src/frontend/src/components/wizards/OrderPartsWizard.tsx` | ソース | 発注ウィザード |
