Domain components
components/
Reusable business/domain widgets, one level up from the generic ui/ kit — charts, tables, filters, and report-specific building blocks shared across the feature pages.
Charts (components/Charts/)
Two charting libraries coexist by convention: echarts (via echarts-for-react) for compact/interactive KPI-card visuals, recharts for larger gradient area/bar charts with custom tooltips.
| Component | Library | Used for |
|---|---|---|
AreaChartSmall | echarts | Sparkline trend indicators in small KPI cards |
AreaChart (LineChart) | recharts | Drawdown tracking, with a dashed reference line for limits |
BarChartSmall2 | echarts | Compact bars in KPI cards |
DayliPLChart | recharts | Daily P/L bars, green/red by sign |
EquityChart | recharts | Equity vs. balance dual-series area |
MultiSeriesLineChart | echarts | Per-symbol quantity over time with violation-interval highlighting — the base for exposure/hedging position-overlap graphs (via useMultilineChart) |
PieChartSmall, FinancePieChart (KPI folder) | echarts-for-react | Donut breakdowns (danger-zone accounts, challenge-failure reasons) |
RevenueOrdersChart, SimpleBarChart | recharts | Revenue/orders dual-axis, generic volume bars |
CustomChartLegends, CustomLegends2, CustomLegends3 | — | MUI legend rows paired with the above, with hover-highlight callbacks into the chart instance |
Report & table primitives (components/DashboardComponents/)
CommonDashboardCard— the base KPI/stat card (icon, title+tooltip, value with change indicator, legend rows, skeletons); the building block behind nearly every KPI card in the app.CommonDashboardTable— the primary generic data table (sticky columns, row selection with per-row disable reasons, custom cell renderers, viewport-fill scroll mode);CommonDashboardTableCopyis an older parallel variant still used in a few places.CommonFilterSection+DynamicFilter+SelectedFiltersList— composable filter bar, config-driven filter popover (broker/select/number/date/switch field types with Yup validation), and removable filter-chip summary.BrokerFilter,TableDetailsButton— broker multi-select and the standard "view details" row action.
Report-specific building blocks
ExposureComponents/—CustomerInformation,ExposureAnalysis(chart),ExposureSummary,Positions,OverExposureDetails: the panels composing the exposure detail page.HedgingComponents/— parallel set for hedging violations (CustomerInformationHedging,DetectedViolations,HedgingInvolvedAccounts,HedgingPositionOverlapOvertimeGraph), plus the shareduseMultilineChartdata-shaping hook used by both this and Exposure's chart.TraderHistoryComponent— full "Trader Payout History" section with its own filter set.common/GetStatusIndicator— the shared status-pill renderer mapping a largeStatusLevelenum to color-coded badges, used across nearly every table/detail view.
KPI component inventory
components/KPIcomponents/ — ~50 files across 10 subfolders.
Full breakdown
Top-level (mostly mock/demo data) — RiskPaiChartKPI, SuspiciousActivities, AccountsInDangerKPI, DetailedAccountMetrics, CurrentAccoutnLineChart, DrawDownTrackingKPI (live — time-range synced to URL), TotalTradersKPI, TotalActiveAccounts, AmountPaidOutKPI, AmountAtRiskKPI, ReccomendationKPI, FinancePieChart (generic reusable donut).
TradersKPIs/, TraderPerformanceKPIs/, TraderDetailsKPIs/ — Live trader-list cards/table, "Top 5 High-Risk/Profitable Traders" tables (with AES-encrypted-ID deep links to trader detail), trading-accounts table, and the PerformanceAnalyticsMainKPIs/ sub-cluster (detailed stats, rule-compliance table, trade-history table with CSV export).
CustomersKPIs/, CustomerDetailsKPIs/, OrdersKPIs/ — Customer cards/table (live), order list/metrics cards; CustomerDetailsKPIs's admin-notes and order-history tables are still static/mock data.
KeyMetricsKPIs/, ECommerceOperationsKPIs.tsx/ — Flat KPI-grid sections for Trading/Finance/E-commerce, and the Today's Revenue + Order Status composition for the E-commerce Operations block.
SettingsKPIs/ — Account settings panels — personal info, billing info, change password, 2FA toggle, appearance. Several are UI-only stubs without a wired submit handler (see Settings page).
WorthyCardListKPIs/, UserListTableModal/ — Live-data "Worthy" card/order tables and a reusable users-list modal.
Other single-purpose components
AdminPageRefresh (last-updated + refetch-all button), InnerHeader (page title bar hosting it), EventListener (global toast/router-push bridge), NoDataFound, Skeleton/DrawdownTrackingSkeleton, CommonContent, CommonSwitch, CommonTextModal, Error, Seo, and sidebar/Sidebar (the shared nav-rendering engine used by both the dashboard and admin sidebars — see UI kit & theming).