[V0_FILE]markdown:file="README.md" isMerged="true" # Chase bank *Automatically synced with your [v0.app](https://v0.app) deployments* [![Deployed on Vercel](https://img.shields.io/badge/Deployed%20on-Vercel-black?style=for-the-badge&logo=vercel)](https://vercel.com/good8/v0-chase-bank-47) [![Built with v0](https://img.shields.io/badge/Built%20with-v0.app-black?style=for-the-badge)](https://v0.app/chat/VA5ajuHrCws) ## Overview This repository will stay in sync with your deployed chats on [v0.app](https://v0.app). Any changes you make to your deployed app will be automatically pushed to this repository from [v0.app](https://v0.app). ## Deployment Your project is live at: **[https://vercel.com/good8/v0-chase-bank-47](https://vercel.com/good8/v0-chase-bank-47)** ## Build your app Continue building your app on: **[https://v0.app/chat/VA5ajuHrCws](https://v0.app/chat/VA5ajuHrCws)** ## How It Works 1. Create and modify your project using [v0.app](https://v0.app) 2. Deploy your chats from the v0 interface 3. Changes are automatically pushed to this repository 4. Vercel deploys the latest version from this repository [V0_FILE]css:file="app/globals.css" isMerged="true" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); :root { /* Chase Blue color scheme */ --chase-blue: #0a4fa6; --chase-blue-dark: #003087; --chase-blue-light: #117aca; --background: oklch(0.98 0 0); --foreground: oklch(0.145 0 0); --card: oklch(1 0 0); --card-foreground: oklch(0.145 0 0); --popover: oklch(1 0 0); --popover-foreground: oklch(0.145 0 0); /* Primary color set to Chase blue */ --primary: oklch(0.45 0.15 250); --primary-foreground: oklch(0.985 0 0); --secondary: oklch(0.97 0 0); --secondary-foreground: oklch(0.205 0 0); --muted: oklch(0.96 0 0); --muted-foreground: oklch(0.45 0 0); --accent: oklch(0.97 0 0); --accent-foreground: oklch(0.205 0 0); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.985 0 0); --border: oklch(0.9 0 0); --input: oklch(0.92 0 0); --ring: oklch(0.45 0.15 250); --chart-1: oklch(0.45 0.15 250); --chart-2: oklch(0.6 0.118 184.704); --chart-3: oklch(0.398 0.07 227.392); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.769 0.188 70.08); --radius: 0.75rem; --sidebar: oklch(0.985 0 0); --sidebar-foreground: oklch(0.145 0 0); --sidebar-primary: oklch(0.45 0.15 250); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.97 0 0); --sidebar-accent-foreground: oklch(0.205 0 0); --sidebar-border: oklch(0.922 0 0); --sidebar-ring: oklch(0.708 0 0); } .dark { --background: oklch(0.12 0 0); --foreground: oklch(0.985 0 0); --card: oklch(0.16 0 0); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.16 0 0); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.55 0.15 250); --primary-foreground: oklch(0.985 0 0); --secondary: oklch(0.22 0 0); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.22 0 0); --muted-foreground: oklch(0.65 0 0); --accent: oklch(0.22 0 0); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.5 0.2 25); --destructive-foreground: oklch(0.985 0 0); --border: oklch(0.25 0 0); --input: oklch(0.25 0 0); --ring: oklch(0.55 0.15 250); --chart-1: oklch(0.55 0.15 250); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); --sidebar: oklch(0.16 0 0); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.55 0.15 250); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.22 0 0); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(0.25 0 0); --sidebar-ring: oklch(0.439 0 0); } @theme inline { --font-sans: "Inter", system-ui, sans-serif; --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } /* Chase-specific utility classes */ .chase-gradient { background: linear-gradient(135deg, #0a4fa6 0%, #117aca 100%); } .chase-card-shadow { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04); } .scrollbar-hide::-webkit-scrollbar { display: none; } .scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; } [V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true" import type React from "react" import type { Metadata } from "next" import { Geist, Geist_Mono } from "next/font/google" import { Analytics } from "@vercel/analytics/next" import { Toaster } from "@/components/ui/toaster" import { BankingProvider } from "@/lib/banking-context" import "./globals.css" const _geist = Geist({ subsets: ["latin"] }) const _geistMono = Geist_Mono({ subsets: ["latin"] }) export const metadata: Metadata = { title: "Banking Dashboard", description: "Your personal banking dashboard", generator: "v0.app", icons: { icon: [ { url: "/icon-light-32x32.png", media: "(prefers-color-scheme: light)", }, { url: "/icon-dark-32x32.png", media: "(prefers-color-scheme: dark)", }, { url: "/icon.svg", type: "image/svg+xml", }, ], apple: "/apple-icon.png", }, } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]json:file="components.json" isMerged="true" { "$schema": "https://ui.shadcn.com/schema.json", "style": "new-york", "rsc": true, "tsx": true, "tailwind": { "config": "", "css": "app/globals.css", "baseColor": "neutral", "cssVariables": true, "prefix": "" }, "aliases": { "components": "@/components", "utils": "@/lib/utils", "ui": "@/components/ui", "lib": "@/lib", "hooks": "@/hooks" }, "iconLibrary": "lucide" } [V0_FILE]typescriptreact:file="components/account-details-drawer.tsx" isMerged="true" "use client" import { useState } from "react" import { Drawer, DrawerContent, DrawerHeader, DrawerTitle } from "@/components/ui/drawer" import { Card } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { ArrowUpRight, ArrowDownLeft, Eye, EyeOff, Download, Filter, Search, ChevronRight, TrendingUp, TrendingDown, Calendar, FileText, } from "lucide-react" import { useBanking } from "@/lib/banking-context" import { Input } from "@/components/ui/input" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" interface AccountDetailsDrawerProps { open: boolean onOpenChange: (open: boolean) => void accountId?: string onReceiptOpen?: (transactionId: string) => void } export function AccountDetailsDrawer({ open, onOpenChange, accountId, onReceiptOpen }: AccountDetailsDrawerProps) { const { accounts, transactions } = useBanking() const [showBalance, setShowBalance] = useState(true) const [searchTerm, setSearchTerm] = useState("") const [filterType, setFilterType] = useState<"all" | "credit" | "debit">("all") const [selectedPeriod, setSelectedPeriod] = useState("30") const account = accountId ? accounts.find((a) => a.id === accountId) : accounts[0] if (!account) return null const accountTransactions = transactions .filter((tx) => { const matchesSearch = tx.description.toLowerCase().includes(searchTerm.toLowerCase()) const matchesType = filterType === "all" || tx.type === filterType const txDate = new Date(tx.date) const daysAgo = (Date.now() - txDate.getTime()) / (1000 * 60 * 60 * 24) const matchesPeriod = daysAgo <= Number.parseInt(selectedPeriod) return matchesSearch && matchesType && matchesPeriod }) .slice(0, 50) const totalIncoming = transactions.filter((tx) => tx.type === "credit").reduce((sum, tx) => sum + tx.amount, 0) const totalOutgoing = transactions.filter((tx) => tx.type === "debit").reduce((sum, tx) => sum + tx.amount, 0) const pendingTransactions = transactions.filter((tx) => tx.status === "pending") const formatBalance = (balance: number) => { if (!showBalance) return "••••••" return balance.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 }) } const getStatusColor = (status: string) => { switch (status) { case "completed": return "bg-green-100 text-green-700" case "pending": return "bg-yellow-100 text-yellow-700" case "failed": return "bg-red-100 text-red-700" default: return "bg-gray-100 text-gray-700" } } return (

{account.name}

...{account.accountNumber}

{/* Balance Card */}

Available Balance

${formatBalance(account.balance)}

Account Number

...{account.accountNumber}

Routing Number

{account.routingNumber}

{/* Quick Stats */}

Income

${formatBalance(totalIncoming)}

Expenses

${formatBalance(totalOutgoing)}

Pending

{pendingTransactions.length}

{/* Quick Actions */}

Transactions Account Details {/* Search and Filter */}

setSearchTerm(e.target.value)} className="pl-9" />

{/* Transactions List */}

{accountTransactions.length > 0 ? ( accountTransactions.map((transaction) => ( onReceiptOpen?.(transaction.id)} >

{transaction.type === "credit" ? ( ) : ( )}

{transaction.description}

{new Date(transaction.date).toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric", })}

{transaction.status}

{transaction.category}

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

)) ) : (

No transactions found

Try adjusting your filters

)}

Account Information

Account Type {account.type}

Account Number ...{account.accountNumber}

Routing Number {account.routingNumber}

{account.interestRate && (

Interest Rate (APY) {account.interestRate}%

)}

Available Balance ${formatBalance(account.balance)}

Account Features

Direct Deposit Enabled

Overdraft Protection Active

Paperless Statements Enrolled

Mobile Deposit Enabled

Monthly Summary

Total Deposits +${formatBalance(totalIncoming)}

Total Withdrawals -${formatBalance(totalOutgoing)}

Net Change = 0 ? "text-green-600" : "text-red-500"}`} > {totalIncoming - totalOutgoing >= 0 ? "+" : "-"}$ {formatBalance(Math.abs(totalIncoming - totalOutgoing))}

) } [V0_FILE]typescriptreact:file="components/accounts-section.tsx" isMerged="true" "use client" import { ChevronRight, Eye, EyeOff, TrendingUp, TrendingDown, Clock } from "lucide-react" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import { useBanking } from "@/lib/banking-context" import { useState } from "react" interface AccountsSectionProps { onViewAccount: () => void onLinkExternal: () => void onSeeAllTransactions: () => void onReceiptOpen: (transactionId: string) => void } export function AccountsSection({ onViewAccount, onLinkExternal, onSeeAllTransactions, onReceiptOpen, }: AccountsSectionProps) { const { accounts, transactions } = useBanking() const [showBalances, setShowBalances] = useState(true) const totalBalance = accounts.reduce((acc, curr) => acc + curr.balance, 0) // Get recent transactions for display (sorted by date) const recentTransactions = [...transactions] .sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime()) .slice(0, 5) const pendingCount = transactions.filter((tx) => tx.status === "pending").length const formatBalance = (balance: number) => { if (!showBalances) return "••••••" return balance.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 }) } const getStatusColor = (status: string) => { switch (status) { case "completed": return "bg-green-100 text-green-700" case "pending": return "bg-yellow-100 text-yellow-700" case "failed": return "bg-red-100 text-red-700" default: return "bg-gray-100 text-gray-700" } } const getRelativeTime = (dateString: string) => { const now = new Date() const date = new Date(dateString) const diffMs = now.getTime() - date.getTime() const diffMins = Math.floor(diffMs / 60000) const diffHours = Math.floor(diffMs / 3600000) const diffDays = Math.floor(diffMs / 86400000) if (diffMins < 1) return "Just now" if (diffMins < 60) return `${diffMins}m ago` if (diffHours < 24) return `${diffHours}h ago` if (diffDays === 1) return "Yesterday" return new Date(dateString).toLocaleDateString("en-US", { month: "short", day: "numeric" }) } return (

Accounts

Total Balance

${formatBalance(totalBalance)}

{pendingCount > 0 && (

{pendingCount} pending transaction{pendingCount > 1 ? "s" : ""}

)}

Bank Accounts ({accounts.length})

{accounts.map((account) => ( ))}

Recent Transactions

{recentTransactions.length > 0 ? ( recentTransactions.map((tx) => ( )) ) : (

No recent transactions

)}

{/* Link External Accounts */}

) } [V0_FILE]typescriptreact:file="components/activity-drawer.tsx" isMerged="true" "use client" import { Drawer, DrawerContent, DrawerHeader, DrawerTitle } from "@/components/ui/drawer" import { Button } from "@/components/ui/button" import { Card } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { useState } from "react" import { Clock, Search, Download, User, LogOut, Lock, Unlock, ArrowRightLeft, Receipt, Settings, Shield, Gift, DollarSign, Smartphone, UserCog, } from "lucide-react" import { useBanking } from "@/lib/banking-context" import { useToast } from "@/hooks/use-toast" interface ActivityDrawerProps { open: boolean onOpenChange: (open: boolean) => void } export function ActivityDrawer({ open, onOpenChange }: ActivityDrawerProps) { const [searchQuery, setSearchQuery] = useState("") const [filterType, setFilterType] = useState(null) const { recentActivity } = useBanking() const { toast } = useToast() const getActivityIcon = (action: string) => { const lowerAction = action.toLowerCase() if (lowerAction.includes("card unlocked")) return if (lowerAction.includes("card locked")) return if (lowerAction.includes("signed out") || lowerAction.includes("logout")) return if (lowerAction.includes("login") || lowerAction.includes("signed in")) return if (lowerAction.includes("transfer")) return if (lowerAction.includes("bill") || lowerAction.includes("payment")) return if (lowerAction.includes("settings")) return if (lowerAction.includes("password") || lowerAction.includes("security") || lowerAction.includes("2fa")) return if (lowerAction.includes("profile")) return if (lowerAction.includes("redeem") || lowerAction.includes("points")) return if (lowerAction.includes("deposit")) return if (lowerAction.includes("device")) return return } const getActivityBgColor = (action: string) => { const lowerAction = action.toLowerCase() if (lowerAction.includes("card unlocked")) return "bg-green-100" if (lowerAction.includes("card locked")) return "bg-red-100" if (lowerAction.includes("signed out") || lowerAction.includes("logout")) return "bg-orange-100" if (lowerAction.includes("login") || lowerAction.includes("signed in")) return "bg-blue-100" if (lowerAction.includes("transfer")) return "bg-purple-100" if (lowerAction.includes("bill") || lowerAction.includes("payment")) return "bg-green-100" if (lowerAction.includes("settings")) return "bg-gray-100" if (lowerAction.includes("password") || lowerAction.includes("security") || lowerAction.includes("2fa")) return "bg-yellow-100" return "bg-[#0a4fa6]/10" } const getTimeAgo = (dateString: string) => { const now = new Date() const date = new Date(dateString) const diffMs = now.getTime() - date.getTime() const diffMins = Math.floor(diffMs / 60000) const diffHours = Math.floor(diffMs / 3600000) const diffDays = Math.floor(diffMs / 86400000) if (diffMins < 60) return `${diffMins}m ago` if (diffHours < 24) return `${diffHours}h ago` if (diffDays < 7) return `${diffDays}d ago` return date.toLocaleDateString() } const filteredActivity = recentActivity?.filter((activity) => { const matchesSearch = activity.action.toLowerCase().includes(searchQuery.toLowerCase()) const matchesFilter = !filterType || activity.action.toLowerCase().includes(filterType.toLowerCase()) return matchesSearch && matchesFilter }) || [] const handleExport = () => { const content = recentActivity ?.map((a) => `${new Date(a.date).toLocaleString()} - ${a.action} - ${a.device} - ${a.location}`) .join("\n") const blob = new Blob([content || ""], { type: "text/plain" }) const url = URL.createObjectURL(blob) const anchor = document.createElement("a") anchor.href = url anchor.download = `activity-log-${new Date().toISOString().split("T")[0]}.txt` anchor.click() URL.revokeObjectURL(url) toast({ title: "Activity Exported", description: "Your activity log has been downloaded", }) } return (

Recent Activity

setSearchQuery(e.target.value)} />

{["All", "Login", "Transfer", "Card", "Settings", "Security"].map((filter) => ( ))}

{filteredActivity.length === 0 ? (

No activity found

) : ( filteredActivity.map((activity, index) => (

{getActivityIcon(activity.action)}

{activity.action}

{activity.device} • {activity.location}

{getTimeAgo(activity.date)}

)) )}

) } [V0_FILE]typescriptreact:file="components/add-account-drawer.tsx" isMerged="true" "use client" import { Drawer, DrawerContent, DrawerHeader, DrawerTitle, DrawerFooter } from "@/components/ui/drawer" import { Button } from "@/components/ui/button" import { PlusCircle, CreditCard, Wallet } from "lucide-react" import { useToast } from "@/hooks/use-toast" interface AddAccountDrawerProps { open: boolean onOpenChange: (open: boolean) => void } export function AddAccountDrawer({ open, onOpenChange }: AddAccountDrawerProps) { const { toast } = useToast() const handleAddAccount = (type: string) => { toast({ title: "Account Added", description: `New ${type} account has been added successfully`, }) onOpenChange(false) } return ( Add New Account

) } [V0_FILE]typescriptreact:file="components/bank-selector-modal.tsx" isMerged="true" "use client" import { useState } from "react" import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog" import { Input } from "@/components/ui/input" import { ScrollArea } from "@/components/ui/scroll-area" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { searchBanks, getBanksByRegion, type Bank } from "@/lib/bank-data" import { Search, MapPin, Globe } from "lucide-react" import { Badge } from "@/components/ui/badge" interface BankSelectorModalProps { open: boolean onOpenChange: (open: boolean) => void onSelectBank: (bank: Bank) => void } export function BankSelectorModal({ open, onOpenChange, onSelectBank }: BankSelectorModalProps) { const [searchQuery, setSearchQuery] = useState("") const [selectedRegion, setSelectedRegion] = useState("northeast") const results = searchQuery ? searchBanks(searchQuery) : getBanksByRegion(selectedRegion) const regions = ["northeast", "midwest", "south", "west"] const regionLabels: Record = { northeast: "Northeast", midwest: "Midwest", south: "South", west: "West", } const handleSelectBank = (bank: Bank) => { onSelectBank(bank) onOpenChange(false) setSearchQuery("") } return ( ) } interface BankListProps { banks: Bank[] onSelectBank: (bank: Bank) => void emptyMessage?: string } function BankList({ banks, onSelectBank, emptyMessage = "No banks available." }: BankListProps) { if (banks.length === 0) { return (

{emptyMessage}

) } return (

{banks.map((bank) => ( ))}

) } [V0_FILE]typescriptreact:file="components/bottom-navigation.tsx" isMerged="true" "use client" import { Wallet, ArrowLeftRight, PieChart, Tag, Menu } from "lucide-react" import { Button } from "@/components/ui/button" import { cn } from "@/lib/utils" interface BottomNavigationProps { activeView: string onViewChange: (view: string) => void } export function BottomNavigation({ activeView, onViewChange }: BottomNavigationProps) { const navItems = [ { id: "accounts", label: "Accounts", icon: Wallet }, { id: "pay-transfer", label: "Pay & transfer", icon: ArrowLeftRight }, { id: "plan-track", label: "Plan & track", icon: PieChart }, { id: "offers", label: "Offers", icon: Tag }, { id: "more", label: "More", icon: Menu }, ] return ( ) } [V0_FILE]typescriptreact:file="components/credit-journey-card.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import { Card } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { useBanking } from "@/lib/banking-context" interface CreditJourneyCardProps { onViewScore: () => void } export function CreditJourneyCard({ onViewScore }: CreditJourneyCardProps) { const { userProfile } = useBanking() const [creditScore, setCreditScore] = useState(645) const [lastUpdated, setLastUpdated] = useState(new Date()) useEffect(() => { // Load credit score from localStorage if available const savedScore = localStorage.getItem("chase_credit_score") if (savedScore) { const data = JSON.parse(savedScore) setCreditScore(data.score) setLastUpdated(new Date(data.updatedAt)) } }, []) // Calculate progress percentage (300-850 range) const progressPercentage = ((creditScore - 300) / (850 - 300)) * 100 return (

Credit Journey

Get your latest credit score

Last credit score: {creditScore} as of {lastUpdated.toLocaleDateString()}
by VantageScore® 3.0

{creditScore}

) } [V0_FILE]typescriptreact:file="components/credit-score-drawer.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import { Drawer, DrawerContent, DrawerHeader, DrawerTitle } from "@/components/ui/drawer" import { Card } from "@/components/ui/card" import { Progress } from "@/components/ui/progress" import { Button } from "@/components/ui/button" import { useBanking } from "@/lib/banking-context" import { TrendingUp, TrendingDown, CheckCircle, RefreshCw, ChevronRight, Shield, CreditCard, Clock, Percent, } from "lucide-react" import { useToast } from "@/hooks/use-toast" interface CreditScoreDrawerProps { open: boolean onOpenChange: (open: boolean) => void } export function CreditScoreDrawer({ open, onOpenChange }: CreditScoreDrawerProps) { const { userProfile, transactions, creditCards, addNotification } = useBanking() const { toast } = useToast() const [creditScore, setCreditScore] = useState(645) const [previousScore, setPreviousScore] = useState(640) const [lastUpdated, setLastUpdated] = useState(new Date()) const [isRefreshing, setIsRefreshing] = useState(false) const [scoreHistory, setScoreHistory] = useState<{ date: string; score: number }[]>([]) useEffect(() => { // Load credit score data from localStorage const savedData = localStorage.getItem("chase_credit_score") if (savedData) { const data = JSON.parse(savedData) setCreditScore(data.score) setPreviousScore(data.previousScore || data.score - 5) setLastUpdated(new Date(data.updatedAt)) setScoreHistory(data.history || []) } else { // Initialize with default data const initialHistory = [ { date: new Date(Date.now() - 90 * 24 * 60 * 60 * 1000).toISOString(), score: 630 }, { date: new Date(Date.now() - 60 * 24 * 60 * 60 * 1000).toISOString(), score: 635 }, { date: new Date(Date.now() - 30 * 24 * 60 * 60 * 1000).toISOString(), score: 640 }, { date: new Date().toISOString(), score: 645 }, ] setScoreHistory(initialHistory) saveCreditData(645, 640, initialHistory) } }, []) const saveCreditData = (score: number, prevScore: number, history: { date: string; score: number }[]) => { localStorage.setItem( "chase_credit_score", JSON.stringify({ score, previousScore: prevScore, updatedAt: new Date().toISOString(), history, }), ) } const handleRefresh = () => { setIsRefreshing(true) // Simulate credit score check with slight variation setTimeout(() => { const variation = Math.floor(Math.random() * 11) - 5 // -5 to +5 const newScore = Math.max(300, Math.min(850, creditScore + variation)) const newHistory = [...scoreHistory, { date: new Date().toISOString(), score: newScore }].slice(-12) setPreviousScore(creditScore) setCreditScore(newScore) setLastUpdated(new Date()) setScoreHistory(newHistory) setIsRefreshing(false) saveCreditData(newScore, creditScore, newHistory) const changeText = newScore > creditScore ? "increased" : newScore < creditScore ? "decreased" : "stayed the same" toast({ title: "Credit Score Updated", description: `Your score has ${changeText} to ${newScore}`, }) addNotification({ title: "Credit Score Update", message: `Your VantageScore 3.0 credit score is now ${newScore}`, type: newScore >= creditScore ? "success" : "warning", category: "Credit", }) }, 2000) } // Calculate factors based on user activity const calculateFactors = () => { const factors = [] // Payment history (based on completed transactions) const completedPayments = transactions.filter((t) => t.status === "completed").length const totalPayments = transactions.length const paymentRatio = totalPayments > 0 ? completedPayments / totalPayments : 1 factors.push({ name: "Payment History", status: paymentRatio >= 0.95 ? "good" : paymentRatio >= 0.8 ? "fair" : "poor", icon: CheckCircle, description: paymentRatio >= 0.95 ? "Excellent payment record" : "Some late or missed payments", impact: "High Impact", }) // Credit utilization (based on credit card) const card = creditCards[0] const utilization = card ? (card.balance / card.creditLimit) * 100 : 30 factors.push({ name: "Credit Utilization", status: utilization <= 30 ? "good" : utilization <= 50 ? "fair" : "poor", icon: Percent, description: `${utilization.toFixed(0)}% of available credit used`, impact: "High Impact", }) // Length of credit history factors.push({ name: "Credit Age", status: "good", icon: Clock, description: "Average account age: 5 years", impact: "Medium Impact", }) // Credit mix factors.push({ name: "Credit Mix", status: "fair", icon: CreditCard, description: "Mix of credit types", impact: "Low Impact", }) // Recent inquiries factors.push({ name: "New Credit", status: "good", icon: Shield, description: "No recent hard inquiries", impact: "Low Impact", }) return factors } const factors = calculateFactors() const scoreChange = creditScore - previousScore const progressPercentage = ((creditScore - 300) / (850 - 300)) * 100 const getScoreCategory = (score: number) => { if (score >= 800) return { label: "Excellent", color: "text-green-600" } if (score >= 740) return { label: "Very Good", color: "text-green-500" } if (score >= 670) return { label: "Good", color: "text-blue-500" } if (score >= 580) return { label: "Fair", color: "text-yellow-500" } return { label: "Poor", color: "text-red-500" } } const category = getScoreCategory(creditScore) return ( Credit Journey

{/* Main Score Card */}

VantageScore® 3.0

{creditScore}

{scoreChange !== 0 && (

0 ? "text-green-300" : "text-red-300"}`} > {scoreChange > 0 ? : } {Math.abs(scoreChange)}

)}

{category.label}

Updated {lastUpdated.toLocaleDateString("en-US", { month: "long", day: "numeric", year: "numeric" })}

{/* Refresh Button */} {/* Score Range */}

Score Range

Poor Fair Good Excellent

300 580 670 740 850

{/* Score History */} {scoreHistory.length > 1 && (

Score History

{scoreHistory.slice(-6).map((item, index) => { const height = ((item.score - 300) / (850 - 300)) * 100 return (

{item.score}

{new Date(item.date).toLocaleDateString("en-US", { month: "short" })}

) })}

)} {/* Factors */}

Factors Affecting Your Score

{factors.map((factor, index) => (

{factor.name}

{factor.status.charAt(0).toUpperCase() + factor.status.slice(1)}

{factor.description}

{factor.impact}

))}

{/* Tips */}

Tips to Improve Your Score

{/* Disclaimer */}

Your VantageScore 3.0 is based on data from TransUnion. Scores may vary when accessed from other sources. This score is for educational purposes and may differ from scores used by lenders.

) } [V0_FILE]typescriptreact:file="components/dashboard-header.tsx" isMerged="true" "use client" import type React from "react" import Image from "next/image" import { MessageSquare, Bell, Search, Camera } from "lucide-react" import { Button } from "@/components/ui/button" import { useState, useRef } from "react" import { Sheet, SheetContent, SheetHeader, SheetTitle } from "@/components/ui/sheet" import { Badge } from "@/components/ui/badge" import { Input } from "@/components/ui/input" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { useBanking } from "@/lib/banking-context" import { useToast } from "@/hooks/use-toast" export function DashboardHeader() { const [messagesOpen, setMessagesOpen] = useState(false) const [notificationsOpen, setNotificationsOpen] = useState(false) const [profileOpen, setProfileOpen] = useState(false) const [searchQuery, setSearchQuery] = useState("") const fileInputRef = useRef(null) const { toast } = useToast() const { userProfile, notifications, messages, markNotificationRead, unreadNotificationCount, markMessageRead, deleteMessage, updateUserProfile, markAllNotificationsRead, transactions, } = useBanking() const unreadMessages = messages?.filter((m) => !m.read).length || 0 const getTimeAgo = (dateString: string) => { const now = new Date() const date = new Date(dateString) const diffMs = now.getTime() - date.getTime() const diffMins = Math.floor(diffMs / 60000) const diffHours = Math.floor(diffMs / 3600000) const diffDays = Math.floor(diffMs / 86400000) if (diffMins < 60) return `${diffMins}m ago` if (diffHours < 24) return `${diffHours}h ago` return `${diffDays}d ago` } const handleProfilePictureUpload = (e: React.ChangeEvent) => { const file = e.target.files?.[0] if (file) { const reader = new FileReader() reader.onloadend = () => { updateUserProfile({ profilePicture: reader.result as string }) toast({ title: "Profile Picture Updated", description: "Your profile picture has been saved.", }) } reader.readAsDataURL(file) } } const handleSearch = (e: React.FormEvent) => { e.preventDefault() if (searchQuery.trim()) { const results = transactions.filter( (tx) => tx.description.toLowerCase().includes(searchQuery.toLowerCase()) || tx.category.toLowerCase().includes(searchQuery.toLowerCase()) || tx.reference?.toLowerCase().includes(searchQuery.toLowerCase()), ) toast({ title: `Found ${results.length} results`, description: results.length > 0 ? `Matching "${searchQuery}"` : "Try a different search term", }) } } return ( <>

CHASE

{/* Messages Sheet */} Messages {unreadMessages > 0 && {unreadMessages} new}

{messages && messages.length > 0 ? ( messages.map((msg) => (

markMessageRead(msg.id)} >

{msg.from}

{msg.subject}

{msg.content}

{getTimeAgo(msg.date)}

)) ) : (

No messages

)}

{/* Notifications Sheet */}

Notifications {unreadNotificationCount > 0 && {unreadNotificationCount} new}

{unreadNotificationCount > 0 && ( )}

{notifications.map((notif) => (

markNotificationRead(notif.id)} >

{notif.title}

{notif.category}

{notif.message}

{getTimeAgo(notif.date)}

))}

{/* Profile Sheet */} Profile

{(userProfile.name || "") .split(" ") .map((n) => n[0]) .join("")}

{userProfile.name}

{userProfile.email}

{userProfile.tier}

{/* Account Info */}

Account Information

Phone {userProfile.phone}

Member Since {userProfile.memberSince}

Customer ID ****0683

{/* Rewards Card */}

Chase Ultimate Rewards Private Client

{userProfile.ultimateRewardsPoints?.toLocaleString() || "287,450"}

points available

{/* Quick Actions */}

) } [V0_FILE]typescriptreact:file="components/deposit-checks-drawer.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { useState, useRef, useCallback } from "react" import { Drawer, DrawerContent, DrawerHeader, DrawerTitle } from "@/components/ui/drawer" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Camera, X, Check, RotateCcw, Flashlight, Info, ChevronRight, AlertCircle, CheckCircle2, Loader2, ImageIcon, ZoomIn, HelpCircle, DollarSign, Building2, FileText, Clock, } from "lucide-react" import { useToast } from "@/hooks/use-toast" import { useBanking } from "@/lib/banking-context" import { ToastAction } from "@/components/ui/toast" interface DepositChecksDrawerProps { open: boolean onOpenChange: (open: boolean) => void onReceiptOpen?: (transactionId: string) => void } type DepositStep = | "select-account" | "enter-amount" | "capture-front" | "capture-back" | "review" | "processing" | "success" export function DepositChecksDrawer({ open, onOpenChange, onReceiptOpen }: DepositChecksDrawerProps) { const [step, setStep] = useState("select-account") const [amount, setAmount] = useState("") const [selectedAccount, setSelectedAccount] = useState(null) const [frontImage, setFrontImage] = useState(null) const [backImage, setBackImage] = useState(null) const [isCapturing, setIsCapturing] = useState(false) const [flashOn, setFlashOn] = useState(false) const [cameraStream, setCameraStream] = useState(null) const [processingProgress, setProcessingProgress] = useState(0) const [depositedTransaction, setDepositedTransaction] = useState(null) const [showTips, setShowTips] = useState(false) const [imagePreview, setImagePreview] = useState(null) const videoRef = useRef(null) const canvasRef = useRef(null) const fileInputRef = useRef(null) const { toast } = useToast() const { accounts, addTransaction, updateBalance, addNotification, addActivity } = useBanking() const checkingAccounts = accounts.filter( (a) => a.type?.toLowerCase() === "checking" || a.type?.toLowerCase() === "savings" || a.type === "Checking" || a.type === "Savings", ) const resetState = useCallback(() => { setStep("select-account") setAmount("") setSelectedAccount(null) setFrontImage(null) setBackImage(null) setIsCapturing(false) setProcessingProgress(0) setDepositedTransaction(null) setShowTips(false) setImagePreview(null) stopCamera() }, []) const startCamera = async () => { try { const stream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: "environment", width: { ideal: 1920 }, height: { ideal: 1080 }, }, }) setCameraStream(stream) if (videoRef.current) { videoRef.current.srcObject = stream await videoRef.current.play() } setIsCapturing(true) } catch (error) { console.log("[v0] Camera access denied, using file upload fallback") // Fallback to file upload fileInputRef.current?.click() } } const stopCamera = () => { if (cameraStream) { cameraStream.getTracks().forEach((track) => track.stop()) setCameraStream(null) } setIsCapturing(false) } const captureImage = () => { if (videoRef.current && canvasRef.current) { const video = videoRef.current const canvas = canvasRef.current canvas.width = video.videoWidth canvas.height = video.videoHeight const ctx = canvas.getContext("2d") if (ctx) { ctx.drawImage(video, 0, 0) const imageData = canvas.toDataURL("image/jpeg", 0.9) if (step === "capture-front") { setFrontImage(imageData) stopCamera() setStep("capture-back") } else if (step === "capture-back") { setBackImage(imageData) stopCamera() setStep("review") } } } } const handleFileUpload = (event: React.ChangeEvent, side: "front" | "back") => { const file = event.target.files?.[0] if (file) { const reader = new FileReader() reader.onload = (e) => { const imageData = e.target?.result as string if (side === "front") { setFrontImage(imageData) setStep("capture-back") } else { setBackImage(imageData) setStep("review") } } reader.readAsDataURL(file) } } const retakeImage = (side: "front" | "back") => { if (side === "front") { setFrontImage(null) setStep("capture-front") } else { setBackImage(null) setStep("capture-back") } } const processDeposit = async () => { setStep("processing") const steps = [ { progress: 20, message: "Verifying check image quality..." }, { progress: 40, message: "Reading check information..." }, { progress: 60, message: "Verifying account details..." }, { progress: 80, message: "Processing deposit..." }, { progress: 100, message: "Finalizing..." }, ] for (const stepInfo of steps) { await new Promise((resolve) => setTimeout(resolve, 800)) setProcessingProgress(stepInfo.progress) } const depositAmount = Number.parseFloat(amount) if (selectedAccount) { updateBalance(selectedAccount, depositAmount) } const transaction = addTransaction({ description: "Mobile Check Deposit", amount: depositAmount, type: "credit", category: "Deposit", status: "pending", reference: `CHK${Date.now()}`, accountId: selectedAccount || undefined, accountTo: accounts.find((a) => a.id === selectedAccount)?.name, }) setDepositedTransaction(transaction.id) addNotification({ title: "Check Deposited", message: `$${depositAmount.toFixed(2)} deposited via mobile check. Funds available in 1-2 business days.`, type: "success", category: "Transactions", }) addActivity({ action: `Deposited check for $${depositAmount.toFixed(2)}`, device: navigator.userAgent.includes("Mobile") ? "Mobile Device" : "Desktop Browser", location: "Current Session", }) setStep("success") toast({ title: "Check Deposited Successfully", description: `$${depositAmount.toFixed(2)} deposited. Funds available in 1-2 business days.`, action: onReceiptOpen ? ( onReceiptOpen(transaction.id)}> Receipt ) : undefined, }) } const handleClose = () => { resetState() onOpenChange(false) } const depositLimits = { daily: 10000, perCheck: 5000, monthly: 50000, } return ( { if (!isOpen) { resetState() } onOpenChange(isOpen) }} > {/* Header */}

Deposit Checks

{/* Progress indicator */} {step !== "success" && step !== "processing" && (

{["select-account", "enter-amount", "capture-front", "capture-back", "review"].map((s, i) => (

= i ? "bg-white" : "bg-white/30" }`} /> ))}

)}

{/* Step 1: Select Account */} {step === "select-account" && (

Select Deposit Account

Choose which account to deposit your check into

{checkingAccounts.map((account) => ( ))}

{/* Deposit Limits Info */}

Deposit Limits

Daily: ${depositLimits.daily.toLocaleString()}

Per Check: ${depositLimits.perCheck.toLocaleString()}

Monthly: ${depositLimits.monthly.toLocaleString()}

)} {/* Step 2: Enter Amount */} {step === "enter-amount" && (

Enter Check Amount

Enter the exact amount written on your check

Check Amount

setAmount(e.target.value)} className="pl-10 text-3xl h-16 font-semibold text-center" />

{Number.parseFloat(amount) > depositLimits.perCheck && (

Exceeds per-check limit of ${depositLimits.perCheck.toLocaleString()}

)}

{/* Quick amounts */}

{[50, 100, 250, 500].map((quickAmount) => ( ))}

)} {/* Step 3: Capture Front */} {step === "capture-front" && (

Capture Front of Check

Position the front of your check within the frame

{isCapturing ? (

Account Information

Account Features

Monthly Summary

Accounts

Bank Accounts ({accounts.length})

Recent Transactions

Credit Journey

Score Range

Score History

Factors Affecting Your Score

Tips to Improve Your Score

{userProfile.name}

Account Information

Select Deposit Account

Enter Check Amount

Capture Front of Check

Capture Back of Check

Review Your Deposit

Deposit Successful!

{verificationStep === 1 && "Connecting to bank..."} {verificationStep === 2 && "Verifying account..."} {verificationStep === 3 && "Account verified!"}

Security Token

Forgot username or password?

Recover Username

Reset Password

Sign up for Chase Online

Benefits of Chase Online

Personal Information

Identity Verification

Create Credentials

Open a Chase Account

Chase Total Checking

Account Benefits

Privacy & Security

Your Security Matters

More Options

{selectedMessage.subject}