[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

About

Tags

Share

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This