バックオフィスの全体像 Backoffice at a glance

このドキュメントの読み方 How to use this documentation

ポータルの位置づけ Where this portal sits

flowchart LR
  subgraph Users["利用者 / Consumers"]
    EndUser["エンドユーザー
End users"]
    Owner["駐車場オーナー
Lot owners"]
  end
  subgraph Clients["クライアント / Clients"]
    Mobile["モバイルアプリ
Mobile app"]
    OwnerPortal["オーナーポータル
Owner portal"]
    AdminPortal["管理者ポータル
Admin portal
(this doc)"]
  end
  subgraph Backend["バックエンド / Backend (Supabase)"]
    PG[(PostgreSQL
PostGIS)]
    Auth[Auth]
    RT[Realtime]
    Edge[Cloudflare Workers]
  end
  S3[(Cloudflare R2
assets)]
  Map[Mapbox]

  EndUser --> Mobile
  Owner --> OwnerPortal
  AdminPortal -- manages --> Mobile
  AdminPortal -- manages --> OwnerPortal
  Mobile --> Auth
  OwnerPortal --> Auth
  AdminPortal --> Auth
  Auth --> PG
  Mobile --> PG
  OwnerPortal --> PG
  AdminPortal --> PG
  AdminPortal --> RT
  AdminPortal --> Edge
  Edge --> PG
  AdminPortal --> S3
  AdminPortal --> Map

対象ユーザー Who uses the portal

技術スタック Technology stack

ディレクトリ構造 Directory layout

parky/web/portal/admin/
├── CLAUDE.md                   admin ポータル局所ルールAdmin portal local rules
└── src/
    ├── App.tsx                 ルート定義 (47 ページ + 2 marketing redirect)Route table (47 pages + 2 marketing redirects)
    ├── main.tsx                エントリーポイントEntry point
    ├── auth/
    │   ├── AuthContext.tsx     セッション + アイドルタイムアウト + admin role 検証Session + idle timeout + admin role re-verify
    │   ├── RequireAuth.tsx     マウント時に /v1/admin/admins/me 再検証Re-verifies via /v1/admin/admins/me on mount
    │   └── useAuth.ts
    ├── lib/
    │   ├── bff.ts              @parky/bff-client インスタンス@parky/bff-client instance
    │   ├── api/                BFF call wrapper（コンポーネント直 fetch 禁止）BFF call wrappers (no direct fetch)
    │   ├── queries/            TanStack Query keysTanStack Query keys
    │   ├── supabase.ts         Auth + Realtime のみ（anon key）Auth + Realtime only (anon key)
    │   ├── codes.tsx           マスターコード（useCode）Master codes (useCode)
    │   └── PageTitleContext.tsx
    ├── components/
    │   ├── layout/             AppLayout / Header / Sidebar / sidebarMenuData / SidebarNotificationsAppLayout / Header / Sidebar / sidebarMenuData / SidebarNotifications
    │   ├── ListFilterBar.tsx   共通フィルタバーUniversal filter bar
    │   ├── ParkingMap.tsx      Mapbox GL JS visualizer
    │   ├── ParkingShapeEditor.tsx mapbox-gl-draw shape editor
    │   ├── ActivityLogFeed.tsx Realtime feed
    │   ├── FileUpload.tsx      Cloudflare R2 presigned PUT
    │   ├── MarkdownEditor.tsx  marked + DOMPurify
    │   ├── ConfirmProvider.tsx + ToastProvider.tsx
    │   ├── ErrorBoundary.tsx + Forbidden.tsx
    │   └── MasterDetailLayout.tsx
    ├── hooks/
    │   ├── PermissionProvider.tsx RBAC ロード + usePermissionRBAC load + usePermission
    │   └── …
    └── pages/                  47 ページ (全て React.lazy ロード)47 pages (all React.lazy)

最初のログインフロー First login flow

sequenceDiagram
  participant U as Admin
  participant FE as Admin Portal (React)
  participant SB as Supabase Auth
  participant PG as PostgreSQL
  U->>FE: email + password
  FE->>SB: signInWithPassword()
  SB-->>FE: JWT session
  FE->>PG: SELECT admins, roles, role_permissions (RLS)
  PG-->>FE: current admin + permission keys
  FE-->>U: Dashboard with permitted nav items