[V0_FILE]typescriptreact:file="app/dashboard/page.tsx" "use client" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Button } from "@/components/ui/button" import { Progress } from "@/components/ui/progress" import { BarChart3, Users, TrendingUp, Activity, ArrowUpRight, ArrowDownRight, DollarSign, ShoppingCart, } from "lucide-react" export default function DashboardPage() { return (

{/* Header */}

Dashboard

Welcome back! Here's what's happening with your business.

Live Data

{/* Stats Cards */}

Total Revenue

$45,231.89

+20.1% from last month

Active Users

2,350

+180.1% from last month

Sales

12,234

+19% from last month

Conversion Rate

3.2%

-2.1% from last month

{/* Main Content Grid */}

{/* Analytics Chart */} Analytics Overview Your business performance over the last 6 months

Chart visualization would go here

Connected to analytics API

{/* Recent Activity */} Recent Activity Latest updates from your business

{[ { action: "New user registration", time: "2 minutes ago", type: "user" }, { action: "Payment processed", time: "5 minutes ago", type: "payment" }, { action: "Report generated", time: "10 minutes ago", type: "report" }, { action: "System backup completed", time: "1 hour ago", type: "system" }, { action: "New feature deployed", time: "2 hours ago", type: "deployment" }, ].map((item, index) => (

{item.action}

{item.time}

))}

{/* Progress Section */}

Monthly Goals Track your progress towards monthly targets

Revenue Target $45,231 / $50,000

User Acquisition 2,350 / 3,000

Sales Target 12,234 / 15,000

Quick Actions Frequently used actions and shortcuts

) } [V0_FILE]typescriptreact:file="app/dashboard/layout.tsx" import type React from "react" import { AppSidebar } from "@/components/app-sidebar" import { SidebarProvider, SidebarInset } from "@/components/ui/sidebar" export default function DashboardLayout({ children, }: { children: React.ReactNode }) { return (

{children}

) } [V0_FILE]typescriptreact:file="components/app-sidebar.tsx" "use client" import { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarRail, } from "@/components/ui/sidebar" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Badge } from "@/components/ui/badge" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu" import { BarChart3, Settings, Users, FileText, TrendingUp, Shield, Bell, HelpCircle, LogOut, ChevronDown, Zap, } from "lucide-react" const navigationItems = [ { title: "Dashboard", url: "/dashboard", icon: BarChart3, isActive: true, }, { title: "Analytics", url: "/analytics", icon: TrendingUp, badge: "New", }, { title: "Users", url: "/users", icon: Users, badge: "2.3k", }, { title: "Reports", url: "/reports", icon: FileText, }, { title: "Settings", url: "/settings", icon: Settings, }, ] const adminItems = [ { title: "Security", url: "/security", icon: Shield, }, { title: "Notifications", url: "/notifications", icon: Bell, }, ] export function AppSidebar() { return (

CheckFlow Powered by PAMO

Main Navigation {navigationItems.map((item) => ( {item.title} {item.badge && ( {item.badge} )} ))} Administration {adminItems.map((item) => ( {item.title} ))}

John Doe john@company.com

Account Settings Help & Support Sign Out ) } [V0_FILE]typescriptreact:file="app/settings/page.tsx" "use client" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Switch } from "@/components/ui/switch" import { Badge } from "@/components/ui/badge" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { User, Bell, Shield, Palette, Globe, Camera, Save } from "lucide-react" export default function SettingsPage() { return (

{/* Header */}

Settings

Manage your account settings and preferences.

{/* Profile Settings */} Profile Information Update your personal information and profile details.

JPG, GIF or PNG. 1MB max.

First Name

Last Name

Email Address

Role

Timezone

{/* Quick Settings */}

Notifications

Email Notifications

Receive updates via email

Push Notifications

Browser notifications

SMS Alerts

Critical updates only

Security

Two-Factor Auth

Enabled

{/* Additional Settings */}

Appearance Customize the look and feel of your dashboard.

Theme

Accent Color

Compact Mode

Reduce spacing and padding

Preferences Configure your application preferences.

Language

Date Format

Auto-save

Automatically save changes

) } [V0_FILE]typescriptreact:file="app/settings/layout.tsx" import type React from "react" import { AppSidebar } from "@/components/app-sidebar" import { SidebarProvider, SidebarInset } from "@/components/ui/sidebar" export default function SettingsLayout({ children, }: { children: React.ReactNode }) { return (

{children}

) } [V0_FILE]typescriptreact:file="tailwind.config.ts" import type { Config } from "tailwindcss" const config: Config = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}", ], prefix: "", theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "#ec4899", // Pink-500 foreground: "#ffffff", 50: "#fdf2f8", 100: "#fce7f3", 200: "#fbcfe8", 300: "#f9a8d4", 400: "#f472b6", 500: "#ec4899", 600: "#db2777", 700: "#be185d", 800: "#9d174d", 900: "#831843", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, sidebar: { DEFAULT: "hsl(var(--sidebar-background))", foreground: "hsl(var(--sidebar-foreground))", primary: "hsl(var(--sidebar-primary))", "primary-foreground": "hsl(var(--sidebar-primary-foreground))", accent: "hsl(var(--sidebar-accent))", "accent-foreground": "hsl(var(--sidebar-accent-foreground))", border: "hsl(var(--sidebar-border))", ring: "hsl(var(--sidebar-ring))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, keyframes: { "accordion-down": { from: { height: "0" }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: "0" }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, boxShadow: { material: "0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12)", "material-lg": "0 8px 10px -5px rgba(0, 0, 0, 0.2), 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12)", }, }, }, plugins: [require("tailwindcss-animate")], } satisfies Config export default config [V0_FILE]typescriptreact:file="app/page.tsx" import { redirect } from "next/navigation" export default function HomePage() { redirect("/dashboard") }