# 画面遷移図

Actual Budget アプリケーションの画面遷移を示す図です。

## 概要

本アプリケーションは以下の2つの主要なアプリケーションモードで構成されています：

1. **ManagementApp**: 認証・予算ファイル管理（予算未選択時）
2. **FinancesApp**: メイン財務管理機能（予算選択時）

## 全体遷移図

```mermaid
flowchart TB
    subgraph App["App (メインエントリポイント)"]
        direction TB
        AppInner["AppInner"]
    end

    AppInner --> BudgetCheck{予算ID存在?}
    BudgetCheck -->|Yes| FinancesApp
    BudgetCheck -->|No| ManagementApp

    subgraph ManagementApp["ManagementApp (予算ファイル管理)"]
        direction TB
        MgmtCheck{ユーザーデータ & ファイル存在?}

        MgmtCheck -->|No| AuthRoutes
        MgmtCheck -->|Yes| FileRoutes

        subgraph AuthRoutes["認証ルート (未認証)"]
            Bootstrap["ブートストラップ画面<br/>/bootstrap"]
            Login["ログイン画面<br/>/login"]
            OpenIdCallback["OpenIDコールバック<br/>/openid-cb"]
            AuthError["エラー画面<br/>/error"]
        end

        subgraph FileRoutes["ファイル管理ルート (認証済み)"]
            FileCheck{ファイル数 > 0?}
            FileCheck -->|Yes| BudgetFileSelection["予算ファイル選択画面<br/>/"]
            FileCheck -->|No| WelcomeScreen["ウェルカム画面<br/>/"]
            ConfigServer["サーバー設定画面<br/>/config-server"]
            ChangePassword["パスワード変更画面<br/>/change-password"]
            MgmtUserDirectory["ユーザーディレクトリ<br/>/user-directory"]
        end
    end

    subgraph FinancesApp["FinancesApp (財務管理)"]
        direction TB

        subgraph MainRoutes["メインルート"]
            RootCheck{口座数 > 0?}
            RootCheck -->|Yes| Budget
            RootCheck -->|No| Accounts

            Budget["予算画面<br/>/budget"]
            Accounts["口座一覧画面<br/>/accounts"]
            AccountDetail["口座詳細画面<br/>/accounts/:id"]
            CategoryDetail["カテゴリ詳細画面<br/>/categories/:id"]
        end

        subgraph ScheduleRoutes["スケジュール管理"]
            Schedules["スケジュール一覧<br/>/schedules"]
            ScheduleEdit["スケジュール編集<br/>/schedules/:id"]
        end

        subgraph PayeeRoutes["支払先管理"]
            Payees["支払先一覧<br/>/payees"]
            PayeeEdit["支払先編集<br/>/payees/:id"]
        end

        subgraph RuleRoutes["ルール管理"]
            Rules["ルール一覧<br/>/rules"]
            RuleEdit["ルール編集<br/>/rules/:id"]
        end

        subgraph BankSyncRoutes["銀行同期"]
            BankSync["銀行同期管理<br/>/bank-sync"]
            BankSyncEdit["銀行同期口座編集<br/>/bank-sync/account/:accountId/edit"]
            GoCardlessLink["GoCardlessリンク<br/>/gocardless/link"]
        end

        subgraph ReportRoutes["レポート"]
            ReportsDashboard["レポートダッシュボード<br/>/reports"]
            ReportsDashboardId["レポートダッシュボード<br/>/reports/:dashboardId"]
            NetWorth["純資産レポート<br/>/reports/net-worth"]
            CashFlow["キャッシュフロー<br/>/reports/cash-flow"]
            Spending["支出レポート<br/>/reports/spending"]
            CustomReport["カスタムレポート<br/>/reports/custom"]
            Summary["サマリーレポート<br/>/reports/summary"]
            Calendar["カレンダーレポート<br/>/reports/calendar"]
            Formula["数式レポート<br/>/reports/formula"]
            Crossover["クロスオーバー<br/>/reports/crossover"]
            BudgetAnalysis["予算分析<br/>/reports/budget-analysis"]
        end

        subgraph OtherRoutes["その他"]
            Tags["タグ管理<br/>/tags"]
            Settings["設定<br/>/settings"]
            TransactionEdit["取引編集<br/>/transactions/:transactionId"]
            UserDirectory["ユーザーディレクトリ<br/>/user-directory"]
            UserAccess["ユーザーアクセス<br/>/user-access"]
        end
    end

    %% ManagementApp内遷移
    Bootstrap --> Login
    Login --> BudgetFileSelection
    Login --> OpenIdCallback
    OpenIdCallback --> BudgetFileSelection
    BudgetFileSelection --> ConfigServer
    WelcomeScreen --> ConfigServer

    %% FinancesApp内遷移
    Budget --> Accounts
    Budget --> CategoryDetail
    Accounts --> AccountDetail
    AccountDetail --> TransactionEdit

    Schedules --> ScheduleEdit
    Payees --> PayeeEdit
    Rules --> RuleEdit
    BankSync --> BankSyncEdit
    BankSync --> GoCardlessLink

    ReportsDashboard --> NetWorth
    ReportsDashboard --> CashFlow
    ReportsDashboard --> Spending
    ReportsDashboard --> CustomReport
    ReportsDashboard --> Summary
    ReportsDashboard --> Calendar
    ReportsDashboard --> Formula
    ReportsDashboard --> Crossover
    ReportsDashboard --> BudgetAnalysis

    %% 予算選択による遷移
    BudgetFileSelection -->|予算選択| FinancesApp
    Settings -->|予算を閉じる| ManagementApp
```

## デスクトップ/モバイル対応

本アプリケーションはレスポンシブデザインを採用しており、画面幅に応じて異なるコンポーネントが表示されます。

```mermaid
flowchart TB
    subgraph ResponsiveRouting["レスポンシブルーティング"]
        direction TB

        RouteCheck["ルート判定"]
        WidthCheck{画面幅}

        RouteCheck --> WidthCheck

        WidthCheck -->|Wide| WideComponents
        WidthCheck -->|Narrow| NarrowComponents

        subgraph WideComponents["デスクトップコンポーネント"]
            WBudget["Budget (予算)"]
            WAccounts["Account (口座)"]
            WSchedules["Schedules (スケジュール)"]
            WPayees["ManagePayeesPage (支払先)"]
            WRules["ManageRulesPage (ルール)"]
            WBankSync["BankSync (銀行同期)"]
        end

        subgraph NarrowComponents["モバイルコンポーネント"]
            NBudget["BudgetPage (予算)"]
            NAccounts["AccountsPage (口座一覧)"]
            NAccount["AccountPage (口座詳細)"]
            NSchedules["MobileSchedulesPage"]
            NScheduleEdit["MobileScheduleEditPage"]
            NPayees["MobilePayeesPage"]
            NPayeeEdit["MobilePayeeEditPage"]
            NRules["MobileRulesPage"]
            NRuleEdit["MobileRuleEditPage"]
            NBankSync["MobileBankSyncPage"]
            NCategory["CategoryPage"]
        end
    end
```

## サイドバーナビゲーション

```mermaid
flowchart LR
    subgraph Sidebar["サイドバー (FloatableSidebar)"]
        direction TB

        SBBudget["予算"]
        SBAccounts["口座"]
        SBReports["レポート"]
        SBSchedules["スケジュール"]
        SBPayees["支払先"]
        SBRules["ルール"]
        SBBankSync["銀行同期"]
        SBTags["タグ"]
        SBSettings["設定"]
    end

    SBBudget --> Budget["/budget"]
    SBAccounts --> Accounts["/accounts"]
    SBReports --> Reports["/reports"]
    SBSchedules --> Schedules["/schedules"]
    SBPayees --> Payees["/payees"]
    SBRules --> Rules["/rules"]
    SBBankSync --> BankSync["/bank-sync"]
    SBTags --> Tags["/tags"]
    SBSettings --> Settings["/settings"]
```

## モバイルナビゲーションタブ

```mermaid
flowchart LR
    subgraph MobileNavTabs["モバイルナビゲーション"]
        direction TB

        TabBudget["予算タブ"]
        TabAccounts["口座タブ"]
        TabReports["レポートタブ"]
        TabSettings["設定タブ"]
    end

    TabBudget --> MBudget["/budget"]
    TabAccounts --> MAccounts["/accounts"]
    TabReports --> MReports["/reports"]
    TabSettings --> MSettings["/settings"]
```

## 認証フロー

```mermaid
sequenceDiagram
    participant User as ユーザー
    participant App as App
    participant MgmtApp as ManagementApp
    participant Auth as 認証サービス
    participant FinApp as FinancesApp

    User->>App: アプリ起動
    App->>App: 初期化処理

    alt 予算IDなし
        App->>MgmtApp: ManagementApp表示

        alt ユーザーデータなし
            MgmtApp->>User: Bootstrap画面表示
            User->>MgmtApp: サーバー設定
            MgmtApp->>User: Login画面表示
            User->>Auth: ログイン
            Auth->>MgmtApp: 認証成功
        end

        MgmtApp->>User: ファイル選択画面表示
        User->>MgmtApp: 予算ファイル選択
        MgmtApp->>App: 予算ロード
    end

    App->>FinApp: FinancesApp表示
    FinApp->>User: 予算画面表示
```

## 注意事項

- `/user-directory` と `/user-access` はマルチユーザーモードが有効な場合のみ表示
- `/reports/crossover` と `/reports/budget-analysis` は実験的機能フラグが有効な場合のみ表示
- モバイル専用ルート（`/transactions/:transactionId`, `/schedules/:id`等）はナロー画面幅でのみアクセス可能
- `/gocardless/link` はデスクトップ（ワイド画面幅）でのみアクセス可能
