[V0_FILE]typescriptreact:file="components/mode-toggle.tsx" "use client" import { Moon, Sun } from "lucide-react" import { useTheme } from "next-themes" import { Button } from "@/components/ui/button" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu" export function ModeToggle() { const { setTheme } = useTheme() return ( setTheme("light")}>Light setTheme("dark")}>Dark setTheme("system")}>System ) } [V0_FILE]typescriptreact:file="components/account-overview.tsx" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" const accounts = [ { name: "Checking", balance: 5240.23 }, { name: "Savings", balance: 12750.89 }, { name: "Investment", balance: 7890.45 }, ] export function AccountOverview() { const totalBalance = accounts.reduce((sum, account) => sum + account.balance, 0) return ( Account Overview

${totalBalance.toFixed(2)}

{accounts.map((account) => (

{account.name} ${account.balance.toFixed(2)}

))}

) } [V0_FILE]typescriptreact:file="components/recent-transactions.tsx" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { ArrowUpRight, ArrowDownRight } from "lucide-react" const transactions = [ { id: 1, name: "Amazon.com", amount: -129.99, date: "2023-07-15", type: "expense" }, { id: 2, name: "Whole Foods Market", amount: -89.72, date: "2023-07-10", type: "expense" }, { id: 3, name: "Netflix Subscription", amount: -15.99, date: "2023-07-05", type: "expense" }, { id: 4, name: "Freelance Payment", amount: 750, date: "2023-07-12", type: "income" }, { id: 5, name: "Gas Station", amount: -45.5, date: "2023-07-18", type: "expense" }, ] export function RecentTransactions() { return ( Recent Transactions

{transactions.slice(0, 3).map((transaction) => (

{transaction.name}

{transaction.date}

{transaction.type === "income" ? "+" : "-"}${Math.abs(transaction.amount).toFixed(2)} {transaction.type === "income" ? ( ) : ( )}

))}

) } [V0_FILE]typescriptreact:file="components/quick-actions.tsx" "use client" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { PlusCircle, SendHorizontal, CreditCard } from "lucide-react" import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger, } from "@/components/ui/dialog" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" function ActionDialog({ title, description, actionText }: { title: string; description: string; actionText: string }) { return ( ) } export function QuickActions() { return ( Quick Actions ) } [V0_FILE]typescriptreact:file="components/financial-chart.tsx" "use client" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Line, LineChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts" const data = [ { month: "Jan", income: 2000, expenses: 1800 }, { month: "Feb", income: 2200, expenses: 1900 }, { month: "Mar", income: 2400, expenses: 2000 }, { month: "Apr", income: 2600, expenses: 2200 }, { month: "May", income: 2800, expenses: 2400 }, { month: "Jun", income: 3000, expenses: 2600 }, ] export function FinancialChart() { return ( Financial Overview

`$${value}`} />

) } [V0_FILE]typescriptreact:file="components/layout.tsx" isFixed="true" isQuickEdit="true" import type React from "react" import { Sidebar } from "./sidebar" import { TopNav } from "./top-nav" export default function Layout({ children }: { children: React.ReactNode }) { return (

{children}

) } [V0_FILE]typescriptreact:file="components/content.tsx" import { List01 } from "./list01" import { List02 } from "./list02" import { List03 } from "./list03" export function Content() { return (

) } [V0_FILE]typescriptreact:file="components/list01.tsx" import { Wallet, Plus, Send, CreditCard, MoreHorizontal } from "lucide-react" import { Modal } from "./modal" const accounts = [ { name: "Checking", balance: 5240.23 }, { name: "Savings", balance: 12750.89 }, { name: "Investment", balance: 7890.45 }, ] export function List01() { const totalBalance = accounts.reduce((sum, account) => sum + account.balance, 0) return (

Accounts

${totalBalance.toFixed(2)}

{accounts.map((account) => (

{account.name} ${account.balance.toFixed(2)}

))}

Add } title="Add Funds" description="Add funds to your account" /> Send } title="Send Money" description="Send money to another account" /> Top-up } title="Top Up" description="Top up your account" />

) } [V0_FILE]typescriptreact:file="components/list02.tsx" import { CreditCard, ShoppingCart, Wallet, ArrowUpRight, ArrowDownRight } from "lucide-react" const transactions = [ { id: 1, title: "Online Purchase", amount: -89.99, date: "2023-06-15", icon: ShoppingCart, type: "expense" }, { id: 2, title: "Salary Deposit", amount: 3500, date: "2023-06-01", icon: Wallet, type: "income" }, { id: 3, title: "Grocery Shopping", amount: -156.23, date: "2023-06-10", icon: ShoppingCart, type: "expense" }, { id: 4, title: "ATM Withdrawal", amount: -200, date: "2023-06-05", icon: CreditCard, type: "expense" }, { id: 5, title: "Freelance Payment", amount: 750, date: "2023-06-12", icon: Wallet, type: "income" }, ] export function List02() { return (

Recent Transactions

{transactions.map((transaction) => (

{transaction.title}

{transaction.date}

{transaction.type === "income" ? "+" : "-"}${Math.abs(transaction.amount).toFixed(2)} {transaction.type === "income" ? ( ) : ( )}

))}

) } [V0_FILE]typescriptreact:file="components/list03.tsx" import { Calendar, PiggyBank, TrendingUp, CreditCard, ArrowRight } from "lucide-react" const events = [ { id: 1, title: "Emergency Fund", subtitle: "3 months of expenses saved", icon: PiggyBank, status: "In Progress", progress: 65, target: 15000, date: "Dec 2024", }, { id: 2, title: "Stock Portfolio", subtitle: "Tech sector investment plan", icon: TrendingUp, status: "Pending", progress: 30, target: 50000, date: "Jun 2024", }, { id: 3, title: "Debt Repayment", subtitle: "Student loan payoff plan", icon: CreditCard, status: "In Progress", progress: 45, target: 25000, date: "Mar 2025", }, ] const statusColors = { Pending: "bg-yellow-100 text-yellow-800", "In Progress": "bg-blue-100 text-blue-800", Completed: "bg-green-100 text-green-800", } export function List03() { return (

Upcoming Events

{events.map((event) => (

{event.status}

{event.title}

{event.subtitle}

${event.target.toLocaleString()} target {event.date}

))}

) } [V0_FILE]typescriptreact:file="components/theme-toggle.tsx" "use client" import { Moon, Sun } from "lucide-react" import { useTheme } from "next-themes" export function ThemeToggle() { const { theme, setTheme } = useTheme() return ( ) } [V0_FILE]typescriptreact:file="components/profile01.tsx" import { ChevronDown } from "lucide-react" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" export function Profile01() { return ( CN My Account Profile Settings Logout ) } [V0_FILE]typescriptreact:file="components/function-modal.tsx" isFixed="true" isQuickEdit="true" import { Button } from "@/components/ui/button" import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger, } from "@/components/ui/dialog" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import type React from "react" // Import React interface FunctionModalProps { title: string description: string actionText: string icon: React.ReactNode } export function FunctionModal({ title, description, actionText, icon }: FunctionModalProps) { return ( ) } [V0_FILE]typescriptreact:file="components/upcoming-events.tsx" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Calendar, PiggyBank, TrendingUp, CreditCard, ArrowRight } from "lucide-react" const events = [ { id: 1, title: "Emergency Fund", subtitle: "3 months of expenses saved", icon: PiggyBank, status: "In Progress", progress: 65, target: 15000, date: "Dec 2024", }, { id: 2, title: "Stock Portfolio", subtitle: "Tech sector investment plan", icon: TrendingUp, status: "Pending", progress: 30, target: 50000, date: "Jun 2024", }, { id: 3, title: "Debt Repayment", subtitle: "Student loan payoff plan", icon: CreditCard, status: "In Progress", progress: 45, target: 25000, date: "Mar 2025", }, ] const statusColors = { Pending: "bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200", "In Progress": "bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200", Completed: "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200", } export function UpcomingEvents() { return (

Upcoming Events

{events.map((event) => ( {event.title}

{event.subtitle}

{event.status} {event.date}

${event.target.toLocaleString()} {event.progress}% complete

))}

) } [V0_FILE]css:file="styles/scrollbar-hide.css" /* Hide scrollbar for Chrome, Safari and Opera */ .scrollbar-hide::-webkit-scrollbar { display: none; } /* Hide scrollbar for IE, Edge and Firefox */ .scrollbar-hide { -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ } [V0_FILE]javascript:file="tailwind.config.js" isFixed="true" isQuickEdit="true" /** @type {import('tailwindcss').Config} */ module.exports = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx,js,jsx,mdx}", "./components/**/*.{ts,tsx,js,jsx,mdx}", "./app/**/*.{ts,tsx,js,jsx,mdx}", "./src/**/*.{ts,tsx}", ], 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: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, 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))", }, }, 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", }, }, }, plugins: [require("tailwindcss-animate")], } [V0_FILE]css:file="app/globals.css" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 0 0% 100%; --foreground: 222.2 47.4% 11.2%; --muted: 210 40% 96.1%; --muted-foreground: 215.4 16.3% 46.9%; --popover: 0 0% 100%; --popover-foreground: 222.2 47.4% 11.2%; --card: 0 0% 100%; --card-foreground: 222.2 47.4% 11.2%; --border: 214.3 31.8% 91.4%; --input: 214.3 31.8% 91.4%; --primary: 222.2 47.4% 11.2%; --primary-foreground: 210 40% 98%; --secondary: 210 40% 96.1%; --secondary-foreground: 222.2 47.4% 11.2%; --accent: 210 40% 96.1%; --accent-foreground: 222.2 47.4% 11.2%; --destructive: 0 100% 50%; --destructive-foreground: 210 40% 98%; --ring: 215 20.2% 65.1%; --radius: 0.5rem; } .dark { --background: 224 71% 4%; --foreground: 213 31% 91%; --muted: 223 47% 11%; --muted-foreground: 215.4 16.3% 56.9%; --popover: 224 71% 4%; --popover-foreground: 215 20.2% 65.1%; --card: 224 71% 4%; --card-foreground: 213 31% 91%; --border: 216 34% 17%; --input: 216 34% 17%; --primary: 210 40% 98%; --primary-foreground: 222.2 47.4% 1.2%; --secondary: 222.2 47.4% 11.2%; --secondary-foreground: 210 40% 98%; --accent: 216 34% 17%; --accent-foreground: 210 40% 98%; --destructive: 0 63% 31%; --destructive-foreground: 210 40% 98%; --ring: 216 34% 17%; --radius: 0.5rem; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; font-feature-settings: "rlig" 1, "calt" 1; } } [V0_FILE]typescriptreact:file="components/modal.tsx" isFixed="true" isQuickEdit="true" "use client" import { useState, type ReactNode } from "react" import { X } from "lucide-react" interface ModalProps { trigger: ReactNode title: string description: string } export function Modal({ trigger, title, description }: ModalProps) { const [isOpen, setIsOpen] = useState(false) return ( <>

setIsOpen(true)}>{trigger}

{isOpen && (

{title}

{description}

Amount

)} ) } [V0_FILE]typescriptreact:file="components/accounts-overview.tsx" "use client" import { useState } from "react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Wallet, Plus, Send, CreditCard, MoreHorizontal } from "lucide-react" import { AddMoneyModal } from "./add-money-modal" import { SendMoneyModal } from "./send-money-modal" import { RequestMoneyModal } from "./request-money-modal" const initialAccounts = [ { name: "Checking", balance: 7500 }, { name: "Savings", balance: 560000 }, { name: "Investment", balance: 5879000 }, ] export function AccountsOverview() { const [accounts, setAccounts] = useState(initialAccounts) const [isAddMoneyModalOpen, setIsAddMoneyModalOpen] = useState(false) const [isSendMoneyModalOpen, setIsSendMoneyModalOpen] = useState(false) const [isRequestMoneyModalOpen, setIsRequestMoneyModalOpen] = useState(false) const totalBalance = accounts.reduce((sum, account) => sum + account.balance, 0) const handleAddMoney = (amount) => { setAccounts( accounts.map((account) => account.name === "Checking" ? { ...account, balance: account.balance + amount } : account, ), ) } const handleSendMoney = (amount, fromAccount) => { setAccounts( accounts.map((account) => account.name === fromAccount ? { ...account, balance: account.balance - amount } : account, ), ) } const handleRequestMoney = (amount, contact) => { console.log(`Requested $${amount} from ${contact.name}`) } return ( Accounts Overview

${totalBalance.toLocaleString()}

Total balance across all accounts

{accounts.map((account) => (

{account.name} ${account.balance.toLocaleString()}

))}

setIsAddMoneyModalOpen(false)} onAddMoney={handleAddMoney} /> setIsSendMoneyModalOpen(false)} onSendMoney={handleSendMoney} accounts={accounts} /> setIsRequestMoneyModalOpen(false)} onRequestMoney={handleRequestMoney} /> ) } [V0_FILE]typescriptreact:file="components/budget-tracker.tsx" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Progress } from "@/components/ui/progress" const budgetCategories = [ { name: "Housing", spent: 2000, budget: 2500 }, { name: "Transportation", spent: 450, budget: 500 }, { name: "Food", spent: 800, budget: 1000 }, { name: "Utilities", spent: 300, budget: 350 }, { name: "Entertainment", spent: 250, budget: 300 }, ] export function BudgetTracker() { const totalBudget = budgetCategories.reduce((sum, category) => sum + category.budget, 0) const totalSpent = budgetCategories.reduce((sum, category) => sum + category.spent, 0) const overallPercentage = (totalSpent / totalBudget) * 100 return ( Budget Overview

Total Spent ${totalSpent.toLocaleString()} / ${totalBudget.toLocaleString()}

{overallPercentage.toFixed(1)}% of budget used

{budgetCategories.map((category) => { const percentage = (category.spent / category.budget) * 100 return (

{category.name} {percentage.toFixed(0)}%

) })}

) } [V0_FILE]typescriptreact:file="components/savings-goals.tsx" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Progress } from "@/components/ui/progress" import { Button } from "@/components/ui/button" import { PlusCircle } from "lucide-react" const savingsGoals = [ { name: "Emergency Fund", current: 10000, target: 25000 }, { name: "Vacation", current: 3000, target: 5000 }, { name: "New Car", current: 15000, target: 35000 }, ] export function SavingsGoals() { return ( Savings Goals

{savingsGoals.map((goal) => { const percentage = (goal.current / goal.target) * 100 return (

{goal.name} ${goal.current.toLocaleString()} / ${goal.target.toLocaleString()}

{percentage.toFixed(1)}% complete

) })}

) } [V0_FILE]typescriptreact:file="components/quick-bill-pay.tsx" "use client" import { useState } from "react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { PaymentModal } from "./payment-modal" const initialBills = [ { id: 1, name: "Electricity Bill", amount: 85, dueDate: "2023-07-15" }, { id: 2, name: "Internet Service", amount: 60, dueDate: "2023-07-18" }, { id: 3, name: "Credit Card Payment", amount: 500, dueDate: "2023-07-25" }, { id: 4, name: "Water Bill", amount: 45, dueDate: "2023-07-30" }, ] export function QuickBillPay() { const [bills, setBills] = useState(initialBills) const [selectedBill, setSelectedBill] = useState(null) const handlePaymentSuccess = (paidBillId) => { setBills(bills.filter((bill) => bill.id !== paidBillId)) setSelectedBill(null) } return ( Quick Bill Pay {bills.length > 0 ? (

{bills.map((bill) => (

{bill.name}

Due: {bill.dueDate}

${bill.amount}

))}

) : (

No pending bills

)} {selectedBill && ( setSelectedBill(null)} onPaymentSuccess={() => handlePaymentSuccess(selectedBill.id)} /> )} ) } [V0_FILE]typescriptreact:file="components/payment-modal.tsx" "use client" import { useState } from "react" import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog" import { Button } from "@/components/ui/button" import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group" import { Label } from "@/components/ui/label" import { Input } from "@/components/ui/input" import { CheckCircle2 } from "lucide-react" const steps = ["Payment Option", "Card Details", "OTP Verification", "Confirmation"] export function PaymentModal({ bill, isOpen, onClose, onPaymentSuccess }) { const [currentStep, setCurrentStep] = useState(0) const [paymentOption, setPaymentOption] = useState("full") const [cardDetails, setCardDetails] = useState({ number: "", expiry: "", cvv: "" }) const [otp, setOtp] = useState("") const handleContinue = () => { if (currentStep < steps.length - 1) { setCurrentStep(currentStep + 1) } else { onPaymentSuccess() onClose() } } const renderStepContent = () => { switch (currentStep) { case 0: return (

Pay in full (${bill.amount})

Pay in 4 (${(bill.amount / 4).toFixed(2)} x 4)

) case 1: return (

Card Number setCardDetails({ ...cardDetails, number: e.target.value })} />

Expiry Date setCardDetails({ ...cardDetails, expiry: e.target.value })} />

CVV setCardDetails({ ...cardDetails, cvv: e.target.value })} />

) case 2: return (

Enter the OTP sent to your registered mobile number

setOtp(e.target.value)} />

) case 3: return (

Payment Successful

Your payment of ${bill.amount} for {bill.name} has been processed successfully.

) } } return ( ) } [V0_FILE]typescriptreact:file="app/page.tsx" import { AccountsOverview } from "@/components/accounts-overview" import { RecentTransactions } from "@/components/recent-transactions" import { QuickBillPay } from "@/components/quick-bill-pay" import { BusinessMetrics } from "@/components/business-metrics" export default function Dashboard() { return (

Dashboard

) } [V0_FILE]typescriptreact:file="components/add-money-modal.tsx" "use client" import { useState } from "react" import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { CheckCircle2 } from "lucide-react" const steps = ["Amount", "Card Details", "OTP Verification", "Confirmation"] export function AddMoneyModal({ isOpen, onClose, onAddMoney }) { const [currentStep, setCurrentStep] = useState(0) const [amount, setAmount] = useState("") const [cardDetails, setCardDetails] = useState({ number: "", expiry: "", cvv: "" }) const [otp, setOtp] = useState("") const handleContinue = () => { if (currentStep < steps.length - 1) { setCurrentStep(currentStep + 1) } else { onAddMoney(Number.parseFloat(amount)) onClose() } } const renderStepContent = () => { switch (currentStep) { case 0: return (

Amount to Add setAmount(e.target.value)} />

) case 1: return (

Card Number setCardDetails({ ...cardDetails, number: e.target.value })} />

Expiry Date setCardDetails({ ...cardDetails, expiry: e.target.value })} />

CVV setCardDetails({ ...cardDetails, cvv: e.target.value })} />

) case 2: return (

Enter the OTP sent to your registered mobile number

setOtp(e.target.value)} />

) case 3: return (

Money Added Successfully

${amount} has been added to your Checking account.

) } } return ( ) } [V0_FILE]typescriptreact:file="components/send-money-modal.tsx" "use client" import { useState } from "react" import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { CheckCircle2 } from "lucide-react" const steps = ["Amount and Account", "Card Details", "OTP Verification", "Confirmation"] export function SendMoneyModal({ isOpen, onClose, onSendMoney, accounts }) { const [currentStep, setCurrentStep] = useState(0) const [amount, setAmount] = useState("") const [selectedAccount, setSelectedAccount] = useState("") const [cardDetails, setCardDetails] = useState({ number: "", expiry: "", cvv: "" }) const [otp, setOtp] = useState("") const handleContinue = () => { if (currentStep < steps.length - 1) { setCurrentStep(currentStep + 1) } else { onSendMoney(Number.parseFloat(amount), selectedAccount) onClose() } } const renderStepContent = () => { switch (currentStep) { case 0: return (

Amount to Send setAmount(e.target.value)} />

From Account

) case 1: return (

Card Number setCardDetails({ ...cardDetails, number: e.target.value })} />

Expiry Date setCardDetails({ ...cardDetails, expiry: e.target.value })} />

CVV setCardDetails({ ...cardDetails, cvv: e.target.value })} />

) case 2: return (

Enter the OTP sent to your registered mobile number

setOtp(e.target.value)} />

) case 3: return (

Money Sent Successfully

${amount} has been sent from your {selectedAccount} account.

) } } return ( ) } [V0_FILE]typescriptreact:file="components/top-up-modal.tsx" "use client" import { useState } from "react" import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { CheckCircle2 } from "lucide-react" const steps = ["Amount", "Card Details", "OTP Verification", "Confirmation"] export function TopUpModal({ isOpen, onClose, onTopUp }) { const [currentStep, setCurrentStep] = useState(0) const [amount, setAmount] = useState("") const [cardDetails, setCardDetails] = useState({ number: "", expiry: "", cvv: "" }) const [otp, setOtp] = useState("") const handleContinue = () => { if (currentStep < steps.length - 1) { setCurrentStep(currentStep + 1) } else { onTopUp(Number.parseFloat(amount)) onClose() } } const renderStepContent = () => { switch (currentStep) { case 0: return (

Top-up Amount setAmount(e.target.value)} />

) case 1: return (

Card Number setCardDetails({ ...cardDetails, number: e.target.value })} />

Expiry Date setCardDetails({ ...cardDetails, expiry: e.target.value })} />

CVV setCardDetails({ ...cardDetails, cvv: e.target.value })} />

) case 2: return (

Enter the OTP sent to your registered mobile number

setOtp(e.target.value)} />

) case 3: return (

Top-up Successful

${amount} has been added to your account.

) } } return ( ) } [V0_FILE]typescriptreact:file="components/request-money-modal.tsx" "use client" import { useState } from "react" import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { CheckCircle2 } from "lucide-react" const steps = ["Select Contact", "Enter Amount", "OTP Verification", "Confirmation"] const contacts = [ { id: "1", name: "John Doe", phoneNumber: "+1 234 567 8901" }, { id: "2", name: "Jane Smith", phoneNumber: "+1 987 654 3210" }, { id: "3", name: "Alice Johnson", phoneNumber: "+1 555 123 4567" }, ] export function RequestMoneyModal({ isOpen, onClose, onRequestMoney }) { const [currentStep, setCurrentStep] = useState(0) const [selectedContact, setSelectedContact] = useState(null) const [amount, setAmount] = useState("") const [otp, setOtp] = useState("") const handleContinue = () => { if (currentStep < steps.length - 1) { setCurrentStep(currentStep + 1) } else { onRequestMoney(Number.parseFloat(amount), selectedContact) onClose() } } const renderStepContent = () => { switch (currentStep) { case 0: return (

Select Contact {selectedContact && (

Contact Details:

Name: {selectedContact.name}

ID: {selectedContact.id}

Phone: {selectedContact.phoneNumber}

)}

) case 1: return (

Amount to Request setAmount(e.target.value)} />

) case 2: return (

Enter the OTP sent to your registered mobile number

setOtp(e.target.value)} />

) case 3: return (

Money Request Sent

${amount} has been requested from {selectedContact.name}.

) } } return ( ) } [V0_FILE]typescriptreact:file="components/notifications.tsx" "use client" import { useState } from "react" import { Bell, X, Info, AlertTriangle, CreditCard, TrendingUp, Gift } from "lucide-react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { ScrollArea } from "@/components/ui/scroll-area" const notifications = [ { id: 1, title: "New Feature", message: "Check out our new budget tracking tool!", date: "2023-07-15", icon: Info, color: "text-blue-500", }, { id: 2, title: "Account Alert", message: "Unusual activity detected on your account.", date: "2023-07-14", icon: AlertTriangle, color: "text-yellow-500", }, { id: 3, title: "Payment Due", message: "Your credit card payment is due in 3 days.", date: "2023-07-13", icon: CreditCard, color: "text-red-500", }, { id: 4, title: "Investment Update", message: "Your investment portfolio has grown by 5% this month.", date: "2023-07-12", icon: TrendingUp, color: "text-green-500", }, { id: 5, title: "New Offer", message: "You're eligible for a new savings account with higher interest!", date: "2023-07-11", icon: Gift, color: "text-purple-500", }, ] export function Notifications() { const [isOpen, setIsOpen] = useState(false) return (

{isOpen && ( Notifications {notifications.map((notification) => (

{notification.title}

{notification.message}

{notification.date}

))} )}

) } [V0_FILE]typescriptreact:file="components/profile-modal.tsx" "use client" import { useState } from "react" import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { CreditCard, Edit2, Save, Trash2 } from "lucide-react" interface ProfileModalProps { isOpen: boolean onClose: () => void } interface CardInfo { type: string number: string expiry: string } interface UserProfile { name: string email: string company: string phone: string accountNumber: string bankName: string cards: CardInfo[] } export function ProfileModal({ isOpen, onClose }: ProfileModalProps) { const [isEditing, setIsEditing] = useState(false) const [userProfile, setUserProfile] = useState({ name: "Dollar Gill", email: "dollar@example.com", company: "Acme Inc.", phone: "+1 (555) 123-4567", accountNumber: "1234567890", bankName: "Global Bank", cards: [ { type: "Visa", number: "************1387", expiry: "12/24" }, { type: "Amex", number: "***********2468", expiry: "06/25" }, { type: "Mastercard", number: "************9876", expiry: "03/26" }, ], }) const handleInputChange = (field: keyof UserProfile, value: string) => { setUserProfile((prev) => ({ ...prev, [field]: value })) } const handleSave = () => { setIsEditing(false) // Here you would typically send the updated profile to your backend console.log("Saving profile:", userProfile) } const handleRemoveCard = (index: number) => { setUserProfile((prev) => ({ ...prev, cards: prev.cards.filter((_, i) => i !== index), })) } return ( ) } [V0_FILE]typescriptreact:file="components/business-metrics.tsx" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { TrendingUp, Users, DollarSign, ArrowRight } from "lucide-react" const metrics = [ { id: 1, title: "Revenue Growth", subtitle: "Monthly revenue target", icon: TrendingUp, status: "On Track", progress: 75, target: 100000, current: 75000, unit: "$", }, { id: 2, title: "Customer Acquisition", subtitle: "New customers this quarter", icon: Users, status: "Behind", progress: 60, target: 1000, current: 600, unit: "", }, { id: 3, title: "Average Order Value", subtitle: "Target AOV for Q3", icon: DollarSign, status: "Ahead", progress: 110, target: 150, current: 165, unit: "$", }, ] const statusColors = { "On Track": "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200", Behind: "bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200", Ahead: "bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200", } export function BusinessMetrics() { return (

Business Metrics

{metrics.map((metric) => ( {metric.title}

{metric.subtitle}

{metric.status} {metric.current} / {metric.target} {metric.unit}

{metric.unit} {metric.target.toLocaleString()} {metric.progress}% complete

))}

) } [V0_FILE]typescriptreact:file="components/sidebar.tsx" "use client" import { useState } from "react" import Link from "next/link" import { usePathname } from "next/navigation" import { Home, BarChart2, Building2, Folder, Wallet, Receipt, CreditCard, Users2, Shield, MessagesSquare, Video, Settings, HelpCircle, Menu, ChevronLeft, } from "lucide-react" import { cn } from "@/lib/utils" import { Button } from "@/components/ui/button" import { Tooltip, TooltipContent, TooltipTrigger, TooltipProvider } from "@/components/ui/tooltip" const navigation = [ { name: "Dashboard", href: "/", icon: Home }, { name: "Analytics", href: "/analytics", icon: BarChart2 }, { name: "Organization", href: "/organization", icon: Building2 }, { name: "Projects", href: "/projects", icon: Folder }, { name: "Transactions", href: "/transactions", icon: Wallet }, { name: "Invoices", href: "/invoices", icon: Receipt }, { name: "Payments", href: "/payments", icon: CreditCard }, { name: "Members", href: "/members", icon: Users2 }, { name: "Permissions", href: "/permissions", icon: Shield }, { name: "Chat", href: "/chat", icon: MessagesSquare }, { name: "Meetings", href: "/meetings", icon: Video }, ] const bottomNavigation = [ { name: "Settings", href: "/settings", icon: Settings }, { name: "Help", href: "/help", icon: HelpCircle }, ] export function Sidebar() { const pathname = usePathname() const [isCollapsed, setIsCollapsed] = useState(false) const [isMobileOpen, setIsMobileOpen] = useState(false) const NavItem = ({ item, isBottom = false }) => ( {!isCollapsed && {item.name}} {isCollapsed && ( {item.name} )} ) return ( <>

{!isCollapsed && ( Flowers&Saints )}

) } [V0_FILE]typescriptreact:file="contexts/settings-context.tsx" isFixed="true" isQuickEdit="true" "use client" import { createContext, useContext, useEffect, useState } from "react" export interface UserSettings { avatar: string fullName: string email: string phone: string timezone: string language: string currency: string dateFormat: string fontSize: number theme: "light" | "dark" | "system" layout: "default" | "compact" | "expanded" notifications: { email: boolean push: boolean sms: boolean accountActivity: boolean newFeatures: boolean marketing: boolean frequency: "real-time" | "daily" | "weekly" quietHoursStart: string quietHoursEnd: string } privacy: { analyticsSharing: boolean personalizedAds: boolean visibility: "public" | "private" dataRetention: "6-months" | "1-year" | "2-years" | "indefinite" } } const defaultSettings: UserSettings = { avatar: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/38184074.jpg-M4vCjTSSWVw5RwWvvmrxXBcNVU8MBU.jpeg", fullName: "Dollar Singh", email: "dollar.singh@example.com", phone: "+1 (555) 123-4567", timezone: "utc-8", language: "en", currency: "usd", dateFormat: "mm-dd-yyyy", fontSize: 16, theme: "system", layout: "default", notifications: { email: true, push: true, sms: false, accountActivity: true, newFeatures: true, marketing: false, frequency: "real-time", quietHoursStart: "22:00", quietHoursEnd: "07:00", }, privacy: { analyticsSharing: true, personalizedAds: false, visibility: "public", dataRetention: "1-year", }, } interface SettingsContextType { settings: UserSettings updateSettings: (newSettings: Partial) => void updateNotificationSettings: (settings: Partial) => void updatePrivacySettings: (settings: Partial) => void } const SettingsContext = createContext(undefined) export function SettingsProvider({ children }: { children: React.ReactNode }) { const [settings, setSettings] = useState(() => { // Try to load settings from localStorage during initialization if (typeof window !== "undefined") { const savedSettings = localStorage.getItem("userSettings") if (savedSettings) { return JSON.parse(savedSettings) } } return defaultSettings }) // Save settings to localStorage whenever they change useEffect(() => { localStorage.setItem("userSettings", JSON.stringify(settings)) }, [settings]) const updateSettings = (newSettings: Partial) => { setSettings((prev) => ({ ...prev, ...newSettings })) } const updateNotificationSettings = (notificationSettings: Partial) => { setSettings((prev) => ({ ...prev, notifications: { ...prev.notifications, ...notificationSettings }, })) } const updatePrivacySettings = (privacySettings: Partial) => { setSettings((prev) => ({ ...prev, privacy: { ...prev.privacy, ...privacySettings }, })) } return ( {children} ) } export function useSettings() { const context = useContext(SettingsContext) if (context === undefined) { throw new Error("useSettings must be used within a SettingsProvider") } return context } [V0_FILE]typescriptreact:file="app/layout.tsx" import "./globals.css" import { Inter } from "next/font/google" import { ThemeProvider } from "@/components/theme-provider" import { Sidebar } from "@/components/sidebar" import { TopNav } from "@/components/top-nav" import { TooltipProvider } from "@/components/ui/tooltip" import { SettingsProvider } from "@/contexts/settings-context" import type React from "react" const inter = Inter({ subsets: ["latin"] }) export const metadata = { title: "Flowers&Saints Dashboard", description: "A modern, responsive financial dashboard", } export default function RootLayout({ children, }: { children: React.ReactNode }) { return (

{children}

) } [V0_FILE]typescriptreact:file="components/top-nav.tsx" "use client" import { ThemeToggle } from "./theme-toggle" import { Notifications } from "./notifications" import Link from "next/link" import { usePathname } from "next/navigation" import { useSettings } from "@/contexts/settings-context" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Button } from "@/components/ui/button" import React from "react" export function TopNav() { const pathname = usePathname() const pathSegments = pathname.split("/").filter(Boolean) const { settings } = useSettings() return (

{settings.fullName}

{settings.email}

Profile Settings Log out

) } [V0_FILE]typescriptreact:file="app/settings/page.tsx" isFixed="true" isQuickEdit="true" "use client" import { useSettings } from "@/contexts/settings-context" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Card, CardContent, CardDescription, CardHeader, CardTitle, CardFooter } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Switch } from "@/components/ui/switch" import { Button } from "@/components/ui/button" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Slider } from "@/components/ui/slider" import { Checkbox } from "@/components/ui/checkbox" import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Laptop, Smartphone, Tablet } from "lucide-react" import { useState } from "react" import { toast } from "sonner" const defaultAvatars = [ "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/9439775.jpg-4JVJWOjPksd3DtnBYJXoWHA5lc1DU9.jpeg", "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/375238645_11475210.jpg-lU8bOe6TLt5Rv51hgjg8NT8PsDBmvN.jpeg", "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/375238208_11475222.jpg-poEIzVHAGiIfMFQ7EiF8PUG1u0Zkzz.jpeg", "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/dd.jpg-4MCwPC2Bec6Ume26Yo1kao3CnONxDg.jpeg", "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/9334178.jpg-Y74tW6XFO68g7N36SE5MSNDNVKLQ08.jpeg", "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/5295.jpg-fLw0wGGZp8wuTzU5dnyfjZDwAHN98a.jpeg", "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/9720029.jpg-Yf9h2a3kT7rYyCb648iLIeHThq5wEy.jpeg", "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/27470341_7294795.jpg-XE0zf7R8tk4rfA1vm4fAHeZ1QoVEOo.jpeg", "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/799.jpg-0tEi4Xvg5YsFoGoQfQc698q4Dygl1S.jpeg", "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/9334228.jpg-eOsHCkvVrVAwcPHKYSs5sQwVKsqWpC.jpeg", ] export default function SettingsPage() { const { settings, updateSettings, updateNotificationSettings, updatePrivacySettings } = useSettings() const [selectedAvatar, setSelectedAvatar] = useState(settings.avatar) const handleSaveAccount = () => { updateSettings({ avatar: selectedAvatar, fullName: settings.fullName, email: settings.email, phone: settings.phone, timezone: settings.timezone, }) toast.success("Account settings saved successfully") } const handleSaveNotifications = () => { updateNotificationSettings(settings.notifications) toast.success("Notification settings saved successfully") } const handleSavePrivacy = () => { updatePrivacySettings(settings.privacy) toast.success("Privacy settings saved successfully") } return (

Settings

Account Security Preferences Notifications Privacy Account Settings Manage your account information

Current Avatar

{settings.fullName .split(" ") .map((n) => n[0]) .join("")}

Choose a new avatar

{defaultAvatars.map((avatar, index) => ( setSelectedAvatar(avatar)} > {index + 1} ))}

Or upload a custom avatar

Full Name updateSettings({ fullName: e.target.value })} />

Email updateSettings({ email: e.target.value })} />

Phone Number updateSettings({ phone: e.target.value })} />

Timezone

Security Settings Manage your account's security settings

Current Password

New Password

Confirm New Password

Enable Two-Factor Authentication

Login History Recent login activities on your account {[ { date: "2023-07-20", time: "14:30 UTC", ip: "192.168.1.1", location: "New York, USA" }, { date: "2023-07-19", time: "09:15 UTC", ip: "10.0.0.1", location: "London, UK" }, { date: "2023-07-18", time: "22:45 UTC", ip: "172.16.0.1", location: "Tokyo, Japan" }, ].map((login, index) => (

{login.date} {login.time} {login.ip} {login.location}

))} Active Sessions Currently active sessions on your account {[ { device: "Laptop", browser: "Chrome", os: "Windows 10", icon: Laptop }, { device: "Smartphone", browser: "Safari", os: "iOS 15", icon: Smartphone }, { device: "Tablet", browser: "Firefox", os: "Android 12", icon: Tablet }, ].map((session, index) => (

{session.device} {session.browser} {session.os}

))}

Preferences Customize your dashboard experience

Language

Currency

Date Format

Font Size

Theme

Light

Dark

System

Dashboard Layout

Default

Compact

Expanded

Notification Settings Manage how you receive notifications

Notification Channels

updateNotificationSettings({ ...settings.notifications, email: e.target.checked }) } /> Email Notifications

updateNotificationSettings({ ...settings.notifications, push: e.target.checked }) } /> Push Notifications

updateNotificationSettings({ ...settings.notifications, sms: e.target.checked })} /> SMS Notifications

Notification Types

updateNotificationSettings({ ...settings.notifications, accountActivity: e.target.checked }) } /> Account Activity

updateNotificationSettings({ ...settings.notifications, newFeatures: e.target.checked }) } /> New Features and Updates

updateNotificationSettings({ ...settings.notifications, marketing: e.target.checked }) } /> Marketing and Promotions

Notification Frequency

Quiet Hours

Privacy Settings Manage your privacy and data settings

Data Sharing

Share analytics data

Allow personalized ads updatePrivacySettings({ ...settings.privacy, personalizedAds: e.target.checked }) } />

Account Visibility updatePrivacySettings({ ...settings.privacy, visibility: value })} >

Public

Private

Data Retention Third-Party Integrations

Connected: Google Analytics, Facebook Pixel

) } [V0_FILE]typescriptreact:file="components/analytics/top-products.tsx" import { CheckCircle2 } from "lucide-react" const topProducts = [ { name: "Savings Account", revenue: "$1,200,000", growth: "+12%" }, { name: "Credit Card", revenue: "$980,000", growth: "+8%" }, { name: "Personal Loan", revenue: "$850,000", growth: "+15%" }, { name: "Mortgage", revenue: "$2,300,000", growth: "+5%" }, { name: "Investment Fund", revenue: "$1,800,000", growth: "+20%" }, ] export function TopProducts() { return (

{topProducts.map((product) => (

{product.name}

{product.revenue}

{product.growth}

))}

) } [V0_FILE]typescriptreact:file="components/analytics/recent-transactions.tsx" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Card, CardContent } from "@/components/ui/card" const recentTransactions = [ { id: "1", name: "Alice Johnson", email: "alice@example.com", amount: "+$350.00", status: "success", date: "2023-07-20", avatar: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/375238645_11475210.jpg-lU8bOe6TLt5Rv51hgjg8NT8PsDBmvN.jpeg", }, { id: "2", name: "Bob Smith", email: "bob@example.com", amount: "-$120.50", status: "pending", date: "2023-07-19", avatar: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/375238208_11475222.jpg-poEIzVHAGiIfMFQ7EiF8PUG1u0Zkzz.jpeg", }, { id: "3", name: "Charlie Brown", email: "charlie@example.com", amount: "+$1,000.00", status: "success", date: "2023-07-18", avatar: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/dd.jpg-4MCwPC2Bec6Ume26Yo1kao3CnONxDg.jpeg", }, { id: "4", name: "Diana Martinez", email: "diana@example.com", amount: "-$50.75", status: "failed", date: "2023-07-17", avatar: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/9334178.jpg-Y74tW6XFO68g7N36SE5MSNDNVKLQ08.jpeg", }, { id: "5", name: "Ethan Williams", email: "ethan@example.com", amount: "+$720.00", status: "success", date: "2023-07-16", avatar: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/5295.jpg-fLw0wGGZp8wuTzU5dnyfjZDwAHN98a.jpeg", }, ] export function RecentTransactions() { return (

{recentTransactions.map((transaction) => ( {transaction.name.charAt(0)}

{transaction.name}

{transaction.email}

{transaction.amount}

{transaction.date}

))}

) } [V0_FILE]typescriptreact:file="components/analytics/account-growth.tsx" "use client" import { Bar, BarChart, ResponsiveContainer, XAxis, YAxis, Tooltip } from "recharts" import { Card, CardContent } from "@/components/ui/card" import { useTheme } from "next-themes" const data = [ { month: "Jan", newAccounts: 100, totalAccounts: 1000 }, { month: "Feb", newAccounts: 120, totalAccounts: 1120 }, { month: "Mar", newAccounts: 150, totalAccounts: 1270 }, { month: "Apr", newAccounts: 180, totalAccounts: 1450 }, { month: "May", newAccounts: 200, totalAccounts: 1650 }, { month: "Jun", newAccounts: 220, totalAccounts: 1870 }, ] export function AccountGrowth() { const { theme } = useTheme() const CustomTooltip = ({ active, payload, label }) => { if (active && payload && payload.length) { return (

{label}

New Accounts: {payload[0].value}

Total Accounts: {payload[1].value}

) } return null } return ( } /> ) } [V0_FILE]typescriptreact:file="components/analytics/metrics-carousel.tsx" "use client" import { Card, CardContent } from "@/components/ui/card" import { DollarSign, Users, CreditCard, TrendingUp, Briefcase, ShieldCheck } from "lucide-react" import { useState, useEffect, useRef } from "react" import { Button } from "@/components/ui/button" const metrics = [ { title: "Total Revenue", value: "$1,234,567", icon: DollarSign, change: "+12.3%", description: "Overall earnings this quarter", }, { title: "Active Users", value: "45,678", icon: Users, change: "+5.7%", description: "Users engaged in the last 30 days", }, { title: "New Accounts", value: "1,234", icon: CreditCard, change: "+3.2%", description: "Fresh sign-ups this month", }, { title: "Growth Rate", value: "8.9%", icon: TrendingUp, change: "+1.5%", description: "Year-over-year expansion" }, { title: "Corporate Clients", value: "89", icon: Briefcase, change: "+10.1%", description: "Business accounts acquired", }, { title: "Security Index", value: "98.7%", icon: ShieldCheck, change: "+0.5%", description: "Overall system integrity score", }, ] export function MetricsCarousel() { const [currentIndex, setCurrentIndex] = useState(0) const [isAnimating, setIsAnimating] = useState(false) const carouselRef = useRef(null) const cardWidth = 100 / 3.5 // Show 3.5 cards const nextSlide = () => { if (!isAnimating) { setIsAnimating(true) setCurrentIndex((prevIndex) => (prevIndex + 1) % metrics.length) } } const prevSlide = () => { if (!isAnimating) { setIsAnimating(true) setCurrentIndex((prevIndex) => (prevIndex - 1 + metrics.length) % metrics.length) } } useEffect(() => { if (carouselRef.current) { const transitionEndHandler = () => { setIsAnimating(false) if (currentIndex === metrics.length - 1) { carouselRef.current!.style.transition = "none" setCurrentIndex(0) setTimeout(() => { carouselRef.current!.style.transition = "transform 0.3s ease-in-out" }, 50) } else if (currentIndex === 0) { carouselRef.current!.style.transition = "none" setCurrentIndex(metrics.length - 1) setTimeout(() => { carouselRef.current!.style.transition = "transform 0.3s ease-in-out" }, 50) } } carouselRef.current.addEventListener("transitionend", transitionEndHandler) return () => { carouselRef.current?.removeEventListener("transitionend", transitionEndHandler) } } }, [currentIndex]) const renderMetrics = () => { const items = [...metrics, ...metrics, ...metrics] return items.map((metric, index) => (

{metric.change}

{metric.title}

{metric.value}

{metric.description}

)) } return (

{renderMetrics()}

) } [V0_FILE]typescriptreact:file="components/analytics/user-activity.tsx" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Card, CardContent } from "@/components/ui/card" const userActivities = [ { id: "1", user: "Fiona Garcia", action: "Logged in", time: "2 minutes ago", avatar: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/9720029.jpg-Yf9h2a3kT7rYyCb648iLIeHThq5wEy.jpeg", }, { id: "2", user: "George Lee", action: "Updated profile", time: "10 minutes ago", avatar: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/27470341_7294795.jpg-XE0zf7R8tk4rfA1vm4fAHeZ1QoVEOo.jpeg", }, { id: "3", user: "Hannah Kim", action: "Made a transfer", time: "15 minutes ago", avatar: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/799.jpg-0tEi4Xvg5YsFoGoQfQc698q4Dygl1S.jpeg", }, { id: "4", user: "Ian Foster", action: "Opened new account", time: "30 minutes ago", avatar: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/9334228.jpg-eOsHCkvVrVAwcPHKYSs5sQwVKsqWpC.jpeg", }, ] export function UserActivity() { return (

{userActivities.map((activity) => ( {activity.user.charAt(0)}

{activity.user}

{activity.action}

{activity.time}

))}

) } [V0_FILE]typescriptreact:file="components/date-range-picker.tsx" "use client" import * as React from "react" import { CalendarIcon } from "@radix-ui/react-icons" import { addDays, format } from "date-fns" import type { DateRange } from "react-day-picker" import { cn } from "@/lib/utils" import { Button } from "@/components/ui/button" import { Calendar } from "@/components/ui/calendar" import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover" export function DateRangePicker({ className }: React.HTMLAttributes) { const [date, setDate] = React.useState({ from: new Date(2023, 0, 20), to: addDays(new Date(2023, 0, 20), 20), }) return (

) } [V0_FILE]typescriptreact:file="components/analytics/overview-cards.tsx" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { DollarSign, Users, CreditCard, TrendingUp } from "lucide-react" const cards = [ { title: "Total Revenue", icon: DollarSign, amount: "$45,231.89", description: "+20.1% from last month", trend: "up", }, { title: "New Customers", icon: Users, amount: "2,350", description: "+180.1% from last month", trend: "up", }, { title: "Active Accounts", icon: CreditCard, amount: "12,234", description: "+19% from last month", trend: "up", }, { title: "Growth Rate", icon: TrendingUp, amount: "18.6%", description: "+5.4% from last month", trend: "up", }, ] export function OverviewCards() { return ( <> {cards.map((card) => ( {card.title}

{card.amount}

{card.description}

{card.trend === "up" ? ( ) : ( )} {card.description.split(" ")[0]}

))} ) } [V0_FILE]typescriptreact:file="components/analytics/revenue-chart.tsx" "use client" import { Line, LineChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts" import { Card, CardContent } from "@/components/ui/card" import { useTheme } from "next-themes" const data = [ { month: "Jan", revenue: 2000 }, { month: "Feb", revenue: 2200 }, { month: "Mar", revenue: 2700 }, { month: "Apr", revenue: 2400 }, { month: "May", revenue: 2800 }, { month: "Jun", revenue: 3200 }, { month: "Jul", revenue: 3100 }, { month: "Aug", revenue: 3400 }, { month: "Sep", revenue: 3700 }, { month: "Oct", revenue: 3500 }, { month: "Nov", revenue: 3800 }, { month: "Dec", revenue: 4200 }, ] export function RevenueChart() { const { theme } = useTheme() const CustomTooltip = ({ active, payload, label }) => { if (active && payload && payload.length) { return (

{label}

Revenue: ${payload[0].value.toLocaleString()}

) } return null } return ( `$${value}`} /> } /> ) } [V0_FILE]typescriptreact:file="app/analytics/page.tsx" "use client" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { DateRangePicker } from "@/components/date-range-picker" import { OverviewTab } from "@/components/analytics/overview-tab" import { AnalyticsTab } from "@/components/analytics/analytics-tab" import { ReportsTab } from "@/components/analytics/reports-tab" import { NotificationsTab } from "@/components/analytics/notifications-tab" import { Button } from "@/components/ui/button" import { Download } from "lucide-react" export default function AnalyticsPage() { const handleExportData = () => { // Implement export functionality here console.log("Exporting data...") } return (

Analytics

Overview Analytics Reports Notifications

) } [V0_FILE]typescriptreact:file="components/analytics/overview-tab.tsx" "use client" import { useState } from "react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { OverviewCards } from "@/components/analytics/overview-cards" import { RevenueChart } from "@/components/analytics/revenue-chart" import { RecentTransactions } from "@/components/analytics/recent-transactions" import { AccountGrowth } from "@/components/analytics/account-growth" import { TopProducts } from "@/components/analytics/top-products" import { UserActivity } from "@/components/analytics/user-activity" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" export function OverviewTab() { const [comparisonPeriod, setComparisonPeriod] = useState("previous_month") return ( <>

Dashboard Overview

Compare to:

Revenue Recent Transactions

Account Growth Top Products

User Activity

) } [V0_FILE]typescriptreact:file="components/analytics/analytics-tab.tsx" "use client" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Bar, BarChart, Line, LineChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts" import { useTheme } from "next-themes" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { useState } from "react" const customerSegmentationData = [ { segment: "High Value", count: 1200 }, { segment: "Medium Value", count: 5300 }, { segment: "Low Value", count: 8500 }, { segment: "At Risk", count: 1700 }, { segment: "Lost", count: 800 }, ] const retentionRateData = [ { month: "Jan", rate: 95 }, { month: "Feb", rate: 93 }, { month: "Mar", rate: 94 }, { month: "Apr", rate: 95 }, { month: "May", rate: 97 }, { month: "Jun", rate: 98 }, ] const channelPerformanceData = [ { channel: "Direct", acquisitions: 1200, revenue: 50000 }, { channel: "Organic Search", acquisitions: 2500, revenue: 75000 }, { channel: "Paid Search", acquisitions: 1800, revenue: 60000 }, { channel: "Social Media", acquisitions: 1500, revenue: 45000 }, { channel: "Email", acquisitions: 900, revenue: 30000 }, ] export function AnalyticsTab() { const { theme } = useTheme() const [timeFrame, setTimeFrame] = useState("last_30_days") return (

Detailed Analytics

Customer Segmentation Customer Retention Rate

Channel Performance Key Metrics

Customer Lifetime Value

$1,250

Net Promoter Score

Customer Acquisition Cost

$75

Average Order Value

$120

) } [V0_FILE]typescriptreact:file="components/analytics/reports-tab.tsx" isFixed="true" isQuickEdit="true" "use client" import { useState } from "react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { Download, Printer } from "lucide-react" const reportTypes = [ "Financial Summary", "Customer Acquisition", "Product Performance", "Risk Assessment", "Marketing Campaign Analysis", "Operational Efficiency", ] const dummyReportData = { "Financial Summary": [ { id: 1, metric: "Total Revenue", value: "$1,234,567" }, { id: 2, metric: "Net Profit", value: "$345,678" }, { id: 3, metric: "Operating Expenses", value: "$567,890" }, { id: 4, metric: "Gross Margin", value: "28%" }, { id: 5, metric: "Return on Investment", value: "15%" }, ], "Customer Acquisition": [ { id: 1, metric: "New Customers", value: "1,234" }, { id: 2, metric: "Customer Acquisition Cost", value: "$50" }, { id: 3, metric: "Conversion Rate", value: "3.5%" }, { id: 4, metric: "Customer Lifetime Value", value: "$1,200" }, { id: 5, metric: "Churn Rate", value: "2.3%" }, ], // Add more report types here } export function ReportsTab() { const [selectedReport, setSelectedReport] = useState(reportTypes[0]) const handleGenerateReport = () => { console.log(`Generating ${selectedReport} report...`) } const handleDownloadReport = () => { console.log(`Downloading ${selectedReport} report...`) } const handlePrintReport = () => { console.log(`Printing ${selectedReport} report...`) } return (

Generate Report {selectedReport} Report Metric Value {dummyReportData[selectedReport]?.map((row) => ( {row.metric} {row.value} ))}

) } [V0_FILE]typescriptreact:file="components/analytics/notifications-tab.tsx" "use client" import { useState } from "react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Switch } from "@/components/ui/switch" import { Bell, AlertTriangle, TrendingUp, TrendingDown, DollarSign, Users } from "lucide-react" const notificationTypes = [ { id: "account", label: "Account Activity", icon: Bell }, { id: "security", label: "Security Alerts", icon: AlertTriangle }, { id: "performance", label: "Performance Updates", icon: TrendingUp }, { id: "market", label: "Market Trends", icon: TrendingDown }, { id: "financial", label: "Financial Reports", icon: DollarSign }, { id: "user", label: "User Behavior", icon: Users }, ] export function NotificationsTab() { const [notifications, setNotifications] = useState({ account: true, security: true, performance: false, market: false, financial: true, user: false, }) const toggleNotification = (id) => { setNotifications((prev) => ({ ...prev, [id]: !prev[id] })) } return (

Notification Preferences {notificationTypes.map((type) => (

{type.label}

toggleNotification(type.id)} />

))} Recent Notifications

Unusual account activity detected

2 hours ago

Your portfolio has grown by 5% this week

1 day ago

New feature: Advanced analytics now available

3 days ago

Monthly financial report is ready for review

5 days ago

) }