Top Donors Table Component

Top Donors Table Component

Component File: Part of Dashboard Usage: Display top donors on dashboard Access Level: All authenticated users

Runtime

> Runtime: Use Supabase clients, database RPC, and edge functions (and Stripe for payments where applicable).

Overview

The Top Donors Table component displays the highest contributing donors for the selected time period. It shows donor name, total donated amount, and number of donations. This helps identify major supporters and track donor engagement.

UI Features

Table Columns

• Rank - Position (1, 2, 3, etc.)
• Donor - Donor name
• Total Donated - Sum of donations (formatted as currency)
• Donations - Number of donations

Features

• Shows top 5-10 donors
• Ranked by total amount
• Click row to view donor profile
• "View All" link to Donors CRM
• Empty state if no donors

Data Requirements

Top Donor

interface TopDonor {
  id: string;
  name: string;
  total_donated: number;
  donation_count: number;
  rank: number;
}

State Management

Global State (AppContext)

• selectedEntity - Current organization
• timePeriod - Selected time period
• Mock data from getTopDonors()

Related Documentation

• ../dashboard/01-MAIN-DASHBOARD.md
• ../donor-hub/01-DONORS-CRM.md
• 07-RECENT-DONATIONS-TABLE.md

Synced from IFMmvp-Frontend documentation: pages/components/08-TOP-DONORS-TABLE.md