[V0_FILE]typescriptreact:file="components/kokonutui/layout.tsx" isMerged="true" "use client" import type { ReactNode } from "react" import Sidebar from "./sidebar" import TopNav from "./top-nav" import { useTheme } from "next-themes" import { useEffect, useState } from "react" interface LayoutProps { children: ReactNode } export default function Layout({ children }: LayoutProps) { const { theme } = useTheme() const [mounted, setMounted] = useState(false) useEffect(() => { setMounted(true) }, []) if (!mounted) { return null } return (

{children}

) } [V0_FILE]typescriptreact:file="components/kokonutui/top-nav.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger } from "@/components/ui/dropdown-menu" import { Bell, ChevronRight, Search, User2 } from "lucide-react" import Profile01 from "./profile-01" import Link from "next/link" interface BreadcrumbItem { label: string href?: string } export default function TopNav() { const breadcrumbs: BreadcrumbItem[] = [{ label: "Home", href: "/" }] return ( ) } [V0_FILE]typescriptreact:file="components/kokonutui/profile-01.tsx" isMerged="true" import { LogOut, MoveUpRight, Settings, CreditCard, FileText } from "lucide-react" import Image from "next/image" import Link from "next/link" interface MenuItem { label: string value?: string href: string icon?: React.ReactNode external?: boolean } interface Profile01Props { name: string role: string avatar: string subscription?: string } const defaultProfile = { name: "Eugene An", role: "Prompt Engineer", avatar: "https://ferf1mheo22r9ira.public.blob.vercel-storage.com/avatar-02-albo9B0tWOSLXCVZh9rX9KFxXIVWMr.png", subscription: "Free Trial", } satisfies Required export default function Profile01({ name = defaultProfile.name, role = defaultProfile.role, avatar = defaultProfile.avatar, subscription = defaultProfile.subscription, }: Partial = defaultProfile) { const menuItems: MenuItem[] = [ { label: "Subscription", value: subscription, href: "#", icon: , external: false, }, { label: "Settings", href: "#", icon: , }, { label: "Terms & Policies", href: "#", icon: , external: true, }, ] return (

{/* Profile Info */}

{name}

{role}

{menuItems.map((item) => (

{item.icon} {item.label}

{item.value && {item.value}} {item.external && }

))}

) } [V0_FILE]typescriptreact:file="components/kokonutui/list-03.tsx" isMerged="true" import { cn } from "@/lib/utils" import { Calendar, type LucideIcon, ArrowRight, CheckCircle2, Timer, AlertCircle, PiggyBank, TrendingUp, CreditCard, } from "lucide-react" import React from "react" interface ListItem { id: string title: string subtitle: string icon: LucideIcon iconStyle: string date: string time?: string amount?: string status: "pending" | "in-progress" | "completed" progress?: number } interface List03Props { items?: ListItem[] className?: string } const iconStyles = { savings: "bg-zinc-100 dark:bg-zinc-800 text-zinc-900 dark:text-zinc-100", investment: "bg-zinc-100 dark:bg-zinc-800 text-zinc-900 dark:text-zinc-100", debt: "bg-zinc-100 dark:bg-zinc-800 text-zinc-900 dark:text-zinc-100", } const statusConfig = { pending: { icon: Timer, class: "text-amber-600 dark:text-amber-400", bg: "bg-amber-100 dark:bg-amber-900/30", }, "in-progress": { icon: AlertCircle, class: "text-blue-600 dark:text-blue-400", bg: "bg-blue-100 dark:bg-blue-900/30", }, completed: { icon: CheckCircle2, class: "text-emerald-600 dark:text-emerald-400", bg: "bg-emerald-100 dark:bg-emerald-900/30", }, } const ITEMS: ListItem[] = [ { id: "1", title: "Emergency Fund", subtitle: "3 months of expenses saved", icon: PiggyBank, iconStyle: "savings", date: "Target: Dec 2024", amount: "$15,000", status: "in-progress", progress: 65, }, { id: "2", title: "Stock Portfolio", subtitle: "Tech sector investment plan", icon: TrendingUp, iconStyle: "investment", date: "Target: Jun 2024", amount: "$50,000", status: "pending", progress: 30, }, { id: "3", title: "Debt Repayment", subtitle: "Student loan payoff plan", icon: CreditCard, iconStyle: "debt", date: "Target: Mar 2025", amount: "$25,000", status: "in-progress", progress: 45, }, ] export default function List03({ items = ITEMS, className }: List03Props) { return (

{items.map((item) => (

{React.createElement(statusConfig[item.status].icon, { className: "w-3.5 h-3.5" })} {item.status.charAt(0).toUpperCase() + item.status.slice(1)}

{item.title}

{item.subtitle}

{typeof item.progress === "number" && (

Progress {item.progress}%

)} {item.amount && (

{item.amount} target

)}

{item.date}

))}

) } [V0_FILE]typescriptreact:file="components/kokonutui/list-01.tsx" isMerged="true" import { cn } from "@/lib/utils" import { ArrowUpRight, ArrowDownLeft, Wallet, SendHorizontal, QrCode, Plus, ArrowRight, CreditCard } from "lucide-react" interface AccountItem { id: string title: string description?: string balance: string type: "savings" | "checking" | "investment" | "debt" } interface List01Props { totalBalance?: string accounts?: AccountItem[] className?: string } const ACCOUNTS: AccountItem[] = [ { id: "1", title: "Main Savings", description: "Personal savings", balance: "$8,459.45", type: "savings", }, { id: "2", title: "Checking Account", description: "Daily expenses", balance: "$2,850.00", type: "checking", }, { id: "3", title: "Investment Portfolio", description: "Stock & ETFs", balance: "$15,230.80", type: "investment", }, { id: "4", title: "Credit Card", description: "Pending charges", balance: "$1,200.00", type: "debt", }, { id: "5", title: "Savings Account", description: "Emergency fund", balance: "$3,000.00", type: "savings", }, ] export default function List01({ totalBalance = "$26,540.25", accounts = ACCOUNTS, className }: List01Props) { return (

{/* Total Balance Section */}

Total Balance

{totalBalance}

{/* Accounts List */}

Your Accounts

{accounts.map((account) => (

{account.type === "savings" && ( )} {account.type === "checking" && } {account.type === "investment" && ( )} {account.type === "debt" && }

{account.title}

{account.description && (

{account.description}

)}

{account.balance}

))}

{/* Updated footer with four buttons */}

) } [V0_FILE]typescriptreact:file="components/theme-provider.tsx" isMerged="true" "use client" import { ThemeProvider as NextThemesProvider } from "next-themes" import type { ThemeProviderProps } from "next-themes" export function ThemeProvider({ children, ...props }: ThemeProviderProps) { return {children} } [V0_FILE]typescriptreact:file="components/theme-toggle.tsx" isMerged="true" "use client" import * as React from "react" import { Moon, Sun } from "lucide-react" import { useTheme } from "next-themes" export function ThemeToggle() { const [mounted, setMounted] = React.useState(false) const { theme, setTheme } = useTheme() React.useEffect(() => { setMounted(true) }, []) if (!mounted) { return null } return ( ) } [V0_FILE]javascript:file="tailwind.config.js" isFixed="true" isQuickEdit="true" isMerged="true" /** @type {import('tailwindcss').Config} */ module.exports = { darkMode: ["class"], content: ["./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}"], theme: { 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)", }, }, }, plugins: [require("tailwindcss-animate")], } [V0_FILE]typescriptreact:file="app/dashboard/page.tsx" isMerged="true" import Dashboard from "@/components/kokonutui/dashboard" export default function DashboardPage() { return } [V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import { Inter } from "next/font/google" import "./globals.css" import { ThemeProvider } from "@/components/theme-provider" const inter = Inter({ subsets: ["latin"] }) export const metadata = { title: "LoanTech Dashboard", description: "Modern financial dashboard for LoanTech", } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } [V0_FILE]typescriptreact:file="app/page.tsx" isQuickEdit="true" isMerged="true" import { redirect } from "next/navigation" export default function Home() { redirect("/dashboard") } [V0_FILE]typescriptreact:file="components/kokonutui/dashboard.tsx" isQuickEdit="true" isMerged="true" import Content from "./content" import Layout from "./layout" export default function Dashboard() { return ( ) } [V0_FILE]typescriptreact:file="components/kokonutui/content.tsx" isEdit="true" import List02 from "./list-02" import { CheckCircle2, ArrowRight, Plus, ChevronLeft, ChevronRight } from "lucide-react" export default function Content() { return (

{/* CSCS Active Banner */}

CSCS Active

Your CSCS and CHN is now active, you can begin trading.

{/* Portfolio and Wallet Cards */}

Total Portfolio Value

****

Wallet Value

****

{/* Biggest Daily Movers */}

Biggest daily movers

Stocks that have gained or lost the most in the last 24 hours

) } [V0_FILE]typescriptreact:file="components/kokonutui/list-02.tsx" isEdit="true" import { cn } from "@/lib/utils" import { ArrowUpRight, ArrowDownRight } from "lucide-react" interface Stock { id: string name: string company: string logo: string change: number } interface List02Props { stocks?: Stock[] className?: string } const STOCKS: Stock[] = [ { id: "1", name: "ARLA", company: "Arla Plc", logo: "/placeholder.svg?height=32&width=32", change: 4.5, }, { id: "2", name: "BUA CEMENT", company: "Bua Cement Plc", logo: "/placeholder.svg?height=32&width=32", change: 4.5, }, { id: "3", name: "NIGERIAN BREWERIES", company: "Nigerian Breweries Plc", logo: "/placeholder.svg?height=32&width=32", change: 4.5, }, { id: "4", name: "MTN", company: "MTN Plc", logo: "/placeholder.svg?height=32&width=32", change: 4.5, }, { id: "5", name: "UBA", company: "UBA Plc", logo: "/placeholder.svg?height=32&width=32", change: 4.5, }, { id: "6", name: "NESTLE", company: "Nestle Plc", logo: "/placeholder.svg?height=32&width=32", change: -14.44, }, { id: "7", name: "FCMB", company: "FCMB Plc", logo: "/placeholder.svg?height=32&width=32", change: -14.44, }, { id: "8", name: "GLO", company: "Glo Plc", logo: "/placeholder.svg?height=32&width=32", change: -14.44, }, { id: "9", name: "GTCO", company: "GTCo Plc", logo: "/placeholder.svg?height=32&width=32", change: -14.44, }, { id: "10", name: "FMN", company: "FMN Plc", logo: "/placeholder.svg?height=32&width=32", change: -14.44, }, ] export default function List02({ stocks = STOCKS, className }: List02Props) { return (

{stocks.map((stock) => (

{stock.name}

{stock.company}

0 ? "text-green-600 dark:text-green-400" : "text-red-600 dark:text-red-400", "group-hover:font-bold transition-all duration-200", )} > {stock.change > 0 ? "+" : ""} {stock.change}% {stock.change > 0 ? ( ) : ( )}

))}

) } [V0_FILE]typescriptreact:file="components/kokonutui/sidebar.tsx" isEdit="true" isQuickEdit="true" "use client" import { BarChart2, CreditCard, Wallet, Settings, HelpCircle, Menu, Clock } from "lucide-react" import { Home } from "lucide-react" import Link from "next/link" import { useState } from "react" import type React from "react" // Added import for React export default function Sidebar() { const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false) function handleNavigation() { setIsMobileMenuOpen(false) } function NavItem({ href, icon: Icon, children, }: { href: string icon: any children: React.ReactNode }) { return ( {children} ) } return ( <>

LoanTech

Home Portfolio Invest Wallets History

Settings Help

{isMobileMenuOpen && (

setIsMobileMenuOpen(false)} /> )} ) }

About

About