Recent Donations Table Component

Component File: src/features/donations/components/RecentDonationsTable.tsx Usage: Display recent donations on dashboard Access Level: All authenticated users Last Updated: March 25, 2026

Runtime

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

Overview

The Recent Donations Table component displays the most recent donation transactions on the dashboard. It shows donor name, amount, date, type, and contextual fund/purpose information. Users can click on a donation to navigate to the donor's profile.

UI Features

Table Columns

ID - Short donation ID (DON-XXXXXX format)
Donor - Donor name (sortable)
Amount - Donation amount (formatted as currency, sortable)
Type - Donation type badge (One-Time, Recurring, Event)
Fund/Purpose - Contextual column (see below)
Date - Transaction date

Contextual Fund/Purpose Column

The column name and data changes based on the selected entity type. This is determined dynamically using the isAdminView() helper function, which checks if the selected organization has type: 'parent_org' in the database.

| View | Column Header | Data Shown |

|------|---------------|------------|

| **Parent Org (Admin View)** | "Fund" | Nonprofit/organization name (e.g., "Awakenings", "Bonfire") |

| **Individual Nonprofit** | "Purpose" | Donation purpose (e.g., "General", "Building Fund") |

Note: The admin view detection is dynamic - any organization with type: 'parent_org' in the database will trigger the "Fund" column display. This allows for multi-tenant support without hardcoding entity names.

Features

Pagination (10 per page, client-side over up to 30 rows fetched)
Sortable columns (ID, Donor, Amount)
Click row to view donor profile
Type badges with color coding
Mobile-responsive card view
Empty state if no donations
Supabase Realtime: new rows invalidate the query when relevant to the selected entity (including parent org admin view — see §11 in DEVELOPER-PLAYBOOK)

Data Requirements

Recent Donation (display shape)

Data is loaded via `fetchRecentDonations(entityId, limit)` in src/lib/db/donations.ts (barreled through src/lib/db/index). Rows include organizationName for parent-org views.

State Management

Zustand: selectedEntity, timePeriod, navigation helpers (setSelectedDonor, navigateTo, setDonationSearch)
React Query: queryKey: ['recentDonations', selectedEntity, timePeriod] — do not use getActualOrgId() as a fallback inside fetchRecentDonations; parent org selection uses getOrgId() === null so the query aggregates across the org tree per DEVELOPER-PLAYBOOK §11.

Ready to Get Started?

See how Alignmint can simplify your nonprofit's operations. Schedule a free demo with our team and we'll walk you through everything.

Schedule Your Free Demo Log In to Alignmint

Questions? Email us at steven@getalignmint.org