# 画面設計書 58-チーム設定完了画面

## 概要

本ドキュメントは、Chatwootのチーム設定完了画面の設計書です。チーム作成ウィザードの最終ステップとして、設定完了を確認する画面です。

### 本画面の処理概要

チーム作成フローの完了画面です。チーム作成とエージェント追加が完了したことを確認し、チーム一覧画面へ遷移するためのボタンを表示します。

**業務上の目的・背景**：チーム作成ウィザードの完了をユーザーに明確に伝え、次のアクション（チーム一覧へ戻る）への導線を提供します。

**画面へのアクセス方法**：チームエージェント追加画面でエージェント追加後に自動遷移

**主要な操作・処理内容**：
1. 設定完了メッセージの表示
2. 「チーム一覧へ」ボタンでチーム一覧画面へ遷移

**画面遷移**：
- 遷移元: チームエージェント追加画面（AddAgents）
- 遷移先: チーム一覧画面（settings_teams_list）

**権限による表示制御**：管理者（administrator）のみがこの画面にアクセス可能

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 13 | チーム管理 | 主機能 | チーム設定の完了確認 |

## 画面種別

完了（ウィザード形式の最終ステップ）

## URL/ルーティング

- パス（新規作成時）: `/app/accounts/:accountId/settings/teams/new/:teamId/finish`
- パス（編集時）: `/app/accounts/:accountId/settings/teams/:teamId/edit/finish`
- ルート名（新規作成時）: `settings_teams_finish`
- ルート名（編集時）: `settings_teams_edit_finish`
- 権限: administrator

## 入出力項目

なし（読み取り専用画面）

## 表示項目

| 項目名 | 型 | 説明 |
|--------|------|------|
| title | String | 完了タイトル（TEAMS_SETTINGS.FINISH.TITLE） |
| message | String | 完了メッセージ（TEAMS_SETTINGS.FINISH.MESSAGE） |
| buttonText | String | ボタンテキスト（TEAMS_SETTINGS.FINISH.BUTTON_TEXT） |

## イベント仕様

### 1-チーム一覧へボタン押下

**トリガー**: 「チーム一覧へ」ボタン押下

**処理フロー**:
1. `router-link`により`settings_teams_list`へ遷移

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

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

| 操作（イベント） | 対象テーブル | 操作種別 | 概要 |
|----------------|-------------|---------|------|
| なし | - | - | 読み取り専用画面のためデータ更新なし |

## メッセージ仕様

| 種別 | キー | 表示条件 | メッセージ内容 |
|------|------|----------|--------------|
| 成功 | TEAMS_SETTINGS.FINISH.TITLE | 常時 | 設定完了タイトル |
| 情報 | TEAMS_SETTINGS.FINISH.MESSAGE | 常時 | 設定完了メッセージ |
| 情報 | TEAMS_SETTINGS.FINISH.BUTTON_TEXT | 常時 | ボタンテキスト |

## 例外処理

| 例外状況 | 対応処理 |
|----------|----------|
| 権限不足 | ルートガードにより画面アクセス自体をブロック |

## 備考

- シンプルな完了画面で、EmptyStateコンポーネントを使用
- 新規作成フローと編集フローの両方で同じコンポーネントを共有
- チーム一覧画面への遷移のみを提供

---

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

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

### 推奨読解順序

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

Vueコンポーネントの構造を理解する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | FinishSetup.vue | `app/javascript/dashboard/routes/dashboard/settings/teams/FinishSetup.vue` | コンポーネント構造 |

**主要処理フロー**:
1. **L5-8**: コンポーネントインポート
2. **L15-18**: EmptyStateコンポーネントに国際化テキストを渡す
3. **L20-27**: router-linkでチーム一覧画面へのリンクを表示

#### Step 2: ルーティング設定を理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | teams.routes.js | `app/javascript/dashboard/routes/dashboard/settings/teams/teams.routes.js` | 完了画面のルート定義 |

**主要処理フロー**:
- **L63-70**: `settings_teams_finish`（新規作成時）
- **L104-111**: `settings_teams_edit_finish`（編集時）

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

```
FinishSetup.vue (コンポーネント)
    │
    └─ EmptyState.vue (子コンポーネント)
           │
           ├─ title: TEAMS_SETTINGS.FINISH.TITLE
           ├─ message: TEAMS_SETTINGS.FINISH.MESSAGE
           └─ button-text: TEAMS_SETTINGS.FINISH.BUTTON_TEXT
                  │
                  ▼
           slot content
                  │
                  └─ router-link
                         └─ { name: 'settings_teams_list' }
                                │
                                ▼
                         NextButton
                                └─ label: TEAMS_SETTINGS.FINISH.BUTTON_TEXT
```

### データフロー図

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

なし ──────────────────▶ EmptyState表示 ─────────────────▶ 画面表示
                                │
                                ▼
                         router-link押下
                                │
                                ▼
                         settings_teams_list
                         (チーム一覧画面へ遷移)
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| FinishSetup.vue | `app/javascript/dashboard/routes/dashboard/settings/teams/FinishSetup.vue` | ソース | メインコンポーネント |
| teams.routes.js | `app/javascript/dashboard/routes/dashboard/settings/teams/teams.routes.js` | ソース | ルーティング定義 |
| EmptyState.vue | `app/javascript/dashboard/components/widgets/EmptyState.vue` | ソース | 空状態/完了表示コンポーネント |
| Button.vue | `app/javascript/dashboard/components-next/button/Button.vue` | ソース | ボタンコンポーネント |
