[V0_FILE]typescriptreact:file="components/payment-dashboard.tsx" isMerged="true" "use client" import { useState } from "react" import { Calendar, CreditCard, DollarSign, Download, Filter, MoreHorizontal, RefreshCw, Search, TrendingUp, Users, AlertCircle, CheckCircle, Clock, XCircle, Zap, Eye, RotateCcw, Plus, } from "lucide-react" import { Badge } from "@/components/ui/badge" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu" import { Input } from "@/components/ui/input" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { Sidebar, SidebarContent, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarProvider, SidebarTrigger, SidebarInset, } from "@/components/ui/sidebar" import { Separator } from "@/components/ui/separator" import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, } from "@/components/ui/dialog" import { Label } from "@/components/ui/label" import { Textarea } from "@/components/ui/textarea" // Mock data for payments const payments = [ { id: "PAY-001", orderId: "ORD-2024-001", customer: "Acme Corp", amount: 15750.0, currency: "USD", status: "authorized", method: "Credit Card", cardLast4: "4242", created: "2024-01-15T10:30:00Z", updated: "2024-01-15T10:30:00Z", dueDate: "2024-01-30T00:00:00Z", capturedAmount: 0, refundedAmount: 0, authCode: "AUTH123456", riskScore: "low", processorRef: "ch_1234567890", }, { id: "PAY-002", orderId: "ORD-2024-002", customer: "TechFlow Solutions", amount: 8900.0, currency: "USD", status: "captured", method: "ACH Transfer", cardLast4: null, created: "2024-01-14T14:20:00Z", updated: "2024-01-15T09:15:00Z", dueDate: "2024-01-29T00:00:00Z", capturedAmount: 8900.0, refundedAmount: 0, authCode: "ACH789012", riskScore: "low", processorRef: "ach_0987654321", }, { id: "PAY-003", orderId: "ORD-2024-003", customer: "Global Industries", amount: 25600.0, currency: "USD", status: "partial_refund", method: "Wire Transfer", cardLast4: null, created: "2024-01-12T16:45:00Z", updated: "2024-01-14T11:30:00Z", dueDate: "2024-01-27T00:00:00Z", capturedAmount: 25600.0, refundedAmount: 2560.0, authCode: "WIRE345678", riskScore: "medium", processorRef: "wire_1122334455", }, { id: "PAY-004", orderId: "ORD-2024-004", customer: "StartupXYZ", amount: 4200.0, currency: "USD", status: "pending", method: "Credit Card", cardLast4: "1234", created: "2024-01-15T08:00:00Z", updated: "2024-01-15T08:00:00Z", dueDate: "2024-01-30T00:00:00Z", capturedAmount: 0, refundedAmount: 0, authCode: null, riskScore: "high", processorRef: "pending_6677889900", }, { id: "PAY-005", orderId: "ORD-2024-005", customer: "Enterprise Ltd", amount: 67800.0, currency: "USD", status: "failed", method: "Credit Card", cardLast4: "5678", created: "2024-01-13T12:15:00Z", updated: "2024-01-13T12:16:00Z", dueDate: "2024-01-28T00:00:00Z", capturedAmount: 0, refundedAmount: 0, authCode: null, riskScore: "high", processorRef: "failed_3344556677", }, ] const getStatusIcon = (status: string) => { switch (status) { case "authorized": return case "captured": return case "pending": return case "failed": return case "partial_refund": return case "refunded": return default: return } } const getStatusColor = (status: string) => { switch (status) { case "authorized": return "bg-blue-100 text-blue-800 border-blue-200" case "captured": return "bg-green-100 text-green-800 border-green-200" case "pending": return "bg-yellow-100 text-yellow-800 border-yellow-200" case "failed": return "bg-red-100 text-red-800 border-red-200" case "partial_refund": return "bg-orange-100 text-orange-800 border-orange-200" case "refunded": return "bg-gray-100 text-gray-800 border-gray-200" default: return "bg-gray-100 text-gray-800 border-gray-200" } } const getRiskColor = (risk: string) => { switch (risk) { case "low": return "bg-green-100 text-green-800" case "medium": return "bg-yellow-100 text-yellow-800" case "high": return "bg-red-100 text-red-800" default: return "bg-gray-100 text-gray-800" } } const formatCurrency = (amount: number, currency: string) => { return new Intl.NumberFormat("en-US", { style: "currency", currency: currency, }).format(amount) } const formatDate = (dateString: string) => { return new Date(dateString).toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric", hour: "2-digit", minute: "2-digit", }) } function AppSidebar() { const menuItems = [ { title: "Overview", icon: TrendingUp, isActive: true, }, { title: "Payments", icon: CreditCard, isActive: false, }, { title: "Orders", icon: DollarSign, isActive: false, }, { title: "Customers", icon: Users, isActive: false, }, { title: "Reports", icon: Calendar, isActive: false, }, ] return (

PaymentHub B2B Commerce

Navigation {menuItems.map((item) => ( {item.title} ))} ) } export function PaymentDashboard() { const [selectedPayment, setSelectedPayment] = useState(null) const [actionDialogOpen, setActionDialogOpen] = useState(false) const [actionType, setActionType] = useState("") const totalVolume = payments.reduce((sum, payment) => sum + payment.amount, 0) const capturedVolume = payments.reduce((sum, payment) => sum + payment.capturedAmount, 0) const pendingVolume = payments .filter((p) => p.status === "pending" || p.status === "authorized") .reduce((sum, payment) => sum + payment.amount, 0) const refundedVolume = payments.reduce((sum, payment) => sum + payment.refundedAmount, 0) const handleAction = (payment: any, action: string) => { setSelectedPayment(payment) setActionType(action) setActionDialogOpen(true) } return (

Payment Overview

Manage your B2B payment transactions

{/* Overview Cards */}

Total Volume

{formatCurrency(totalVolume, "USD")}

+12.5% from last month

Captured

{formatCurrency(capturedVolume, "USD")}

{((capturedVolume / totalVolume) * 100).toFixed(1)}% of total volume

Pending

{formatCurrency(pendingVolume, "USD")}

{payments.filter((p) => p.status === "pending" || p.status === "authorized").length} transactions

Refunded

{formatCurrency(refundedVolume, "USD")}

{((refundedVolume / totalVolume) * 100).toFixed(1)}% of total volume

{/* Filters and Search */} Payment Transactions Monitor and manage your B2B payment lifecycle

{/* Payments Table */}

Payment ID Customer Amount Status Method Risk Created Due Date Actions {payments.map((payment) => (

{payment.id} {payment.orderId}

{payment.customer} {payment.cardLast4 && ( •••• {payment.cardLast4} )}

{formatCurrency(payment.amount, payment.currency)} {payment.capturedAmount > 0 && ( Captured: {formatCurrency(payment.capturedAmount, payment.currency)} )} {payment.refundedAmount > 0 && ( Refunded: {formatCurrency(payment.refundedAmount, payment.currency)} )}

{getStatusIcon(payment.status)} {payment.status.replace("_", " ")} {payment.method} {payment.riskScore} {formatDate(payment.created)} {formatDate(payment.dueDate)}

{payment.status === "authorized" && ( <> )} {payment.status === "captured" && ( )} {payment.status === "failed" && ( )} Actions handleAction(payment, "view")}> View Details {payment.status === "authorized" && ( handleAction(payment, "reauth")}> Re-authorize )} handleAction(payment, "void")}> Void Payment

))}

{/* Action Dialog */}