Counter（counter.plfumg.com）は店舗スタッフ向けの管理アプリケーションです。SvelteKit + Svelte 5 で構築され、daisyUI 5 + Tailwind CSS v4 でスタイリングされています。
| 項目 | 内容 |
|---|
| タイトル | ログイン - 顧客管理台帳 |
| 認証方式 | メール+パスワード、Google OAuth、パスキー |
| 機能 | Conditional UI（パスキー自動入力）対応 |
| エラー | トースト通知で表示 |
| 項目 | 内容 |
|---|
| タイトル | 店舗を選択 - 顧客管理台帳 |
| 表示条件 | ユーザーが複数組織に所属 |
| 機能 | 店舗カード選択 → アクティブ組織設定 → リロード |
| 項目 | 内容 |
|---|
| タイトル | 店舗が設定されていません |
| 表示条件 | ユーザーに店舗が割り当てられていない |
| 機能 | 管理者への連絡を促すメッセージ + ログアウトボタン |
| 項目 | 内容 |
|---|
| タイトル | ダッシュボード - 顧客管理台帳 |
| コンポーネント | DashboardStats, UnreadMessages, ShopProfile, CastStatus |
| データ | 未読ルーム（上位5件）、店舗プロフィール |
| レイアウト | 2/3 + 1/3 グリッド（デスクトップ） |
| 項目 | 内容 |
|---|
| タイトル | - （レイアウトが ChatRoomList を表示） |
| コンポーネント | ChatRoomList（レイアウト内） |
| 機能 | ルーム一覧、未読バッジ、最新メッセージプレビュー |
| レイアウト | 2カラム（PC: リスト+メッセージ、モバイル: 切替） |
| 項目 | 内容 |
|---|
| タイトル | （連絡先名） |
| コンポーネント | ChatPanel, ContactAvatar |
| データ | getChatRoom({ roomId }) |
| 機能 | メッセージ表示、送信、既読、添付ファイル |
| ヘッダー | 戻るボタン（モバイル）、連絡先名、詳細リンク |
| 項目 | 内容 |
|---|
| タイトル | 顧客リスト - 顧客管理台帳 |
| コンポーネント | ContactList（レイアウト内） |
| フィルタ | 50音、タグ、グループ、キーワード検索 |
| レイアウト | 2カラム（PC: リスト+詳細、モバイル: 切替） |
| 項目 | 内容 |
|---|
| タイトル | （連絡先名） |
| コンポーネント | ContactDetail, ChatPanel |
| タブ | プロフィール / チャット |
| データ | getContact({ id }) |
| 機能 | 連絡先情報表示、チャットNG 表示、未読バッジ |
| 項目 | 内容 |
|---|
| タイトル | 一括配信 - 顧客管理台帳 |
| コンポーネント | BroadcastList, BroadcastCreateForm, BroadcastDetailModal |
| モード | 一覧表示 / 新規作成 |
| タブ | DRAFT, SCHEDULED, SENT, FAILED |
| 機能 | 作成、編集、複製、削除、キャンセル、件数プレビュー |
| 項目 | 内容 |
|---|
| タイトル | アカウント設定 - 顧客管理台帳 |
| コンポーネント | ProfileCard, PasskeyManager, LinkedAccountsManager, PasswordManager |
| 機能 | パスキー管理、外部アカウント連携、パスワード変更、代理認証検出 |
| 項目 | 内容 |
|---|
| タイトル | 店舗設定 - 顧客管理台帳 |
| 機能 | 店舗情報表示、purelovers 同期、ウェルカムメッセージ編集 |
| データ | getShopSettings(), syncShopFromPurelovers() |
| 項目 | 内容 |
|---|
| タイトル | 店舗通知設定 |
| セクション | PUSH デバイス、メール通知先、LINE 連携 |
| 機能 | デバイス登録/削除、カテゴリ設定、テスト送信 |
| LIFF | LINE LIFF SDK によるアカウント連携 |
| 項目 | 内容 |
|---|
| タイトル | タグ・ラベル管理 |
| 機能 | ラベル CRUD（AND/OR/NOR/NAND）、ネスト（Lv3まで）、タグ一覧 |
| バリデーション | 循環参照検出、深度制限 |
| 視覚効果 | レベル別のアニメーションボーダー |
| 項目 | アイコン | パス |
|---|
| ダッシュボード | dashboard | / |
| チャット | message-circle | /chat |
| 顧客リスト | users | /contact |
| 一括配信 | send | /broadcast |
| 店舗設定 | settings | /settings/shop |
| 店舗通知設定 | bell | /settings/notice |
| タグ・ラベル | tag | /settings/tags |
- デスクトップ: 左サイドバー（固定） + メインコンテンツ + フッター
- モバイル: ハンバーガーメニュー + メインコンテンツ + ボトムナビ
- Drawer:
drawer-end lg:drawer-open パターン
ルートレイアウトで WebSocket 接続を管理:
- 接続: userId + shopId 利用可能時
- ハートビート: 30秒間隔
- 再接続: 指数バックオフ（最大10回）
- 購読: 全ルーム（ワイルドカード
*）
| 技術 | 用途 |
|---|
| SvelteKit | ルーティング、SSR、Remote Functions |
| Svelte 5 | Runes ($state, $derived, $effect) |
| daisyUI 5 | UIコンポーネント |
| Tailwind CSS v4 | スタイリング |
| Lucide Svelte | アイコン |
| better-auth/svelte | 認証クライアント |