InvoiceTracker - 請求書・入金ステータス一元管理ダッシュボード

## 1. アプリの目的・ターゲットユーザー
フリーランサー・個人事業主・小規模事業者が「どの請求書が未払いか」「入金遅延が何件あるか」を一目で把握し、催促のタイミングを逃さないようにするための入金状況管理ツール。既存の QuoteFlow（見積作成）や ContractCraft（契約書作成）と並んで使える「請求〜回収」特化ツールとして差別化する。

---

## 2. 主要機能
- **請求書登録・管理**: 取引先名・請求番号・請求金額・請求日・支払期日・メモをフォームで登録。1画面で最大100件表示。
- **ステータス管理（4段階）**: 「請求済」「一部入金」「入金済」「取消」をボタン1クリックで切替。ステータスに応じてカードの背景色が変化（信号機カラー）。
- **期日アラート表示**: 支払期日が「本日」「3日以内」「超過」の3パターンで自動ラベル付け。ダッシュボード上部に超過件数・超過合計金額を赤バナーで表示。
- **催促メール文生成**: 未払い請求書を選択すると、取引先名・請求番号・金額・期日を差し込んだ催促メール文をワンクリックで生成。コピーボタンで即クリップボードへ。
- **月次サマリーグラフ**: 月ごとの「請求額合計」「入金額合計」「未収額」を積み上げ棒グラフ（Canvas API）で表示。直近12か月を表示。
- **CSV エクスポート**: 表示中のリストをCSV形式でダウンロード。確定申告や会計ソフトへの転記を想定。

---

## 3. 画面構成
### ① ダッシュボード（トップ）
- 上部サマリーバー: 「今月請求額」「今月入金額」「期日超過件数・合計金額」を3枚のKPIカードで表示
- 中段: 月次サマリーグラフ（12か月棒グラフ）
- 下段: 請求書一覧テーブル（取引先・金額・期日・ステータス・操作ボタン）

### ② 請求書登録フォーム（モーダル or サイドパネル）
- 入力項目: 請求番号（自動採番可）、取引先名、件名、請求金額、請求日、支払期日、消費税区分（外税/内税/免税）、メモ
- 「登録」「キャンセル」ボタン

### ③ 詳細ビュー（カードクリックで展開）
- 請求内容の全フィールド表示・編集
- ステータス切替ボタン（4段階）
- 入金日・入金額の実績入力欄（一部入金に対応）
- 催促メール文生成ボタン → テキストエリアにプレビュー＋コピー

### ④ フィルター・検索バー
- ステータス絞り込み（全て/請求済/一部入金/入金済/取消）
- 取引先名フリーワード検索
- 期間フィルター（月セレクト）

---

## 4. データ構造
**DBテーブル: invoices**
| カラム名 | 型 | 説明 |
|---|---|---|
| id | INT PK AUTO_INCREMENT | 主キー |
| invoice_no | VARCHAR(50) | 請求番号 |
| client_name | VARCHAR(100) | 取引先名 |
| subject | VARCHAR(200) | 件名 |
| amount | DECIMAL(12,0) | 請求金額（税抜） |
| tax_type | TINYINT | 0=外税/1=内税/2=免税 |
| invoice_date | DATE | 請求日 |
| due_date | DATE | 支払期日 |
| paid_amount | DECIMAL(12,0) | 実入金額（一部入金対応） |
| paid_date | DATE NULL | 入金日 |
| status | TINYINT | 0=請求済/1=一部入金/2=入金済/3=取消 |
| memo | TEXT | メモ |
| session_key | VARCHAR(64) | ログイン不要のセッション識別子（PHPセッションIDベース） |
| created_at | DATETIME | 作成日時 |
| updated_at | DATETIME | 更新日時 |

※ ログイン機能は省略し、session_key でブラウザセッション単位のデータを分離。LocalStorage にも session_key を保存してセッション切れを軽減。

---

## 5. デザインの方向性
- **カラー**: ベースは白・ライトグレー。アクセントはインディゴブルー（#4F46E5）。
- **ステータスカラー**: 請求済＝黄（#FCD34D）、一部入金＝青（#60A5FA）、入金済＝緑（#34D399）、取消＝グレー（#9CA3AF）。
- **期日アラート**: 超過＝赤バッジ（#EF4444）、3日以内＝オレンジ（#F97316）、当日＝紫（#A855F7）。
- **フォント**: システムUIフォント（Noto Sans JP）、数字はタブラー数字で縦揃え。
- **レイアウト**: PCはサイドバー＋メインエリア2カラム、スマホはシングルカラム。テーブルはスマホでカード表示に切替（CSS Grid）。
- **トーン**: ビジネス向けのクリーンでシンプルなSaaS風。華美な装飾は避け、情報密度を重視。