🎯 マーダーミステリー店舗管理システム
6店舗対応のマーダーミステリー店舗管理システム
📚 ドキュメント
詳細なドキュメントは docs/ フォルダにあります。
🎨 デザインシステム制約（必読・最重要）
✅ 必須遵守事項
- Guidelines.md完全準拠: 全ページで店舗識別色・公演カテゴリ色システム必須適用
- タイポグラフィ制約:
text-*, font-*, leading-*クラス使用絶対禁止
- 色の濃度統一: 背景*-50、境界線*-200、テキスト*-800で固定
- globals.css活用: 基本タイポグラフィは自動適用される（オーバーライド禁止）
- ShadCN UI優先: 全コンポーネントでShadCN UI使用、自作コンポーネント最小限
🎨 Figma Make級デザインシステム
- Tailwind V4制約システム: globals.cssによる高度なタイポグラフィ制御
- 企業級色管理: OKLCH色空間による科学的な色調統一
- 淡い色調維持: 「プロフェッショナル」「淡くて美しい」の設計哲学
- 業務用UI品質: 長時間使用に適した目に優しいインターフェース
❌ 新規ページ作成時のチェックリスト
✨ 主な機能
📅 スケジュール管理（リストカレンダー特殊仕様）
- 月間Table形式: 従来のグリッド型カレンダーではなく、独特なTable構造のリスト表示
- 複雑なデータ構造:
scheduleEvents[monthKey: DaySchedule[]]による階層管理
- 6店舗×時間帯対応: 朝・昼・夜の3時間帯に加え、自由時間設定可能
- 状態管理: localStorage + Supabase双方向同期
- 色システム: 店舗識別色（背景）+ 公演カテゴリ色（バッジ）の複合表示
- 公演中止・復活機能:
isCancelledフラグ + opacity-50 + Ban icon表示
- 予約連携: モックデータによる予約人数表示（将来的にStores予約API連携）
👥 スタッフ管理
- 多角的管理: GM・マネージャー・企画スタッフの役割分担
- 詳細設定: 勤務可能店舗・曜日・時間帯・シナリオ習熟度
- プライバシー保護: 連絡先のマスキング表示（パスワード「0909」で閲覧）
- Context管理: StaffContextによる状態管理 + Supabase同期
📚 シナリオ管理
- 包括的情報管理: タイトル・作者・所要時間・難易度・ジャンル・必要道具
- 経済情報: ライセンス料・制作費・GM代金・参加費の詳細管理
- 在庫連携: performance_kitsテーブルとの関連付け
- 習熟度追跡: GM別の経験値・プレイ回数管理
🏪 店舗管理
- 6店舗統一管理: 高田馬場（青）・別館①（緑）・別館②（紫）・大久保（橙）・大塚（赤）・埼玉大宮（茶）
- 識別色システム: 各店舗専用のカラーテーマ（Guidelines.md準拠）
- 運営情報: 収容人数・部屋数・マネージャー・営業状態
- Context統合: StoreContextによる全システム連携
💰 売上・顧客・在庫管理
- 売上分析: 月次・店舗別・シナリオ別の多角的集計
- 顧客プロフィール: 来店履歴・嗜好分析・リマインダー設定
- 在庫追跡: シナリオキット・小道具・消耗品の管理
- ライセンス契約: 作者別・期間別の契約状況管理
🔄 Supabase完全連携
- 認証システム: 必ずログイン必須、匿名予約不可
- リアルタイム同期: 予約・スケジュール更新の即時反映
- RLS（Row Level Security）: ユーザー権限に応じたデータアクセス制御
- データ移行: 40個のシナリオ・スタッフ情報の完全同期済み
🚀 セットアップ
1. 依存関係のインストール
npm install
2. 環境変数設定
.env.local ファイルを作成：
VITE_SUPABASE_URL=https://lgyhbagdfdyycerijtmk.supabase.co
VITE_SUPABASE_PUBLISHABLE_KEY=sb_publishable_...
# 互換用（Legacy API Keysが有効な場合のみ）
# VITE_SUPABASE_ANON_KEY=eyJ...
3. データベーススキーマ確認
# スキーマの確認
npm run db:check
# データベースの差分確認
npm run db:diff
# データベースリセット（必要に応じて）
npm run db:reset
4. 開発サーバー起動
npm run dev
🗄️ データベース管理
スキーマ管理
- スキーマ定義:
database/create_tables.sql
- 詳細ドキュメント:
database/README.md
- スキーマ確認:
npm run db:check
よくある問題と解決方法
1. カラム名の変更
- 問題:
gm_fee → gm_assignmentsへの移行
- 解決: マイグレーションで段階的に移行
- 注意: 既存データの移行が必要
2. データ型の変更
- 問題:
INTEGER → JSONBへの変更
- 解決: 一時的なカラムを作成してデータを移行
3. 制約の追加
- 問題:
CHECK制約の追加
- 解決: 既存データを確認してから制約を追加
開発時の注意事項
- スキーマ変更時は必ず
database/README.mdを更新
- マイグレーションファイルは必ず作成
- 本番環境への適用前にローカルでテスト
- カラム名の変更は慎重に行う
📦 デプロイ
Netlify
npm run build
# dist フォルダをNetlifyにデプロイ
Vercel
npm run build
# Vercel CLIまたはGitHub連携でデプロイ
🏢 対応店舗（正確なカラーリング）
| 店舗名 | 短縮名 | カラー | 収容人数 | Guidelines.md色指定 |
|---|
| 高田馬場店 | 馬場 | 🔵 青 | 8名 | bg-blue-50 border-blue-200 |
| 別館① | 別館① | 🟢 緑 | 6名 | bg-green-50 border-green-200 |
| 別館② | 別館② | 🟣 紫 | 6名 | bg-purple-50 border-purple-200 |
| 大久保店 | 大久保 | 🟠 橙 | 7名 | bg-orange-50 border-orange-200 |
| 大塚店 | 大塚 | 🔴 赤 | 6名 | bg-red-50 border-red-200 |
| 埼玉大宮店 | 埼玉大宮 | 🟤 茶 | 8名 | bg-amber-50 border-amber-200 |
🛠️ 技術仕様（2024年12月現在）
- フロントエンド: React 18 + TypeScript + Vite
- スタイリング: Tailwind CSS v4 + ShadCN UI + globals.css制約システム
- UI コンポーネント: shadcn/ui（企業級品質）
- 状態管理: Context API（ScenarioContext, StaffContext, StoreContext, EditHistoryContext）
- データ永続化: Supabase（メイン） + LocalStorage（キャッシュ・オフライン対応）
- 認証: Supabase Auth（role=admin/staff/customer自動振り分け）
- リアルタイム: Supabase Realtime + Context同期
- ビルドツール: Vite（最適化済み）
- デプロイ: Netlify / Vercel
- テスト: Jest + React Testing Library（将来実装）
- CI/CD: GitHub Actions（将来実装）
📋 機能一覧
✅ 実装済み機能（現在のプロジェクト状況）
- スケジュール管理: 月間リストカレンダー形式（Table構造）
- スタッフ管理: 役割・勤務条件・連絡先保護機能
- シナリオ管理: 在庫・ライセンス・習熟度管理
- 店舗管理: 6店舗統一管理・識別色システム
- 編集履歴: EditHistoryContextによる全操作記録
- Supabase連携: 双方向データ同期・認証システム
- デザインシステム: Guidelines.md + globals.css制約
🔄 部分実装・テンプレート準備済み
- 売上管理: 基本フレームワーク実装済み
- 顧客管理: インターフェース準備済み
- 在庫管理: データ構造設計済み
- ライセンス管理: 基本機能実装済み
- 予約管理: モックデータ連携済み
🆕 今後実装予定
- 顧客予約サイト: 公演一覧・予約フォーム・マイページ
- リアルタイム通知: 予約・キャンセル・リマインダー
- 高度な分析: 売上トレンド・顧客行動解析
- モバイルアプリ: PWA対応・オフライン機能
- 外部API連携: 決済システム・メール配信
🔒 セキュリティ機能
- 連絡先保護: 電話番号・メールアドレスのマスキング表示（パスワード「0909」）
- 権限管理: Supabase RLSによるユーザー権限制御
- データ暗号化: 機密情報の暗号化保存
- 監査ログ: EditHistoryContextによる全操作記録
- バックアップ: 定期的なデータバックアップ・復元機能
📑 プロジェクト制作順序（管理ツール優先・段階的実装）
フェーズ 1：基盤 & 認証システム
-
ログインページ（共通）
- Supabase Auth連携完了
role=admin/staff/customerでルーティング自動切替- 単一アプリ・ロール切替運用
-
管理者ダッシュボード（Admin専用）
- 「店舗数 / 公演数 / 今月の予約数」概要表示
- Guidelines.md色システム適用
- 10タブナビゲーション統合
フェーズ 2：マスタ管理（現在ほぼ完成）
-
店舗管理ページ
- 6店舗の登録・編集完了
- 識別色システム完全実装
- Context + Supabase双方向同期
-
シナリオ管理ページ
- 40個のシナリオデータ同期完了
- ライセンス料・制作費管理
- performance_kits連携準備
This is the beginning of the README. Read the rest at the original. Read the full README ↗
