[V0_FILE]typescriptreact:file="financial-dashboard.tsx" isMerged="true" export default function FinancialDashboard() { return (

{/* Navigation Tabs */}

{/* Financial Metrics */}

Total Revenue

$183,834.94

Net Income

$80,489.94

Infra Expenses

$3,834.94

{/* Transactions Section */}

Transactions

{[...Array(6)].map((_, index) => (

$50

John Doe

John@gmail.com

Subscription

))}

) } [V0_FILE]typescriptreact:file="app/page.tsx" import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs" import { TransactionCard } from "@/components/transaction-card" import { MetricCard } from "@/components/metric-card" export default function Dashboard() { // Sample transaction data const transactions = Array(6).fill({ amount: 50, name: "John Doe", email: "John@gmail.com", type: "Subscription", }) return (

{/* Navigation Tabs */} Overview Analytics Reports Docs {/* Financial Metrics */}

{/* Transactions Section */}

Transactions

{transactions.map((transaction, index) => ( ))}

) } [V0_FILE]typescriptreact:file="components/metric-card.tsx" import { Card, CardContent } from "@/components/ui/card" interface MetricCardProps { title: string value: string } export function MetricCard({ title, value }: MetricCardProps) { return (

{title}

{value}

) } [V0_FILE]typescriptreact:file="components/transaction-card.tsx" import { Card, CardContent } from "@/components/ui/card" interface TransactionCardProps { amount: number name: string email: string type: string } export function TransactionCard({ amount, name, email, type }: TransactionCardProps) { return (

${amount}

{name}

{email}

{type}

) } [V0_FILE]typescriptreact:file="components/ui/tabs.tsx" "use client" import * as React from "react" import * as TabsPrimitive from "@radix-ui/react-tabs" import { cn } from "@/lib/utils" const Tabs = TabsPrimitive.Root const TabsList = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) TabsList.displayName = TabsPrimitive.List.displayName const TabsTrigger = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) TabsTrigger.displayName = TabsPrimitive.Trigger.displayName const TabsContent = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) TabsContent.displayName = TabsPrimitive.Content.displayName export { Tabs, TabsList, TabsTrigger, TabsContent } [V0_FILE]typescriptreact:file="lib/utils.ts" import { type ClassValue, clsx } from "clsx" import { twMerge } from "tailwind-merge" export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)) }