Skip to content

feat(dashboard): implement producer earnings dashboard with analytics and charts (#18) - #20

Open
Simultech369 wants to merge 1 commit into
Crate-Protocol:mainfrom
Simultech369:feat/producer-earnings-dashboard
Open

feat(dashboard): implement producer earnings dashboard with analytics and charts (#18)#20
Simultech369 wants to merge 1 commit into
Crate-Protocol:mainfrom
Simultech369:feat/producer-earnings-dashboard

Conversation

@Simultech369

Copy link
Copy Markdown

Summary of Changes

This pull request resolves #18 by transforming the Profile page into a full-fledged Producer Earnings & Analytics Dashboard, complete with lifetime revenue metrics, monthly growth tracking, SVG area revenue charts, beat sales performance tables, and historical withdrawal logs.

🎯 Key Implementations

  1. Earnings Overview Stat Cards (src/components/StatsCard.tsx)

    • 4 responsive stat cards in a top row:
      • Total Earned (Lifetime): Cumulative volume across contract earnings and local withdrawal history with mini sparkline.
      • This Month's Revenue: Current month volume with percentage growth indicator (↑ 12% vs prior month).
      • Pending Withdrawal: Live unclaimed balance from get_earnings with one-click claim action.
      • Total Sales: Lifetime count of license purchases across producer's beats.
  2. Interactive SVG Revenue Trend Chart (src/components/RevenueChart.tsx)

    • Pure SVG area and line chart with gradient fill (0 external charting dependencies).
    • Timeframe toggles for 30d, 90d, and 1y periods.
    • Interactive point hover tooltips showing exact date, XLM amount, and sales count.
    • Clean empty state with CTA to upload beats.
  3. Beat Performance Table (src/components/BeatPerformanceTable.tsx)

  4. Recent Sales Activity Feed (src/components/SalesFeed.tsx)

    • Real-time recent transaction list displaying buyer address (truncated), license tier pill (Lease, Premium, Exclusive), XLM volume, relative timestamps, and direct Stellar block explorer links.
  5. Withdrawal History Log (src/components/WithdrawalHistory.tsx)

    • Historical withdrawals table with Date, XLM amount, Tx Hash linking to explorer, and Confirmed status badge.
  6. Analytics Service & Custom Hook (src/services/analytics.ts, src/hooks/useProducerStats.ts)

    • Daily bucket aggregation (aggregateSalesByDay), growth rate calculations (calculateGrowth), and scoped localStorage persistence per connected wallet address.
  7. Contract Integration (src/contracts/crate.ts)

    • Added getSamplesByUploader querying producer samples from the contract.

🧪 Verification & Testing

  • npx vitest run:

… and charts (Crate-Protocol#18)

- Create Producer Analytics Dashboard on Profile page
- Implement 4 overview stat cards (Lifetime Earned, This Month with growth %, Pending Balance, Total Sales) with mini sparklines
- Implement interactive SVG Revenue Trends chart (30d, 90d, 1y periods with hover tooltips)
- Implement sortable Beat Performance table with top-earner gold badge
- Implement Recent Sales activity feed with transaction explorer links
- Implement complete Withdrawal History log with explorer links and status badges
- Add analytics service (analytics.ts) and useProducerStats hook with daily bucket aggregations
- Add comprehensive unit tests in src/__tests__/analytics.test.ts
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

feat: producer earnings dashboard with analytics and charts

1 participant