# 画面設計書 27-顧客詳細画面

## 概要

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

### 本画面の処理概要

顧客詳細画面は、製品を購入する顧客企業の詳細情報を表示・管理するための画面である。本画面はCompanyDetailコンポーネントを継承し、販売管理の文脈で顧客情報を表示する。

**業務上の目的・背景**：販売業務において、顧客の情報管理は適切な取引関係の維持と顧客満足度向上に不可欠である。本画面では、顧客の基本情報に加え、その顧客への受注履歴や返品オーダー、割当在庫などを確認できる。これにより、営業担当者は顧客との取引状況を包括的に把握し、適切な対応を行うことができる。

**画面へのアクセス方法**：販売インデックス画面の顧客一覧から対象の顧客を選択、または受注詳細画面・返品オーダー詳細画面からリンク、あるいは直接URL `/sales/customer/:id/*` にアクセスすることで本画面を表示できる。

**主要な操作・処理内容**：
1. 顧客基本情報の表示・編集
2. 受注一覧の表示・管理
3. 返品オーダー一覧の表示・管理
4. 顧客に割り当てられた在庫一覧の表示
5. 連絡先・住所の管理
6. 添付ファイル・メモの管理

**画面遷移**：
- 遷移元：販売インデックス画面、受注詳細画面、返品オーダー詳細画面
- 遷移先：受注詳細画面、返品オーダー詳細画面

**権限による表示制御**：
- 会社詳細画面(CompanyDetail)の権限制御を継承
- `UserRoles.purchase_order` のChange権限がない場合、編集操作が無効化
- `UserRoles.purchase_order` のDelete権限がない場合、削除操作が無効化

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 23 | 会社マスタ管理 | 主機能 | 顧客情報の詳細表示・編集・削除処理 |
| 15 | 販売注文管理 | 遷移先機能 | 販売注文一覧の表示 |
| 18 | 返品注文管理 | 遷移先機能 | 返品オーダー一覧の表示 |

## 画面種別

詳細画面（CompanyDetailを継承）

## URL/ルーティング

| パス | 説明 |
|------|------|
| `/sales/customer/:id/*` | 顧客詳細画面 |

## 入出力項目

会社詳細画面(No.25)と同一。CompanyDetailコンポーネントを使用。

## 表示項目

会社詳細画面(No.25)と同一。CompanyDetailコンポーネントを使用。

ただし、以下のタブが主に表示される（is_customer=trueの場合）：
- Company Details
- Sales Orders（受注一覧）
- Return Orders（返品オーダー一覧）
- Assigned Stock（割当在庫一覧）
- Contacts（連絡先一覧）
- Addresses（住所一覧）
- Parameters
- Attachments
- Notes

## イベント仕様

会社詳細画面(No.25)と同一。CompanyDetailコンポーネントを使用。

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

会社詳細画面(No.25)と同一。CompanyDetailコンポーネントを使用。

## メッセージ仕様

会社詳細画面(No.25)と同一。

## 例外処理

会社詳細画面(No.25)と同一。

## 備考

- CustomerDetailは、CompanyDetailコンポーネントに以下のpropsを渡すラッパーコンポーネント：
  - title: "Customer"
  - breadcrumbs: [{ name: "Sales", url: "/sales/" }]
  - last_crumb_url: "/sales/customer"
- 会社が顧客として登録されていない場合（is_customer=false）でも表示は可能だが、顧客固有のタブ（Sales Orders, Return Orders, Assigned Stock）は非表示となる

---

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

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

### 推奨読解順序

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

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | CustomerDetail.tsx | `src/frontend/src/pages/company/CustomerDetail.tsx` | ラッパーコンポーネントの実装 |

**主要処理フロー**:
1. **5-12行目**: CompanyDetailコンポーネントを呼び出し、顧客固有のpropsを渡す
   - title: `t\`Customer\``
   - breadcrumbs: 販売メニューへのリンク
   - last_crumb_url: `/sales/customer`

#### Step 2: ベースコンポーネントを理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | CompanyDetail.tsx | `src/frontend/src/pages/company/CompanyDetail.tsx` | ベースとなる会社詳細コンポーネント |

詳細は会社詳細画面(No.25)のコードリーディングガイドを参照。

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

```
CustomerDetail.tsx
    │
    └─ CompanyDetail.tsx
           │
           ├─ props受け取り
           │      ├─ title: "Customer"
           │      ├─ breadcrumbs: [{ name: "Sales", url: "/sales/" }]
           │      └─ last_crumb_url: "/sales/customer"
           │
           └─ (会社詳細画面と同じ構成)
```

### データフロー図

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

URL /sales/customer/:id ──────▶ CustomerDetail ─────────────────▶ CompanyDetail
                                    │
                                    └─ props設定
                                       ├─ title
                                       ├─ breadcrumbs
                                       └─ last_crumb_url
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| CustomerDetail.tsx | `src/frontend/src/pages/company/CustomerDetail.tsx` | ソース | ラッパーコンポーネント |
| CompanyDetail.tsx | `src/frontend/src/pages/company/CompanyDetail.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` | ソース | 割当在庫一覧 |
