AFFAANhandClaude Opus 5
23ce0eae5f
Row actions are status-aware: Sync only on approved, Launch only on synced or paused, Pause only on live. Imported campaigns offer no Sync, since they were authored in Ads Manager. Launch is the only action behind a confirmation, and the dialog names the daily budget and says spending begins immediately. It is the last human checkpoint before money moves. The operator token is stored in localStorage and sent as X-MaskanX-Operator on approve, sync, launch, pause and stop. The backend resolves the operator name from it and ignores any actor in the body, so approval stays attributable; without a token, launch is refused and the panel says so. A failed sync shows its stored Meta error on hover rather than a bare status. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
MaskanX Frontend
Independent React, TypeScript, and Vite frontend for MaskanX.
Service Contract
- Default development URL:
http://127.0.0.1:5173 - Backend API: configured with
VITE_MASKANX_API_URL - Local proxy target: configured with
VITE_MASKANX_PROXY_TARGET - Database access: none; this service never receives PostgreSQL credentials
Local Setup
npm install
Copy-Item .env.local.example .env.local
npm run local
Start maskanx-backend on port 8088 before using the full UI.
Campaigns page
The Campaigns page needs VITE_META_AD_ACCOUNT_ID set to the Meta ad account
id (act_<digits>) in your .env.* file.
If it is unset the page still loads and lists campaigns, but four things are
silently unavailable: the ad-account billing panel, the warning shown when no
payment method is attached, ad preview in the wizard, and the account-minimum
budget check (the backend cannot look up min_daily_budget without an
account, so it skips that validation and logs a warning).
Ad preview also requires META_ADS_ACCESS_TOKEN to be configured on the
backend, in Settings > Environments.
Commands
| Command | Purpose |
|---|---|
npm run start |
Preview the production build on port 5173 |
npm run build |
Type-check and build dist/ |
npm run local |
Local Vite server using .env.local |
npm run dev |
Development server using .env.development |
npm run test |
Test-mode type-check and production build |
npm run lint |
ESLint checks |
npm run prod |
Production-mode preview |
Database migration and seed commands intentionally live in
maskanx-backend. A frontend must never own database credentials.
Production
Build the container with the browser-visible backend URL:
docker build `
--build-arg VITE_MASKANX_API_URL=https://api.example.com `
-t maskanx-frontend .
The backend must allow the deployed frontend origin through
MASKANX_CORS_ORIGINS.