DARE BASE LABO — 営業力を研究し、売上を上げる
営業会社 DARE BASE が営業力を研究し売上を上げるために開発した、営業支援オールインワンツールです。
サイボウズのようなグループウェアの使いやすさを目指し、Next.js (Vercel) + Supabase で動作します。
機能一覧
| モジュール | 内容 |
|---|
| 📊 ダッシュボード | 今日の予定・自分のタスク・パイプライン・最近の活動を一望。支店稼働サマリー付き。代表 岡崎佑真の名言をランダム表示（スマホでは数字を先に出す）。データが揃うまでは**「はじめかた」ガイド**で次の一手を案内 |
| 🏦 銀行・支店 | 銀行＞支店の階層マスタ。CSV取込（列マッピング→差分プレビュー→確定）、支店ごとの最終接点日・アポ数・成約率、放置支店の担当者一括振り替え、活動ログ記録 |
| 📞 アポイント | 銀行支店から来た紹介を最小入力で登録（銀行→支店は絞り込みセレクト、業種・売上規模・面談相手はボタン選択）。登録すると支店の最終接点日を更新し、スケジュールに商談予定を自動作成。結果未入力アラート付き |
| 📡 支店稼働 | 本システムの中核。稼働率・休眠支店・銀行別稼働率バー・担当者別の管理カバレッジ・休眠アラート・銀行×月の接点ヒートマップ |
| 📅 スケジュール | 月/週/リスト表示のチームカレンダー。カテゴリ・担当者フィルタ。予定の入力画面から案件もそのまま登録（紹介元・商材も選べる。案件の修正は案件管理から） |
| 🗓 日程調整 | 候補日を◯△×で集約して確定（Google カレンダー登録・ICS 出力・社内予定登録）。メンバー指定で全員の空き時間を自動提案。顧客に空き時間を送って選んでもらう Web 会議予約リンク |
| 💼 案件管理 | 2階建てのカンバン。1階＝商談（商談予定 / 後追い C・B・A / 発注書待ち / 受注 / 失注。アライアンス営業は 販売協力 も）、2階＝受注後（契約・見積 / リース審査 / 設置調整中 / 設置待ち / 開通済み）。活動履歴、レポート（パイプライン・受注率・担当者別）。販売協力の案件はワンクリックで2次代理店として登録 |
| 🔗 クライアント共有 | 紹介元（銀行・1次/2次代理店）に、紹介いただいた顧客の進捗を閲覧専用リンクで公開。ログイン不要・常に最新・CSV保存可。Googleスプレッドシートは式1つで自動更新（IMPORTDATA）。停止・URL再発行・有効期限・閲覧記録付き |
| ✅ タスク管理 | かんばん + リスト、優先度・期限管理、クイック追加 |
| 🪪 名刺管理 | 名刺画像付きの連絡先データベース。名刺を撮影すると OCR で文字を読み取り自動入力。タグ・会社別ビュー・CSV エクスポート |
| 📚 ナレッジ共有 | Markdown 記事、カテゴリ・タグ、いいね・閲覧数、ピン留め |
| 📁 営業資料 | 提案書・料金表などのファイルライブラリ（Supabase Storage） |
| 🎙 ロープレ練習 | トークスクリプト管理 → 録音/画面録画 → リアルタイム文字起こし → 話速・フィラー分析 → メンバーからのフィードバック |
| 🎓 勉強会 | 営業代理業の商材・ツール勉強会の議事録/録画/資料アーカイブ |
| 💬 チャット | チャンネル制チームチャット（Supabase Realtime 対応） |
| 📌 掲示板 | お知らせ・質問・共有のスレッド + コメント（社内のみ） |
| 🤖 商談ログ（AI） | 1マイクで録った文字起こしから、話者分離・議事録・ToDo抽出・確度A/B/C判定・失注リスクをAIが起こす。ToDoはワンタップでタスク化、確度は案件に反映 |
| 🔐 権限・招待 | 6ロール（経営／管理部／マネージャー／一般／代理店管理者／代理店メンバー）。代理店にアカウントを配っても、他社・本部のデータには DB レベル（RLS）で到達できない。招待制サインアップ |
| 🧾 請求・支払 | 請求書の受領ボックス（LINE自動取込 + 手動）・発行/受領の一覧管理・OCR読取・メーカー明細の取込→率マスタで代理店別に自動計算→承認→支払明細の一括生成・入金/支払の手動消込（一部入金対応） |
| 📈 経営ダッシュボード | 経営層限定。売上・粗利の12ヶ月推移、メーカー/代理店別収益ランキング、請求・入金ステータスと期限超過アラート、キャッシュフロー予測（期日ベース6ヶ月） |
| 💚 LINE連携 | 公式アカウントを三者グループ（担当者＋クライアント＋公式アカウント）に招待すると、届いた請求書（画像・PDF）を自動でシステムに取込。アプリからのLINE送付（署名URL）にも対応 |
ロゴについて
ロゴは差し替え可能な透過アセットとして管理しています。公式のロゴ画像がある場合は、以下のファイルを上書きするだけでアプリ全体（スプラッシュ・サイドバー・ログイン・各ページ）に反映されます。
public/darebase-mark.svg … シンボルマーク（△▽）public/darebase-logo.svg … ワードマーク（ライト用・濃色文字）public/darebase-logo-dark.svg … ワードマーク（ダーク用・白文字）
デモモード
Supabase の設定なしでもすべての機能が動きます。
環境変数が未設定の場合は自動的にデモモードになり、サンプルデータ入りで起動、データはブラウザの localStorage に保存されます。まず試す → 気に入ったら Supabase を接続、という流れを想定しています。
npm install
npm run dev
# http://localhost:3000 を開く（デモモードで起動）
本番セットアップ
1. Supabase
- supabase.com でプロジェクトを作成
- ダッシュボードの SQL Editor で
supabase/migrations/ 内の SQL を番号順にすべて実行
（0001_init.sql で全テーブル・Realtime・Storage、0002_scheduling.sql で日程調整の追加カラム、
0004_billing.sql で請求・支払、0005_banking_sales.sql で銀行営業、
0006_roles_rls.sql でロールと RLS（ここで全ポリシーが入れ替わります）、
0007_deal_stages.sql で案件ステージの移行、
0008_private_attachments.sql で添付ファイルの非公開化、
0009_public_booking.sql で公開予約リンクの匿名アクセスの最小化、
0010_meeting_logs.sql で商談ログ（AI解析）のテーブル、
0015_schedule_deals_client_share.sql で予定と案件の紐づけ・販売協力からの2次代理店登録・
クライアント共有リンク（公開関数 get_client_share）が作成されます）
- Project Settings → API から URL と anon key を取得
- Authentication → Providers → Email で「Allow new users to sign up」を OFF（招待制）にする
（代理店にアカウントを配るため。招待していない人がサインアップできる状態にしないこと）
- 最初にログインした1人が自動的に 経営 ロールになります。以降のメンバーは
「設定 > 権限管理」で招待を登録 → Supabase の Authentication → Invite user で招待メールを送付
2. 環境変数
.env.example をコピーして .env.local を作成:
NEXT_PUBLIC_SUPABASE_URL=https://xxxx.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJ...
設定するとログイン画面（メール + パスワード）が有効になり、データがクラウド保存・チーム共有に切り替わります。
3. Vercel へデプロイ
- このリポジトリを GitHub から Vercel にインポート
- Environment Variables に上記 2 つを設定
- Deploy
4. 公開予約リンクについて
顧客向けの予約ページ /invite/[id] はログイン不要で動きます。匿名に開いているのは
get_customer_poll と book_customer_slot の2つの関数だけで、schedule_polls
テーブルへの匿名アクセスはありません（0009 で廃止）。予約リンクの URL は UUID なので、
リンクを知っている人だけが到達できます。
5. AI解析（商談ログ）
商談ログの解析は Claude API を使います。サーバー環境変数に API キーを設定してください。
| 変数 | 内容 |
|---|
ANTHROPIC_API_KEY | Claude API のキー。NEXT_PUBLIC_ は付けない（付けるとブラウザに配布され、誰でも使えてしまいます） |
- モデルは
claude-opus-5（src/lib/server/anthropic.ts の ANALYSIS_MODEL 1箇所で変更できます）
- 呼び出しは サーバールート経由のみ（
/api/ai/analyze-meeting）。ブラウザから直接 Claude は呼びません
- このルートはログイン必須です。未ログインのリクエストは 401 で弾き、AI を呼びません（APIキーの浪費と第三者の悪用を防ぐため）
- 未設定でも画面は開きます。「AIが未設定です」と表示され、解析ボタンだけが無効になります
- デモモード（Supabase 未接続）では Claude を呼ばず、サンプルの解析結果を返します。反映までの流れをそのまま確認できます
- 出力の形とプロンプトは
src/lib/meeting-analysis.ts の1箇所に集約しています。確度の判定基準は「設定 > 確度の判定基準」の文言がそのまま渡ります
料金の目安: 商談1件（60分・約2万字）の解析でおおむね数十円程度です。件数が増える場合は ANALYSIS_MODEL の変更も検討してください。
6. Google カレンダー連携について
「日程調整」モジュールは、確定した予定を Google カレンダーの予定作成画面へワンクリックで引き継ぐ 方式（認証不要）と ICS ダウンロード（Outlook 等）に対応しています。
組織全体での双方向同期（空き時間の自動取得・自動予定作成）を行いたい場合は、Google Cloud Console で OAuth 2.0 クライアントを作成し、Google Calendar API を有効化した上でサーバーサイド連携を追加実装してください（このリポジトリの日程調整データモデルはそのまま流用できます）。
7. LINE連携（請求書の受け取り・送付）
公式LINEアカウントを「担当者＋クライアント＋公式アカウント」の三者グループに招待すると、グループに届いた請求書（画像・PDF）が 請求・支払 > 受領ボックス に自動で取り込まれます。アプリからのLINE送付にも対応します。
サーバー環境変数（Vercel の Environment Variables に設定。NEXT_PUBLIC_ は付けない）:
| 変数 | 内容 |
|---|
LINE_CHANNEL_SECRET | Messaging API チャネルのチャネルシークレット（Webhook署名検証に使用） |
LINE_CHANNEL_ACCESS_TOKEN | チャネルアクセストークン（長期） |
SUPABASE_SERVICE_ROLE_KEY | Supabase の service_role キー（Webhook がDB/Storageへ書き込むため） |
SUPABASE_URL | Supabase の URL（省略時は NEXT_PUBLIC_SUPABASE_URL を使用） |
LINE Developers コンソールでの設定手順:
- プロバイダー配下に Messaging API チャネルを作成し、チャネルアクセストークン（長期）を発行
- Webhook URL に
https://<デプロイ先ドメイン>/api/line/webhook を設定し、「Webhookの利用」を ON
- LINE Official Account Manager で 応答メッセージ / あいさつメッセージを OFF（自動応答はアプリ側で行うため）
- 「グループトーク・複数人トークへの参加を許可する」を ON
- 公式アカウントを各三者グループへ招待 → グループが 請求・支払 > マスタ > LINEグループ に自動登録されるので、取引先に紐付け
動作確認（ローカル） — 署名付きリクエストでWebhookをテストできます:
BODY='{"destination":"x","events":[]}'
SIG=$(printf '%s' "$BODY" | openssl dgst -sha256 -hmac "$LINE_CHANNEL_SECRET" -binary | base64)
curl -i -X POST http://localhost:3000/api/line/webhook \
-H "content-type: application/json" -H "x-line-signature: $SIG" -d "$BODY" # → 200
- 請求書ファイルは非公開バケット
invoices に保存され、閲覧は署名URL経由のみ（公開バケットの files とは分離）
- LINE送付時の添付は7日間有効の署名URLとして送られます（LINEにPDFメッセージ型がないため、ファイルはリンク + 画像のみ画像メッセージ併送）
- Webhook は本番の公開HTTPSが必須のため、デモモード・ローカルでは受領ボックスの「LINE受信をシミュレート」で動作を確認できます
8. クライアント共有（紹介状況の公開）について
紹介元（銀行 / 1次代理店・2次代理店）に、紹介いただいた顧客の進捗を見せる仕組みです。
スプレッドシートを書き出して配るのではなく、閲覧専用の共有リンクを正にしています。
| 方式 | 採否 | 理由 |
|---|
共有リンク（/share/[token]） | 採用 | ログイン不要で常に最新。見せる項目をシステム側で固定でき、停止・再発行・有効期限でいつでも閉じられる。閲覧の記録も残る |
| スプレッドシート連携 | 採用（リンクの付帯機能） | 同じ内容を CSV で返す /api/share/[token]/csv を用意。Google スプレッドシートに =IMPORTDATA("https://<ドメイン>/api/share/<token>/csv") を貼るだけで自動更新される（Google 側がおおむね1時間ごとに取得）。Google Cloud の設定・認証キーは不要 |
| Google Sheets API で書き出し | 見送り | サービスアカウントの鍵管理と定期実行の仕組みが要る。書き出した写しは相手の手元に残り続け、止めても消せない |
| 紹介元にアカウントを配る | 見送り | 招待・パスワード管理の手間に対して、見たいのは進捗だけ。代理店ロールとは権限の意味も違う |
- 公開されるのは 紹介日・企業名・窓口・商談日・ステータス・進捗・商材・担当・更新日 だけです。
金額・メモ・確度・先方担当者・業種・売上規模などは、DB の関数
get_client_share が最初から返しません
- ステータスは紹介元向けの言葉に丸めます（失注 →「見送り」、受注後のリース審査などは「お手続き中」まで）。
対応表は
src/lib/client-share.ts（client-share.test.ts が期待表）
- 公開予約リンクと同じく、テーブルは匿名に一切開けていません。匿名に公開しているのは
get_client_share 関数だけで、トークン（32バイトの乱数）が一致した1件の範囲しか返しません。
停止中のリンクは「無い」と同じ扱いです
- 共有ページには
noindex と Referrer-Policy: no-referrer を付けています。CSV は式の先頭文字を無害化しています（CSV インジェクション対策）
- 一覧（
client_shares）は本部社員のみ、発行・停止・削除はマネージャー以上（can_master() / 画面は client_share 権限）
- CSV の自動取得は Supabase 接続時のみ使えます（デモのデータは各ブラウザの中にしか無いため）
技術構成
- Next.js 16（App Router / TypeScript / Turbopack）
- Tailwind CSS v4 — ダークモード対応のカスタムデザインシステム
- Supabase — PostgreSQL / Auth / Storage / Realtime
- lucide-react — アイコン
- ロープレ機能:
MediaRecorder / getDisplayMedia / Web Speech API（文字起こし。Chrome / Edge 推奨）
- 名刺 OCR: tesseract.js（
jpn+eng、ブラウザ内で文字認識。ワーカー/言語データの取得にオンライン環境が必要）
- モバイル対応 / PWA: 下部タブナビ・ボトムシート型モーダル・セーフエリア対応。「ホーム画面に追加」でスタンドアロン起動（
manifest.webmanifest / apple-icon）
プロジェクト構成
src/
├── app/
│ ├── (app)/ # サイドバー付きアプリ本体（各モジュール）
│ ├── login/ # ログイン（Supabase Auth）
│ ├── layout.tsx # ルートレイアウト（テーマ初期化）
│ └── globals.css # デザインシステム
├── components/
│ ├── ui/ # 共通UIコンポーネント
│ └── layout/ # サイドバー・トップバー
└── lib/
├── types.ts # 全エンティティ型定義
├── constants.ts # カテゴリ・ステージのラベル/色（受注後フェーズもここ）
├── use-collection.ts# Supabase/デモ両対応のデータフック
├── use-user.tsx # ユーザーコンテキスト
├── supabase.ts # クライアント + ファイル保存
├── settings.ts # 設定（休眠判定の閾値など）の読み書き
├── branch-metrics.ts# 支店稼働の集計（純粋関数・テスト付き）
├── branch-import.ts # 銀行・支店CSVの取込（純粋関数・テスト付き）
├── csv.ts # CSV/TSV の解析・出力
└── demo/ # デモ用シードデータ
supabase/
└── migrations/ # DBスキーマ（SQL）
テスト
集計・取込などの純粋ロジックにユニットテストを置いています（依存パッケージなし。Node 標準のテストランナー + 型ストリップで動作）。
npm test # ユニットテスト
npm run typecheck # 型チェック（tsc --noEmit）
npm run check # lint → typecheck → test をまとめて
| 対象 | 内容 |
|---|
src/lib/branch-metrics.test.ts | 稼働率集計・休眠判定の閾値境界・最終接点日の解決・担当者別カバレッジ |
src/lib/branch-import.test.ts | 銀行・支店CSVの列推定・重複判定（銀行コード＋支店コード）・差分プレビュー |
src/lib/scope.test.ts | ロール別の可視範囲（RLS と1対1の期待表。代理店の遮断・組織スコープ・個人スコープ） |
src/lib/pipeline.test.ts | 商談カンバンの列割当と遷移（確度ランク・手入力の確度を上書きしない）・受注後フェーズの大分類 |
src/lib/meeting-analysis.test.ts | AI解析のプロンプト組み立て・期限表現の日付化（「3営業日以内」など）・タスク化対象の絞り込み |
src/lib/client-share.test.ts | クライアント共有で何を見せて何を見せないか（get_client_share と1対1）・紹介元向けステータスへの置き換え・CSV（日本時間・CSVインジェクション対策）・トークンと有効期限 |
src/lib/schedule-deal.test.ts | スケジュールからの案件登録（予定タイトルからの会社名推定・完了予定日の初期値・アポ経由の予定の案件の解決・二重登録の注意） |
src/lib/partnership.test.ts | 販売協力の案件から2次代理店を登録するときの初期値と二重登録の判定 |
表示の設定（ブラウザに保存）
- 表示密度: 支店一覧・案件リストの行の高さを「ゆったり / コンパクト」で切り替えられます
（
src/lib/use-density.ts。どの一覧でも同じ設定が使われます）
- テーマ: ライト / ダーク
- どちらも
localStorage に保存され、アカウントには紐づきません
はじめかたガイド
Supabase に接続した直後はどの画面も空になるため、ダッシュボードに
「はじめかた」カードを出します（src/app/(app)/dashboard/setup-guide.tsx）。
- 実データの有無から進捗を判定します（支店を取り込んだ / メンバーを招待した /
アポイントを登録した / 案件を作った）
- 権限で手順を出し分けます（代理店にはマスタ取込と招待は出ません）
- すべて完了すると自動的に消えます。手動で閉じることもできます
権限モデル（ロールと RLS）
代理店にもアカウントを配る前提のため、データの分離は画面ではなく DB（RLS）で行っています。
ロールの定義は src/lib/roles.ts、ポリシーは supabase/migrations/0006_roles_rls.sql の1対1対応です。
| ロール | 見える範囲 |
|---|
executive 経営 | すべて。ロール付与・招待の管理もここだけ |
backoffice 管理部 | 請求・支払・各種マスタ・設定。案件は全社閲覧 |
manager マネージャー | 本部の案件・稼働・タスクをすべて閲覧・編集 |
member 一般社員 | 本部の営業データ（請求・経営数値は不可） |
partner_admin 代理店管理者 | 自社に割り当てられた支店・アポ・案件と、自社宛の支払・自社取り分の明細のみ |
partner_member 代理店メンバー | 上記のうち 自分が担当するもの のみ |
- 代理店ユーザーには チャット・掲示板・日程調整が 1行も返りません（
hq_only_* ポリシー）
- 公開予約リンク（
/invite/[id]）はテーブルに直接触りません。get_customer_poll /
book_customer_slot の2つの関数だけを匿名に公開しており、顧客用（kind='customer'）の
ポーリング以外は取得も予約もできず、他の回答者の氏名・連絡先（responses）も返しません（0009）
- クライアント共有（
/share/[token]）も同じ方式です。匿名に公開しているのは get_client_share だけで、
共有リンクの一覧（client_shares）は本部社員のみ・発行と停止はマネージャー以上（0015）
- お金のマスタ（取引先・手数料率・メーカー明細・入出金・LINEグループ）は 経営と管理部だけが読み書きできます（
backoffice_only_* ポリシー。マネージャー・一般社員も対象外）
- 営業資料・ナレッジ・トークスクリプト・勉強会は 代理店も閲覧可（編集は本部のみ）
- 予定・タスク・名刺・ロープレは
owner_id（default auth.uid()）で本人のみ
- 経営以外は自分の
role_key / organization_id / access_level を変更できません（profiles_guard トリガー）
- デモモード（Supabase 未接続）は RLS が効かないため、
src/lib/scope.ts が同じ判定をクライアント側で再現します。
RLS を変更したら scope.ts と scope.test.ts も必ず合わせて更新してください
- デモモードでは右上のユーザー切替に代理店ユーザー（村上・小林）が入っているので、
代理店から何が見えるかをそのまま確認できます
案件ステージ（2階建て）
先方の運用（商談予定 / 後追い C・B・A / 発注書待ち / 設置調整中 / 設置待ち / 開通済み）に合わせつつ、
既存の詳細フェーズ（見積・リース審査など）も残しています。
- 1階＝商談：
appointment → follow_up → po_wait → won / lost（DEAL_STAGES）
「後追い C/B/A」はステージではなく follow_up × confidence_rank の組み合わせで、
カンバンの列だけ3つに分かれます（PIPELINE_COLUMNS）。確度を変えるとカードが自動で列を移動します
- 販売協力（
partnership）はアライアンス営業だけのステージです（DEAL_STAGES.partnership.units。
銀行営業のカンバン・入力画面・レポートには出ません）。買ってはもらえなかったが紹介する側に回ってもらえた、
という「終わり方」なので、進行中のパイプラインにも受注率（受注 ÷（受注＋失注））の分母にも入れません。
販売協力の会社は原則 2次代理店になるため、案件の詳細から2次代理店として登録できます
（紹介してくれた1次代理店の下に、会社名・担当者を引き継いで作成。branches.source_deal_id で元の案件を控える）
- 案件は
/deals?deal=<案件id> で詳細を直接開けます（スケジュールの予定から「案件管理で開く」など。
案件の修正は案件管理に一本化しています）
- 2階＝受注後：
fulfillment_status（11段）はそのまま残し、カンバンの列は
契約・見積 / リース審査 / 設置調整中 / 設置待ち / 開通済み の5列に畳んで表示（FULFILLMENT_GROUPS）。
カード上のセレクトで詳細フェーズまで指定できます
- 「発注書待ち」は受注前（1階の最後）。発注書を受領＝受注で2階に入ります
- 遷移ルールは
src/lib/pipeline.ts に純粋関数として集約（pipeline.test.ts でテスト）。
手入力した確度(%)はドラッグ操作で上書きしません
- A/B/C の判定基準は「設定 > 確度の判定基準」から編集できます（
app_settings に保存）。
既定値はこちらの提案（暫定）です。ここで書いた文言が案件の入力画面と
商談カンバンの列見出しに出るので、現場が同じ基準で判定できます
銀行営業モジュールについて
銀行から紹介（リード）を受けて商材を販売する事業向けの機能群です。支店単位の稼働を数値化し、放置支店を炙り出して担当を振り替えることを目的にしています。
- 判定基準は設定画面から変更可能です（設定 > 銀行営業の判定基準）。休眠判定の日数（黄/橙/赤）、稼働とみなす日数、結果未入力アラートの日数はコードに直書きせず
app_settings テーブルに保存されます
- 受注後フェーズの定義は
src/lib/constants.ts の FULFILLMENT_STAGES 1箇所に集約しています。フェーズ名・粒度の変更はこの配列だけを編集してください（DBは text カラムなので enum の変更は不要）
- 主要テーブルには将来の事業部切替に備えて
business_unit_id を持たせてあります
- CSV取込は UTF-8 / Shift_JIS を自動判別します。重複判定は銀行コード＋支店コード、コードが空の場合は銀行名＋支店名で突き合わせます
補足
- ブラウザ対応: 文字起こし（Web Speech API）は Chrome / Edge のみ。他ブラウザでは録音 + 手動文字起こしにフォールバックします
- RLS は
0006_roles_rls.sql でロール別に絞ってあります（上記「権限モデル」参照）。ポリシーを変更したら src/lib/scope.ts も同じ内容に更新してください
profiles.access_level は 0006 以前の名残で、正は profiles.role_key です（互換のため両方更新しています）- 添付ファイルは すべて非公開バケットです（0008）。名刺画像・営業資料・ロープレ録音は
attachments、請求書は invoices。DB には Storage のパスだけを保存し、表示時に useFileUrl が署名URLを発行します。公開URLは発行しません
- 0008 適用前に公開バケット
files へアップロード済みのファイルがある場合、その公開URLは無効になります（該当ファイルは再アップロードしてください）
- 請求書OCRは画像のみ対応（tesseract.js は PDF を読めません）。PDFは添付保存 + 手入力を想定しています
