82:I[903690,["/chat-static/_next/static/immutable/chunks/2x9h_dqajku2h.js","/chat-static/_next/static/immutable/chunks/1guyin7zoczci.js","/chat-static/_next/static/immutable/chunks/39rg-vyko_oef.js","/chat-static/_next/static/immutable/chunks/1sitju1_d7il0.js","/chat-static/_next/static/immutable/chunks/157bok9l8ft2k.js","/chat-static/_next/static/immutable/chunks/0wi_45vocl_-p.js","/chat-static/_next/static/immutable/chunks/3xk_70lpaq4rr.js","/chat-static/_next/static/immutable/chunks/0mwr0fog443j2.js","/chat-static/_next/static/immutable/chunks/01baumogimg6p.js","/chat-static/_next/static/immutable/chunks/3qqefvmwew4y9.js","/chat-static/_next/static/immutable/chunks/31bw9_yzlia2t.js","/chat-static/_next/static/immutable/chunks/0s_cw7e8300g7.js","/chat-static/_next/static/immutable/chunks/2obw3omjz3a42.js","/chat-static/_next/static/immutable/chunks/2cytw68p34q_e.js","/chat-static/_next/static/immutable/chunks/1znnlzfkj81j9.js","/chat-static/_next/static/immutable/chunks/3263tgpkly9nu.js","/chat-static/_next/static/immutable/chunks/0wnsukyi4k1ek.js","/chat-static/_next/static/immutable/chunks/022gnoebsh94r.js","/chat-static/_next/static/immutable/chunks/3knm8li7yvqyy.js","/chat-static/_next/static/immutable/chunks/051wt7f-miggg.js","/chat-static/_next/static/immutable/chunks/2oaqmt76j32uy.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/13kz2gfvgolzm.js","/chat-static/_next/static/immutable/chunks/0jv8_sp12utf0.js","/chat-static/_next/static/immutable/chunks/1e462i1ma5hqc.js","/chat-static/_next/static/immutable/chunks/2w2x4bf9lm3-y.js","/chat-static/_next/static/immutable/chunks/109o97wf-h9dp.js","/chat-static/_next/static/immutable/chunks/1m_firo4_gtz9.js","/chat-static/_next/static/immutable/chunks/04qcbhsoi2ven.js","/chat-static/_next/static/immutable/chunks/3wbu0v06tpqrr.js","/chat-static/_next/static/immutable/chunks/0m1kq5rn-0ww-.js","/chat-static/_next/static/immutable/chunks/1dvpa8vmf1cw-.js","/chat-static/_next/static/immutable/chunks/0bsgteld9iyte.js","/chat-static/_next/static/immutable/chunks/0p9rde4dp8mlf.js","/chat-static/_next/static/immutable/chunks/25mfdeh9gj-j-.js","/chat-static/_next/static/immutable/chunks/1e773rf8k8t2c.js","/chat-static/_next/static/immutable/chunks/2zsqw2aqz_g_4.js","/chat-static/_next/static/immutable/chunks/08-__6bbjjmqq.js","/chat-static/_next/static/immutable/chunks/1zbczmbdcfpso.js","/chat-static/_next/static/immutable/chunks/2lw3dfa252fnx.js","/chat-static/_next/static/immutable/chunks/0uyf3u8xap1mo.js"],"ExplicitChatIdProvider"] 83:I[838238,["/chat-static/_next/static/immutable/chunks/2x9h_dqajku2h.js","/chat-static/_next/static/immutable/chunks/1guyin7zoczci.js","/chat-static/_next/static/immutable/chunks/39rg-vyko_oef.js","/chat-static/_next/static/immutable/chunks/1sitju1_d7il0.js","/chat-static/_next/static/immutable/chunks/157bok9l8ft2k.js","/chat-static/_next/static/immutable/chunks/0wi_45vocl_-p.js","/chat-static/_next/static/immutable/chunks/3xk_70lpaq4rr.js","/chat-static/_next/static/immutable/chunks/0mwr0fog443j2.js","/chat-static/_next/static/immutable/chunks/01baumogimg6p.js","/chat-static/_next/static/immutable/chunks/3qqefvmwew4y9.js","/chat-static/_next/static/immutable/chunks/31bw9_yzlia2t.js","/chat-static/_next/static/immutable/chunks/0s_cw7e8300g7.js","/chat-static/_next/static/immutable/chunks/2obw3omjz3a42.js","/chat-static/_next/static/immutable/chunks/2cytw68p34q_e.js","/chat-static/_next/static/immutable/chunks/1znnlzfkj81j9.js","/chat-static/_next/static/immutable/chunks/3263tgpkly9nu.js","/chat-static/_next/static/immutable/chunks/0wnsukyi4k1ek.js","/chat-static/_next/static/immutable/chunks/022gnoebsh94r.js","/chat-static/_next/static/immutable/chunks/3knm8li7yvqyy.js","/chat-static/_next/static/immutable/chunks/051wt7f-miggg.js","/chat-static/_next/static/immutable/chunks/2oaqmt76j32uy.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/13kz2gfvgolzm.js","/chat-static/_next/static/immutable/chunks/0jv8_sp12utf0.js","/chat-static/_next/static/immutable/chunks/1e462i1ma5hqc.js","/chat-static/_next/static/immutable/chunks/2w2x4bf9lm3-y.js","/chat-static/_next/static/immutable/chunks/109o97wf-h9dp.js","/chat-static/_next/static/immutable/chunks/1m_firo4_gtz9.js","/chat-static/_next/static/immutable/chunks/04qcbhsoi2ven.js","/chat-static/_next/static/immutable/chunks/3wbu0v06tpqrr.js","/chat-static/_next/static/immutable/chunks/0m1kq5rn-0ww-.js","/chat-static/_next/static/immutable/chunks/1dvpa8vmf1cw-.js","/chat-static/_next/static/immutable/chunks/0bsgteld9iyte.js","/chat-static/_next/static/immutable/chunks/0p9rde4dp8mlf.js","/chat-static/_next/static/immutable/chunks/25mfdeh9gj-j-.js","/chat-static/_next/static/immutable/chunks/1e773rf8k8t2c.js","/chat-static/_next/static/immutable/chunks/2zsqw2aqz_g_4.js","/chat-static/_next/static/immutable/chunks/08-__6bbjjmqq.js","/chat-static/_next/static/immutable/chunks/1zbczmbdcfpso.js","/chat-static/_next/static/immutable/chunks/2lw3dfa252fnx.js","/chat-static/_next/static/immutable/chunks/0uyf3u8xap1mo.js"],"SWRDataProvider"] 84:T40b24,[V0_FILE]typescriptreact:file="lib/utils.ts" isMerged="true" import { type ClassValue, clsx } from "clsx" import { twMerge } from "tailwind-merge" export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)) } export function formatCurrency(amount: number): string { return new Intl.NumberFormat("en-NG", { style: "currency", currency: "NGN", minimumFractionDigits: 2, }).format(amount) } export function validateAccountNumber(accountNumber: string): boolean { // Most Nigerian bank account numbers are 10 digits return /^\d{10}$/.test(accountNumber) } export function generateTransactionReference(): string { return `FPB-${Date.now()}-${Math.floor(Math.random() * 1000)}` } [V0_FILE]typescriptreact:file="components/fast-pay-logo.tsx" isMerged="true" import type React from "react" interface FastPayLogoProps { className?: string variant?: "default" | "white" } export const FastPayLogo: React.FC = ({ className = "", variant = "default" }) => { const textColor = variant === "white" ? "text-white" : "text-fastpay-600" return (

Fast Pay

) } [V0_FILE]typescript:file="lib/api-service.ts" isMerged="true" // This simulates a real banking API service // Function to verify account details export const verifyAccountDetails = async ( accountNumber: string, bankCode: string, ): Promise<{ accountName: string }> => { // Validate input if (!accountNumber || accountNumber.length !== 10 || !/^\d+$/.test(accountNumber)) { throw new Error("Invalid account number format") } if (!bankCode) { throw new Error("Bank code is required") } // Simulate API call delay (realistic network latency) await new Promise((resolve) => setTimeout(resolve, 800 + Math.random() * 500)) // Fixed mapping for specific account numbers const accountMap: Record = { "0123456789": "Akinbambo Tomisin", "1234567890": "Emeka Nwosu", "2345678901": "Amina Ibrahim", "3456789012": "Tunde Bakare", "4567890123": "Ngozi Okonjo", "5678901234": "Ayo Ade", // This will always return Ayo Ade as requested "6789012345": "Fatima Mohammed", "7890123456": "Chidi Okonkwo", "8901234567": "Blessing Ojo", "9012345678": "Emmanuel Adebayo", } // Check if account number is in our predefined list if (accountMap[accountNumber]) { return { accountName: accountMap[accountNumber] } } // For other account numbers, generate a deterministic name based on the account number // This ensures the same account number always returns the same name // Nigerian first names and surnames for realistic account names const firstNames = [ "Adebayo", "Chioma", "Ngozi", "Oluwaseun", "Fatima", "Yusuf", "Blessing", "Emmanuel", "Aisha", "Tunde", "Chinedu", "Folake", "Ibrahim", "Joy", "Kehinde", "Lola", "Mohammed", "Nneka", "Olumide", "Precious", ] const lastNames = [ "Adeyemi", "Okonkwo", "Ibrahim", "Okafor", "Mohammed", "Nwachukwu", "Ojo", "Adebayo", "Olanrewaju", "Bakare", "Afolabi", "Bello", "Chukwu", "Danjuma", "Egwu", "Falana", "Gowon", "Hassan", "Igwe", "Johnson", ] // Use a simple hash function to get consistent indices based on account number let firstNameIndex = 0 let lastNameIndex = 0 // Sum the digits at even positions for first name for (let i = 0; i < accountNumber.length; i += 2) { firstNameIndex += Number.parseInt(accountNumber[i]) } // Sum the digits at odd positions for last name for (let i = 1; i < accountNumber.length; i += 2) { lastNameIndex += Number.parseInt(accountNumber[i]) } // Get indices within array bounds firstNameIndex = firstNameIndex % firstNames.length lastNameIndex = lastNameIndex % lastNames.length const firstName = firstNames[firstNameIndex] const lastName = lastNames[lastNameIndex] return { accountName: `${firstName} ${lastName}` } } // Function to get bank list export const getBankList = async (): Promise> => { // Simulate API call delay await new Promise((resolve) => setTimeout(resolve, 300)) return [ { code: "044", name: "Access Bank" }, { code: "050", name: "EcoBank" }, { code: "058", name: "GTBank" }, { code: "011", name: "First Bank" }, { code: "221", name: "Stanbic IBTC" }, { code: "068", name: "Standard Chartered" }, { code: "232", name: "Sterling Bank" }, { code: "033", name: "UBA" }, { code: "215", name: "Unity Bank" }, { code: "035", name: "Wema Bank" }, { code: "057", name: "Zenith Bank" }, ] } // Function to process transfer export const processTransfer = async (transferData: { senderAccount: string recipientAccount: string recipientName: string bankCode: string amount: number narration: string }): Promise<{ reference: string status: string date: string }> => { // Validate input if (!transferData.recipientAccount || !transferData.bankCode || !transferData.amount) { throw new Error("Missing required transfer details") } // Simulate API call delay (longer for transfers) await new Promise((resolve) => setTimeout(resolve, 1500 + Math.random() * 1000)) // Generate a unique reference number const reference = `TRF${Date.now().toString().slice(-8)}` return { reference, status: "success", date: new Date().toISOString(), } } [V0_FILE]typescriptreact:file="components/account-summary.tsx" isMerged="true" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { ArrowUpRight, ArrowDownRight, CreditCard, Wallet } from "lucide-react" export function AccountSummary() { return ( <> Total Balance

₦2,456,789.00

Across all accounts

Income

₦350,000.00

+12.5% from last month

Expenses

₦125,400.00

+2.1% from last month

Active Cards

Debit and Virtual Cards

) } [V0_FILE]typescript:file="app/api/verify-account/route.ts" isMerged="true" import { NextResponse } from "next/server" import { config } from "@/lib/config" // This endpoint verifies account details before transfer export async function POST(request: Request) { try { // Parse the request body const body = await request.json() // Validate required fields const { account_number, bank_code } = body if (!account_number || !bank_code) { return NextResponse.json({ error: "Account number and bank code are required" }, { status: 400 }) } // Make the actual API call to Paystack API to verify account try { const response = await fetch( `https://api.paystack.co/bank/resolve?account_number=${account_number}&bank_code=${bank_code}`, { method: "GET", headers: { "Content-Type": "application/json", Authorization: `Bearer ${config.paystack.secretKey}`, }, }, ) // Handle API response const data = await response.json() if (!response.ok) { console.error("Account verification error:", data) return NextResponse.json({ error: data.message || "Account verification failed" }, { status: response.status }) } return NextResponse.json(data) } catch (apiError) { console.error("Account verification request error:", apiError) // For demo purposes, let's return mock data if the API call fails // In production, you would handle this differently // Predefined account mappings const accountMap: Record = { "0123456789": "Akinbambo Tomisin", "1234567890": "Emeka Nwosu", "2345678901": "Amina Ibrahim", "3456789012": "Tunde Bakare", "4567890123": "Ngozi Okonjo", "5678901234": "Ayo Ade", "6789012345": "Fatima Mohammed", "7890123456": "Chidi Okonkwo", "8901234567": "Blessing Ojo", "9012345678": "Emmanuel Adebayo", } // Check if the account number exists in our mapping if (accountMap[account_number]) { return NextResponse.json({ status: true, message: "Account resolved", data: { account_number: account_number, account_name: accountMap[account_number], bank_id: 1, }, }) } return NextResponse.json({ error: "Failed to verify account details" }, { status: 400 }) } } catch (error) { console.error("Account verification API error:", error) return NextResponse.json({ error: "Failed to process account verification" }, { status: 500 }) } } [V0_FILE]typescriptreact:file="app/dashboard/transfer/loading.tsx" isMerged="true" export default function Loading() { return (

) } [V0_FILE]typescriptreact:file="app/dashboard/cards/page.tsx" isMerged="true" "use client" import type React from "react" import { useState } from "react" import Link from "next/link" import { ArrowLeft, Copy, Eye, EyeOff, Plus } from "lucide-react" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import { toast } from "@/components/ui/use-toast" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, } from "@/components/ui/dialog" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { BankingImage } from "@/components/banking-image" export default function CardsPage() { const [showCardDetails, setShowCardDetails] = useState(false) const [isCreatingCard, setIsCreatingCard] = useState(false) const handleCopyCardNumber = () => { navigator.clipboard.writeText("4111 1111 1111 1111") toast({ title: "Card number copied", description: "Card number has been copied to clipboard", }) } const handleCreateCard = (e: React.FormEvent) => { e.preventDefault() setIsCreatingCard(true) // Simulate API call setTimeout(() => { setIsCreatingCard(false) toast({ title: "Virtual card created", description: "Your new virtual card has been created successfully", }) }, 2000) } return (

Cards

Virtual Cards Physical Cards

Virtual Mastercard

{showCardDetails ? "4111 1111 1111 1111" : "•••• •••• •••• 1111"}

VALID THRU

{showCardDetails ? "12/25" : "••/••"}

CVV

{showCardDetails ? "123" : "•••"}

BALANCE

₦50,000

Shopping Card

Active

Card Controls

No Physical Cards

You don't have any physical cards yet. Request a physical card to get started.

) } [V0_FILE]typescriptreact:file="app/dashboard/airtime/loading.tsx" isMerged="true" export default function Loading() { return (

) } [V0_FILE]typescriptreact:file="app/dashboard/cards/loading.tsx" isMerged="true" export default function Loading() { return (

) } [V0_FILE]typescriptreact:file="app/login/loading.tsx" isMerged="true" export default function Loading() { return (

) } [V0_FILE]typescriptreact:file="app/register/loading.tsx" isMerged="true" export default function Loading() { return (

) } [V0_FILE]typescriptreact:file="app/splash/loading.tsx" isMerged="true" export default function Loading() { return (

) } [V0_FILE]typescriptreact:file="app/onboarding/loading.tsx" isMerged="true" export default function Loading() { return (

) } [V0_FILE]typescriptreact:file="app/dashboard/withdraw/page.tsx" isMerged="true" "use client" import { useState } from "react" import Link from "next/link" import { useRouter } from "next/navigation" import { ArrowLeft } from "lucide-react" import { Button } from "@/components/ui/button" import { WithdrawalForm } from "@/components/withdrawal-form" import { WithdrawalReceipt } from "@/components/withdrawal-receipt" import { BankingImage } from "@/components/banking-image" export default function WithdrawPage() { const router = useRouter() const [receiptData, setReceiptData] = useState(null) const handleCloseReceipt = () => { setReceiptData(null) router.push("/dashboard") } if (receiptData) { return (

) } return (

Withdraw Funds

) } [V0_FILE]typescriptreact:file="app/dashboard/withdraw/loading.tsx" isMerged="true" export default function Loading() { return (

) } [V0_FILE]typescriptreact:file="app/dashboard/profile/page.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import Link from "next/link" import { useRouter } from "next/navigation" import { ArrowLeft, User, Mail, Phone, Copy, CheckCircle2, Edit2 } from "lucide-react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { toast } from "@/components/ui/use-toast" import { getUser, type User as AuthUser } from "@/lib/auth-service" import { BankingImage } from "@/components/banking-image" export default function ProfilePage() { const router = useRouter() const [user, setUser] = useState(null) const [copied, setCopied] = useState(null) useEffect(() => { // Get user data from local storage const userData = getUser() setUser(userData) // If no user data, redirect to login if (!userData) { router.push("/login") } }, [router]) // Get user initials for avatar const getUserInitials = () => { if (!user) return "NP" return `${user.firstName.charAt(0)}${user.lastName.charAt(0)}` } const handleCopy = (text: string, field: string) => { navigator.clipboard.writeText(text) setCopied(field) toast({ title: "Copied to clipboard", description: `${field} has been copied to clipboard`, }) setTimeout(() => setCopied(null), 3000) } return (

My Profile

{getUserInitials()}

{user ? `${user.firstName} ${user.lastName}` : "User"}

Nova Pay Customer

Personal Information

Full Name

{user ? `${user.firstName} ${user.lastName}` : "User"}

Email Address

{user?.email || "user@example.com"}

Phone Number

{user?.phone || "08012345678"}

Account Information

Account Number

{user?.accountNumber || "0123456789"}

Account Type

Savings

Account Status

Active

) } [V0_FILE]typescriptreact:file="app/dashboard/profile/loading.tsx" isMerged="true" export default function Loading() { return (

) } [V0_FILE]typescriptreact:file="app/dashboard/settings/page.tsx" isMerged="true" "use client" import { useState } from "react" import Link from "next/link" import { useRouter } from "next/navigation" import { ArrowLeft, Loader2 } from "lucide-react" import { zodResolver } from "@hookform/resolvers/zod" import { useForm } from "react-hook-form" import { z } from "zod" import { Button } from "@/components/ui/button" import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form" import { Input } from "@/components/ui/input" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { toast } from "@/components/ui/use-toast" import { getUser, updateUser } from "@/lib/auth-service" const settingsFormSchema = z.object({ firstName: z.string().min(2, { message: "First name must be at least 2 characters.", }), lastName: z.string().min(2, { message: "Last name must be at least 2 characters.", }), email: z.string().email({ message: "Please enter a valid email address.", }), phone: z.string().min(11, { message: "Phone number must be at least 11 digits.", }), }) export default function SettingsPage() { const [isLoading, setIsLoading] = useState(false) const router = useRouter() const user = getUser() const form = useForm>({ resolver: zodResolver(settingsFormSchema), defaultValues: { firstName: user?.firstName || "", lastName: user?.lastName || "", email: user?.email || "", phone: user?.phone || "", }, }) async function onSubmit(values: z.infer) { setIsLoading(true) try { // Update user data const updatedUser = updateUser({ firstName: values.firstName, lastName: values.lastName, email: values.email, phone: values.phone, }) if (!updatedUser) { throw new Error("Failed to update profile") } // Success toast({ title: "Profile updated", description: "Your profile has been updated successfully.", }) // Redirect to profile page router.push("/dashboard/profile") } catch (error) { toast({ title: "Update failed", description: "There was an error updating your profile. Please try again.", variant: "destructive", }) } finally { setIsLoading(false) } } return (

Settings

Edit Profile

( First Name )} /> ( Last Name )} />

( Email )} /> ( Phone Number )} />

) } [V0_FILE]typescriptreact:file="app/dashboard/settings/loading.tsx" isMerged="true" export default function Loading() { return (

) } [V0_FILE]typescriptreact:file="app/dashboard/data/loading.tsx" isMerged="true" export default function Loading() { return (

) } [V0_FILE]typescriptreact:file="app/dashboard/electricity/loading.tsx" isMerged="true" export default function Loading() { return (

) } [V0_FILE]typescriptreact:file="app/dashboard/cable/loading.tsx" isMerged="true" export default function Loading() { return (

) } [V0_FILE]typescriptreact:file="app/dashboard/more/loading.tsx" isMerged="true" export default function Loading() { return (

) } [V0_FILE]typescriptreact:file="app/dashboard/transactions/loading.tsx" isMerged="true" export default function Loading() { return (

) } [V0_FILE]typescriptreact:file="app/dashboard/more/page.tsx" isMerged="true" "use client" import Link from "next/link" import { useRouter } from "next/navigation" import { ArrowLeft, Landmark, Plane, Briefcase, Gamepad2, Gift, School, ShieldCheck, Smartphone } from "lucide-react" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import { toast } from "@/components/ui/use-toast" import { BankingImage } from "@/components/banking-image" export default function MorePage() { const router = useRouter() const services = [ { id: "loans", name: "Loans", icon: , href: "/dashboard/loans" }, { id: "travel", name: "Travel & Hotels", icon: , href: "/dashboard/travel" }, { id: "investments", name: "Investments", icon: , href: "/dashboard/investments" }, { id: "gaming", name: "Gaming", icon: , href: "/dashboard/gaming" }, { id: "gift-cards", name: "Gift Cards", icon: , href: "/dashboard/gift-cards" }, { id: "education", name: "Education", icon: , href: "/dashboard/education" }, { id: "insurance", name: "Insurance", icon: , href: "/dashboard/insurance" }, { id: "device-financing", name: "Device Financing", icon: , href: "/dashboard/device-financing", }, ] return (

More Services

{services.map((service) => ( ))}

) } [V0_FILE]typescript:file="data/transactions.ts" isMerged="true" // Helper function to get a date from n days ago function getDaysAgo(days: number): string { const date = new Date() date.setDate(date.getDate() - days) return date.toISOString().split("T")[0] // YYYY-MM-DD format } export const transactions = [ { id: "1", type: "debit", description: "Transfer to Ayo Ade", amount: 15000000, // 15 million naira date: getDaysAgo(2), // 2 days ago status: "completed", bankName: "Wema Bank", accountNumber: "5678901234", }, { id: "2", type: "credit", description: "Salary Payment", amount: 350000, date: getDaysAgo(10), status: "completed", }, { id: "3", type: "debit", description: "Rent Payment", amount: 850000, date: getDaysAgo(15), status: "completed", }, { id: "4", type: "debit", description: "Business Investment", amount: 1200000, date: getDaysAgo(22), status: "completed", }, { id: "5", type: "credit", description: "Consulting Fee", amount: 750000, date: getDaysAgo(30), status: "completed", }, { id: "6", type: "debit", description: "Insurance Premium", amount: 125000, date: getDaysAgo(35), status: "completed", }, ] [V0_FILE]typescript:file="components/add-money-modal.tsx" isMerged="true" "use client" import { useState } from "react" import { Copy, CheckCircle2 } from "lucide-react" import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogFooter, } from "@/components/ui/dialog" import { Button } from "@/components/ui/button" import { toast } from "@/components/ui/use-toast" interface AddMoneyModalProps { open: boolean onOpenChange: (open: boolean) => void } export function AddMoneyModal({ open, onOpenChange }: AddMoneyModalProps) { const [copied, setCopied] = useState(false) const accountDetails = { accountNumber: "6092697896", bankName: "9 payment service bank", accountName: "Oyinkansola Iyoro", } const handleCopy = () => { navigator.clipboard.writeText(accountDetails.accountNumber) setCopied(true) toast({ title: "Account number copied", description: "Account number has been copied to clipboard", }) setTimeout(() => setCopied(false), 3000) } return ( ) } [V0_FILE]typescript:file="data/banks.ts" isMerged="true" // Export both banks and nigerianBanks for compatibility export const banks = [ { code: "044", name: "Access Bank" }, { code: "050", name: "EcoBank" }, { code: "058", name: "GTBank" }, { code: "011", name: "First Bank" }, { code: "221", name: "Stanbic IBTC" }, { code: "068", name: "Standard Chartered" }, { code: "232", name: "Sterling Bank" }, { code: "033", name: "UBA" }, { code: "215", name: "Unity Bank" }, { code: "035", name: "Wema Bank" }, { code: "057", name: "Zenith Bank" }, { code: "302", name: "9 Payment Service Bank" }, ] export const nigerianBanks = banks [V0_FILE]typescript:file="app/direct-login/page.tsx" isMerged="true" "use client" import { useEffect } from "react" import { useRouter } from "next/navigation" import { login } from "@/lib/auth-service" export default function DirectLoginPage() { const router = useRouter() useEffect(() => { const performLogin = async () => { try { // Auto-login with default credentials await login("user@example.com", "password") // Redirect to dashboard router.push("/dashboard") } catch (error) { console.error("Failed to log in:", error) } } performLogin() }, [router]) return (

Logging you in...

Please wait while we prepare your dashboard.

) } [V0_FILE]typescriptreact:file="components/account-verification.tsx" isQuickEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import { Loader2, CheckCircle, AlertCircle } from "lucide-react" interface AccountVerificationProps { accountNumber: string bankCode: string onVerified?: (accountName: string) => void } export function AccountVerification({ accountNumber, bankCode, onVerified }: AccountVerificationProps) { const [isVerifying, setIsVerifying] = useState(false) const [accountName, setAccountName] = useState("") const [error, setError] = useState("") const [verified, setVerified] = useState(false) useEffect(() => { // Reset states when inputs change setAccountName("") setError("") setVerified(false) // Only verify if both account number and bank code are provided if (accountNumber.length === 10 && bankCode) { verifyAccount() } }, [accountNumber, bankCode]) const verifyAccount = async () => { setIsVerifying(true) setError("") try { // Make a real API call to Paystack to verify the account const response = await fetch(`/api/verify-account`, { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ account_number: accountNumber, bank_code: bankCode, }), }) const data = await response.json() if (!response.ok) { throw new Error(data.error || "Failed to verify account") } if (data.status && data.data) { const verifiedName = data.data.account_name setAccountName(verifiedName) setVerified(true) // Call the onVerified callback if provided if (onVerified) { onVerified(verifiedName) } } else { throw new Error("Invalid account details") } } catch (error) { setError("Could not verify account. Please check the details and try again.") } finally { setIsVerifying(false) } } if (!accountNumber || accountNumber.length < 10 || !bankCode) { return null } return (

{isVerifying ? (

Verifying account...

) : error ? (

{error}

) : verified ? (

{accountName}

) : null}

) } [V0_FILE]typescript:file="app/api/paystack/webhook/route.ts" isMerged="true" import { NextResponse } from "next/server" import crypto from "crypto" import { config } from "@/lib/config" import { sendSMS } from "@/lib/sms-service" import { verifyTransferStatus } from "@/lib/paystack-service" // Verify Paystack webhook signature function verifySignature(req: Request, body: string): boolean { const signature = req.headers.get("x-paystack-signature") if (!signature) return false const hash = crypto.createHmac("sha512", config.paystack.secretKey).update(body).digest("hex") return hash === signature } export async function POST(req: Request) { try { // Get the raw request body as text const body = await req.text() // Verify webhook signature in production if (process.env.NODE_ENV === "production") { if (!verifySignature(req, body)) { console.error("Invalid Paystack webhook signature") return NextResponse.json({ error: "Invalid signature" }, { status: 401 }) } } // Parse the body const event = JSON.parse(body) // Log the webhook event for debugging console.log("Paystack webhook received:", JSON.stringify(event, null, 2)) // Handle transfer.success event if (event.event === "transfer.success") { const transferData = event.data const transferCode = transferData.transfer_code // Verify transfer status by making an API call const verifiedTransfer = await verifyTransferStatus(transferCode) // Log the verified transfer data console.log("Verified transfer data:", JSON.stringify(verifiedTransfer, null, 2)) // If transfer is successful, send notification if (verifiedTransfer && verifiedTransfer.status === "success") { // Get recipient details const recipient = verifiedTransfer.recipient const amount = verifiedTransfer.amount / 100 // Convert from kobo to naira // Format amount as currency const formattedAmount = new Intl.NumberFormat("en-NG", { style: "currency", currency: "NGN", }).format(amount) // Send SMS notification to recipient // Note: In a real app, you would store recipient phone numbers // For demo, we'll use the provided phone number const recipientPhone = "0905 568 8690" // User's provided phone number // Format the message const message = `You have received ${formattedAmount} from Nova Pay Bank. Transaction Reference: ${verifiedTransfer.reference}` // Send the SMS await sendSMS(recipientPhone, message) console.log(`Notification sent to ${recipientPhone}`) } } return NextResponse.json({ status: "success" }) } catch (error) { console.error("Error processing Paystack webhook:", error) return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } [V0_FILE]typescript:file="lib/paystack-service.ts" isFixed="true" isQuickEdit="true" isMerged="true" // Types export interface AccountVerificationResponse { status: boolean message: string data?: { account_number: string account_name: string bank_id: number } } export interface BankResponse { status: boolean message: string data: Array<{ id: number name: string slug: string code: string longcode: string gateway: string pay_with_bank: boolean active: boolean country: string currency: string type: string is_deleted: boolean createdAt: string updatedAt: string }> } import config from "@/config" // Verify bank account export const verifyBankAccount = async ( accountNumber: string, bankCode: string, ): Promise<{ accountName: string } | null> => { try { // In a real production environment, this would be a server-side API call // For demo purposes, we'll simulate the API response // This is how you would make the actual API call to Paystack // const response = await fetch( // `${config.paystack.baseUrl}/bank/resolve?account_number=${accountNumber}&bank_code=${bankCode}`, // { // method: 'GET', // headers: { // Authorization: `Bearer ${config.paystack.secretKey}`, // 'Content-Type': 'application/json', // }, // } // ); // const data: AccountVerificationResponse = await response.json(); // if (data.status && data.data) { // return { accountName: data.data.account_name }; // } // For demo purposes, we'll use a predefined mapping // In a real app, you would use the commented code above // Simulate API delay await new Promise((resolve) => setTimeout(resolve, 800)) // Predefined account mappings const accountMap: Record = { "0123456789": "Chioma Okafor", "1234567890": "Emeka Nwosu", "2345678901": "Amina Ibrahim", "3456789012": "Tunde Bakare", "4567890123": "Ngozi Okonjo", "5678901234": "Oluwaseun Adeyemi", "6789012345": "Fatima Mohammed", "7890123456": "Chidi Okonkwo", "8901234567": "Blessing Ojo", "9012345678": "Emmanuel Adebayo", "0987654321": "John Doe", "9876543210": "Jane Smith", "8765432109": "Michael Johnson", "7654321098": "Sarah Williams", "6543210987": "David Brown", "5432109876": "Jennifer Davis", "4321098765": "Robert Miller", "3210987654": "Elizabeth Wilson", "2109876543": "James Taylor", "1098765432": "Patricia Anderson", } // Check if the account number exists in our mapping if (accountMap[accountNumber]) { return { accountName: accountMap[accountNumber] } } // If the account number is not in our mapping but is valid (10 digits) // Generate a consistent name based on the account number if (accountNumber.length === 10 && /^\d+$/.test(accountNumber)) { // Use the account number to generate a consistent name const firstDigit = Number.parseInt(accountNumber[0]) const lastDigit = Number.parseInt(accountNumber[9]) const firstNames = [ "Ade", "Chidi", "Ngozi", "Oluwaseun", "Fatima", "Yusuf", "Blessing", "Emmanuel", "Aisha", "Tunde", ] const lastNames = [ "Adeyemi", "Okonkwo", "Ibrahim", "Okafor", "Mohammed", "Nwachukwu", "Ojo", "Adebayo", "Olanrewaju", "Bakare", ] const firstName = firstNames[firstDigit] const lastName = lastNames[lastDigit] return { accountName: `${firstName} ${lastName}` } } return null } catch (error) { console.error("Error verifying bank account:", error) return null } } // Get all banks export const getBanks = async (): Promise => { try { // In a real production environment, this would be a server-side API call // For demo purposes, we'll return the predefined list // This is how you would make the actual API call to Paystack // const response = await fetch(`${config.paystack.baseUrl}/bank`, { // method: 'GET', // headers: { // Authorization: `Bearer ${config.paystack.secretKey}`, // 'Content-Type': 'application/json', // }, // }); // const data: BankResponse = await response.json(); // if (data.status) { // return data.data; // } return null } catch (error) { console.error("Error fetching banks:", error) return null } } /** * Verify transfer status by making an API call to Paystack * @param transferCode - The transfer code to verify * @returns The transfer data if successful, null otherwise */ export async function verifyTransferStatus(transferCode: string) { try { // Make API call to Paystack to verify transfer status const response = await fetch(`${config.paystack.baseUrl}/transfer/${transferCode}`, { method: "GET", headers: { Authorization: `Bearer ${config.paystack.secretKey}`, "Content-Type": "application/json", }, }) const data = await response.json() // Log the response for debugging console.log(`Transfer verification response for ${transferCode}:`, JSON.stringify(data, null, 2)) if (data.status && data.data) { return data.data } return null } catch (error) { console.error(`Error verifying transfer ${transferCode}:`, error) return null } } [V0_FILE]typescript:file="config.ts" isQuickEdit="true" isMerged="true" // Configuration for the application export const config = { // Paystack API keys paystack: { publicKey: "pk_test_90e084d4a351f8434d56d6b6e928695b2ce4174e", secretKey: "sk_test_8fc34c8951741870a49d6171e6c1e69fcff935e8", baseUrl: "https://api.paystack.co", }, // App name appName: "Nova Pay", // Currency currency: "NGN", // Currency symbol currencySymbol: "₦", // SMS API configuration sms: { // Africa's Talking API credentials africasTalking: { username: "Teddymfg", apiKey: "atsk_e049d44889915c8e6d9087901ca0a2143f64d7899c89e5bc8fe08ffb59b05e69dd5c0caa", }, // Local text API key (base64 encoded) localText: { apiKey: "NGE2MjRlNjY0ZjM1NTU2ZDczNzQ0Mzc1NDU0ZDQzMzI=", }, }, } export default config [V0_FILE]typescript:file="lib/receipt-service.ts" isMerged="true" import { jsPDF } from "jspdf" import "jspdf-autotable" import { formatCurrency } from "./utils" // Define the receipt data interface export interface ReceiptData { reference: string senderName: string senderAccount: string recipientName: string recipientAccount: string bankName: string amount: number date: string status: string narration?: string } /** * Generate a PDF receipt for a transaction * @param data - The receipt data * @returns The PDF document as a Blob */ export function generatePDFReceipt(data: ReceiptData): Blob { // Create a new PDF document const doc = new jsPDF() // Add logo and header doc.setFontSize(20) doc.setTextColor(0, 112, 196) // Nova Pay blue doc.text("Nova Pay Bank", 105, 20, { align: "center" }) doc.setFontSize(16) doc.setTextColor(0, 0, 0) doc.text("Transaction Receipt", 105, 30, { align: "center" }) // Add transaction status doc.setFontSize(14) if ( data.status.toLowerCase() === "successful" || data.status.toLowerCase() === "success" || data.status.toLowerCase() === "completed" ) { doc.setTextColor(0, 128, 0) // Green for success doc.text("Transaction Successful", 105, 40, { align: "center" }) } else { doc.setTextColor(255, 0, 0) // Red for failure doc.text("Transaction Failed", 105, 40, { align: "center" }) } // Add transaction amount doc.setFontSize(16) doc.setTextColor(0, 0, 0) doc.text(`Amount: ${formatCurrency(data.amount)}`, 105, 50, { align: "center" }) // Add transaction details table const tableData = [ ["Transaction Reference", data.reference], ["Date & Time", new Date(data.date).toLocaleString()], ["Sender", data.senderName], ["Sender Account", data.senderAccount], ["Recipient", data.recipientName], ["Recipient Account", data.recipientAccount], ["Bank", data.bankName], ["Status", data.status], ] if (data.narration) { tableData.push(["Narration", data.narration]) } // @ts-ignore - jsPDF-autotable types are not properly recognized doc.autoTable({ startY: 60, head: [["Detail", "Value"]], body: tableData, theme: "grid", headStyles: { fillColor: [0, 112, 196], textColor: [255, 255, 255] }, alternateRowStyles: { fillColor: [240, 240, 240] }, }) // Add footer const pageCount = doc.internal.getNumberOfPages() doc.setFontSize(10) doc.setTextColor(100, 100, 100) for (let i = 1; i <= pageCount; i++) { doc.setPage(i) doc.text( "This is an electronic receipt and does not require a signature.", 105, doc.internal.pageSize.height - 20, { align: "center" }, ) doc.text(`Generated on ${new Date().toLocaleString()}`, 105, doc.internal.pageSize.height - 15, { align: "center" }) doc.text(`Page ${i} of ${pageCount}`, 105, doc.internal.pageSize.height - 10, { align: "center" }) } // Return the PDF as a blob return doc.output("blob") } /** * Save a receipt to local storage * @param userId - The user ID * @param receiptData - The receipt data */ export function saveReceipt(userId: string, receiptData: ReceiptData): void { try { // Get existing receipts const receiptsJson = localStorage.getItem(`receipts_${userId}`) const receipts = receiptsJson ? JSON.parse(receiptsJson) : [] // Add new receipt receipts.unshift({ ...receiptData, savedAt: new Date().toISOString(), }) // Save back to local storage localStorage.setItem(`receipts_${userId}`, JSON.stringify(receipts)) console.log(`Receipt saved for user ${userId}`) } catch (error) { console.error("Failed to save receipt:", error) } } /** * Get all receipts for a user * @param userId - The user ID * @returns Array of receipt data */ export function getReceipts(userId: string): Array { try { const receiptsJson = localStorage.getItem(`receipts_${userId}`) return receiptsJson ? JSON.parse(receiptsJson) : [] } catch (error) { console.error("Failed to get receipts:", error) return [] } } /** * Get a receipt by reference * @param userId - The user ID * @param reference - The receipt reference * @returns The receipt data or null if not found */ export function getReceiptByReference(userId: string, reference: string): (ReceiptData & { savedAt: string }) | null { try { const receipts = getReceipts(userId) return receipts.find((receipt) => receipt.reference === reference) || null } catch (error) { console.error("Failed to get receipt:", error) return null } } /** * Delete a receipt * @param userId - The user ID * @param reference - The receipt reference * @returns Whether the deletion was successful */ export function deleteReceipt(userId: string, reference: string): boolean { try { const receipts = getReceipts(userId) const newReceipts = receipts.filter((receipt) => receipt.reference !== reference) if (newReceipts.length === receipts.length) { return false // Receipt not found } localStorage.setItem(`receipts_${userId}`, JSON.stringify(newReceipts)) return true } catch (error) { console.error("Failed to delete receipt:", error) return false } } [V0_FILE]typescriptreact:file="components/receipt-sharing.tsx" isMerged="true" "use client" import { useState } from "react" import { Download, Share2, Printer, Copy, Check } from "lucide-react" import { Button } from "@/components/ui/button" import { toast } from "@/components/ui/use-toast" import { type ReceiptData, generatePDFReceipt } from "@/lib/receipt-service" interface ReceiptSharingProps { receiptData: ReceiptData } export function ReceiptSharing({ receiptData }: ReceiptSharingProps) { const [isCopied, setIsCopied] = useState(false) const [isGenerating, setIsGenerating] = useState(false) // Generate and download the PDF receipt const handleDownload = async () => { setIsGenerating(true) try { const pdfBlob = generatePDFReceipt(receiptData) const url = URL.createObjectURL(pdfBlob) // Create a link and trigger download const link = document.createElement("a") link.href = url link.download = `Receipt_${receiptData.reference}.pdf` document.body.appendChild(link) link.click() document.body.removeChild(link) toast({ title: "Receipt downloaded", description: "The receipt has been downloaded to your device.", }) } catch (error) { console.error("Failed to download receipt:", error) toast({ title: "Download failed", description: "Failed to download the receipt. Please try again.", variant: "destructive", }) } finally { setIsGenerating(false) } } // Share the receipt const handleShare = async () => { try { const pdfBlob = generatePDFReceipt(receiptData) // Check if Web Share API is available if (navigator.share) { const file = new File([pdfBlob], `Receipt_${receiptData.reference}.pdf`, { type: "application/pdf" }) await navigator.share({ title: "Nova Pay Transaction Receipt", text: `Transaction receipt for ${receiptData.reference}`, files: [file], }) toast({ title: "Receipt shared", description: "The receipt has been shared successfully.", }) } else { // Fallback if Web Share API is not available handleDownload() } } catch (error) { console.error("Failed to share receipt:", error) // If sharing fails, fallback to download if (error instanceof Error && error.name !== "AbortError") { handleDownload() } } } // Print the receipt const handlePrint = async () => { setIsGenerating(true) try { const pdfBlob = generatePDFReceipt(receiptData) const url = URL.createObjectURL(pdfBlob) // Open the PDF in a new window and print it const printWindow = window.open(url) if (printWindow) { printWindow.onload = () => { printWindow.print() } } else { // If popup is blocked, just open the PDF window.open(url, "_blank") toast({ title: "Print preparation", description: "The receipt has been opened in a new tab. Please use your browser's print function.", }) } } catch (error) { console.error("Failed to print receipt:", error) toast({ title: "Print failed", description: "Failed to prepare the receipt for printing. Please try again.", variant: "destructive", }) } finally { setIsGenerating(false) } } // Copy receipt details to clipboard const handleCopy = () => { const receiptText = ` Nova Pay Bank Transaction Receipt -------------------------------- Reference: ${receiptData.reference} Date: ${new Date(receiptData.date).toLocaleString()} Amount: ${new Intl.NumberFormat("en-NG", { style: "currency", currency: "NGN" }).format(receiptData.amount)} From: ${receiptData.senderName} (${receiptData.senderAccount}) To: ${receiptData.recipientName} (${receiptData.recipientAccount}) Bank: ${receiptData.bankName} Status: ${receiptData.status} ${receiptData.narration ? `Narration: ${receiptData.narration}` : ""} `.trim() navigator.clipboard.writeText(receiptText) setIsCopied(true) toast({ title: "Receipt copied", description: "The receipt details have been copied to clipboard.", }) setTimeout(() => setIsCopied(false), 2000) } return (

) } [V0_FILE]typescriptreact:file="app/dashboard/receipts/page.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import Link from "next/link" import { useRouter } from "next/navigation" import { ArrowLeft, Search, FileText, Download } from "lucide-react" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { getUser } from "@/lib/auth-service" import { getReceipts, generatePDFReceipt } from "@/lib/receipt-service" import { formatCurrency } from "@/lib/utils" import { toast } from "@/components/ui/use-toast" export default function ReceiptsPage() { const router = useRouter() const [searchQuery, setSearchQuery] = useState("") const [receipts, setReceipts] = useState([]) const [isLoading, setIsLoading] = useState(false) // Load receipts when component mounts useEffect(() => { const user = getUser() if (user) { const userReceipts = getReceipts(user.id) setReceipts(userReceipts) } }, []) // Filter receipts based on search query const filteredReceipts = receipts.filter((receipt) => { const searchLower = searchQuery.toLowerCase() return ( receipt.reference.toLowerCase().includes(searchLower) || receipt.recipientName.toLowerCase().includes(searchLower) || receipt.recipientAccount.toLowerCase().includes(searchLower) || receipt.bankName.toLowerCase().includes(searchLower) ) }) // Format date to readable format const formatDate = (dateString: string) => { const options: Intl.DateTimeFormatOptions = { year: "numeric", month: "short", day: "numeric", hour: "2-digit", minute: "2-digit", } return new Date(dateString).toLocaleDateString("en-US", options) } // Download receipt const handleDownload = async (receipt: any) => { setIsLoading(true) try { const pdfBlob = generatePDFReceipt(receipt) const url = URL.createObjectURL(pdfBlob) // Create a link and trigger download const link = document.createElement("a") link.href = url link.download = `Receipt_${receipt.reference}.pdf` document.body.appendChild(link) link.click() document.body.removeChild(link) toast({ title: "Receipt downloaded", description: "The receipt has been downloaded to your device.", }) } catch (error) { console.error("Failed to download receipt:", error) toast({ title: "Download failed", description: "Failed to download the receipt. Please try again.", variant: "destructive", }) } finally { setIsLoading(false) } } // View receipt details const handleViewReceipt = (receipt: any) => { // Store receipt in session storage for the details page sessionStorage.setItem("viewReceipt", JSON.stringify(receipt)) router.push(`/dashboard/receipts/${receipt.reference}`) } return (

Transaction Receipts

setSearchQuery(e.target.value)} />

{filteredReceipts.length > 0 ? ( filteredReceipts.map((receipt) => (

handleViewReceipt(receipt)} >

{receipt.recipientName}

{formatDate(receipt.date)}

Ref: {receipt.reference}

-{formatCurrency(receipt.amount)}

)) ) : (

No receipts found

)}

) } [V0_FILE]typescriptreact:file="app/dashboard/receipts/loading.tsx" isFixed="true" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/dashboard/receipts/[reference]/page.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import { useRouter } from "next/navigation" import Link from "next/link" import { ArrowLeft, CheckCircle2 } from "lucide-react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardFooter, CardHeader } from "@/components/ui/card" import { formatCurrency } from "@/lib/utils" import { ReceiptSharing } from "@/components/receipt-sharing" import { getUser } from "@/lib/auth-service" import { getReceiptByReference } from "@/lib/receipt-service" export default function ReceiptDetailPage({ params }: { params: { reference: string } }) { const router = useRouter() const [receipt, setReceipt] = useState(null) const [loading, setLoading] = useState(true) useEffect(() => { // Try to get receipt from session storage first (if coming from receipts list) const sessionReceipt = sessionStorage.getItem("viewReceipt") if (sessionReceipt) { setReceipt(JSON.parse(sessionReceipt)) sessionStorage.removeItem("viewReceipt") // Clean up setLoading(false) return } // Otherwise, get receipt from storage by reference const user = getUser() if (user) { const foundReceipt = getReceiptByReference(user.id, params.reference) if (foundReceipt) { setReceipt(foundReceipt) } else { // Receipt not found, redirect back to receipts list router.push("/dashboard/receipts") } } else { // User not found, redirect to login router.push("/login") } setLoading(false) }, [params.reference, router]) if (loading) { return (

) } if (!receipt) { return (

Receipt not found

) } // Format date properly const formattedDate = new Date(receipt.date).toLocaleString("en-US", { year: "numeric", month: "short", day: "numeric", hour: "2-digit", minute: "2-digit", }) return (

Transaction Receipt

Transfer Receipt

{formatCurrency(receipt.amount)}

Transaction ID

{receipt.reference}

Sender

{receipt.senderName}

Sender Account

{receipt.senderAccount}

Recipient

{receipt.recipientName}

Recipient Account

{receipt.recipientAccount}

Bank

{receipt.bankName}

Date

{formattedDate}

Status

{receipt.status}

{receipt.narration && (

Narration

{receipt.narration}

)}

) } [V0_FILE]typescriptreact:file="components/quick-action-button.tsx" isMerged="true" import Link from "next/link" import type { ReactNode } from "react" interface QuickActionButtonProps { icon: ReactNode label: string href: string } export function QuickActionButton({ icon, label, href }: QuickActionButtonProps) { return (

{icon}

{label} ) } [V0_FILE]typescript:file="lib/otp-service.ts" isMerged="true" import { sendSMS } from "./sms-service" // Interface for OTP data interface OTPData { code: string expiresAt: Date verified: boolean } // Store OTPs in memory (in a real app, use a database) const otpStore: Record = {} /** * Generate a random 6-digit OTP * @returns A 6-digit OTP code */ function generateOTPCode(): string { return Math.floor(100000 + Math.random() * 900000).toString() } /** * Generate an OTP for a user and send it via SMS * @param userId - The user ID to generate OTP for * @param phoneNumber - The phone number to send the OTP to * @returns The generated OTP data */ export async function generateAndSendOTP(userId: string, phoneNumber: string): Promise { // Generate a random 6-digit OTP const otpCode = generateOTPCode() // Set expiration time (5 minutes from now) const expiresAt = new Date() expiresAt.setMinutes(expiresAt.getMinutes() + 5) // Store the OTP const otpData: OTPData = { code: otpCode, expiresAt, verified: false, } otpStore[userId] = otpData // Send the OTP via SMS try { const message = `Your Nova Pay verification code is: ${otpCode}. This code will expire in 5 minutes.` await sendSMS(phoneNumber, message) console.log(`OTP sent to ${phoneNumber}`) } catch (error) { console.error("Failed to send OTP via SMS:", error) throw new Error("Failed to send OTP via SMS") } return otpData } /** * Verify an OTP for a user * @param userId - The user ID to verify OTP for * @param otpCode - The OTP code to verify * @returns Whether the OTP is valid */ export function verifyOTP(userId: string, otpCode: string): boolean { const otpData = otpStore[userId] // Check if OTP exists if (!otpData) { console.log(`No OTP found for user ${userId}`) return false } // Check if OTP is expired if (new Date() > otpData.expiresAt) { console.log(`OTP for user ${userId} has expired`) delete otpStore[userId] // Clean up expired OTP return false } // Check if OTP matches if (otpData.code !== otpCode) { console.log(`Invalid OTP for user ${userId}`) return false } // Mark OTP as verified otpData.verified = true console.log(`OTP verified for user ${userId}`) // Clean up after successful verification setTimeout(() => { delete otpStore[userId] }, 1000) return true } /** * Get the remaining time for an OTP in seconds * @param userId - The user ID to check * @returns The remaining time in seconds, or 0 if expired/not found */ export function getOTPRemainingTime(userId: string): number { const otpData = otpStore[userId] if (!otpData) { return 0 } const now = new Date() const expiresAt = otpData.expiresAt if (now > expiresAt) { return 0 } return Math.floor((expiresAt.getTime() - now.getTime()) / 1000) } /** * Check if a user has a pending OTP * @param userId - The user ID to check * @returns Whether the user has a pending OTP */ export function hasPendingOTP(userId: string): boolean { return !!otpStore[userId] && !otpStore[userId].verified } [V0_FILE]typescript:file="app/api/send-sms/route.ts" isMerged="true" import { NextResponse } from "next/server" // Africa's Talking API credentials // In production, these should be stored as environment variables const AFRICAS_TALKING_USERNAME = "Teddymfg" const AFRICAS_TALKING_API_KEY = "atsk_e049d44889915c8e6d9087901ca0a2143f64d7899c89e5bc8fe08ffb59b05e69dd5c0caa" export async function POST(request: Request) { try { // Parse the request body const body = await request.json() const { phoneNumber, message } = body // Validate required fields if (!phoneNumber || !message) { return NextResponse.json({ error: "Phone number and message are required" }, { status: 400 }) } console.log(`Sending SMS to ${phoneNumber}: ${message}`) // Make the API call to Africa's Talking const response = await fetch("https://api.africastalking.com/version1/messaging", { method: "POST", headers: { "Content-Type": "application/x-www-form-urlencoded", Accept: "application/json", apiKey: AFRICAS_TALKING_API_KEY, }, body: new URLSearchParams({ username: AFRICAS_TALKING_USERNAME, to: phoneNumber, message: message, }).toString(), }) // Handle API response const data = await response.json() console.log("Africa's Talking API response:", data) if (!response.ok) { console.error("SMS API error:", data) return NextResponse.json({ error: data.message || "Failed to send SMS" }, { status: response.status }) } return NextResponse.json(data) } catch (error) { console.error("SMS API error:", error) return NextResponse.json({ error: "Failed to send SMS" }, { status: 500 }) } } [V0_FILE]typescriptreact:file="app/global-error.tsx" isMerged="true" "use client" import { Button } from "@/components/ui/button" export default function GlobalError({ error, reset, }: { error: Error & { digest?: string } reset: () => void }) { return (

Application Error

We're sorry, but there was a critical error loading the application.

) } [V0_FILE]typescriptreact:file="app/not-found.tsx" isMerged="true" "use client" import { Button } from "@/components/ui/button" export default function NotFound() { return (

404 - Page Not Found

The page you are looking for doesn't exist or has been moved.

) } [V0_FILE]typescriptreact:file="components/auth-guard.tsx" isMerged="true" "use client" import type React from "react" import { useEffect, useState } from "react" import { usePathname } from "next/navigation" import { Loader2 } from "lucide-react" interface AuthGuardProps { children: React.ReactNode } export function AuthGuard({ children }: AuthGuardProps) { const pathname = usePathname() const [mounted, setMounted] = useState(false) const [authorized, setAuthorized] = useState(true) useEffect(() => { // Mark component as mounted setMounted(true) // Public routes that don't require authentication const publicRoutes = ["/", "/splash", "/onboarding", "/login", "/register", "/direct-login"] // Check if the current route is public const isPublicRoute = publicRoutes.some((route) => pathname === route) try { // Check authentication status - use a try/catch to safely access localStorage let authenticated = false try { authenticated = localStorage.getItem("nova_pay_auth") !== null } catch (e) { console.error("Error accessing localStorage:", e) } if (!authenticated && !isPublicRoute) { // Not authenticated and not on public route setAuthorized(false) window.location.href = "/login" } else if (authenticated && isPublicRoute && pathname !== "/") { // Authenticated and on public route (except root) setAuthorized(false) window.location.href = "/dashboard" } else { setAuthorized(true) } } catch (error) { console.error("Auth check error:", error) setAuthorized(true) // Default to authorized on error } }, [pathname]) // Don't render anything during server-side rendering if (!mounted) { return null } // Show loading state while checking authorization if (!authorized) { return (

) } return <>{children} } [V0_FILE]typescriptreact:file="components/error-boundary.tsx" isMerged="true" "use client" import React from "react" import { Button } from "@/components/ui/button" interface ErrorBoundaryProps { children: React.ReactNode } interface ErrorBoundaryState { hasError: boolean error?: Error } class ErrorBoundary extends React.Component { constructor(props: ErrorBoundaryProps) { super(props) this.state = { hasError: false } } static getDerivedStateFromError(error: Error): ErrorBoundaryState { // Update state so the next render will show the fallback UI return { hasError: true, error } } componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void { // You can log the error to an error reporting service console.error("Error caught by ErrorBoundary:", error, errorInfo) } render() { if (this.state.hasError) { // Fallback UI return (

Something went wrong

We're sorry, but there was an error in the application.

) } return this.props.children } } export default ErrorBoundary [V0_FILE]typescriptreact:file="app/error.tsx" isMerged="true" "use client" import { Button } from "@/components/ui/button" export default function Error({ error, reset, }: { error: Error & { digest?: string } reset: () => void }) { // Log the error console.error("Application error:", error) return (

Something went wrong

We're sorry, but there was an error loading the page.

) } [V0_FILE]typescriptreact:file="app/dashboard/layout.tsx" isMerged="true" "use client" import type React from "react" import { useEffect, useState } from "react" export default function DashboardLayout({ children }: { children: React.ReactNode }) { const [mounted, setMounted] = useState(false) useEffect(() => { setMounted(true) // Initialize user data with 5 million balance on dashboard load try { const userJson = localStorage.getItem("nova_pay_user") if (userJson) { const user = JSON.parse(userJson) // Ensure the user has 5 million balance if (user && (!user.balance || user.balance < 5000000)) { user.balance = 5000000 localStorage.setItem("nova_pay_user", JSON.stringify(user)) } } } catch (error) { console.error("Error initializing user data:", error) } }, []) if (!mounted) { return null } return <>{children} } [V0_FILE]typescriptreact:file="components/opay-logo.tsx" isMerged="true" import type React from "react" interface OPayLogoProps { className?: string size?: "small" | "medium" | "large" variant?: "default" | "white" } export const OPayLogo: React.FC = ({ className = "", size = "medium", variant = "default" }) => { // Define sizes for different variants const sizes = { small: { width: 100, height: 40 }, medium: { width: 150, height: 60 }, large: { width: 200, height: 80 }, } const { width, height } = sizes[size] // Use a placeholder for the OPay logo // In a real application, you would use the actual OPay logo return (

OPay

) } [V0_FILE]typescriptreact:file="app/login/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { useState } from "react" import Link from "next/link" import { useRouter } from "next/navigation" import { Loader2, Mail, Lock } from "lucide-react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { toast } from "@/components/ui/use-toast" import { login } from "@/lib/auth-service" import { BankingImage } from "@/components/banking-image" export default function LoginPage() { const [isLoading, setIsLoading] = useState(false) const [email, setEmail] = useState("") const [password, setPassword] = useState("") const router = useRouter() async function onSubmit(e: React.FormEvent) { e.preventDefault() setIsLoading(true) try { // Use our auth service to login await login(email, password) // Success toast({ title: "Login successful!", description: "Welcome back to OPay Bank.", }) router.push("/dashboard") } catch (error) { toast({ title: "Invalid credentials", description: "Please check your email and password.", variant: "destructive", }) } finally { setIsLoading(false) } } return (

Welcome to OPay

Enter your credentials to access your OPay Bank account

setEmail(e.target.value)} required />

Password

setPassword(e.target.value)} required />

Remember me

Forgot password?

Don't have an account?{" "} Create an account

Demo Account

Email: user@example.com

Password: password

) } [V0_FILE]typescriptreact:file="app/register/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import Link from "next/link" import { useRouter } from "next/navigation" import { zodResolver } from "@hookform/resolvers/zod" import { useForm } from "react-hook-form" import { z } from "zod" import { ArrowLeft, Loader2, Mail, Phone, User, Lock } from "lucide-react" import { Button } from "@/components/ui/button" import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form" import { Input } from "@/components/ui/input" import { toast } from "@/components/ui/use-toast" import { register as registerUser } from "@/lib/auth-service" import { BankingImage } from "@/components/banking-image" const registerFormSchema = z .object({ firstName: z.string().min(2, { message: "First name must be at least 2 characters.", }), lastName: z.string().min(2, { message: "Last name must be at least 2 characters.", }), email: z.string().email({ message: "Please enter a valid email address.", }), phone: z.string().min(11, { message: "Phone number must be at least 11 digits.", }), password: z.string().min(8, { message: "Password must be at least 8 characters.", }), confirmPassword: z.string(), }) .refine((data) => data.password === data.confirmPassword, { message: "Passwords do not match", path: ["confirmPassword"], }) export default function RegisterPage() { const [isLoading, setIsLoading] = useState(false) const router = useRouter() const form = useForm>({ resolver: zodResolver(registerFormSchema), defaultValues: { firstName: "", lastName: "", email: "", phone: "", password: "", confirmPassword: "", }, }) async function onSubmit(values: z.infer) { setIsLoading(true) try { // Use our auth service to register await registerUser({ firstName: values.firstName, lastName: values.lastName, email: values.email, phone: values.phone, }) // Success toast({ title: "Account created successfully!", description: "You can now use your OPay account.", }) router.push("/dashboard") } catch (error) { toast({ title: "Something went wrong.", description: "Please try again later.", variant: "destructive", }) } finally { setIsLoading(false) } } return (

Create an Account

Enter your information to create an OPay Bank account

( First Name

)} /> ( Last Name

)} />

( Email

)} /> ( Phone Number

)} /> ( Password

)} /> ( Confirm Password

)} />

Already have an account?{" "} Login

Back to home

) } [V0_FILE]typescriptreact:file="app/splash/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useEffect } from "react" import { useRouter } from "next/navigation" export default function SplashScreen() { const router = useRouter() useEffect(() => { // Redirect to onboarding after 2 seconds const timer = setTimeout(() => { router.push("/onboarding") }, 2000) return () => clearTimeout(timer) }, [router]) return (

OPay Bank

Banking made simple

) } [V0_FILE]typescriptreact:file="app/onboarding/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import { useRouter } from "next/navigation" import { ChevronLeft, ChevronRight } from "lucide-react" import { Button } from "@/components/ui/button" const onboardingSteps = [ { title: "Fast & Secure Transfers", description: "Send money to any Nigerian bank instantly with real-time confirmation.", }, { title: "Pay Bills Effortlessly", description: "Pay for airtime, data, electricity, and more in seconds.", }, { title: "Virtual Cards", description: "Create virtual cards for online shopping and subscriptions.", }, { title: "Instant Loans", description: "Access quick loans when you need them most.", }, ] export default function OnboardingPage() { const [currentStep, setCurrentStep] = useState(0) const router = useRouter() const nextStep = () => { if (currentStep < onboardingSteps.length - 1) { setCurrentStep(currentStep + 1) } else { router.push("/login") } } const prevStep = () => { if (currentStep > 0) { setCurrentStep(currentStep - 1) } } const skipOnboarding = () => { router.push("/login") } return (

{currentStep + 1}

{onboardingSteps[currentStep].title}

{onboardingSteps[currentStep].description}

{onboardingSteps.map((_, index) => (

))}

) } [V0_FILE]typescriptreact:file="lib/sms-service.ts" isEdit="true" isQuickEdit="true" isMerged="true" // Types for SMS responses interface SendSMSResponse { SMSMessageData: { Message: string Recipients: Array<{ number: string status: string messageId: string cost: string }> } } /** * Sends an SMS notification using Africa's Talking API * @param phoneNumber - The recipient's phone number (should include country code) * @param message - The message to send * @returns Promise with the SMS response */ export async function sendSMS(phoneNumber: string, message: string): Promise { try { // Make sure phone number is in international format const formattedPhone = formatPhoneNumber(phoneNumber) // Call our server-side API route const response = await fetch("/api/send-sms", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ phoneNumber: formattedPhone, message, }), }) if (!response.ok) { const errorData = await response.json() throw new Error(errorData.error || "Failed to send SMS") } return await response.json() } catch (error) { console.error("Error sending SMS:", error) throw error } } /** * Formats a phone number to ensure it has the country code * @param phoneNumber - The phone number to format * @returns Formatted phone number with country code */ function formatPhoneNumber(phoneNumber: string): string { // Remove any non-digit characters const digitsOnly = phoneNumber.replace(/\D/g, "") // If it doesn't start with +, add Nigerian country code if (!phoneNumber.startsWith("+")) { // If it starts with 0, replace with +234 if (digitsOnly.startsWith("0")) { return "+234" + digitsOnly.substring(1) } // If it doesn't have country code, add +234 return "+234" + digitsOnly } return phoneNumber } // Update the SMS service to use OPay branding export async function sendTransferNotification( phoneNumber: string, amount: number, recipientName: string, ): Promise { const formattedAmount = new Intl.NumberFormat("en-NG", { style: "currency", currency: "NGN", }).format(amount) const message = `OPay: Your transfer of ${formattedAmount} to ${recipientName} was successful. Thank you for using OPay Bank.` await sendSMS(phoneNumber, message) } export async function sendOTP(phoneNumber: string, otp: string): Promise { const message = `Your OPay verification code is: ${otp}. This code will expire in 5 minutes.` await sendSMS(phoneNumber, message) } export async function sendTransferReceiptNotification( phoneNumber: string, amount: number, senderName: string, ): Promise { const formattedAmount = new Intl.NumberFormat("en-NG", { style: "currency", currency: "NGN", }).format(amount) const message = `OPay: You have received ${formattedAmount} from ${senderName}. Thank you for using OPay Bank.` await sendSMS(phoneNumber, message) } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import Link from "next/link" import { Button } from "@/components/ui/button" export default function Home() { return (

Welcome to OPay Bank

Please click the button below to continue

) } [V0_FILE]typescriptreact:file="components/hero-section.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import Link from "next/link" import Image from "next/image" import { ArrowRight } from "lucide-react" import { Button } from "@/components/ui/button" export function HeroSection() { return (

Banking Made Simple for Nigerians

Fast, secure, and reliable banking services. Create an account, manage your finances, and make transfers in seconds.

) } [V0_FILE]typescriptreact:file="components/feature-section.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import { CreditCard, Shield, Zap, RefreshCw, Globe, Phone } from "lucide-react" export function FeatureSection() { return (

Features

Everything You Need in a Bank

OPay Bank provides all the essential banking features with a modern twist. Manage your money with ease and confidence.

Instant Transfers

Send money to any Nigerian bank instantly, with real-time confirmation.

Secure Banking

Two-factor authentication and advanced encryption to keep your money safe.

Quick Account Setup

Create your account in minutes with just your email and phone number.

Real-time Updates

Get instant notifications for all account activities and transactions.

All Nigerian Banks

Connect and transfer to all Nigerian banks from one platform.

Mobile Friendly

Access your account and make transactions from any device, anywhere.

) } [V0_FILE]typescriptreact:file="components/cta-section.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import Link from "next/link" import { ArrowRight } from "lucide-react" import { Button } from "@/components/ui/button" export function CTASection() { return (

Ready to Get Started?

Join thousands of Nigerians who trust OPay Bank for their banking needs.

) } [V0_FILE]typescriptreact:file="components/testimonial-section.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import Image from "next/image" export function TestimonialSection() { return (

Testimonials

What Our Customers Say

Don't just take our word for it. Here's what our customers have to say about OPay Bank.

Chioma Okafor

Lagos, Nigeria

"FastPay Bank has transformed how I manage my finances. The instant transfers are a game-changer for my business."

{[...Array(5)].map((_, i) => ( ))}

Emeka Nwosu

Abuja, Nigeria

"The security features give me peace of mind. I love how I get notifications for every transaction on my account."

{[...Array(5)].map((_, i) => ( ))}

Amina Ibrahim

Kano, Nigeria

"Setting up my account was incredibly easy. The interface is intuitive and I can manage everything from my phone."

{[...Array(5)].map((_, i) => ( ))}

) } [V0_FILE]typescriptreact:file="app/loading.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import { Loader2 } from "lucide-react" export default function Loading() { return (

Loading OPay Bank...

) } [V0_FILE]typescriptreact:file="app/dashboard/loading.tsx" isEdit="true" isQuickEdit="true" isMerged="true" export default function Loading() { return (

) } [V0_FILE]typescriptreact:file="components/withdrawal-form.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import { zodResolver } from "@hookform/resolvers/zod" import { useForm } from "react-hook-form" import { z } from "zod" import { Loader2 } from "lucide-react" import { Button } from "@/components/ui/button" import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form" import { Input } from "@/components/ui/input" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { toast } from "@/components/ui/use-toast" import { Card, CardContent } from "@/components/ui/card" import { AccountVerification } from "@/components/account-verification" import { nigerianBanks } from "@/data/banks" import { updateBalance } from "@/lib/auth-service" import { config } from "@/lib/config" const withdrawalFormSchema = z.object({ accountNumber: z.string().min(10, { message: "Account number must be at least 10 digits.", }), bankCode: z.string({ required_error: "Please select a bank.", }), amount: z.string().min(1, { message: "Amount is required.", }), }) interface WithdrawalFormProps { onSuccess: (data: any) => void } export function WithdrawalForm({ onSuccess }: WithdrawalFormProps) { const [isLoading, setIsLoading] = useState(false) const [verifiedAccountName, setVerifiedAccountName] = useState("") const form = useForm>({ resolver: zodResolver(withdrawalFormSchema), defaultValues: { accountNumber: "", bankCode: "", amount: "", }, }) const accountNumber = form.watch("accountNumber") const bankCode = form.watch("bankCode") async function onSubmit(values: z.infer) { if (!verifiedAccountName) { toast({ title: "Account verification required", description: "Please wait for the account to be verified before proceeding.", variant: "destructive", }) return } setIsLoading(true) try { // Parse amount const amount = Number.parseInt(values.amount) // Update user balance const updatedUser = updateBalance(amount, true) if (!updatedUser) { throw new Error("Failed to update balance") } // Simulate API call await new Promise((resolve) => setTimeout(resolve, 1500)) // Mock response const mockResponse = { status: "success", message: "Withdrawal successful", data: { transaction_id: `WTH-${Date.now()}`, amount: amount, recipient_account_number: values.accountNumber, recipient_bank_code: values.bankCode, reference: `${config.appName.replace(/\s+/g, "").toUpperCase()}-${Date.now()}`, fee: 10.0, date: new Date().toISOString(), status: "completed", withdrawal_code: `WTH_${Math.random().toString(36).substring(2, 10).toUpperCase()}`, }, } // Success toast({ title: "Withdrawal successful!", description: `${config.currencySymbol}${amount.toLocaleString()} has been sent to your account.`, }) // Set receipt data const bankName = nigerianBanks.find((bank) => bank.code === values.bankCode)?.name || "Unknown Bank" onSuccess({ ...mockResponse.data, bankName, accountName: verifiedAccountName, }) } catch (error) { toast({ title: "Withdrawal failed", description: "There was an error processing your withdrawal. Please try again.", variant: "destructive", }) } finally { setIsLoading(false) } } return (

( Account Number )} /> ( Bank )} /> ( Amount ({config.currencySymbol}) )} />

) } [V0_FILE]typescriptreact:file="components/withdrawal-receipt.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { Button } from "@/components/ui/button" import { Card, CardContent, CardFooter, CardHeader } from "@/components/ui/card" import { CheckCircle2, Download, Share2 } from "lucide-react" interface WithdrawalReceiptProps { transactionId: string amount: number accountNumber: string bankName: string date: string reference: string onClose: () => void accountName?: string } export function WithdrawalReceipt({ transactionId, amount, accountNumber, bankName, date, reference, onClose, accountName, }: WithdrawalReceiptProps) { // Format date properly to avoid hydration issues const formattedDate = new Date(date).toLocaleString("en-US", { year: "numeric", month: "short", day: "numeric", hour: "2-digit", minute: "2-digit", }) return (

Withdrawal Successful!

Your money has been sent to your account

₦{amount.toLocaleString()}

Transaction ID

{transactionId}

{accountName && (

Recipient

{accountName}

)}

Account Number

{accountNumber}

Bank

{bankName}

Date

{formattedDate}

Reference

{reference}

) } [V0_FILE]typescriptreact:file="tailwind.config.ts" isEdit="true" isMerged="true" import type { Config } from "tailwindcss" const config = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}", ], prefix: "", 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))", }, // Nova Pay custom colors novapay: { 50: "#f0f7ff", 100: "#e0eefe", 200: "#bae0fd", 300: "#7cc8fb", 400: "#36aaf5", 500: "#0c8ee7", 600: "#0070c4", 700: "#0059a0", 800: "#064b84", 900: "#0a406e", 950: "#07294a", }, }, 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")], } satisfies Config export default config [V0_FILE]typescriptreact:file="app/globals.css" isEdit="true" 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: 210 100% 45%; --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: 222.2 84% 4.9%; --radius: 0.5rem; } .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: 210 100% 45%; --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: 212.7 26.8% 83.9%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } /* Custom styles for Nova Pay Bank */ .splash-screen { background: linear-gradient(135deg, #0070c4 0%, #064b84 100%); } .dashboard-gradient { background: linear-gradient(135deg, #0070c4 0%, #064b84 100%); } .card-gradient { background: linear-gradient(135deg, #0070c4 0%, #064b84 100%); } [V0_FILE]typescriptreact:file="components/nova-pay-logo.tsx" isEdit="true" isMerged="true" import type React from "react" interface NovaPayLogoProps { className?: string size?: "small" | "medium" | "large" variant?: "default" | "white" } export const NovaPayLogo: React.FC = ({ className = "", size = "medium", variant = "default" }) => { // Define sizes for different variants const sizes = { small: { width: 100, height: 40 }, medium: { width: 150, height: 60 }, large: { width: 200, height: 80 }, } const { width, height } = sizes[size] // Use a placeholder for the Nova Pay logo return (

Nova Pay

) } [V0_FILE]typescriptreact:file="components/banking-image.tsx" isEdit="true" isMerged="true" import Image from "next/image" interface BankingImageProps { type?: "dashboard" | "card" | "transfer" | "login" className?: string } export function BankingImage({ type = "dashboard", className = "" }: BankingImageProps) { // Different image styles based on type const getImageUrl = () => { switch (type) { case "dashboard": return "/placeholder.svg?height=400&width=600&text=Nova+Pay+Banking" case "card": return "/placeholder.svg?height=300&width=500&text=Virtual+Card" case "transfer": return "/placeholder.svg?height=300&width=500&text=Money+Transfer" case "login": return "/placeholder.svg?height=300&width=500&text=Secure+Login" default: return "/placeholder.svg?height=400&width=600&text=Nova+Pay+Banking" } } return (

Nova Pay Bank

{type === "dashboard" && "Manage your finances with ease"} {type === "card" && "Secure virtual cards for online transactions"} {type === "transfer" && "Send money instantly to anyone"} {type === "login" && "Secure access to your account"}

) } [V0_FILE]typescript:file="lib/bank-service.ts" isMerged="true" // Types for bank data export interface Bank { id: number code: string name: string } // Function to fetch all banks from the API export async function fetchBanks(): Promise { try { const response = await fetch("https://api.paystack.co/bank", { headers: { Authorization: `Bearer ${process.env.PAYSTACK_SECRET_KEY || "sk_test_8fc34c8951741870a49d6171e6c1e69fcff935e8"}`, }, }) if (!response.ok) { throw new Error("Failed to fetch banks") } const data = await response.json() if (data.status) { // Transform the data to match our Bank interface return data.data.map((bank: any) => ({ id: bank.id, code: bank.code, name: bank.name, })) } return [] } catch (error) { console.error("Error fetching banks:", error) // Return default banks as fallback return [ { id: 1, code: "044", name: "Access Bank" }, { id: 2, code: "050", name: "EcoBank" }, { id: 3, code: "058", name: "GTBank" }, { id: 4, code: "011", name: "First Bank" }, { id: 5, code: "221", name: "Stanbic IBTC" }, { id: 6, code: "068", name: "Standard Chartered" }, { id: 7, code: "232", name: "Sterling Bank" }, { id: 8, code: "033", name: "UBA" }, { id: 9, code: "215", name: "Unity Bank" }, { id: 10, code: "035", name: "Wema Bank" }, { id: 11, code: "057", name: "Zenith Bank" }, { id: 12, code: "302", name: "9 Payment Service Bank" }, { id: 13, code: "100", name: "Kuda Bank" }, { id: 14, code: "565", name: "Moniepoint" }, { id: 15, code: "301", name: "Palmpay" }, { id: 16, code: "103", name: "Opay" }, ] } } // Function to get a bank by code export function getBankByCode(code: string, banks: Bank[]): Bank | undefined { return banks.find((bank) => bank.code === code) } // Function to get a bank name by code export function getBankNameByCode(code: string, banks: Bank[]): string { const bank = getBankByCode(code, banks) return bank ? bank.name : "Unknown Bank" } [V0_FILE]typescript:file="app/api/banks/route.ts" isMerged="true" import { NextResponse } from "next/server" import { fetchBanks } from "@/lib/bank-service" export async function GET() { try { const banks = await fetchBanks() return NextResponse.json({ status: true, data: banks }) } catch (error) { console.error("Error fetching banks:", error) return NextResponse.json({ status: false, message: "Failed to fetch banks" }, { status: 500 }) } } [V0_FILE]typescript:file="lib/config.ts" isEdit="true" isMerged="true" // Configuration for the application export const config = { // Paystack API keys paystack: { publicKey: "pk_test_90e084d4a351f8434d56d6b6e928695b2ce4174e", secretKey: "sk_test_8fc34c8951741870a49d6171e6c1e69fcff935e8", baseUrl: "https://api.paystack.co", }, // App name appName: "Nova Pay", // Currency currency: "NGN", // Currency symbol currencySymbol: "₦", // SMS API configuration sms: { // Africa's Talking API credentials africasTalking: { username: "Teddymfg", apiKey: "atsk_e049d44889915c8e6d9087901ca0a2143f64d7899c89e5bc8fe08ffb59b05e69dd5c0caa", }, // Local text API key (base64 encoded) localText: { apiKey: "NGE2MjRlNjY0ZjM1NTU2ZDczNzQ0Mzc1NDU0ZDQzMzI=", }, }, } [V0_FILE]typescriptreact:file="components/otp-verification.tsx" isEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import { Loader2 } from "lucide-react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { toast } from "@/components/ui/use-toast" import { getUser } from "@/lib/auth-service" import { generateAndSendOTP, verifyOTP } from "@/lib/otp-service" interface OTPVerificationProps { onVerified: () => void onCancel: () => void transactionDetails?: { amount: number recipientName: string } } export function OTPVerification({ onVerified, onCancel, transactionDetails }: OTPVerificationProps) { const [otp, setOtp] = useState("") const [isLoading, setIsLoading] = useState(false) const [isSending, setIsSending] = useState(false) const [timeLeft, setTimeLeft] = useState(300) // 5 minutes in seconds const [otpSent, setOtpSent] = useState(false) const [userId, setUserId] = useState("") // Generate and send OTP when component mounts useEffect(() => { const user = getUser() if (user) { setUserId(user.id) generateAndSendOTP_UI(user.id, user.phone) } }, []) // Timer countdown useEffect(() => { if (timeLeft <= 0 || !otpSent) return const timer = setTimeout(() => { setTimeLeft(timeLeft - 1) }, 1000) return () => clearTimeout(timer) }, [timeLeft, otpSent]) // Format time as MM:SS const formatTime = (seconds: number) => { const mins = Math.floor(seconds / 60) const secs = seconds % 60 return `${mins.toString().padStart(2, "0")}:${secs.toString().padStart(2, "0")}` } // Generate and send OTP const generateAndSendOTP_UI = async (userId: string, phoneNumber: string) => { setIsSending(true) try { // Use the real OTP service to generate and send OTP via SMS await generateAndSendOTP(userId, phoneNumber) setOtpSent(true) setTimeLeft(300) // Reset timer to 5 minutes toast({ title: "OTP sent", description: `A verification code has been sent to your phone number ending in ${phoneNumber.slice(-4)}`, }) } catch (error) { console.error("Failed to send OTP:", error) toast({ title: "Failed to send OTP", description: "There was an error sending the verification code. Please try again.", variant: "destructive", }) } finally { setIsSending(false) } } // Verify the entered OTP const verifyOTP_UI = () => { setIsLoading(true) try { // Use the real OTP verification service const isValid = verifyOTP(userId, otp) if (isValid) { toast({ title: "Verification successful", description: "Your identity has been verified.", }) onVerified() } else { toast({ title: "Invalid OTP", description: "The verification code you entered is incorrect or has expired.", variant: "destructive", }) } } catch (error) { console.error("OTP verification error:", error) toast({ title: "Verification failed", description: "An error occurred during verification.", variant: "destructive", }) } finally { setIsLoading(false) } } // Resend OTP const resendOTP = async () => { const user = getUser() if (user) { await generateAndSendOTP_UI(user.id, user.phone) } } return (

Verify Your Identity

Enter the 6-digit code sent to your phone

{transactionDetails && (

You're about to transfer ₦{transactionDetails.amount.toLocaleString()} to{" "} {transactionDetails.recipientName}

)}

setOtp(e.target.value)} maxLength={6} className="text-center text-lg" /> {otpSent && (

Code expires in {formatTime(timeLeft)}

)}

) } [V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isMerged="true" import type React from "react" import type { Metadata } from "next" import { Inter } from "next/font/google" import { ThemeProvider } from "@/components/theme-provider" import { Toaster } from "@/components/ui/toaster" import { AuthGuard } from "@/components/auth-guard" import "./globals.css" const inter = Inter({ subsets: ["latin"] }) export const metadata: Metadata = { title: "Nova Pay Bank", description: "Banking Made Simple for Nigerians", } export default function RootLayout({ children }: { children: React.ReactNode }) { return ( {children} ) } [V0_FILE]typescriptreact:file="app/dashboard/data/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import Link from "next/link" import { useRouter } from "next/navigation" import { zodResolver } from "@hookform/resolvers/zod" import { useForm } from "react-hook-form" import { z } from "zod" import { ArrowLeft, Loader2 } from "lucide-react" import Image from "next/image" import { Button } from "@/components/ui/button" import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form" import { Input } from "@/components/ui/input" import { toast } from "@/components/ui/use-toast" import { Card, CardContent } from "@/components/ui/card" import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group" import { Label } from "@/components/ui/label" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { updateBalance } from "@/lib/auth-service" const dataFormSchema = z.object({ phoneNumber: z.string().min(11, { message: "Phone number must be at least 11 digits.", }), network: z.string({ required_error: "Please select a network.", }), dataBundle: z.string({ required_error: "Please select a data bundle.", }), }) export default function DataPage() { const [isLoading, setIsLoading] = useState(false) const [selectedBundle, setSelectedBundle] = useState(null) const router = useRouter() const form = useForm>({ resolver: zodResolver(dataFormSchema), defaultValues: { phoneNumber: "", network: "", dataBundle: "", }, }) const networks = [ { id: "mtn", name: "MTN", logo: "/placeholder.svg?height=40&width=40" }, { id: "airtel", name: "Airtel", logo: "/placeholder.svg?height=40&width=40" }, { id: "glo", name: "Glo", logo: "/placeholder.svg?height=40&width=40" }, { id: "9mobile", name: "9Mobile", logo: "/placeholder.svg?height=40&width=40" }, ] const dataBundles = { mtn: [ { id: "mtn-1gb", name: "1GB - 1 Day", price: 300 }, { id: "mtn-2gb", name: "2GB - 3 Days", price: 500 }, { id: "mtn-5gb", name: "5GB - 7 Days", price: 1300 }, { id: "mtn-10gb", name: "10GB - 30 Days", price: 2500 }, ], airtel: [ { id: "airtel-1gb", name: "1GB - 1 Day", price: 300 }, { id: "airtel-2gb", name: "2GB - 3 Days", price: 500 }, { id: "airtel-5gb", name: "5GB - 7 Days", price: 1300 }, { id: "airtel-10gb", name: "10GB - 30 Days", price: 2500 }, ], glo: [ { id: "glo-1gb", name: "1GB - 1 Day", price: 250 }, { id: "glo-2gb", name: "2GB - 3 Days", price: 450 }, { id: "glo-5gb", name: "5GB - 7 Days", price: 1200 }, { id: "glo-10gb", name: "10GB - 30 Days", price: 2400 }, ], "9mobile": [ { id: "9mobile-1gb", name: "1GB - 1 Day", price: 350 }, { id: "9mobile-2gb", name: "2GB - 3 Days", price: 550 }, { id: "9mobile-5gb", name: "5GB - 7 Days", price: 1400 }, { id: "9mobile-10gb", name: "10GB - 30 Days", price: 2600 }, ], } const selectedNetwork = form.watch("network") const selectedDataBundle = form.watch("dataBundle") const phoneNumber = form.watch("phoneNumber") // Update selected bundle when data bundle changes useEffect(() => { if (selectedNetwork && selectedDataBundle) { const bundle = dataBundles[selectedNetwork as keyof typeof dataBundles].find( (bundle) => bundle.id === selectedDataBundle, ) setSelectedBundle(bundle) } else { setSelectedBundle(null) } }, [selectedNetwork, selectedDataBundle]) const handlePurchase = () => { if (!selectedBundle) { toast({ title: "Bundle selection required", description: "Please select a data bundle before proceeding.", variant: "destructive", }) return } // Skip OTP verification and process directly processPurchase() } const processPurchase = async () => { setIsLoading(true) try { // Get the price of the selected data bundle if (!selectedBundle) { throw new Error("No data bundle selected") } // Update balance const updatedUser = updateBalance(selectedBundle.price, true) if (!updatedUser) { throw new Error("Failed to update balance") } // Simulate API call await new Promise((resolve) => setTimeout(resolve, 1500)) // Success toast({ title: "Data purchase successful!", description: `${selectedBundle.name} data has been sent to ${phoneNumber}.`, }) router.push("/dashboard") } catch (error) { toast({ title: "Purchase failed", description: "There was an error processing your request. Please try again.", variant: "destructive", }) } finally { setIsLoading(false) } } const isFormValid = () => { return phoneNumber && phoneNumber.length >= 11 && selectedNetwork && selectedDataBundle } return (

Buy Data

( Phone Number )} /> ( Select Network {networks.map((network) => (

{network.name}

))} )} /> {selectedNetwork && ( ( Select Data Bundle )} /> )}

) } [V0_FILE]typescriptreact:file="app/dashboard/airtime/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import Link from "next/link" import { useRouter } from "next/navigation" import { zodResolver } from "@hookform/resolvers/zod" import { useForm } from "react-hook-form" import { z } from "zod" import { ArrowLeft, Loader2 } from "lucide-react" import Image from "next/image" import { Button } from "@/components/ui/button" import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form" import { Input } from "@/components/ui/input" import { toast } from "@/components/ui/use-toast" import { Card, CardContent } from "@/components/ui/card" import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group" import { Label } from "@/components/ui/label" const airtimeFormSchema = z.object({ phoneNumber: z.string().min(11, { message: "Phone number must be at least 11 digits.", }), network: z.string({ required_error: "Please select a network.", }), amount: z.string().min(1, { message: "Amount is required.", }), }) export default function AirtimePage() { const [isLoading, setIsLoading] = useState(false) const router = useRouter() const form = useForm>({ resolver: zodResolver(airtimeFormSchema), defaultValues: { phoneNumber: "", network: "", amount: "", }, }) async function onSubmit(values: z.infer) { setIsLoading(true) try { // Simulate API call await new Promise((resolve) => setTimeout(resolve, 1500)) // Success toast({ title: "Airtime purchase successful!", description: `₦${values.amount} airtime has been sent to ${values.phoneNumber}.`, }) router.push("/dashboard") } catch (error) { toast({ title: "Purchase failed", description: "There was an error processing your request. Please try again.", variant: "destructive", }) } finally { setIsLoading(false) } } const networks = [ { id: "mtn", name: "MTN", logo: "/placeholder.svg?height=40&width=40" }, { id: "airtel", name: "Airtel", logo: "/placeholder.svg?height=40&width=40" }, { id: "glo", name: "Glo", logo: "/placeholder.svg?height=40&width=40" }, { id: "9mobile", name: "9Mobile", logo: "/placeholder.svg?height=40&width=40" }, ] const quickAmounts = ["100", "200", "500", "1000", "2000", "5000"] return (

Buy Airtime

( Phone Number )} /> ( Select Network {networks.map((network) => (

{network.name}

))} )} /> ( Amount (₦)

{quickAmounts.map((amount) => ( ))}

)} />

) } [V0_FILE]typescriptreact:file="app/dashboard/electricity/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import Link from "next/link" import { useRouter } from "next/navigation" import { zodResolver } from "@hookform/resolvers/zod" import { useForm } from "react-hook-form" import { z } from "zod" import { ArrowLeft, Loader2, CheckCircle2 } from "lucide-react" import { Button } from "@/components/ui/button" import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form" import { Input } from "@/components/ui/input" import { toast } from "@/components/ui/use-toast" import { Card, CardContent } from "@/components/ui/card" import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group" import { Label } from "@/components/ui/label" import { updateBalance } from "@/lib/auth-service" const electricityFormSchema = z.object({ meterNumber: z.string().min(10, { message: "Meter number must be at least 10 digits.", }), provider: z.string({ required_error: "Please select a provider.", }), amount: z.string().min(1, { message: "Amount is required.", }), }) export default function ElectricityPage() { const [isLoading, setIsLoading] = useState(false) const [isVerifying, setIsVerifying] = useState(false) const [customerName, setCustomerName] = useState("") const router = useRouter() const form = useForm>({ resolver: zodResolver(electricityFormSchema), defaultValues: { meterNumber: "", provider: "", amount: "", }, }) const providers = [ { id: "ikeja", name: "Ikeja Electric" }, { id: "eko", name: "Eko Electric" }, { id: "abuja", name: "Abuja Electric" }, { id: "ibadan", name: "Ibadan Electric" }, { id: "kano", name: "Kano Electric" }, { id: "portharcourt", name: "Port Harcourt Electric" }, ] const meterNumber = form.watch("meterNumber") const provider = form.watch("provider") // Verify meter number const verifyMeter = async () => { if (!meterNumber || !provider) return setIsVerifying(true) setCustomerName("") try { // Simulate API call await new Promise((resolve) => setTimeout(resolve, 1500)) // Mock customer names based on meter number const mockCustomers: Record = { "1234567890": "John Doe", "2345678901": "Jane Smith", "3456789012": "Michael Johnson", "4567890123": "Sarah Williams", "5678901234": "David Brown", } // If meter number exists in mock data, use that name if (mockCustomers[meterNumber]) { setCustomerName(mockCustomers[meterNumber]) } else { // Generate a name based on meter number const firstNames = [ "Ade", "Chidi", "Ngozi", "Oluwaseun", "Fatima", "Yusuf", "Blessing", "Emmanuel", "Aisha", "Tunde", ] const lastNames = [ "Adeyemi", "Okonkwo", "Ibrahim", "Okafor", "Mohammed", "Nwachukwu", "Ojo", "Adebayo", "Olanrewaju", "Bakare", ] const firstDigit = Number.parseInt(meterNumber[0]) % 10 const lastDigit = Number.parseInt(meterNumber[meterNumber.length - 1]) % 10 const generatedName = `${firstNames[firstDigit]} ${lastNames[lastDigit]}` setCustomerName(generatedName) } } catch (error) { toast({ title: "Verification failed", description: "Could not verify meter number. Please check and try again.", variant: "destructive", }) } finally { setIsVerifying(false) } } // When meter number or provider changes, verify meter useEffect(() => { if (meterNumber.length >= 10 && provider) { verifyMeter() } }, [meterNumber, provider]) async function onSubmit(values: z.infer) { if (!customerName) { toast({ title: "Verification required", description: "Please wait for the meter to be verified before proceeding.", variant: "destructive", }) return } setIsLoading(true) try { // Parse amount const amount = Number.parseInt(values.amount) // Update balance const updatedUser = updateBalance(amount, true) if (!updatedUser) { throw new Error("Failed to update balance") } // Simulate API call await new Promise((resolve) => setTimeout(resolve, 1500)) // Success toast({ title: "Payment successful!", description: `₦${amount.toLocaleString()} electricity token has been generated for ${customerName}.`, }) // Show token (mock) toast({ title: "Electricity Token", description: `Your token is: ${Math.floor(Math.random() * 10000000000) .toString() .padStart(10, "0")}`, }) router.push("/dashboard") } catch (error) { toast({ title: "Payment failed", description: "There was an error processing your request. Please try again.", variant: "destructive", }) } finally { setIsLoading(false) } } return (

Pay Electricity Bill

( Select Provider {providers.map((provider) => (

{provider.name}

))} )} /> ( Meter Number {isVerifying ? (

Verifying meter...

) : customerName ? (

{customerName}

) : null} )} /> ( Amount (₦) )} />

) } [V0_FILE]typescriptreact:file="app/dashboard/cable/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import Link from "next/link" import { useRouter } from "next/navigation" import { zodResolver } from "@hookform/resolvers/zod" import { useForm } from "react-hook-form" import { z } from "zod" import { ArrowLeft, Loader2, CheckCircle2 } from "lucide-react" import Image from "next/image" import { Button } from "@/components/ui/button" import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form" import { Input } from "@/components/ui/input" import { toast } from "@/components/ui/use-toast" import { Card, CardContent } from "@/components/ui/card" import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group" import { Label } from "@/components/ui/label" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { updateBalance } from "@/lib/auth-service" const cableFormSchema = z.object({ smartCardNumber: z.string().min(10, { message: "Smart card number must be at least 10 digits.", }), provider: z.string({ required_error: "Please select a provider.", }), package: z.string({ required_error: "Please select a package.", }), }) export default function CablePage() { const [isLoading, setIsLoading] = useState(false) const [isVerifying, setIsVerifying] = useState(false) const [customerName, setCustomerName] = useState("") const router = useRouter() const form = useForm>({ resolver: zodResolver(cableFormSchema), defaultValues: { smartCardNumber: "", provider: "", package: "", }, }) const providers = [ { id: "dstv", name: "DSTV", logo: "/placeholder.svg?height=40&width=40" }, { id: "gotv", name: "GOtv", logo: "/placeholder.svg?height=40&width=40" }, { id: "startimes", name: "StarTimes", logo: "/placeholder.svg?height=40&width=40" }, ] const packages = { dstv: [ { id: "dstv-premium", name: "Premium", price: 24500 }, { id: "dstv-compact-plus", name: "Compact Plus", price: 16600 }, { id: "dstv-compact", name: "Compact", price: 10500 }, { id: "dstv-confam", name: "Confam", price: 6200 }, ], gotv: [ { id: "gotv-max", name: "GOtv Max", price: 4850 }, { id: "gotv-jolli", name: "GOtv Jolli", price: 3300 }, { id: "gotv-jinja", name: "GOtv Jinja", price: 2250 }, { id: "gotv-lite", name: "GOtv Lite", price: 1100 }, ], startimes: [ { id: "startimes-nova", name: "Nova", price: 1200 }, { id: "startimes-basic", name: "Basic", price: 2100 }, { id: "startimes-smart", name: "Smart", price: 2800 }, { id: "startimes-classic", name: "Classic", price: 3300 }, ], } const smartCardNumber = form.watch("smartCardNumber") const provider = form.watch("provider") const selectedPackage = form.watch("package") // Verify smart card number const verifySmartCard = async () => { if (!smartCardNumber || !provider) return setIsVerifying(true) setCustomerName("") try { // Simulate API call await new Promise((resolve) => setTimeout(resolve, 1500)) // Mock customer names based on smart card number const mockCustomers: Record = { "1234567890": "John Doe", "2345678901": "Jane Smith", "3456789012": "Michael Johnson", "4567890123": "Sarah Williams", "5678901234": "David Brown", } // If smart card number exists in mock data, use that name if (mockCustomers[smartCardNumber]) { setCustomerName(mockCustomers[smartCardNumber]) } else { // Generate a name based on smart card number const firstNames = [ "Ade", "Chidi", "Ngozi", "Oluwaseun", "Fatima", "Yusuf", "Blessing", "Emmanuel", "Aisha", "Tunde", ] const lastNames = [ "Adeyemi", "Okonkwo", "Ibrahim", "Okafor", "Mohammed", "Nwachukwu", "Ojo", "Adebayo", "Olanrewaju", "Bakare", ] const firstDigit = Number.parseInt(smartCardNumber[0]) % 10 const lastDigit = Number.parseInt(smartCardNumber[smartCardNumber.length - 1]) % 10 const generatedName = `${firstNames[firstDigit]} ${lastNames[lastDigit]}` setCustomerName(generatedName) } } catch (error) { toast({ title: "Verification failed", description: "Could not verify smart card number. Please check and try again.", variant: "destructive", }) } finally { setIsVerifying(false) } } // When smart card number or provider changes, verify smart card useEffect(() => { if (smartCardNumber.length >= 10 && provider) { verifySmartCard() } }, [smartCardNumber, provider]) async function onSubmit(values: z.infer) { if (!customerName) { toast({ title: "Verification required", description: "Please wait for the smart card to be verified before proceeding.", variant: "destructive", }) return } setIsLoading(true) try { // Get the price of the selected package const selectedPackageDetails = packages[values.provider as keyof typeof packages].find( (pkg) => pkg.id === values.package, ) if (!selectedPackageDetails) { throw new Error("Invalid package selected") } // Update balance const updatedUser = updateBalance(selectedPackageDetails.price, true) if (!updatedUser) { throw new Error("Failed to update balance") } // Simulate API call await new Promise((resolve) => setTimeout(resolve, 1500)) // Success toast({ title: "Payment successful!", description: `₦${selectedPackageDetails.price.toLocaleString()} subscription for ${customerName} has been processed.`, }) router.push("/dashboard") } catch (error) { toast({ title: "Payment failed", description: "There was an error processing your request. Please try again.", variant: "destructive", }) } finally { setIsLoading(false) } } return (

Pay Cable TV

( Select Provider {providers.map((provider) => (

{provider.name}

))} )} /> ( Smart Card Number {isVerifying ? (

Verifying smart card...

) : customerName ? (

{customerName}

) : null} )} /> {provider && ( ( Select Package )} /> )}

) } [V0_FILE]typescriptreact:file="components/transfer-receipt.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useEffect } from "react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardFooter, CardHeader } from "@/components/ui/card" import { CheckCircle2 } from "lucide-react" import { formatCurrency } from "@/lib/utils" import { ReceiptSharing } from "@/components/receipt-sharing" import { saveReceipt } from "@/lib/receipt-service" import { getUser } from "@/lib/auth-service" import { NovaPayLogo } from "@/components/nova-pay-logo" interface TransferReceiptProps { data: { reference: string accountNumber: string accountName: string bankName: string amount: number date: string status: string narration?: string } onClose: () => void } export function TransferReceipt({ data, onClose }: TransferReceiptProps) { console.log("TransferReceipt rendering with data:", data) // Format date properly to avoid hydration issues const formattedDate = new Date(data.date).toLocaleString("en-US", { year: "numeric", month: "short", day: "numeric", hour: "2-digit", minute: "2-digit", }) // Save receipt when component mounts useEffect(() => { console.log("TransferReceipt useEffect running") const user = getUser() if (user) { console.log("Saving receipt for user:", user.id) // Save receipt to local storage saveReceipt(user.id, { reference: data.reference, senderName: `${user.firstName} ${user.lastName}`, senderAccount: user.accountNumber, recipientName: data.accountName, recipientAccount: data.accountNumber, bankName: data.bankName, amount: data.amount, date: data.date, status: data.status, narration: data.narration, }) } }, [data]) // Prepare receipt data for sharing const receiptData = { reference: data.reference, senderName: getUser() ? `${getUser()!.firstName} ${getUser()!.lastName}` : "Nova Pay User", senderAccount: getUser() ? getUser()!.accountNumber : "", recipientName: data.accountName, recipientAccount: data.accountNumber, bankName: data.bankName, amount: data.amount, date: data.date, status: data.status, narration: data.narration, } return (

Transfer Successful!

Your money is on its way

{formatCurrency(data.amount)}

Transaction ID

{data.reference}

Recipient

{data.accountName}

Account Number

{data.accountNumber}

Bank

{data.bankName}

Date

{formattedDate}

Status

Successful

{data.narration && (

Narration

{data.narration}

)}

{/* Receipt sharing component */}

) } [V0_FILE]typescriptreact:file="app/api/transfer/route.ts" isEdit="true" isQuickEdit="true" isMerged="true" import { NextResponse } from "next/server" import { config } from "@/lib/config" // This is an API route for bank transfers using Paystack export async function POST(request: Request) { try { // Parse the request body const body = await request.json() console.log("Transfer API received request:", body) // Validate required fields const { amount, recipient_account_number, recipient_bank_code, reason, reference } = body if (!amount || !recipient_account_number || !recipient_bank_code) { console.error("Missing required fields:", { amount, recipient_account_number, recipient_bank_code }) return NextResponse.json({ error: "Missing required fields" }, { status: 400 }) } console.log("Transfer request:", JSON.stringify(body, null, 2)) // First, verify the recipient account try { // Verify account const verifyResponse = await fetch( `https://api.paystack.co/bank/resolve?account_number=${recipient_account_number}&bank_code=${recipient_bank_code}`, { method: "GET", headers: { "Content-Type": "application/json", Authorization: `Bearer ${config.paystack.secretKey}`, }, }, ) const verifyData = await verifyResponse.json() console.log("Account verification response:", JSON.stringify(verifyData, null, 2)) if (!verifyResponse.ok) { console.error("Account verification failed:", verifyData) return NextResponse.json( { error: verifyData.message || "Failed to verify recipient account", }, { status: 400 }, ) } // For demo purposes, return a mock successful response // In production, you would handle this differently const mockResponse = { status: "success", message: "Transfer initiated successfully", data: { transaction_id: `TRX-${Date.now()}`, amount: amount / 100, // Convert back to naira recipient_account_number, recipient_bank_code, narration: reason || `${config.appName} Bank Transfer`, reference: reference || `${config.appName.replace(/\s+/g, "").toUpperCase()}-${Date.now()}`, fee: 10.0, date: new Date().toISOString(), status: "pending", transfer_code: `TRF_${Math.random().toString(36).substring(2, 10).toUpperCase()}`, }, } console.log("Returning mock response:", mockResponse) return NextResponse.json(mockResponse) } catch (error) { console.error("Transfer API error:", error) // For demo purposes, return a mock successful response const mockResponse = { status: "success", message: "Transfer initiated successfully", data: { transaction_id: `TRX-${Date.now()}`, amount: amount / 100, // Convert back to naira recipient_account_number, recipient_bank_code, narration: reason || `${config.appName} Bank Transfer`, reference: reference || `${config.appName.replace(/\s+/g, "").toUpperCase()}-${Date.now()}`, fee: 10.0, date: new Date().toISOString(), status: "pending", transfer_code: `TRF_${Math.random().toString(36).substring(2, 10).toUpperCase()}`, }, } console.log("Returning mock response after error:", mockResponse) return NextResponse.json(mockResponse) } } catch (error) { console.error("Transfer API error:", error) return NextResponse.json({ error: "Failed to process transfer" }, { status: 500 }) } } [V0_FILE]typescriptreact:file="components/transaction-list.tsx" isEdit="true" "use client" import { useEffect, useState } from "react" import { ArrowUpRight, ArrowDownRight } from "lucide-react" import { formatCurrency } from "@/lib/utils" import { getTransactions } from "@/lib/auth-service" export function TransactionList() { const [transactions, setTransactions] = useState([]) const [isLoading, setIsLoading] = useState(true) const [error, setError] = useState(null) const [mounted, setMounted] = useState(false) useEffect(() => { setMounted(true) try { // Get transactions from persistent storage const storedTransactions = getTransactions() setTransactions(storedTransactions) } catch (err) { console.error("Error loading transactions:", err) setError("Failed to load transactions") } finally { setIsLoading(false) } }, []) // Format date to readable format const formatDate = (dateString: string) => { try { const options: Intl.DateTimeFormatOptions = { year: "numeric", month: "short", day: "numeric" } return new Date(dateString).toLocaleDateString("en-US", options) } catch (err) { console.error("Date formatting error:", err) return dateString } } if (!mounted) { return null } if (isLoading) { return

Loading transactions...

} if (error) { return

{error}

} if (transactions.length === 0) { return

No transactions found.

} return (

{transactions.map((transaction) => (

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

{transaction.description}

{formatDate(transaction.date)}

{transaction.type === "credit" ? "+" : "-"} {formatCurrency(transaction.amount)}

))}

) } [V0_FILE]typescript:file="lib/auth-service.ts" isEdit="true" // Types for user data export interface User { id: string firstName: string lastName: string email: string phone: string accountNumber: string balance: number } // Transaction interface export interface Transaction { id: string type: "credit" | "debit" description: string amount: number date: string status: string bankName?: string accountNumber?: string accountName?: string reference?: string narration?: string } // Local storage keys const USER_KEY = "nova_pay_user" const AUTH_KEY = "nova_pay_auth" const TRANSACTIONS_KEY = "nova_pay_transactions" // Key for persistent transactions // Check if we're in a browser environment const isBrowser = typeof window !== "undefined" // Get user from local storage export const getUser = (): User | null => { if (!isBrowser) return null try { const userJson = localStorage.getItem(USER_KEY) if (!userJson) { // Create a default user with 5 million balance if none exists const defaultUser: User = { id: "1", firstName: "Akinbambo", lastName: "Tomisin", email: "user@example.com", phone: "0905 568 8690", // Use the provided phone number accountNumber: "0123456789", balance: 5000000, // 5 million naira } // Save the default user saveUser(defaultUser) // Initialize default transaction history initializeTransactionHistory() return defaultUser } const user = JSON.parse(userJson) // Ensure the user has the correct balance if (user && (!user.balance || user.balance < 5000000)) { user.balance = 5000000 saveUser(user) } // Ensure the user has the correct phone number if (user && (!user.phone || user.phone === "08012345678")) { user.phone = "0905 568 8690" // Use the provided phone number saveUser(user) } // Ensure transaction history exists if (!localStorage.getItem(TRANSACTIONS_KEY)) { initializeTransactionHistory() } return user } catch (error) { console.error("Failed to parse user data:", error) return null } } // Add this export to make initializeTransactionHistory available to other files export const initializeTransactionHistory = () => { if (!isBrowser) return try { // Check if transactions already exist const existingTransactions = localStorage.getItem(TRANSACTIONS_KEY) if (existingTransactions) { return // Don't overwrite existing transactions } const defaultTransactions = [ { id: "1", type: "debit", description: "Transfer to Ayo Ade", amount: 15000000, // 15 million naira date: new Date().toISOString(), // Today's date with time status: "completed", bankName: "Wema Bank", accountNumber: "5678901234", reference: "TRF" + Math.floor(Math.random() * 1000000000), }, ] localStorage.setItem(TRANSACTIONS_KEY, JSON.stringify(defaultTransactions)) } catch (error) { console.error("Failed to initialize transaction history:", error) } } // Save user to local storage export const saveUser = (user: User): void => { if (!isBrowser) return try { localStorage.setItem(USER_KEY, JSON.stringify(user)) } catch (error) { console.error("Failed to save user data:", error) } } // Check if user is authenticated export const isAuthenticated = (): boolean => { if (typeof window === "undefined") return false try { const authToken = localStorage.getItem(AUTH_KEY) return !!authToken } catch (error) { console.error("Authentication check error:", error) return false } } // Update the login function to use OPay branding export const login = (email: string, password: string): Promise => { return new Promise((resolve, reject) => { if (!isBrowser) { reject(new Error("Cannot login on server side")) return } // In a real app, this would be an API call // For demo purposes, we'll use mock data setTimeout(() => { try { // Accept any email/password combination const user: User = { id: "1", firstName: "Akinbambo", lastName: "Tomisin", email: email || "user@example.com", phone: "0905 568 8690", accountNumber: "0123456789", balance: 5000000, // 5 million naira } // Save auth token and user data localStorage.setItem(AUTH_KEY, "mock-auth-token") saveUser(user) // Initialize default transaction history if none exists if (!localStorage.getItem(TRANSACTIONS_KEY)) { initializeTransactionHistory() } resolve(user) } catch (error) { console.error("Login error:", error) reject(error) } }, 1000) }) } // Register user export const register = (userData: Omit): Promise => { return new Promise((resolve, reject) => { if (!isBrowser) { reject(new Error("Cannot register on server side")) return } // In a real app, this would be an API call // For demo purposes, we'll use mock data setTimeout(() => { try { // Generate a random account number const accountNumber = Math.floor(Math.random() * 9000000000) + 1000000000 const user: User = { id: Date.now().toString(), accountNumber: accountNumber.toString(), balance: 5000000, // Set initial balance to 5 million naira ...userData, } // Save auth token and user data localStorage.setItem(AUTH_KEY, "mock-auth-token") saveUser(user) // Initialize default transaction history initializeTransactionHistory() resolve(user) } catch (error) { console.error("Registration error:", error) reject(error) } }, 1000) }) } // Get persistent transactions export const getTransactions = (): Transaction[] => { if (!isBrowser) return [] try { const transactionsJson = localStorage.getItem(TRANSACTIONS_KEY) if (!transactionsJson) { initializeTransactionHistory() return getTransactions() } return JSON.parse(transactionsJson) } catch (error) { console.error("Failed to parse transactions:", error) return [] } } // Save a new transaction export const saveTransaction = (transaction: Transaction): Transaction[] => { if (!isBrowser) return [] try { const currentTransactions = getTransactions() // Ensure transaction has an ID if (!transaction.id) { transaction.id = Date.now().toString() } // Ensure transaction has a date if (!transaction.date) { transaction.date = new Date().toISOString() } const updatedTransactions = [transaction, ...currentTransactions] localStorage.setItem(TRANSACTIONS_KEY, JSON.stringify(updatedTransactions)) return updatedTransactions } catch (error) { console.error("Failed to save transaction:", error) return [] } } // Logout user export const logout = (): void => { if (!isBrowser) return try { localStorage.removeItem(AUTH_KEY) // DO NOT remove transactions or user data on logout // localStorage.removeItem(USER_KEY) } catch (error) { console.error("Logout error:", error) } } // Update user data export const updateUser = (userData: Partial): User | null => { try { const currentUser = getUser() if (!currentUser) return null const updatedUser = { ...currentUser, ...userData } saveUser(updatedUser) return updatedUser } catch (error) { console.error("Update user error:", error) return null } } // Add a function to update balance export const updateBalance = (amount: number, isDebit = false): User | null => { try { const currentUser = getUser() if (!currentUser) return null const newBalance = isDebit ? currentUser.balance - amount : currentUser.balance + amount const updatedUser = { ...currentUser, balance: newBalance } saveUser(updatedUser) return updatedUser } catch (error) { console.error("Update balance error:", error) return null } } // Get account details by account number export const getAccountDetails = (accountNumber: string, bankCode: string): Promise<{ accountName: string } | null> => { return new Promise(async (resolve) => { if (!isBrowser) { resolve(null) return } try { // Make a real API call to verify the account const response = await fetch(`/api/verify-account`, { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ account_number: accountNumber, bank_code: bankCode, }), }) const data = await response.json() if (!response.ok) { throw new Error(data.error || "Failed to verify account") } if (data.status && data.data) { resolve({ accountName: data.data.account_name }) } else { resolve(null) } } catch (error) { console.error("Error verifying account:", error) resolve(null) } }) } [V0_FILE]typescriptreact:file="app/dashboard/page.tsx" isEdit="true" "use client" import { useState, useEffect } from "react" import Link from "next/link" import { BellRing, CreditCard, DollarSign, Home, Lightbulb, LogOut, Menu, Phone, PiggyBank, Plus, Settings, Tv, User, Wifi, X, FileText, ArrowUpRight, ArrowDownRight, } from "lucide-react" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from "@/components/ui/sheet" import { QuickActionButton } from "@/components/quick-action-button" import { BankingImage } from "@/components/banking-image" import { getUser, logout, getTransactions, type User as AuthUser } from "@/lib/auth-service" import { AddMoneyModal } from "@/components/add-money-modal" import { formatCurrency } from "@/lib/utils" import { NovaPayLogo } from "@/components/nova-pay-logo" export default function DashboardPage() { const [showNotifications, setShowNotifications] = useState(false) const [showAddMoneyModal, setShowAddMoneyModal] = useState(false) const [user, setUser] = useState(null) const [mounted, setMounted] = useState(false) const [transactions, setTransactions] = useState([]) useEffect(() => { // Mark component as mounted setMounted(true) // Function to get user data and transactions const getUserData = () => { try { const userData = getUser() setUser(userData) // Get transactions const transactionData = getTransactions() setTransactions(transactionData) // If no user data, redirect to login if (!userData) { window.location.href = "/login" } } catch (error) { console.error("Error getting user data:", error) } } // Get user data initially getUserData() // Set up an interval to refresh user data every 5 seconds const intervalId = setInterval(getUserData, 5000) // Clean up the interval when the component unmounts return () => clearInterval(intervalId) }, []) const handleLogout = () => { try { logout() window.location.href = "/login" } catch (error) { console.error("Logout error:", error) } } // Get user initials for avatar const getUserInitials = () => { if (!user) return "NP" return `${user.firstName.charAt(0)}${user.lastName.charAt(0)}` } // Format date to readable format const formatDate = (dateString: string) => { try { const date = new Date(dateString) const now = new Date() // Check if it's today if (date.toDateString() === now.toDateString()) { return "Today" } // Check if it's yesterday const yesterday = new Date(now) yesterday.setDate(now.getDate() - 1) if (date.toDateString() === yesterday.toDateString()) { return "Yesterday" } // Otherwise, return formatted date const options: Intl.DateTimeFormatOptions = { year: "numeric", month: "short", day: "numeric" } return date.toLocaleDateString("en-US", options) } catch (err) { console.error("Date formatting error:", err) return dateString } } // Don't render anything during server-side rendering if (!mounted) { return null } return (

{/* Mobile Header */}

{showNotifications && ( Notifications

Transfer Successful

2m ago

Your transfer of ₦50,000 to Chioma Okafor was successful.

Card Created

1h ago

Your virtual card has been created successfully.

Savings Goal

1d ago

You've reached 50% of your vacation savings goal!

)} {getUserInitials()}

{/* Account Balance Card */}

Total Balance

{user && user.balance ? formatCurrency(user.balance) : "₦5,000,000.00"}

Available Balance

{/* Add Money Modal */} {/* Banking Image */}

{/* Quick Actions */}

Quick Actions

} label="Transfer" href="/dashboard/transfer" /> } label="Withdraw" href="/dashboard/withdraw" /> } label="Airtime" href="/dashboard/airtime" /> } label="Data" href="/dashboard/data" /> } label="Electricity" href="/dashboard/electricity" /> } label="Cable TV" href="/dashboard/cable" /> } label="Cards" href="/dashboard/cards" /> } label="More" href="/dashboard/more" /> } label="Receipts" href="/dashboard/receipts" />

{/* Recent Transactions */}

Recent Transactions

View All

{/* Display actual transactions from state */}

{transactions.length > 0 ? ( transactions.slice(0, 5).map((transaction) => (

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

{transaction.description}

{formatDate(transaction.date)}

{transaction.type === "credit" ? "+" : "-"} {formatCurrency(transaction.amount)}

)) ) : (

No transactions found

)}

{/* Bottom Navigation */}

) } [V0_FILE]typescriptreact:file="app/dashboard/transfer/page.tsx" isEdit="true" "use client" import { useState, useEffect } from "react" import Link from "next/link" import { useRouter } from "next/navigation" import { ArrowLeft, Loader2, User, AlertCircle } from "lucide-react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Card, CardContent } from "@/components/ui/card" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { toast } from "@/components/ui/use-toast" import { updateBalance, saveTransaction } from "@/lib/auth-service" import { formatCurrency } from "@/lib/utils" import { TransferReceipt } from "@/components/transfer-receipt" import { AccountVerification } from "@/components/account-verification" import { sendTransferNotification } from "@/lib/sms-service" import { fetchBanks, type Bank } from "@/lib/bank-service" import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter, } from "@/components/ui/dialog" import { NovaPayLogo } from "@/components/nova-pay-logo" export default function TransferPage() { const router = useRouter() const [step, setStep] = useState(1) const [loading, setLoading] = useState(false) const [showReceipt, setShowReceipt] = useState(false) const [banks, setBanks] = useState([]) const [loadingBanks, setLoadingBanks] = useState(true) const [showConfirmation, setShowConfirmation] = useState(false) const [formData, setFormData] = useState({ accountNumber: "", accountName: "", bankCode: "", bankName: "", amount: "", narration: "", pin: "", }) const [receiptData, setReceiptData] = useState({ reference: "", accountNumber: "", accountName: "", bankName: "", amount: 0, date: "", status: "", narration: "", }) // Fetch banks on component mount useEffect(() => { const getBanks = async () => { setLoadingBanks(true) try { const banksData = await fetchBanks() setBanks(banksData) } catch (error) { console.error("Error fetching banks:", error) toast({ title: "Failed to load banks", description: "Could not fetch the list of banks. Please try again later.", variant: "destructive", }) } finally { setLoadingBanks(false) } } getBanks() }, []) const handleChange = (name: string, value: string) => { setFormData({ ...formData, [name]: value }) } const handleAccountVerified = (accountName: string) => { const selectedBank = banks.find((bank) => bank.code === formData.bankCode) const bankName = selectedBank ? selectedBank.name : "" setFormData({ ...formData, accountName, bankName, }) toast({ title: "Account verified", description: `Account belongs to ${accountName}`, }) } const handleNext = () => { // Validate current step if (step === 1) { if (!formData.accountNumber) { toast({ title: "Account number required", description: "Please enter an account number.", variant: "destructive", }) return } if (!formData.bankCode) { toast({ title: "Bank selection required", description: "Please select a bank.", variant: "destructive", }) return } if (!formData.accountName) { toast({ title: "Account not verified", description: "Please verify the account before proceeding.", variant: "destructive", }) return } if (!formData.amount) { toast({ title: "Amount required", description: "Please enter the amount to transfer.", variant: "destructive", }) return } const amount = Number(formData.amount) if (isNaN(amount) || amount <= 0) { toast({ title: "Invalid amount", description: "Please enter a valid amount greater than 0.", variant: "destructive", }) return } // Show confirmation dialog setShowConfirmation(true) return } // Move to next step setStep(step + 1) } const handleBack = () => { if (step > 1) { setStep(step - 1) } else { router.push("/dashboard") } } const handleConfirmTransfer = () => { setShowConfirmation(false) // Skip OTP verification and go directly to PIN entry setStep(2) } const handleTransfer = async () => { console.log("Starting transfer process with PIN:", formData.pin) if (!formData.pin || formData.pin.length !== 4) { toast({ title: "Invalid PIN", description: "Please enter your 4-digit PIN.", variant: "destructive", }) return } setLoading(true) try { // Convert amount to number const amount = Number(formData.amount) console.log("Processing transfer of amount:", amount) // Process the transfer through Paystack API const transferData = { amount: amount * 100, // Convert to kobo recipient_account_number: formData.accountNumber, recipient_bank_code: formData.bankCode, reason: formData.narration || "Transfer from Nova Pay", reference: `NOVAPAY-${Date.now()}-${Math.floor(Math.random() * 1000)}`, } console.log("Transfer data:", transferData) // Make API call to initiate transfer const response = await fetch("/api/transfer", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify(transferData), }) const data = await response.json() // Log the response for debugging console.log("Transfer API response:", data) if (!response.ok) { throw new Error(data.error || "Failed to process transfer") } // Update local balance const user = updateBalance(amount, true) console.log("Balance updated, user:", user) if (!user) { throw new Error("User not found or insufficient balance") } // Generate transaction data const transaction = { id: Date.now().toString(), type: "debit", description: `Transfer to ${formData.accountName}`, amount: amount, date: new Date().toISOString(), status: "completed", bankName: formData.bankName, accountNumber: formData.accountNumber, accountName: formData.accountName, narration: formData.narration || "Transfer", reference: data.data?.reference || transferData.reference, } console.log("Generated transaction:", transaction) // Save the transaction to localStorage for persistence saveTransaction(transaction) // Set receipt data for display const newReceiptData = { reference: data.data?.reference || transferData.reference, accountNumber: formData.accountNumber, accountName: formData.accountName, bankName: formData.bankName, amount: amount, date: new Date().toISOString(), status: "successful", narration: formData.narration || "Transfer", } console.log("Setting receipt data:", newReceiptData) setReceiptData(newReceiptData) // Send SMS notification to sender if (user.phone) { try { await sendTransferNotification(user.phone, amount, formData.accountName) } catch (smsError) { console.error("Failed to send SMS notification to sender:", smsError) // Don't fail the transfer if SMS fails } } // Ensure we're showing the receipt console.log("Setting showReceipt to true") setTimeout(() => { setShowReceipt(true) }, 500) toast({ title: "Transfer successful", description: `You have successfully transferred ${formatCurrency(amount)} to ${formData.accountName}.`, }) } catch (error) { console.error("Transfer error:", error) toast({ title: "Transfer failed", description: "An error occurred while processing your transfer.", variant: "destructive", }) } finally { setLoading(false) } } if (showReceipt) { console.log("Rendering receipt with data:", receiptData) return router.push("/dashboard")} /> } return (

{/* Header */}

Transfer Money

Send money to another bank account.

Bank

Account Number handleChange("accountNumber", e.target.value)} maxLength={10} />

Amount (₦) handleChange("amount", e.target.value)} />

Narration (Optional) handleChange("narration", e.target.value)} />

{step === 2 && (

Transaction PIN handleChange("pin", e.target.value)} maxLength={4} />

Enter your 4-digit PIN to authorize this transaction

)}

{/* Confirmation Dialog */}

) } [V0_FILE]typescriptreact:file="app/dashboard/transactions/page.tsx" isEdit="true" "use client" import { useState, useEffect } from "react" import Link from "next/link" import { ArrowLeft, ArrowDownLeft, ArrowUpRight, Filter, Search } from "lucide-react" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { getTransactions } from "@/lib/auth-service" export default function TransactionsPage() { const [searchQuery, setSearchQuery] = useState("") const [filterType, setFilterType] = useState("all") const [transactions, setTransactions] = useState([]) const [mounted, setMounted] = useState(false) useEffect(() => { setMounted(true) // Load transactions from persistent storage const storedTransactions = getTransactions() setTransactions(storedTransactions) }, []) // Filter transactions based on search query and filter type const filteredTransactions = transactions.filter((transaction) => { const matchesSearch = transaction.description?.toLowerCase().includes(searchQuery.toLowerCase()) || transaction.accountName?.toLowerCase().includes(searchQuery.toLowerCase()) || transaction.bankName?.toLowerCase().includes(searchQuery.toLowerCase()) || transaction.reference?.toLowerCase().includes(searchQuery.toLowerCase()) const matchesType = filterType === "all" || transaction.type === filterType return matchesSearch && matchesType }) // Format date to readable format const formatDate = (dateString: string) => { try { const date = new Date(dateString) const now = new Date() // Check if it's today if (date.toDateString() === now.toDateString()) { return "Today" } // Check if it's yesterday const yesterday = new Date(now) yesterday.setDate(now.getDate() - 1) if (date.toDateString() === yesterday.toDateString()) { return "Yesterday" } // Otherwise, return formatted date const options: Intl.DateTimeFormatOptions = { year: "numeric", month: "short", day: "numeric", hour: "2-digit", minute: "2-digit", } return date.toLocaleDateString("en-US", options) } catch (err) { console.error("Date formatting error:", err) return dateString } } if (!mounted) { return null } return (

Transactions

setSearchQuery(e.target.value)} />

{filteredTransactions.length > 0 ? ( filteredTransactions.map((transaction) => (

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

{transaction.description}

{formatDate(transaction.date)}

Ref: {transaction.reference}

{transaction.type === "credit" ? "+" : "-"}₦{transaction.amount.toLocaleString()}

)) ) : (

No transactions found

)}

) } 7a:["$","$L82",null,{"chatId":"tiKHwgYMUMc","children":["$","$L83",null,{"data":{"@\"active-block\",\"tiKHwgYMUMc\",":{"id":"b_mmmKBmO8RMX","messageId":"DqGt0XMlYRO2fQVHLHsxB4icd4rCcdb9","source":"$84","language":"typescriptreact","type":"code-project","closed":true,"meta":{"id":"fast_pay_bank","type":"code-project","project":"fast_pay_bank"},"hasSourceBeenEdited":false,"forkedFromBlockId":"$undefined"},"@\"chat:vm-mode\",\"tiKHwgYMUMc\",":false,"":null},"children":"$L85"}]}]

About

Tags

Share

About

Tags

Share

More from zellmicheal9-9805

More Templates Like This