[V0_FILE]typescriptreact:file="app/admin/layout.tsx" isMerged="true" import type React from "react" import { AdminSidebar } from "@/components/admin/admin-sidebar" import { AdminHeader } from "@/components/admin/admin-header" export default function AdminLayout({ children, }: { children: React.ReactNode }) { return (

{children}

) } [V0_FILE]typescriptreact:file="components/admin/admin-sidebar.tsx" isMerged="true" "use client" import Link from "next/link" import { usePathname } from "next/navigation" import { LayoutDashboard, Database, Users, Settings, BarChart3, FileText, Shield, Zap } from "lucide-react" import { cn } from "@/lib/utils" const navigation = [ { name: "Overview", href: "/admin", icon: LayoutDashboard }, { name: "Database", href: "/admin/database", icon: Database }, { name: "Users", href: "/admin/users", icon: Users }, { name: "Analytics", href: "/admin/analytics", icon: BarChart3 }, { name: "Content", href: "/admin/content", icon: FileText }, { name: "Security", href: "/admin/security", icon: Shield }, { name: "Functions", href: "/admin/functions", icon: Zap }, { name: "Settings", href: "/admin/settings", icon: Settings }, ] export function AdminSidebar() { const pathname = usePathname() return ( ) } [V0_FILE]typescriptreact:file="components/admin/admin-header.tsx" isMerged="true" "use client" import { Bell, Search, User } from "lucide-react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu" export function AdminHeader() { return (

My Account Profile Settings Log out

) } [V0_FILE]typescriptreact:file="app/admin/page.tsx" isMerged="true" import { StatsCard } from "@/components/admin/stats-card" import { ActivityChart } from "@/components/admin/activity-chart" import { RecentActivity } from "@/components/admin/recent-activity" import { Database, Users, Activity, TrendingUp } from "lucide-react" export default function AdminDashboard() { return (

Dashboard Overview

Monitor your application performance and metrics

) } [V0_FILE]typescriptreact:file="components/admin/stats-card.tsx" isMerged="true" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import type { LucideIcon } from "lucide-react" import { cn } from "@/lib/utils" interface StatsCardProps { title: string value: string change: string icon: LucideIcon trend: "up" | "down" } export function StatsCard({ title, value, change, icon: Icon, trend }: StatsCardProps) { return ( {title}

{value}

{change} from last month

) } [V0_FILE]typescriptreact:file="components/admin/activity-chart.tsx" isMerged="true" "use client" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Area, AreaChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts" const data = [ { time: "00:00", requests: 4000, errors: 240 }, { time: "04:00", requests: 3000, errors: 139 }, { time: "08:00", requests: 2000, errors: 980 }, { time: "12:00", requests: 2780, errors: 390 }, { time: "16:00", requests: 1890, errors: 480 }, { time: "20:00", requests: 2390, errors: 380 }, { time: "24:00", requests: 3490, errors: 430 }, ] export function ActivityChart() { return ( Request Activity

Last 24 hours performance metrics

`${value}`} /> ) } [V0_FILE]typescriptreact:file="components/admin/recent-activity.tsx" isMerged="true" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Avatar, AvatarFallback } from "@/components/ui/avatar" const activities = [ { user: "John Doe", action: "Created new user account", time: "2 minutes ago", initials: "JD", }, { user: "Sarah Smith", action: "Updated database schema", time: "15 minutes ago", initials: "SS", }, { user: "Mike Johnson", action: "Deployed new version", time: "1 hour ago", initials: "MJ", }, { user: "Emily Brown", action: "Modified security settings", time: "2 hours ago", initials: "EB", }, { user: "David Lee", action: "Added new API endpoint", time: "3 hours ago", initials: "DL", }, ] export function RecentActivity() { return ( Recent Activity

Latest actions in your system

{activities.map((activity, index) => (

{activity.initials}

{activity.user}

{activity.action}

{activity.time}

))}

) } [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": "15.5.4", "next-themes": "^0.4.6", "react": "19.1.0", "react-day-picker": "9.8.0", "react-dom": "19.1.0", "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]typescriptreact:file="app/admin/users/page.tsx" isMerged="true" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { DataTable } from "@/components/admin/data-table" import { UserPlus, Search } from "lucide-react" const users = [ { id: 1, name: "John Doe", email: "john@example.com", role: "Admin", status: "Active", lastActive: "2 hours ago" }, { id: 2, name: "Jane Smith", email: "jane@example.com", role: "Editor", status: "Active", lastActive: "5 hours ago" }, { id: 3, name: "Bob Johnson", email: "bob@example.com", role: "Viewer", status: "Inactive", lastActive: "2 days ago", }, { id: 4, name: "Alice Williams", email: "alice@example.com", role: "Editor", status: "Active", lastActive: "1 hour ago", }, { id: 5, name: "Charlie Brown", email: "charlie@example.com", role: "Viewer", status: "Active", lastActive: "3 hours ago", }, ] const columns = [ { key: "name", label: "Name" }, { key: "email", label: "Email" }, { key: "role", label: "Role" }, { key: "status", label: "Status" }, { key: "lastActive", label: "Last Active" }, ] export default function UsersPage() { return (

Users

Manage user accounts and permissions

) } [V0_FILE]typescriptreact:file="app/admin/users/loading.tsx" isFixed="true" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/admin/database/page.tsx" isMerged="true" import { Card } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Database, Plus, RefreshCw } from "lucide-react" import { Badge } from "@/components/ui/badge" const tables = [ { name: "users", rows: 2543, size: "45.2 MB", status: "healthy" }, { name: "posts", rows: 8921, size: "128.5 MB", status: "healthy" }, { name: "comments", rows: 15234, size: "89.3 MB", status: "healthy" }, { name: "sessions", rows: 1234, size: "12.8 MB", status: "warning" }, { name: "analytics", rows: 45678, size: "256.7 MB", status: "healthy" }, ] export default function DatabasePage() { return (

Database

Monitor and manage your database tables

{tables.map((table) => (

{table.name}

{table.rows.toLocaleString()} rows • {table.size}

{table.status}

))}

) } [V0_FILE]typescriptreact:file="app/admin/analytics/page.tsx" isMerged="true" import { Card } from "@/components/ui/card" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { AnalyticsChart } from "@/components/admin/analytics-chart" import { MetricsGrid } from "@/components/admin/metrics-grid" export default function AnalyticsPage() { return (

Analytics

Track performance metrics and user behavior

Overview Traffic Engagement Conversion

Traffic Sources

User Engagement

Conversion Funnel

) } [V0_FILE]typescriptreact:file="app/admin/analytics/loading.tsx" isFixed="true" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/admin/content/page.tsx" isMerged="true" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { ContentGrid } from "@/components/admin/content-grid" import { Plus, Search } from "lucide-react" export default function ContentPage() { return (

Content

Manage your posts, pages, and media

Posts Pages Media

) } [V0_FILE]typescriptreact:file="app/admin/content/loading.tsx" isFixed="true" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/admin/settings/page.tsx" isMerged="true" import { Card } from "@/components/ui/card" import { Label } from "@/components/ui/label" import { Input } from "@/components/ui/input" import { Button } from "@/components/ui/button" import { Switch } from "@/components/ui/switch" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" export default function SettingsPage() { return (

Settings

Configure your application preferences

General Security Notifications API

General Settings

Site Name

Site URL

Maintenance Mode

Temporarily disable public access

Security Settings

Two-Factor Authentication

Require 2FA for all admin users

Session Timeout

Auto-logout after inactivity

Timeout Duration (minutes)

Notification Preferences

Email Notifications

Receive updates via email

Push Notifications

Browser push notifications

Weekly Reports

Receive weekly analytics summary

API Configuration

API Key

Rate Limiting

Limit API requests per hour

) } [V0_FILE]typescriptreact:file="components/admin/data-table.tsx" isMerged="true" import { Card } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Button } from "@/components/ui/button" import { MoreHorizontal } from "lucide-react" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu" interface Column { key: string label: string } interface DataTableProps { data: any[] columns: Column[] } export function DataTable({ data, columns }: DataTableProps) { return (

{columns.map((column) => ( ))} {data.map((row, index) => ( {columns.map((column) => ( ))} ))}

{column.label}	Actions
{column.key === "status" ? ( {row[column.key]} ) : ( {row[column.key]} )}	Edit View Details Delete

) } [V0_FILE]typescriptreact:file="components/admin/analytics-chart.tsx" isMerged="true" "use client" import { Card } from "@/components/ui/card" import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from "recharts" import { ChartContainer, ChartTooltip, ChartTooltipContent } from "@/components/ui/chart" const data = [ { date: "Jan", value: 2400, previous: 2100 }, { date: "Feb", value: 1398, previous: 1800 }, { date: "Mar", value: 9800, previous: 8200 }, { date: "Apr", value: 3908, previous: 3400 }, { date: "May", value: 4800, previous: 4200 }, { date: "Jun", value: 3800, previous: 3600 }, { date: "Jul", value: 4300, previous: 3900 }, ] const chartConfig = { value: { label: "Current", color: "hsl(var(--chart-1))", }, previous: { label: "Previous", color: "hsl(var(--chart-2))", }, } interface AnalyticsChartProps { type?: "overview" | "traffic" | "engagement" | "conversion" } export function AnalyticsChart({ type = "overview" }: AnalyticsChartProps) { return (

Performance Metrics

Comparing current vs previous period

} /> ) } [V0_FILE]typescriptreact:file="components/admin/metrics-grid.tsx" isMerged="true" import { Card } from "@/components/ui/card" import { ArrowDown, ArrowUp, Eye, MousePointer, Clock, Users } from "lucide-react" const metrics = [ { label: "Page Views", value: "45.2K", change: "+12.5%", trend: "up", icon: Eye }, { label: "Click Rate", value: "3.24%", change: "+0.8%", trend: "up", icon: MousePointer }, { label: "Avg. Duration", value: "4m 32s", change: "-0.5%", trend: "down", icon: Clock }, { label: "Unique Visitors", value: "12.8K", change: "+18.2%", trend: "up", icon: Users }, ] export function MetricsGrid() { return (

{metrics.map((metric) => (

{metric.trend === "up" ? : } {metric.change}

{metric.value}

{metric.label}

))}

) } [V0_FILE]typescriptreact:file="components/admin/content-grid.tsx" isMerged="true" import { Card } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Button } from "@/components/ui/button" import { MoreHorizontal, FileText } from "lucide-react" const contentItems = [ { id: 1, title: "Getting Started Guide", type: "post", status: "published", date: "2024-01-15" }, { id: 2, title: "API Documentation", type: "page", status: "published", date: "2024-01-14" }, { id: 3, title: "Product Announcement", type: "post", status: "draft", date: "2024-01-13" }, { id: 4, title: "About Us", type: "page", status: "published", date: "2024-01-12" }, { id: 5, title: "Feature Update", type: "post", status: "scheduled", date: "2024-01-20" }, ] interface ContentGridProps { type: "posts" | "pages" | "media" } export function ContentGrid({ type }: ContentGridProps) { const filteredItems = contentItems.filter((item) => type === "posts" ? item.type === "post" : type === "pages" ? item.type === "page" : true, ) return (

{filteredItems.map((item) => (

{item.title}

{item.status} {item.date}

))}

) } [V0_FILE]typescriptreact:file="app/admin/security/page.tsx" isMerged="true" import { Card } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Button } from "@/components/ui/button" import { Shield, AlertTriangle, CheckCircle2 } from "lucide-react" const securityChecks = [ { name: "SSL Certificate", status: "active", description: "Valid until Dec 2025" }, { name: "Two-Factor Authentication", status: "active", description: "Enabled for all admins" }, { name: "Firewall Rules", status: "active", description: "12 rules configured" }, { name: "API Rate Limiting", status: "warning", description: "Consider lowering limits" }, { name: "Password Policy", status: "active", description: "Strong passwords enforced" }, ] const recentAlerts = [ { type: "warning", message: "Unusual login attempt from new location", time: "2 hours ago" }, { type: "info", message: "Security scan completed successfully", time: "5 hours ago" }, { type: "success", message: "All systems secure", time: "1 day ago" }, ] export default function SecurityPage() { return (

Security

Monitor security status and manage access controls

Security Checks

{securityChecks.map((check) => (

{check.status === "active" ? ( ) : ( )}

{check.name}

{check.description}

{check.status}

))}

Recent Alerts

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

{alert.message}

{alert.time}

))}

) } [V0_FILE]typescriptreact:file="app/admin/functions/page.tsx" isMerged="true" import { Card } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Zap, Play, Pause, Settings } from "lucide-react" const functions = [ { name: "send-email", status: "active", executions: "1.2K", avgDuration: "245ms", lastRun: "5 min ago" }, { name: "process-payment", status: "active", executions: "856", avgDuration: "1.2s", lastRun: "12 min ago" }, { name: "generate-report", status: "paused", executions: "234", avgDuration: "3.5s", lastRun: "2 hours ago" }, { name: "sync-database", status: "active", executions: "445", avgDuration: "890ms", lastRun: "1 hour ago" }, ] export default function FunctionsPage() { return (

Functions

Manage serverless functions and background jobs

{functions.map((func) => (

{func.name}

{func.executions} executions • Avg {func.avgDuration} • Last run {func.lastRun}

{func.status}

))}

) } [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.145 0 0); --foreground: oklch(0.985 0 0); --card: oklch(0.145 0 0); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.145 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.269 0 0); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.269 0 0); --muted-foreground: oklch(0.708 0 0); --accent: oklch(0.269 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.269 0 0); --input: oklch(0.269 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.205 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.269 0 0); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(0.269 0 0); --sidebar-ring: oklch(0.439 0 0); } @theme inline { /* optional: --font-sans, --font-serif, --font-mono if they are applied in the layout.tsx */ --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; } }