カレンダー型家計簿
カレンダーで収支を一目で把握できる家計簿 Web アプリです。クレジットカードの CSV を取り込むだけで家計管理が完結します。
スクリーンショット
機能一覧
使い方の手順はアプリ内の /about/help（各画面の「？」からも開けます）。
| 機能 | 説明 |
|---|
| 📅 カレンダー（ホーム） | 日ごとの収支をカレンダーで表示。日付を押してその日の取引を見る・追加する |
| 📷 レシート | レシートを撮ると AI（Claude Sonnet 5.5）が読み取り、確認して登録。手入力もここから |
| 📋 収支一覧 | 取引の検索・編集・削除 |
| 💬 チャット | 「ダッシュボード出して」でマイメニューに機能を足す・外す・並べ替える。無い機能は要望として送れる |
| 📥 CSV インポート | 家計簿アプリ形式（確認画面つき・重複は増えない）とエポス・セゾンの明細。取り込みの取り消しも可 |
| 🔍 要確認 | カテゴリー未設定・返金候補などを月ごとにまとめて直す |
| 🔁 定期の収入・支出 | 毎月・毎週・毎年の収入・支出を登録すると支払日に自動で記録（毎日の cron） |
| 🔔 サブスク | 次回更新が近い順、月・年あたりの合計、管理・解約ページへのリンク、支払いカード |
| 📊 ダッシュボード | 月ごとの収入・支出・カテゴリー別の内訳 |
| 📖 数字の定義 | 支出・収入・今月・予定などの数え方（/about/definitions、ログイン前でも読める） |
| ⚙️ 設定 | 口座・カテゴリー、データと書き出し（家計簿アプリ形式 CSV・完全形式 JSON のバックアップ・Google スプレッドシート・復元・全削除） |
| ❓ 使い方 | 最初の設定→CSV 取り込み→要確認→定期・サブスク→書き出し（/about/help） |
メニューは固定の5つ（カレンダー・レシート・収支一覧・チャット・設定）＋本人がチャットで選ぶマイメニュー。機能の一覧は src/lib/menu/catalog.ts。
技術スタック
| カテゴリ | 技術 |
|---|
| フレームワーク | Next.js 16 (App Router, TypeScript) |
| スタイリング | Tailwind CSS |
| UI コンポーネント | shadcn/ui |
| グラフ | Recharts |
| 認証 | Supabase Auth |
| データベース | PostgreSQL (Supabase) |
| ORM | Prisma 7 |
| CSV パース | papaparse |
| ローカル開発 | Docker + Supabase CLI |
ローカル開発環境のセットアップ
前提条件
- Node.js 18 以上
- Docker Desktop
- Supabase CLI
手順
1. リポジトリをクローン
git clone <repository-url>
cd kakebo_next/app
2. 依存パッケージをインストール
npm install
3. Prisma クライアントを生成
npx prisma generate
4. Docker Desktop を起動してから Supabase をスタート
supabase start
初回はイメージのダウンロードに 5〜10 分かかります。
5. 接続情報を確認
supabase status
出力例：
Project URL : http://127.0.0.1:54321
Publishable : sb_publishable_XXXXXXXXXX
Secret : sb_secret_XXXXXXXXXX
DB URL : postgresql://postgres:[email protected]:54322/postgres
6. .env.local を作成
cp .env.local.example .env.local
.env.local を開いて supabase status の値を入力します：
NEXT_PUBLIC_SUPABASE_URL=http://127.0.0.1:54321
NEXT_PUBLIC_SUPABASE_ANON_KEY=sb_publishable_XXXXXXXXXX
SUPABASE_SERVICE_ROLE_KEY=sb_secret_XXXXXXXXXX
DATABASE_URL=postgresql://postgres:[email protected]:54322/postgres
7. マイグレーションを適用
supabase migration up
8. 開発サーバーを起動
npm run dev
9. ブラウザで開く
http://localhost:3000
使い方
1. アカウント登録
/signup からメールアドレスとパスワードで登録します。登録後は自動でログインされます。
2. 口座を登録する
設定（⚙️）→ 口座管理 から「+ 口座を追加」で現金・クレジットカード・銀行口座を登録します。
3. 収支を手動入力する
カレンダーの日付マスをクリックするとモーダルが開きます。支出・収入を選択して金額・カテゴリ・口座を入力して「保存」します。
カレンダーの日付マスに金額が反映され、月次サマリーも自動更新されます。
4. 固定費を登録する
固定費（🔁）画面から「+ 固定費を追加」で月額・引き落とし日・口座を登録します。トグルを ON にすると毎月ログイン時に自動で収支に追加されます。
5. CSV をインポートする
CSV インポート（📥）画面でカード会社（エポス / セゾン）を選択し、口座を指定してから CSV ファイルをドラッグ＆ドロップします。
6. ダッシュボードで確認する
ダッシュボード（📊）では月ごとの合計収入・支出・残高とカテゴリ別の内訳をグラフで確認できます。
7. 収支一覧を確認する
収支一覧（📋）では月ごとの全収支をテーブルで確認できます。「すべて・支出・収入」でフィルタリングが可能です。手動・固定費・CSV の種別バッジも表示されます。
対応 CSV フォーマット
| カード会社 | 取得方法 |
|---|
| エポスカード | エポスNet → 明細照会 → CSV ダウンロード |
| セゾンカード | セゾン Netアンサー → ご利用明細 → CSV ダウンロード |
ディレクトリ構成
src/
├── app/
│ ├── (dashboard)/ # 認証済みページ群
│ │ ├── layout.tsx # 共通レイアウト（サイドバー）
│ │ ├── calendar/ # カレンダー画面
│ │ ├── dashboard/ # ダッシュボード
│ │ ├── transactions/ # 収支一覧
│ │ ├── fixed-costs/ # 固定費管理
│ │ ├── import/ # CSV インポート
│ │ └── settings/ # 設定
│ ├── api/v1/ # API Routes
│ │ ├── transactions/
│ │ ├── categories/
│ │ ├── accounts/
│ │ ├── fixed-costs/
│ │ ├── import/
│ │ └── dashboard/
│ ├── login/ # ログイン画面
│ └── signup/ # 新規登録画面
├── components/
│ ├── layout/ # Sidebar, FixedCostGenerateTrigger
│ ├── calendar/ # CalendarView, CalendarDay
│ ├── dashboard/ # DashboardView
│ ├── transactions/ # TransactionView
│ ├── fixed-costs/ # FixedCostView
│ ├── import/ # CsvImportView
│ └── settings/ # SettingsView
├── hooks/
│ └── useTransactions.ts # 収支データ取得・CRUD
├── lib/
│ ├── prisma.ts # Prisma クライアント（Singleton）
│ ├── api-helpers.ts # 認証・レスポンスヘルパー・シリアライザ
│ ├── supabase/ # Supabase クライアント
│ └── csv/ # CSV パーサー（エポス・セゾン）
└── types/
├── api.ts # API リクエスト・レスポンス型
└── database.ts # DB テーブル型定義
環境変数
| 変数名 | 説明 |
|---|
NEXT_PUBLIC_SUPABASE_URL | Supabase プロジェクト URL |
NEXT_PUBLIC_SUPABASE_ANON_KEY | Supabase Publishable キー |
SUPABASE_SERVICE_ROLE_KEY | Supabase Secret キー（サーバーサイドのみ） |
DATABASE_URL | PostgreSQL 接続 URL（Prisma 用） |
OWNER_USER_IDS | 社長専用機能（予算台帳）を使える Supabase ユーザー ID（カンマ区切り）。未設定なら誰も使えない。値はコードに書かない |
テスト
テスト駆動で進めています（Issue ryusei2790/mywork#229）。テストの一覧と ID（S1〜S8, T1〜T4 …）は設計資料側にあります。
This is the beginning of the README. Read the rest at the original. Read the full README ↗
