[V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" import { FlightOperationsHeader } from "@/components/flight-operations-header" import { FlightMetrics } from "@/components/flight-metrics" import { FlightTable } from "@/components/flight-table" export default function FlightOperationsPage() { return (

) } [V0_FILE]typescriptreact:file="components/flight-metrics.tsx" isMerged="true" export function FlightMetrics() { return (

scheduled flights

37:50

flight hours

26 Aug

65.63%

Overall

68.75%

Departure

62.5%

Arrival

) } [V0_FILE]typescriptreact:file="app/layout.tsx" isFixed="true" isQuickEdit="true" isMerged="true" import type React from "react" import type { Metadata } from "next" import { GeistSans } from "geist/font/sans" import { GeistMono } from "geist/font/mono" import { Analytics } from "@vercel/analytics/next" import { Suspense } from "react" import "./globals.css" export const metadata: Metadata = { title: "Raya Airways - Flight Operations", description: "Flight operations management dashboard for Raya Airways", generator: "v0.app", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "geist": "^1.3.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "14.2.25", "next-themes": "^0.4.6", "react": "^19", "react-day-picker": "9.8.0", "react-dom": "^19", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^0.9.9", "zod": "3.25.67" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^18", "@types/react-dom": "^18", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]css:file="app/globals.css" isFixed="true" isEdit="true" isQuickEdit="true" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); :root { --background: oklch(0.985 0 0); --foreground: oklch(0.145 0 0); --card: oklch(1 0 0); --card-foreground: oklch(0.145 0 0); --popover: oklch(1 0 0); --popover-foreground: oklch(0.145 0 0); --primary: oklch(0.556 0.222 264.376); --primary-foreground: oklch(0.985 0 0); --secondary: oklch(0.945 0 0); --secondary-foreground: oklch(0.145 0 0); --muted: oklch(0.945 0 0); --muted-foreground: oklch(0.508 0 0); --accent: oklch(0.945 0 0); --accent-foreground: oklch(0.145 0 0); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.985 0 0); --border: oklch(0.885 0 0); --input: oklch(0.885 0 0); --ring: oklch(0.556 0.222 264.376); --chart-1: oklch(0.488 0.243 264.376); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.577 0.245 27.325); --radius: 0.5rem; --sidebar: oklch(1 0 0); --sidebar-foreground: oklch(0.145 0 0); --sidebar-primary: oklch(0.985 0 0); --sidebar-primary-foreground: oklch(0.145 0 0); --sidebar-accent: oklch(0.945 0 0); --sidebar-accent-foreground: oklch(0.145 0 0); --sidebar-border: oklch(0.885 0 0); --sidebar-ring: oklch(0.556 0.222 264.376); } .dark { --background: oklch(0.145 0 0); --foreground: oklch(0.985 0 0); --card: oklch(0.205 0 0); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.269 0 0); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.556 0.222 264.376); --primary-foreground: oklch(0.985 0 0); --secondary: oklch(0.269 0 0); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.205 0 0); --muted-foreground: oklch(0.708 0 0); --accent: oklch(0.556 0.222 264.376); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.985 0 0); --border: oklch(0.269 0 0); --input: oklch(0.205 0 0); --ring: oklch(0.556 0.222 264.376); --chart-1: oklch(0.488 0.243 264.376); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.577 0.245 27.325); --sidebar: oklch(0.205 0 0); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.145 0 0); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.556 0.222 264.376); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(0.269 0 0); --sidebar-ring: oklch(0.556 0.222 264.376); } @theme inline { --font-sans: var(--font-geist-sans); --font-mono: var(--font-geist-mono); --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } [V0_FILE]typescriptreact:file="components/flight-operations-header.tsx" isEdit="true" isQuickEdit="true" import { ChevronLeft, ChevronRight, Search, Settings, Users } from "lucide-react" import { Button } from "@/components/ui/button" export function FlightOperationsHeader() { return (

{/* Top Navigation Bar */}

Flight Operations {">"} Flights {">"} operations Manage Flights

Users on this page

Search ⌘ K

{/* Date and Controls Bar */}

Mon, 15 Sep 2025

Movement Times :

) } [V0_FILE]typescriptreact:file="components/flight-table.tsx" isEdit="true" isQuickEdit="true" import { Button } from "@/components/ui/button" import { ChevronDown, Clock, Lock } from "lucide-react" interface Flight { id: string flightNumber: string route: string aircraft: string std: string atd: string to: string sta: string ata: string chock: string status: "Arrived" | "Departed" | "Scheduled" pic: string bay: string fuel: string ezfw: string azfw: string tags: string delayCode: string remarks: string hasDelay?: boolean } const flights: Flight[] = [ { id: "N123AB", flightNumber: "FL862", route: "JFK - LAX", aircraft: "Boeing 767 200", std: "04:00", atd: "03:55", to: "04:18", sta: "09:15", ata: "----", chock: "----", status: "Arrived", pic: "N/A", bay: "Select Bay", fuel: "Select Fuel", ezfw: "N/A", azfw: "N/A", tags: "N/A", delayCode: "N/A", remarks: "Enter Remarks...", }, { id: "N123AB", flightNumber: "FL862", route: "LAX - ORD", aircraft: "Boeing 767 200", std: "15:00", atd: "----", to: "----", sta: "16:55", ata: "----", chock: "----", status: "Departed", pic: "N/A", bay: "Select Bay", fuel: "Select Fuel", ezfw: "N/A", azfw: "N/A", tags: "N/A", delayCode: "N/A", remarks: "Enter Remarks...", }, { id: "N123AB", flightNumber: "FL863", route: "ORD - LAX", aircraft: "Boeing 767 200", std: "18:15", atd: "----", to: "----", sta: "20:05", ata: "----", chock: "----", status: "Scheduled", pic: "N/A", bay: "Select Bay", fuel: "Select Fuel", ezfw: "N/A", azfw: "N/A", tags: "N/A", delayCode: "N/A", remarks: "Enter Remarks...", }, { id: "N123AB", flightNumber: "FL861", route: "LAX - JFK", aircraft: "Boeing 767 200", std: "21:00", atd: "----", to: "----", sta: "02:30 (+1d)", ata: "----", chock: "----", status: "Scheduled", pic: "N/A", bay: "Select Bay", fuel: "Select Fuel", ezfw: "N/A", azfw: "N/A", tags: "N/A", delayCode: "N/A", remarks: "Enter Remarks...", hasDelay: true, }, { id: "N456CD", flightNumber: "FL764", route: "LAX - SFO", aircraft: "Boeing 767 200", std: "13:00", atd: "----", to: "----", sta: "15:55", ata: "----", chock: "----", status: "Arrived", pic: "N/A", bay: "Select Bay", fuel: "Select Fuel", ezfw: "N/A", azfw: "N/A", tags: "N/A", delayCode: "N/A", remarks: "Enter Remarks...", }, { id: "N456CD", flightNumber: "FL186", route: "SFO - SEA", aircraft: "Boeing 767 200", std: "22:30", atd: "----", to: "----", sta: "02:00 (+1d)", ata: "----", chock: "----", status: "Scheduled", pic: "N/A", bay: "Select Bay", fuel: "Select Fuel", ezfw: "N/A", azfw: "N/A", tags: "N/A", delayCode: "N/A", remarks: "Enter Remarks...", hasDelay: true, }, { id: "N789EF", flightNumber: "FL237", route: "MIA - LAX", aircraft: "Boeing 767 200", std: "00:40", atd: "00:27", to: "00:43", sta: "02:50", ata: "02:41", chock: "02:51", status: "Arrived", pic: "N/A", bay: "Select Bay", fuel: "Select Fuel", ezfw: "N/A", azfw: "N/A", tags: "N/A", delayCode: "N/A", remarks: "Enter Remarks...", }, { id: "N789EF", flightNumber: "FL602", route: "ATL - LAX", aircraft: "Boeing 767 200", std: "01:50", atd: "01:40", to: "01:53", sta: "05:35", ata: "01:40", chock: "01:53", status: "Arrived", pic: "N/A", bay: "Select Bay", fuel: "Select Fuel", ezfw: "N/A", azfw: "N/A", tags: "N/A", delayCode: "N/A", remarks: "Enter Remarks...", }, { id: "N012GH", flightNumber: "FL801", route: "LAX - ATL", aircraft: "Boeing 767 200", std: "20:20", atd: "----", to: "----", sta: "23:50", ata: "----", chock: "----", status: "Scheduled", pic: "N/A", bay: "Select Bay", fuel: "Select Fuel", ezfw: "N/A", azfw: "N/A", tags: "N/A", delayCode: "N/A", remarks: "Enter Remarks...", }, { id: "N345IJ", flightNumber: "FL507", route: "LAX - DEN", aircraft: "Airbus A321 211", std: "21:20", atd: "----", to: "----", sta: "01:30 (+1d)", ata: "----", chock: "----", status: "Scheduled", pic: "N/A", bay: "Select Bay", fuel: "Select Fuel", ezfw: "N/A", azfw: "N/A", tags: "N/A", delayCode: "N/A", remarks: "Enter Remarks...", hasDelay: true, }, ] function StatusBadge({ status }: { status: Flight["status"] }) { const variants = { Arrived: "bg-green-500/20 text-green-400 border-green-500/30", Departed: "bg-green-500/20 text-green-400 border-green-500/30", Scheduled: "bg-orange-500/20 text-orange-400 border-orange-500/30", } return (

{status}

) } export function FlightTable() { return (

{/* Table Header */}

Flight

Route

STD (GMT+08)

ATD (GMT+08)

TO (GMT+08)

STA (GMT+08)

ATA (GMT+08)

Chock (GMT+08)

Status

PIC

Bay

Fuel

EZFW

AZFW

About

Tags

Share

About

Tags

Share

More from jeffmpan

More Templates Like This

About

Tags

Share

About

Tags

Share

More from jeffmpan

More Templates Like This