`/admin/subscriptions`
`/admin/account-limits` | View/edit all accounts | ✅ Available in django admin | 🔄 **MOVE** to Django admin | +| **Billing Admin** | `/admin/billing`
`/admin/invoices`
`/admin/payments`
`/admin/credit-costs`
`/admin/credit-packages` | Billing operations | ✅ Available in django admin | 🔄 **MOVE** to Django admin | +| **User Admin** | `/admin/users`
`/admin/roles`
`/admin/activity-logs` | User management | ✅ Available in django admin | 🔄 **MOVE** to Django admin | +| **System Config** | `/admin/system-settings`
`/admin/ai-settings`
`/settings/modules`
`/admin/integration-settings` | Global settings | ⚠️ Partially in django admin | ⚠️ **REVIEW** - See section 3 | +| **Monitoring** | `/settings/status`
`/settings/api-monitor`
`/settings/debug-status` | API health, debug info | ❌ Not in django admin | 🔄 **MOVE** to Django admin | +| **Developer Tools** | `/admin/function-testing`
`/admin/system-testing` | Testing utilities | ❌ Not in django admin | 🗑️ **REMOVE** or move to Django admin | +| **UI Elements** | 22 demo pages | Component library showcase | ❌ Not needed in admin | 🗑️ **REMOVE** from production | + +#### 2.2 Problems with Current Frontend Admin Access + +**Issue 1: Duplicate Interfaces** +- Same data manageable in both Django admin and React frontend +- Two UIs to maintain for the same operations +- Inconsistent behavior between the two + +**Issue 2: Security Surface Area** +- Frontend admin pages increase attack surface +- Additional routes to protect +- Client-side code can be inspected/manipulated + +**Issue 3: Development Complexity** +- Special cases throughout codebase for super user +- Fallback logic mixed with primary logic +- Harder to test and maintain + +**Issue 4: User Confusion** +- Normal users wonder why menu items don't work +- Unclear which interface to use (Django admin vs frontend) +- UI elements demo pages in production + +--- + +### 3. Global Settings Architecture + +**Current Implementation**: ⚠️ **POORLY DESIGNED - NEEDS REFACTORING** + +#### 3.1 Current "Fallback" Pattern (WRONG APPROACH) + +**File**: `backend/igny8_core/ai/settings.py` (Lines 53-65) + +```python +# Current: "Fallback" to aws-admin settings +if not settings_obj: + for slug in ['aws-admin', 'default-account', 'default']: + system_account = Account.objects.filter(slug=slug).first() + if system_account: + settings_obj = IntegrationSettings.objects.filter(account=system_account).first() + if settings_obj: + break +``` + +**Problems**: +1. ❌ Called "fallback" but actually used as **primary global settings** +2. ❌ Settings tied to an account (aws-admin) when they should be account-independent +3. ❌ If aws-admin account deleted, global settings lost +4. ❌ Confusing: "aws-admin account settings" vs "global platform settings" +5. ❌ Users might think they need API keys, but system uses shared keys + +#### 3.2 Settings Currently Using Fallback Pattern + +**Integration Settings** (OpenAI, DALL-E, Anthropic, etc.): +- ❌ **Current**: Per-account with fallback to aws-admin +- ✅ **Should be**: Global system settings (no account association) +- ⚠️ **Exception**: Allow power users to override with their own keys (optional) + +**AI Prompts**: +- ❌ **Current**: Per-account with system defaults +- ✅ **Should be**: Global prompt library with account-level customization + +**Content Strategies**: +- ❌ **Current**: Mixed account-level and global +- ✅ **Should be**: Global templates + account customization + +**Author Profiles**: +- ❌ **Current**: Mixed account-level and global +- ✅ **Should be**: Global library + account customization + +**Publishing Channels**: +- ✅ **Current**: Already global (correct approach) +- ✅ **Keep as is** + +--- + +## Proposed Architecture + +### Phase 1: Remove Frontend Admin Exceptions + +#### 1.1 Remove Frontend Admin Routes + +**Pages to Remove from Frontend**: +``` +/admin/dashboard → Use Django admin dashboard +/admin/accounts → Use Django admin +/admin/subscriptions → Use Django admin +/admin/account-limits → Use Django admin +/admin/billing → Use Django admin +/admin/invoices → Use Django admin +/admin/payments → Use Django admin +/admin/credit-costs → Use Django admin +/admin/credit-packages → Use Django admin +/admin/users → Use Django admin +/admin/roles → Use Django admin +/admin/activity-logs → Use Django admin +/admin/system-settings → Use Django admin +/admin/ai-settings → Use Django admin +/admin/integration-settings → Use Django admin +/admin/function-testing → Remove (dev tool) +/admin/system-testing → Remove (dev tool) +/ui-elements/* → Remove (22 demo pages) +``` + +**Pages to Move to Django Admin**: +``` +/settings/status → Create Django admin page +/settings/api-monitor → Create Django admin page +/settings/debug-status → Create Django admin page +``` + +**Pages to Keep in Frontend** (Normal user features): +``` +/settings/modules → Keep (account owners enable/disable modules) +/settings/account → Keep (account settings, team management) +/settings/billing → Keep (view own invoices, payment methods) +/settings/integrations → Keep (configure own WordPress sites) +``` + +#### 1.2 Remove Frontend Super User Checks + +**Files to Clean Up**: + +1. **AppSidebar.tsx** - Remove admin section entirely +2. **AdminGuard.tsx** - Remove (no admin routes to guard) +3. **ProtectedRoute.tsx** - Remove `isPrivileged` checks +4. **ApiStatusIndicator.tsx** - Move to Django admin +5. **ResourceDebugOverlay.tsx** - Remove or django admin only +6. **api.ts** - Remove comments about admin/developer overrides + +**Result**: Frontend becomes pure user interface with no special cases for super users. + +--- + +### Phase 2: Refactor Global Settings Architecture + +#### 2.1 Create True Global Settings Models + +**New Database Structure**: + +```python +# NEW: Global system settings (no account foreign key) +class GlobalIntegrationSettings(models.Model): + """ + Global platform-wide integration settings + Used by all accounts unless they provide their own keys + """ + # OpenAI + openai_api_key = EncryptedCharField(max_length=500, blank=True) + openai_model = models.CharField(max_length=100, default='gpt-4') + openai_temperature = models.FloatField(default=0.7) + + # DALL-E + dalle_api_key = EncryptedCharField(max_length=500, blank=True) + dalle_model = models.CharField(max_length=100, default='dall-e-3') + + # Anthropic + anthropic_api_key = EncryptedCharField(max_length=500, blank=True) + anthropic_model = models.CharField(max_length=100, default='claude-3-sonnet') + + # System metadata + is_active = models.BooleanField(default=True) + last_updated = models.DateTimeField(auto_now=True) + + class Meta: + verbose_name = "Global Integration Settings" + verbose_name_plural = "Global Integration Settings" + + def __str__(self): + return "Global Integration Settings" + +# MODIFIED: Account-specific overrides (optional) +class AccountIntegrationSettings(models.Model): + """ + Optional account-specific API key overrides + If not set, uses GlobalIntegrationSettings + """ + account = models.OneToOneField(Account, on_delete=models.CASCADE) + + # Override OpenAI (blank = use global) + openai_api_key = EncryptedCharField(max_length=500, blank=True, null=True) + openai_model = models.CharField(max_length=100, blank=True, null=True) + + # Override DALL-E (blank = use global) + dalle_api_key = EncryptedCharField(max_length=500, blank=True, null=True) + + use_own_keys = models.BooleanField(default=False, + help_text="If True, account must provide their own API keys. If False, uses global keys.") + + def get_effective_settings(self): + """Get effective settings (own keys or global)""" + if self.use_own_keys and self.openai_api_key: + return { + 'openai_api_key': self.openai_api_key, + 'openai_model': self.openai_model or GlobalIntegrationSettings.objects.first().openai_model, + # ... etc + } + else: + # Use global settings + global_settings = GlobalIntegrationSettings.objects.first() + return { + 'openai_api_key': global_settings.openai_api_key, + 'openai_model': global_settings.openai_model, + # ... etc + } +``` + +#### 2.2 Updated Settings Lookup Logic + +**Before (Confusing Fallback)**: +```python +# Look for account settings → fallback to aws-admin account +settings_obj = IntegrationSettings.objects.filter(account=account).first() +if not settings_obj: + # "Fallback" to aws-admin (confusing - actually primary!) + system_account = Account.objects.filter(slug='aws-admin').first() + settings_obj = IntegrationSettings.objects.filter(account=system_account).first() +``` + +**After (Clear Global Settings)**: +```python +# Try account-specific override first +account_settings = AccountIntegrationSettings.objects.filter(account=account).first() + +if account_settings and account_settings.use_own_keys: + # Account provides their own keys + return account_settings.get_effective_settings() +else: + # Use global platform settings + global_settings = GlobalIntegrationSettings.objects.first() + return global_settings +``` + +#### 2.3 Settings That Should Be Global + +**Truly Global** (No account association): +- ✅ OpenAI/DALL-E/Anthropic API keys (system default) +- ✅ Default AI models (gpt-4, dall-e-3, etc.) +- ✅ Default temperature/parameters +- ✅ Rate limiting rules +- ✅ Cost per operation (CreditCostConfig) +- ✅ System-wide feature flags + +**Global Library with Account Customization**: +- ✅ AI Prompts (global library + account custom prompts) +- ✅ Content Strategies (global templates + account strategies) +- ✅ Author Profiles (global personas + account authors) +- ✅ Publishing Channels (global available channels) + +**Purely Account-Specific**: +- ✅ WordPress site integrations +- ✅ Account billing settings +- ✅ Team member permissions +- ✅ Site/Sector structure + +--- + +### Phase 3: Django Admin Enhancement + +#### 3.1 New Django Admin Pages to Create + +**Monitoring Dashboard** (Replace `/settings/status`): +```python +# backend/igny8_core/admin/monitoring.py +def system_health_dashboard(request): + """ + Django admin page showing: + - Database connections + - Redis status + - Celery workers + - API response times + - Error rates + """ + context = { + 'db_status': check_database(), + 'redis_status': check_redis(), + 'celery_workers': check_celery(), + 'api_health': check_api_endpoints(), + } + return render(request, 'admin/monitoring/system_health.html', context) +``` + +**API Monitor** (Replace `/settings/api-monitor`): +```python +def api_monitor_dashboard(request): + """ + Django admin page showing: + - All API endpoints status + - Response time graphs + - Error rate by endpoint + - Recent failed requests + """ + # Current ApiStatusIndicator logic moved here + pass +``` + +**Debug Console** (Replace `/settings/debug-status`): +```python +def debug_console(request): + """ + Django admin page showing: + - Environment variables + - Active settings + - Feature flags + - Cache status + """ + pass +``` + +#### 3.2 Add to Django Admin Site URLs + +```python +# backend/igny8_core/admin/site.py +def get_urls(self): + urls = super().get_urls() + custom_urls = [ + # Existing + path('dashboard/', self.admin_view(admin_dashboard), name='dashboard'), + path('reports/revenue/', self.admin_view(revenue_report), name='report_revenue'), + + # NEW: Monitoring pages + path('monitoring/system-health/', self.admin_view(system_health_dashboard), name='monitoring_system_health'), + path('monitoring/api-monitor/', self.admin_view(api_monitor_dashboard), name='monitoring_api_monitor'), + path('monitoring/debug-console/', self.admin_view(debug_console), name='monitoring_debug_console'), + ] + return custom_urls + urls +``` + +--- + +## Pros & Cons Analysis + +### Current Architecture (Frontend Admin Access) + +**Pros**: +- ✅ Modern UI for admin operations +- ✅ Real-time monitoring in React +- ✅ Consistent look with rest of app +- ✅ Easier to build complex dashboards + +**Cons**: +- ❌ Duplicate interfaces (Django + React) +- ❌ More code to maintain +- ❌ Larger security surface area +- ❌ Special cases throughout codebase +- ❌ Confusing fallback patterns +- ❌ Client-side admin code visible + +--- + +### Proposed Architecture (Django Admin Only) + +**Pros**: +- ✅ Single source of truth for admin operations +- ✅ Smaller attack surface +- ✅ Less code to maintain +- ✅ No special cases in frontend +- ✅ Clear separation of concerns +- ✅ Django admin is battle-tested +- ✅ Better security (server-side only) +- ✅ Truly global settings (not account-based) + +**Cons**: +- ⚠️ Need to build monitoring pages in Django admin +- ⚠️ Less modern UI (Django admin vs React) +- ⚠️ Some features need recreation + +--- + +## Migration Strategy + +### Step 1: Create Global Settings Models (Week 1) + +**Tasks**: +1. ✅ Create `GlobalIntegrationSettings` model +2. ✅ Create `GlobalSystemSettings` model +3. ✅ Migrate existing aws-admin settings to global settings +4. ✅ Create migration script +5. ✅ Update `get_settings()` functions to use global first + +**Migration Script**: +```python +# management/commands/migrate_to_global_settings.py +def handle(self): + # 1. Get aws-admin account settings + aws_account = Account.objects.filter(slug='aws-admin').first() + if aws_account: + account_settings = IntegrationSettings.objects.filter(account=aws_account).first() + + # 2. Create global settings from aws-admin settings + GlobalIntegrationSettings.objects.create( + openai_api_key=account_settings.openai_api_key, + openai_model=account_settings.openai_model, + dalle_api_key=account_settings.dalle_api_key, + # ... copy all settings + ) + + # 3. Delete aws-admin specific settings (now global) + account_settings.delete() + + print("✅ Migrated to global settings") +``` + +--- + +### Step 2: Update Backend Logic (Week 1-2) + +**Files to Update**: +1. `ai/settings.py` - Use global settings +2. `ai/ai_core.py` - Remove aws-admin fallback +3. `api/permissions.py` - Remove `IsSystemAccountOrDeveloper` (no longer needed) +4. API views - Remove super user bypasses + +**Example Change**: +```python +# BEFORE +def get_openai_settings(account): + settings = IntegrationSettings.objects.filter(account=account).first() + if not settings: + # Fallback to aws-admin + aws = Account.objects.filter(slug='aws-admin').first() + settings = IntegrationSettings.objects.filter(account=aws).first() + return settings + +# AFTER +def get_openai_settings(account): + # Check if account has custom keys + account_settings = AccountIntegrationSettings.objects.filter(account=account).first() + if account_settings and account_settings.use_own_keys: + return account_settings.get_effective_settings() + + # Use global settings + return GlobalIntegrationSettings.objects.first() +``` + +--- + +### Step 3: Create Django Admin Monitoring Pages (Week 2) + +**Create**: +1. System Health Dashboard +2. API Monitor +3. Debug Console +4. Add to Django admin menu + +**Test**: +- Access from Django admin at `/admin/monitoring/` +- Verify functionality matches React pages + +--- + +### Step 4: Remove Frontend Admin Routes (Week 3) + +**Remove Routes**: +```typescript +// Remove from src/routes.tsx +- /admin/dashboard +- /admin/accounts +- /admin/* +- /ui-elements/* +``` + +**Remove Components**: +``` +src/pages/Admin/ → DELETE entire directory +src/pages/UIElements/ → DELETE entire directory +src/components/auth/AdminGuard.tsx → DELETE +``` + +**Clean Sidebar**: +```typescript +// src/layout/AppSidebar.tsx +// Remove entire adminSection +// Remove isAwsAdminAccount checks +``` + +--- + +### Step 5: Clean Up Frontend Code (Week 3-4) + +**Remove**: +1. Super user checks in ProtectedRoute +2. Developer role checks everywhere +3. `isAwsAdmin` variables +4. Comments about admin/developer overrides + +**Keep**: +1. Normal user role checks (owner, admin, editor, viewer) +2. Account-level permission checks +3. Module enable/disable settings (account level) + +--- + +### Step 6: Test & Deploy (Week 4) + +**Test Cases**: +1. ✅ Regular users can't access Django admin +2. ✅ Super user can access Django admin monitoring +3. ✅ Global settings work for all accounts +4. ✅ Account-level overrides work +5. ✅ No frontend admin routes accessible +6. ✅ All user features still work + +--- + +## Recommended Approach + +### ✅ RECOMMENDED: Hybrid Approach + +**Backend**: Keep super user in Django admin (essential for system management) + +**Frontend**: Remove all super user access - make it pure user interface + +**Settings**: True global settings, not account-based fallbacks + +**Monitoring**: Django admin only + +### Implementation Priority + +**Phase 1 (Immediate - Week 1-2)**: +1. ✅ Create global settings models +2. ✅ Migrate aws-admin settings to global +3. ✅ Update backend logic to use global settings +4. ✅ Test thoroughly + +**Phase 2 (Short-term - Week 3-4)**: +1. ✅ Create Django admin monitoring pages +2. ✅ Remove frontend admin routes +3. ✅ Clean up frontend code +4. ✅ Test end-to-end + +**Phase 3 (Optional - Month 2)**: +1. ⚠️ Allow account-level API key overrides (for power users) +2. ⚠️ Add usage tracking per account +3. ⚠️ Alert on API key quota issues + +--- + +## Settings Architecture Decision Matrix + +| Setting Type | Current | Proposed | Reasoning | +|--------------|---------|----------|-----------| +| **OpenAI API Key** | aws-admin fallback | Global with optional override | Most users should use shared key for simplicity | +| **AI Model Selection** | aws-admin fallback | Global default, allow account override | Power users may want specific models | +| **AI Prompts** | Mixed | Global library + account custom | Templates global, customization per account | +| **Content Strategies** | Mixed | Global templates + account strategies | Same as prompts | +| **Author Profiles** | Mixed | Global library + account authors | Same as prompts | +| **Credit Costs** | Global | Global (keep as is) | System-wide pricing | +| **Publishing Channels** | Global | Global (keep as is) | Already correct | +| **WordPress Integrations** | Per-account | Per-account (keep as is) | User-specific connections | + +--- + +## Benefits of Proposed Architecture + +### For Development Team +1. ✅ **Less code to maintain** - Remove entire frontend admin section +2. ✅ **Clearer architecture** - No special cases for super users +3. ✅ **Easier testing** - No need to test admin UI in React +4. ✅ **Better separation** - Admin vs user concerns clearly separated + +### For Security +1. ✅ **Smaller attack surface** - No client-side admin code +2. ✅ **Single admin interface** - Only Django admin to secure +3. ✅ **No frontend bypasses** - No special logic in React +4. ✅ **True global settings** - Not dependent on aws-admin account + +### For Users +1. ✅ **Clearer interface** - No confusing admin menu items +2. ✅ **Simpler setup** - Global settings work out of box +3. ✅ **Optional customization** - Can override with own keys if needed +4. ✅ **Better performance** - Less code loaded in frontend + +### For Operations +1. ✅ **Single source of truth** - Django admin for all admin tasks +2. ✅ **Better monitoring** - Centralized in Django admin +3. ✅ **Audit trail** - All admin actions logged +4. ✅ **No AWS account dependency** - Global settings not tied to account + +--- + +## Risks & Mitigation + +### Risk 1: Loss of React Admin UI +- **Mitigation**: Modern Django admin templates (Unfold already used) +- **Mitigation**: Build essential monitoring pages in Django admin +- **Mitigation**: Most admin tasks already work in Django admin + +### Risk 2: Migration Complexity +- **Mitigation**: Careful planning and testing +- **Mitigation**: Gradual rollout (settings first, then UI) +- **Mitigation**: Rollback plan if issues occur + +### Risk 3: API Key Management +- **Mitigation**: Keep global keys secure in Django admin +- **Mitigation**: Add option for accounts to use own keys +- **Mitigation**: Track usage per account even with shared keys + +--- + +## Final Recommendation + +### ✅ **PROCEED WITH PROPOSED ARCHITECTURE** + +**Reasons**: +1. Cleaner separation of concerns +2. Less code to maintain +3. Better security posture +4. Proper global settings (not fallbacks) +5. Django admin is sufficient for admin tasks +6. Frontend becomes pure user interface + +**Timeline**: 4 weeks for complete migration + +**Risk Level**: LOW - Changes are well-defined and testable + +**Business Impact**: POSITIVE - Simpler, more secure, easier to maintain + +--- + +## Next Steps + +1. ✅ **Approval**: Review this document and approve approach +2. ✅ **Plan**: Create detailed implementation tickets +3. ✅ **Build**: Implement Phase 1 (global settings) +4. ✅ **Test**: Thorough testing of settings migration +5. ✅ **Deploy**: Phase 1 to production +6. ✅ **Build**: Implement Phase 2 (remove frontend admin) +7. ✅ **Test**: End-to-end testing +8. ✅ **Deploy**: Phase 2 to production + +--- + +**Document Status**: Draft for Review +**Author**: System Architecture Analysis +**Date**: December 20, 2025 +**Next Review**: After stakeholder feedback + +--- + +*End of Analysis* diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 0eae0c29..c77041ab 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -5,7 +5,7 @@ import AppLayout from "./layout/AppLayout"; import { ScrollToTop } from "./components/common/ScrollToTop"; import ProtectedRoute from "./components/auth/ProtectedRoute"; import ModuleGuard from "./components/common/ModuleGuard"; -import AdminGuard from "./components/auth/AdminGuard"; +import { AwsAdminGuard } from "./components/auth/AwsAdminGuard"; import GlobalErrorDisplay from "./components/common/GlobalErrorDisplay"; import LoadingStateMonitor from "./components/common/LoadingStateMonitor"; import { useAuthStore } from "./store/authStore"; @@ -68,23 +68,8 @@ const AccountSettingsPage = lazy(() => import("./pages/account/AccountSettingsPa const TeamManagementPage = lazy(() => import("./pages/account/TeamManagementPage")); const UsageAnalyticsPage = lazy(() => import("./pages/account/UsageAnalyticsPage")); -// Admin Module - Lazy loaded (mixed folder casing in repo, match actual file paths) -const AdminBilling = lazy(() => import("./pages/Admin/AdminBilling")); -const PaymentApprovalPage = lazy(() => import("./pages/admin/PaymentApprovalPage")); +// Admin Module - Only dashboard for aws-admin users const AdminSystemDashboard = lazy(() => import("./pages/admin/AdminSystemDashboard")); -const AdminAllAccountsPage = lazy(() => import("./pages/admin/AdminAllAccountsPage")); -const AdminSubscriptionsPage = lazy(() => import("./pages/admin/AdminSubscriptionsPage")); -const AdminAccountLimitsPage = lazy(() => import("./pages/admin/AdminAccountLimitsPage")); -const AdminAllInvoicesPage = lazy(() => import("./pages/admin/AdminAllInvoicesPage")); -const AdminAllPaymentsPage = lazy(() => import("./pages/admin/AdminAllPaymentsPage")); -const AdminCreditPackagesPage = lazy(() => import("./pages/admin/AdminCreditPackagesPage")); -const AdminCreditCostsPage = lazy(() => import("./pages/Admin/AdminCreditCostsPage")); -const AdminAllUsersPage = lazy(() => import("./pages/admin/AdminAllUsersPage")); -const AdminRolesPermissionsPage = lazy(() => import("./pages/admin/AdminRolesPermissionsPage")); -const AdminActivityLogsPage = lazy(() => import("./pages/admin/AdminActivityLogsPage")); -const AdminSystemSettingsPage = lazy(() => import("./pages/admin/AdminSystemSettingsPage")); -const AdminSystemHealthPage = lazy(() => import("./pages/admin/AdminSystemHealthPage")); -const AdminAPIMonitorPage = lazy(() => import("./pages/admin/AdminAPIMonitorPage")); // Reference Data - Lazy loaded const SeedKeywords = lazy(() => import("./pages/Reference/SeedKeywords")); @@ -104,9 +89,6 @@ const ModuleSettings = lazy(() => import("./pages/Settings/Modules")); const AISettings = lazy(() => import("./pages/Settings/AI")); const Plans = lazy(() => import("./pages/Settings/Plans")); const Industries = lazy(() => import("./pages/Settings/Industries")); -const MasterStatus = lazy(() => import("./pages/Settings/MasterStatus")); -const ApiMonitor = lazy(() => import("./pages/Settings/ApiMonitor")); -const DebugStatus = lazy(() => import("./pages/Settings/DebugStatus")); const Integration = lazy(() => import("./pages/Settings/Integration")); const Publishing = lazy(() => import("./pages/Settings/Publishing")); const Sites = lazy(() => import("./pages/Settings/Sites")); @@ -132,30 +114,7 @@ const FunctionTesting = lazy(() => import("./pages/Help/FunctionTesting")); // Components - Lazy loaded const Components = lazy(() => import("./pages/Components")); -// UI Elements - Lazy loaded (rarely used) -const Alerts = lazy(() => import("./pages/Settings/UiElements/Alerts")); -const Avatars = lazy(() => import("./pages/Settings/UiElements/Avatars")); -const Badges = lazy(() => import("./pages/Settings/UiElements/Badges")); -const Breadcrumb = lazy(() => import("./pages/Settings/UiElements/Breadcrumb")); -const Buttons = lazy(() => import("./pages/Settings/UiElements/Buttons")); -const ButtonsGroup = lazy(() => import("./pages/Settings/UiElements/ButtonsGroup")); -const Cards = lazy(() => import("./pages/Settings/UiElements/Cards")); -const Carousel = lazy(() => import("./pages/Settings/UiElements/Carousel")); -const Dropdowns = lazy(() => import("./pages/Settings/UiElements/Dropdowns")); -const ImagesUI = lazy(() => import("./pages/Settings/UiElements/Images")); -const Links = lazy(() => import("./pages/Settings/UiElements/Links")); -const List = lazy(() => import("./pages/Settings/UiElements/List")); -const Modals = lazy(() => import("./pages/Settings/UiElements/Modals")); -const Notifications = lazy(() => import("./pages/Settings/UiElements/Notifications")); -const Pagination = lazy(() => import("./pages/Settings/UiElements/Pagination")); -const Popovers = lazy(() => import("./pages/Settings/UiElements/Popovers")); -const PricingTable = lazy(() => import("./pages/Settings/UiElements/PricingTable")); -const Progressbar = lazy(() => import("./pages/Settings/UiElements/Progressbar")); -const Ribbons = lazy(() => import("./pages/Settings/UiElements/Ribbons")); -const Spinners = lazy(() => import("./pages/Settings/UiElements/Spinners")); -const Tabs = lazy(() => import("./pages/Settings/UiElements/Tabs")); -const Tooltips = lazy(() => import("./pages/Settings/UiElements/Tooltips")); -const Videos = lazy(() => import("./pages/Settings/UiElements/Videos")); + export default function App() { // All session validation removed - API interceptor handles authentication @@ -311,34 +270,12 @@ export default function App() {
+
+
+ );
+ }
+
+ // Check if user belongs to aws-admin account
+ const isAwsAdmin = user?.account?.slug === 'aws-admin';
+
+ if (!isAwsAdmin) {
+ return
-
- );
-}
-
diff --git a/frontend/src/layout/AppSidebar.tsx b/frontend/src/layout/AppSidebar.tsx
index 798105de..7076d19b 100644
--- a/frontend/src/layout/AppSidebar.tsx
+++ b/frontend/src/layout/AppSidebar.tsx
@@ -23,7 +23,6 @@ import SidebarWidget from "./SidebarWidget";
import { APP_VERSION } from "../config/version";
import { useAuthStore } from "../store/authStore";
import { useSettingsStore } from "../store/settingsStore";
-import ApiStatusIndicator from "../components/sidebar/ApiStatusIndicator";
type NavItem = {
name: string;
@@ -43,13 +42,8 @@ const AppSidebar: React.FC = () => {
const { user, isAuthenticated } = useAuthStore();
const { moduleEnableSettings, isModuleEnabled: checkModuleEnabled, loadModuleEnableSettings, loading: settingsLoading } = useSettingsStore();
- // Show admin menu only for system account (aws-admin/default) or developer
- const isAwsAdminAccount = Boolean(
- user?.account?.slug === 'aws-admin' ||
- user?.account?.slug === 'default-account' ||
- user?.account?.slug === 'default' ||
- user?.role === 'developer'
- );
+ // Show admin menu only for aws-admin account users
+ const isAwsAdminAccount = Boolean(user?.account?.slug === 'aws-admin');
// Helper to check if module is enabled - memoized to prevent infinite loops
const moduleEnabled = useCallback((moduleName: string): boolean => {
@@ -255,7 +249,7 @@ const AppSidebar: React.FC = () => {
];
}, [moduleEnabled]);
- // Admin section - only shown for users in aws-admin account
+ // Admin section - only shown for aws-admin account users
const adminSection: MenuSection = useMemo(() => ({
label: "ADMIN",
items: [
@@ -264,91 +258,6 @@ const AppSidebar: React.FC = () => {
name: "System Dashboard",
path: "/admin/dashboard",
},
- {
- icon:
- {groupStatuses.map((group, index) => (
-
-
-
-
- {group.abbreviation}
-
-
- ))}
-
- {/* API Status Indicator - above OVERVIEW section */}
-
- ) : (
- // WordPress Integration Debug Tab
-
-
- )}
-
-
- );
-}
diff --git a/frontend/src/pages/Settings/MasterStatus.tsx b/frontend/src/pages/Settings/MasterStatus.tsx
deleted file mode 100644
index 38a4cdd7..00000000
--- a/frontend/src/pages/Settings/MasterStatus.tsx
+++ /dev/null
@@ -1,569 +0,0 @@
-import { useState, useEffect, useCallback } from 'react';
-import {
- Activity,
- Zap,
- Database,
- Server,
- Workflow,
- Globe,
- CheckCircle,
- AlertTriangle,
- XCircle,
- RefreshCw,
- TrendingUp,
- Clock,
- Cpu,
- HardDrive,
- MemoryStick
-} from 'lucide-react';
-import PageMeta from '../../components/common/PageMeta';
-import DebugSiteSelector from '../../components/common/DebugSiteSelector';
-import { fetchAPI } from '../../services/api';
-import { useSiteStore } from '../../store/siteStore';
-
-// Types
-interface SystemMetrics {
- cpu: { usage_percent: number; cores: number; status: string };
- memory: { total_gb: number; used_gb: number; usage_percent: number; status: string };
- disk: { total_gb: number; used_gb: number; usage_percent: number; status: string };
-}
-
-interface ServiceHealth {
- database: { status: string; connected: boolean };
- redis: { status: string; connected: boolean };
- celery: { status: string; worker_count: number };
-}
-
-interface ApiGroupHealth {
- name: string;
- total: number;
- healthy: number;
- warning: number;
- error: number;
- percentage: number;
- status: 'healthy' | 'warning' | 'error';
-}
-
-interface WorkflowHealth {
- name: string;
- steps: { name: string; status: 'healthy' | 'warning' | 'error'; message?: string }[];
- overall: 'healthy' | 'warning' | 'error';
-}
-
-interface IntegrationHealth {
- platform: string;
- connected: boolean;
- last_sync: string | null;
- sync_enabled: boolean;
- plugin_active: boolean;
- status: 'healthy' | 'warning' | 'error';
-}
-
-export default function MasterStatus() {
- const { activeSite } = useSiteStore();
- const [loading, setLoading] = useState(true);
- const [lastUpdate, setLastUpdate] = useState- {activeSite - ? 'Enable debug mode above to view system health checks' - : 'Select a site and enable debug mode to view system health checks'} -
-
-
- );
- };
-
- // Progress bar component
- const ProgressBar = ({ value, status }: { value: number; status: string }) => {
- const colors = {
- healthy: 'bg-green-500',
- warning: 'bg-yellow-500',
- error: 'bg-red-500',
- };
-
- return (
-
-
-
- );
- };
-
- return (
- <>
-
- {/* Header */}
-
-
- );
-}
diff --git a/frontend/src/pages/Settings/UiElements/Alerts.tsx b/frontend/src/pages/Settings/UiElements/Alerts.tsx
deleted file mode 100644
index 684c228e..00000000
--- a/frontend/src/pages/Settings/UiElements/Alerts.tsx
+++ /dev/null
@@ -1,192 +0,0 @@
-import { useState } from "react";
-import ComponentCard from "../../../components/common/ComponentCard";
-import Alert from "../../../components/ui/alert/Alert";
-import PageMeta from "../../../components/common/PageMeta";
-import Button from "../../../components/ui/button/Button";
-
-export default function Alerts() {
- const [notifications, setNotifications] = useState<
- Array<{ id: number; variant: "success" | "error" | "warning" | "info"; title: string; message: string }>
- >([]);
-
- const addNotification = (variant: "success" | "error" | "warning" | "info") => {
- const titles = {
- success: "Success!",
- error: "Error Occurred",
- warning: "Warning",
- info: "Information",
- };
- const messages = {
- success: "Operation completed successfully.",
- error: "Something went wrong. Please try again.",
- warning: "Please review this action carefully.",
- info: "Here's some useful information for you.",
- };
-
- const newNotification = {
- id: Date.now(),
- variant,
- title: titles[variant],
- message: messages[variant],
- };
-
- setNotifications((prev) => [...prev, newNotification]);
-
- // Auto-remove after 5 seconds
- setTimeout(() => {
- setNotifications((prev) => prev.filter((n) => n.id !== newNotification.id));
- }, 5000);
- };
-
- const removeNotification = (id: number) => {
- setNotifications((prev) => prev.filter((n) => n.id !== id));
- };
-
- return (
- <>
-
-
-
- {/* System Resources & Services Health */}
-
-
- System Status
-- Master dashboard showing all system health metrics -
-
-
-
-
-
-
-
-
-
-
- {/* Site Selector */}
-
-
-
- {/* Compact System Metrics (70% width) */}
-
-
- {/* CPU */}
-
-
- {/* Services Stack (30% width) */}
-
-
-
- {/* Memory */}
-
-
-
-
-
- {systemMetrics?.cpu.usage_percent.toFixed(1)}%
-
- {systemMetrics?.cpu.cores} cores
-
-
-
- {/* Disk */}
-
-
-
-
-
- {systemMetrics?.memory.usage_percent.toFixed(1)}%
-
- - {systemMetrics?.memory.used_gb.toFixed(1)}/{systemMetrics?.memory.total_gb.toFixed(1)} GB -
-
-
-
-
-
-
-
- {systemMetrics?.disk.usage_percent.toFixed(1)}%
-
- - {systemMetrics?.disk.used_gb.toFixed(1)}/{systemMetrics?.disk.total_gb.toFixed(1)} GB -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {serviceHealth?.celery.worker_count || 0}w
-
-
-
-
- {/* API Health by Module */}
-
-
-
-
-
- {/* Content Workflow Health */}
-
-
-
- {apiHealth.map((group) => (
-
-
-
- ))}
-
- {group.name}
-
-
- {group.percentage}%
-
-
- {group.healthy}/{group.total} healthy
-
-
-
-
- {workflowHealth.length === 0 ? (
-
-
- {/* WordPress Integration */}
- {integrationHealth && (
-
-
- {workflowHealth.length === 0 ? (
- Select a site to view workflow health
- ) : ( -
- {workflowHealth.map((workflow) => (
-
- )}
-
-
- ))}
-
-
- {workflow.name}
-
- {workflow.steps.map((step, idx) => (
-
-
-
- ))}
-
- {step.name}
- {step.status === 'healthy' ? (
-
- {step.message && (
- {step.message}
- )} - {idx < workflow.steps.length - 1 && ( -
-
-
- )}
-
-
-
-
- )}
-
-
-
-
-
- Connection
-
-
- Plugin Status
-
-
- Sync Enabled
-
-
- Last Sync
-
- {integrationHealth.last_sync
- ? new Date(integrationHealth.last_sync).toLocaleString()
- : 'Never'}
-
-
-
- {/* Interactive Notifications */}
-
-
-
- {/* Static Alert Examples */}
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
-}
diff --git a/frontend/src/pages/Settings/UiElements/Avatars.tsx b/frontend/src/pages/Settings/UiElements/Avatars.tsx
deleted file mode 100644
index dc78d5e4..00000000
--- a/frontend/src/pages/Settings/UiElements/Avatars.tsx
+++ /dev/null
@@ -1,121 +0,0 @@
-import ComponentCard from "../../../components/common/ComponentCard";
-import Avatar from "../../../components/ui/avatar/Avatar";
-import PageMeta from "../../../components/common/PageMeta";
-
-export default function Avatars() {
- return (
- <>
-
-
-
-
-
- {notifications.length > 0 && (
-
- )}
-
-
- {/* Notification Stack */}
-
- {notifications.map((notification) => (
-
-
-
- ))}
-
-
-
-
-
-
-
-
-
-
-
-
- {/* Default Avatar (No Status) */}
-
-
-
-
- {" "}
-
-
-
-
- );
-}
diff --git a/frontend/src/pages/Settings/UiElements/Badges.tsx b/frontend/src/pages/Settings/UiElements/Badges.tsx
deleted file mode 100644
index c759dd8a..00000000
--- a/frontend/src/pages/Settings/UiElements/Badges.tsx
+++ /dev/null
@@ -1,169 +0,0 @@
-import Badge from "../../../components/ui/badge/Badge";
-import { PlusIcon } from "../../../icons";
-import PageMeta from "../../../components/common/PageMeta";
-import ComponentCard from "../../../components/common/ComponentCard";
-
-export default function Badges() {
- return (
-
-
-
-
-
-
-
-
-
-
- );
-}
diff --git a/frontend/src/pages/Settings/UiElements/Breadcrumb.tsx b/frontend/src/pages/Settings/UiElements/Breadcrumb.tsx
deleted file mode 100644
index 96f0fd13..00000000
--- a/frontend/src/pages/Settings/UiElements/Breadcrumb.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import ComponentCard from "../../../components/common/ComponentCard";
-import PageMeta from "../../../components/common/PageMeta";
-import { Breadcrumb } from "../../../components/ui/breadcrumb";
-
-export default function BreadcrumbPage() {
- return (
- <>
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {/* Light Variant */}
-
- Primary
-
-
- Success
- {" "}
-
- Error
- {" "}
-
- Warning
- {" "}
-
- Info
-
-
- Light
-
-
- Dark
-
-
-
- {/* Light Variant */}
-
- Primary
-
-
- Success
- {" "}
-
- Error
- {" "}
-
- Warning
- {" "}
-
- Info
-
-
- Light
-
-
- Dark
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
-}
-
diff --git a/frontend/src/pages/Settings/UiElements/Buttons.tsx b/frontend/src/pages/Settings/UiElements/Buttons.tsx
deleted file mode 100644
index e437f364..00000000
--- a/frontend/src/pages/Settings/UiElements/Buttons.tsx
+++ /dev/null
@@ -1,116 +0,0 @@
-import ComponentCard from "../../../components/common/ComponentCard";
-import PageMeta from "../../../components/common/PageMeta";
-import Button from "../../../components/ui/button/Button";
-import { BoxIcon } from "../../../icons";
-
-export default function Buttons() {
- return (
-
-
- );
-}
diff --git a/frontend/src/pages/Settings/UiElements/ButtonsGroup.tsx b/frontend/src/pages/Settings/UiElements/ButtonsGroup.tsx
deleted file mode 100644
index e587f7e5..00000000
--- a/frontend/src/pages/Settings/UiElements/ButtonsGroup.tsx
+++ /dev/null
@@ -1,89 +0,0 @@
-import { useState } from "react";
-import ComponentCard from "../../../components/common/ComponentCard";
-import PageMeta from "../../../components/common/PageMeta";
-import { ButtonGroup, ButtonGroupItem } from "../../../components/ui/button-group";
-
-export default function ButtonsGroup() {
- const [activeGroup, setActiveGroup] = useState("left");
-
- return (
- <>
-
- {/* Primary Button */}
-
-
- {/* Primary Button with Start Icon */}
-
-
- {/* Primary Button with Start Icon */}
-
-
- {/* Outline Button */}
-
-
- {/* Outline Button with Start Icon */}
-
- {" "}
- {/* Outline Button with Start Icon */}
-
-
-
-
-
-
-
-
- }
- >
- Button Text
-
- }
- >
- Button Text
-
-
-
- }
- >
- Button Text
-
- }
- >
- Button Text
-
-
-
- {/* Outline Button */}
-
-
-
-
- }
- >
- Button Text
-
- }
- >
- Button Text
-
-
-
- }
- >
- Button Text
-
- }
- >
- Button Text
-
-
-
-
-
- setActiveGroup("left")}
- className="rounded-l-lg border-l-0"
- >
- Left
-
- setActiveGroup("center")}
- className="border-l border-r border-gray-300 dark:border-gray-700"
- >
- Center
-
- setActiveGroup("right")}
- className="rounded-r-lg border-r-0"
- >
- Right
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
-}
-
diff --git a/frontend/src/pages/Settings/UiElements/Cards.tsx b/frontend/src/pages/Settings/UiElements/Cards.tsx
deleted file mode 100644
index 2e1c9513..00000000
--- a/frontend/src/pages/Settings/UiElements/Cards.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-import ComponentCard from "../../../components/common/ComponentCard";
-import PageMeta from "../../../components/common/PageMeta";
-import {
- Card,
- CardTitle,
- CardDescription,
- CardAction,
- CardIcon,
-} from "../../../components/ui/card/Card";
-
-export default function Cards() {
- return (
- <>
-
-
-
- Card Title
-
- This is a basic card with title and description.
-
-
-
-
-
-
-
-
-
- Card with Icon
- This card includes an icon at the top.
- Learn More
-
-
-
-
-
- 
- Card with Image
-
- This card includes an image at the top.
-
-
-
-
-
- );
-}
-
diff --git a/frontend/src/pages/Settings/UiElements/Carousel.tsx b/frontend/src/pages/Settings/UiElements/Carousel.tsx
deleted file mode 100644
index 221cc090..00000000
--- a/frontend/src/pages/Settings/UiElements/Carousel.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import ComponentCard from "../../../components/common/ComponentCard";
-import PageMeta from "../../../components/common/PageMeta";
-
-export default function Carousel() {
- return (
- <>
-
-
-
-
-
- );
-}
-
diff --git a/frontend/src/pages/Settings/UiElements/Dropdowns.tsx b/frontend/src/pages/Settings/UiElements/Dropdowns.tsx
deleted file mode 100644
index 04f1bc35..00000000
--- a/frontend/src/pages/Settings/UiElements/Dropdowns.tsx
+++ /dev/null
@@ -1,132 +0,0 @@
-import { useState } from "react";
-import ComponentCard from "../../../components/common/ComponentCard";
-import PageMeta from "../../../components/common/PageMeta";
-import { Dropdown } from "../../../components/ui/dropdown/Dropdown";
-import { DropdownItem } from "../../../components/ui/dropdown/DropdownItem";
-import Button from "../../../components/ui/button/Button";
-
-export default function Dropdowns() {
- const [dropdown1, setDropdown1] = useState(false);
- const [dropdown2, setDropdown2] = useState(false);
- const [dropdown3, setDropdown3] = useState(false);
-
- return (
- <>
- - Carousel component will be implemented here. -
-
-
-
-
-
-
-
-
-
-
-
- );
-}
-
diff --git a/frontend/src/pages/Settings/UiElements/Images.tsx b/frontend/src/pages/Settings/UiElements/Images.tsx
deleted file mode 100644
index 712be8ed..00000000
--- a/frontend/src/pages/Settings/UiElements/Images.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import ResponsiveImage from "../../../components/ui/images/ResponsiveImage";
-import TwoColumnImageGrid from "../../../components/ui/images/TwoColumnImageGrid";
-import ThreeColumnImageGrid from "../../../components/ui/images/ThreeColumnImageGrid";
-import ComponentCard from "../../../components/common/ComponentCard";
-import PageMeta from "../../../components/common/PageMeta";
-
-export default function Images() {
- return (
- <>
-
-
- setDropdown1(false)}
- className="w-48 p-2 mt-2"
- >
- setDropdown1(false)}
- className="flex items-center gap-3 px-3 py-2 font-medium text-gray-700 rounded-lg text-theme-sm hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-gray-300"
- >
- Edit
-
- setDropdown1(false)}
- className="flex items-center gap-3 px-3 py-2 font-medium text-gray-700 rounded-lg text-theme-sm hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-gray-300"
- >
- Delete
-
-
-
-
-
- setDropdown2(false)}
- className="w-48 p-2 mt-2"
- >
- setDropdown2(false)}
- className="flex items-center gap-3 px-3 py-2 font-medium text-gray-700 rounded-lg text-theme-sm hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-gray-300"
- >
- Edit
-
- setDropdown2(false)}
- className="flex items-center gap-3 px-3 py-2 font-medium text-gray-700 rounded-lg text-theme-sm hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-gray-300"
- >
- View
-
-
- setDropdown2(false)}
- className="flex items-center gap-3 px-3 py-2 font-medium text-red-600 rounded-lg text-theme-sm hover:bg-red-50 hover:text-red-700 dark:text-red-400 dark:hover:bg-red-900/20 dark:hover:text-red-300"
- >
- Delete
-
-
-
-
-
- setDropdown3(false)}
- className="w-48 p-2 mt-2"
- >
- setDropdown3(false)}
- className="flex items-center gap-3 px-3 py-2 font-medium text-gray-700 rounded-lg text-theme-sm hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-gray-300"
- >
-
- Edit
-
- setDropdown3(false)}
- className="flex items-center gap-3 px-3 py-2 font-medium text-gray-700 rounded-lg text-theme-sm hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-gray-300"
- >
-
- View
-
-
- setDropdown3(false)}
- className="flex items-center gap-3 px-3 py-2 font-medium text-red-600 rounded-lg text-theme-sm hover:bg-red-50 hover:text-red-700 dark:text-red-400 dark:hover:bg-red-900/20 dark:hover:text-red-300"
- >
-
- Delete
-
-
-
-
-
-
-
-
-
-
-
-
- );
-}
diff --git a/frontend/src/pages/Settings/UiElements/Links.tsx b/frontend/src/pages/Settings/UiElements/Links.tsx
deleted file mode 100644
index 0cb99c1e..00000000
--- a/frontend/src/pages/Settings/UiElements/Links.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import ComponentCard from "../../../components/common/ComponentCard";
-import PageMeta from "../../../components/common/PageMeta";
-
-export default function Links() {
- return (
- <>
-
-
-
-
-
- );
-}
-
diff --git a/frontend/src/pages/Settings/UiElements/List.tsx b/frontend/src/pages/Settings/UiElements/List.tsx
deleted file mode 100644
index 733ef63e..00000000
--- a/frontend/src/pages/Settings/UiElements/List.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import ComponentCard from "../../../components/common/ComponentCard";
-import PageMeta from "../../../components/common/PageMeta";
-import { List, ListItem } from "../../../components/ui/list";
-
-export default function ListPage() {
- return (
- <>
-
-
-
-
- Primary Link
-
-
-
-
- Default Link
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
-}
-
diff --git a/frontend/src/pages/Settings/UiElements/Modals.tsx b/frontend/src/pages/Settings/UiElements/Modals.tsx
deleted file mode 100644
index 90c89fdb..00000000
--- a/frontend/src/pages/Settings/UiElements/Modals.tsx
+++ /dev/null
@@ -1,177 +0,0 @@
-import { useState } from "react";
-import ComponentCard from "../../../components/common/ComponentCard";
-import PageMeta from "../../../components/common/PageMeta";
-import { Modal } from "../../../components/ui/modal";
-import Button from "../../../components/ui/button/Button";
-import ConfirmDialog from "../../../components/common/ConfirmDialog";
-import AlertModal from "../../../components/ui/alert/AlertModal";
-
-export default function Modals() {
- const [isDefaultModalOpen, setIsDefaultModalOpen] = useState(false);
- const [isCenteredModalOpen, setIsCenteredModalOpen] = useState(false);
- const [isFormModalOpen, setIsFormModalOpen] = useState(false);
- const [isFullScreenModalOpen, setIsFullScreenModalOpen] = useState(false);
- const [isConfirmDialogOpen, setIsConfirmDialogOpen] = useState(false);
- const [isSuccessAlertOpen, setIsSuccessAlertOpen] = useState(false);
- const [isInfoAlertOpen, setIsInfoAlertOpen] = useState(false);
- const [isWarningAlertOpen, setIsWarningAlertOpen] = useState(false);
- const [isDangerAlertOpen, setIsDangerAlertOpen] = useState(false);
-
- return (
- <>
- -
-
-
-
-
-
-
-
- setIsDefaultModalOpen(false)}
- className="max-w-lg"
- >
-
-
-
-
-
- setIsCenteredModalOpen(false)}
- className="max-w-md"
- >
-
-
-
-
-
- setIsFullScreenModalOpen(false)}
- isFullscreen={true}
- >
-
-
-
-
-
- setIsConfirmDialogOpen(false)}
- onConfirm={() => {
- alert("Action Confirmed!");
- setIsConfirmDialogOpen(false);
- }}
- title="Confirm Action"
- message="Are you sure you want to proceed with this action? It cannot be undone."
- confirmText="Proceed"
- variant="danger"
- />
-
-
-
- setIsSuccessAlertOpen(false)}
- title="Success!"
- message="Your operation was completed successfully."
- variant="success"
- />
- setIsInfoAlertOpen(false)}
- title="Information"
- message="This is an informational message for the user."
- variant="info"
- />
- setIsWarningAlertOpen(false)}
- title="Warning!"
- message="Please be careful, this action has consequences."
- variant="warning"
- />
- setIsDangerAlertOpen(false)}
- title="Danger!"
- message="This is a critical alert. Proceed with caution."
- variant="danger"
- />
-
-
-
- );
-}
-
diff --git a/frontend/src/pages/Settings/UiElements/Notifications.tsx b/frontend/src/pages/Settings/UiElements/Notifications.tsx
deleted file mode 100644
index c8f68983..00000000
--- a/frontend/src/pages/Settings/UiElements/Notifications.tsx
+++ /dev/null
@@ -1,278 +0,0 @@
-import React, { useState } from 'react';
-import Alert from '../../../components/ui/alert/Alert';
-import { useToast } from '../../../components/ui/toast/ToastContainer';
-import PageMeta from '../../../components/common/PageMeta';
-
-export default function Notifications() {
- const toast = useToast();
-
- // State for inline notifications (for demo purposes)
- const [showSuccess, setShowSuccess] = useState(true);
- const [showInfo, setShowInfo] = useState(true);
- const [showWarning, setShowWarning] = useState(true);
- const [showError, setShowError] = useState(true);
-
- return (
- <>
-
-
- Default Modal Title
-This is a default modal. It can contain any content.
-
-
-
-
-
-
- Centered Modal Title
-This modal is vertically and horizontally centered.
- -
-
- Full Screen Modal
-- This modal takes up the entire screen. Useful for complex forms - or detailed views. -
- -
-
-
-
-
-
-
- {/* Components Grid */}
-
-
- );
-}
diff --git a/frontend/src/pages/Settings/UiElements/Pagination.tsx b/frontend/src/pages/Settings/UiElements/Pagination.tsx
deleted file mode 100644
index e4403f2a..00000000
--- a/frontend/src/pages/Settings/UiElements/Pagination.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import { useState } from "react";
-import ComponentCard from "../../../components/common/ComponentCard";
-import PageMeta from "../../../components/common/PageMeta";
-import { Pagination } from "../../../components/ui/pagination/Pagination";
-
-export default function PaginationPage() {
- const [page1, setPage1] = useState(1);
- const [page2, setPage2] = useState(1);
- const [page3, setPage3] = useState(1);
-
- return (
- <>
-
- {/* Announcement Bar Card */}
-
-
-
-
- {/* Toast Notification Card */}
-
-
- - Announcement Bar -
-
-
-
-
-
- {/* Lightning bolt icon */}
-
-
-
-
-
-
- - New update! Available -
-- Enjoy improved functionality and enhancements. -
-
-
-
-
-
-
-
- {/* Success Notification Card */}
-
-
- - Toast Notification -
-
-
-
-
-
-
-
-
-
-
- - Toast notifications appear in the top right corner with margin from top. They have a thin light gray border around the entire perimeter. -
-
-
-
- {/* Info Notification Card */}
-
-
- - Success Notification -
-
- {showSuccess && (
-
-
-
- )}
- {!showSuccess && (
-
- )}
-
-
-
- {/* Warning Notification Card */}
-
-
- - Info Notification -
-
- {showInfo && (
-
-
-
- )}
- {!showInfo && (
-
- )}
-
-
-
- {/* Error Notification Card */}
-
-
- - Warning Notification -
-
- {showWarning && (
-
-
-
- )}
- {!showWarning && (
-
- )}
-
-
-
-
- - Error Notification -
-
- {showError && (
-
-
-
- )}
- {!showError && (
-
- )}
-
-
-
-
-
-
-
-
-
-
-
- );
-}
-
diff --git a/frontend/src/pages/Settings/UiElements/Popovers.tsx b/frontend/src/pages/Settings/UiElements/Popovers.tsx
deleted file mode 100644
index dd05b73c..00000000
--- a/frontend/src/pages/Settings/UiElements/Popovers.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import ComponentCard from "../../../components/common/ComponentCard";
-import PageMeta from "../../../components/common/PageMeta";
-
-export default function Popovers() {
- return (
- <>
-
-
-
-
-
- );
-}
-
diff --git a/frontend/src/pages/Settings/UiElements/PricingTable.tsx b/frontend/src/pages/Settings/UiElements/PricingTable.tsx
deleted file mode 100644
index 49ad1f97..00000000
--- a/frontend/src/pages/Settings/UiElements/PricingTable.tsx
+++ /dev/null
@@ -1,366 +0,0 @@
-import { useState, useEffect } from "react";
-import ComponentCard from "../../../components/common/ComponentCard";
-import PageMeta from "../../../components/common/PageMeta";
-import { PricingTable, PricingPlan } from "../../../components/ui/pricing-table";
-import PricingTable1 from "../../../components/ui/pricing-table/pricing-table-1";
-import { getPublicPlans } from "../../../services/billing.api";
-
-interface Plan {
- id: number;
- name: string;
- slug?: string;
- price: number | string;
- original_price?: number;
- annual_discount_percent?: number;
- is_featured?: boolean;
- max_sites?: number;
- max_users?: number;
- max_keywords?: number;
- max_clusters?: number;
- max_content_ideas?: number;
- max_content_words?: number;
- max_images_basic?: number;
- max_images_premium?: number;
- max_image_prompts?: number;
- included_credits?: number;
-}
-
-// Sample icons for variant 2
-const PersonIcon = () => (
-
-);
-
-const BriefcaseIcon = () => (
-
-);
-
-const StarIcon = () => (
-
-);
-
-const formatNumber = (num: number | undefined | null): string => {
- if (!num || num === 0) return '0';
- if (num >= 1000000) return `${(num / 1000000).toFixed(0)}M`;
- if (num >= 1000) return `${(num / 1000).toFixed(0)}K`;
- return num.toString();
-};
-
-const convertToPricingPlan = (plan: Plan): PricingPlan => {
- const monthlyPrice = typeof plan.price === 'number' ? plan.price : parseFloat(String(plan.price || 0));
- const features: string[] = [];
-
- if (plan.max_sites) features.push(`${plan.max_sites === 999999 ? 'Unlimited' : plan.max_sites} Site${plan.max_sites > 1 ? 's' : ''}`);
- if (plan.max_users) features.push(`${plan.max_users} Team User${plan.max_users > 1 ? 's' : ''}`);
- if (plan.included_credits) features.push(`${formatNumber(plan.included_credits)} Monthly Credits`);
- if (plan.max_content_words) features.push(`${formatNumber(plan.max_content_words)} Words/Month`);
- if (plan.max_clusters) features.push(`${plan.max_clusters} AI Keyword Clusters`);
- if (plan.max_content_ideas) features.push(`${formatNumber(plan.max_content_ideas)} Content Ideas`);
- if (plan.max_images_basic && plan.max_images_premium) {
- features.push(`${formatNumber(plan.max_images_basic)} Basic / ${formatNumber(plan.max_images_premium)} Premium Images`);
- }
- if (plan.max_image_prompts) features.push(`${formatNumber(plan.max_image_prompts)} Image Prompts`);
-
- // Custom descriptions based on plan name
- let description = `Perfect for ${plan.name.toLowerCase()} needs`;
- if (plan.name.toLowerCase().includes('free')) {
- description = 'Explore core features risk free';
- } else if (plan.name.toLowerCase().includes('starter')) {
- description = 'Launch SEO workflows for small teams';
- } else if (plan.name.toLowerCase().includes('growth')) {
- description = 'Scale content production with confidence';
- } else if (plan.name.toLowerCase().includes('scale')) {
- description = 'Enterprise power for high volume growth';
- }
-
- return {
- id: plan.id,
- slug: plan.slug,
- name: plan.name,
- monthlyPrice: monthlyPrice,
- price: monthlyPrice,
- originalPrice: plan.original_price ? (typeof plan.original_price === 'number' ? plan.original_price : parseFloat(String(plan.original_price))) : undefined,
- period: '/month',
- description: description,
- features,
- buttonText: monthlyPrice === 0 ? 'Free Trial' : 'Choose Plan',
- highlighted: plan.is_featured || false,
- annualDiscountPercent: plan.annual_discount_percent || 15,
- };
-};
-
-export default function PricingTablePage() {
- const [backendPlans, setBackendPlans] = useState- Popover component will be implemented here. -
-
-
- {loading && (
- console.log('Selected backend plan:', plan)}
- />
- )}
-
-
-
- console.log('Selected plan:', plan)}
- />
-
-
-
- console.log('Selected plan:', plan)}
- />
-
-
-
- console.log('Selected plan:', plan)}
- />
-
-
-
- );
-}
-
diff --git a/frontend/src/pages/Settings/UiElements/Progressbar.tsx b/frontend/src/pages/Settings/UiElements/Progressbar.tsx
deleted file mode 100644
index 4317a84f..00000000
--- a/frontend/src/pages/Settings/UiElements/Progressbar.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-import ComponentCard from "../../../components/common/ComponentCard";
-import PageMeta from "../../../components/common/PageMeta";
-import { ProgressBar } from "../../../components/ui/progress";
-
-export default function Progressbar() {
- return (
- <>
-
-
-
- )}
- {error && (
- Loading backend plans...
-
-
- )}
- {!loading && !error && backendPlans.length > 0 && (
- {error}
-
-
-
-
-
-
-
-
-
-
-
- );
-}
-
diff --git a/frontend/src/pages/Settings/UiElements/Ribbons.tsx b/frontend/src/pages/Settings/UiElements/Ribbons.tsx
deleted file mode 100644
index 326bc8e0..00000000
--- a/frontend/src/pages/Settings/UiElements/Ribbons.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-import ComponentCard from "../../../components/common/ComponentCard";
-import PageMeta from "../../../components/common/PageMeta";
-import { Ribbon } from "../../../components/ui/ribbon";
-
-export default function Ribbons() {
- return (
- <>
-
-
-
-
- - Small -
-
-
- - Medium -
-
-
- - Large -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
-}
-
diff --git a/frontend/src/pages/Settings/UiElements/Spinners.tsx b/frontend/src/pages/Settings/UiElements/Spinners.tsx
deleted file mode 100644
index 97a7e07b..00000000
--- a/frontend/src/pages/Settings/UiElements/Spinners.tsx
+++ /dev/null
@@ -1,74 +0,0 @@
-import ComponentCard from "../../../components/common/ComponentCard";
-import PageMeta from "../../../components/common/PageMeta";
-import { Spinner } from "../../../components/ui/spinner";
-
-export default function Spinners() {
- return (
- <>
-
-
-
-
- - Lorem ipsum dolor sit amet consectetur. Eget nulla suscipit - arcu rutrum amet vel nec fringilla vulputate. Sed aliquam - fringilla vulputate imperdiet arcu natoque purus ac nec - ultricies nulla ultrices. -
-
-
-
-
- - Lorem ipsum dolor sit amet consectetur. Eget nulla suscipit - arcu rutrum amet vel nec fringilla vulputate. Sed aliquam - fringilla vulputate imperdiet arcu natoque purus ac nec - ultricies nulla ultrices. -
-
-
-
-
-
-
-
-
-
-
- - Success ribbon example. -
-
-
-
-
- - Warning ribbon example. -
-
-
-
-
-
-
-
-
- );
-}
-
diff --git a/frontend/src/pages/Settings/UiElements/Tabs.tsx b/frontend/src/pages/Settings/UiElements/Tabs.tsx
deleted file mode 100644
index 6d98dc1b..00000000
--- a/frontend/src/pages/Settings/UiElements/Tabs.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-import { useState } from "react";
-import ComponentCard from "../../../components/common/ComponentCard";
-import PageMeta from "../../../components/common/PageMeta";
-import { Tabs, TabList, Tab, TabPanel } from "../../../components/ui/tabs";
-
-export default function TabsPage() {
- const [activeTab, setActiveTab] = useState("tab1");
-
- return (
- <>
-
-
-
-
- - Small -
-
-
- - Medium -
-
-
- - Large -
-
-
-
-
- - Primary -
-
-
- - Success -
-
-
- - Error -
-
-
- - Warning -
-
-
- - Info -
-
-
-
-
- setActiveTab("tab1")}
- >
- Tab 1
-
- setActiveTab("tab2")}
- >
- Tab 2
-
- setActiveTab("tab3")}
- >
- Tab 3
-
-
-
-
-
-
- );
-}
-
diff --git a/frontend/src/pages/Settings/UiElements/Tooltips.tsx b/frontend/src/pages/Settings/UiElements/Tooltips.tsx
deleted file mode 100644
index 005655f9..00000000
--- a/frontend/src/pages/Settings/UiElements/Tooltips.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import ComponentCard from "../../../components/common/ComponentCard";
-import PageMeta from "../../../components/common/PageMeta";
-import { Tooltip } from "../../../components/ui/tooltip";
-import Button from "../../../components/ui/button/Button";
-
-export default function Tooltips() {
- return (
- <>
-
-
-
-
-
-
-
-
- - Content for Tab 1 -
-- Content for Tab 2 -
-- Content for Tab 3 -
-
-
-
-
-
- );
-}
-
diff --git a/frontend/src/pages/Settings/UiElements/Videos.tsx b/frontend/src/pages/Settings/UiElements/Videos.tsx
deleted file mode 100644
index c8eadaf7..00000000
--- a/frontend/src/pages/Settings/UiElements/Videos.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import ComponentCard from "../../../components/common/ComponentCard";
-import PageMeta from "../../../components/common/PageMeta";
-import FourIsToThree from "../../../components/ui/videos/FourIsToThree";
-import OneIsToOne from "../../../components/ui/videos/OneIsToOne";
-import SixteenIsToNine from "../../../components/ui/videos/SixteenIsToNine";
-import TwentyOneIsToNine from "../../../components/ui/videos/TwentyOneIsToNine";
-
-export default function Videos() {
- return (
- <>
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
-}
diff --git a/frontend/src/pages/admin/AdminAPIMonitorPage.tsx b/frontend/src/pages/admin/AdminAPIMonitorPage.tsx
deleted file mode 100644
index 09e81b82..00000000
--- a/frontend/src/pages/admin/AdminAPIMonitorPage.tsx
+++ /dev/null
@@ -1,120 +0,0 @@
-/**
- * Admin API Monitor Page
- * Monitor API usage and performance
- */
-
-import { useState } from 'react';
-import { Activity, TrendingUp, Clock, AlertTriangle } from 'lucide-react';
-import { Card } from '../../components/ui/card';
-
-export default function AdminAPIMonitorPage() {
- const stats = {
- totalRequests: 125430,
- requestsPerMinute: 42,
- avgResponseTime: 234,
- errorRate: 0.12,
- };
-
- const topEndpoints = [
- { path: '/v1/billing/credit-balance/', requests: 15234, avgTime: 145 },
- { path: '/v1/sites/', requests: 12543, avgTime: 234 },
- { path: '/v1/ideas/', requests: 10234, avgTime: 456 },
- { path: '/v1/account/settings/', requests: 8234, avgTime: 123 },
- ];
-
- return (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
-}
diff --git a/frontend/src/pages/admin/AdminAccountLimitsPage.tsx b/frontend/src/pages/admin/AdminAccountLimitsPage.tsx
deleted file mode 100644
index 6b2d146c..00000000
--- a/frontend/src/pages/admin/AdminAccountLimitsPage.tsx
+++ /dev/null
@@ -1,130 +0,0 @@
-/**
- * Admin Account Limits Page
- * Configure account limits and quotas
- */
-
-import { useState } from 'react';
-import { Save, Shield, Loader2 } from 'lucide-react';
-import { Card } from '../../components/ui/card';
-
-export default function AdminAccountLimitsPage() {
- const [saving, setSaving] = useState(false);
- const [limits, setLimits] = useState({
- maxSites: 10,
- maxTeamMembers: 5,
- maxStorageGB: 50,
- maxAPICallsPerMonth: 100000,
- maxConcurrentJobs: 10,
- rateLimitPerMinute: 100,
- });
-
- const handleSave = async () => {
- setSaving(true);
- await new Promise(resolve => setTimeout(resolve, 1000));
- setSaving(false);
- };
-
- return (
-
-
-
-
-
-
-
- - Monitor API usage and performance -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {stats.totalRequests.toLocaleString()}
-
- Total Requests
-
-
-
-
-
-
-
- {stats.requestsPerMinute}
-
- Requests/Min
-
-
-
-
-
-
-
- {stats.avgResponseTime}ms
-
- Avg Response
-
-
-
-
-
-
-
- {stats.errorRate}%
-
- Error Rate
- Top Endpoints
-
-
-
-
-
- | Endpoint | -Requests | -Avg Time | -
|---|---|---|
| {endpoint.path} | -{endpoint.requests.toLocaleString()} | -{endpoint.avgTime}ms | -
-
- );
-}
diff --git a/frontend/src/pages/admin/AdminActivityLogsPage.tsx b/frontend/src/pages/admin/AdminActivityLogsPage.tsx
deleted file mode 100644
index 80bccd03..00000000
--- a/frontend/src/pages/admin/AdminActivityLogsPage.tsx
+++ /dev/null
@@ -1,164 +0,0 @@
-/**
- * Admin Activity Logs Page
- * View system activity and audit trail
- */
-
-import { useState, useEffect } from 'react';
-import { Search, Filter, Loader2, AlertCircle, Activity } from 'lucide-react';
-import { Card } from '../../components/ui/card';
-import Badge from '../../components/ui/badge/Badge';
-
-interface ActivityLog {
- id: number;
- user_email: string;
- account_name: string;
- action: string;
- resource_type: string;
- resource_id: string | null;
- ip_address: string;
- timestamp: string;
- details: string;
-}
-
-export default function AdminActivityLogsPage() {
- const [logs, setLogs] = useState
-
-
-
-
-
-
-
-
-
- - Configure default account limits and quotas -
-
-
-
-
-
-
-
- Resource Limits
-
-
-
-
- setLimits({ ...limits, maxSites: parseInt(e.target.value) })}
- className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 dark:bg-gray-800"
- />
-
-
-
- setLimits({ ...limits, maxTeamMembers: parseInt(e.target.value) })}
- className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 dark:bg-gray-800"
- />
-
-
-
- setLimits({ ...limits, maxStorageGB: parseInt(e.target.value) })}
- className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 dark:bg-gray-800"
- />
-
- API & Performance Limits
-
-
-
-
- setLimits({ ...limits, maxAPICallsPerMonth: parseInt(e.target.value) })}
- className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 dark:bg-gray-800"
- />
-
-
-
- setLimits({ ...limits, maxConcurrentJobs: parseInt(e.target.value) })}
- className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 dark:bg-gray-800"
- />
-
-
-
- setLimits({ ...limits, rateLimitPerMinute: parseInt(e.target.value) })}
- className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 dark:bg-gray-800"
- />
-
-
-
- );
- }
-
- return (
-
-
-
-
- );
-}
diff --git a/frontend/src/pages/admin/AdminAllAccountsPage.tsx b/frontend/src/pages/admin/AdminAllAccountsPage.tsx
deleted file mode 100644
index b9739df9..00000000
--- a/frontend/src/pages/admin/AdminAllAccountsPage.tsx
+++ /dev/null
@@ -1,219 +0,0 @@
-/**
- * Admin All Accounts Page
- * List and manage all accounts in the system
- */
-
-import { useState, useEffect } from 'react';
-import { useNavigate } from 'react-router-dom';
-import { Search, Filter, Loader2, AlertCircle } from 'lucide-react';
-import { Card } from '../../components/ui/card';
-import Badge from '../../components/ui/badge/Badge';
-import { fetchAPI } from '../../services/api';
-
-interface Account {
- id: number;
- name: string;
- slug: string;
- owner_email: string;
- status: string;
- credit_balance: number;
- plan_name: string;
- created_at: string;
-}
-
-export default function AdminAllAccountsPage() {
- const [accounts, setAccounts] = useState
-
-
-
-
-
-
- - System activity and audit trail -
-
-
-
-
-
-
-
-
-
-
-
-
- | Timestamp | -User | -Account | -Action | -Resource | -Details | -IP Address | -
|---|---|---|---|---|---|---|
| No activity logs found | -||||||
| - {new Date(log.timestamp).toLocaleString()} - | -{log.user_email} | -{log.account_name} | -
- |
- {log.resource_type} | -{log.details} | -{log.ip_address} | -
-
- );
- }
-
- return (
-
-
-
-
- {/* Summary Stats */}
-
- );
-}
diff --git a/frontend/src/pages/admin/AdminAllInvoicesPage.tsx b/frontend/src/pages/admin/AdminAllInvoicesPage.tsx
deleted file mode 100644
index 23d5076f..00000000
--- a/frontend/src/pages/admin/AdminAllInvoicesPage.tsx
+++ /dev/null
@@ -1,167 +0,0 @@
-/**
- * Admin All Invoices Page
- * View and manage all system invoices
- */
-
-import { useState, useEffect } from 'react';
-import { Search, Filter, Loader2, AlertCircle, Download } from 'lucide-react';
-import { Card } from '../../components/ui/card';
-import Badge from '../../components/ui/badge/Badge';
-import { getAdminInvoices, type Invoice } from '../../services/billing.api';
-
-export default function AdminAllInvoicesPage() {
- const [invoices, setInvoices] = useState
-
-
- {error && (
- All Accounts
-- Manage all accounts in the system -
-
-
- )}
-
- {/* Filters */}
- {error}
-
-
-
- {/* Accounts Table */}
-
-
-
-
-
-
-
-
-
- | - Account - | -- Owner - | -- Plan - | -- Credits - | -- Status - | -- Created - | -- Actions - | -
|---|---|---|---|---|---|---|
| - No accounts found - | -||||||
|
- {account.name}
- {account.slug}
- |
- - {account.owner_email} - | -- {account.plan_name || 'Free'} - | -- {account.credit_balance?.toLocaleString() || 0} - | -
- |
- - {new Date(account.created_at).toLocaleDateString()} - | -- - | -
-
-
-
-
-
-
-
-
-
- Total Accounts
- {accounts.length}
- Active
-
- {accounts.filter(a => a.status === 'active').length}
-
- Trial
-
- {accounts.filter(a => a.status === 'trial').length}
-
- Suspended
-
- {accounts.filter(a => a.status === 'suspended').length}
-
-
-
- );
- }
-
- return (
-
-
-
-
- );
-}
diff --git a/frontend/src/pages/admin/AdminAllPaymentsPage.tsx b/frontend/src/pages/admin/AdminAllPaymentsPage.tsx
deleted file mode 100644
index fa793df0..00000000
--- a/frontend/src/pages/admin/AdminAllPaymentsPage.tsx
+++ /dev/null
@@ -1,753 +0,0 @@
-/**
- * Admin Payments Page
- * Tabs: All Payments, Pending Approvals (approve/reject), Payment Methods (country-level configs + per-account methods)
- */
-
-import { useEffect, useState } from 'react';
-import { Filter, Loader2, AlertCircle, Check, X, RefreshCw, Plus, Trash, Star } from 'lucide-react';
-import { Card } from '../../components/ui/card';
-import Badge from '../../components/ui/badge/Badge';
-import {
- getAdminPayments,
- getPendingPayments,
- approvePayment,
- rejectPayment,
- getAdminPaymentMethodConfigs,
- createAdminPaymentMethodConfig,
- updateAdminPaymentMethodConfig,
- deleteAdminPaymentMethodConfig,
- getAdminAccountPaymentMethods,
- createAdminAccountPaymentMethod,
- updateAdminAccountPaymentMethod,
- deleteAdminAccountPaymentMethod,
- setAdminDefaultAccountPaymentMethod,
- getAdminUsers,
- type Payment,
- type PaymentMethod,
- type PaymentMethodConfig,
- type AdminAccountPaymentMethod,
- type AdminUser,
-} from '../../services/billing.api';
-
-type AdminPayment = Payment & { account_name?: string };
-type TabType = 'all' | 'pending' | 'methods';
-
-export default function AdminAllPaymentsPage() {
- const [payments, setPayments] = useState
-
-
- {error && (
- All Invoices
-- View and manage all system invoices -
-
-
- )}
-
- {/* Filters */}
- {error}
-
-
-
- {/* Invoices Table */}
-
-
-
-
-
-
-
-
-
- | - Invoice # - | -- Account - | -- Date - | -- Amount - | -- Status - | -- Actions - | -
|---|---|---|---|---|---|
| - No invoices found - | -|||||
| - {invoice.invoice_number} - | -- {invoice.account_name || '—'} - | -- {new Date(invoice.created_at).toLocaleDateString()} - | -- ${invoice.total_amount} - | -
- |
- - - | -
-
- );
- }
-
- const renderPaymentsTable = (rows: AdminPayment[]) => (
-
-
-
-
-
- | Account | -Invoice | -Amount | -Method | -Status | -Date | -Actions | -
|---|---|---|---|---|---|---|
| No payments found | -||||||
| {payment.account_name} | -- {payment.invoice_number || payment.invoice_id || '—'} - | -{payment.currency} {payment.amount} | -{payment.payment_method.replace('_', ' ')} | -
- |
- - {new Date(payment.created_at).toLocaleDateString()} - | -- - | -
-
-
-
-
- | Account | -Invoice | -Amount | -Method | -Reference | -Actions | -
|---|---|---|---|---|---|
| No pending payments | -|||||
| {payment.account_name} | -- {payment.invoice_number || payment.invoice_id || '—'} - | -{payment.currency} {payment.amount} | -{payment.payment_method.replace('_', ' ')} | -- {payment.transaction_reference || '—'} - | -
-
-
- setRejectNotes({ ...rejectNotes, [payment.id as number]: e.target.value })}
- />
-
-
- |
-
-
- );
-}
diff --git a/frontend/src/pages/admin/AdminAllUsersPage.tsx b/frontend/src/pages/admin/AdminAllUsersPage.tsx
deleted file mode 100644
index 859b86aa..00000000
--- a/frontend/src/pages/admin/AdminAllUsersPage.tsx
+++ /dev/null
@@ -1,217 +0,0 @@
-/**
- * Admin All Users Page
- * View and manage all users across all accounts
- */
-
-import { useState, useEffect } from 'react';
-import { Search, Filter, Loader2, AlertCircle } from 'lucide-react';
-import { Card } from '../../components/ui/card';
-import Badge from '../../components/ui/badge/Badge';
-import { fetchAPI } from '../../services/api';
-
-interface User {
- id: number;
- email: string;
- first_name: string;
- last_name: string;
- account_name: string;
- role: string;
- is_active: boolean;
- last_login: string | null;
- date_joined: string;
-}
-
-export default function AdminAllUsersPage() {
- const [users, setUsers] = useState
-
-
- {error && (
-
-
-
-
-
- Payments
-- Admin-only billing management -
-
-
- )}
-
- {error}
-
-
-
- {activeTab === 'all' && renderPaymentsTable(filteredPayments)}
- {activeTab === 'pending' && renderPendingTable()}
- {activeTab === 'methods' && (
-
-
-
-
-
- {activeTab === 'all' && (
-
-
- )}
-
- {/* Payment Method Configs (country-level) */}
-
-
-
-
-
-
- {/* Account Payment Methods (associate existing configs only) */}
-
-
-
- )}
- Payment Method Configs (country-level)
-
- setNewConfig({ ...newConfig, country_code: e.target.value })}
- />
-
- setNewConfig({ ...newConfig, display_name: e.target.value })}
- />
- setNewConfig({ ...newConfig, instructions: e.target.value })}
- />
- setNewConfig({ ...newConfig, sort_order: Number(e.target.value) })}
- />
-
-
- {editingConfigId && (
-
- )}
-
-
-
-
-
-
- | Country | -Name | -Type | -Enabled | -Instructions | -Actions | -
|---|---|---|---|---|---|
| No payment method configs | -|||||
| {cfg.country_code} | -{cfg.display_name} | -{cfg.payment_method.replace('_', ' ')} | -- - - | -- {cfg.instructions || '—'} - | -- - | -
-
-
- Account Payment Methods (association)
-
-
-
-
-
-
-
-
-
- - Only one payment method per account; assigning replaces existing. -
-
-
-
-
-
- | Account | -Name | -Type | -Enabled | -Default | -Instructions | -Actions | -
|---|---|---|---|---|---|---|
| No account payment methods | -||||||
| {m.account} | -{m.display_name} | -{m.type.replace('_', ' ')} | -{m.is_enabled ? 'Yes' : 'No'} | -{m.is_default ? |
- - {m.instructions || '—'} - | -- {!m.is_default && ( - - )} - - | -
-
- );
- }
-
- return (
-
-
-
-
- {/* Summary Stats */}
-
- );
-}
diff --git a/frontend/src/pages/admin/AdminCreditPackagesPage.tsx b/frontend/src/pages/admin/AdminCreditPackagesPage.tsx
deleted file mode 100644
index e5d68702..00000000
--- a/frontend/src/pages/admin/AdminCreditPackagesPage.tsx
+++ /dev/null
@@ -1,319 +0,0 @@
-/**
- * Admin Credit Packages Page
- * Manage credit packages available for purchase
- */
-
-import { useState, useEffect } from 'react';
-import { Plus, Loader2, AlertCircle, Edit, Trash } from 'lucide-react';
-import { Card } from '../../components/ui/card';
-import Badge from '../../components/ui/badge/Badge';
-import { useToast } from '../../components/ui/toast/ToastContainer';
-import {
- getAdminCreditPackages,
- createAdminCreditPackage,
- updateAdminCreditPackage,
- deleteAdminCreditPackage,
- type CreditPackage,
-} from '../../services/billing.api';
-
-export default function AdminCreditPackagesPage() {
- const toast = useToast();
- const [packages, setPackages] = useState
-
-
- {error && (
- All Users
-- View and manage all users across all accounts -
-
-
- )}
-
- {/* Filters */}
- {error}
-
-
-
- {/* Users Table */}
-
-
-
-
-
-
-
-
-
- | - User - | -- Account - | -- Role - | -- Status - | -- Last Login - | -- Joined - | -- Actions - | -
|---|---|---|---|---|---|---|
| - No users found - | -||||||
|
-
- {user.first_name || user.last_name
- ? `${user.first_name} ${user.last_name}`.trim()
- : user.email}
-
- {user.email}
- |
- - {user.account_name} - | -
- |
-
- |
- - {user.last_login - ? new Date(user.last_login).toLocaleDateString() - : 'Never'} - | -- {new Date(user.date_joined).toLocaleDateString()} - | -- - | -
-
-
-
-
-
-
-
-
-
- Total Users
- {users.length}
- Active
-
- {users.filter(u => u.is_active).length}
-
- Owners
-
- {users.filter(u => u.role === 'owner').length}
-
- Admins
-
- {users.filter(u => u.role === 'admin').length}
-
-
-
- );
- }
-
- return (
-
-
-
-
-
- {/* Form */}
-
-
- Credit Packages
-- Manage credit packages available for purchase -
-
-
-
-
- {editingId && (
-
- )}
- {editingId ? 'Edit Package' : 'Add Package'}
-
-
-
- setForm((p) => ({ ...p, name: e.target.value }))}
- placeholder="Starter Pack"
- />
-
-
-
- setForm((p) => ({ ...p, credits: e.target.value }))}
- />
-
-
-
- setForm((p) => ({ ...p, price: e.target.value }))}
- placeholder="99.00"
- />
-
-
-
- setForm((p) => ({ ...p, discount_percentage: e.target.value }))}
- />
-
-
-
- setForm((p) => ({ ...p, sort_order: e.target.value }))}
- placeholder="e.g., 1"
- />
-
-
-
-