[V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" import { LandingPage } from "@/components/landing-page" export default function Home() { return } [V0_FILE]typescriptreact:file="components/landing-page.tsx" isEdit="true" isMerged="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { useRouter } from "next/navigation" import Image from "next/image" import { ConnectWalletModal } from "@/components/wallet/connect-wallet-modal" import { MasterKeyModal } from "@/components/admin/master-key-modal" import { Wallet } from "lucide-react" export function LandingPage() { const [isWalletModalOpen, setIsWalletModalOpen] = useState(false) const [isAdminFlow, setIsAdminFlow] = useState(false) const [isMasterKeyModalOpen, setIsMasterKeyModalOpen] = useState(false) const [isLoading, setIsLoading] = useState(false) const [connectedWallet, setConnectedWallet] = useState("") const router = useRouter() const handleConnectWallet = (walletType: string) => { setIsLoading(true) // Simulate wallet connection setTimeout(() => { setIsLoading(false) // Mock wallet address const walletAddress = "0x71C7656EC7ab88b098defB751B7401B5f6d8976F" setConnectedWallet(walletAddress) // Close wallet modal setIsWalletModalOpen(false) if (isAdminFlow) { // For admin, show master key modal after wallet connection setIsMasterKeyModalOpen(true) } else { // For regular merchant, redirect to dashboard router.push("/merchant/dashboard") } }, 1500) } const handleAdminLogin = () => { setIsAdminFlow(true) setIsWalletModalOpen(true) } const handleMasterKeySubmit = (masterKey: string) => { // In a real app, verify the masterKey here if (masterKey === "admin123") { router.push("/admin/dashboard") } else { // Show error in the modal (handled in the modal component) // This would be handled by the modal in a real implementation } // Close master key modal setIsMasterKeyModalOpen(false) } return (

{/* Animated background elements */}

320 Pay

320 Pay
Secure Crypto Payments for Your Business

Connect your wallet to access our powerful payment gateway and start accepting crypto payments today.

Secure Transactions

End-to-end encryption

Lightning Fast

Instant settlements

Global Reach

Accept payments worldwide

{/* Modals */} setIsWalletModalOpen(false)} onConnect={handleConnectWallet} /> setIsMasterKeyModalOpen(false)} onSubmit={handleMasterKeySubmit} walletAddress={connectedWallet} /> {/* Blur overlay when master key modal is open */} {isMasterKeyModalOpen &&

}

) } [V0_FILE]typescriptreact:file="components/layout/sidebar.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import Link from "next/link" import { usePathname } from "next/navigation" import { LayoutDashboard, Key, Store, BarChart3, Settings, LogOut, Menu, X, Users, FileText, Wallet, } from "lucide-react" import { cn } from "@/lib/utils" import { Button } from "@/components/ui/button" interface SidebarProps { role: "merchant" | "admin" } export function Sidebar({ role }: SidebarProps) { const [isOpen, setIsOpen] = useState(false) const pathname = usePathname() const merchantLinks = [ { name: "Dashboard", href: "/merchant/dashboard", icon: LayoutDashboard }, { name: "Licenses", href: "/merchant/licenses", icon: Key }, { name: "My Store", href: "/merchant/my-store", icon: Store }, { name: "Transactions", href: "/merchant/transactions", icon: BarChart3 }, { name: "Settings", href: "/merchant/settings", icon: Settings }, ] const adminLinks = [ { name: "Dashboard", href: "/admin/dashboard", icon: LayoutDashboard }, { name: "Licenses", href: "/admin/licenses", icon: Key }, { name: "Stores", href: "/admin/stores", icon: Store }, { name: "Reports", href: "/admin/reports", icon: FileText }, { name: "Users", href: "/admin/users", icon: Users }, { name: "Settings", href: "/admin/settings", icon: Settings }, ] const links = role === "merchant" ? merchantLinks : adminLinks const basePath = role === "merchant" ? "/merchant" : "/admin" // Simulated wallet address const walletAddress = "0x71C7656EC7ab88b098defB751B7401B5f6d8976F" const shortenedAddress = `${walletAddress.substring(0, 6)}...${walletAddress.substring(walletAddress.length - 4)}` return ( <> {/* Mobile menu button */} {/* Sidebar */}

320 Pay

{role === "merchant" ? "Merchant Panel" : "Admin Panel"}

Connected Wallet

{shortenedAddress}

) } [V0_FILE]typescriptreact:file="components/layout/dashboard-layout.tsx" isEdit="true" isMerged="true" import type React from "react" import { Sidebar } from "@/components/layout/sidebar" interface DashboardLayoutProps { children: React.ReactNode role: "merchant" | "admin" } export function DashboardLayout({ children, role }: DashboardLayoutProps) { return (

{children}

) } [V0_FILE]typescriptreact:file="components/ui/metric-card.tsx" isEdit="true" isMerged="true" import type React from "react" import { cn } from "@/lib/utils" interface MetricCardProps { title: string value: string | number icon: React.ReactNode trend?: { value: number isPositive: boolean } color?: string className?: string } export function MetricCard({ title, value, icon, trend, color = "text-crypto-blue", className }: MetricCardProps) { return (

{title}

{value}

{trend && (

{trend.isPositive ? "↑" : "↓"} {Math.abs(trend.value)}% vs last period

)}

{icon}

) } [V0_FILE]typescriptreact:file="app/merchant/dashboard/page.tsx" isMerged="true" import { DashboardLayout } from "@/components/layout/dashboard-layout" import { MerchantDashboard } from "@/components/merchant/dashboard" export default function MerchantDashboardPage() { return ( ) } [V0_FILE]typescriptreact:file="components/merchant/dashboard.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import { Store, Key, DollarSign, ShoppingCart, ArrowUpRight, ArrowDownRight } from "lucide-react" import { MetricCard } from "@/components/ui/metric-card" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" // Mock data for the chart const revenueData = [ { date: "2023-01-01", amount: 120 }, { date: "2023-01-02", amount: 145 }, { date: "2023-01-03", amount: 132 }, { date: "2023-01-04", amount: 167 }, { date: "2023-01-05", amount: 159 }, { date: "2023-01-06", amount: 187 }, { date: "2023-01-07", amount: 210 }, { date: "2023-01-08", amount: 178 }, { date: "2023-01-09", amount: 197 }, { date: "2023-01-10", amount: 230 }, { date: "2023-01-11", amount: 245 }, { date: "2023-01-12", amount: 267 }, { date: "2023-01-13", amount: 253 }, { date: "2023-01-14", amount: 278 }, { date: "2023-01-15", amount: 290 }, ] // Mock data for transactions const transactions = [ { id: 1, date: "2023-01-15", amount: "$245.00", status: "completed", store: "Main Store" }, { id: 2, date: "2023-01-14", amount: "$178.50", status: "completed", store: "Online Shop" }, { id: 3, date: "2023-01-14", amount: "$32.99", status: "failed", store: "Main Store" }, { id: 4, date: "2023-01-13", amount: "$89.99", status: "completed", store: "Mobile App" }, { id: 5, date: "2023-01-12", amount: "$126.50", status: "completed", store: "Online Shop" }, ] export function MerchantDashboard() { const [isLoading, setIsLoading] = useState(true) useEffect(() => { // Simulate data loading const timer = setTimeout(() => { setIsLoading(false) }, 1000) return () => clearTimeout(timer) }, []) if (isLoading) { return (

) } return (

320 Pay Dashboard

Welcome back! Here's an overview of your payment gateway.

} color="text-crypto-blue" className="animate-fadeIn [animation-delay:0.1s]" /> } color="text-crypto-green" className="animate-fadeIn [animation-delay:0.2s]" /> } trend={{ value: 15, isPositive: true }} color="text-crypto-green" className="animate-fadeIn [animation-delay:0.3s]" /> } trend={{ value: 8, isPositive: true }} color="text-crypto-purple" className="animate-fadeIn [animation-delay:0.4s]" />

Revenue (Last 30 Days)

{revenueData.map((item, index) => (

${item.amount}

{new Date(item.date).getDate()}

))}

Recent Transactions Date Amount Status {transactions.map((tx) => ( {tx.date} {tx.amount} {tx.status === "completed" ? ( ) : ( )} {tx.status} ))}

) } [V0_FILE]typescriptreact:file="app/merchant/licenses/page.tsx" isMerged="true" import { DashboardLayout } from "@/components/layout/dashboard-layout" import { MerchantLicenses } from "@/components/merchant/licenses" export default function MerchantLicensesPage() { return ( ) } [V0_FILE]typescriptreact:file="components/merchant/licenses.tsx" isMerged="true" "use client" import { useState } from "react" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, } from "@/components/ui/dialog" import { Label } from "@/components/ui/label" import { Badge } from "@/components/ui/badge" import { Key, AlertCircle } from "lucide-react" // Mock license data const currentLicense = { key: "CRYPT-1234-5678-9ABC", expiryDate: "2023-12-31", status: "active", // active, expiring, expired daysLeft: 45, } const licenseHistory = [ { key: "CRYPT-1234-5678-9ABC", startDate: "2023-01-01", expiryDate: "2023-12-31", status: "active" }, { key: "CRYPT-9876-5432-DCBA", startDate: "2022-01-01", expiryDate: "2022-12-31", status: "expired" }, { key: "CRYPT-ABCD-EFGH-IJKL", startDate: "2021-01-01", expiryDate: "2021-12-31", status: "expired" }, ] export function MerchantLicenses() { const [renewDialogOpen, setRenewDialogOpen] = useState(false) const [buyDialogOpen, setBuyDialogOpen] = useState(false) const getLicenseStatusColor = (status: string) => { switch (status) { case "active": return "bg-green-100 text-[#28A745]" case "expiring": return "bg-yellow-100 text-[#FFC107]" case "expired": return "bg-red-100 text-[#DC3545]" default: return "bg-gray-100 text-[#6C757D]" } } return (

Licenses

Manage your payment gateway licenses

Current License Your active payment gateway license

License Key

{currentLicense.key}

Expiry Date

{currentLicense.expiryDate}

Status

{currentLicense.status.toUpperCase()}

Days Left

{currentLicense.daysLeft} days

License History License Key Start Date Expiry Date Status {licenseHistory.map((license, index) => ( {license.key} {license.startDate} {license.expiryDate} {license.status.toUpperCase()} ))}

{/* Renew License Dialog */} {/* Buy New License Dialog */}

) } [V0_FILE]typescriptreact:file="app/merchant/stores/page.tsx" isMerged="true" import { DashboardLayout } from "@/components/layout/dashboard-layout" import { MerchantStores } from "@/components/merchant/stores" export default function MerchantStoresPage() { return ( ) } [V0_FILE]typescriptreact:file="components/merchant/stores.tsx" isMerged="true" "use client" import { useState } from "react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, } from "@/components/ui/dialog" import { Badge } from "@/components/ui/badge" import { Search, Plus } from "lucide-react" // Mock stores data const stores = [ { id: 1, name: "Main Store", status: "active", transactions: 523, revenue: "$12,450.00" }, { id: 2, name: "Online Shop", status: "active", transactions: 342, revenue: "$8,765.50" }, { id: 3, name: "Mobile App", status: "active", transactions: 187, revenue: "$4,321.75" }, { id: 4, name: "Test Store", status: "inactive", transactions: 12, revenue: "$150.25" }, { id: 5, name: "Partner Store", status: "active", transactions: 98, revenue: "$2,345.00" }, ] export function MerchantStores() { const [searchTerm, setSearchTerm] = useState("") const [registerDialogOpen, setRegisterDialogOpen] = useState(false) const [newStore, setNewStore] = useState({ name: "", description: "" }) const filteredStores = stores.filter((store) => store.name.toLowerCase().includes(searchTerm.toLowerCase())) const getStatusColor = (status: string) => { switch (status) { case "active": return "bg-green-100 text-[#28A745]" case "inactive": return "bg-gray-100 text-[#6C757D]" case "banned": return "bg-red-100 text-[#DC3545]" default: return "bg-gray-100 text-[#6C757D]" } } return (

Stores

Manage your payment gateway stores

setSearchTerm(e.target.value)} />

Your Stores Name Status Transactions Revenue Actions {filteredStores.length > 0 ? ( filteredStores.map((store, index) => ( {store.name} {store.status.toUpperCase()} {store.transactions} {store.revenue} )) ) : ( No stores found matching your search. )}

{/* Register Store Dialog */}

320 Pay Secure Crypto Payments for Your Business

Secure Transactions

Lightning Fast

Global Reach

320 Pay

{value}

320 Pay Dashboard

Licenses

Stores

320 Pay
Secure Crypto Payments for Your Business