feat(system-config): add system configs and feature flags management UI
Pull Request: Dynamic System Configuration & Multi-Tier Feature Flags
Summary
Implements a centralized System Configuration & Feature Flags Management system across both Backend and Frontend. This eliminates hardcoded business constants, allows runtime feature toggling, enables zero-downtime Firecrawl API key rotation, and dynamically feeds business quotas/rate-limits directly into active middleware and background workers.
Frontend Changes (data-crawler-fe)
1. Data Layer & Hooks
- Defined types in
src/types/system-config.tsand singleton client insrc/services/system-config.service.ts. - Added TanStack Query hooks in
src/hooks/use-system-config.ts:-
usePublicConfigs()with helperisFeatureEnabled(key). - Admin management hooks:
useSystemConfigsList,useCreateSystemConfig,useUpdateSystemConfig,useToggleFeatureFlag,useDeleteSystemConfig.
-
2. Organic Biophilic UI Components (src/components/system-config/)
- KPI Metrics: Total Configs, Active Feature Flags, Public Configs count.
- Unified Table Card: Compliant with workspace table standards, sortable columns, custom category badges, and inline boolean switches.
- Card Grid View: Responsive cards for mobile/touch-friendly view.
- Smart Modal: Dynamic input switching based on value type (Boolean switch, Number input, String input, JSON code editor).
- Safe Deletion Dialog: Prevents accidental deletion of vital keys.
3. Navigation, Guards & UX
- Added page routes:
-
/settings/developer/system-configs(Developer Shell tab). -
/system-configs(Standalone page with SEO metadata).
-
- Registered routes in
ADMIN_ROUTESwithin Next.jsmiddleware.ts. - Added dynamic notice & disabled state to
src/app/(auth)/register/page.tsxwhen registration is disabled. - Full bilingual coverage (English & Vietnamese) in
translations.ts.