Admin Dashboard (Phenom Global Command Center)

Detailed documentation for the Phenom Global Command Center admin dashboard, featuring UAP monitoring, map views, and team management capabilities.

Overview

The Phenom Global Command Center is a comprehensive admin dashboard built to manage and monitor UAP (Unidentified Anomalous Phenomena) data globally. Located at admin_sandbox/phenom/ in the phenom-backend repository, this is a modern React application providing real-time visualization and management capabilities.

Current Version: v1.3.0 (April 2025)

Access

URL: https://nest.thephenom.app/ Authentication: Cloudflare Zero Trust with GitHub OAuth Required Access: phenom-earth organization, INT team membership

Technology Stack

Frontend Framework

  • React 19 - Latest React with concurrent features
  • TypeScript - Type-safe development
  • Vite - Lightning-fast build tool and dev server
  • TanStack Router - Type-safe routing with code-splitting

UI & Styling

  • Shadcn UI - High-quality component library
  • Tailwind CSS - Utility-first CSS framework
  • Radix UI - Accessible component primitives
  • Lucide React - Beautiful icon library
  • next-themes - Dark/light mode support

State & Data Management

  • Zustand - Lightweight state management
  • TanStack React Query - Async state and caching
  • Axios - HTTP client for API requests
  • Firebase - Authentication and data storage

Development Tools

  • ESLint - Code linting
  • cz-git - Conventional commits
  • PostCSS - CSS processing

Key Features

1. Dashboard Overview

The main dashboard provides:

  • System Status: Real-time health monitoring
  • Quick Stats: Key metrics and analytics
  • Recent Activity: Latest phenomenon events
  • Task Overview: Pending and completed tasks

2. Map View

Interactive Global Map featuring:

  • Real-time Aircraft Tracking: Integration with OpenSky Network API
  • Phenomenon Locations: Pinpointed UAP events on map
  • Geofencing: Define areas of interest
  • Layer Control: Toggle different data layers
  • Search & Filter: Find specific events or locations

Technical Details:

  • Provider: Google Maps API
  • Data Source: OpenSky Network (aircraft), Firebase Firestore (phenomena)
  • Proxy: Cloudflare Functions for OpenSky API
  • Updates: Real-time data streaming

3. Globe View

3D Earth Visualization with:

  • Interactive 3D Globe: Rotate and zoom
  • Phenomenon Markers: Global UAP event visualization
  • Location Data: Timestamp and coordinates
  • Visual Effects: Atmospheric rendering

4. User Management

Comprehensive User Administration:

  • User List: View all team members
  • CRUD Operations: Create, read, update, delete users
  • Role Assignment: Manage user permissions
  • Activity Tracking: Monitor user actions
  • Search & Filter: Quick user lookup

User Fields:

  • Name, Email, Phone
  • Role (admin, editor, viewer, etc.)
  • Status (active, inactive, suspended)
  • Created/Updated timestamps
  • Activity logs

5. Task Management

Built-in Task System:

  • Task Creation: Assign tasks to team members
  • Status Tracking: Todo, In Progress, Completed
  • Priority Levels: High, Medium, Low
  • Due Dates: Deadline management
  • Comments: Task discussion threads

6. Settings & Configuration

Application Settings:

Appearance:

  • Theme: Light, Dark, System
  • Font Size: Adjust text scaling
  • Color Scheme: Customize accent colors

Profile:

  • Personal Information: Name, email, bio
  • Avatar: Profile picture upload
  • Preferences: Language, timezone

Account:

  • Security: Password change, 2FA
  • Privacy: Data visibility settings
  • Notifications: Email and push preferences

Command Palette (keyboard shortcut):

  • Universal Search: Find users, tasks, phenomena
  • Quick Actions: Navigate anywhere instantly
  • Keyboard Navigation: Full keyboard support
  • Recent Searches: Quick access to history

Application Architecture

Directory Structure

admin_sandbox/phenom/
├── src/
│   ├── features/           # Feature modules
│   │   ├── auth/          # Authentication
│   │   ├── dashboard/     # Main dashboard
│   │   ├── settings/      # Settings pages
│   │   ├── tasks/         # Task management
│   │   └── users/         # User management
│   ├── components/
│   │   ├── layout/        # App layout components
│   │   ├── search/        # Global search
│   │   └── ui/            # Shadcn UI components
│   ├── lib/
│   │   ├── firebase.ts    # Firebase configuration
│   │   └── utils.ts       # Utility functions
│   ├── stores/
│   │   └── auth-store.ts  # Zustand auth store
│   ├── routes/            # TanStack router config
│   └── main.tsx           # App entry point
├── functions/
│   └── opensky/           # Cloudflare Functions
├── public/                # Static assets
└── package.json           # Dependencies

Routing Structure

/                          # Dashboard home
├── /dashboard            # Main dashboard view
├── /users                # User management
│   ├── /users/new       # Create new user
│   └── /users/:id/edit  # Edit user
├── /tasks                # Task management
│   ├── /tasks/new       # Create task
│   └── /tasks/:id       # Task details
├── /settings             # Settings hub
│   ├── /settings/profile
│   ├── /settings/account
│   └── /settings/appearance
└── /auth                 # Authentication flows
    ├── /auth/login
    └── /auth/register

Firebase Integration

Configuration

Project Details:

  • Project ID: phenom-7ee1a
  • Auth Domain: phenom-7ee1a.firebaseapp.com
  • Database URL: phenom-7ee1a.firebaseio.com
  • Storage Bucket: phenom-7ee1a.appspot.com

Data Structure

Firestore Collections:

phenomenons - UAP event data:

{
  id: string,
  timestamp: number,
  location: {
    lat: number,
    lng: number
  },
  shoots: [
    {
      id: string,
      timestamp: number,
      metadata: object
    }
  ],
  createdAt: timestamp,
  updatedAt: timestamp
}

users - User profiles:

{
  uid: string,
  email: string,
  displayName: string,
  role: string[],
  createdAt: timestamp,
  lastLogin: timestamp
}

OpenSky Network Integration

Purpose

Real-time aircraft tracking to correlate UAP sightings with known aircraft positions.

Implementation

Cloudflare Function Proxy (functions/opensky/[[path]].js):

// Proxies requests to OpenSky API with:
- Token caching (memory + Cloudflare KV)
- CORS handling
- Automatic token refresh
- Request forwarding

API Client:

  • Client ID: jonathan_at_phenom-api-client
  • Endpoint: https://opensky-network.org/api/
  • Features: Live aircraft positions, flight data, historical tracking

Usage in Dashboard

// Fetch aircraft data via proxy
const response = await fetch('/opensky/states/all')
const aircraftData = await response.json()

// Display on map
aircraftData.states.forEach(aircraft => {
  // Plot aircraft position on map
  addAircraftMarker(aircraft)
})

Authentication Flow

Firebase Authentication

  1. User visits nest.thephenom.app
  2. Cloudflare Access Challenge
    • Checks GitHub organization membership
    • Verifies INT team membership
    • Redirects to GitHub OAuth if not authenticated
  3. Firebase Sign-In
    • User authenticates with Firebase
    • Session token stored in Zustand store
    • Cookie set for persistence
  4. Application Access
    • Protected routes check auth state
    • API requests include auth token
    • Real-time listeners established

Session Management

Auth Store (Zustand):

interface AuthStore {
  currentUser: User | null
  isAuthenticated: boolean
  login: (credentials) => Promise<void>
  logout: () => void
  updateProfile: (data) => Promise<void>
}

Token Storage:

  • Cookie: thisisjustarandomstring
  • Expiration: Session-based
  • Refresh: Automatic on expiry

Development Setup

Prerequisites

Node.js 18+
npm or pnpm
Firebase CLI (optional)

Installation

cd admin_sandbox/phenom
npm install

Environment Variables

# Create .env.local
VITE_FIREBASE_API_KEY=your_key
VITE_FIREBASE_AUTH_DOMAIN=phenom-7ee1a.firebaseapp.com
VITE_FIREBASE_PROJECT_ID=phenom-7ee1a
VITE_FIREBASE_STORAGE_BUCKET=phenom-7ee1a.appspot.com
VITE_FIREBASE_MESSAGING_SENDER_ID=your_id
VITE_FIREBASE_APP_ID=your_app_id

Development Server

npm run dev
# Opens at http://localhost:5173

Build for Production

npm run build
# Output: dist/

Deployment

Build Configuration

Netlify (netlify.toml):

[build]
  command = "npm run build"
  publish = "dist"
  functions = "functions"

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

Cloudflare Functions

Functions deployed alongside static assets:

  • Automatic deployment with Netlify/Cloudflare Pages
  • Cloudflare KV for token caching
  • Worker bindings configured in dashboard

Security Considerations

Access Control

  • Zero Trust: Cloudflare Access at perimeter
  • Firebase Auth: Application-level authentication
  • Role-Based: Granular permissions per feature
  • Audit Logs: All actions tracked

Data Security

  • Encryption: TLS/SSL in transit
  • Firestore Rules: Server-side validation
  • API Tokens: Secured in Cloudflare KV
  • No Secrets in Code: Environment variables only

Known Limitations

  • OAuth Incomplete: Phenomenon deletion disabled
  • Local URLs: Development configured for localhost
  • Token Refresh: Manual intervention may be needed

Performance Optimizations

Code Splitting

  • Route-based: Lazy loading for each page
  • Component-level: Dynamic imports where needed
  • Bundle Size: Optimized with Vite

Caching Strategy

  • OpenSky Data: Cached in Cloudflare KV (configurable TTL)
  • Firebase: Client-side persistence enabled
  • Static Assets: CDN caching via Cloudflare

Monitoring

  • React Query DevTools: Debug data fetching
  • Firebase Analytics: Usage tracking
  • Error Reporting: Client-side error logs

Troubleshooting

Common Issues

“Authentication Failed”

  • Verify GitHub organization membership
  • Check INT team membership in phenom-earth org
  • Clear browser cookies and try again

“Map Not Loading”

  • Check Google Maps API key validity
  • Verify API quotas not exceeded
  • Check browser console for errors

“Aircraft Data Not Updating”

  • Verify OpenSky API credentials
  • Check Cloudflare Function logs
  • Confirm KV namespace binding

“Firebase Connection Error”

  • Verify Firebase project settings
  • Check environment variables
  • Ensure Firebase project is active

Future Enhancements

Planned Features:

  • Enhanced OAuth implementation for secure deletions
  • Real-time collaboration features
  • Advanced data analytics dashboard
  • Mobile app integration
  • Multi-language support
  • Webhook integrations

Support & Resources

Documentation:

Internal Resources:

For technical support, contact the development team or file an issue in the GitHub repository.