Skip to content

feat: dark mode + auditor read-only mode + investor demo masking and demo-data toggle#1

Open
st3rs wants to merge 1 commit into
mainfrom
codex/build-production-ready-admin-dashboard-ui
Open

feat: dark mode + auditor read-only mode + investor demo masking and demo-data toggle#1
st3rs wants to merge 1 commit into
mainfrom
codex/build-production-ready-admin-dashboard-ui

Conversation

@st3rs
Copy link
Copy Markdown
Owner

@st3rs st3rs commented Feb 7, 2026

Motivation

  • Add production-ready theming and presentation modes so the admin UI supports dark mode, auditor read-only inspections, and an investor-safe demo that masks sensitive data.
  • Ensure demo mode can force mock data for safe presentations and that auditor mode prevents any mutations across the app.

Description

  • Implemented theme support with ThemeProvider (src/context/ThemeContext.tsx), persisted in localStorage key trst_admin_theme, and enabled Tailwind dark mode via tailwind.config.js (darkMode: 'class') and CSS updates (src/styles/index.css).
  • Added mode management with ModeProvider (src/context/ModeContext.tsx) exposing mode, setMode, demoDataEnabled, setDemoDataEnabled, isAuditorMode(), isDemoMode(), and canMutate(); modes persist via trst_admin_mode / trst_admin_demo_data and honor ?mode=auditor|demo query params.
  • Implemented investor-safe masking utilities in src/lib/masking.ts and applied masking/redaction across tables and pages (Merchants, Transactions, Settlements, Webhooks, Audit logs, Merchant detail, Dashboard) when demo mode is active.
  • Wired demo-data forcing into React Query hooks (src/lib/queries.ts) so toggling demo data forces mock fallback regardless of VITE_API_BASE_URL.
  • UI and UX changes: TopHeader theme menu + demo-data toggle and chips, persistent banners in layout for Auditor/Demo modes, disabled/hidden action buttons when canMutate() is false, and dark-mode friendly styles across components.
  • Misc: typed API client and auth storage helpers (src/lib/apiClient.ts, src/lib/authStorage.ts), RBAC helpers (src/lib/rbac.ts), many components updated to use semantic Zinc palette classes and dark variants; new masking helpers and types added (src/types/*).

Testing

  • Ran npm install successfully (dependencies installed).
  • Performed a full production build with npm run build; TypeScript and Vite build completed successfully and produced dist/ artifacts (build succeeded).
  • Started the dev server (npm run dev) and validated UI at http://localhost:5173/; exercised theme toggle, demo toggle and mode banners.
  • Automated browser check: captured a screenshot of the dashboard in demo mode using Playwright to validate masking and banners (artifact: artifacts/dashboard-demo.png).

Codex Task

Copy link
Copy Markdown

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 8528e340a9

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

Comment on lines +60 to +63
useEffect(() => {
if (mode === 'demo' && localStorage.getItem(DEMO_DATA_KEY) === null) {
setDemoDataEnabled(true);
}
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Badge Force demo data in demo mode regardless of prior toggle

In demo mode the app only enables demoDataEnabled when the demo-data key is missing, so a user who previously toggled demo data off (stored '0') will enter ?mode=demo and still hit the live API. Because withFallback only forces mock data when demoDataEnabled is true, this defeats the “safe presentation” guarantee and can expose real data in demo mode. Consider forcing demoDataEnabled to true whenever mode === 'demo' (or at least preventing the stored false value from bypassing mock data) so demo mode is consistently safe.

Useful? React with 👍 / 👎.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant