Skip to main content
The admin application is the internal management dashboard for SkyTeam ROBLOX administrators and airline managers.

​
Overview

The admin panel provides tools for managing airlines, flights, users, and system configuration. Package: @skyteam/admin
Location: apps/admin
Port: 3001 (dev)

​
Technology Stack

  • Framework: Next.js 15.2.8 with App Router
  • UI: React 19, Tailwind CSS 4.0
  • Components: Headless UI, Heroicons
  • State Management: React Server Components

​
Project Structure

apps/admin/
├── src/
│   └── app/
│       ├── dashboard/
│       │   └── page.tsx      # Main dashboard
│       ├── layout.tsx         # Root layout
│       └── page.tsx           # Landing/login page
└── package.json

​
Key Features

​
Dashboard

The main dashboard (src/app/dashboard/page.tsx:1) provides:
apps/admin/src/app/dashboard/page.tsx
export default function Page() {
  return <h1 className="text-3xl font-bold underlined">Hello Next.js!</h1>;
}
The admin panel is currently in early development. Core features are being implemented.

​
Planned Features

  • Airline Management: Create, edit, and monitor member airlines
  • Flight Monitoring: Real-time flight tracking and status updates
  • User Administration: Manage user accounts and permissions
  • Analytics Dashboard: View system metrics and usage statistics
  • Content Management: Edit website content and press releases
  • API Key Management: Generate and manage airline API tokens

​
Development

​
Scripts

# Development server (port 3001)
pnpm dev

# Production build
pnpm build

# Start production server
pnpm start

# Lint code
pnpm lint

​
Dependencies

Key dependencies from package.json:11: 
{
  "dependencies": {
    "@skyteam/database": "workspace:*",
    "@skyteam/ui": "workspace:*",
    "@headlessui/react": "^2.2.0",
    "@heroicons/react": "^2.2.0",
    "next": "15.2.8",
    "react": "^19.0.0",
    "tailwindcss": "^4.0.9"
  }
}

​
Architecture

​
Authentication

The admin panel will implement:
  • Role-Based Access Control (RBAC): Different permission levels for staff
  • Session Management: Secure session handling with HTTP-only cookies
  • Audit Logging: Track all administrative actions

​
Data Layer

Integrates with:
  • @skyteam/database - Prisma ORM for data access
  • @skyteam/api - Internal API for real-time operations

​
UI Components

​
Headless UI

Utilizes Headless UI for accessible, unstyled components:
  • Dialogs: Modal management
  • Menus: Dropdown navigation
  • Tabs: Content organization
  • Transitions: Smooth animations

​
Heroicons

Icon library for consistent visual language: 
import { UserIcon, ChartBarIcon } from '@heroicons/react/24/outline';

​
Workspace Integration

The admin panel shares code with:
  • @skyteam/database - Database schema and queries
  • @skyteam/ui - Shared components and utilities
  • @skyteam/api - Backend API for real-time data

​
Security Considerations

  • Environment Variables: Sensitive config stored securely
  • API Authentication: Token-based auth for API requests
  • Input Validation: Server-side validation for all forms
  • XSS Protection: Content sanitization
  • CSRF Protection: Token validation for state-changing operations

​
Deployment

Recommended deployment approach:
  • Hosting: Vercel or similar Next.js platform
  • Access Control: IP whitelist or VPN requirement
  • Monitoring: Error tracking and performance monitoring
  • Backups: Regular database backups

​
Development Roadmap

  1. Phase 1: Authentication and basic layout
  2. Phase 2: Airline and flight management
  3. Phase 3: User administration and permissions
  4. Phase 4: Analytics and reporting
  5. Phase 5: Advanced features and automation

Build docs developers (and LLMs) love

Get started for freeTalk to us