# 画面設計書 25-会社詳細画面

## 概要

本ドキュメントは、InvenTreeシステムの会社詳細画面(CompanyDetail)の設計仕様を定義するものである。

### 本画面の処理概要

会社詳細画面は、サプライヤー、顧客、メーカーといった取引先企業の詳細情報を統合的に表示・管理するための汎用画面である。会社の種別（サプライヤー/顧客/メーカー）に応じて、関連する部品、注文、在庫などの情報を動的に表示する。

**業務上の目的・背景**：企業活動において、取引先企業の情報を一元的に管理することは、調達・販売・品質管理の効率化に不可欠である。本画面は、会社の基本情報（連絡先、住所、Webサイト等）と、その会社との取引履歴（発注書、受注、部品供給等）を統合的に表示する。これにより、取引先との関係を包括的に把握し、適切な取引判断を支援する。

**画面へのアクセス方法**：購買インデックス画面、販売インデックス画面から会社を選択、または直接URL `/company/:id/*` にアクセスすることで本画面を表示できる。サプライヤー、顧客、メーカーの各詳細画面は、本コンポーネントを継承して異なるパンくずリスト設定で使用される。

**主要な操作・処理内容**：
1. 会社基本情報の表示・編集（名前、説明、連絡先、Webサイト等）
2. 会社画像のアップロード・変更・削除
3. サプライヤー部品一覧の表示（サプライヤーの場合）
4. メーカー部品一覧の表示（メーカーの場合）
5. 発注書一覧の表示（サプライヤーの場合）
6. 受注一覧の表示（顧客の場合）
7. 返品オーダー一覧の表示（顧客の場合）
8. 在庫アイテム一覧の表示
9. 連絡先・住所の管理
10. 添付ファイル・メモの管理
11. 会社の削除

**画面遷移**：
- 遷移元：購買インデックス画面、販売インデックス画面、発注書詳細画面、受注詳細画面
- 遷移先：サプライヤー部品詳細画面、メーカー部品詳細画面、発注書詳細画面、受注詳細画面、返品オーダー詳細画面、在庫アイテム詳細画面

**権限による表示制御**：
- `ModelType.company` のView権限がない場合、本画面にアクセスできない
- `UserRoles.purchase_order` のChange権限がない場合、編集操作が無効化
- `UserRoles.purchase_order` のDelete権限がない場合、削除操作が無効化
- 会社の種別（is_supplier, is_customer, is_manufacturer）によりタブの表示/非表示が制御される

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 23 | 会社マスタ管理 | 主機能 | 会社情報の詳細表示・編集・削除処理 |
| 26 | 住所・連絡先管理 | 補助機能 | 連絡先・住所の一覧表示・編集 |
| 24 | サプライヤー部品管理 | 遷移先機能 | サプライヤー部品一覧の表示（サプライヤーの場合） |
| 25 | 製造元部品管理 | 遷移先機能 | メーカー部品一覧の表示（メーカーの場合） |
| 12 | 発注書管理 | 遷移先機能 | 発注書一覧の表示（サプライヤーの場合） |
| 15 | 販売注文管理 | 遷移先機能 | 販売注文一覧の表示（顧客の場合） |
| 18 | 返品注文管理 | 遷移先機能 | 返品オーダー一覧の表示（顧客の場合） |
| 8 | 在庫アイテム管理 | 遷移先機能 | 在庫アイテム一覧の表示 |
| 47 | 添付ファイル管理 | 補助機能 | 添付ファイルの表示・アップロード・削除 |
| 48 | メモ・ノート管理 | 補助機能 | 会社メモの表示・編集 |

## 画面種別

詳細画面（タブ切替型、会社種別により動的変化）

## URL/ルーティング

| パス | 説明 |
|------|------|
| `/company/:id/*` | 会社詳細画面（汎用） |
| `/purchasing/supplier/:id/*` | サプライヤー詳細画面（CompanyDetailを使用） |
| `/sales/customer/:id/*` | 顧客詳細画面（CompanyDetailを使用） |
| `/purchasing/manufacturer/:id/*` | メーカー詳細画面（CompanyDetailを使用） |

## 入出力項目

### 会社編集フォーム

| 項目名 | 項目ID | データ型 | 必須 | 説明 |
|--------|--------|----------|------|------|
| 会社名 | name | string | ○ | 会社名 |
| 説明 | description | string | - | 会社の説明 |
| Webサイト | website | string | - | 会社のWebサイトURL |
| 電話番号 | phone | string | - | 電話番号 |
| メールアドレス | email | string | - | メールアドレス |
| 税務ID | tax_id | string | - | 税務ID/法人番号 |
| デフォルト通貨 | currency | string | - | 取引で使用するデフォルト通貨 |
| サプライヤーフラグ | is_supplier | boolean | - | サプライヤーとして登録 |
| 顧客フラグ | is_customer | boolean | - | 顧客として登録 |
| メーカーフラグ | is_manufacturer | boolean | - | メーカーとして登録 |
| 有効フラグ | active | boolean | - | 会社が有効かどうか |

## 表示項目

### 詳細パネル - 左側（基本情報）

| 項目名 | フィールド | データ型 | 説明 |
|--------|-----------|----------|------|
| 説明 | description | string | 会社の説明（コピー可能） |
| Webサイト | website | link | 会社のWebサイト（外部リンク） |
| 電話番号 | phone | string | 電話番号（コピー可能） |
| メールアドレス | email | string | メールアドレス（コピー可能） |
| 税務ID | tax_id | string | 税務ID（コピー可能） |

### 詳細パネル - 右側（種別・通貨）

| 項目名 | フィールド | データ型 | 説明 |
|--------|-----------|----------|------|
| デフォルト通貨 | currency | string | デフォルト通貨 |
| サプライヤー | is_supplier | boolean | サプライヤーフラグ |
| メーカー | is_manufacturer | boolean | メーカーフラグ |
| 顧客 | is_customer | boolean | 顧客フラグ |

### ステータスバッジ

| バッジ名 | 表示条件 | 色 |
|---------|---------|-----|
| Inactive | active == false | red |

### タブ構成（動的）

| タブ名 | 表示条件 | 内容 |
|--------|---------|------|
| Company Details | 常時 | 会社の詳細情報 |
| Supplied Parts | is_supplier == true | サプライヤー部品一覧 |
| Manufactured Parts | is_manufacturer == true | メーカー部品一覧 |
| Purchase Orders | is_supplier == true | 発注書一覧 |
| Stock Items | is_supplier == true または is_manufacturer == true | 在庫アイテム一覧 |
| Sales Orders | is_customer == true | 受注一覧 |
| Return Orders | is_customer == true | 返品オーダー一覧 |
| Assigned Stock | is_customer == true | 割当在庫一覧 |
| Contacts | 常時 | 連絡先一覧 |
| Addresses | 常時 | 住所一覧 |
| Parameters | 常時 | パラメータ一覧 |
| Attachments | 常時 | 添付ファイル一覧 |
| Notes | 常時 | メモ |

## イベント仕様

### 01-会社編集ボタン押下

**トリガー**：「Edit」ボタン/メニューをクリック

**前提条件**：`UserRoles.purchase_order` のChange権限を保持

**処理フロー**：
1. 編集フォームモーダルを表示
2. 各項目を編集
3. 保存ボタン押下で `PATCH /api/company/:id/` を実行
4. 成功時、画面をリフレッシュ

### 02-会社削除ボタン押下

**トリガー**：「Delete」メニューをクリック

**前提条件**：`UserRoles.purchase_order` のDelete権限を保持

**処理フロー**：
1. 削除確認モーダルを表示
2. 確認後、`DELETE /api/company/:id/` を実行
3. 成功時、ホーム画面（/）に遷移

### 03-画像アップロード

**トリガー**：会社画像エリアでアップロード操作

**処理フロー**：
1. ファイル選択ダイアログを表示
2. 画像ファイルを選択
3. `POST /api/company/:id/` で画像をアップロード
4. 成功時、画像を更新表示

### 04-連絡先追加

**トリガー**：連絡先タブ内の「Add Contact」ボタンをクリック

**処理フロー**：
1. 連絡先追加フォームモーダルを表示
2. 連絡先情報を入力
3. 保存ボタン押下で `POST /api/company/contact/` を実行
4. 成功時、連絡先一覧をリフレッシュ

### 05-住所追加

**トリガー**：住所タブ内の「Add Address」ボタンをクリック

**処理フロー**：
1. 住所追加フォームモーダルを表示
2. 住所情報を入力
3. 保存ボタン押下で `POST /api/company/address/` を実行
4. 成功時、住所一覧をリフレッシュ

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

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

| 操作（イベント） | 対象テーブル | 操作種別 | 概要 |
|----------------|-------------|---------|------|
| 会社編集 | Company | UPDATE | 会社情報の更新 |
| 会社削除 | Company | DELETE | 会社レコードの削除 |
| 画像アップロード | Company | UPDATE | 画像フィールドの更新 |
| 連絡先追加 | Contact | INSERT | 連絡先の追加 |
| 住所追加 | Address | INSERT | 住所の追加 |

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

#### Company（会社編集時）

| 操作 | 項目（カラム名） | 更新値・取得条件 | 備考 |
|-----|-----------------|-----------------|------|
| UPDATE | name | フォーム入力値 | 会社名 |
| UPDATE | description | フォーム入力値 | 説明 |
| UPDATE | website | フォーム入力値 | WebサイトURL |
| UPDATE | phone | フォーム入力値 | 電話番号 |
| UPDATE | email | フォーム入力値 | メールアドレス |
| UPDATE | tax_id | フォーム入力値 | 税務ID |
| UPDATE | currency | フォーム入力値 | デフォルト通貨 |
| UPDATE | is_supplier | フォーム入力値 | サプライヤーフラグ |
| UPDATE | is_customer | フォーム入力値 | 顧客フラグ |
| UPDATE | is_manufacturer | フォーム入力値 | メーカーフラグ |
| UPDATE | active | フォーム入力値 | 有効フラグ |

## メッセージ仕様

| メッセージID | 種別 | メッセージ内容 | 表示条件 |
|-------------|------|---------------|----------|
| MSG-CO-001 | 成功 | Company updated successfully | 会社編集成功時 |
| MSG-CO-002 | 成功 | Company deleted successfully | 会社削除成功時 |
| MSG-CO-003 | エラー | Failed to delete company | 会社削除失敗時 |
| MSG-CO-004 | 成功 | Contact added successfully | 連絡先追加成功時 |
| MSG-CO-005 | 成功 | Address added successfully | 住所追加成功時 |

## 例外処理

| 例外条件 | 表示内容 | 処理 |
|----------|---------|------|
| 権限不足 | InstanceDetail権限チェック | company権限がない場合 |
| 会社未存在 | 404エラー | 指定IDの会社が存在しない場合 |
| API通信エラー | エラー通知 | 各種操作失敗時 |
| 削除不可（関連データ存在） | エラー通知 | 関連する発注書、受注等が存在する場合 |

## 備考

- CompanyDetailコンポーネントは汎用的に設計されており、propsで`title`、`breadcrumbs`、`last_crumb_url`を受け取ることで、サプライヤー/顧客/メーカー各詳細画面として機能する
- 会社の種別フラグ（is_supplier, is_customer, is_manufacturer）は複数同時に有効化可能であり、タブ表示もそれに応じて動的に変化する
- 画像操作（アップロード、ダウンロード、削除）はDetailsImageコンポーネントで提供
- 削除後の遷移先はホーム画面（/）に固定されている

---

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

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

### 推奨読解順序

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

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | ApiEndpoints.tsx | `src/frontend/lib/enums/ApiEndpoints.tsx` | company関連エンドポイント（130-135行目） |
| 1-2 | ModelType.ts | `src/frontend/lib/enums/ModelType.ts` | companyモデルタイプ |

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

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | CompanyDetail.tsx | `src/frontend/src/pages/company/CompanyDetail.tsx` | 画面全体の構成 |

**主要処理フロー**:
1. **59-64行目**: CompanyDetailPropsの型定義（title, breadcrumbs, last_crumb_url）
2. **74-83行目**: useInstanceフックで会社データを取得
3. **85-176行目**: 詳細パネルの定義
4. **178-283行目**: タブパネル定義（会社種別による条件分岐）
5. **285-300行目**: 編集・削除モーダルの定義
6. **302-324行目**: アクションボタンの定義
7. **326-334行目**: ステータスバッジ定義

#### Step 3: 継承画面を理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | SupplierDetail.tsx | `src/frontend/src/pages/company/SupplierDetail.tsx` | サプライヤー固有のprops設定 |
| 3-2 | CustomerDetail.tsx | `src/frontend/src/pages/company/CustomerDetail.tsx` | 顧客固有のprops設定 |
| 3-3 | ManufacturerDetail.tsx | `src/frontend/src/pages/company/ManufacturerDetail.tsx` | メーカー固有のprops設定 |

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

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 4-1 | SupplierPartTable.tsx | `src/frontend/src/tables/purchasing/SupplierPartTable.tsx` | サプライヤー部品一覧 |
| 4-2 | ManufacturerPartTable.tsx | `src/frontend/src/tables/purchasing/ManufacturerPartTable.tsx` | メーカー部品一覧 |
| 4-3 | ContactTable.tsx | `src/frontend/src/tables/company/ContactTable.tsx` | 連絡先一覧 |
| 4-4 | AddressTable.tsx | `src/frontend/src/tables/company/AddressTable.tsx` | 住所一覧 |

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

```
CompanyDetail.tsx (props: title, breadcrumbs, last_crumb_url)
    │
    ├─ SupplierDetail.tsx
    ├─ CustomerDetail.tsx
    └─ ManufacturerDetail.tsx

CompanyDetail.tsx
    │
    ├─ useInstance (会社データ取得)
    │      └─ GET /api/company/:id/
    │
    ├─ PageDetail (ページヘッダー)
    │      ├─ DetailsBadge (Inactive)
    │      └─ Actions
    │             ├─ AdminButton
    │             ├─ PrintingActions
    │             └─ OptionsActionDropdown
    │
    └─ PanelGroup
           │
           ├─ Panel (details)
           │      └─ ItemDetailsGrid
           │             ├─ DetailsImage (画像操作)
           │             └─ DetailsTable × 2
           │
           ├─ Panel (supplied-parts) [is_supplier]
           │      └─ SupplierPartTable
           │
           ├─ Panel (manufactured-parts) [is_manufacturer]
           │      └─ ManufacturerPartTable
           │
           ├─ Panel (purchase-orders) [is_supplier]
           │      └─ PurchaseOrderTable
           │
           ├─ Panel (stock-items) [is_supplier || is_manufacturer]
           │      └─ StockItemTable
           │
           ├─ Panel (sales-orders) [is_customer]
           │      └─ SalesOrderTable
           │
           ├─ Panel (return-orders) [is_customer]
           │      └─ ReturnOrderTable
           │
           ├─ Panel (assigned-stock) [is_customer]
           │      └─ StockItemTable
           │
           ├─ Panel (contacts)
           │      └─ ContactTable
           │
           ├─ Panel (addresses)
           │      └─ AddressTable
           │
           ├─ ParametersPanel
           ├─ AttachmentPanel
           └─ NotesPanel
```

### データフロー図

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

URL /:id ────────────────────▶ useInstance ────────────────────▶ 詳細表示
                                GET /api/company/:id/

Edit ────────────────────────▶ useEditApiFormModal ────────────▶ 会社更新
                                PATCH /api/company/:id/

Delete ──────────────────────▶ useDeleteApiFormModal ──────────▶ 会社削除
                                DELETE /api/company/:id/           → ホーム遷移
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| CompanyDetail.tsx | `src/frontend/src/pages/company/CompanyDetail.tsx` | ソース | メイン画面コンポーネント |
| SupplierDetail.tsx | `src/frontend/src/pages/company/SupplierDetail.tsx` | ソース | サプライヤー詳細ラッパー |
| CustomerDetail.tsx | `src/frontend/src/pages/company/CustomerDetail.tsx` | ソース | 顧客詳細ラッパー |
| ManufacturerDetail.tsx | `src/frontend/src/pages/company/ManufacturerDetail.tsx` | ソース | メーカー詳細ラッパー |
| SupplierPartTable.tsx | `src/frontend/src/tables/purchasing/SupplierPartTable.tsx` | ソース | サプライヤー部品一覧 |
| ManufacturerPartTable.tsx | `src/frontend/src/tables/purchasing/ManufacturerPartTable.tsx` | ソース | メーカー部品一覧 |
| PurchaseOrderTable.tsx | `src/frontend/src/tables/purchasing/PurchaseOrderTable.tsx` | ソース | 発注書一覧 |
| SalesOrderTable.tsx | `src/frontend/src/tables/sales/SalesOrderTable.tsx` | ソース | 受注一覧 |
| ReturnOrderTable.tsx | `src/frontend/src/tables/sales/ReturnOrderTable.tsx` | ソース | 返品オーダー一覧 |
| StockItemTable.tsx | `src/frontend/src/tables/stock/StockItemTable.tsx` | ソース | 在庫アイテム一覧 |
| ContactTable.tsx | `src/frontend/src/tables/company/ContactTable.tsx` | ソース | 連絡先一覧 |
| AddressTable.tsx | `src/frontend/src/tables/company/AddressTable.tsx` | ソース | 住所一覧 |
| CompanyForms.tsx | `src/frontend/src/forms/CompanyForms.tsx` | ソース | フォーム定義 |
| DetailsImage.tsx | `src/frontend/src/components/details/DetailsImage.tsx` | ソース | 画像操作コンポーネント |
