[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Overview } from "@/components/Overview" import { RecentTransactions } from "@/components/RecentTransactions" import { UserActivity } from "@/components/UserActivity" export default function DashboardPage() { return (

Admin Dashboard

Total Users

10,482

+20.1% from last month

Active Users

8,350

+15% from last month

Total Transactions

45,231

+34% from last month

Revenue

$567,890

+18.7% from last month

Overview Recent Transactions

User Activity

) } [V0_FILE]typescriptreact:file="components/Overview.tsx" isMerged="true" "use client" import { Bar, BarChart, ResponsiveContainer, XAxis, YAxis } from "recharts" const data = [ { name: "Jan", total: Math.floor(Math.random() * 5000) + 1000, }, { name: "Feb", total: Math.floor(Math.random() * 5000) + 1000, }, { name: "Mar", total: Math.floor(Math.random() * 5000) + 1000, }, { name: "Apr", total: Math.floor(Math.random() * 5000) + 1000, }, { name: "May", total: Math.floor(Math.random() * 5000) + 1000, }, { name: "Jun", total: Math.floor(Math.random() * 5000) + 1000, }, { name: "Jul", total: Math.floor(Math.random() * 5000) + 1000, }, { name: "Aug", total: Math.floor(Math.random() * 5000) + 1000, }, { name: "Sep", total: Math.floor(Math.random() * 5000) + 1000, }, { name: "Oct", total: Math.floor(Math.random() * 5000) + 1000, }, { name: "Nov", total: Math.floor(Math.random() * 5000) + 1000, }, { name: "Dec", total: Math.floor(Math.random() * 5000) + 1000, }, ] export function Overview() { return ( `$${value}`} /> ) } [V0_FILE]typescriptreact:file="components/RecentTransactions.tsx" isMerged="true" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" export function RecentTransactions() { const transactions = [ { id: "1", amount: "+$350", name: "Olivia Martin", email: "olivia.martin@email.com", status: "success", }, { id: "2", amount: "-$280", name: "Jackson Lee", email: "jackson.lee@email.com", status: "pending", }, { id: "3", amount: "+$1,200", name: "Isabella Nguyen", email: "isabella.nguyen@email.com", status: "success", }, { id: "4", amount: "-$150", name: "William Kim", email: "will@email.com", status: "success", }, { id: "5", amount: "+$2,000", name: "Sofia Davis", email: "sofia.davis@email.com", status: "success", }, ] return (

{transactions.map((transaction) => (

{transaction.name[0]}

{transaction.name}

{transaction.email}

{transaction.amount}

))}

) } [V0_FILE]typescriptreact:file="app/api-management/page.tsx" isMerged="true" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { APIKeys } from "@/components/APIKeys" import { APIUsage } from "@/components/APIUsage" export default function APIManagementPage() { return (

API Management

API Keys API Usage API Keys Manage your API keys for authentication API Usage Monitor your API usage and limits

) } [V0_FILE]typescriptreact:file="components/APIKeys.tsx" isMerged="true" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" export function APIKeys() { const apiKeys = [ { id: 1, name: "Production Key", key: "pk_live_1234567890abcdef", created: "2023-01-15" }, { id: 2, name: "Test Key", key: "pk_test_1234567890abcdef", created: "2023-02-20" }, ] return (

Name Key Created Actions {apiKeys.map((apiKey) => ( {apiKey.name} {apiKey.key} {apiKey.created} ))}

) } [V0_FILE]typescriptreact:file="components/APIUsage.tsx" isMerged="true" "use client" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Line, LineChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts" const data = [ { name: "Jan", usage: 400 }, { name: "Feb", usage: 300 }, { name: "Mar", usage: 200 }, { name: "Apr", usage: 278 }, { name: "May", usage: 189 }, { name: "Jun", usage: 239 }, { name: "Jul", usage: 349 }, ] export function APIUsage() { return ( API Usage Over Time ) } [V0_FILE]typescriptreact:file="app/stocks-assets/page.tsx" isMerged="true" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { StockList } from "@/components/StockList" import { AssetAllocation } from "@/components/AssetAllocation" export default function StocksAssetsPage() { return (

Stocks & Assets

Stock Watchlist Track your favorite stocks Asset Allocation Your current portfolio breakdown

) } [V0_FILE]typescriptreact:file="components/StockList.tsx" isMerged="true" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" const stocks = [ { symbol: "AAPL", name: "Apple Inc.", price: 150.25, change: 2.5 }, { symbol: "GOOGL", name: "Alphabet Inc.", price: 2750.8, change: -0.8 }, { symbol: "MSFT", name: "Microsoft Corporation", price: 305.15, change: 1.2 }, { symbol: "AMZN", name: "Amazon.com, Inc.", price: 3380.5, change: -1.5 }, { symbol: "TSLA", name: "Tesla, Inc.", price: 725.6, change: 3.7 }, ] export function StockList() { return ( Symbol Name Price Change {stocks.map((stock) => ( {stock.symbol} {stock.name} ${stock.price.toFixed(2)} 0 ? "text-green-600" : "text-red-600"}> {stock.change > 0 ? "+" : ""} {stock.change}% ))}

) } [V0_FILE]typescriptreact:file="components/AssetAllocation.tsx" isMerged="true" "use client" import { PieChart, Pie, Cell, ResponsiveContainer, Legend, Tooltip } from "recharts" const data = [ { name: "Stocks", value: 400 }, { name: "Bonds", value: 300 }, { name: "Real Estate", value: 200 }, { name: "Cryptocurrencies", value: 100 }, ] const COLORS = ["#0088FE", "#00C49F", "#FFBB28", "#FF8042"] export function AssetAllocation() { return ( {data.map((entry, index) => ( ))} ) } [V0_FILE]typescriptreact:file="app/transactions/page.tsx" isMerged="true" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { TransactionList } from "@/components/TransactionList" import { TransactionChart } from "@/components/TransactionChart" export default function TransactionsPage() { return (

Transactions

Recent Transactions Overview of the latest transactions Transaction Volume Daily transaction volume over time

) } [V0_FILE]typescriptreact:file="components/TransactionList.tsx" isMerged="true" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { Badge } from "@/components/ui/badge" const transactions = [ { id: 1, user: "John Doe", amount: 1000, type: "deposit", status: "completed", date: "2023-06-01" }, { id: 2, user: "Jane Smith", amount: 500, type: "withdrawal", status: "pending", date: "2023-06-02" }, { id: 3, user: "Bob Johnson", amount: 250, type: "transfer", status: "completed", date: "2023-06-03" }, { id: 4, user: "Alice Brown", amount: 750, type: "deposit", status: "completed", date: "2023-06-04" }, { id: 5, user: "Charlie Davis", amount: 100, type: "withdrawal", status: "failed", date: "2023-06-05" }, ] export function TransactionList() { return ( User Amount Type Status Date {transactions.map((transaction) => ( {transaction.user} ${transaction.amount.toFixed(2)} {transaction.type} {transaction.status} {transaction.date} ))}

) } [V0_FILE]typescriptreact:file="components/TransactionChart.tsx" isMerged="true" "use client" import { Line, LineChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts" const data = [ { date: "2023-05-01", volume: 5000 }, { date: "2023-05-02", volume: 7000 }, { date: "2023-05-03", volume: 6000 }, { date: "2023-05-04", volume: 8000 }, { date: "2023-05-05", volume: 9000 }, { date: "2023-05-06", volume: 8500 }, { date: "2023-05-07", volume: 7500 }, ] export function TransactionChart() { return ( ) } [V0_FILE]typescriptreact:file="app/user-management/page.tsx" isMerged="true" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { UserList } from "@/components/UserList" import { UserStats } from "@/components/UserStats" export default function UserManagementPage() { return (

User Management

User List Manage and view all users User Statistics Overview of user growth and activity

) } [V0_FILE]typescriptreact:file="components/UserList.tsx" isMerged="true" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { Badge } from "@/components/ui/badge" import { Button } from "@/components/ui/button" const users = [ { id: 1, name: "John Doe", email: "john@example.com", role: "admin", status: "active" }, { id: 2, name: "Jane Smith", email: "jane@example.com", role: "user", status: "active" }, { id: 3, name: "Bob Johnson", email: "bob@example.com", role: "user", status: "inactive" }, { id: 4, name: "Alice Brown", email: "alice@example.com", role: "manager", status: "active" }, { id: 5, name: "Charlie Davis", email: "charlie@example.com", role: "user", status: "pending" }, ] export function UserList() { return ( Name Email Role Status Actions {users.map((user) => ( {user.name} {user.email} {user.role} {user.status} ))}

) } [V0_FILE]typescriptreact:file="components/UserStats.tsx" isMerged="true" "use client" import { Bar, BarChart, ResponsiveContainer, XAxis, YAxis, Tooltip } from "recharts" const data = [ { month: "Jan", newUsers: 100, activeUsers: 500 }, { month: "Feb", newUsers: 120, activeUsers: 550 }, { month: "Mar", newUsers: 140, activeUsers: 600 }, { month: "Apr", newUsers: 160, activeUsers: 650 }, { month: "May", newUsers: 180, activeUsers: 700 }, { month: "Jun", newUsers: 200, activeUsers: 750 }, ] export function UserStats() { return ( ) } [V0_FILE]typescriptreact:file="components/UserActivity.tsx" isMerged="true" "use client" import { Line, LineChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts" const data = [ { date: "2023-05-01", logins: 200, transactions: 150, apiCalls: 1000 }, { date: "2023-05-02", logins: 220, transactions: 160, apiCalls: 1100 }, { date: "2023-05-03", logins: 240, transactions: 180, apiCalls: 1200 }, { date: "2023-05-04", logins: 280, transactions: 200, apiCalls: 1300 }, { date: "2023-05-05", logins: 300, transactions: 220, apiCalls: 1400 }, { date: "2023-05-06", logins: 320, transactions: 240, apiCalls: 1500 }, { date: "2023-05-07", logins: 340, transactions: 260, apiCalls: 1600 }, ] export function UserActivity() { return ( ) } [V0_FILE]typescriptreact:file="app/settings/page.tsx" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { ProfileSettings } from "@/components/ProfileSettings" import { SecuritySettings } from "@/components/SecuritySettings" import { NotificationSettings } from "@/components/NotificationSettings" export default function SettingsPage() { return (

Settings

Profile Security Notifications Profile Settings Manage your profile information Security Settings Manage your account security Notification Preferences Manage your notification settings

) } [V0_FILE]typescriptreact:file="components/ProfileSettings.tsx" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" export function ProfileSettings() { return ( ) } [V0_FILE]typescriptreact:file="components/SecuritySettings.tsx" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Switch } from "@/components/ui/switch" export function SecuritySettings() { return (

Current Password

New Password

Confirm New Password

Enable Two-Factor Authentication

) } [V0_FILE]typescriptreact:file="components/NotificationSettings.tsx" import { Checkbox } from "@/components/ui/checkbox" import { Label } from "@/components/ui/label" import { Button } from "@/components/ui/button" export function NotificationSettings() { return ( ) } [V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" import type { Metadata } from "next" import { Inter } from "next/font/google" import "./globals.css" import { cn } from "@/lib/utils" import { ThemeProvider } from "@/components/theme-provider" import { Toaster } from "@/components/ui/toaster" import Sidebar from "@/components/Sidebar" import Header from "@/components/Header" import type React from "react" import { motion } from "framer-motion" const inter = Inter({ subsets: ["latin"] }) export const metadata: Metadata = { title: "FinTech Dashboard", description: "Manage your fintech operations with ease", } export default function RootLayout({ children, }: { children: React.ReactNode }) { return (

{children}

) } [V0_FILE]typescriptreact:file="components/Sidebar.tsx" isFixed="true" isEdit="true" isQuickEdit="true" import Link from "next/link" import { Home, Code, BarChart2, DollarSign, Users, Settings } from "lucide-react" import { motion } from "framer-motion" const menuItems = [ { icon: Home, label: "Dashboard", href: "/" }, { icon: Code, label: "API Management", href: "/api-management" }, { icon: BarChart2, label: "Stocks & Assets", href: "/stocks-assets" }, { icon: DollarSign, label: "Transactions", href: "/transactions" }, { icon: Users, label: "User Management", href: "/user-management" }, { icon: Settings, label: "Settings", href: "/settings" }, ] const Sidebar = () => { return (

FinTech Dashboard

) } export default Sidebar [V0_FILE]typescriptreact:file="components/Header.tsx" isEdit="true" import { Bell, User } from "lucide-react" import { Button } from "@/components/ui/button" const Header = () => { return (

FinTech Dashboard

) } export default Header

About

Tags

Share

More from vixclotet

More Templates Like This

About

Tags

Share

About

Tags

Share

More from vixclotet

More Templates Like This