# SalesBoost Mini

# SalesBoost Mini

営業パイプラインをExcel感覚でドラッグ&ドロップ管理できるWebアプリ。スタートアップ・中小製造業の5〜20名営業チームが、複雑なCRM導入なしに案件進捗を可視化・共有。オンプレ/クラウド両対応で初期導入ハードル低く、月額コスト最小限。

---

# MVP のスコープ

## MUST(必須・これが無いとサービスが成立しない)

- **カンバン式パイプライン表示**: 営業段階(初期接触→提案→交渉→受注)を列として、案件カードをドラッグ&ドロップで移動
- **案件基本情報管理**: 顧客名、金額、担当者、期限、メモをシンプルに入力・編集
- **複数ユーザー対応**: 5〜20名が同時アクセス、リアルタイム更新(WebSocket または定期ポーリング)
- **チーム全体の売上予測**: 各段階の案件金額を集計し、月別・段階別の売上見込みを表示
- **シンプルな認証**: チーム内での基本的なログイン(メール+パスワード)

## SHOULD(あれば良いが MVP では入れない)

- 案件の詳細履歴・コメント機能
- メール通知・リマインダー
- CSVインポート/エクスポート
- ロールベース権限管理(管理者/営業/閲覧のみ)

## WON'T(今回は作らない)

- **顧客管理DB統合**: 顧客情報は案件ごとに入力。別システム連携は後発。(統合開発が複雑化し、MVP リリース遅延)
- **メール送受信機能**: 外部メールサービス連携は初期段階では不要。(API 設定・エラーハンドリングが重い)
- **高度な権限・監査ログ**: エンタープライズ向け要件。スタートアップは全員信頼ベース。(実装コスト > 初期需要)
- **モバイルアプリ**: Web レスポンシブで対応。ネイティブアプリは後発。(iOS/Android 両対応の保守負荷が大きい)
- **複数チーム・組織管理**: 単一チーム専用。マルチテナント化は拡大後。(テナント分離・課金ロジックが複雑)

---

# 削るべき機能と理由

1. **リアルタイム通知・Slack 連携**
   - 理由: WebSocket 実装 + 外部 API 連携で工数 2 倍。MVP では定期ポーリング(5秒)で十分。ユーザーが常時監視するサービスではない。

2. **高度なレポート・グラフ機能**
   - 理由: 初期段階では「今月の売上見込み」1つで足りる。複数グラフ・フィルタ・ドリルダウンは後発。

3. **オンプレミス専用インストーラー**
   - 理由: Docker Compose で十分。ワンコマンドで起動可能にすれば、ユーザーは自社サーバーで動かせる。セットアップスクリプト作成は後発。

---

# 画面一覧と遷移

| 画面 | 目的 | 主要操作 |
|------|------|---------|
| **ログイン** | チーム認証 | メール+パスワード入力 → ダッシュボードへ |
| **ダッシュボード(カンバン)** | パイプライン全体の可視化 | 案件カードをドラッグ&ドロップで段階変更、カード選択で詳細表示 |
| **案件詳細モーダル** | 案件情報の入力・編集 | 顧客名、金額、担当者、期限、メモを編集 → 保存 |
| **売上予測ビュー** | 月別・段階別の売上見込み | 金額集計の表示、フィルタ(月/担当者) |
| **チーム管理** | ユーザー追加・削除(管理者のみ) | メール入力 → 招待メール送信 |

```mermaid
flowchart LR
    A["ログイン"] -->|認証成功| B["ダッシュボード<br/>カンバン表示"]
    B -->|カード選択| C["案件詳細<br/>モーダル"]
    C -->|保存| B
    B -->|ドラッグ&ドロップ| B
    B -->|売上予測タブ| D["売上予測<br/>ビュー"]
    D -->|戻る| B
    B -->|管理者| E["チーム管理"]
    E -->|ユーザー追加| E
```

---

# データモデル

**技術スタック前提**: Node.js + Express + PostgreSQL + Prisma ORM

```prisma
// prisma/schema.prisma

datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}

generator client {
  provider = "prisma-client-js"
}

model Team {
  id        String   @id @default(cuid())
  name      String   // チーム名
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt

  users  User[]
  deals  Deal[]
  stages Stage[]

  @@map("teams")
}

model User {
  id        String   @id @default(cuid())
  email     String   @unique
  password  String   // bcrypt hash
  name      String
  role      String   @default("user") // "admin" or "user"
  teamId    String
  team      Team     @relation(fields: [teamId], references: [id], onDelete: Cascade)
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt

  deals Deal[]

  @@map("users")
}

model Stage {
  id    String @id @default(cuid())
  name  String // "初期接触", "提案", "交渉", "受注"
  order Int    // 表示順序
  teamId String
  team  Team   @relation(fields: [teamId], references: [id], onDelete: Cascade)

  deals Deal[]

  @@unique([teamId, name])
  @@map("stages")
}

model Deal {
  id            String   @id @default(cuid())
  title         String   // 案件名
  customerName  String   // 顧客名
  amount        Int      // 金額(円)
  description   String   @default("") // メモ
  dueDate       DateTime? // 期限
  stageId       String
  stage         Stage    @relation(fields: [stageId], references: [id], onDelete: Restrict)
  ownerId       String
  owner         User     @relation(fields: [ownerId], references: [id], onDelete: Restrict)
  teamId        String
  team          Team     @relation(fields: [teamId], references: [id], onDelete: Cascade)
  position      Int      @default(0) // カード順序(同一段階内)
  createdAt     DateTime @default(now())
  updatedAt     DateTime @updatedAt

  @@map("deals")
}
```

---

# 主要 API エンドポイント

| メソッド | パス | 目的 | 認証 |
|---------|------|------|------|
| POST | `/auth/register` | チーム初期登録(管理者) | 不要 |
| POST | `/auth/login` | ログイン | 不要 |
| POST | `/auth/logout` | ログアウト | 必要 |
| GET | `/api/deals` | 全案件取得(カンバン表示用) | 必要 |
| POST | `/api/deals` | 案件作成 | 必要 |
| PATCH | `/api/deals/:id` | 案件更新(情報変更) | 必要 |
| PATCH | `/api/deals/:id/stage` | 案件の段階変更(ドラッグ&ドロップ) | 必要 |
| DELETE | `/api/deals/:id` | 案件削除 | 必要 |
| GET | `/api/forecast` | 売上予測データ取得(月別・段階別集計) | 必要 |
| GET | `/api/users` | チームユーザー一覧 | 必要(管理者) |
| POST | `/api/users/invite` | ユーザー招待メール送信 | 必要(管理者) |
| POST | `/api/users/accept-invite` | 招待受け入れ(登録) | 不要 |

---

# 技術スタック推奨

| レイヤー | 選択 | 推奨理由 |
|---------|------|---------|
| **フロントエンド** | React 18 + TypeScript + Tailwind CSS | SPA で高速 UI、ドラッグ&ドロップ実装が豊富(react-beautiful-dnd)。個人開発者向けに学習コスト低い。 |
| **バックエンド** | Node.js + Express + TypeScript | 非同期 I/O で複数ユーザー同時接続に強い。Prisma ORM で DB 操作が簡潔。デプロイが軽量。 |
| **データベース** | PostgreSQL | リレーショナル DB で案件・ユーザー・段階の関連管理が明確。無料ホスティング(Railway/Render)で 1GB まで無料。 |
| **ホスティング** | Vercel(フロント) + Railway/Render(バック+DB) | フロントエンド無料、バック+DB 月 $5〜10。オンプレ対応は Docker Compose で。 |
| **認証** | JWT + bcrypt | 外部 OAuth 不要。シンプルなメール/パスワード認証で十分。 |
| **リアルタイム更新** | HTTP ポーリング(5秒) | WebSocket 実装より実装・保守が簡単。MVP では十分。 |

---

# 外部サービス・API と想定コスト

| サービス | 用途 | 想定月額 | 備考 |
|---------|------|---------|------|
| **Vercel** | フロントエンドホスティング | 無料 | 月 100GB 帯域幅まで無料。本番環境で十分。 |
| **Railway** | バックエンド + PostgreSQL ホスティング | $5〜10 | 月 $5 クレジット付き。超過分は従量課金。オンプレ対応で不要にもできる。 |
| **SendGrid** | 招待メール送信(後発) | 無料〜$20 | 月 100 通まで無料。MVP では不要(手動招待)。 |
| **Sentry** | エラーログ(後発) | 無料 | 月 5,000 イベントまで無料。本番運用時に追加。 |

**合計月額**: 無料〜10 ドル(クラウド前提)。オンプレ対応なら 0 円。

---

# Claude Code 向け実装プロンプト

```
以下の仕様に従い、SalesBoost Mini の MVP を実装してください。

【プロジェクト構成】
- フロントエンド: React 18 + TypeScript + Tailwind CSS
- バックエンド: Node.js + Express + TypeScript
- DB: PostgreSQL + Prisma ORM
- ホスティング: Vercel(フロント) + Railway(バック)

【実装タスク】

1. **バックエンド初期化**
   - `backend/` ディレクトリを作成
   - `package.json` に Express, Prisma, bcrypt, jsonwebtoken, dotenv を追加
   - `src/server.ts` を作成し、Express サーバーをポート 5000 で起動
   - `.env.example` に DATABASE_URL, JWT_SECRET を記載

2. **Prisma スキーマ定義**
   - `prisma/schema.prisma` を上記データモデルに従い作成
   - `npx prisma migrate dev --name init` で初期マイグレーション実行
   - PostgreSQL 接続確認

3. **認証エンドポイント実装**
   - `src/routes/auth.ts` を作成
   - POST `/auth/register`: チーム初期登録(メール, パスワード, チーム名) → JWT 発行
   - POST `/auth/login`: ログイン(メール, パスワード) → JWT 発行
   - POST `/auth/logout`: JWT 無効化(セッション管理)
   - `src/middleware/auth.ts` で JWT 検証ミドルウェア実装

4. **案件管理エンドポイント実装**
   - `src/routes/deals.ts` を作成
   - GET `/api/deals`: チーム内全案件取得(段階ごとにグループ化)
   - POST `/api/deals`: 案件作成(顧客名, 金額, 担当者, 期限, メモ)
   - PATCH `/api/deals/:id`: 案件情報更新
   - PATCH `/api/deals/:id/stage`: 案件の段階変更(position も更新)
   - DELETE `/api/deals/:id`: 案件削除
   - 全エンドポイントに認証ミドルウェア適用

5. **売上予測エンドポイント実装**
   - `src/routes/forecast.ts` を作成
   - GET `/api/forecast`: 月別・段階別の売上見込み集計
   - レスポンス形式: { month: "2025-01", stages: { "初期接触": 500000, "提案": 1000000, ... } }

6. **フロントエンド初期化**
   - `frontend/` ディレクトリを作成
   - `npx create-react-app . --template typescript` で初期化
   - Tailwind CSS をインストール(`npm install -D tailwindcss`)
   - `.env` に REACT_APP_API_URL=http://localhost:5000 を設定

7. **ログイン画面実装**
   - `src/pages/Login.tsx` を作成
   - メール・パスワード入力フォーム
   - POST `/