Admin Dashboard & Developer Console Navigation

This document outlines the navigation structure and component hierarchy for the Plings Admin Dashboard and Developer Console interfaces.

Access Control

  • Plings Admin Dashboard (/plings-admin) - Requires plings_admin or system_owner role
  • Developer Console (/dev) - Requires plings_developer or system_owner role
  • Super Admin Console (/super) - Requires system_owner role only

🔧 Plings Admin Dashboard (/plings-admin)

Primary Component: AdminDashboard.tsx Target Users: Plings business operations administrators Purpose: Global business operations management across all organizations

/plings-admin
├── Dashboard (Overview & KPIs)
├── Class Management
│   ├── Object Class Hierarchy
│   ├── Create/Edit Classes
│   └── Class Templates
├── Billing Center
│   ├── Cross-Org Invoicing
│   ├── Payment Processing
│   ├── Usage Analytics
│   └── Credit Management
├── Transaction Resolution
│   ├── Ownership Disputes
│   ├── Sale/Rent Conflicts
│   ├── Mediation Tools
│   └── Legal Escalation
├── Wallet Management
│   ├── HD Wallet Spaces
│   ├── Tag Allocation
│   ├── Crypto Integration
│   └── Security Management
├── User Administration
│   ├── Cross-Org User Search
│   ├── Account Management
│   ├── Permission Assignment
│   └── Account Recovery
├── Organization Control
│   ├── Org Creation/Suspension
│   ├── Org Settings Management
│   ├── Compliance Monitoring
│   └── Performance Metrics
├── Audit & Compliance
│   ├── Global Audit Logs
│   ├── Compliance Reports
│   ├── Security Monitoring
│   └── Data Export
├── Content Moderation
│   ├── User-Generated Content
│   ├── Image/Description Review
│   ├── Flagged Content Queue
│   └── Moderation Actions
├── Support Center
│   ├── Escalated Tickets
│   ├── Customer Communication
│   ├── Issue Tracking
│   └── Resolution Workflows
├── Marketplace Control
│   ├── Listing Management
│   ├── Dispute Resolution
│   ├── Vendor Management
│   └── Transaction Monitoring
└── Analytics Dashboard
    ├── Business Metrics
    ├── Usage Statistics
    ├── Financial Reports
    └── Trend Analysis

Key Components

Component Purpose Required Abilities
ClassHierarchyManager.tsx Manage global object class hierarchy ADMIN_CLASS_MANAGEMENT
CrossOrgBillingCenter.tsx Handle multi-org invoicing ADMIN_BILLING_MANAGEMENT
TransactionMediator.tsx Resolve ownership/sales disputes ADMIN_TRANSACTION_RESOLVE
HDWalletManager.tsx Manage cryptocurrency wallets for tags ADMIN_WALLET_MANAGEMENT
GlobalUserAdmin.tsx Cross-organization user management ADMIN_USER_MANAGEMENT
OrganizationController.tsx Create/manage organizations ADMIN_ORG_MANAGEMENT
GlobalAuditViewer.tsx System-wide audit log access ADMIN_AUDIT_ACCESS
ContentModerationQueue.tsx Review flagged content ADMIN_CONTENT_MODERATION
SupportEscalationCenter.tsx Handle customer support ADMIN_SUPPORT_ESCALATION
MarketplaceController.tsx Manage marketplace operations ADMIN_MARKETPLACE_CONTROL
BusinessAnalytics.tsx Analytics and reporting ADMIN_ANALYTICS_ACCESS

💻 Developer Console (/dev)

Primary Component: DeveloperConsole.tsx Target Users: Plings technical developers Purpose: Technical debugging, testing, and system diagnostics

/dev
├── Dashboard (System Status & Quick Actions)
├── Backend Tools
│   ├── Environment Switcher
│   ├── Connection Testing
│   └── Configuration Editor
├── API Testing
│   ├── GraphQL Playground
│   ├── Request Builder
│   ├── Response Inspector
│   └── Query Performance
├── Debug Panels
│   ├── Real-Time State Inspector
│   ├── Component Tree Viewer
│   ├── Redux/Context State
│   └── Error Boundary Monitor
├── Database Tools
│   ├── Schema Explorer
│   ├── Query Builder
│   ├── Data Inspector
│   └── Migration Status
├── Performance Monitor
│   ├── Query Performance
│   ├── Bundle Analysis
│   ├── Memory Usage
│   └── Load Time Metrics
├── Feature Flags
│   ├── Flag Management
│   ├── A/B Testing
│   ├── Environment Config
│   └── Rollout Control
├── System Diagnostics
│   ├── Health Checks
│   ├── Service Status
│   ├── Error Monitoring
│   └── Alert Management
├── Log Viewer
│   ├── Real-Time Logs
│   ├── Log Filtering
│   ├── Error Aggregation
│   └── Export Tools
└── Deployment Tools
    ├── Build Status
    ├── Deployment History
    ├── Rollback Tools
    └── Environment Sync

Key Components

Component Purpose Required Abilities
BackendSwitcher.tsx Switch between localhost/production DEV_BACKEND_SWITCH
GraphQLPlayground.tsx Interactive API testing DEV_API_TESTING
DebugStateInspector.tsx Real-time application state DEV_DEBUG_PANEL
DatabaseExplorer.tsx Database schema and data inspection DEV_DATABASE_INSPECT
PerformanceProfiler.tsx Performance monitoring tools DEV_PERFORMANCE_MONITOR
FeatureFlagManager.tsx Control feature flags DEV_FEATURE_FLAGS
SystemHealthMonitor.tsx System diagnostics and health DEV_SYSTEM_DIAGNOSTICS
LogStreamViewer.tsx Real-time log viewing DEV_LOG_ACCESS
DeploymentController.tsx Deployment and CI/CD tools DEV_DEPLOYMENT_TOOLS

🏛️ Super Admin Console (/super)

Primary Component: SuperAdminConsole.tsx Target Users: System owners only (ultimate access) Purpose: Ultimate system control and emergency operations

/super
├── System Overview
├── Emergency Controls
├── Global Configuration
├── Security Center
├── System Maintenance
└── All Admin + Dev Tools

Note: System Owner has access to ALL abilities from both Admin and Developer consoles, plus additional super-admin capabilities.

Implementation Guidelines

Route Protection

// Protected route wrapper
<ProtectedRoute requiredAbility="ADMIN_CLASS_MANAGEMENT">
  <ClassHierarchyManager />
</ProtectedRoute>

// Multiple ability check
<ProtectedRoute requiredAbilities={["DEV_API_TESTING", "DEV_DEBUG_PANEL"]}>
  <DeveloperTools />
</ProtectedRoute>

// Admin dashboard navigation
const AdminNavigation = () => {
  const { canManageClasses, canResolveBilling } = useUserPermissions();
  
  return (
    <NavigationMenu>
      {canManageClasses && <NavItem href="/plings-admin/classes">Classes</NavItem>}
      {canResolveBilling && <NavItem href="/plings-admin/billing">Billing</NavItem>}
    </NavigationMenu>
  );
};

Access Control Integration

// Page-level access control
const AdminDashboard = () => {
  const { hasAdminAccess } = useUserPermissions();
  
  if (!hasAdminAccess) {
    return <AccessDenied />;
  }
  
  return <AdminDashboardContent />;
};

Role-Based UI Customization

// Contextual interface based on role
const DashboardHeader = () => {
  const { isPlingsAdmin, isPlingsDeveloper, isSystemOwner } = useUserPermissions();
  
  return (
    <Header>
      {isPlingsAdmin && <AdminQuickActions />}
      {isPlingsDeveloper && <DevQuickActions />}
      {isSystemOwner && <SuperAdminQuickActions />}
    </Header>
  );
};

Security Considerations

Ability-Based Access

  • All navigation items check specific abilities, not just roles
  • Missing abilities hide navigation items gracefully
  • Backend APIs enforce the same ability checks

Audit Trail

  • All admin actions logged with user identity
  • Developer actions logged for security monitoring
  • Sensitive operations require additional confirmation

Environment Safety

  • Production systems limit developer access
  • Admin actions have confirmation dialogs
  • Emergency controls require multi-factor authentication

Role Separation

  • Admins cannot access developer tools
  • Developers cannot access business admin functions
  • Only System Owner has cross-domain access

This navigation structure ensures clear separation of concerns while providing comprehensive tools for both business operations and technical development.