Skip to content
SuperCoach

Components · coach-admin

Currency tabs

Planned

Switches package prices between currencies.

  • Source components/ui/tabs.tsx
  • Figma: not linked yet (Q13)

What it is for

Coaches who sell packages in more than one currency switch a package's prices between SAR and USD (and, later, other currencies) without leaving the package form. Each tab shows the same price fields for one currency, so a coach can check that every currency is filled in before publishing.

Built from

  • Tabs for switching currencies, with a tab label that includes the currency code: "SAR", "USD".
  • Input with a currency unit at the end for each price.
  • Badge (warning) on a tab whose prices are still missing.

Guidelines so far

  • Currency codes and amounts stay left to right inside Arabic text (dir="ltr"), as on the Content page.
  • Prices show in USD for clients outside Saudi Arabia; the info color is used for that note.

Replaces in coach-admin

Package pricing in src/views/Packages uses a shared currency tab style.

From the read-only audit of coach-admin: 48 style values, 62 uses.

Classes and selectors

  • .vd-bank-tab, .bc-currency-tab7
  • .sps-currency-chip5
  • .scpay-currency-tag--usd3
  • .scpay-currency-tag--sar3
  • .scpay-currency-tag--egp3
  • .sc-invoices__currency-pill--egp3
  • .sc-invoices__currency-pill--sar3
  • .scpay-currency-tag2
  • .sc-invoices__currency-pill2
  • .sc-invoices__currency-pill--due1
  • .sc-invoices__currency-pill--usd1
  • .vd-country-currency-hint1

Files

  • src/views/Packages/_currencyTab.shared.scss32

The inventory lists the first 12 locations of each value, so file counts are a lower bound.

SCSS variables in these styles

  • $success-text-color→ --success-text
  • $border-color→ --border
  • $primary-color→ --primary
  • $success-border-color→ nearest green-300 (no semantic token)
  • $light-success-colornot a color: spacing, size or layout
  • $invoice-egp-bg→ nearest orange-50 (no semantic token)
  • $invoice-sar-bg→ --success-subtle
  • $invoice-egp-color→ nearest orange-700 (no semantic token)
  • $invoice-egp-border→ nearest orange-300 (no semantic token)
  • $invoice-sar-border→ nearest green-300 (no semantic token)
  • $invoice-usd-border→ nearest blue-200 (no semantic token)
  • $danger-text-color→ --destructive-text

Related

Components, Content, Accessibility.