Skip to main content

UI kit & theming

ui/ · mui-theme/ · layout/ · styles/

UI primitives (ui/)​

Generic, feature-agnostic wrappers around MUI primitives, styled via @emotion/styled and theme tokens (theme.palette.customColors):

  • CommonInput, CustomButtons, CustomSelect / CustomSelectFilter, CustomSwitch — themed form primitives.
  • Datepicker, DateRangePicker — the latter built on react-multi-date-picker with preset ranges (Today, Last 7 days, Last year…) via resolvePresetDateRange(), popup and inline modes.
  • Modal/MuiModalWrapper, PopoverFilter / PopOverFilterWithSelect — the standard modal shell and filter-popover pattern used across the app.
  • Icons/ — 76 flat SVG icon components (+ two themed subfolders, 22 more) sharing a CustomIconProps contract (IconColor/IconWidth/IconHeight).
  • Loader, Skeletons/ — spinner and three generic loading placeholders.

MUI theming (mui-theme/)​

createEmotionCache.ts implements the standard Next.js Pages Router + MUI SSR pattern — styles are extracted server-side and rehydrated identically client-side to avoid hydration mismatch/FOUC, using an emotion-insertion-point meta tag to anchor injection order.

MuiThemeProvider.tsx maintains light/dark mode (persisted to localStorage), builds the theme via MuiThemeOptions(mode) (_muiTheme.ts) — full typography scale with responsive vw sizing for ultra-wide monitors, a 25-step shadow scale, and extensive per-component overrides (Card, Chip, Button, Table, Dialog, Tooltip). palettes/defaultPalette.ts derives the standard MUI palette plus a large customColors bag — gradients, a surfaces elevation scale, a radius scale, and table/chip state colors — from the app's brand teal/gold.

Layout shell (layout/)​

Two parallel shells: the dashboard shell (sidebar + fixed body) for all authenticated pages, and a public shell (Header/Footer) for error/offline pages.

ComponentRole
DashboardWrapperMounts BackgroundChecksPoller, Seo, DashboardSidebar, DashboardMobileHeader, the scrollable content body (width driven by Redux openSidebar/sidebarCollapsed), and an OTP verification modal.
DashboardSidebarNav config for the risk dashboard, grouped into capability-gated sections (Client Management, Trader Payout, Compliance, Security Flags, Trading Reports…), rendered through the shared Sidebar engine.
AdminSidebarParallel nav config for the /admin area, permission-string gated rather than capability-based.
Sidebar (components/sidebar)The shared rendering engine both nav configs run through: collapsible/pinned state, searchable filtering, accordion (expanded) or popover (collapsed) submenus, active-route highlighting.
Wrapper, Header, FooterPublic/marketing shell used only by 404/500/offline pages.

styles/StyledComponents/ holds ~35 @emotion/styled files, each paired 1:1 with a specific feature component (naming convention <FeatureName>Wrapper.tsx) — e.g. CustomDialog.tsx backs ui/Modal, SearchBarWrapper.tsx backs the sidebar search box.