ダッシュボード(システム管理画面)

システム管理者向けのトップページ。サービス全体の月次KPIを可視化する。 有効化課金履歴 のデータを集計して表示する。

システム管理画面 権限: システム管理者のみ

概要

システム管理画面のホームページ(/home)に表示されるダッシュボード。 年選択ドロップダウンで対象年(1月〜12月)を切り替えると、2つのグラフが連動して更新される。

表示内容

① 月別新規契約数・解約数(折れ線グラフ)

新規契約 有効化日時(activatedAt) が対象年の各月に含まれる組織の数
解約 無効化日時(deactivatedAt) が対象年の各月に含まれる組織の数
カウント対象 解約済み(deactivatedAt 設定済み)の組織も、有効化された月の新規契約数としてカウントする
タイムゾーン Asia/Tokyo (UTC+9)

② 月別課金額推移(折れ線グラフ)

集計対象 課金履歴(BillingRecord)amount(課金合計額)を月ごとに合算
フィルタ 対象年の billing_records(year カラム一致、削除済み除外)

年選択ドロップダウン

単位 暦年(1月〜12月)
範囲 2025年〜現在年
デフォルト 現在年
実装 URLクエリパラメータ(?year=2026)。両グラフ共有

関連画面

関連コンポーネント

YearSelector

年選択ドロップダウン。URLクエリパラメータを更新することで両グラフを連動させる。

app/home/_components/year-selector/

OrganizationMonthlyChart

月別新規契約数・解約数の折れ線グラフ(Recharts)。新規契約=インディゴ、解約=レッド。

app/home/_components/organization-monthly-chart/

サンプルデータ(架空)

新規契約
解約

BillingMonthlyChart

月別課金額推移の折れ線グラフ(Recharts)。エメラルドグリーン。Y軸は万円単位で表示。

app/home/_components/billing-monthly-chart/

開発セッション