[V0_FILE]typescriptreact:file="app/page.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" import Link from "next/link" import { ArrowRight } from "lucide-react" import { Button } from "@/components/ui/button" import Navbar from "@/components/navbar" export default function Home() { return (

Banking that works for you

Secure, simple, and smart banking solutions for your everyday financial needs.

Quick Access

Our Services

Comprehensive banking solutions designed to meet your financial goals.

{[ { title: "Checking Accounts", description: "Everyday banking with no monthly fees and free online bill pay.", icon: "💳", }, { title: "Savings Accounts", description: "Competitive rates to help your money grow faster.", icon: "💰", }, { title: "Mobile Banking", description: "Bank on the go with our secure and easy-to-use mobile app.", icon: "📱", }, { title: "Personal Loans", description: "Flexible loan options with competitive rates for your needs.", icon: "📝", }, { title: "Mortgages", description: "Home financing solutions with personalized guidance.", icon: "🏠", }, { title: "Investment Services", description: "Expert advice to help you build and manage your portfolio.", icon: "📈", }, ].map((service, index) => (

{service.icon}

{service.title}

{service.description}

))}

) } [V0_FILE]typescriptreact:file="app/login/page.tsx" isMerged="true" import Link from "next/link" import { ArrowLeft, LockKeyhole } from "lucide-react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Checkbox } from "@/components/ui/checkbox" export default function LoginPage() { return (

Welcome back Enter your credentials to access your account

Username or Email

Password Forgot password?

Remember me for 30 days

Don't have an account?{" "} Sign up

Back to home

) } [V0_FILE]typescriptreact:file="app/dashboard/page.tsx" isEdit="true" isMerged="true" "use client" import Link from "next/link" import { ArrowRight, CreditCard, DollarSign, Download, Plus, Send, Settings, User } from "lucide-react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Progress } from "@/components/ui/progress" import Navbar from "@/components/navbar" export default function DashboardPage() { const accounts = [ { id: "1", name: "Main Checking", number: "****4567", balance: 5840.5, type: "checking", }, { id: "2", name: "Savings Account", number: "****7890", balance: 12750.75, type: "savings", }, { id: "3", name: "Credit Card", number: "****2345", balance: 1250.0, limit: 5000.0, type: "credit", }, ] const recentTransactions = [ { id: "t1", description: "Grocery Store", amount: -85.32, date: "Today", category: "Shopping", }, { id: "t2", description: "Monthly Salary", amount: 3200.0, date: "Yesterday", category: "Income", }, { id: "t3", description: "Electric Bill", amount: -124.79, date: "Mar 3, 2025", category: "Utilities", }, { id: "t4", description: "Restaurant", amount: -64.25, date: "Mar 2, 2025", category: "Dining", }, { id: "t5", description: "Online Transfer", amount: -500.0, date: "Mar 1, 2025", category: "Transfer", }, ] const upcomingPayments = [ { id: "p1", description: "Rent Payment", amount: 1200.0, dueDate: "Mar 10, 2025", }, { id: "p2", description: "Car Insurance", amount: 145.5, dueDate: "Mar 15, 2025", }, { id: "p3", description: "Internet Bill", amount: 79.99, dueDate: "Mar 18, 2025", }, ] return (

Dashboard

Welcome back, John Doe

{accounts.map((account) => (

{account.name} {account.number}

{account.type === "credit" ? ( Credit ) : ( {account.type} )}

${account.balance.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 })}

{account.type === "credit" && (

Credit Limit: ${account.limit.toLocaleString()} {Math.round((account.balance / account.limit) * 100)}% used

)} ))}

Recent Transactions

{recentTransactions.map((transaction) => (

0 ? "bg-green-100" : "bg-muted" }`} > {transaction.amount > 0 ? ( ) : ( )}

{transaction.description}

{transaction.date} · {transaction.category}

0 ? "text-green-600" : ""}`}> {transaction.amount > 0 ? "+" : ""}$ {Math.abs(transaction.amount).toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2, })}

))}

Upcoming Payments

{upcomingPayments.map((payment) => (

{payment.description}

Due {payment.dueDate}

$ {payment.amount.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2, })}

))}

Quick Actions

) } [V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true" import type React from "react" import type { Metadata } from "next" import { Inter } from "next/font/google" import "./globals.css" const inter = Inter({ subsets: ["latin"] }) export const metadata: Metadata = { title: "SecureBank - Modern Banking Solutions", description: "Secure, simple, and smart banking solutions for your everyday financial needs.", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]css:file="app/globals.css" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 0 0% 100%; --foreground: 222.2 84% 4.9%; --card: 0 0% 100%; --card-foreground: 222.2 84% 4.9%; --popover: 0 0% 100%; --popover-foreground: 222.2 84% 4.9%; --primary: 142 76% 36%; --primary-foreground: 210 40% 98%; --secondary: 210 40% 96.1%; --secondary-foreground: 222.2 47.4% 11.2%; --muted: 210 40% 96.1%; --muted-foreground: 215.4 16.3% 46.9%; --accent: 210 40% 96.1%; --accent-foreground: 222.2 47.4% 11.2%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 210 40% 98%; --border: 214.3 31.8% 91.4%; --input: 214.3 31.8% 91.4%; --ring: 142 76% 36%; --ring-foreground: 222.2 84% 4.9%; --radius: 0.5rem; --chart-1: 142 76% 36%; --chart-2: 25 95% 53%; --chart-3: 262 83% 58%; --chart-4: 199 89% 48%; --chart-5: 0 84% 60%; } .dark { --background: 222.2 84% 4.9%; --foreground: 210 40% 98%; --card: 222.2 84% 4.9%; --card-foreground: 210 40% 98%; --popover: 222.2 84% 4.9%; --popover-foreground: 210 40% 98%; --primary: 142 70% 50%; --primary-foreground: 222.2 47.4% 11.2%; --secondary: 217.2 32.6% 17.5%; --secondary-foreground: 210 40% 98%; --muted: 217.2 32.6% 17.5%; --muted-foreground: 215 20.2% 65.1%; --accent: 217.2 32.6% 17.5%; --accent-foreground: 210 40% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 210 40% 98%; --border: 217.2 32.6% 17.5%; --input: 217.2 32.6% 17.5%; --ring: 142 70% 50%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } [V0_FILE]typescriptreact:file="tailwind.config.js" isMerged="true" /** @type {import('tailwindcss').Config} */ module.exports = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}", ], 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]typescriptreact:file="components/navbar.tsx" isMerged="true" "use client" import { useState } from "react" import Link from "next/link" import { usePathname } from "next/navigation" import { Bell, ChevronDown, CreditCard, DollarSign, FileText, HelpCircle, Home, LogOut, Menu, MessageSquare, PieChart, Search, Send, Settings, Shield, User, X, } from "lucide-react" import { Button } from "@/components/ui/button" import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Badge } from "@/components/ui/badge" import { Input } from "@/components/ui/input" import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu" import { NavigationMenu, NavigationMenuContent, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, navigationMenuTriggerStyle, } from "@/components/ui/navigation-menu" export default function Navbar({ isLoggedIn = false }) { const pathname = usePathname() const [isMobileNavOpen, setIsMobileNavOpen] = useState(false) const [isSearchOpen, setIsSearchOpen] = useState(false) // Navigation items for main menu const mainNavItems = [ { title: "Personal", href: "/personal", description: "Banking solutions for individuals and families", children: [ { title: "Checking Accounts", href: "/personal/checking", description: "Everyday banking with no monthly fees", icon: CreditCard, }, { title: "Savings Accounts", href: "/personal/savings", description: "Grow your money with competitive rates", icon: DollarSign, }, { title: "Credit Cards", href: "/personal/credit-cards", description: "Rewards and benefits for your lifestyle", icon: CreditCard, }, { title: "Loans & Mortgages", href: "/personal/loans", description: "Financing solutions for your needs", icon: Home, }, ], }, { title: "Business", href: "/business", description: "Financial solutions for businesses of all sizes", children: [ { title: "Business Checking", href: "/business/checking", description: "Efficient cash management for your business", icon: CreditCard, }, { title: "Business Loans", href: "/business/loans", description: "Capital to grow your business", icon: DollarSign, }, { title: "Merchant Services", href: "/business/merchant", description: "Payment processing solutions", icon: CreditCard, }, { title: "Treasury Management", href: "/business/treasury", description: "Optimize your cash flow", icon: PieChart, }, ], }, { title: "Wealth", href: "/wealth", description: "Investment and wealth management services", children: [ { title: "Investment Services", href: "/wealth/investments", description: "Build and manage your portfolio", icon: PieChart, }, { title: "Retirement Planning", href: "/wealth/retirement", description: "Secure your financial future", icon: FileText, }, { title: "Estate Planning", href: "/wealth/estate", description: "Preserve and transfer your wealth", icon: Shield, }, { title: "Private Banking", href: "/wealth/private", description: "Personalized financial services", icon: User, }, ], }, { title: "Resources", href: "/resources", children: [ { title: "Financial Education", href: "/resources/education", description: "Learn about personal finance", icon: FileText, }, { title: "Security Center", href: "/resources/security", description: "Protect your financial information", icon: Shield, }, { title: "Help Center", href: "/resources/help", description: "Find answers to your questions", icon: HelpCircle, }, { title: "Locations", href: "/resources/locations", description: "Find branches and ATMs near you", icon: Home, }, ], }, ] // Navigation items for authenticated users const dashboardNavItems = [ { icon: Home, label: "Dashboard", href: "/dashboard" }, { icon: CreditCard, label: "Accounts", href: "/dashboard/accounts" }, { icon: Send, label: "Transfers", href: "/dashboard/transfers" }, { icon: PieChart, label: "Insights", href: "/dashboard/insights" }, { icon: Bell, label: "Notifications", href: "/dashboard/notifications" }, { icon: Settings, label: "Settings", href: "/dashboard/settings" }, ] // Notifications for the notification dropdown const notifications = [ { id: "n1", title: "Payment Due", description: "Your credit card payment is due in 3 days", time: "2 hours ago", unread: true, }, { id: "n2", title: "Security Alert", description: "New login detected from Chicago, IL", time: "Yesterday", unread: true, }, { id: "n3", title: "Transfer Complete", description: "$500 has been transferred to your Savings account", time: "2 days ago", unread: false, }, ] return (

{/* Logo and Mobile Menu */}

setIsMobileNavOpen(false)}>

SecureBank

{/* Mobile Search */}

{/* Mobile Navigation */}

{isLoggedIn ? ( <>

John Doe

john.doe@example.com

) : ( <>

{mainNavItems.map((section, index) => (

setIsMobileNavOpen(false)} > {section.title}

{section.children?.map((item, childIndex) => ( setIsMobileNavOpen(false)} > {item.title} ))}

))}

setIsMobileNavOpen(false)}> setIsMobileNavOpen(false)}>

)}

{/* Logo */}

SecureBank

{/* Desktop Navigation */} {!isLoggedIn ? ( {mainNavItems.map((item, index) => ( {item.children ? ( <> {item.title}

{child.title}

{child.description}

) : ( {item.title} )} ))} ) : (

{dashboardNavItems.slice(0, 4).map((item, index) => ( {item.label} ))}

)} {/* Right Side - Search, Notifications, Profile */}

{/* Search Toggle */} {/* Expanded Search */} {isSearchOpen && (

Quick Links

{["Transfer Money", "Pay Bills", "Account Statements", "Support"].map((item, i) => ( ))}

)} {isLoggedIn ? ( <> {/* Notifications */} Notifications {notifications.map((notification) => (

{notification.title} {notification.unread && ( New )}

{notification.description} {notification.time} ))} View all notifications {/* User Profile */}

John Doe

john.doe@example.com

Profile Settings Support Sign out ) : (

)}

{/* Secondary Navigation for Logged In Users */} {isLoggedIn && (

Last login: Today, 10:45 AM Secure

)}

) } [V0_FILE]typescript:file="pages/api/accounts/create.ts" isMerged="true" import type { NextApiRequest, NextApiResponse } from "next" import { getSession } from "next-auth/react" import { PrismaClient } from "@prisma/client" const prisma = new PrismaClient() export default async function handler(req: NextApiRequest, res: NextApiResponse) { if (req.method !== "POST") { return res.status(405).json({ message: "Method not allowed" }) } const session = await getSession({ req }) if (!session) { return res.status(401).json({ message: "Unauthorized" }) } const { type } = req.body if (!type) { return res.status(400).json({ message: "Account type is required" }) } try { const user = await prisma.user.findUnique({ where: { email: session.user?.email as string }, }) if (!user) { return res.status(404).json({ message: "User not found" }) } const accountNumber = Math.floor(Math.random() * 1000000000) .toString() .padStart(9, "0") const account = await prisma.bankAccount.create({ data: { userId: user.id, accountNumber, type, }, }) res.status(201).json(account) } catch (error) { console.error("Account creation error:", error) res.status(500).json({ message: "Internal server error" }) } finally { await prisma.$disconnect() } } [V0_FILE]typescript:file="pages/api/accounts/index.ts" isMerged="true" import type { NextApiRequest, NextApiResponse } from "next" import { getSession } from "next-auth/react" import { PrismaClient } from "@prisma/client" const prisma = new PrismaClient() export default async function handler(req: NextApiRequest, res: NextApiResponse) { if (req.method !== "GET") { return res.status(405).json({ message: "Method not allowed" }) } const session = await getSession({ req }) if (!session) { return res.status(401).json({ message: "Unauthorized" }) } try { const user = await prisma.user.findUnique({ where: { email: session.user?.email as string }, include: { bankAccounts: true }, }) if (!user) { return res.status(404).json({ message: "User not found" }) } res.status(200).json(user.bankAccounts) } catch (error) { console.error("Fetch accounts error:", error) res.status(500).json({ message: "Internal server error" }) } finally { await prisma.$disconnect() } } [V0_FILE]typescript:file="pages/api/transactions/create.ts" isMerged="true" import type { NextApiRequest, NextApiResponse } from "next" import { getSession } from "next-auth/react" import { PrismaClient } from "@prisma/client" const prisma = new PrismaClient() export default async function handler(req: NextApiRequest, res: NextApiResponse) { if (req.method !== "POST") { return res.status(405).json({ message: "Method not allowed" }) } const session = await getSession({ req }) if (!session) { return res.status(401).json({ message: "Unauthorized" }) } const { fromAccountId, toAccountId, amount, type, description } = req.body if (!fromAccountId || !amount || !type) { return res.status(400).json({ message: "Missing required fields" }) } try { const fromAccount = await prisma.bankAccount.findUnique({ where: { id: fromAccountId }, include: { user: true }, }) if (!fromAccount || fromAccount.user.email !== session.user?.email) { return res.status(403).json({ message: "Forbidden" }) } if (fromAccount.balance < amount && type !== "DEPOSIT") { return res.status(400).json({ message: "Insufficient funds" }) } const transaction = await prisma.transaction.create({ data: { fromAccountId, toAccountId, amount, type, description, status: "COMPLETED", }, }) // Update account balances if (type === "WITHDRAWAL" || type === "TRANSFER") { await prisma.bankAccount.update({ where: { id: fromAccountId }, data: { balance: { decrement: amount } }, }) } if (type === "DEPOSIT") { await prisma.bankAccount.update({ where: { id: fromAccountId }, data: { balance: { increment: amount } }, }) } if (type === "TRANSFER" && toAccountId) { await prisma.bankAccount.update({ where: { id: toAccountId }, data: { balance: { increment: amount } }, }) } res.status(201).json(transaction) } catch (error) { console.error("Transaction creation error:", error) res.status(500).json({ message: "Internal server error" }) } finally { await prisma.$disconnect() } } [V0_FILE]typescriptreact:file="components/TransactionForm.tsx" isMerged="true" "use client" import type React from "react" import { useState } from "react" import type { BankAccount } from "@prisma/client" type TransactionFormProps = { accounts: BankAccount[] onTransactionComplete: () => void } export default function TransactionForm({ accounts, onTransactionComplete }: TransactionFormProps) { const [fromAccountId, setFromAccountId] = useState("") const [toAccountId, setToAccountId] = useState("") const [amount, setAmount] = useState("") const [type, setType] = useState("DEPOSIT") const [description, setDescription] = useState("") const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() const response = await fetch("/api/transactions/create", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ fromAccountId, toAccountId, amount: Number.parseFloat(amount), type, description }), }) if (response.ok) { onTransactionComplete() setAmount("") setDescription("") } else { const data = await response.json() alert(data.message) } } return (

Transaction Type

From Account

{type === "TRANSFER" && (

To Account

)}

Amount setAmount(e.target.value)} className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" required />

Description setDescription(e.target.value)} className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" />

) } [V0_FILE]typescriptreact:file="pages/dashboard.tsx" isFixed="true" isQuickEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import { useSession } from "next-auth/react" import Layout from "../components/Layout" import TransactionForm from "../components/TransactionForm" import type { BankAccount, Transaction } from "@prisma/client" export default function Dashboard() { const { data: session } = useSession() const [accounts, setAccounts] = useState([]) const [transactions, setTransactions] = useState([]) const [loading, setLoading] = useState(true) useEffect(() => { if (session) { fetchAccounts() fetchTransactions() } }, [session]) const fetchAccounts = async () => { const res = await fetch("/api/accounts") if (res.ok) { const data = await res.json() setAccounts(data) } setLoading(false) } const fetchTransactions = async () => { const res = await fetch("/api/transactions") if (res.ok) { const data = await res.json() setTransactions(data) } } const handleTransactionComplete = () => { fetchAccounts() fetchTransactions() } if (!session) { return

Access Denied

} if (loading) { return

} return (

Dashboard

Welcome, {session.user?.name}!

Your Accounts

{accounts.length === 0 ? (

You don't have any accounts yet.

) : (

{accounts.map((account) => (

{account.type} Account

Account Number: {account.accountNumber}

${account.balance.toFixed(2)}

))}

)}

New Transaction

Recent Transactions

{transactions.length === 0 ? (

No recent transactions.

) : (

{transaction.description || transaction.type}

{new Date(transaction.createdAt).toLocaleDateString()}

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

)}

) } [V0_FILE]plaintext:file="prisma/schema.prisma" isFixed="true" isEdit="true" isQuickEdit="true" // Existing models... model BankAccount { id String @id @default(cuid()) userId String accountNumber String @unique balance Decimal @default(0) type AccountType user User @relation(fields: [userId], references: [id], onDelete: Cascade) transactions Transaction[] createdAt DateTime @default(now()) updatedAt DateTime @updatedAt } model Transaction { id String @id @default(cuid()) amount Decimal type TransactionType description String? fromAccountId String toAccountId String? fromAccount BankAccount @relation(fields: [fromAccountId], references: [id]) status TransactionStatus @default(PENDING) createdAt DateTime @default(now()) updatedAt DateTime @updatedAt } enum AccountType { CHECKING SAVINGS CREDIT } enum TransactionType { DEPOSIT WITHDRAWAL TRANSFER } enum TransactionStatus { PENDING COMPLETED FAILED } // Update User model model User { id String @id @default(cuid()) name String? email String @unique emailVerified DateTime? password String image String? role Role @default(USER) phoneNumber String? address String? dateOfBirth DateTime? twoFactorEnabled Boolean @default(false) accounts BankAccount[] sessions Session[] createdAt DateTime @default(now()) updatedAt DateTime @updatedAt } enum Role { USER ADMIN } model Session { id String @id @default(cuid()) userId String expires DateTime sessionToken String @unique user User @relation(fields: [userId], references: [id], onDelete: Cascade) createdAt DateTime @default(now()) updatedAt DateTime @updatedAt } [V0_FILE]typescript:file="pages/api/user/profile.ts" import type { NextApiRequest, NextApiResponse } from "next" import { getSession } from "next-auth/react" import { PrismaClient } from "@prisma/client" const prisma = new PrismaClient() export default async function handler(req: NextApiRequest, res: NextApiResponse) { const session = await getSession({ req }) if (!session) { return res.status(401).json({ message: "Unauthorized" }) } if (req.method === "GET") { try { const user = await prisma.user.findUnique({ where: { email: session.user?.email as string }, }) if (!user) { return res.status(404).json({ message: "User not found" }) } res.status(200).json(user) } catch (error) { console.error("Fetch user profile error:", error) res.status(500).json({ message: "Internal server error" }) } } else if (req.method === "PUT") { const { name, email, phoneNumber, address, dateOfBirth } = req.body try { const updatedUser = await prisma.user.update({ where: { email: session.user?.email as string }, data: { name, email, phoneNumber, address, dateOfBirth: dateOfBirth ? new Date(dateOfBirth) : null, }, }) res.status(200).json(updatedUser) } catch (error) { console.error("Update user profile error:", error) res.status(500).json({ message: "Internal server error" }) } } else { res.setHeader("Allow", ["GET", "PUT"]) res.status(405).end(`Method ${req.method} Not Allowed`) } } [V0_FILE]typescript:file="pages/api/user/setup-2fa.ts" import type { NextApiRequest, NextApiResponse } from "next" import { getSession } from "next-auth/react" import { PrismaClient } from "@prisma/client" import speakeasy from "speakeasy" import qrcode from "qrcode" const prisma = new PrismaClient() export default async function handler(req: NextApiRequest, res: NextApiResponse) { const session = await getSession({ req }) if (!session) { return res.status(401).json({ message: "Unauthorized" }) } if (req.method === "POST") { try { const user = await prisma.user.findUnique({ where: { email: session.user?.email as string }, }) if (!user) { return res.status(404).json({ message: "User not found" }) } const secret = speakeasy.generateSecret({ name: "SecureBank" }) const otpauthUrl = secret.otpauth_url const qrCodeDataUrl = await qrcode.toDataURL(otpauthUrl as string) await prisma.user.update({ where: { id: user.id }, data: { twoFactorSecret: secret.base32, twoFactorEnabled: false, }, }) res.status(200).json({ qrCodeDataUrl, secret: secret.base32 }) } catch (error) { console.error("Setup 2FA error:", error) res.status(500).json({ message: "Internal server error" }) } } else { res.setHeader("Allow", ["POST"]) res.status(405).end(`Method ${req.method} Not Allowed`) } } [V0_FILE]typescript:file="pages/api/user/verify-2fa.ts" import type { NextApiRequest, NextApiResponse } from "next" import { getSession } from "next-auth/react" import { PrismaClient } from "@prisma/client" import speakeasy from "speakeasy" const prisma = new PrismaClient() export default async function handler(req: NextApiRequest, res: NextApiResponse) { const session = await getSession({ req }) if (!session) { return res.status(401).json({ message: "Unauthorized" }) } if (req.method === "POST") { const { token } = req.body try { const user = await prisma.user.findUnique({ where: { email: session.user?.email as string }, }) if (!user || !user.twoFactorSecret) { return res.status(400).json({ message: "Invalid request" }) } const verified = speakeasy.totp.verify({ secret: user.twoFactorSecret, encoding: "base32", token, }) if (verified) { await prisma.user.update({ where: { id: user.id }, data: { twoFactorEnabled: true }, }) res.status(200).json({ message: "Two-factor authentication enabled" }) } else { res.status(400).json({ message: "Invalid token" }) } } catch (error) { console.error("Verify 2FA error:", error) res.status(500).json({ message: "Internal server error" }) } } else { res.setHeader("Allow", ["POST"]) res.status(405).end(`Method ${req.method} Not Allowed`) } } [V0_FILE]typescriptreact:file="components/TwoFactorSetup.tsx" "use client" import { useState } from "react" export default function TwoFactorSetup() { const [qrCodeDataUrl, setQrCodeDataUrl] = useState(null) const [secret, setSecret] = useState(null) const [token, setToken] = useState("") const [isEnabled, setIsEnabled] = useState(false) const setupTwoFactor = async () => { const res = await fetch("/api/user/setup-2fa", { method: "POST" }) if (res.ok) { const data = await res.json() setQrCodeDataUrl(data.qrCodeDataUrl) setSecret(data.secret) } } const verifyTwoFactor = async () => { const res = await fetch("/api/user/verify-2fa", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ token }), }) if (res.ok) { setIsEnabled(true) } else { alert("Invalid token. Please try again.") } } return (

Two-Factor Authentication

{!isEnabled ? ( <> {!qrCodeDataUrl ? ( ) : (

Scan this QR code with your authenticator app:

Or enter this code manually: {secret}

Enter the 6-digit code from your authenticator app: setToken(e.target.value)} className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" />

)} ) : (

Two-Factor Authentication is enabled.

)}

) } [V0_FILE]typescriptreact:file="pages/profile.tsx" isFixed="true" isQuickEdit="true" "use client" import type React from "react" import { useState, useEffect } from "react" import { useSession } from "next-auth/react" import Layout from "../components/Layout" import type { User } from "@prisma/client" import TwoFactorSetup from "../components/TwoFactorSetup" export default function Profile() { const { data: session } = useSession() const [user, setUser] = useState(null) const [loading, setLoading] = useState(true) const [editMode, setEditMode] = useState(false) const [formData, setFormData] = useState({ name: "", email: "", phoneNumber: "", address: "", dateOfBirth: "", }) useEffect(() => { if (session) { fetchUserProfile() } }, [session]) const fetchUserProfile = async () => { const res = await fetch("/api/user/profile") if (res.ok) { const data = await res.json() setUser(data) setFormData({ name: data.name || "", email: data.email || "", phoneNumber: data.phoneNumber || "", address: data.address || "", dateOfBirth: data.dateOfBirth ? new Date(data.dateOfBirth).toISOString().split("T")[0] : "", }) } setLoading(false) } const handleInputChange = (e: React.ChangeEvent) => { setFormData({ ...formData, [e.target.name]: e.target.value }) } const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() const res = await fetch("/api/user/profile", { method: "PUT", headers: { "Content-Type": "application/json" }, body: JSON.stringify(formData), }) if (res.ok) { setEditMode(false) fetchUserProfile() } else { const data = await res.json() alert(data.message) } } if (!session) { return

Access Denied

} if (loading) { return

} return (

Profile

{editMode ? ( ) : (

User Information

Personal details and application.

Full name: {user?.name}
Email address: {user?.email}
Phone number: {user?.phoneNumber || "Not provided"}
Address: {user?.address || "Not provided"}
Date of birth: {user?.dateOfBirth ? new Date(user.dateOfBirth).toLocaleDateString() : "Not provided"}

)} ) } [V0_FILE]typescriptreact:file="pages/admin/dashboard.tsx" "use client" import { useState, useEffect } from "react" import { useSession } from "next-auth/react" import Layout from "../../components/Layout" import type { User, Transaction } from "@prisma/client" export default function AdminDashboard() { const { data: session } = useSession() const [users, setUsers] = useState([]) const [transactions, setTransactions] = useState([]) const [loading, setLoading] = useState(true) useEffect(() => { if (session?.user?.role === "ADMIN") { fetchUsers() fetchTransactions() } }, [session]) const fetchUsers = async () => { const res = await fetch("/api/admin/users") if (res.ok) { const data = await res.json() setUsers(data) } setLoading(false) } const fetchTransactions = async () => { const res = await fetch("/api/admin/transactions") if (res.ok) { const data = await res.json() setTransactions(data) } } if (!session || session.user?.role !== "ADMIN") { return

Access Denied

} if (loading) { return

} return (

Admin Dashboard

Users

{users.map((user) => ( ))}

Name	Email	Role	2FA Enabled
{user.name}	{user.email}	{user.role}	{user.twoFactorEnabled ? "Yes" : "No"}

Recent Transactions

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

ID	Amount	Type	Status	Date
{transaction.id}	${transaction.amount.toFixed(2)}	{transaction.type}	{transaction.status}	{new Date(transaction.createdAt).toLocaleString()}

) } [V0_FILE]typescript:file="pages/api/admin/users.ts" import type { NextApiRequest, NextApiResponse } from "next" import { getSession } from "next-auth/react" import { PrismaClient } from "@prisma/client" const prisma = new PrismaClient() export default async function handler(req: NextApiRequest, res: NextApiResponse) { const session = await getSession({ req }) if (!session || session.user?.role !== "ADMIN") { return res.status(401).json({ message: "Unauthorized" }) } if (req.method === "GET") { try { const users = await prisma.user.findMany({ select: { id: true, name: true, email: true, role: true, twoFactorEnabled: true, }, }) res.status(200).json(users) } catch (error) { console.error("Fetch users error:", error) res.status(500).json({ message: "Internal server error" }) } } else { res.setHeader("Allow", ["GET"]) res.status(405).end(`Method ${req.method} Not Allowed`) } } [V0_FILE]typescript:file="pages/api/admin/transactions.ts" import type { NextApiRequest, NextApiResponse } from "next" import { getSession } from "next-auth/react" import { PrismaClient } from "@prisma/client" const prisma = new PrismaClient() export default async function handler(req: NextApiRequest, res: NextApiResponse) { const session = await getSession({ req }) if (!session || session.user?.role !== "ADMIN") { return res.status(401).json({ message: "Unauthorized" }) } if (req.method === "GET") { try { const transactions = await prisma.transaction.findMany({ orderBy: { createdAt: "desc" }, take: 50, }) res.status(200).json(transactions) } catch (error) { console.error("Fetch transactions error:", error) res.status(500).json({ message: "Internal server error" }) } } else { res.setHeader("Allow", ["GET"]) res.status(405).end(`Method ${req.method} Not Allowed`) } } [V0_FILE]typescriptreact:file="pages/staff/dashboard.tsx" "use client" import { useState, useEffect } from "react" import { useSession } from "next-auth/react" import Layout from "../../components/Layout" import type { Transaction } from "@prisma/client" export default function StaffDashboard() { const { data: session } = useSession() const [pendingTransactions, setPendingTransactions] = useState([]) const [loading, setLoading] = useState(true) useEffect(() => { if (session?.user?.role === "STAFF") { fetchPendingTransactions() } }, [session]) const fetchPendingTransactions = async () => { const res = await fetch("/api/staff/pending-transactions") if (res.ok) { const data = await res.json() setPendingTransactions(data) } setLoading(false) } const approveTransaction = async (transactionId: string) => { const res = await fetch(`/api/staff/approve-transaction/${transactionId}`, { method: "POST", }) if (res.ok) { fetchPendingTransactions() } } if (!session || session.user?.role !== "STAFF") { return

Access Denied

} if (loading) { return

} return (

Staff Dashboard

Pending Transactions

{pendingTransactions.map((transaction) => ( ))}

ID	Amount	Type	Date	Action
{transaction.id}	${transaction.amount.toFixed(2)}	{transaction.type}	{new Date(transaction.createdAt).toLocaleString()}

) } [V0_FILE]typescript:file="pages/api/staff/pending-transactions.ts" import type { NextApiRequest, NextApiResponse } from "next" import { getSession } from "next-auth/react" import { PrismaClient } from "@prisma/client" const prisma = new PrismaClient() export default async function handler(req: NextApiRequest, res: NextApiResponse) { const session = await getSession({ req }) if (!session || session.user?.role !== "STAFF") { return res.status(401).json({ message: "Unauthorized" }) } if (req.method === "GET") { try { const pendingTransactions = await prisma.transaction.findMany({ where: { status: "PENDING" }, orderBy: { createdAt: "desc" }, }) res.status(200).json(pendingTransactions) } catch (error) { console.error("Fetch pending transactions error:", error) res.status(500).json({ message: "Internal server error" }) } } else { res.setHeader("Allow", ["GET"]) res.status(405).end(`Method ${req.method} Not Allowed`) } } [V0_FILE]typescript:file="pages/api/staff/approve-transaction/[id].ts" import type { NextApiRequest, NextApiResponse } from "next" import { getSession } from "next-auth/react" import { PrismaClient } from "@prisma/client" const prisma = new PrismaClient() export default async function handler(req: NextApiRequest, res: NextApiResponse) { const session = await getSession({ req }) if (!session || session.user?.role !== "STAFF") { return res.status(401).json({ message: "Unauthorized" }) } if (req.method === "POST") { const { id } = req.query try { const updatedTransaction = await prisma.transaction.update({ where: { id: id as string }, data: { status: "COMPLETED" }, }) // Update account balances based on the transaction type if (updatedTransaction.type === "WITHDRAWAL" || updatedTransaction.type === "TRANSFER") { await prisma.bankAccount.update({ where: { id: updatedTransaction.fromAccountId }, data: { balance: { decrement: updatedTransaction.amount } }, }) } if (updatedTransaction.type === "DEPOSIT") { await prisma.bankAccount.update({ where: { id: updatedTransaction.fromAccountId }, data: { balance: { increment: updatedTransaction.amount } }, }) } if (updatedTransaction.type === "TRANSFER" && updatedTransaction.toAccountId) { await prisma.bankAccount.update({ where: { id: updatedTransaction.toAccountId }, data: { balance: { increment: updatedTransaction.amount } }, }) } res.status(200).json(updatedTransaction) } catch (error) { console.error("Approve transaction error:", error) res.status(500).json({ message: "Internal server error" }) } } else { res.setHeader("Allow", ["POST"]) res.status(405).end(`Method ${req.method} Not Allowed`) } }

About

Tags

Share

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This