[V0_FILE]typescriptreact:file="app/loading.tsx" isFixed="true" isMerged="true" export default function Loading() { return null } [V0_FILE]png:file="public/developer-avatar.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/developer-avatar-oCTfz3xW8chKIjWdSoF5hoJl9AKlr7.png" isMerged="true" [V0_FILE]typescriptreact:file="components/kpi-cards.tsx" isEdit="true" isMerged="true" "use client" import { motion } from "framer-motion" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { TrendingUp, Clock, Wifi, DollarSign } from "lucide-react" import { Badge } from "@/components/ui/badge" const cardVariants = { hidden: { opacity: 0, scale: 0.95, y: 20 }, visible: { opacity: 1, scale: 1, y: 0, transition: { duration: 0.5, ease: [0.22, 1, 0.36, 1], }, }, } const containerVariants = { hidden: { opacity: 0 }, visible: { opacity: 1, transition: { staggerChildren: 0.08, delayChildren: 0.1, }, }, } export function KPICards() { return ( {/* Build Success Rate */} build_success 98.7%

+2.1% vs_last_week

{/* Average Build Time */} avg_build_time 2.4s

-0.3s improvement

{/* Uptime */} uptime 99.99%

no_incidents

{/* Bandwidth Usage */} bandwidth 847gb

of_1tb_limit

{/* Monthly Cost */} monthly_cost $127

proj:_$156

) } [V0_FILE]typescriptreact:file="components/deployments-overview.tsx" isEdit="true" isMerged="true" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Button } from "@/components/ui/button" import { ExternalLink, GitCommit, Clock, User } from "lucide-react" export function DeploymentsOverview() { const deployments = [ { id: "1", status: "success", commit: "a1b2c3d", message: "feat: add new dashboard components", author: "john.doe", buildTime: "2.1s", environment: "Production", timestamp: "2 minutes ago", }, { id: "2", status: "building", commit: "e4f5g6h", message: "fix: resolve header navigation issue", author: "jane.smith", buildTime: "1.8s", environment: "Preview", timestamp: "5 minutes ago", }, { id: "3", status: "failed", commit: "i7j8k9l", message: "chore: update dependencies", author: "mike.wilson", buildTime: "3.2s", environment: "Development", timestamp: "12 minutes ago", }, { id: "4", status: "success", commit: "m0n1o2p", message: "style: improve mobile responsiveness", author: "sarah.jones", buildTime: "1.9s", environment: "Production", timestamp: "1 hour ago", }, ] const getStatusBadge = (status: string) => { switch (status) { case "success": return success case "building": return ( building ) case "failed": return failed default: return ( unknown ) } } const getEnvironmentBadge = (env: string) => { const colors = { Production: "bg-blue-500/20 text-blue-400 border-blue-500/30", Preview: "bg-purple-500/20 text-purple-400 border-purple-500/30", Development: "bg-gray-500/20 text-gray-400 border-gray-500/30", } return ( {env.toLowerCase()} ) } return (

recent_deployments

{deployments.map((deployment) => (

{getStatusBadge(deployment.status)} {getEnvironmentBadge(deployment.environment)}

{deployment.commit} {deployment.message}

{deployment.author}

{deployment.buildTime}

{deployment.timestamp}

))}

) } [V0_FILE]typescriptreact:file="components/observability-section.tsx" isEdit="true" isMerged="true" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Activity, AlertTriangle } from "lucide-react" export function ObservabilitySection() { return (

{/* Service Map */} service_map

frontend

healthy

api_gateway

warning

database

healthy

{/* Error Tracking */} error_tracking

TypeError: Cannot read property

api/users/route.ts:42

12_occurrences

Slow query detected

database/queries.ts:89

3_occurrences

) } [V0_FILE]typescriptreact:file="components/performance-analytics.tsx" isEdit="true" isMerged="true" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Gauge, Globe, Zap } from "lucide-react" export function PerformanceAnalytics() { return (

{/* Web Vitals */} web_vitals

1.2s

lcp

good

89ms

fid

good

0.15

cls

needs_work

{/* API Performance */} api_performance

/api/users

142ms fast

/api/deployments

89ms fast

/api/analytics

567ms slow

{/* Geographic Performance */} geographic_latency

us_east 23ms

europe 89ms

asia_pacific 156ms

) } [V0_FILE]typescriptreact:file="components/usage-activity-feed.tsx" isEdit="true" isMerged="true" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Activity, AlertCircle, DollarSign, Zap } from "lucide-react" export function UsageActivityFeed() { const activities = [ { id: "1", type: "deployment", message: "deployment_completed_successfully", user: "john.doe", timestamp: "2_minutes_ago", status: "success", }, { id: "2", type: "alert", message: "high_memory_usage_detected_in_production", user: "system", timestamp: "5_minutes_ago", status: "warning", }, { id: "3", type: "cost", message: "monthly_usage_approaching_80%_of_limit", user: "system", timestamp: "1_hour_ago", status: "info", }, { id: "4", type: "deployment", message: "build_failed_due_to_typescript_errors", user: "jane.smith", timestamp: "2_hours_ago", status: "error", }, ] const getIcon = (type: string) => { switch (type) { case "deployment": return case "alert": return case "cost": return default: return } } const getStatusColor = (status: string) => { switch (status) { case "success": return "text-green-400" case "warning": return "text-yellow-400" case "error": return "text-red-400" default: return "text-blue-400" } } return (

{/* Usage Charts */} usage_&_cost_insights

bandwidth_usage 847gb_/_1tb

function_invocations 2.4m_/_5m

edge_function_usage 156k_/_1m

{/* Activity Feed */} activity_feed

{activities.map((activity) => (

{getIcon(activity.type)}

{activity.message}

{activity.user} • {activity.timestamp}

))}

) } [V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isMerged="true" import type React from "react" import type { Metadata } from "next" import { GeistMono } from "geist/font/mono" import "./globals.css" export const metadata: Metadata = { title: "NEO-VERCEL | Developer Platform", description: "Next-generation developer platform with advanced analytics and glassmorphism design", generator: "v0.app", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]png:file="public/developer-pair-programming-website.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/developer-pair-programming-website-6C7lh10JJt3AwhZM1uE6Ot1vbSMaMy.png" isMerged="true" [V0_FILE]typescriptreact:file="components/production-deployment.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { motion } from "framer-motion" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { FileText, RotateCcw, ExternalLink, GitBranch, Activity } from "lucide-react" export function ProductionDeployment() { return (

Production Overview

{" "} {/* changed from Production_Overview to Production Overview */}

{" "} {/* added rounded-md for image container */} Website Preview

Ready • Jul 18

gitcompat.bio

main • 123a7f8

www.gitcompat.bio +2 domains

Fluid Compute • Protection Enabled

) } [V0_FILE]typescriptreact:file="components/deployment-trail-log.tsx" isEdit="true" isMerged="true" "use client" import { motion } from "framer-motion" import { Terminal, ChevronDown, CheckCircle, XCircle, AlertTriangle, Info } from "lucide-react" import { useState } from "react" const environments = [ { id: "production", name: "Production", color: "text-green-400" }, { id: "preview", name: "Preview", color: "text-blue-400" }, { id: "development", name: "Development", color: "text-yellow-400" }, ] const deploymentLogs = [ { id: "log_001", level: "info", timestamp: "14:32:15.234", message: "Starting deployment process...", source: "vercel[build]", }, { id: "log_002", level: "info", timestamp: "14:32:16.123", message: "Installing dependencies with npm", source: "vercel[build]", }, { id: "log_003", level: "success", timestamp: "14:32:45.567", message: "Dependencies installed successfully", source: "vercel[build]", }, { id: "log_004", level: "info", timestamp: "14:32:46.890", message: "Running build command: npm run build", source: "vercel[build]", }, { id: "log_005", level: "info", timestamp: "14:33:12.456", message: "Optimizing static assets...", source: "next[build]", }, { id: "log_006", level: "success", timestamp: "14:33:28.789", message: "Build completed successfully", source: "next[build]", }, { id: "log_007", level: "info", timestamp: "14:33:30.123", message: "Uploading build artifacts...", source: "vercel[deploy]", }, { id: "log_008", level: "success", timestamp: "14:33:45.678", message: "Deployment ready at https://gitcompat-m89dbtkbb.vercel.app", source: "vercel[deploy]", }, ] const logLevelConfig = { info: { icon: Info, color: "text-blue-400", bg: "bg-blue-400/10" }, success: { icon: CheckCircle, color: "text-green-400", bg: "bg-green-400/10" }, warning: { icon: AlertTriangle, color: "text-yellow-400", bg: "bg-yellow-400/10" }, error: { icon: XCircle, color: "text-red-400", bg: "bg-red-400/10" }, } const containerVariants = { hidden: { opacity: 0 }, visible: { opacity: 1, transition: { staggerChildren: 0.03, delayChildren: 0.1, }, }, } const itemVariants = { hidden: { opacity: 0, x: -10 }, visible: { opacity: 1, x: 0, transition: { duration: 0.3, ease: [0.22, 1, 0.36, 1], }, }, } export function DeploymentTrailLog() { const [selectedEnvironment, setSelectedEnvironment] = useState(environments[0]) const [isDropdownOpen, setIsDropdownOpen] = useState(false) return (

Deployment Logs

{/* Environment Dropdown */}

setIsDropdownOpen(!isDropdownOpen)} > ● {selectedEnvironment.name} {isDropdownOpen && ( {environments.map((env) => ( { setSelectedEnvironment(env) setIsDropdownOpen(false) }} > ● {env.name} ))} )}

{deploymentLogs.map((log, index) => { const LogIcon = logLevelConfig[log.level as keyof typeof logLevelConfig].icon const logColor = logLevelConfig[log.level as keyof typeof logLevelConfig].color return ( {log.timestamp} [{log.source}] {log.message} ) })}

Showing latest deployment logs ● Live

Download Logs

) } [V0_FILE]typescriptreact:file="components/web-analytics.tsx" isMerged="true" "use client" import { motion } from "framer-motion" import { TrendingUp, Users, Eye, MousePointer, Globe } from "lucide-react" const containerVariants = { hidden: { opacity: 0 }, visible: { opacity: 1, transition: { staggerChildren: 0.1, }, }, } const itemVariants = { hidden: { opacity: 0, y: 20 }, visible: { opacity: 1, y: 0, transition: { duration: 0.6, ease: [0.22, 1, 0.36, 1], }, }, } export function WebAnalytics() { const analyticsData = [ { label: "unique_visitors", value: "24,891", change: "+12.5%", trend: "up", icon: Users, color: "text-blue-400", }, { label: "page_views", value: "156,432", change: "+8.2%", trend: "up", icon: Eye, color: "text-green-400", }, { label: "bounce_rate", value: "32.1%", change: "-2.3%", trend: "down", icon: MousePointer, color: "text-orange-400", }, ] const topPages = [ { path: "/", views: "45,231", percentage: 29 }, { path: "/dashboard", views: "23,891", percentage: 15 }, { path: "/analytics", views: "18,432", percentage: 12 }, { path: "/settings", views: "12,891", percentage: 8 }, ] return (

Web Analytics

last_24_hours

real_time

{analyticsData.map((metric, index) => { const IconComponent = metric.icon return (

{metric.change}

{metric.value}

{metric.label}

) })}

top_pages

{topPages.map((page, index) => (

{index + 1}

{page.path}

{page.views} views

{page.percentage}%

))}

) } [V0_FILE]typescriptreact:file="components/customize-sidebar.tsx" isEdit="true" isMerged="true" "use client" import { motion, AnimatePresence, Reorder } from "framer-motion" import { X, Plus, GripVertical, Eye, EyeOff, Save, RotateCcw } from "lucide-react" import { Button } from "@/components/ui/button" import { useState } from "react" interface CustomizeSidebarProps { isOpen: boolean onClose: () => void onComponentToggle: (componentId: string, enabled: boolean) => void onComponentReorder: (newOrder: string[]) => void onSaveLayout: () => void onResetLayout: () => void } const sidebarVariants = { closed: { x: "100%", transition: { type: "spring", stiffness: 400, damping: 40, }, }, open: { x: 0, transition: { type: "spring", stiffness: 400, damping: 40, }, }, } const overlayVariants = { closed: { opacity: 0 }, open: { opacity: 1 }, } interface DashboardComponent { id: string name: string enabled: boolean } const initialDashboardComponents: DashboardComponent[] = [ { id: "production", name: "Production Overview", enabled: true }, { id: "kpi", name: "KPI Cards", enabled: true }, { id: "analytics", name: "Web Analytics", enabled: true }, { id: "deployments", name: "Deployments Overview", enabled: true }, { id: "observability", name: "Observability Section", enabled: true }, { id: "performance", name: "Performance Analytics", enabled: true }, { id: "usage", name: "Usage Activity Feed", enabled: true }, { id: "logs", name: "Deployment Trail Log", enabled: true }, ] const availableComponents: DashboardComponent[] = [ { id: "security", name: "Security Monitoring", enabled: false }, { id: "costs", name: "Cost Analytics", enabled: false }, { id: "team", name: "Team Activity", enabled: false }, { id: "integrations", name: "Integrations Status", enabled: false }, ] export function CustomizeSidebar({ isOpen, onClose, onComponentToggle, onComponentReorder, onSaveLayout, onResetLayout, }: CustomizeSidebarProps) { const [activeComponents, setActiveComponents] = useState(initialDashboardComponents) const [availableItems, setAvailableItems] = useState(availableComponents) const handleToggleComponent = (componentId: string, currentlyEnabled: boolean) => { if (currentlyEnabled) { // Remove from active, add to available const componentToMove = activeComponents.find((c) => c.id === componentId) if (componentToMove) { setActiveComponents((prev) => prev.filter((c) => c.id !== componentId)) setAvailableItems((prev) => [...prev, { ...componentToMove, enabled: false }]) onComponentToggle(componentId, false) } } else { // Remove from available, add to active const componentToMove = availableItems.find((c) => c.id === componentId) if (componentToMove) { setAvailableItems((prev) => prev.filter((c) => c.id !== componentId)) setActiveComponents((prev) => [...prev, { ...componentToMove, enabled: true }]) onComponentToggle(componentId, true) } } } const handleReorder = (newOrder: DashboardComponent[]) => { setActiveComponents(newOrder) onComponentReorder(newOrder.map((c) => c.id)) } const handleSave = () => { onSaveLayout() // Could add toast notification here } const handleReset = () => { setActiveComponents(initialDashboardComponents) setAvailableItems(availableComponents) onResetLayout() } return ( {isOpen && ( <>

Dashboard

CUSTOMIZE LAYOUT

Active Components

{activeComponents.map((component) => ( {component.name} ))}

Available Components

{availableItems.map((component) => ( handleToggleComponent(component.id, false)} > {component.name} ))}

)} ) } [V0_FILE]typescriptreact:file="components/integrations-status.tsx" isMerged="true" "use client" import { motion } from "framer-motion" import { CheckCircle, AlertCircle, XCircle, ExternalLink, Zap, Database, Shield, Cloud } from "lucide-react" const containerVariants = { hidden: { opacity: 0, y: 20 }, visible: { opacity: 1, y: 0, transition: { duration: 0.6, staggerChildren: 0.1, }, }, } const itemVariants = { hidden: { opacity: 0, x: -20 }, visible: { opacity: 1, x: 0 }, } const integrations = [ { name: "Supabase", status: "connected", icon: Database, color: "text-green-400", lastSync: "2 min ago" }, { name: "Vercel Analytics", status: "connected", icon: Zap, color: "text-green-400", lastSync: "1 min ago" }, { name: "Auth0", status: "warning", icon: Shield, color: "text-yellow-400", lastSync: "15 min ago" }, { name: "AWS S3", status: "connected", icon: Cloud, color: "text-green-400", lastSync: "5 min ago" }, { name: "Stripe", status: "error", icon: ExternalLink, color: "text-red-400", lastSync: "1 hour ago" }, ] export function IntegrationsStatus() { return (

Integrations Status

THIRD_PARTY_SERVICES

LIVE

{integrations.map((integration, index) => { const Icon = integration.icon return (

{integration.name}

Last sync: {integration.lastSync}

{integration.status === "connected" && } {integration.status === "warning" && } {integration.status === "error" && } {integration.status}

) })}

) } [V0_FILE]typescriptreact:file="components/team-activity.tsx" isMerged="true" "use client" import { motion } from "framer-motion" import { Users, GitCommit, CommandIcon as Deploy, MessageSquare, Clock } from "lucide-react" const containerVariants = { hidden: { opacity: 0, y: 20 }, visible: { opacity: 1, y: 0, transition: { duration: 0.6, staggerChildren: 0.1, }, }, } const itemVariants = { hidden: { opacity: 0, x: -20 }, visible: { opacity: 1, x: 0 }, } const activities = [ { user: "sarah_dev", action: "deployed", target: "production", time: "2 min ago", icon: Deploy, color: "text-green-400", }, { user: "mike_frontend", action: "committed", target: "feat/dashboard-ui", time: "5 min ago", icon: GitCommit, color: "text-blue-400", }, { user: "alex_backend", action: "commented on", target: "PR #247", time: "12 min ago", icon: MessageSquare, color: "text-purple-400", }, { user: "emma_design", action: "deployed", target: "preview", time: "18 min ago", icon: Deploy, color: "text-yellow-400", }, { user: "john_devops", action: "committed", target: "fix/auth-flow", time: "25 min ago", icon: GitCommit, color: "text-blue-400", }, ] export function TeamActivity() { return (

Team Activity

RECENT_ACTIONS

LIVE

{activities.map((activity, index) => { const Icon = activity.icon return (

{activity.user} {activity.action} {activity.target}

{activity.time}

) })}

) } [V0_FILE]typescriptreact:file="components/cost-analytics.tsx" isMerged="true" "use client" import { motion } from "framer-motion" import { DollarSign, TrendingUp, TrendingDown, Calendar, CreditCard } from "lucide-react" const containerVariants = { hidden: { opacity: 0, y: 20 }, visible: { opacity: 1, y: 0, transition: { duration: 0.6, staggerChildren: 0.1, }, }, } const itemVariants = { hidden: { opacity: 0, x: -20 }, visible: { opacity: 1, x: 0 }, } const costBreakdown = [ { service: "Compute", cost: "$24.50", change: "+12%", trend: "up" }, { service: "Bandwidth", cost: "$8.20", change: "-5%", trend: "down" }, { service: "Storage", cost: "$3.40", change: "+2%", trend: "up" }, { service: "Functions", cost: "$12.80", change: "+18%", trend: "up" }, ] export function CostAnalytics() { return (

Cost Analytics

MONTHLY_SPEND

JAN 2025

$48.90

CURRENT_MONTH_TOTAL

+8% from last month

SERVICE_BREAKDOWN

{costBreakdown.map((item, index) => ( {item.service}

{item.cost}

{item.trend === "up" ? ( ) : ( )} {item.change}

))}

) } [V0_FILE]typescriptreact:file="components/security-monitoring.tsx" isMerged="true" "use client" import { motion } from "framer-motion" import { Shield, AlertTriangle, Lock, Key } from "lucide-react" const containerVariants = { hidden: { opacity: 0, y: 20 }, visible: { opacity: 1, y: 0, transition: { duration: 0.6, staggerChildren: 0.1, }, }, } const itemVariants = { hidden: { opacity: 0, x: -20 }, visible: { opacity: 1, x: 0 }, } const securityMetrics = [ { label: "SSL Certificate", status: "valid", icon: Lock, color: "text-green-400", expires: "Dec 2025" }, { label: "API Keys", status: "secure", icon: Key, color: "text-green-400", count: "12 active" }, { label: "Failed Logins", status: "warning", icon: AlertTriangle, color: "text-yellow-400", count: "3 today" }, { label: "Security Score", status: "good", icon: Shield, color: "text-green-400", score: "94/100" }, ] const recentAlerts = [ { type: "info", message: "SSL certificate renewed", time: "2 hours ago" }, { type: "warning", message: "Unusual login pattern detected", time: "6 hours ago" }, { type: "success", message: "Security scan completed", time: "1 day ago" }, ] export function SecurityMonitoring() { return (

Security Monitoring

THREAT_DETECTION

ACTIVE

{securityMetrics.map((metric, index) => { const Icon = metric.icon return (

{metric.label}

{metric.expires || metric.count || metric.score}

{metric.status}

) })}

RECENT_ALERTS

{recentAlerts.map((alert, index) => (

{alert.message}

{alert.time}

))}

) } [V0_FILE]typescriptreact:file="app/page.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import { motion } from "framer-motion" import { Settings } from "lucide-react" import { Button } from "@/components/ui/button" import { DashboardHeader } from "@/components/dashboard-header" import { ProductionDeployment } from "@/components/production-deployment" import { KPICards } from "@/components/kpi-cards" import { WebAnalytics } from "@/components/web-analytics" import { DeploymentsOverview } from "@/components/deployments-overview" import { ObservabilitySection } from "@/components/observability-section" import { PerformanceAnalytics } from "@/components/performance-analytics" import { UsageActivityFeed } from "@/components/usage-activity-feed" import { DeploymentTrailLog } from "@/components/deployment-trail-log" import { IntegrationsStatus } from "@/components/integrations-status" import { TeamActivity } from "@/components/team-activity" import { CostAnalytics } from "@/components/cost-analytics" import { SecurityMonitoring } from "@/components/security-monitoring" import { CustomizeSidebar } from "@/components/customize-sidebar" const containerVariants = { hidden: { opacity: 0 }, visible: { opacity: 1, transition: { staggerChildren: 0.1, delayChildren: 0.2, }, }, } const itemVariants = { hidden: { opacity: 0, y: 20 }, visible: { opacity: 1, y: 0, transition: { duration: 0.6, ease: [0.22, 1, 0.36, 1], }, }, } const componentMap = { production: ProductionDeployment, kpi: KPICards, analytics: WebAnalytics, deployments: DeploymentsOverview, observability: ObservabilitySection, performance: PerformanceAnalytics, usage: UsageActivityFeed, logs: DeploymentTrailLog, integrations: IntegrationsStatus, team: TeamActivity, costs: CostAnalytics, security: SecurityMonitoring, } const defaultComponentOrder = [ "production", "kpi", "analytics", "deployments", "observability", "performance", "usage", "logs", ] export default function DashboardPage() { const [isSidebarOpen, setIsSidebarOpen] = useState(false) const [enabledComponents, setEnabledComponents] = useState>({ production: true, kpi: true, analytics: true, deployments: true, observability: true, performance: true, usage: true, logs: true, integrations: false, team: false, costs: false, security: false, }) const [componentOrder, setComponentOrder] = useState(defaultComponentOrder) const handleComponentToggle = (componentId: string, enabled: boolean) => { setEnabledComponents((prev) => ({ ...prev, [componentId]: enabled, })) } const handleComponentReorder = (newOrder: string[]) => { setComponentOrder(newOrder) } const handleSaveLayout = () => { // Could save to localStorage or API localStorage.setItem( "dashboardLayout", JSON.stringify({ enabledComponents, componentOrder, }), ) } const handleResetLayout = () => { setEnabledComponents({ production: true, kpi: true, analytics: true, deployments: true, observability: true, performance: true, usage: true, logs: true, integrations: false, team: false, costs: false, security: false, }) setComponentOrder(defaultComponentOrder) } const renderComponent = (componentId: string, index: number) => { if (!enabledComponents[componentId]) return null const Component = componentMap[componentId as keyof typeof componentMap] if (!Component) return null // Special handling for grid layout components - mobile-first approach if (componentId === "observability" && enabledComponents.performance) { const ObservabilityComponent = componentMap.observability const PerformanceComponent = componentMap.performance const obsIndex = componentOrder.indexOf("observability") const perfIndex = componentOrder.indexOf("performance") // Only render grid if both are enabled and observability comes first if (obsIndex < perfIndex && obsIndex === index) { return ( ) } else if (obsIndex > perfIndex && perfIndex === index) { return ( ) } else if (obsIndex === index && !enabledComponents.performance) { return ( ) } else if (perfIndex === index && !enabledComponents.observability) { return ( ) } return null } // Skip performance if it's already rendered with observability if (componentId === "performance" && enabledComponents.observability) { const obsIndex = componentOrder.indexOf("observability") const perfIndex = componentOrder.indexOf("performance") if (obsIndex < perfIndex) return null } return ( ) } return (

Dashboard

{componentOrder.map((componentId, index) => renderComponent(componentId, index)).filter(Boolean)} setIsSidebarOpen(false)} onComponentToggle={handleComponentToggle} onComponentReorder={handleComponentReorder} onSaveLayout={handleSaveLayout} onResetLayout={handleResetLayout} />

) } [V0_FILE]typescriptreact:file="components/logo.tsx" isEdit="true" isMerged="true" "use client" import { motion } from "framer-motion" export function Logo() { return ( NEO-VERCEL ) } [V0_FILE]typescriptreact:file="components/dashboard-header.tsx" isEdit="true" isMerged="true" "use client" import { motion } from "framer-motion" import { Search, Plus, Settings, ChevronDown, Share2, Copy, Clock, Shield, Menu } from "lucide-react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Avatar, AvatarFallback } from "@/components/ui/avatar" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu" import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Logo } from "./logo" import { useState } from "react" const headerVariants = { hidden: { opacity: 0, y: -20 }, visible: { opacity: 1, y: 0, transition: { duration: 0.6, ease: [0.22, 1, 0.36, 1], staggerChildren: 0.1, }, }, } const itemVariants = { hidden: { opacity: 0, y: -10 }, visible: { opacity: 1, y: 0, transition: { duration: 0.4, ease: [0.22, 1, 0.36, 1], }, }, } export function DashboardHeader() { const [shareModalOpen, setShareModalOpen] = useState(false) const [shareLink, setShareLink] = useState("") const [password, setPassword] = useState("") const [expiryTime, setExpiryTime] = useState("24h") const [linkGenerated, setLinkGenerated] = useState(false) const [copied, setCopied] = useState(false) const [mobileMenuOpen, setMobileMenuOpen] = useState(false) const generateShareLink = () => { const randomId = Math.random().toString(36).substring(2, 15) const generatedPassword = Math.random().toString(36).substring(2, 10) const link = `https://neo-vercel.app/shared/${randomId}` setShareLink(link) setPassword(generatedPassword) setLinkGenerated(true) } const copyToClipboard = async (text: string) => { await navigator.clipboard.writeText(text) setCopied(true) setTimeout(() => setCopied(false), 2000) } const resetShareModal = () => { setShareLink("") setPassword("") setLinkGenerated(false) setCopied(false) setExpiryTime("24h") } return ( <>

{/* Left: Logo & Project Switcher */}

prod-env

staging

{/* Breadcrumb */} dashboard / overview

{/* Center: Global Search - Hidden on mobile */}

{/* Right: Actions & User - Hidden on mobile */} u

) } [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(1 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.205 0 0); --primary-foreground: oklch(0.985 0 0); --secondary: oklch(0.97 0 0); --secondary-foreground: oklch(0.205 0 0); --muted: oklch(0.97 0 0); --muted-foreground: oklch(0.556 0 0); --accent: oklch(0.97 0 0); --accent-foreground: oklch(0.205 0 0); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.577 0.245 27.325); --border: oklch(0.922 0 0); --input: oklch(0.922 0 0); --ring: oklch(0.708 0 0); --chart-1: oklch(0.646 0.222 41.116); --chart-2: oklch(0.6 0.118 184.704); --chart-3: oklch(0.398 0.07 227.392); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.769 0.188 70.08); --radius: 0.625rem; --sidebar: oklch(0.985 0 0); --sidebar-foreground: oklch(0.145 0 0); --sidebar-primary: oklch(0.205 0 0); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.97 0 0); --sidebar-accent-foreground: oklch(0.205 0 0); --sidebar-border: oklch(0.922 0 0); --sidebar-ring: oklch(0.708 0 0); } .dark { --background: oklch(0 0 0); /* Pure black background */ --foreground: oklch(0.985 0 0); --card: oklch(0.05 0 0); /* Very dark cards */ --card-foreground: oklch(0.985 0 0); --popover: oklch(0.05 0 0); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.985 0 0); --primary-foreground: oklch(0.205 0 0); --secondary: oklch(0.1 0 0); /* Darker secondary */ --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.1 0 0); --muted-foreground: oklch(0.708 0 0); --accent: oklch(0.1 0 0); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.396 0.141 25.723); --destructive-foreground: oklch(0.637 0.237 25.331); --border: oklch(0.15 0 0); /* Subtle borders */ --input: oklch(0.1 0 0); --ring: oklch(0.439 0 0); --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.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); --sidebar: oklch(0.05 0 0); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.1 0 0); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(0.15 0 0); --sidebar-ring: oklch(0.439 0 0); } @theme inline { --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); --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace; /* Added Geist Mono font family */ } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-black text-white; font-family: var(--font-mono); /* Use Geist Mono explicitly */ /* Enhanced background with subtle particle effects and improved noise gradients */ /* Floating particles */ background: radial-gradient(circle at 15% 25%, rgba(64, 224, 208, 0.03) 0%, transparent 2px), radial-gradient(circle at 85% 75%, rgba(100, 149, 237, 0.02) 0%, transparent 1px), radial-gradient(circle at 45% 15%, rgba(255, 255, 255, 0.015) 0%, transparent 1.5px), radial-gradient(circle at 75% 45%, rgba(64, 224, 208, 0.02) 0%, transparent 1px), radial-gradient(circle at 25% 85%, rgba(100, 149, 237, 0.015) 0%, transparent 2px), radial-gradient(circle at 95% 25%, rgba(255, 255, 255, 0.01) 0%, transparent 1px), /* Ambient glow layers */ radial-gradient(ellipse at 20% 80%, rgba(64, 224, 208, 0.08) 0%, transparent 40%), radial-gradient(ellipse at 80% 20%, rgba(100, 149, 237, 0.06) 0%, transparent 45%), radial-gradient(ellipse at 40% 40%, rgba(255, 255, 255, 0.04) 0%, transparent 35%), radial-gradient(ellipse at 90% 90%, rgba(64, 224, 208, 0.03) 0%, transparent 50%), radial-gradient(ellipse at 10% 10%, rgba(100, 149, 237, 0.05) 0%, transparent 40%), radial-gradient(ellipse at 60% 70%, rgba(255, 255, 255, 0.02) 0%, transparent 60%), /* Fine grain noise texture */ repeating-linear-gradient( 0deg, transparent, transparent 2px, rgba(255, 255, 255, 0.008) 2px, rgba(255, 255, 255, 0.008) 4px ), repeating-linear-gradient( 90deg, transparent, transparent 2px, rgba(64, 224, 208, 0.005) 2px, rgba(64, 224, 208, 0.005) 4px ), repeating-linear-gradient( 45deg, transparent, transparent 3px, rgba(100, 149, 237, 0.003) 3px, rgba(100, 149, 237, 0.003) 6px ), #000000; background-size: 50px 50px, 30px 30px, 40px 40px, 25px 25px, 35px 35px, 20px 20px, 1400px 1400px, 900px 900px, 700px 700px, 500px 500px, 400px 400px, 800px 800px, 100px 100px, 150px 150px, 200px 200px, 100% 100%; background-position: 0 0, 200px 200px, 400px 0, 100px 300px, 500px 100px, 300px 400px, 0 0, 200px 200px, 400px 0, 100px 300px, 500px 100px, 300px 400px, 0 0, 0 0, 0 0, 0 0; animation: subtleParticleFloat 45s infinite ease-in-out; } /* Enhanced animation with particle movement */ @keyframes subtleParticleFloat { 0%, 100% { background-position: 0 0, 200px 200px, 400px 0, 100px 300px, 500px 100px, 300px 400px, 0 0, 200px 200px, 400px 0, 100px 300px, 500px 100px, 300px 400px, 0 0, 0 0, 0 0, 0 0; } 25% { background-position: 50px 30px, 250px 180px, 420px 40px, 120px 280px, 480px 130px, 320px 380px, 150px 80px, 350px 150px, 250px 250px, 50px 450px, 350px 250px, 150px 200px, 10px 10px, 5px 15px, 15px 5px, 0 0; } 50% { background-position: 100px 60px, 150px 360px, 290px 80px, 180px 320px, 420px 180px, 280px 420px, 300px 160px, 150px 400px, 100px 500px, 300px 200px, 200px 500px, 400px 100px, 20px 5px, 15px 25px, 25px 15px, 0 0; } 75% { background-position: 150px 90px, 100px 320px, 350px 120px, 220px 280px, 380px 220px, 250px 380px, 100px 300px, 500px 100px, 450px 200px, 500px 350px, 50px 200px, 200px 500px, 5px 20px, 25px 10px, 10px 25px, 0 0; } } } /* Enhanced glassmorphism with grayish white gradient noise backgrounds */ @layer utilities { .glass { @apply bg-white/3 backdrop-blur-2xl border border-white/8; /* Grayish white noise pattern */ background: repeating-linear-gradient( 45deg, rgba(255, 255, 255, 0.02) 0px, rgba(240, 240, 240, 0.015) 1px, rgba(220, 220, 220, 0.01) 2px, transparent 3px ), repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.015) 0px, rgba(230, 230, 230, 0.01) 1px, transparent 2px), /* Subtle grayish white gradient */ linear-gradient( 135deg, rgba(255, 255, 255, 0.04) 0%, rgba(240, 240, 240, 0.025) 25%, rgba(220, 220, 220, 0.02) 50%, rgba(200, 200, 200, 0.015) 75%, rgba(255, 255, 255, 0.03) 100% ); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 -1px 0 rgba(255, 255, 255, 0.03), 0 0 20px rgba(64, 224, 208, 0.03); } .glass-card { @apply backdrop-blur-3xl border border-white/6; /* Enhanced grayish white noise texture */ background: repeating-linear-gradient( 30deg, rgba(255, 255, 255, 0.025) 0px, rgba(245, 245, 245, 0.02) 1px, rgba(235, 235, 235, 0.015) 2px, rgba(225, 225, 225, 0.01) 3px, transparent 4px ), repeating-linear-gradient(-30deg, rgba(250, 250, 250, 0.02) 0px, rgba(240, 240, 240, 0.015) 1px, transparent 2px), repeating-linear-gradient(60deg, rgba(255, 255, 255, 0.01) 0px, rgba(230, 230, 230, 0.008) 1px, transparent 3px), /* Layered grayish white gradient */ linear-gradient( 135deg, rgba(255, 255, 255, 0.05) 0%, rgba(248, 248, 248, 0.035) 20%, rgba(240, 240, 240, 0.025) 40%, rgba(232, 232, 232, 0.02) 60%, rgba(224, 224, 224, 0.015) 80%, rgba(255, 255, 255, 0.04) 100% ); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 -1px 0 rgba(255, 255, 255, 0.05), 0 0 30px rgba(64, 224, 208, 0.02); } .glass-header { @apply backdrop-blur-3xl border-b border-white/12; /* Subtle header noise pattern */ background: repeating-linear-gradient( 0deg, rgba(255, 255, 255, 0.015) 0px, rgba(245, 245, 245, 0.01) 1px, transparent 2px ), repeating-linear-gradient(90deg, rgba(250, 250, 250, 0.012) 0px, rgba(240, 240, 240, 0.008) 1px, transparent 3px), linear-gradient(135deg, rgba(0, 0, 0, 0.4) 0%, rgba(255, 255, 255, 0.02) 50%, rgba(0, 0, 0, 0.5) 100%); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 40px rgba(64, 224, 208, 0.015); } .glass-button { @apply backdrop-blur-xl border border-white/15 hover:bg-white/8; /* Fine button noise texture */ background: repeating-linear-gradient( 45deg, rgba(255, 255, 255, 0.02) 0px, rgba(248, 248, 248, 0.015) 1px, transparent 2px ), linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0%, rgba(240, 240, 240, 0.025) 100%); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 0 15px rgba(64, 224, 208, 0.025); transition: all 0.3s ease; } .glass-button:hover { /* Enhanced hover noise */ background: repeating-linear-gradient( 45deg, rgba(255, 255, 255, 0.03) 0px, rgba(250, 250, 250, 0.02) 1px, transparent 2px ), linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0%, rgba(245, 245, 245, 0.04) 100%); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 0 20px rgba(64, 224, 208, 0.04); } /* Mobile-specific optimizations with proper class spacing */ @media (max-width: 768px) { .glass-card { @apply backdrop-blur-xl; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.08); } .glass-header { @apply backdrop-blur-xl; box-shadow: 0 2px 16px rgba(0, 0, 0, 0.4); } .glass-button { min-height: 44px; min-width: 44px; @apply backdrop-blur-lg; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2); } } /* Mobile layout utilities */ .mobile-grid { @apply grid grid-cols-1 gap-4; } .mobile-stack { @apply flex flex-col space-y-4; } .mobile-scroll { @apply overflow-x-auto; /* Hide scrollbars */ -ms-overflow-style: none; scrollbar-width: none; } .mobile-scroll::-webkit-scrollbar { display: none; } .mobile-touch { @apply touch-manipulation select-none; } }