# 画面設計書 80-割り当てポリシー一覧画面

## 概要

本ドキュメントはChatwootの割り当てポリシー一覧画面に関する設計書です。会話の自動割り当てとエージェント容量設定の2種類のポリシー管理へのナビゲーションを提供する画面について記述しています。

### 本画面の処理概要

本画面は、割り当てポリシーの管理機能へのエントリーポイントとなるナビゲーション画面です。エージェント割り当てポリシー（会話の自動割り当てルール）とエージェント容量ポリシー（各エージェントの処理可能会話数）の2つの管理機能へのアクセスを提供します。

**業務上の目的・背景**：大規模なカスタマーサポートチームでは、会話を適切なエージェントに効率的に割り当てることが重要です。ラウンドロビン方式、負荷分散方式、スキルベース割り当てなど、組織のニーズに合わせた割り当てルールを設定することで、応答時間の短縮と業務負荷の均等化を実現できます。また、各エージェントの処理容量を設定することで、過負荷を防ぎ、サービス品質を維持できます。

**画面へのアクセス方法**：サイドバーの「設定」から「割り当てポリシー」メニューを選択してアクセスします。または、URLで直接 `/app/accounts/:accountId/settings/assignment-policy/index` にアクセスすることもできます。

**主要な操作・処理内容**：
1. エージェント割り当てポリシー管理画面への遷移：カードクリックで詳細画面に遷移
2. エージェント容量ポリシー管理画面への遷移：カードクリックで詳細画面に遷移

**画面遷移**：
- 遷移元：設定ホーム画面
- 遷移先：エージェント割り当て一覧画面（agent_assignment_policy_index）、エージェント容量一覧画面（agent_capacity_policy_index）

**権限による表示制御**：管理者（administrator）権限を持つユーザーのみがアクセス可能です。

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 24 | 割り当てポリシー | 主機能 | 割り当てポリシーの一覧表示とナビゲーション |

## 画面種別

ナビゲーション

## URL/ルーティング

| 項目 | 値 |
|------|-----|
| パス | `/app/accounts/:accountId/settings/assignment-policy/index` |
| ルート名 | `assignment_policy_index` |
| コンポーネント | `Index.vue` |

## 入出力項目

この画面は表示とナビゲーションのみのため、入力項目はありません。

## 表示項目

| 項目名 | データソース | 説明 |
|--------|-------------|------|
| エージェント割り当てカード | agentAssignments[0] | 割り当てポリシー管理カード |
| エージェント容量カード | agentAssignments[1] | 容量ポリシー管理カード |
| タイトル | item.title | 各ポリシーカードのタイトル |
| 説明 | item.description | 各ポリシーカードの説明 |
| 機能リスト | item.features | 各ポリシーの主な機能一覧 |

### エージェント割り当てポリシーカード

| 機能アイコン | 機能説明 |
|-------------|---------|
| i-lucide-circle-fading-arrow-up | 優先度に基づく割り当て |
| i-lucide-scale | 負荷分散 |
| i-lucide-inbox | インボックス別設定 |

### エージェント容量ポリシーカード

| 機能アイコン | 機能説明 |
|-------------|---------|
| i-lucide-glass-water | 容量設定 |
| i-lucide-circle-minus | 過負荷防止 |
| i-lucide-users-round | ユーザー別設定 |

## イベント仕様

### 1-割り当てポリシーカード押下

**トリガー**: エージェント割り当てカードのクリック

**処理フロー**:
1. `handleClick(item.key)`を実行
2. `router.push({ name: 'agent_assignment_policy_index' })`で遷移
3. エージェント割り当て一覧画面を表示

### 2-容量ポリシーカード押下

**トリガー**: エージェント容量カードのクリック

**処理フロー**:
1. `handleClick(item.key)`を実行
2. `router.push({ name: 'agent_capacity_policy_index' })`で遷移
3. エージェント容量一覧画面を表示

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

この画面は表示とナビゲーションのみのため、データベースの更新は行いません。

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

| 操作（イベント） | 対象テーブル | 操作種別 | 概要 |
|----------------|-------------|---------|------|
| なし | - | - | この画面はナビゲーションのみ |

## メッセージ仕様

| 種別 | キー | メッセージ | 表示条件 |
|------|-----|-----------|---------|
| ヘッダータイトル | ASSIGNMENT_POLICY.INDEX.HEADER.TITLE | 割り当てポリシー | 画面ヘッダー |
| ヘッダー説明 | ASSIGNMENT_POLICY.INDEX.HEADER.DESCRIPTION | 会話の自動割り当てとエージェント容量を管理 | 画面ヘッダー |
| カードタイトル1 | ASSIGNMENT_POLICY.INDEX.ASSIGNMENT_POLICY.TITLE | エージェント割り当てポリシー | 割り当てカード |
| カード説明1 | ASSIGNMENT_POLICY.INDEX.ASSIGNMENT_POLICY.DESCRIPTION | 会話の自動割り当てルールを設定 | 割り当てカード |
| カードタイトル2 | ASSIGNMENT_POLICY.INDEX.AGENT_CAPACITY_POLICY.TITLE | エージェント容量ポリシー | 容量カード |
| カード説明2 | ASSIGNMENT_POLICY.INDEX.AGENT_CAPACITY_POLICY.DESCRIPTION | エージェントの処理容量を設定 | 容量カード |

## 例外処理

| 例外条件 | 処理内容 |
|---------|---------|
| 権限不足 | 管理者権限がない場合、画面にアクセスできない |
| 機能フラグ無効 | ASSIGNMENT_V2機能が無効な場合、画面にアクセスできない |

## 備考

- この画面は割り当てポリシー管理のハブ画面（ナビゲーション画面）
- 実際のCRUD操作は遷移先の画面で行う
- FEATURE_FLAGS.ASSIGNMENT_V2で機能制御
- AssignmentCardコンポーネントでカード形式のナビゲーションを提供
- レスポンシブデザイン対応（2XL以上で2カラム、それ以下で1カラム）

---

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

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

### 推奨読解順序

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

この画面はナビゲーション画面のため、主にi18nのキー構造を理解することが重要です。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | assignmentPolicy.routes.js | `app/javascript/dashboard/routes/dashboard/settings/assignmentPolicy/assignmentPolicy.routes.js` | ルーティング構造と子ルート |

**読解のコツ**: この画面は3種類の子画面（assignment, capacity）を持つ親画面。各子画面にはCRUD操作用のルートがある。

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

処理の起点となるVueコンポーネントを理解します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | Index.vue | `app/javascript/dashboard/routes/dashboard/settings/assignmentPolicy/Index.vue` | ナビゲーションカードの生成、クリックハンドリング |

**主要処理フロー**:
1. **行12-51**: `agentAssignments` computedで2つのカード情報を定義
2. **行53-55**: `handleClick`でルート名を使用して遷移

#### Step 3: 子画面のルートを理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | AgentAssignmentIndexPage.vue | `app/javascript/dashboard/routes/dashboard/settings/assignmentPolicy/pages/AgentAssignmentIndexPage.vue` | 割り当てルール一覧 |
| 3-2 | AgentCapacityIndexPage.vue | `app/javascript/dashboard/routes/dashboard/settings/assignmentPolicy/pages/AgentCapacityIndexPage.vue` | 容量設定一覧 |

#### Step 4: 共通コンポーネントを理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 4-1 | AssignmentCard.vue | `app/javascript/dashboard/components-next/AssignmentPolicy/AssignmentCard/AssignmentCard.vue` | ナビゲーションカードUI |

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

```
Index.vue (エントリーポイント)
    │
    ├─ computed: agentAssignments
    │      └─ 2つのカード情報を定義
    │             ├─ agent_assignment_policy_index
    │             └─ agent_capacity_policy_index
    │
    ├─ AssignmentCard (v-for)
    │      ├─ title
    │      ├─ description
    │      └─ features
    │
    └─ @click → handleClick
           └─ router.push({ name: item.key })
                  ├─ → AgentAssignmentIndexPage.vue
                  └─ → AgentCapacityIndexPage.vue
```

### データフロー図

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

カードクリック ──────────▶ handleClick ────────────────▶ router.push
       │                        │
       │                        ▼
       └── item.key ─────────── ルート名解決 ──────────▶ 画面遷移

[表示データ]

i18n keys ─────────────▶ $t() ──────────────────────────▶ ローカライズ文字列
       │                        │
       │                        ▼
       └────────────────── AssignmentCard ────────────▶ カード表示
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| Index.vue | `app/javascript/dashboard/routes/dashboard/settings/assignmentPolicy/Index.vue` | ソース | メイン画面コンポーネント |
| assignmentPolicy.routes.js | `app/javascript/dashboard/routes/dashboard/settings/assignmentPolicy/assignmentPolicy.routes.js` | ソース | ルーティング定義 |
| AssignmentCard.vue | `app/javascript/dashboard/components-next/AssignmentPolicy/AssignmentCard/AssignmentCard.vue` | ソース | ナビゲーションカードコンポーネント |
| AgentAssignmentIndexPage.vue | `app/javascript/dashboard/routes/dashboard/settings/assignmentPolicy/pages/AgentAssignmentIndexPage.vue` | ソース | 割り当てルール一覧（遷移先） |
| AgentAssignmentCreatePage.vue | `app/javascript/dashboard/routes/dashboard/settings/assignmentPolicy/pages/AgentAssignmentCreatePage.vue` | ソース | 割り当てルール作成（遷移先） |
| AgentAssignmentEditPage.vue | `app/javascript/dashboard/routes/dashboard/settings/assignmentPolicy/pages/AgentAssignmentEditPage.vue` | ソース | 割り当てルール編集（遷移先） |
| AgentCapacityIndexPage.vue | `app/javascript/dashboard/routes/dashboard/settings/assignmentPolicy/pages/AgentCapacityIndexPage.vue` | ソース | 容量設定一覧（遷移先） |
| AgentCapacityCreatePage.vue | `app/javascript/dashboard/routes/dashboard/settings/assignmentPolicy/pages/AgentCapacityCreatePage.vue` | ソース | 容量設定作成（遷移先） |
| AgentCapacityEditPage.vue | `app/javascript/dashboard/routes/dashboard/settings/assignmentPolicy/pages/AgentCapacityEditPage.vue` | ソース | 容量設定編集（遷移先） |
| SettingsLayout.vue | `app/javascript/dashboard/routes/dashboard/settings/SettingsLayout.vue` | ソース | 設定画面共通レイアウト |
| BaseSettingsHeader.vue | `app/javascript/dashboard/routes/dashboard/settings/components/BaseSettingsHeader.vue` | ソース | 設定ヘッダーコンポーネント |
