# 画面設計書 17-製造インデックス画面

## 概要

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

### 本画面の処理概要

本画面は、製造オーダー（Build Order）の一覧を表示し、製造業務の概要を把握するためのインデックス画面である。テーブル、カレンダー、パラメトリックの3つの表示形式を切り替えて使用できる。

**業務上の目的・背景**：製造管理において、現在進行中の製造オーダーや計画中のオーダーを一覧で把握することは、生産計画の管理、リソース配分、納期管理の基盤となる。カレンダー表示により日程ベースでの計画把握が可能となり、パラメトリック表示により詳細な分析が可能となる。

**画面へのアクセス方法**：メインナビゲーションの「製造（Manufacturing）」メニューをクリック、またはURL `/manufacturing/` に直接アクセスする。

**主要な操作・処理内容**：
1. 製造オーダー一覧の表示（テーブル形式）
2. 製造オーダーのカレンダー表示
3. 製造オーダーのパラメトリック表示
4. 新規製造オーダーの作成（テーブルから）
5. 製造オーダー詳細画面への遷移

**画面遷移**：
- 遷移元：ホームダッシュボード、ナビゲーションメニュー
- 遷移先：製造オーダー詳細画面

**権限による表示制御**：`build`ロールの表示権限がないユーザーには`PermissionDenied`画面を表示。

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 19 | 製造オーダー管理 | 主機能 | 製造オーダー一覧の表示、詳細への遷移 |
| 20 | 製造オーダーアイテム管理 | 遷移先機能 | 製造オーダー詳細画面への遷移 |

## 画面種別

一覧（インデックス）

## URL/ルーティング

`/manufacturing/` または `/manufacturing`

## 入出力項目

本画面は一覧表示専用であり、入力項目はない（新規作成はテーブルコンポーネント内のアクションから行う）。

## 表示項目

### 製造オーダーテーブル

テーブル形式での表示項目は`BuildOrderTable`コンポーネントが定義。主な列項目：

| 項目名 | データ型 | 説明 |
|--------|----------|------|
| 参照番号（Reference） | 文字列 | 製造オーダーの参照番号 |
| 部品（Part） | リンク | 製造対象部品へのリンク |
| 説明（Description） | 文字列 | オーダーの説明 |
| 数量（Quantity） | 数値 | 製造数量 |
| ステータス（Status） | バッジ | オーダーのステータス |
| 優先度（Priority） | 数値 | オーダー優先度 |
| 作成日（Creation Date） | 日付 | オーダー作成日 |
| 開始日（Start Date） | 日付 | 製造開始予定日 |
| 目標日（Target Date） | 日付 | 目標完了日 |
| 完了日（Completion Date） | 日付 | 実際の完了日 |
| 担当者（Responsible） | ユーザー | 担当者 |
| 発注者（Issued By） | ユーザー | 発注者 |
| プロジェクトコード | 文字列 | プロジェクトコード |

### カレンダー表示

カレンダー形式での表示。未完了（outstanding）の製造オーダーを日付ベースで表示。

**フィルター項目**：
- External：外部製造オーダーの表示切替
- Part Category：部品カテゴリでのフィルタリング

### パラメトリック表示

パラメトリックテーブル形式での表示。詳細なフィルタリングとカスタム列表示が可能。

## イベント仕様

### 1-表示形式切替

セグメントコントロールでの表示形式切替。

**処理フロー**：
1. セグメントコントロールで「Table」「Calendar」「Parametric」を選択
2. 選択値をローカルストレージ（`build-order-view`）に保存
3. 選択に応じたコンポーネントを表示

### 2-製造オーダー選択

テーブル行クリック時の処理。

**処理フロー**：
1. 選択された製造オーダーのPKを取得
2. `/manufacturing/build-order/{pk}/` に遷移

### 3-カレンダーイベント選択

カレンダー上のイベントクリック時の処理。

**処理フロー**：
1. 選択されたイベント（製造オーダー）のPKを取得
2. `/manufacturing/build-order/{pk}/` に遷移

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

本画面ではデータベースの更新は行わない（表示のみ）。新規作成はテーブルコンポーネント内のアクションから行われ、そのモーダル内でデータベース更新が発生する。

## メッセージ仕様

| メッセージ種別 | 条件 | メッセージ内容 |
|---------------|------|---------------|
| - | - | 本画面では明示的なメッセージ表示なし |

## 例外処理

| 例外条件 | 処理内容 |
|----------|----------|
| 未ログイン | PermissionDenied画面を表示 |
| build権限なし | PermissionDenied画面を表示 |

## 備考

- 表示形式の選択状態はローカルストレージに保存され、次回アクセス時に復元される
- カレンダー表示ではグローバル設定 `BUILDORDER_EXTERNAL_BUILDS` が有効な場合、外部製造オーダーのフィルターが表示される
- パネルグループのpageKeyは `build-index` で、タブ状態が永続化される

---

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

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

### 推奨読解順序

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

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

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

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

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

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

**主要処理フロー**:
1. **27-50行**: BuildOrderCalendarコンポーネント（カレンダー表示用）
2. **55-61行**: useLocalStorageで表示形式を永続化
3. **63-93行**: panels定義（SegmentedControlPanelで3形式切替）
4. **95-97行**: 権限チェック（未ログインまたはbuild権限なしでPermissionDenied）
5. **99-109行**: レンダリング部分（PageDetail + PanelGroup）

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

製造オーダーテーブルの実装を確認する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | BuildOrderTable.tsx | `src/frontend/src/tables/build/BuildOrderTable.tsx` | テーブル列定義、フィルター、アクション |
| 3-2 | BuildOrderParametricTable.tsx | `src/frontend/src/tables/build/BuildOrderParametricTable.tsx` | パラメトリック表示テーブル |

#### Step 4: カレンダーコンポーネントを理解する

カレンダー表示の実装を確認する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 4-1 | OrderCalendar.tsx | `src/frontend/src/components/calendar/OrderCalendar.tsx` | カレンダーコンポーネント |

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

```
BuildIndex (BuildIndex.tsx:55)
    │
    ├─ useUserState() - ユーザー状態取得
    │
    ├─ useLocalStorage('build-order-view') - 表示形式永続化
    │
    ├─ 権限チェック
    │      └─ !user.isLoggedIn() || !user.hasViewRole(UserRoles.build)
    │             └─ PermissionDenied
    │
    └─ PanelGroup
           └─ SegmentedControlPanel('buildorder')
                  ├─ Table View
                  │      └─ BuildOrderTable
                  │             └─ InvenTreeTable
                  │                    └─ GET /api/build/ - 製造オーダー一覧取得
                  │
                  ├─ Calendar View
                  │      └─ BuildOrderCalendar
                  │             └─ OrderCalendar
                  │                    └─ GET /api/build/?outstanding=true
                  │
                  └─ Parametric View
                         └─ BuildOrderParametricTable
                                └─ GET /api/build/
```

### データフロー図

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

URL アクセス ───▶ BuildIndex ───▶ 画面表示
                       │
                       ▼
                 権限チェック
                       │
                       ▼
                 表示形式判定
                 (localStorage)
                       │
            ┌─────────┼─────────┐
            ▼         ▼         ▼
         Table    Calendar  Parametric
            │         │         │
            ▼         ▼         ▼
    BuildOrderTable  OrderCalendar  BuildOrderParametricTable
            │         │         │
            ▼         ▼         ▼
    GET /api/build/ (各種パラメータ付き)
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| BuildIndex.tsx | `src/frontend/src/pages/build/BuildIndex.tsx` | ソース | 製造インデックス画面メインコンポーネント |
| BuildOrderTable.tsx | `src/frontend/src/tables/build/BuildOrderTable.tsx` | ソース | 製造オーダーテーブル |
| BuildOrderParametricTable.tsx | `src/frontend/src/tables/build/BuildOrderParametricTable.tsx` | ソース | パラメトリック製造オーダーテーブル |
| OrderCalendar.tsx | `src/frontend/src/components/calendar/OrderCalendar.tsx` | ソース | カレンダーコンポーネント |
| SegmentedControlPanel.tsx | `src/frontend/src/components/panels/SegmentedControlPanel.tsx` | ソース | セグメント切替パネル |
| PermissionDenied.tsx | `src/frontend/src/components/errors/PermissionDenied.tsx` | ソース | 権限エラーコンポーネント |
| PanelGroup.tsx | `src/frontend/src/components/panels/PanelGroup.tsx` | ソース | パネルグループコンポーネント |
| PageDetail.tsx | `src/frontend/src/components/nav/PageDetail.tsx` | ソース | ページヘッダーコンポーネント |
| Filter.tsx | `src/frontend/src/tables/Filter.tsx` | ソース | PartCategoryFilterの定義 |
