# 画面設計書 19-購買インデックス画面

## 概要

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

### 本画面の処理概要

本画面は、購買関連情報（発注書、サプライヤー、サプライヤー部品、メーカー、メーカー部品）を一覧表示し、購買業務の概要を把握するためのインデックス画面である。各カテゴリでテーブル/パラメトリック、またはカレンダー（発注書のみ）の表示形式を切り替えて使用できる。

**業務上の目的・背景**：購買管理において、発注書の状況、サプライヤー情報、サプライヤー部品情報、メーカー情報を一元的に把握することは、調達計画の管理、コスト管理、サプライチェーン管理の基盤となる。この画面では、購買に関わる主要な情報に一か所からアクセスできる。

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

**主要な操作・処理内容**：
1. 発注書一覧の表示（テーブル/カレンダー/パラメトリック形式）
2. サプライヤー一覧の表示（テーブル/パラメトリック形式）
3. サプライヤー部品一覧の表示（テーブル/パラメトリック形式）
4. メーカー一覧の表示（テーブル/パラメトリック形式）
5. メーカー部品一覧の表示（テーブル/パラメトリック形式）
6. 各種詳細画面への遷移
7. 新規データの作成（各テーブルから）

**画面遷移**：
- 遷移元：ホームダッシュボード、ナビゲーションメニュー
- 遷移先：発注書詳細画面、サプライヤー詳細画面、サプライヤー部品詳細画面、メーカー詳細画面、メーカー部品詳細画面

**権限による表示制御**：`purchase_order`ロールの表示権限がないユーザーには`PermissionDenied`画面を表示。個別パネルも関連権限で制御される。

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 12 | 発注書管理 | 主機能 | 発注書一覧の表示、詳細への遷移 |
| 22 | サプライヤー管理 | 主機能 | サプライヤー一覧の表示、詳細への遷移 |
| 24 | サプライヤー部品管理 | 主機能 | サプライヤー部品一覧の表示、詳細への遷移 |
| 23 | メーカー管理 | 主機能 | メーカー一覧の表示、詳細への遷移 |
| 25 | メーカー部品管理 | 主機能 | メーカー部品一覧の表示、詳細への遷移 |

## 画面種別

一覧（インデックス）

## URL/ルーティング

`/purchasing/` または `/purchasing`

## 入出力項目

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

## 表示項目

### パネル構成

| パネル名 | 表示条件 | 表示形式 | 内容 |
|---------|----------|----------|------|
| 発注書（Purchase Orders） | purchase_order権限あり | テーブル/カレンダー/パラメトリック | 発注書一覧 |
| サプライヤー（Suppliers） | 常時 | テーブル/パラメトリック | サプライヤー一覧 |
| サプライヤー部品（Supplier Parts） | 常時 | テーブル/パラメトリック | サプライヤー部品一覧 |
| メーカー（Manufacturers） | 常時 | テーブル/パラメトリック | メーカー一覧 |
| メーカー部品（Manufacturer Parts） | 常時 | テーブル/パラメトリック | メーカー部品一覧 |

### 発注書テーブル

テーブル形式での主な表示項目（`PurchaseOrderTable`）：

| 項目名 | データ型 | 説明 |
|--------|----------|------|
| 参照番号（Reference） | 文字列 | 発注書参照番号 |
| サプライヤー（Supplier） | リンク | サプライヤーへのリンク |
| サプライヤー参照番号 | 文字列 | サプライヤー側の参照番号 |
| 説明（Description） | 文字列 | 発注書の説明 |
| ステータス（Status） | バッジ | 発注書ステータス |
| アイテム数（Line Items） | 数値 | 発注明細行数 |
| 合計金額（Total Price） | 通貨 | 発注合計金額 |
| 目標日（Target Date） | 日付 | 納品目標日 |
| 担当者（Responsible） | ユーザー | 担当者 |

### サプライヤーテーブル

テーブル形式での主な表示項目（`CompanyTable`）：

| 項目名 | データ型 | 説明 |
|--------|----------|------|
| 名前（Name） | 文字列 | サプライヤー名 |
| 説明（Description） | 文字列 | サプライヤーの説明 |
| URL | リンク | サプライヤーWebサイト |
| 部品数（Parts） | 数値 | 登録サプライヤー部品数 |
| 発注書数（Purchase Orders） | 数値 | 関連発注書数 |

### サプライヤー部品テーブル

テーブル形式での主な表示項目（`SupplierPartTable`）：

| 項目名 | データ型 | 説明 |
|--------|----------|------|
| 部品（Part） | リンク | 内部部品へのリンク |
| サプライヤー（Supplier） | リンク | サプライヤーへのリンク |
| SKU | 文字列 | サプライヤー品番 |
| メーカー部品 | リンク | メーカー部品へのリンク |
| 説明（Description） | 文字列 | サプライヤー部品の説明 |
| 在庫数（In Stock） | 数値 | 現在の在庫数量 |
| 価格（Pricing） | 通貨 | 単価 |

### メーカーテーブル

テーブル形式での主な表示項目（`CompanyTable`）：

| 項目名 | データ型 | 説明 |
|--------|----------|------|
| 名前（Name） | 文字列 | メーカー名 |
| 説明（Description） | 文字列 | メーカーの説明 |
| URL | リンク | メーカーWebサイト |
| 部品数（Parts） | 数値 | 登録メーカー部品数 |

### メーカー部品テーブル

テーブル形式での主な表示項目（`ManufacturerPartTable`）：

| 項目名 | データ型 | 説明 |
|--------|----------|------|
| 部品（Part） | リンク | 内部部品へのリンク |
| メーカー（Manufacturer） | リンク | メーカーへのリンク |
| MPN | 文字列 | メーカー品番 |
| 説明（Description） | 文字列 | メーカー部品の説明 |

## イベント仕様

### 1-表示形式切替（共通）

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

**処理フロー**：
1. セグメントコントロールで表示形式を選択
2. 選択値をローカルストレージに保存（パネルごとに個別のキー）
3. 選択に応じたコンポーネントを表示

**ローカルストレージキー**：
- 発注書：`purchase-order-view`
- サプライヤー：`supplier-view`
- サプライヤー部品：`supplier-parts-view`
- メーカー：`manufacturer-view`
- メーカー部品：`manufacturer-parts-view`

### 2-行選択（各テーブル共通）

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

**処理フロー**：
1. 選択されたデータのPKを取得
2. 対応する詳細画面に遷移

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

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

**処理フロー**：
1. 選択されたイベント（発注書）のPKを取得
2. `/purchasing/purchase-order/{pk}/` に遷移

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

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

## メッセージ仕様

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

## 例外処理

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

## 備考

- 各パネルの表示形式の選択状態はローカルストレージに保存され、次回アクセス時に復元される
- 発注書カレンダーでは `outstanding=true` パラメータで未完了の発注書のみ表示
- サプライヤーテーブルは `is_supplier=true` パラメータでフィルタリング
- メーカーテーブルは `is_manufacturer=true` パラメータでフィルタリング
- 各パラメトリックテーブルは同一のフィルターパラメータを使用

---

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

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

### 推奨読解順序

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

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

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | ApiEndpoints.ts | `src/frontend/lib/enums/ApiEndpoints.ts` | purchase_order_list, company_list, supplier_part_list, manufacturer_part_list エンドポイント |
| 1-2 | ModelType.ts | `src/frontend/lib/enums/ModelType.ts` | ModelType.purchaseorder, company, supplierpart, manufacturerpart の定義 |

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

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

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

**主要処理フロー**:
1. **33-60行**: useLocalStorageで各パネルの表示形式を永続化
2. **62-196行**: panels定義（5つのSegmentedControlPanel）
3. **206-208行**: 権限チェック（未ログインまたはpurchase_order権限なしでPermissionDenied）
4. **210-220行**: レンダリング部分（PageDetail + PanelGroup）

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

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

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | PurchaseOrderTable.tsx | `src/frontend/src/tables/purchasing/PurchaseOrderTable.tsx` | 発注書テーブル |
| 3-2 | PurchaseOrderParametricTable.tsx | `src/frontend/src/tables/purchasing/PurchaseOrderParametricTable.tsx` | パラメトリック発注書テーブル |
| 3-3 | CompanyTable.tsx | `src/frontend/src/tables/company/CompanyTable.tsx` | 会社テーブル（サプライヤー/メーカー共用） |
| 3-4 | ParametricCompanyTable.tsx | `src/frontend/src/tables/company/ParametricCompanyTable.tsx` | パラメトリック会社テーブル |
| 3-5 | SupplierPartTable.tsx | `src/frontend/src/tables/purchasing/SupplierPartTable.tsx` | サプライヤー部品テーブル |
| 3-6 | SupplierPartParametricTable.tsx | `src/frontend/src/tables/purchasing/SupplierPartParametricTable.tsx` | パラメトリックサプライヤー部品テーブル |
| 3-7 | ManufacturerPartTable.tsx | `src/frontend/src/tables/purchasing/ManufacturerPartTable.tsx` | メーカー部品テーブル |
| 3-8 | ManufacturerPartParametricTable.tsx | `src/frontend/src/tables/purchasing/ManufacturerPartParametricTable.tsx` | パラメトリックメーカー部品テーブル |

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

```
PurchasingIndex (PurchasingIndex.tsx:33)
    │
    ├─ useUserState() - ユーザー状態取得
    │
    ├─ useLocalStorage('purchase-order-view') - 発注書表示形式
    ├─ useLocalStorage('supplier-view') - サプライヤー表示形式
    ├─ useLocalStorage('supplier-parts-view') - サプライヤー部品表示形式
    ├─ useLocalStorage('manufacturer-view') - メーカー表示形式
    ├─ useLocalStorage('manufacturer-parts-view') - メーカー部品表示形式
    │
    ├─ 権限チェック
    │      └─ !user.isLoggedIn() || !user.hasViewRole(UserRoles.purchase_order)
    │             └─ PermissionDenied
    │
    └─ PanelGroup
           ├─ SegmentedControlPanel('purchaseorders')
           │      ├─ Table: PurchaseOrderTable
           │      ├─ Calendar: OrderCalendar
           │      └─ Parametric: PurchaseOrderParametricTable
           │
           ├─ SegmentedControlPanel('suppliers')
           │      ├─ Table: CompanyTable(is_supplier=true)
           │      └─ Parametric: ParametricCompanyTable(is_supplier=true)
           │
           ├─ SegmentedControlPanel('supplier-parts')
           │      ├─ Table: SupplierPartTable
           │      └─ Parametric: SupplierPartParametricTable
           │
           ├─ SegmentedControlPanel('manufacturer')
           │      ├─ Table: CompanyTable(is_manufacturer=true)
           │      └─ Parametric: ParametricCompanyTable(is_manufacturer=true)
           │
           └─ SegmentedControlPanel('manufacturer-parts')
                  ├─ Table: ManufacturerPartTable
                  └─ Parametric: ManufacturerPartParametricTable
```

### データフロー図

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

URL アクセス ───▶ PurchasingIndex ───▶ 画面表示
                       │
                       ▼
                 権限チェック
                       │
                       ▼
                 各パネル表示形式判定
                 (localStorage)
                       │
            ┌─────────┼─────────┬─────────┬─────────┐
            ▼         ▼         ▼         ▼         ▼
        発注書    サプライヤー  サプライヤー部品  メーカー  メーカー部品
            │         │         │         │         │
            ▼         ▼         ▼         ▼         ▼
    各テーブル/パラメトリック/カレンダー表示
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| PurchasingIndex.tsx | `src/frontend/src/pages/purchasing/PurchasingIndex.tsx` | ソース | 購買インデックス画面メインコンポーネント |
| PurchaseOrderTable.tsx | `src/frontend/src/tables/purchasing/PurchaseOrderTable.tsx` | ソース | 発注書テーブル |
| PurchaseOrderParametricTable.tsx | `src/frontend/src/tables/purchasing/PurchaseOrderParametricTable.tsx` | ソース | パラメトリック発注書テーブル |
| CompanyTable.tsx | `src/frontend/src/tables/company/CompanyTable.tsx` | ソース | 会社テーブル |
| ParametricCompanyTable.tsx | `src/frontend/src/tables/company/ParametricCompanyTable.tsx` | ソース | パラメトリック会社テーブル |
| SupplierPartTable.tsx | `src/frontend/src/tables/purchasing/SupplierPartTable.tsx` | ソース | サプライヤー部品テーブル |
| SupplierPartParametricTable.tsx | `src/frontend/src/tables/purchasing/SupplierPartParametricTable.tsx` | ソース | パラメトリックサプライヤー部品テーブル |
| ManufacturerPartTable.tsx | `src/frontend/src/tables/purchasing/ManufacturerPartTable.tsx` | ソース | メーカー部品テーブル |
| ManufacturerPartParametricTable.tsx | `src/frontend/src/tables/purchasing/ManufacturerPartParametricTable.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` | ソース | 権限エラーコンポーネント |
