SellVia Docs — menu
DocsUXComponents

Components

UX/Components.md
frontendUpdated Aug 23, 2026

Components

Purpose

How design.md's card/section patterns translate into the specific components the Merchant and Creator dashboards actually need — design.md covers marketing-page components; this doc covers the authenticated-app components it doesn't.

Shared Components (used by both dashboards, per 02. Frontend Architecture's recommendation to build these once)

  • List/table view — offers, applications, sales, payouts. Per design.md: content blocks, not marketing components; thin borders, no icon-per-row decoration.
  • Stat card — a single number + label (e.g. "Balance: ₨11,850", "Clicks: 128") — follows design.md's card structure (title, description, optional number, optional border), no icons above headings.
  • Status badge — pending/approved/rejected, live/paused/ended, verified/refunded — small, text-based, colored via border/text color per state rather than filled color blocks (consistent with "green should feel earned" — lime reserved for genuinely primary actions, not routine status indicators).
  • Empty state — needed for "no offers yet," "no applications yet," "link generated but zero clicks yet" (per 08. Edge Cases → Creator Edge Cases) — should read as calm and expected, not broken, consistent with the landing page's own zeroed-dashboard framing ("0 creators, 0 sales, $0" is a deliberate design choice already, not just an MVP placeholder).

Merchant-Specific

  • Offer creation form (name, price, currency, commission rate — no bargaining UI per 01. Business Logic)
  • Application review card (creator's audience/niche/engagement data + approve/reject actions)

Creator-Specific

  • Offer discovery card (product, commission rate, merchant name, apply action)
  • "Get Link" component — the moment a creator receives their AffiliateLink, should feel like a small, clear payoff given how central this moment is to the whole product

Open Questions

  • None blocking — direct extension of design.md's stated patterns into the specific screens 01. Business Logic's User Flows already describe.

Update (2026-08-23): Reconciled to Offer Entity Model and PKR Currency

This file was never revised for the Offer/Campaign merge or the PKR-only currency decision. "Campaign" terminology throughout (list/table view, creation form, discovery card, empty states) is now "Offer," and the Stat Card example uses a PKR figure instead of USD.

Referenced by