Skip to content

specification.md

Latest commit

 

History

History
277 lines (212 loc) · 13.5 KB

specification.md

File metadata and controls

277 lines (212 loc) · 13.5 KB

1. メイン要素

ネットワーク構成

  • 通信方法: 個人回線または高専 WiFi 経由
  • 管理用回線: Tailscale を用いて接続（VPN）
  • P2P 通信: レジと厨房の P2P 通信可能にする予定（WebRTC など検討）

ハードウェア構成

  • サーバー: 自宅サーバー
  • クライアント端末: タブレット、スマホ、PC（注文や管理用）

2. バックアップ

ネットワーク

  • 個人の回線をバックアップ用として活用

ハードウェア

  • バックアップサーバー: 佐藤自宅サーバー
  • クライアント端末: 各自のタブレット、スマホ、PC

3. データベース設計 (Notion API + オプションデータ構造)

メニューデータ

  • id: string (UUID)
  • name: string (必須, メニュー名)
  • price: number (必須, 金額)
  • imagePath: string (必須, 画像パス)
  • description?: string (説明文, Markdown 対応)
  • toppingIds?: string[] (リレーション: トッピングの ID 配列)
  • additionalInfoIds?: string[] (リレーション: その他情報の ID 配列)

トッピングデータ

  • id: string (UUID)
  • name: string (必須, トッピング名)
  • price?: number (オプションで追加される料金)
  • description?: string (トッピングの説明, Markdown 対応)

その他情報データ

  • id: string (UUID)
  • name: string (タイトル)
  • description: string (その他の説明文, Markdown 対応)

注文データ

  • id: string (UUID)
  • class: string (クラス)
  • orderNumber: string (UUID で生成する注文番号)
  • time: Date (自動でタイムスタンプ)
  • peopleCount: number (人数)
  • generation: string (年代)
  • orderItems: MenuItem[] (リレーション: メニュー)
  • totalPrice: number (自動計算)
  • cashier: Staff (リレーション: スタッフ)

シフトデータ

スタッフのシフト情報を管理します。

  • id: string (UUID)
  • name: string (必須, スタッフの名前)
  • class: string (クラス)
  • shiftStart: Date (シフト開始時間)
  • shiftEnd: Date (シフト終了時間)

4. ぺージ一覧

/ :トップページ

  • システムの宣伝ページのように作る

/menu: メニュー表示ページ（売り切れ、オプション情報対応）

  • クラスのイメージ画像と紹介文を一番上に配置する
  • 売り切れ表示: 売り切れのメニューを表示し、注文できないようにする。
  • メニューの表示: メニュー名、価格、画像、説明文、オプション情報などを表示する。
  • オプション情報の表示: トッピング、カロリー情報、アレルギー情報などのオプション情報を動的に表示する。

/register: 注文ページ

  • 注文フォーム: メニューの選択、オプションの選択、人数、年代などの入力フォームを提供する。
  • UUID による注文番号管理: ユニークな注文番号を生成し、注文を管理する。
  • タッチ端末対応: タッチ操作で注文できるようにし、利便性を高める。
  • 注文の確認: 注文内容を確認できる画面を提供する。
  • メニューに在庫数から計算した残りのドリンク数を表示する

/backyard: 厨房ページ

  • 注文の表示: 注文内容、注文番号、注文時間、注文したクラスなどを表示する。
  • 完成ボタン: 料理が完成した際に押すボタンで、注文のステータスを更新する。

/dashboard/menu: メニュー管理ページ（クラス担当者が入力、オプション設定）

  • メニューの追加: クラス担当者がメニューを追加できるフォームを提供する。
  • メニューの編集: 既存のメニューの詳細を編集できるフォームを提供する。
  • オプション情報の入力: トッピング、カロリー情報、アレルギー情報などのオプション情報を設定できるフォームを提供する。
  • 登録済みメニューの表示: クラス担当者が登録したメニューのリストを表示する。
  • メニューの削除: 不要なメニューを削除できる機能を提供する。

/dashboard/stock: 在庫管理ページ

  • 在庫情報の表示: 商品ごとの在庫量、入荷日、賞味期限などを表示する。
  • 低在庫アラート: 設定した在庫量を下回った場合にアラートを表示する。
  • 在庫更新: 商品の在庫量を更新できるフォームを提供する。
  • 在庫の自動更新: 商品の入荷や消費に応じて、在庫量を自動的に更新する機能を提供する。
  • メニューに在庫数から計算した残りのドリンク数を表示する

/dashboard/sales: 売上管理ページ

  • 売上データの表示: 売上金額、注文数、人気メニューなどを表示する。
  • 売上データの分析: グラフやチャートによる売上データの可視化を提供する。
  • 人気メニューの表示: 売上データに基づいて人気メニューを表示する。
  • 売上データのダウンロード: 売上データを CSV や Excel などの形式でダウンロードできる機能を提供する。

/dashboard/staff: シフト管理ページ

  • スタッフのシフト情報の表示: スタッフ名、クラス、シフト開始時間、シフト終了時間などを表示する。
  • シフトの追加: スタッフのシフトを追加できるフォームを提供する。
  • シフトの編集: シフトの詳細を編集できるフォームを提供する。
  • シフト終了通知: シフトが終了したスタッフに通知を送信する。

5. 欲しい追加機能

在庫管理

  • 低在庫アラート機能
  • 売上管理機能とデータ分析機能（ダッシュボードに統合）

売上管理

  • 売上データのリアルタイム分析とダッシュボード表示

シフト管理

  • Google Calendar との連携でスタッフシフト管理
  • シフト終了通知機能

6. 運用フロー

  1. 注文用タブレットで注文を受け付ける。
  2. 注文内容をキッチンへ音声で通知し、スマホで確認。
  3. 商品が完成したら、キッチン側で「完成ボタン」を押す。
  4. ウェイターが提供したら、「提供ボタン」をスマホで押す。
  5. 注文番号をレジに入力して決済を行う。

7. ページと API 設計

ページ

  • /menu: メニュー表示ページ（売り切れ、オプション情報対応）
  • /register: 注文ページ
  • /backyard: 厨房ページ
  • /dashboard/menu: メニュー管理ページ（クラス担当者が入力、オプション設定）
  • /dashboard/stock: 在庫管理ページ
  • /dashboard/sales: 売上管理ページ
  • /dashboard/staff: シフト管理ページ

API 設計 (TypeScript)

  • メニュー API
    • GET /api/menus: メニュー一覧取得
    • POST /api/menus: メニューの新規追加（クラス担当者用）
    • PATCH /api/menus/{id}: メニューの編集（オプション入力対応）
    • DELETE /api/menus/{id}: メニュー削除
  • 在庫 API
    • GET /api/dashboard/stock: 在庫情報取得
    • POST /api/dashboard/stock: 在庫更新
  • 売上 API
    • GET /api/dashboard/sales: 売上データ取得

8. ディレクトリ構成

/
├── public/                                 # 静的ファイル
│   ├── images/                             # メニュー画像
│   │   └── placeholder.jpg                 # 画像がない場合のデフォルト画像
│   └── favicon.ico                         # サイトアイコン
├── src/
│   ├── app/                                # App Routerのルート
│   │   ├── menu/                           # メニューページ
│   │   │   ├── page.tsx                    # メニュー表示ロジック
│   │   │   ├── MenuList.tsx                # メニューリストコンポーネント
│   │   │   └── MenuItem.tsx                # メニューアイテム表示コンポーネント
│   │   ├── register/                       # 注文関連ページ
│   │   │   ├── page.tsx                    # 注文ページ
│   │   │   └── RegisterForm.tsx            # 注文フォーム
│   │   ├── backyard/                       # 厨房管理ページ
│   │   │   ├── page.tsx                    # 厨房の注文管理ロジック
│   │   │   ├── KitchenOrderList.tsx        # 注文一覧表示
│   │   │   └── KitchenControl.tsx          # 完成ボタンと通知管理
│   │   ├── dashboard/                      # ダッシュボード関連
│   │   │   ├── menu/                       # メニュー管理ページ
│   │   │   │   ├── page.tsx                # メニュー管理ロジック
│   │   │   │   ├── MenuForm.tsx            # メニュー入力フォームコンポーネント
│   │   │   │   └── MenuTable.tsx           # 登録済みメニュー表示コンポーネント
│   │   │   ├── stock/                      # 在庫管理ページ
│   │   │   │   ├── page.tsx                # 在庫管理ロジック
│   │   │   │   ├── StockAlert.tsx          # 低在庫アラートコンポーネント
│   │   │   │   └── StockList.tsx           # 在庫リストコンポーネント
│   │   │   ├── staff/                      # シフト管理ページ
│   │   │   │   ├── page.tsx                # 在庫管理ロジック
│   │   │   │   ├── Staff.tsx               # 低在庫アラートコンポーネント
│   │   │   │   └── StaffAlerd.tsx          # シフトアラートコンポーネント
│   │   │   ├── sales/                      # 売上分析ページ
│   │   │   │   ├── page.tsx                # 売上分析ロジック
│   │   │   │   ├── SalesChart.tsx          # 売上データのグラフ表示コンポーネント
│   │   │   │   └── SalesTable.tsx          # 売上データテーブル表示
│   │   ├── auth/                           # 認証関連ページ
│   │   │   ├── page.tsx                    # 認証ページ
│   │   ├── api/                            # APIルート
│   │   │   ├── menu/                       # メニューAPI
│   │   │   │   ├── route.ts                # メニュー取得・追加・更新・削除API
│   │   │   ├── stock/                      # 在庫API
│   │   │   │   ├── route.ts                # 在庫取得・更新API
│   │   │   ├── sales/                      # 売上API
│   │   │   │   ├── route.ts                # 売上取得API
│   ├── components/                         # 再利用可能なReactコンポーネント
│   │   ├── Header.tsx                      # 共通ヘッダーコンポーネント
│   │   ├── Footer.tsx                      # 共通フッターコンポーネント
│   │   ├── Button.tsx                      # ボタンコンポーネント
│   │   └── LoadingSpinner.tsx              # ローディングスピナー
│   ├── lib/                                # ユーティリティ関数、API接続
│   │   ├── apiClient.ts                    # APIリクエスト関数
│   │   ├── menuUtils.ts                    # メニュー関連ユーティリティ
│   │   ├── stockUtils.ts                   # 在庫管理ユーティリティ
│   │   └── salesUtils.ts                   # 売上分析ユーティリティ
│   ├── styles/                             # Tailwind CSSスタイル定義
│   │   └── globals.css                     # グローバルスタイル
│   ├── types/                              # TypeScript型定義
│   │   ├── menu.ts                         # メニュー関連型定義
│   │   ├── stock.ts                        # 在庫関連型定義
│   │   └── sales.ts                        # 売上関連型定義
│   └── hooks/                              # カスタムフック
│       ├── useMenu.ts                      # メニュー取得フック
│       ├── useStock.ts                     # 在庫管理フック
│       └── useSales.ts                     # 売上データフック
├── .env.local                              # 環境変数ファイル
├── next.config.js                          # Next.jsの設定
├── tailwind.config.js                      # Tailwind CSSの設定
├── tsconfig.json                           # TypeScriptの設定
└── package.json                            # パッケージマネージャー設定

9. 技術スタック

  • フロントエンド: Next.js (App Router), TypeScript, Tailwind CSS
  • バックエンド: Next.js, Notion API, WebSocket (Socket.io)
  • オフライン機能: IndexedDB, LocalStorage, Service Worker
  • API 設計: OpenAPI, Postman
  • PWA 機能: Workbox (Service Worker 管理)
  • コンテナ化: Docker
  • セキュリティー: HTTPS, Tailscale (VPN)
  • バージョン管理: Git