done

ダッシュボード — 初期実装

2026-06-08 | システム管理画面ダッシュボード新規作成

実装内容

1

月別新規契約数・解約数グラフ

有効化日時(activatedAt) / 無効化日時(deactivatedAt) が対象年の各月に含まれる組織数を集計。折れ線グラフ(Recharts)で2本同時表示。

2

月別課金額推移グラフ

課金履歴(BillingRecord) の amount を月ごとに合算。折れ線グラフ(Recharts)で表示。Y軸は万円単位。

3

年選択ドロップダウン

暦年(1月〜12月)単位で対象年を選択。URLクエリパラメータ ?year=YYYY で両グラフが連動。デフォルトは現在年。

決定事項

項目 決定内容
新規契約の定義 activatedAt が対象月に含まれる組織数(解約済みも含む)
解約の定義 deactivatedAt が対象月に含まれる組織数
表示期間単位 暦年(1月〜12月)選択式、両グラフ共有
グラフ種類 折れ線グラフ(Recharts 3.x)
レイアウト 横並び(左: 契約数、右: 課金額)
タイムゾーン Asia/Tokyo (UTC+9) — JST 境界で月を判定

画面イメージ

ダッシュボード

2026年 ▼

月別新規契約数・解約数(組織)

1月
2月
3月
4月
5月
6月
7月〜
新規契約 解約

月別課金額推移

1月
2月
3月
4月
5月
6月
7月〜
課金額

変更ファイル

種別 ファイルパス
追加apps/system-manager/actions/organization/list-organization-monthly-stats.ts
追加apps/system-manager/actions/billing-record/list-billing-record-monthly-totals.ts
追加apps/system-manager/app/home/_components/year-selector/index.tsx
追加apps/system-manager/app/home/_components/organization-monthly-chart/index.tsx
追加apps/system-manager/app/home/_components/billing-monthly-chart/index.tsx
変更apps/system-manager/app/home/page.tsx
変更apps/system-manager/app/layout.tsx(ロゴリンク /home に変更)
変更apps/system-manager/package.json(recharts 3.8.1 追加)