[]
>(
"/api/embed/referrals/leaderboard",
(url) =>
fetcher(url, {
headers: {
Authorization: `Bearer ${token}`,
},
}),
{
keepPreviousData: true,
},
);
```
Sources: [apps/web/app/ee/app.dub.co/embed/referrals/leaderboard.tsx:20-36](https://github.com/blade47/dub/blob/7c93d97abf0ecd37fb669c6a68a1f7ef9109daea/apps/web/app/(ee)/app.dub.co/embed/referrals/leaderboard.tsx#L20-L36)
The `ReferralsEmbedLeaderboard` component fetches ranked partner performance via SWR from the `/api/embed/referrals/leaderboard` endpoint using an authorization bearer token. It maintains previous data during revalidation and parses rows against `LeaderboardPartnerSchema`.
```tsx
const { table, ...tableProps } = useTable({
data: partners || [],
loading: isLoading,
columns: [
{
id: "rank",
header: "Rank",
size: 40,
minSize: 40,
cell: ({ row }) => {
return (
{row.index + 1}
{row.index <= 2 && (
)}
);
},
},
{
id: "name",
header: "Partner",
cell: ({ row }) => {
return (
{generateRandomName(row.original.id)}
);
},
},
{
id: "totalCommissions",
header: "Earnings",
cell: ({ row }) => {
return currencyFormatter(row.original.totalCommissions);
},
},
],
emptyState: (
(
<>
)}
className="border-none md:min-h-fit"
/>
),
thClassName: "border-l-0",
tdClassName: "border-l-0",
resourceName: (plural) => `partner${plural ? "s" : ""}`,
});
```
Sources: [apps/web/app/ee/app.dub.co/embed/referrals/leaderboard.tsx:38-104](https://github.com/blade47/dub/blob/7c93d97abf0ecd37fb669c6a68a1f7ef9109daea/apps/web/app/(ee)/app.dub.co/embed/referrals/leaderboard.tsx#L38-L104)
The table UI configures three explicit columns: rank, partner name, and total commissions earnings. The rank cell displays numeric ranking alongside a `Crown` icon styled in amber, neutral, or yellow-brown for the top three positions. The partner column renders a `PartnerAvatar` alongside an anonymized partner name generated via `generateRandomName(row.original.id)` wrapped in a privacy tooltip. Earnings are formatted using `currencyFormatter`.
> [!NOTE]
> When no partners populate the leaderboard, the table renders an `AnimatedEmptyState` component featuring a users icon and placeholder indicator lines.
Sources: [apps/web/app/ee/app.dub.co/embed/referrals/leaderboard.tsx:88-100](https://github.com/blade47/dub/blob/7c93d97abf0ecd37fb669c6a68a1f7ef9109daea/apps/web/app/(ee)/app.dub.co/embed/referrals/leaderboard.tsx#L88-L100)
## Performance and Earnings Telemetry
### Activity Metrics and Timeseries Telemetry
```typescript
const querySchema = partnerProfileAnalyticsQuerySchema.pick({
event: true,
start: true,
end: true,
groupBy: true,
saleType: true,
interval: true,
});
// GET /api/embed/referrals/analytics – get analytics for a partner
export const GET = withReferralsEmbedToken(
async ({ links, program, searchParams }) => {
if (links.length === 0) {
return NextResponse.json([]);
}
const parsedQuery = querySchema.parse(searchParams);
const analytics = await getAnalytics({
...parsedQuery,
workspaceId: program.workspaceId,
linkId: parseFilterValue(links.map((link) => link.id)),
dataAvailableFrom: program.startedAt ?? program.createdAt,
});
return NextResponse.json(analytics);
},
```
Sources: [apps/web/app/ee/api/embed/referrals/analytics/route.ts:7-33](https://github.com/blade47/dub/blob/7c93d97abf0ecd37fb669c6a68a1f7ef9109daea/apps/web/app/(ee)/api/embed/referrals/analytics/route.ts#L7-L33)
The embedded analytics route handles retrieval of performance metrics via the `GET` method wrapped in `withReferralsEmbedToken`. It parses query parameters using `partnerProfileAnalyticsQuerySchema` restricted to `event`, `start`, `end`, `groupBy`, `saleType`, and `interval`. If the partner has no associated links, the endpoint returns an empty array. Otherwise, it calls `getAnalytics` with the workspace identifier, parsed filter values, and data availability boundaries derived from `program.startedAt` or `program.createdAt`.
```tsx
export function ReferralsEmbedActivity() {
const {
group: { brandColor: color },
stats: { clicks, leads, conversions },
} = useReferralsEmbedData();
const token = useEmbedToken();
const isEmpty = clicks === 0 && leads === 0 && conversions === 0;
const analyticsSearchParams = new URLSearchParams({
event: "composite",
groupBy: "timeseries",
interval: "1y",
saleType: "new",
});
const { data: analytics } = useSWR(
!isEmpty &&
`/api/embed/referrals/analytics?${analyticsSearchParams.toString()}`,
(url) =>
fetcher(url, {
headers: {
Authorization: `Bearer ${token}`,
},
}),
{
keepPreviousData: true,
dedupingInterval: 60000,
},
);
```
Sources: [apps/web/app/ee/app.dub.co/embed/referrals/activity.tsx:10-40](https://github.com/blade47/dub/blob/7c93d97abf0ecd37fb669c6a68a1f7ef9109daea/apps/web/app/(ee)/app.dub.co/embed/referrals/activity.tsx#L10-L40)
The `ReferralsEmbedActivity` component renders performance cards for clicks, leads, and conversions. It queries `/api/embed/referrals/analytics` using SWR with a composite event type, yearly interval, and new sale type. When click, lead, and conversion counts are all zero, it renders an `EmptyState` component featuring a `CursorRays` icon and a decorative SVG background gradient.
> [!NOTE]
> Customer email addresses returned by event endpoints are dynamically obfuscated via `obfuscateCustomerEmail` unless `customerDataSharingEnabledAt` is configured on the program enrollment.
Sources: [apps/web/app/ee/api/embed/referrals/events/route.ts:39-68](https://github.com/blade47/dub/blob/7c93d97abf0ecd37fb669c6a68a1f7ef9109daea/apps/web/app/(ee)/api/embed/referrals/events/route.ts#L39-L68)
### Commission Earnings and Payout Data
```typescript
const querySchema = getPartnerEarningsQuerySchema
.pick({
start: true,
end: true,
page: true,
pageSize: true,
interval: true,
timezone: true,
})
.extend({
withTotal: z
.string()
.optional()
.transform((v) => v?.toLowerCase() === "true")
.default(false),
});
// GET /api/embed/referrals/earnings – get commissions for a partner from an embed token
export const GET = withReferralsEmbedToken(
async ({ programEnrollment, searchParams }) => {
const { withTotal, start, end, pageSize, page, interval, timezone } =
querySchema.parse(searchParams);
const [earnings, total] = await Promise.all([
getEarningsForPartner({
page,
```
## Related
- [Partner Programs](https://www.doc0.dev/docs/934e554a-e6a1-476f-bb2f-23e62d86c3fd/technical/partner-programs/partner-programs)
- [REST API](https://www.doc0.dev/docs/934e554a-e6a1-476f-bb2f-23e62d86c3fd/technical/administration-and-api/rest-api)
## Sitemap
See the full [sitemap](https://www.doc0.dev/docs/934e554a-e6a1-476f-bb2f-23e62d86c3fd/llms.txt) for all pages in this wiki.