Closes #387: Implemented: build analytics dashboard (#394)

* feat: add subscription management dashboard

- /subscriptions list page with template name, frequency, next run date,
  invoice count, USDC collected, and pause/resume/cancel actions
- /subscriptions/[id] detail page with config, editable actions,
  calendar-style upcoming dates preview, and full invoice history table
- Zustand store, subscription types, and SDK helper functions
- Skeleton loading states, subscription components
- 19 unit tests for SubscriptionCard and SubscriptionDetail
- Navbar updated with Subscriptions link

* feat: add analytics dashboard with charts, KPI cards, and CSV export

- WeeklyRaisedChart (bar): USDC raised per week, last 12 weeks
- StatusPieChart (pie): Invoice status breakdown
- UniquePayersChart (line): Unique payers over time
- FundingTimeHistogram: Funding time distribution in hours
- 4 KPI cards: Total Raised, Total Released, Success Rate, Avg Funding Time
- CSV export button for invoice data
- Unit tests for all 5 new modules (18 tests total)
- Wallet-gated access

Author: Promise278

src/__tests__/FundingTimeHistogram.test.tsx

@@ -0,0 +1,47 @@
+import { render, screen } from "@testing-library/react";
+import { describe, it, expect, vi } from "vitest";
+import FundingTimeHistogram from "@/components/analytics/FundingTimeHistogram";
+
+vi.mock("recharts", () => ({
+  ResponsiveContainer: ({ children }: { children: React.ReactNode }) => (
+    <div data-testid="responsive-container">{children}</div>
+  ),
+  BarChart: ({ children }: { children: React.ReactNode }) => (
+    <div data-testid="bar-chart">{children}</div>
+  ),
+  Bar: () => null,
+  XAxis: () => null,
+  YAxis: () => null,
+  CartesianGrid: () => null,
+  Tooltip: () => null,
+}));
+
+describe("FundingTimeHistogram", () => {
+  it("renders the chart with aria-label", () => {
+    render(
+      <FundingTimeHistogram data={[{ label: "0-12h", count: 4 }]} />
+    );
+    expect(
+      screen.getByRole("figure", { name: "Average funding time histogram" })
+    ).toBeInTheDocument();
+  });
+
+  it("renders bar chart with histogram data", () => {
+    render(
+      <FundingTimeHistogram
+        data={[
+          { label: "0-12h", count: 4 },
+          { label: "12-24h", count: 8 },
+          { label: "24-48h", count: 3 },
+        ]}
+      />
+    );
+    expect(screen.getByTestId("bar-chart")).toBeInTheDocument();
+    expect(screen.getByTestId("responsive-container")).toBeInTheDocument();
+  });
+
+  it("shows 'No data available' when data is empty", () => {
+    render(<FundingTimeHistogram data={[]} />);
+    expect(screen.getByText("No data available")).toBeInTheDocument();
+  });
+});

src/__tests__/StatusPieChart.test.tsx

@@ -0,0 +1,63 @@
+import { render, screen } from "@testing-library/react";
+import { describe, it, expect, vi } from "vitest";
+import StatusPieChart from "@/components/analytics/StatusPieChart";
+
+vi.mock("recharts", () => ({
+  ResponsiveContainer: ({ children }: { children: React.ReactNode }) => (
+    <div data-testid="responsive-container">{children}</div>
+  ),
+  PieChart: ({ children }: { children: React.ReactNode }) => (
+    <div data-testid="pie-chart">{children}</div>
+  ),
+  Pie: () => null,
+  Cell: () => null,
+  Tooltip: () => null,
+  Legend: () => null,
+}));
+
+describe("StatusPieChart", () => {
+  it("renders the chart with aria-label", () => {
+    render(
+      <StatusPieChart
+        data={[
+          { name: "Released", value: 5 },
+          { name: "Refunded", value: 2 },
+        ]}
+      />
+    );
+    expect(
+      screen.getByRole("figure", { name: "Invoice status breakdown chart" })
+    ).toBeInTheDocument();
+  });
+
+  it("renders pie chart with data", () => {
+    render(
+      <StatusPieChart
+        data={[
+          { name: "Released", value: 5 },
+          { name: "Refunded", value: 2 },
+          { name: "Active", value: 3 },
+        ]}
+      />
+    );
+    expect(screen.getByTestId("pie-chart")).toBeInTheDocument();
+    expect(screen.getByTestId("responsive-container")).toBeInTheDocument();
+  });
+
+  it("shows 'No data available' when all values are zero", () => {
+    render(
+      <StatusPieChart
+        data={[
+          { name: "Released", value: 0 },
+          { name: "Refunded", value: 0 },
+        ]}
+      />
+    );
+    expect(screen.getByText("No data available")).toBeInTheDocument();
+  });
+
+  it("shows 'No data available' when data is empty array", () => {
+    render(<StatusPieChart data={[]} />);
+    expect(screen.getByText("No data available")).toBeInTheDocument();
+  });
+});

src/__tests__/UniquePayersChart.test.tsx

@@ -0,0 +1,46 @@
+import { render, screen } from "@testing-library/react";
+import { describe, it, expect, vi } from "vitest";
+import UniquePayersChart from "@/components/analytics/UniquePayersChart";
+
+vi.mock("recharts", () => ({
+  ResponsiveContainer: ({ children }: { children: React.ReactNode }) => (
+    <div data-testid="responsive-container">{children}</div>
+  ),
+  LineChart: ({ children }: { children: React.ReactNode }) => (
+    <div data-testid="line-chart">{children}</div>
+  ),
+  Line: () => null,
+  XAxis: () => null,
+  YAxis: () => null,
+  CartesianGrid: () => null,
+  Tooltip: () => null,
+}));
+
+describe("UniquePayersChart", () => {
+  it("renders the chart with aria-label", () => {
+    render(
+      <UniquePayersChart data={[{ label: "Jan 6", count: 3 }]} />
+    );
+    expect(
+      screen.getByRole("figure", { name: "Unique payers over time chart" })
+    ).toBeInTheDocument();
+  });
+
+  it("renders line chart with data", () => {
+    render(
+      <UniquePayersChart
+        data={[
+          { label: "Jan 6", count: 3 },
+          { label: "Jan 13", count: 7 },
+        ]}
+      />
+    );
+    expect(screen.getByTestId("line-chart")).toBeInTheDocument();
+    expect(screen.getByTestId("responsive-container")).toBeInTheDocument();
+  });
+
+  it("shows 'No data available' when data is empty", () => {
+    render(<UniquePayersChart data={[]} />);
+    expect(screen.getByText("No data available")).toBeInTheDocument();
+  });
+});

src/__tests__/WeeklyRaisedChart.test.tsx

@@ -0,0 +1,46 @@
+import { render, screen } from "@testing-library/react";
+import { describe, it, expect, vi } from "vitest";
+import WeeklyRaisedChart from "@/components/analytics/WeeklyRaisedChart";
+
+vi.mock("recharts", () => ({
+  ResponsiveContainer: ({ children }: { children: React.ReactNode }) => (
+    <div data-testid="responsive-container">{children}</div>
+  ),
+  BarChart: ({ children }: { children: React.ReactNode }) => (
+    <div data-testid="bar-chart">{children}</div>
+  ),
+  Bar: () => null,
+  XAxis: () => null,
+  YAxis: () => null,
+  CartesianGrid: () => null,
+  Tooltip: () => null,
+}));
+
+describe("WeeklyRaisedChart", () => {
+  it("renders the chart with aria-label", () => {
+    render(
+      <WeeklyRaisedChart data={[{ label: "Jan 6", amount: 150 }]} />
+    );
+    expect(
+      screen.getByRole("figure", { name: "USDC raised per week chart" })
+    ).toBeInTheDocument();
+  });
+
+  it("renders bar chart with data", () => {
+    render(
+      <WeeklyRaisedChart
+        data={[
+          { label: "Jan 6", amount: 100 },
+          { label: "Jan 13", amount: 200 },
+        ]}
+      />
+    );
+    expect(screen.getByTestId("bar-chart")).toBeInTheDocument();
+    expect(screen.getByTestId("responsive-container")).toBeInTheDocument();
+  });
+
+  it("shows 'No data available' when data is empty", () => {
+    render(<WeeklyRaisedChart data={[]} />);
+    expect(screen.getByText("No data available")).toBeInTheDocument();
+  });
+});

src/__tests__/csvExport.test.ts

@@ -0,0 +1,78 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { generateCsv, type CsvRow } from "@/lib/csvExport";
+
+describe("generateCsv", () => {
+  let clickSpy: ReturnType<typeof vi.fn>;
+  let appendChildSpy: ReturnType<typeof vi.fn>;
+  let removeChildSpy: ReturnType<typeof vi.fn>;
+  let revokeObjectURLSpy: ReturnType<typeof vi.fn>;
+  let createObjectURLSpy: ReturnType<typeof vi.fn>;
+  let linkAttrs: Record<string, string>;
+
+  beforeEach(() => {
+    clickSpy = vi.fn();
+    appendChildSpy = vi.fn();
+    removeChildSpy = vi.fn();
+    revokeObjectURLSpy = vi.fn();
+    createObjectURLSpy = vi.fn(() => "blob:mock-url");
+    linkAttrs = {};
+
+    const mockLink = {
+      click: clickSpy,
+      setAttribute: (name: string, value: string) => {
+        linkAttrs[name] = value;
+      },
+      style: { display: "" },
+    };
+
+    vi.spyOn(document, "createElement").mockReturnValue(mockLink as unknown as HTMLElement);
+    vi.spyOn(document.body, "appendChild").mockImplementation(appendChildSpy);
+    vi.spyOn(document.body, "removeChild").mockImplementation(removeChildSpy);
+    vi.spyOn(URL, "createObjectURL").mockImplementation(createObjectURLSpy);
+    vi.spyOn(URL, "revokeObjectURL").mockImplementation(revokeObjectURLSpy);
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it("does nothing when rows are empty", () => {
+    generateCsv([], "test");
+    expect(appendChildSpy).not.toHaveBeenCalled();
+  });
+
+  it("creates and clicks a download link", () => {
+    const rows: CsvRow[] = [
+      { id: "1", status: "Released", amount: 100 },
+      { id: "2", status: "Pending", amount: 50 },
+    ];
+    generateCsv(rows, "my-data");
+
+    expect(createObjectURLSpy).toHaveBeenCalled();
+    expect(appendChildSpy).toHaveBeenCalled();
+    expect(clickSpy).toHaveBeenCalled();
+    expect(removeChildSpy).toHaveBeenCalled();
+    expect(revokeObjectURLSpy).toHaveBeenCalled();
+    expect(linkAttrs["download"]).toBe("my-data.csv");
+  });
+
+  it("generates a Blob with CSV content", () => {
+    const rows: CsvRow[] = [{ id: "1", name: "Test" }];
+    generateCsv(rows, "test");
+
+    const blobArg = createObjectURLSpy.mock.calls[0][0] as Blob;
+    expect(blobArg).toBeInstanceOf(Blob);
+  });
+
+  it("handles values with commas by quoting them", () => {
+    const rows: CsvRow[] = [{ id: "1", note: "hello, world" }];
+    generateCsv(rows, "test");
+    expect(createObjectURLSpy).toHaveBeenCalled();
+  });
+
+  it("handles values with double quotes by escaping them", () => {
+    const rows: CsvRow[] = [{ id: "1", note: 'say "hi"' }];
+    generateCsv(rows, "test");
+    expect(createObjectURLSpy).toHaveBeenCalled();
+  });
+});