A professional airport operations control center dashboard built with React 19, TypeScript, Tailwind CSS, and Vite. SkyOps delivers a polished, production-grade command interface for monitoring flights, passengers, security, maintenance, retail analytics, and more — all powered by local CSV datasets loaded directly in the browser.
Note: Screenshot placeholders above/below are intentional. Replace with actual captures before release.
SkyOps Control Center is a single-page operations dashboard designed for airport operations teams. It loads structured CSV datasets in-browser, computes live metrics, and provides a rich command interface for operational oversight.
The application is built around a shell-and-module architecture: a persistent layout shell (sidebar, navbar, command palette, toasts) wraps individual business modules (Flights, Passengers, Security, Maintenance, Retail) that load and render CSV-derived data.
┌─────────────────────────────────────────────────────────────┐
│ main.tsx │
│ ┌───────────────┐ ┌──────────────┐ ┌──────────────────┐ │
│ │ AppProviders │ │ BrowserRouter │ │ ShortcutsProvider│ │
│ └───────┬───────┘ └──────┬───────┘ └────────┬─────────┘ │
│ │ │ │ │
│ ┌───────┴─────────────────┴────────────────────┴─────────┐ │
│ │ App.tsx │ │
│ │ AnimatePresence (Page Transitions) + Routes │ │
│ └───────────────────────┬───────────────────────────────┘ │
│ │ │
│ ┌───────────────────────┴───────────────────────────────┐ │
│ │ AppLayout.tsx │ │
│ │ ┌──────────┐ ┌──────────┐ ┌───────────────┐ │ │
│ │ │ Sidebar │ │ Navbar │ │ <Outlet /> │ │ │
│ │ │ (nav + │ │ (search, │ │ (page │ │ │
│ │ │ bookmarks)│ │ command │ │ content) │ │ │
│ │ │ │ │ palette)│ │ │ │ │
│ │ └──────────┘ └──────────┘ └───────────────┘ │ │
│ └───────────────────────────────────────────────────────┘ │
│ │
│ Global: CommandPalette · ShortcutsDialog · Toaster │
└─────────────────────────────────────────────────────────────┘
- CSV Loader (
services/airportCsvLoader.ts) — Parses CSV files from theDataset/directory using Papaparse. - React Query (
services/queryClient.ts+hooks/useAirportDataQuery.ts) — Manages data-fetching lifecycle with caching. - Zustand Store (
store/useAirportDataStore.ts) — Holds the parsed in-memory dataset shared across modules. - Hooks (
hooks/useAirportData.ts) — Expose typed, per-domain hooks (useFlights(),usePassengers(), etc.) with loading/error/isEmpty semantics. - Pages — Consume hooks and render metric cards, tables, and detail drawers.
skyops-control-center/
├── Dataset/ # CSV source data
│ ├── flights.csv
│ ├── passengers.csv
│ ├── security_screening.csv
│ ├── baggage.csv
│ ├── maintenance_logs.csv
│ ├── retail_transactions.csv
│ ├── gate_events.csv
│ ├── staff_shifts.csv
│ └── data_dictionary.md
├── public/
│ └── data/ # Public data assets
├── src/
│ ├── assets/ # Static images / fonts
│ ├── components/
│ │ ├── layout/ # Layout shell components
│ │ │ ├── Layout.tsx
│ │ │ ├── Navbar.tsx
│ │ │ ├── PageTransition.tsx
│ │ │ └── Sidebar.tsx
│ │ ├── providers/ # React context providers
│ │ │ ├── AirportDataBootstrap.tsx
│ │ │ ├── AppProviders.tsx
│ │ │ └── KeyboardShortcutsProvider.tsx
│ │ └── ui/ # Reusable UI primitives
│ │ ├── Badge.tsx
│ │ ├── Button.tsx
│ │ ├── Card.tsx
│ │ ├── CommandPalette.tsx
│ │ ├── FeedbackStates.tsx
│ │ ├── PageHeader.tsx
│ │ ├── ShortcutsDialog.tsx
│ │ └── Toaster.tsx
│ ├── constants/ # App-level constants
│ │ ├── app.ts
│ │ ├── dataFiles.ts
│ │ └── navigation.ts
│ ├── data/ # Static/utility data
│ ├── hooks/ # Custom React hooks
│ │ ├── useAirportData.ts
│ │ ├── useAirportDataQuery.ts
│ │ ├── useCurrentTime.ts
│ │ └── useKeyboardShortcuts.ts
│ ├── layouts/
│ │ └── AppLayout.tsx
│ ├── pages/ # Route-level pages
│ │ ├── DashboardPage.tsx
│ │ ├── FlightsPage.tsx
│ │ ├── PassengersPage.tsx
│ │ ├── SecurityGatePage.tsx
│ │ ├── MaintenancePage.tsx
│ │ ├── RetailAnalyticsPage.tsx
│ │ └── ModulePage.tsx
│ ├── services/ # Data-loading services
│ │ ├── airportCsvLoader.ts
│ │ ├── csv.ts
│ │ └── queryClient.ts
│ ├── store/ # Zustand stores
│ │ ├── useAirportDataStore.ts
│ │ ├── useAppPreferencesStore.ts
│ │ ├── useToastStore.ts
│ │ └── useUiStore.ts
│ ├── types/ # Shared TypeScript types
│ │ ├── airportData.ts
│ │ ├── airportModels.ts
│ │ └── navigation.ts
│ ├── utils/
│ │ └── cn.ts
│ ├── App.tsx
│ ├── index.css
│ └── main.tsx
├── index.html
├── package.json
├── tailwind.config.cjs
├── tsconfig.json
└── vite.config.ts
- Dashboard — Live KPI cards, charts, and signal indicators across operational domains.
- Flights — Searchable/sortable flight table, status badges, delay tracking, CSV export, column visibility, detail drawer.
- Passengers — Passenger management tables with filtering.
- Security — Security screening monitoring and gate events.
- Maintenance — Work order tracking and maintenance operations.
- Retail — Retail analytics and transaction data.
- Command Palette — Press
Ctrl/Cmd + Kto navigate, trigger actions, and manage bookmarks. - Keyboard Shortcuts — Guru-style navigation (
g then d/f/p/s/m/r/o), sidebar toggle (/), bookmarks (b), shortcuts viewer (?). - Bookmarks — Save frequently visited pages; access from sidebar or command palette.
- Favorite Flights — Star flights in the table to track important aircraft, with a dedicated favorites panel.
- Toast Notifications — Animated toast feedback for bookmark/favorite actions and system events.
- Page Transitions — Smooth AnimatePresence-powered route transitions with blur/fade effects.
- Loading Skeletons — Professional shimmer skeletons for tables and KPI cards.
- Error States — Dedicated error cards with retry actions.
- Empty States — Clear messages when datasets return no rows.
- Responsive Design — Mobile-first with collapsible sidebar and adaptive grids.
- Node.js 18+ (recommended: 20+)
- npm 9+
# 1. Clone the repository
git clone https://github.com/Ankit-kumar2764/airport-operations-control-center.git
cd skyops-control-center
# 2. Install dependencies
npm install
# 3. Start the development server
npm run devThe app runs at http://localhost:5173.
npm run build # TypeScript check + Vite production build
npm run preview # Preview the production build locally- Build:
npm run build - Deploy the
dist/directory to any static host.
Example Vercel config:
{
"buildCommand": "npm run build",
"outputDirectory": "dist",
"framework": "vite"
}Placeholders — replace with actual captures before release.
| Screen | Preview |
|---|---|
| Dashboard | |
| Flights |  |
| Command Palette |  |
| Keyboard Shortcuts |  |
| Mobile View |  |
| Layer | Technology |
|---|---|
| Framework | React 19, TypeScript |
| Build | Vite 5 |
| Styling | Tailwind CSS 3, custom glassmorphism design system |
| Routing | React Router 7 |
| State | Zustand 5, TanStack Query 5 |
| Tables | TanStack Table 8 |
| Animations | Framer Motion 11 |
| Charts | Recharts 2 |
| CSV | Papaparse 5 |
| Icons | Lucide React |
MIT License.