# 画面設計書 17-スケジュール一覧画面（モバイル）

## 概要

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

### 本画面の処理概要

スケジュール一覧画面（モバイル）は、定期取引スケジュールの一覧表示と管理を行うモバイル最適化画面である。スケジュールの一覧表示、検索、新規作成、編集、削除などの機能を提供する。

**業務上の目的・背景**：モバイルデバイスからでも定期取引の管理ができるようにすることで、どこにいても支払いスケジュールを確認・管理できる。予定されている支払いの状況（Due/Paid/Upcoming/Missed）を一目で確認し、必要に応じて編集や削除が可能。

**画面へのアクセス方法**：サイドバーの「Schedules」メニューをタップしてアクセスする。URLパターンは `/schedules` である。

**主要な操作・処理内容**：
1. スケジュール一覧の表示（フィルタリング対応）
2. 新規スケジュールの作成（画面遷移）
3. 既存スケジュールの編集（画面遷移）
4. スケジュールの削除（スワイプ操作）
5. 完了済みスケジュールの表示/非表示切り替え

**画面遷移**：
- 遷移元：サイドバー
- 遷移先：スケジュール編集画面（モバイル）

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

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 21 | 定期取引スケジュール | 主機能 | モバイルでのスケジュール一覧表示 |
| 60 | レスポンシブUI | 補助機能 | モバイル最適化表示 |

## 画面種別

一覧

## URL/ルーティング

`/schedules`

## 入出力項目

| 項目名 | 項目ID | 入力/出力 | 型 | 必須 | 説明 |
|--------|--------|----------|-----|------|------|
| フィルタ | filter | 入力 | string | No | スケジュール検索用キーワード |

## 表示項目

| 項目名 | 説明 | データソース |
|--------|------|-------------|
| ページタイトル | 「Schedules」下線付き | i18n |
| 検索フィールド | スケジュール検索用 | - |
| スケジュール一覧 | スケジュールのリスト | schedules |

### スケジュールリスト項目

| 項目名 | 説明 |
|--------|------|
| スケジュール名 | スケジュール名または支払先名 |
| 次回日付 | 次回実行日 |
| ステータス | Due/Paid/Upcoming/Missed/Completed |
| 金額 | 取引金額 |

## イベント仕様

### 1-スケジュール追加ボタン押下

ヘッダー右側の「+」ボタン（AddScheduleButton）を押下すると、スケジュール編集画面（`/schedules/new`）に遷移する。

### 2-フィルタ入力

検索フィールドにキーワードを入力すると、スケジュール一覧がフィルタリングされる。フィルタはスケジュール名、支払先名、口座名、金額、ステータス、次回日付に対して適用される。

### 3-スケジュール項目タップ

スケジュール項目をタップすると、スケジュール編集画面（`/schedules/:id`）に遷移する。

### 4-スケジュール削除（スワイプ）

スケジュール項目を左にスワイプすると削除オプションが表示され、削除を実行できる。削除後はUndo通知が表示される。

### 5-完了済みスケジュール表示

完了済みスケジュールがある場合、「Show completed schedules」ボタンが表示される。タップすると完了済みスケジュールも一覧に表示される。

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

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

| 操作（イベント） | 対象テーブル | 操作種別 | 概要 |
|----------------|-------------|---------|------|
| 画面表示 | schedules | SELECT | 全スケジュールを取得 |
| スケジュール削除 | schedules | DELETE | スケジュールを削除 |

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

#### schedules

| 操作 | 項目（カラム名） | 更新値・取得条件 | 備考 |
|-----|-----------------|-----------------|------|
| DELETE | - | id = 指定ID | スワイプ削除時 |

## メッセージ仕様

| メッセージID | 種別 | メッセージ内容 | 表示条件 |
|-------------|------|---------------|---------|
| M001 | 情報 | Filter schedules... | 検索プレースホルダー |
| M002 | 成功 | Schedule deleted successfully | 削除成功時（Undo通知） |
| M003 | エラー | Failed to delete schedule. Please try again. | 削除失敗時 |

## 例外処理

| 例外条件 | 処理内容 |
|---------|---------|
| スケジュールデータなし | 空のリストを表示 |
| 削除エラー | エラー通知を表示 |

## 備考

- フィルタは正規化された文字列で比較（getNormalisedString）
- 金額表示は近似値/範囲の場合は「~」プレフィックスが付く
- ステータスはstatusesマップから取得
- ローディング中はisLoading状態で表示
- useUndoフックでUndo通知を提供

---

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

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

### 推奨読解順序

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

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

**読解のコツ**: _amount, _amountOp, next_date, completedフィールドに注目。

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

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

**主要処理フロー**:
1. **行32-39**: 各種フックでデータ取得（useSchedules, usePayees, useAccounts）
2. **行41-46**: useSchedulesでスケジュールとステータス取得
3. **行51-83**: フィルタリングロジック（名前、支払先、口座、金額、日付、ステータス）
4. **行84-89**: 完了済みスケジュールのフィルタリング
5. **行91-96**: handleSchedulePressコールバック
6. **行98-118**: handleScheduleDeleteコールバック（showUndoNotification使用）

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

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | SchedulesList.tsx | 同ディレクトリ | スケジュールリスト表示 |

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

```
MobileSchedulesPage (エントリーポイント)
    |
    +-- Page
    |       +-- MobilePageHeader
    |               +-- Text (Schedules)
    |               +-- AddScheduleButton --> navigate('/schedules/new')
    |
    +-- View (検索行)
    |       +-- Search (フィルタ入力)
    |
    +-- SchedulesList
            +-- スケジュール項目
            |       +-- スワイプ削除
            |       +-- タップ --> navigate('/schedules/:id')
            +-- Show completed schedules ボタン
```

### データフロー図

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

DB schedules      --->  useSchedules               --->  schedules array
(q('schedules'))        (フック)                          statuses Map

payees store      --->  usePayees                  --->  payees array
accounts store    --->  useAccounts                --->  accounts array

User input        --->  filterIncludes             --->  filteredSchedules
(filter)                (正規化比較)

User action       --->  send('schedule/delete')    --->  スケジュール削除
(Swipe delete)

User action       --->  navigate('/schedules/:id') --->  編集画面遷移
(Item tap)
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| MobileSchedulesPage.tsx | `packages/desktop-client/src/components/mobile/schedules/MobileSchedulesPage.tsx` | ソース | メインコンポーネント |
| SchedulesList.tsx | `packages/desktop-client/src/components/mobile/schedules/SchedulesList.tsx` | ソース | スケジュールリスト |
| AddScheduleButton.tsx | `packages/desktop-client/src/components/mobile/schedules/AddScheduleButton.tsx` | ソース | 追加ボタン |
| useSchedules.ts | `packages/desktop-client/src/hooks/useSchedules.ts` | ソース | スケジュールデータフック |
| useUndo.ts | `packages/desktop-client/src/hooks/useUndo.ts` | ソース | Undo機能フック |
| Search.tsx | `packages/desktop-client/src/components/common/Search.tsx` | ソース | 検索コンポーネント |
