useDashboardMetrics

Location: src/hooks/useDashboardMetrics.js

Overview

Fetches a comprehensive set of admin dashboard metrics by running multiple Supabase queries in parallel. Includes user counts, report statistics, moderation activity, post counts, recent admin activity, and urgent items. Auto-refreshes every 5 minutes.

This is an admin-only hook used in the admin dashboard view.

Signature

function useDashboardMetrics(): {
  metrics: DashboardMetrics,
  recentActivity: AuditLogRow[],
  urgentItems: ReportRow[],
  isLoading: boolean,
  error: string | null,
  lastRefresh: Date | null,
  refresh: () => void
}

Parameters

None.

Return Value

Property	Type	Description
metrics	DashboardMetrics	Object containing all numeric metrics (see below).
recentActivity	AuditLogRow[]	The 10 most recent admin audit log entries with admin profile data.
urgentItems	ReportRow[]	Up to 5 urgent or escalated reports that are still pending/in review. Includes reporter and reported user profiles.
isLoading	boolean	true during the initial fetch or a manual refresh.
error	string | null	Error message if the fetch failed.
lastRefresh	Date | null	Timestamp of the most recent successful refresh.
refresh	() => void	Manually trigger a refresh of all metrics.

DashboardMetrics

interface DashboardMetrics {
  totalUsers: number,
  newUsersThisWeek: number,
  activeUsers: number,          // users who posted in the last 7 days
  pendingReports: number,
  urgentReports: number,
  highPriorityReports: number,
  normalReports: number,        // pending minus urgent minus high
  escalatedReports: number,
  contentRemovedThisWeek: number,
  activeSuspensions: number,
  activeBans: number,
  postsToday: number,
  postsThisWeek: number
}

Usage

function AdminDashboard() {
  const { metrics, recentActivity, urgentItems, isLoading, lastRefresh, refresh } = useDashboardMetrics();

  if (isLoading) return <Skeleton />;

  return (
    <div>
      <div className="metrics-grid">
        <MetricCard label="Total Users" value={metrics.totalUsers} />
        <MetricCard label="New This Week" value={metrics.newUsersThisWeek} />
        <MetricCard label="Pending Reports" value={metrics.pendingReports} />
        <MetricCard label="Posts Today" value={metrics.postsToday} />
      </div>

      <h3>Urgent Items</h3>
      {urgentItems.map(item => (
        <div key={item.id}>{item.reason} - {item.priority}</div>
      ))}

      <h3>Recent Activity</h3>
      {recentActivity.map(log => (
        <div key={log.id}>{log.action_type} by {log.admin?.display_name}</div>
      ))}

      <p>Last refreshed: {lastRefresh?.toLocaleTimeString()}</p>
      <button onClick={refresh}>Refresh</button>
    </div>
  );
}

---

Last updated: 2026-02-07