Affiliates
The Affiliates app lets business owners run an affiliate program. Affiliates sign up, receive referral links, and earn commissions on referred sales. The business owner can approve or reject affiliate applications and manage payouts from a single dashboard.
Key features
Section titled “Key features”- Affiliate dashboard with stats cards showing active affiliates, total referrals, and pending payouts
- Affiliate approval workflow — pending affiliates can be approved or rejected inline with form actions
- Referral tracking — each affiliate’s referral count is displayed alongside their profile
- Payout management via a dedicated sub-route
Page structure
Section titled “Page structure”| Route | Purpose |
|---|---|
/business/apps/affiliates | Main dashboard with stats and affiliate list |
/business/apps/affiliates/payouts | Payout history and management |
Data model overview
Section titled “Data model overview”The app relies on three Supabase tables:
| Table | Description |
|---|---|
affiliates | Stores affiliate records with status (pending, approved, rejected) and a program_owner_id FK to the business owner |
affiliate_referrals | Tracks individual referrals with commission_amount and program_owner_id |
profiles | Joined via user:profiles(id, username, full_name, avatar_url) for affiliate display info |
Stats computation
Section titled “Stats computation”Stats are computed server-side in the load function rather than stored as aggregates:
- Active affiliates —
countquery onaffiliateswherestatus = approved - Total referrals — count of rows in
affiliate_referralsfor the owner - Pending payouts — sum of
commission_amountacross all referrals
Key components
Section titled “Key components”The main page (+page.svelte) uses:
- Stats grid — three
Cardcomponents displaying aggregate metrics with USD currency formatting - Affiliate list — iterates over affiliates showing avatar, name, referral count, and join date
- Status badges — color-coded badges (
pending= secondary,approved= default,rejected= destructive) - Inline actions — approve/reject buttons rendered as SvelteKit form actions with
use:enhancefor optimistic UI updates and toast notifications
Notable integrations
Section titled “Notable integrations”- SvelteKit form actions — the
approveandrejectactions update the affiliate’s status in Supabase, scoped to theprogram_owner_idfor security - svelte-sonner — toast notifications on approve/reject actions
- Supabase RLS — all queries are scoped to
program_owner_id = user.id