# 画面設計書 18-製造オーダー詳細画面

## 概要

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

### 本画面の処理概要

本画面は、個別の製造オーダー（Build Order）の詳細情報を表示し、製造工程の管理、資材割当、完成品管理、テスト結果管理などを行うための画面である。

**業務上の目的・背景**：製造管理において、個別の製造オーダーの進捗状況、必要資材の割当状況、完成品の状態を詳細に把握・管理することは、生産効率の向上と品質管理の基盤となる。この画面では、製造オーダーのライフサイクル（作成→発行→製造→完了）を通じた管理を支援する。

**画面へのアクセス方法**：製造オーダー一覧からの行クリック、部品詳細画面の製造オーダータブからの遷移、またはURL `/manufacturing/build-order/:id/*` に直接アクセスする。

**主要な操作・処理内容**：
1. 製造オーダー基本情報の表示・編集
2. 必要部品（Required Parts / Build Lines）の表示
3. 割当済み在庫（Allocated Stock）の管理
4. 消費済み在庫（Consumed Stock）の表示
5. 未完了アウトプット（Incomplete Outputs）の管理
6. 完了済みアウトプット（Completed Outputs）の表示
7. 子製造オーダー（Child Build Orders）の表示
8. テスト結果の管理
9. 製造オーダーのステータス変更（発行、保留、完了、キャンセル）
10. 製造オーダーの複製
11. パラメータ、添付ファイル、メモの管理

**画面遷移**：
- 遷移元：製造インデックス画面、部品詳細画面、親製造オーダー詳細画面
- 遷移先：部品詳細画面、在庫アイテム詳細画面、子製造オーダー詳細画面、発注書詳細画面

**権限による表示制御**：`build`ロールに基づき表示・編集の可否が制御。

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 19 | 製造オーダー管理 | 主機能 | 製造オーダー情報の表示・編集、ステータス変更 |
| 20 | 製造オーダーアイテム管理 | 補助機能 | 必要部品、割当在庫の管理 |
| 21 | 製造アウトプット管理 | 補助機能 | 完了/未完了アウトプットの管理 |
| 8 | 在庫アイテム管理 | 遷移先機能 | 消費済み在庫、完了済みアウトプットからの遷移 |
| 2 | 部品マスタ管理 | 遷移先機能 | 製造対象部品への遷移 |
| 47 | 添付ファイル管理 | 補助機能 | 添付ファイルの表示・管理 |
| 48 | メモ・ノート管理 | 補助機能 | メモの表示・編集 |

## 画面種別

詳細

## URL/ルーティング

`/manufacturing/build-order/:id/*`

## 入出力項目

### 入力項目（製造オーダー編集モーダル）

| 項目名 | 項目種別 | データ型 | 必須 | 説明 |
|--------|----------|----------|------|------|
| 参照番号（Reference） | テキスト入力 | 文字列 | ○ | 製造オーダー参照番号 |
| 部品（Part） | セレクト | 数値 | ○ | 製造対象部品ID |
| 数量（Quantity） | 数値入力 | 数値 | ○ | 製造数量 |
| タイトル（Title） | テキスト入力 | 文字列 | - | オーダータイトル（説明） |
| 親オーダー（Parent） | セレクト | 数値 | - | 親製造オーダーID |
| 販売注文（Sales Order） | セレクト | 数値 | - | 関連販売注文ID |
| バッチコード（Batch） | テキスト入力 | 文字列 | - | バッチコード |
| 取得元ロケーション（Take From） | セレクト | 数値 | - | 資材取得元ロケーション |
| 送り先ロケーション（Destination） | セレクト | 数値 | - | 完成品送り先ロケーション |
| 開始日（Start Date） | 日付入力 | 日付 | - | 製造開始予定日 |
| 目標日（Target Date） | 日付入力 | 日付 | - | 目標完了日 |
| 担当者（Responsible） | セレクト | 数値 | - | 担当者（ユーザーまたはグループ） |
| プロジェクトコード | セレクト | 数値 | - | プロジェクトコード |
| 優先度（Priority） | 数値入力 | 数値 | - | 優先度（0-20） |
| 外部（External） | チェックボックス | 真偽値 | - | 外部製造フラグ |

## 表示項目

### 詳細パネル

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

| 項目名 | データ型 | 説明 |
|--------|----------|------|
| 部品（Part） | リンク | 製造対象部品へのリンク |
| IPN | 文字列 | 内部部品番号 |
| リビジョン（Revision） | 文字列 | 部品リビジョン |
| ステータス（Status） | バッジ | オーダーステータス |
| カスタムステータス | バッジ | カスタムステータス（設定時のみ） |
| 外部（External） | 真偽値 | 外部製造フラグ |
| 参照番号（Reference） | 文字列 | 製造オーダー参照番号 |
| 説明（Description） | 文字列 | オーダーの説明（タイトル） |
| 親オーダー（Parent Build） | リンク | 親製造オーダーへのリンク |

#### 数量情報（右上）

| 項目名 | データ型 | 説明 |
|--------|----------|------|
| 製造数量（Build Quantity） | 数値 | 目標製造数量 |
| 製造可能数（Can Build） | 数値 | 現在の在庫で製造可能な数量 |
| 完了済みアウトプット（Completed Outputs） | 進捗バー | 完了数/目標数 |
| 販売注文（Sales Order） | リンク | 関連販売注文へのリンク |

#### 担当情報（左下）

| 項目名 | データ型 | 説明 |
|--------|----------|------|
| 発注者（Issued By） | ユーザー | オーダー発注者 |
| 担当者（Responsible） | ユーザー/グループ | 担当者 |
| プロジェクトコード | 文字列 | プロジェクトコード |
| 取得元ロケーション（Source Location） | リンク/テキスト | 資材取得元（または「Any location」） |
| 送り先ロケーション（Destination Location） | リンク | 完成品送り先 |
| バッチコード（Batch Code） | 文字列 | バッチコード |

#### 日付情報（右下）

| 項目名 | データ型 | 説明 |
|--------|----------|------|
| 作成日（Created） | 日付 | オーダー作成日 |
| 開始日（Start Date） | 日付 | 製造開始予定日 |
| 目標日（Target Date） | 日付 | 目標完了日 |
| 完了日（Completed） | 日付 | 実際の完了日 |

### バッジ表示

| バッジ | 表示条件 | 色 |
|--------|---------|-----|
| Status | 常時 | ステータス依存 |
| External | external=true | 青 |

### パネル一覧

| パネル名 | 表示条件 | 内容 |
|---------|----------|------|
| 製造詳細（Build Details） | 常時 | 上記詳細項目 |
| 必要部品（Required Parts） | 常時 | Build Lineテーブル（取得元ロケーション表示付き） |
| 割当済み在庫（Allocated Stock） | ステータスが完了・キャンセル以外 & BOMあり | 割当在庫テーブル |
| 消費済み在庫（Consumed Stock） | BOMあり | 消費済み在庫テーブル |
| 未完了アウトプット（Incomplete Outputs） | ステータスが完了・キャンセル以外 | 未完了アウトプットテーブル |
| 完了済みアウトプット（Completed Outputs） | 常時 | 完了済み在庫アイテムテーブル |
| 外部発注書（External Orders） | external=true & BUILDORDER_EXTERNAL_BUILDS設定 & purchase_order権限 | 発注書テーブル |
| 子製造オーダー（Child Build Orders） | 常時 | 子製造オーダーテーブル |
| テスト結果（Test Results） | testable=true | テスト結果テーブル |
| パラメータ（Parameters） | 常時 | パラメータテーブル |
| 添付ファイル（Attachments） | 常時 | 添付ファイルパネル |
| メモ（Notes） | 常時 | メモ表示・編集パネル |

## イベント仕様

### 1-製造オーダー編集

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

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

### 2-製造オーダー複製

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

**処理フロー**：
1. 複製モーダルを表示（現在のオーダーデータをinitialDataに設定）
2. referenceフィールドは削除（自動生成させる）
3. 送信時に `POST /api/build/` を呼び出し
4. 成功後、新しい製造オーダー詳細画面に遷移

### 3-製造オーダー発行

プライマリアクションの「Issue Order」押下時の処理。

**処理フロー**：
1. 発行確認モーダルを表示
2. `POST /api/build/{id}/issue/` を呼び出し
3. 成功後、インスタンスをリフレッシュ
4. 成功メッセージ「Order issued」を表示

### 4-製造オーダー保留

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

**処理フロー**：
1. 保留確認モーダルを表示
2. `POST /api/build/{id}/hold/` を呼び出し
3. 成功後、インスタンスをリフレッシュ
4. 成功メッセージ「Order placed on hold」を表示

### 5-製造オーダー完了

プライマリアクションの「Complete Order」押下時の処理。

**処理フロー**：
1. 完了確認モーダルを表示（オプション選択あり）
2. accept_overallocated, accept_unallocated, accept_incomplete オプションを選択可能
3. `POST /api/build/{id}/complete/` を呼び出し
4. 成功後、インスタンスをリフレッシュ
5. 成功メッセージ「Order completed」を表示

### 6-製造オーダーキャンセル

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

**処理フロー**：
1. キャンセル確認モーダルを表示（オプション選択あり）
2. remove_allocated_stock, remove_incomplete_outputs オプションを選択可能
3. `POST /api/build/{id}/cancel/` を呼び出し
4. 成功後、インスタンスをリフレッシュ
5. 成功メッセージ「Order cancelled」を表示

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

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

| 操作（イベント） | 対象テーブル | 操作種別 | 概要 |
|----------------|-------------|---------|------|
| 製造オーダー編集 | build_build | UPDATE | 製造オーダー情報を更新 |
| 製造オーダー複製 | build_build | INSERT | 新規製造オーダーを作成 |
| 製造オーダー発行 | build_build | UPDATE | ステータスをPRODUCTIONに更新 |
| 製造オーダー保留 | build_build | UPDATE | ステータスをON_HOLDに更新 |
| 製造オーダー完了 | build_build | UPDATE | ステータスをCOMPLETEに更新、完了日を設定 |
| 製造オーダーキャンセル | build_build | UPDATE | ステータスをCANCELLEDに更新 |

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

#### build_build

| 操作 | 項目（カラム名） | 更新値・取得条件 | 備考 |
|-----|-----------------|-----------------|------|
| UPDATE | reference | フォーム入力値 | 参照番号 |
| UPDATE | quantity | フォーム入力値 | 製造数量 |
| UPDATE | title | フォーム入力値 | 説明（タイトル） |
| UPDATE | status | ステータスコード | ステータス変更時 |
| UPDATE | completion_date | 現在日時 | 完了時に設定 |

## メッセージ仕様

| メッセージ種別 | 条件 | メッセージ内容 |
|---------------|------|---------------|
| 確認 | 発行時 | Issue this order |
| 成功 | 発行成功 | Order issued |
| 確認 | 保留時 | Place this order on hold |
| 成功 | 保留成功 | Order placed on hold |
| 確認 | 完了時 | Mark this order as complete |
| 成功 | 完了成功 | Order completed |
| 確認 | キャンセル時 | Cancel this order |
| 成功 | キャンセル成功 | Order cancelled |

## 例外処理

| 例外条件 | 処理内容 |
|----------|----------|
| 製造オーダーが見つからない | InstanceDetailコンポーネントが404処理 |
| 権限不足 | 対応するボタン/パネルが非表示 |
| API通信エラー | エラー通知を表示 |

## 備考

- ステータスによってアクションボタンの表示/非表示が変わる
  - Issue：PENDING または ON_HOLD の場合に表示
  - Complete：PRODUCTION の場合に表示
  - Hold：PENDING または PRODUCTION の場合に表示
  - Cancel：PENDING, ON_HOLD, PRODUCTION の場合に表示
- BOMがない場合（buildLineData.count <= 0）、割当・消費関連パネルは「No Required Items」アラートを表示
- 外部製造オーダー（external=true）の場合、外部発注書パネルが表示される
- テスト結果パネルは部品がtestable=trueの場合のみ表示

---

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

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

### 推奨読解順序

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

製造オーダーデータの構造と関連APIを確認する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | ApiEndpoints.ts | `src/frontend/lib/enums/ApiEndpoints.ts` | build_order_list, build_order_issue, build_order_hold, build_order_complete, build_order_cancel エンドポイント |
| 1-2 | ModelType.ts | `src/frontend/lib/enums/ModelType.ts` | ModelType.build の定義 |

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

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

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

**主要処理フロー**:
1. **68-77行**: NoItemsコンポーネント（BOMなし時の表示）
2. **82-116行**: BuildLinesPanelコンポーネント（必要部品パネル）
3. **118-136行**: BuildAllocationsPanelコンポーネント（割当在庫パネル）
4. **141-177行**: useInstanceでbuildLineDataとオーダーデータを取得
5. **187-405行**: detailsPanel定義（4領域の詳細表示）
6. **407-546行**: buildPanels定義（タブパネル構成）
7. **548-560行**: editBuildOrderFields, editBuild（編集モーダル）
8. **562-584行**: duplicateBuild（複製モーダル）
9. **586-640行**: cancelOrder, holdOrder, issueOrder, completeOrder（ステータス変更モーダル）
10. **643-717行**: buildActions（アクションボタン群）
11. **719-735行**: buildBadges（バッジ表示）
12. **737-774行**: レンダリング部分

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

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

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | BuildLineTable.tsx | `src/frontend/src/tables/build/BuildLineTable.tsx` | 必要部品テーブル |
| 3-2 | BuildAllocatedStockTable.tsx | `src/frontend/src/tables/build/BuildAllocatedStockTable.tsx` | 割当在庫テーブル |
| 3-3 | BuildOutputTable.tsx | `src/frontend/src/tables/build/BuildOutputTable.tsx` | アウトプットテーブル |
| 3-4 | StockItemTable.tsx | `src/frontend/src/tables/stock/StockItemTable.tsx` | 消費済み・完了済み在庫テーブル |

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

```
BuildDetail (BuildDetail.tsx:141)
    │
    ├─ useParams() - URLから製造オーダーID取得
    │
    ├─ useInstance(ApiEndpoints.build_line_list)
    │      └─ GET /api/build/line/?build={id} - BOMアイテム数取得
    │
    ├─ useStatusCodes(ModelType.build)
    │      └─ ステータスコード定義取得
    │
    ├─ useInstance(ApiEndpoints.build_order_list)
    │      └─ GET /api/build/{id}/ - 製造オーダー詳細取得
    │
    ├─ useInstance(ApiEndpoints.part_requirements)
    │      └─ GET /api/part/{partId}/requirements/ - 部品要件取得
    │
    ├─ useEditApiFormModal (553-560行)
    │      └─ PUT /api/build/{id}/ - 製造オーダー編集
    │
    ├─ useCreateApiFormModal (duplicateBuild) (576-584行)
    │      └─ POST /api/build/ - 製造オーダー複製
    │
    ├─ useCreateApiFormModal (issueOrder) (606-612行)
    │      └─ POST /api/build/{id}/issue/ - 発行
    │
    ├─ useCreateApiFormModal (holdOrder) (598-604行)
    │      └─ POST /api/build/{id}/hold/ - 保留
    │
    ├─ useCreateApiFormModal (completeOrder) (628-641行)
    │      └─ POST /api/build/{id}/complete/ - 完了
    │
    ├─ useCreateApiFormModal (cancelOrder) (586-596行)
    │      └─ POST /api/build/{id}/cancel/ - キャンセル
    │
    └─ PanelGroup
           ├─ detailsPanel
           ├─ BuildLinesPanel
           │      └─ BuildLineTable
           ├─ BuildAllocationsPanel
           │      └─ BuildAllocatedStockTable
           ├─ StockItemTable (consumed)
           ├─ BuildOutputTable (incomplete)
           ├─ StockItemTable (completed)
           ├─ PurchaseOrderTable (external)
           ├─ BuildOrderTable (children)
           ├─ PartTestResultTable
           ├─ ParametersPanel
           ├─ AttachmentPanel
           └─ NotesPanel
```

### データフロー図

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

URL パラメータ ───▶ BuildDetail ───▶ 画面表示
(:id)                    │
                         ├─▶ build詳細取得
                         │         │
                         │         ▼
                         │   GET /api/build/{id}/
                         │
                         ├─▶ BOMアイテム数取得
                         │         │
                         │         ▼
                         │   GET /api/build/line/?build={id}
                         │
                         └─▶ ステータス変更
                                   │
                                   ▼
                            POST /api/build/{id}/{action}/
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| BuildDetail.tsx | `src/frontend/src/pages/build/BuildDetail.tsx` | ソース | 製造オーダー詳細画面メインコンポーネント |
| BuildLineTable.tsx | `src/frontend/src/tables/build/BuildLineTable.tsx` | ソース | 必要部品テーブル |
| BuildAllocatedStockTable.tsx | `src/frontend/src/tables/build/BuildAllocatedStockTable.tsx` | ソース | 割当在庫テーブル |
| BuildOutputTable.tsx | `src/frontend/src/tables/build/BuildOutputTable.tsx` | ソース | アウトプットテーブル |
| BuildOrderTable.tsx | `src/frontend/src/tables/build/BuildOrderTable.tsx` | ソース | 製造オーダーテーブル（子オーダー用） |
| BuildForms.tsx | `src/frontend/src/forms/BuildForms.tsx` | ソース | 製造オーダーフォームフィールド定義 |
| StockItemTable.tsx | `src/frontend/src/tables/stock/StockItemTable.tsx` | ソース | 在庫アイテムテーブル |
| PurchaseOrderTable.tsx | `src/frontend/src/tables/purchasing/PurchaseOrderTable.tsx` | ソース | 発注書テーブル |
| PartTestResultTable.tsx | `src/frontend/src/tables/part/PartTestResultTable.tsx` | ソース | テスト結果テーブル |
| UseStatusCodes.ts | `src/frontend/src/hooks/UseStatusCodes.ts` | ソース | ステータスコードフック |
| PrimaryActionButton.tsx | `src/frontend/src/components/buttons/PrimaryActionButton.tsx` | ソース | プライマリアクションボタン |
