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

Copy .env.example to .env and fill in the values:

# Firebase Configuration
VITE_FIREBASE_API_KEY=
VITE_FIREBASE_AUTH_DOMAIN=phenom-7ee1a.firebaseapp.com
VITE_FIREBASE_DATABASE_URL=https://phenom-7ee1a.firebaseio.com
VITE_FIREBASE_PROJECT_ID=phenom-7ee1a
VITE_FIREBASE_STORAGE_BUCKET=phenom-7ee1a.appspot.com
VITE_FIREBASE_MESSAGING_SENDER_ID=
VITE_FIREBASE_APP_ID=
VITE_FIREBASE_MEASUREMENT_ID=

# Firebase Auth (N.E.S.T. dashboard service account)
VITE_FIREBASE_AUTH_EMAIL=
VITE_FIREBASE_AUTH_PASSWORD=

Security Note: Never commit .env files. The .gitignore excludes them. Get credentials from the team lead or Firebase Console. See GitHub Issue #54 for credential rotation status.

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: All credentials loaded from VITE_FIREBASE_* environment variables (commit 01db217, March 2026)

Credential Management

Firebase credentials (API key, auth email/password) are stored in .env files, never in source code.

For new developers:

  1. Copy admin_sandbox/phenom/.env.example to .env
  2. Request credential values from the team lead
  3. Never commit .env — it is gitignored

Credential rotation: If credentials are suspected compromised, rotate the Firebase auth password in Firebase Console → Authentication, then update .env on all environments.

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

User Content Curation (In Development)

GitHub Issues: #55 (lists + sharing), #56 (mobile) Design: docs/plans/2026-03-13-user-content-lists-design.md

Overview

Authenticated users can create named curated lists of phenom/drop content and share them with other CF Access team members.

Data Layer

  • Storage: Cloudflare D1 (SQL database)
  • API: Cloudflare Pages Functions (~15 REST endpoints)
  • Auth: CF Access JWT cookie validated on every request
  • Schema: users, lists, list_items, list_shares, item_shares

User Features

  • Create lists: Named collections (e.g., “East Coast Events”, “High Confidence”)
  • Add items: From either phenom sightings or drop submissions
  • Share lists: With other team members (read or write permission)
  • Share items: Quick “send this to someone” with optional note
  • Notifications: Badge on profile avatar for unseen shares

Profile Hub

The lower-left profile dropdown shows:

  • User identity (from Cloudflare Access GitHub OAuth)
  • My Lists with item counts
  • Shared With Me (items and lists from other users)
  • Create New List button

Mobile Responsive Map

On screens below 768px, the event sidebar is replaced with a draggable bottom sheet:

  • Collapsed: handle bar showing event count
  • Peek: 2-3 items visible, map mostly visible
  • Expanded: full scrollable list
  • Item tap: centers map on marker

Future Enhancements

Planned Features:

  • Enhanced OAuth implementation for secure deletions
  • Advanced data analytics dashboard
  • Multi-language support
  • Webhook integrations
  • Email notifications for shared content (Brevo)

Support & Resources

Documentation:

Internal Resources:

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