Skip to content

roadmap.md

Latest commit

 

History

History
524 lines (410 loc) · 17.8 KB

roadmap.md

File metadata and controls

524 lines (410 loc) · 17.8 KB
Raw

実装ロードマップ

全体進捗: 98%（7 Phase 中 Phase 7.5 まで完了）

Phase 1: 基盤構築 ✅ 100%

1.1 プロジェクト初期設定 ✅

  • package.json 設定
  • TypeScript 設定
  • Next.js 設定
  • Tailwind CSS 設定
  • Docker Compose（PostgreSQL）
  • 環境変数テンプレート

1.2 データベース設定 ✅

  • Prisma スキーマ定義
  • テーブル設計
  • マイグレーション設定
  • Seed データ作成

1.3 認証システム ✅

  • NextAuth 設定
  • ログイン画面
  • セッション管理
  • 認証ミドルウェア

1.4 基本 UI ✅

  • Atomic Design コンポーネント（Button, Input, Card, Badge, Label）
  • FormField（Molecule）
  • Sidebar / Header（Organism）
  • ダッシュボードレイアウト

Phase 2: 顧客・案件管理 ✅

2.1 顧客管理（Backend）✅

  • CustomerRepository（CRUD 操作）
  • Customer スキーマ（Zod）
  • Usecase 実装
    • CreateCustomer
    • UpdateCustomer
    • DeleteCustomer（論理削除）
    • GetCustomerById
    • ListCustomers（ページネーション）
  • API Route Handlers
    • GET /api/customers
    • POST /api/customers
    • GET /api/customers/:id
    • PUT /api/customers/:id
    • DELETE /api/customers/:id

2.2 顧客管理（Frontend）✅

  • 顧客一覧画面
  • 顧客詳細画面
  • 顧客作成フォーム
  • 顧客編集フォーム
  • TanStack Query 統合

2.3 案件管理（Backend）✅

  • ProjectRepository（CRUD 操作）
  • Project スキーマ（Zod）
  • Usecase 実装
    • CreateProject
    • UpdateProject
    • DeleteProject
    • GetProjectById
    • ListProjects（フィルタ・ページネーション）
  • API Route Handlers
    • GET /api/projects
    • POST /api/projects
    • GET /api/projects/:id
    • PUT /api/projects/:id
    • DELETE /api/projects/:id

2.4 案件管理（Frontend）✅

  • 案件一覧画面
  • 案件詳細画面（請求書・経費一覧含む）
  • 案件作成フォーム
  • 案件編集フォーム

Phase 3: 請求書・入金管理 ✅

3.1 請求書管理（Backend）✅

  • InvoiceRepository
  • InvoiceItemRepository
  • Invoice スキーマ（Zod）
  • Domain Service: InvoiceService
    • 明細から合計金額を算出
    • ステータス更新ロジック
  • Usecase 実装
    • CreateInvoice（明細含む）
    • UpdateInvoice
    • DeleteInvoice
    • MarkInvoiceSent（送付済み）
    • GetInvoiceById（明細・入金履歴含む）
    • ListInvoices（フィルタ・ページネーション）
  • API Route Handlers
    • GET /api/invoices
    • POST /api/invoices
    • GET /api/invoices/:id
    • PUT /api/invoices/:id
    • DELETE /api/invoices/:id
    • POST /api/invoices/:id/send

3.2 請求書管理（Frontend）✅

  • 請求書一覧画面
  • 請求書詳細画面
  • 請求書作成フォーム
    • 明細テーブル（動的追加・削除）
    • 合計金額自動計算
  • 請求書編集フォーム

3.3 入金管理（Backend）✅

  • PaymentRepository
  • Payment スキーマ（Zod）
  • Domain Service: PaymentService
    • 入金合計計算
    • 自動 PAID 更新ロジック
  • Usecase 実装
    • RegisterPayment（入金登録 + ステータス自動更新）
    • UpdatePayment
    • DeletePayment（入金削除 + ステータス再計算）
    • ListPaymentsByInvoice
  • API Route Handlers
    • POST /api/invoices/:id/payments
    • GET /api/invoices/:id/payments
    • PUT /api/payments/:id
    • DELETE /api/payments/:id

3.4 入金管理（Frontend）✅

  • 入金登録フォーム（モーダル）
  • 入金履歴一覧（請求書詳細内）
  • 入金削除機能

Phase 4: 経費管理 ✅

4.1 経費カテゴリ管理（Backend）✅

  • ExpenseCategoryRepository
  • ExpenseCategory スキーマ（Zod）
  • Usecase 実装
    • CreateExpenseCategory
    • UpdateExpenseCategory
    • DeleteExpenseCategory
    • ListExpenseCategories
  • API Route Handlers
    • GET /api/expense-categories
    • POST /api/expense-categories
    • PUT /api/expense-categories/:id
    • DELETE /api/expense-categories/:id

4.2 経費管理（Backend）✅

  • ExpenseRepository
  • Expense スキーマ（Zod）
  • Usecase 実装
    • CreateExpense
    • UpdateExpense
    • DeleteExpense
    • GetExpenseById
    • ListExpenses（フィルタ・ページネーション）
  • API Route Handlers
    • GET /api/expenses
    • POST /api/expenses
    • GET /api/expenses/:id
    • PUT /api/expenses/:id
    • DELETE /api/expenses/:id

4.3 経費管理（Frontend）✅

  • 経費一覧画面
  • 経費作成フォーム
  • 経費編集フォーム
  • 経費カテゴリ設定画面

Phase 5: レポート・ダッシュボード ✅

5.1 レポート API（Backend）✅

  • ReportService（集計ロジック）
    • 月次売上集計（入金ベース / 請求ベース）
    • 月次経費集計
    • 利益計算
    • 未回収金額集計
    • 案件別集計
    • 経費カテゴリ別集計
  • Usecase 実装
    • GetMonthlySummary
    • GetProjectReport
    • GetExpenseBreakdown
  • API Route Handlers
    • GET /api/reports/monthly?month=YYYY-MM
    • GET /api/reports/trend?months=N
    • GET /api/reports/expenses?month=YYYY-MM
    • GET /api/reports/projects?month=YYYY-MM
    • GET /api/reports/dashboard?month=YYYY-MM

5.2 ダッシュボード（Frontend）✅

  • 月次サマリカード（売上・経費・利益・未回収）
  • 月別推移グラフ（Recharts）
    • 売上・経費・利益の折れ線グラフ
  • 経費カテゴリ別内訳（円グラフ）
  • 案件別売上ランキング（棒グラフ）
  • 最近の請求書一覧
  • 最近の経費一覧

5.3 レポート画面（Frontend）✅

  • 月別レポート画面
  • 案件別レポート画面
  • CSV エクスポート（将来）

Phase 6: テスト 🚧

6.1 単体テスト 🚧

  • ユーティリティ関数のテスト
    • formatCurrency のテスト
    • formatDate のテスト
  • 金額計算ロジックのテスト
    • calculateItemAmount（明細金額計算）
    • calculateInvoiceTotal（請求書合計）
    • calculatePaidAmount（入金合計）
    • calculateUnpaidAmount（未回収金額）
    • isFullyPaid（入金済み判定）
  • Repository 層のテスト
    • InvoiceRepository（ステータス更新ロジック）
    • PaymentRepository（入金合計計算）
  • Domain Service のテスト
    • ReportService（月次サマリ集計）
  • その他の Domain Service テスト
    • InvoiceService（明細から合計金額算出）
    • PaymentService（自動 PAID 更新ロジック）

6.2 統合テスト ✅

  • Usecase 層のテスト
    • 請求書作成 + 明細
    • 入金登録 + 自動 PAID 更新
    • 経費登録
  • API Route Handlers のテスト
    • 認証チェック
    • バリデーションエラー
    • CRUD 操作

6.3 E2E テスト（任意）

  • ログイン → ダッシュボード
  • 請求書作成 → 入金登録 → ダッシュボード反映

Phase 7: 改善・拡張（最短で"売れる"優先順位）

7.1 UX 改善（最優先）🎯

目的: ユーザーが使いやすい UI を実現（数字・グラフの見やすさ重視）

  • ローディング状態の表示
    • スケルトンスクリーン実装（Skeleton, TableSkeleton, CardSkeleton）
    • ローディングスピナー（Spinner, LoadingOverlay）
    • ボタン押下時のローディング状態（Button loading prop）
  • エラーハンドリング強化
    • グローバルエラーバウンダリー（ErrorBoundary）
    • トースト通知の実装（ToastProvider, useToast）
    • TypeScript 型安全性の強化（any 型の排除、Prisma 型の適切な使用）
    • エラーページの改善（404, 500）
  • バリデーションメッセージの改善
    • エラーメッセージの日本語化（全スキーマで実装済み）
    • フォームのリアルタイムバリデーション（react-hook-form 統合済み）
    • 入力フィールドのヘルプテキスト
  • レスポンシブ対応
    • モバイル最適化（320px〜）
      • ハンバーガーメニュー実装
      • ヘッダー・サイドバーのモバイル対応
      • 全ページのヘッダー（テキストサイズ、ボタン配置）
    • タブレット最適化
    • ダッシュボードのグラフ表示調整（高さ自動調整）
    • テーブルのスクロール対応（overflow-x-auto + マージン調整）
  • 一覧ページの削除機能
    • 顧客一覧に削除ボタン追加
    • 請求書一覧に削除ボタン追加
    • 経費一覧に削除ボタン追加
    • 案件一覧に削除ボタン追加
    • 確認ダイアログの実装
    • トースト通知による削除完了通知

7.2 請求書 PDF 出力 ✅ 100%

  • PDF 生成ライブラリの選定（@react-pdf/renderer）
  • 請求書テンプレートのデザイン（日本語フォント対応）
  • PDF ダウンロード機能の実装（請求書詳細ページ）
  • 会社情報の挿入機能

7.3 支払期限アラート ✅ 100%

  • 支払期限切れの請求書検出ロジック（/api/alerts）
  • ダッシュボードにアラート表示（期限切れ・期限間近）
  • 期限前の通知機能（1 週間前、3 日前）
  • アラート一覧表示（未払い請求書の可視化）

7.4 CSV エクスポート ✅ 100%

  • CSV 生成ユーティリティ（BOM 付き、Excel 対応）
  • 請求書一覧の CSV エクスポート
  • 経費一覧の CSV エクスポート
  • エクスポート成功時のトースト通知

7.5 セキュリティ強化 ✅ 100%

  • CSRF 保護（NextAuth 組み込み機能で対応済み）
  • セッション管理（30 日間、JWT 方式）
  • 認証ミドルウェア（全 API ルートで適用済み）

低優先度（将来拡張）

  1. レート制限 + セキュリティ強化
  2. 見積書管理
  3. メール送付機能
  4. 定期請求
  5. E2E テスト
  6. パフォーマンス最適化

7.6 追加機能（余力があれば）

  • 見積書管理
    • 見積書の作成・編集・削除
    • 見積書から請求書への変換
    • 見積書 PDF 出力
  • メール送付機能
    • 請求書の自動メール送信
    • テンプレート管理
    • 送信履歴の記録
  • 定期請求（月次自動発行）
  • 領収書管理

7.7 パフォーマンス最適化（継続的に）

  • DB クエリ最適化
  • キャッシュ戦略
  • ページネーション改善
  • 画像最適化

優先順位

高優先度（MVP 必須）

  1. ✅ プロジェクト初期設定
  2. ✅ 認証システム
  3. 顧客管理（Backend + Frontend）
  4. 案件管理（Backend + Frontend）
  5. 請求書管理（Backend + Frontend）
  6. 入金管理（Backend + Frontend）
  7. 経費管理（Backend + Frontend）
  8. 基本的なダッシュボード

中優先度

  1. レポート機能（詳細）
  2. グラフ表示
  3. 単体テスト
  4. 統合テスト

各 Phase の進捗率は下部の「実装進捗」テーブルを唯一の正とします。

Phase 6 実装済みテスト

単体テスト（Unit Tests）:

  • ✅ tests/unit/lib/utils.test.ts - フォーマット関数のテスト
  • ✅ tests/unit/lib/money/calculator.test.ts - 金額計算ロジックのテスト
  • ✅ tests/unit/infrastructure/repositories/invoiceRepository.test.ts - 請求書ステータス更新のテスト
  • ✅ tests/unit/infrastructure/repositories/paymentRepository.test.ts - 入金合計計算のテスト
  • ✅ tests/unit/domain/services/reportService.test.ts - レポート集計ロジックのテスト
  • ✅ tests/unit/domain/services/invoiceService.test.ts - 請求書明細から合計金額算出のテスト
  • ✅ tests/unit/domain/services/paymentService.test.ts - 自動PAID更新ロジックのテスト

統合テスト（Integration Tests）:

  • ✅ tests/integration/usecases/invoices.test.ts - 請求書作成・更新と明細の統合テスト
  • ✅ tests/integration/usecases/payments.test.ts - 入金登録と自動 PAID 更新の統合テスト
  • ✅ tests/integration/usecases/expenses.test.ts - 経費登録の統合テスト
  • ✅ tests/integration/api/customers.test.ts - API Route Handlers（認証チェック、バリデーションエラー、CRUD操作）のテスト

実装進捗

Phase 進捗 備考
Phase 1 100% 完了
Phase 2 100% 完了
Phase 3 100% 完了
Phase 4 100% 完了
Phase 5 100% 完了
Phase 6 90% 単体・統合テスト完了
Phase 7.1 100% UX 改善完了
Phase 7.2 100% PDF 出力完了
Phase 7.3 100% 支払期限アラート完了
Phase 7.4 100% CSV エクスポート完了
Phase 7.5 100% セキュリティ強化完了
Phase 7.6 100% ユーザー設定機能完了

全体進捗: 99%（Phase 1-5, Phase 7.1-7.6 完了、Phase 6 90%）

Phase 7.6: ユーザー設定機能 ✅ 100%

7.6.1 設定機能（Backend）✅

  • UserSettings モデル追加（Prisma）
    • 事業者情報（屋号、代表者名、住所、電話、メール）
    • 銀行口座情報（銀行名、支店名、口座種別、口座番号、口座名義）
    • 請求書設定（プレフィックス、消費税率、支払期限デフォルト、デフォルト備考）
  • UserSettingsRepository（CRUD 操作）
  • Usecase 実装
    • GetSettings（存在しない場合は自動作成）
    • UpdateSettings
  • API Route Handlers
    • GET /api/settings
    • PUT /api/settings

7.6.2 設定機能（Frontend）✅

  • 設定画面実装（/settings）
    • 事業者情報フォーム
    • 銀行口座情報フォーム
    • 請求書設定フォーム
    • TanStack Query 統合
  • Sidebar に設定リンク追加（既存）

7.6.3 請求書 PDF 連携 ✅

  • InvoicePDF コンポーネント修正
    • ハードコードされた会社情報を設定から取得
    • 銀行口座情報を設定から取得
    • デフォルト備考を設定から取得
  • PDF 生成 API 修正
    • 請求書 PDF 生成時に設定情報を取得
    • 設定情報を PDF コンポーネントに渡す

Phase 6 実装済みテスト

単体テスト（Unit Tests）:

  • ✅ tests/unit/lib/utils.test.ts - フォーマット関数のテスト
  • ✅ tests/unit/lib/money/calculator.test.ts - 金額計算ロジックのテスト
  • ✅ tests/unit/infrastructure/repositories/invoiceRepository.test.ts - 請求書ステータス更新のテスト
  • ✅ tests/unit/infrastructure/repositories/paymentRepository.test.ts - 入金合計計算のテスト
  • ✅ tests/unit/domain/services/reportService.test.ts - レポート集計ロジックのテスト

統合テスト（Integration Tests）:

  • ✅ tests/integration/usecases/invoices.test.ts - 請求書作成・更新と明細の統合テスト
  • ✅ tests/integration/usecases/payments.test.ts - 入金登録と自動 PAID 更新の統合テスト
  • ✅ tests/integration/usecases/expenses.test.ts - 経費登録の統合テスト
  • ✅ tests/integration/api/customers.test.ts - API Route Handlers（認証チェック、バリデーションエラー、CRUD操作）のテスト

Phase 7.1 実装済み UX 改善

ローディング状態:

  • ✅ Spinner コンポーネント（sm/md/lg サイズ）
  • ✅ LoadingOverlay コンポーネント（全画面ローディング）
  • ✅ Skeleton コンポーネント（text/rectangular/circular）
  • ✅ TableSkeleton・CardSkeleton（特化版）
  • ✅ Button loading prop（ボタン押下時のスピナー表示）

エラーハンドリング:

  • ✅ ErrorBoundary（グローバルエラー境界）
  • ✅ ToastProvider（トースト通知システム、4 種類: success/error/warning/info）
  • ✅ TypeScript 型安全性強化（any 型排除、Prisma 型の適切な使用）
  • ✅ ビルドエラー修正（production build 成功）

レスポンシブ対応:

  • ✅ モバイルファーストデザイン（320px〜対応）
  • ✅ ハンバーガーメニュー（サイドバーのモバイル表示）
  • ✅ タッチデバイス対応（タップエリアの最適化）
  • ✅ グラフの自動リサイズ（ResponsiveContainer 活用）
  • ✅ テーブルの横スクロール対応（overflow-x-auto）
  • ✅ ブレークポイント対応（sm: 640px, md: 768px, lg: 1024px）
  • ✅ フレキシブルレイアウト（flexbox & grid）

バリデーション:

  • ✅ 日本語エラーメッセージ（全フォームで実装済み）
  • ✅ react-hook-form 統合（zodResolver 使用）
  • ✅ リアルタイムバリデーション（onChange/onBlur）

エラーハンドリング:

  • ✅ ErrorBoundary（グローバルエラー境界）
  • ✅ ToastProvider（トースト通知システム、4 種類: success/error/warning/info）
  • ✅ TypeScript 型安全性強化（any 型排除、Prisma 型の適切な使用）
  • ✅ ビルドエラー修正（production build 成功）