バックオフィスの全体像 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/
├── src/
│   ├── App.tsx                 ルート定義 (全32ページ)Route table (all 32 pages)
│   ├── main.tsx                エントリーポイントEntry point
│   ├── auth/
│   │   ├── AuthContext.tsx     認証状態とログイン/アウトAuth state + login/out
│   │   └── RequireAuth.tsx     保護ルートProtected routes
│   ├── lib/
│   │   ├── api.ts              APIヘルパー (100+)API helpers (100+)
│   │   ├── supabase.ts         Supabase client
│   │   ├── codes.tsx           マスターコードMaster codes
│   │   └── PageTitleContext.tsx
│   ├── components/
│   │   ├── layout/             AppLayout, Header, Sidebar
│   │   ├── VirtualTable.tsx    仮想スクロールテーブルVirtualized table
│   │   ├── ListFilterBar.tsx   共通フィルタバーUniversal filter bar
│   │   ├── ParkingMap.tsx      Mapbox visualizer
│   │   ├── ActivityLogFeed.tsx Realtime feed
│   │   ├── FileUpload.tsx      Cloudflare R2 upload
│   │   ├── MarkdownEditor.tsx  TinyMCE editor
│   │   └── MasterDetailLayout.tsx
│   ├── hooks/
│   │   ├── usePaginatedList.ts ページング + 無限スクロールPagination + infinite scroll
│   │   └── useTableSort.ts
│   └── pages/                  32ページ (全て lazy ロード)32 pages (all lazy loaded)
├── API_SPECIFICATION.md
└── README.md

最初のログインフロー 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