# 画面設計書 14-口座詳細画面（モバイル）

## 概要

本ドキュメントは、Actual Budgetアプリケーションにおけるモバイル向け口座詳細（取引一覧）画面の設計仕様を定義する。

### 本画面の処理概要

口座詳細画面（モバイル）は、特定の口座または口座グループの取引一覧を表示するモバイル最適化画面である。取引の一覧表示、検索、フィルタリング、新規取引追加、取引詳細への遷移などの機能を提供する。また、口座の編集（名前変更、メモ編集、クローズ/再オープン）も可能。

**業務上の目的・背景**：モバイルデバイスから口座の取引履歴を確認し、外出先でも財務状況を把握できるようにする。新規取引の追加や既存取引の確認をスマートフォンから手軽に行えることで、日々の財務管理の継続性を高める。

**画面へのアクセス方法**：口座一覧画面（モバイル）から口座項目をタップしてアクセスする。URLパターンは `/accounts/:id` の形式である。

**主要な操作・処理内容**：
1. 取引一覧の表示（残高付き）
2. 取引の検索
3. 新規取引の追加（右上の「+」ボタン）
4. 取引詳細画面への遷移（取引タップ）
5. 口座名タップで口座メニュー表示（名前編集、メモ編集、クローズ/再オープン、残高表示切替）
6. 銀行連携状態の表示

**画面遷移**：
- 遷移元：口座一覧画面（モバイル）
- 遷移先：取引編集画面（モバイル）、口座メニューモーダル

**権限による表示制御**：特になし。認証済みユーザーであれば全機能を利用可能。

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 9 | 取引追加・編集・削除 | 主機能 | モバイルでの取引表示・操作 |
| 13 | 取引検索・フィルタ | 補助機能 | モバイルでの取引フィルタリング |

## 画面種別

一覧

## URL/ルーティング

- `/accounts/:id` - 特定口座の取引一覧
- `/accounts/onbudget` - 予算内口座の取引一覧
- `/accounts/offbudget` - 予算外口座の取引一覧

## 入出力項目

| 項目名 | 項目ID | 入力/出力 | 型 | 必須 | 説明 |
|--------|--------|----------|-----|------|------|
| 口座ID | id | 入力（URL） | string | Yes | 表示対象口座のID、または「onbudget」「offbudget」 |
| 検索キーワード | search | 入力 | string | No | 取引検索用キーワード |

## 表示項目

| 項目名 | 説明 | データソース |
|--------|------|-------------|
| 口座名 | ヘッダーに表示される口座名（クローズ済みの場合は「Closed: 口座名」） | account.name |
| 同期ステータス | 銀行連携口座の同期状態を示す色付き丸 | account.bank, 同期状態 |
| 取引一覧 | 口座に属する取引のリスト | transactions |
| 口座残高 | 口座の現在残高 | accountBalance binding |
| クリア済残高 | クリア済取引の残高合計 | accountBalanceCleared binding |
| 未クリア残高 | 未クリア取引の残高合計 | accountBalanceUncleared binding |

### 口座グループ表示時の画面タイトル

| 口座ID | 画面タイトル |
|--------|------------|
| onbudget | On Budget Accounts |
| offbudget | Off Budget Accounts |
| uncategorized | Uncategorized |
| closed | Closed Accounts |
| その他（undefined） | All Accounts |

## イベント仕様

### 1-戻るボタン押下

ヘッダー左側の戻るボタン（MobileBackButton）を押下すると、前の画面（口座一覧画面）に戻る。

### 2-取引追加ボタン押下

ヘッダー右側の「+」ボタン（AddTransactionButton）を押下すると、取引編集画面（モバイル）に遷移する。口座IDが自動的に新規取引に設定される。

### 3-口座名タップ

ヘッダーの口座名（下線付きテキスト）をタップすると、account-menuモーダルが表示される。モーダルでは以下の操作が可能：
- 口座名の編集
- メモの編集
- 口座のクローズ/再オープン
- ランニングバランス表示の切替

### 4-取引項目タップ

取引一覧の各項目をタップすると、該当取引の編集画面（`/transactions/:transactionId`）に遷移する。

### 5-検索実行

検索フィールドにキーワードを入力すると、取引一覧がフィルタリングされる。

### 6-スクロール下端到達

取引一覧をスクロールして下端に到達すると、追加の取引データがロードされる（無限スクロール）。

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

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

| 操作（イベント） | 対象テーブル | 操作種別 | 概要 |
|----------------|-------------|---------|------|
| 画面表示 | transactions | SELECT | 口座の取引を取得 |
| 画面表示 | accounts | SELECT | 口座情報を取得 |
| 口座名編集 | accounts | UPDATE | 口座名を更新 |
| 口座クローズ | accounts | UPDATE | closed フラグを更新 |
| 口座再オープン | accounts | UPDATE | closed フラグを更新 |
| メモ保存 | notes | INSERT/UPDATE | 口座のメモを保存 |

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

#### accounts

| 操作 | 項目（カラム名） | 更新値・取得条件 | 備考 |
|-----|-----------------|-----------------|------|
| UPDATE | name | ユーザー入力値 | 口座名編集時 |
| UPDATE | closed | 0 または 1 | クローズ/再オープン時 |

#### notes

| 操作 | 項目（カラム名） | 更新値・取得条件 | 備考 |
|-----|-----------------|-----------------|------|
| INSERT/UPDATE | id | `account-${account.id}` | メモのキー |
| INSERT/UPDATE | note | ユーザー入力値 | メモ内容 |

## メッセージ仕様

| メッセージID | 種別 | メッセージ内容 | 表示条件 |
|-------------|------|---------------|---------|
| M001 | 情報 | Closed: {accountName} | クローズ済み口座の場合 |
| M002 | 情報 | On Budget Accounts | onbudgetグループ表示時 |
| M003 | 情報 | Off Budget Accounts | offbudgetグループ表示時 |
| M004 | 情報 | Uncategorized | uncategorizedグループ表示時 |
| M005 | 情報 | Closed Accounts | closedグループ表示時 |
| M006 | 情報 | All Accounts | 全口座表示時 |

## 例外処理

| 例外条件 | 処理内容 |
|---------|---------|
| 口座が存在しない | グループ表示として処理（All Accounts等） |
| 取引データなし | 空の一覧を表示 |
| データ取得エラー | ローディング状態を維持 |

## 備考

- 数値フォーマット（numberFormat）または小数表示設定（hideFraction）が変更された場合、コンポーネント全体が再レンダリングされる
- 銀行連携口座の場合、同期状態に応じたインジケータが口座名の左側に表示される
  - 同期中：黄色
  - 同期失敗：赤色
  - 正常：緑色
- 口座メニューモーダルを閉じるとcollapseModalsアクションが実行される

---

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

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

### 推奨読解順序

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

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | models/index.d.ts | `packages/loot-core/types/models/` | AccountEntity, TransactionEntityの型定義 |

**読解のコツ**: AccountEntityのclosed, bank, account_idフィールドに注目。

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

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | AccountPage.tsx | `packages/desktop-client/src/components/mobile/accounts/AccountPage.tsx` | メインコンポーネント |

**主要処理フロー**:
1. **行36-44**: useParams, useAccountで口座情報取得
2. **行46-62**: nameFromIdで口座グループ名を取得
3. **行64-94**: 口座の有無で表示を分岐（AccountTransactions vs グループ別取引）

#### Step 3: 口座ヘッダーを理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | AccountHeader | 同上（行97-227） | 口座名タップ時のメニュー処理 |

**主要処理フロー**:
- **行98-108**: 同期状態の取得（pending, failed）
- **行112-159**: 各種コールバック定義（onSave, onEditNotes, onCloseAccount, onReopenAccount, onToggleRunningBalance）
- **行161-185**: 口座名タップでaccount-menuモーダル表示

#### Step 4: 取引リストコンポーネントを理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 4-1 | AccountTransactions.tsx | `packages/desktop-client/src/components/mobile/accounts/AccountTransactions.tsx` | 口座別取引一覧 |
| 4-2 | AllAccountTransactions.tsx | 同ディレクトリ | 全口座取引一覧 |
| 4-3 | OnBudgetAccountTransactions.tsx | 同ディレクトリ | 予算内口座取引一覧 |
| 4-4 | OffBudgetAccountTransactions.tsx | 同ディレクトリ | 予算外口座取引一覧 |

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

```
AccountPage (エントリーポイント)
    |
    +-- MobilePageHeader
    |       +-- MobileBackButton
    |       +-- AccountHeader (口座名 + 同期インジケータ) [口座がある場合]
    |       |       +-- account-menuモーダル
    |       +-- NameOnlyHeader [口座グループの場合]
    |       +-- AddTransactionButton
    |
    +-- AccountTransactions [特定口座の場合]
    |       +-- TransactionListWithBalances
    |               +-- 検索機能
    |               +-- 取引一覧
    |               +-- 残高表示
    |
    +-- OnBudgetAccountTransactions [onbudgetの場合]
    +-- OffBudgetAccountTransactions [offbudgetの場合]
    +-- AllAccountTransactions [その他の場合]
```

### データフロー図

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

URL params        --->  useParams                  --->  accountIdParam
(/:id)                  (パラメータ取得)

accountIdParam    --->  useAccount                 --->  account object
                        (口座フック)

Redux state       --->  useSelector                --->  syncingAccountIds
(account.accountsSyncing)

Redux state       --->  useFailedAccounts          --->  failedAccounts Map
(failed accounts)

User action       --->  account-menu modal         --->  口座更新
(Account name tap)      (pushModal)

User action       --->  navigate                   --->  取引詳細画面
(Transaction tap)       (`/transactions/:id`)
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| AccountPage.tsx | `packages/desktop-client/src/components/mobile/accounts/AccountPage.tsx` | ソース | メインコンポーネント |
| AccountTransactions.tsx | `packages/desktop-client/src/components/mobile/accounts/AccountTransactions.tsx` | ソース | 口座別取引一覧 |
| AllAccountTransactions.tsx | `packages/desktop-client/src/components/mobile/accounts/AllAccountTransactions.tsx` | ソース | 全口座取引一覧 |
| OnBudgetAccountTransactions.tsx | `packages/desktop-client/src/components/mobile/accounts/OnBudgetAccountTransactions.tsx` | ソース | 予算内口座取引一覧 |
| OffBudgetAccountTransactions.tsx | `packages/desktop-client/src/components/mobile/accounts/OffBudgetAccountTransactions.tsx` | ソース | 予算外口座取引一覧 |
| TransactionListWithBalances.tsx | `packages/desktop-client/src/components/mobile/transactions/TransactionListWithBalances.tsx` | ソース | 残高付き取引リスト |
| MobileBackButton.tsx | `packages/desktop-client/src/components/mobile/MobileBackButton.tsx` | ソース | 戻るボタン |
| AddTransactionButton.tsx | `packages/desktop-client/src/components/mobile/transactions/AddTransactionButton.tsx` | ソース | 取引追加ボタン |
| accountsSlice.ts | `packages/desktop-client/src/accounts/accountsSlice.ts` | ソース | 口座Redux |
| modalsSlice.ts | `packages/desktop-client/src/modals/modalsSlice.ts` | ソース | モーダル管理Redux |
