Email Metrics Dashboard (metrics/page.tsx)

open-agent-email · client/src/app/metrics/page.tsx · typescript · Apache-2.0
ui, analytics, email, fw:nextjs, fw:react

Dashboard page that fetches account email metrics for a chosen date range and renders summary tiles, bounce stats, a daily chart, and inbox breakdown. Reuse when an email product needs an operator analytics view.

// Source: https://github.com/Anil-matcha/open-agent-email | License: Apache-2.0 | Copyright You must retain, in the Source form of any Derivative Works
// Provided via justclaw.it.com; keep this notice with the code.
"use client";

import { useEffect, useState } from "react";
import { RefreshCw } from "lucide-react";
import type { AccountMetrics } from "@/lib/types";
import { RANGE_OPTIONS, bounces, count, getMetricsForRange, percent, type MetricsRange } from "@/lib/metrics-api";
import { DailyChart } from "@/components/metrics/DailyChart";
import { InboxBreakdown } from "@/components/metrics/InboxBreakdown";

function Tile({ label, value, note }: { label: string; value: string; note?: string }) {
  return (
    <div className="rounded-lg border border-[#30363d] bg-[#161b22] px-4 py-3">
 

... (truncated -- full source via MCP)

See the full source, get the GitHub permalink, and search for more like it.

Get a free API key