[V0_FILE]typescriptreact:file="components/transaction-table.tsx" isMerged="true" import { Badge } from "@/components/ui/badge" import { Button } from "@/components/ui/button" import { Eye, MoreHorizontal } from "lucide-react" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu" interface TransactionTableProps { limit?: number } export function TransactionTable({ limit }: TransactionTableProps) { const transactions = [ { id: "TXN-001", customer: "Ahmad Wijaya", amount: "Rp 150,000", method: "Credit Card", status: "success", date: "2024-01-15 14:30", }, { id: "TXN-002", customer: "Siti Nurhaliza", amount: "Rp 75,000", method: "Bank Transfer", status: "pending", date: "2024-01-15 13:45", }, { id: "TXN-003", customer: "Budi Santoso", amount: "Rp 200,000", method: "E-Wallet", status: "success", date: "2024-01-15 12:20", }, { id: "TXN-004", customer: "Maya Sari", amount: "Rp 95,000", method: "Credit Card", status: "failed", date: "2024-01-15 11:15", }, { id: "TXN-005", customer: "Rudi Hartono", amount: "Rp 300,000", method: "Bank Transfer", status: "success", date: "2024-01-15 10:30", }, { id: "TXN-006", customer: "Dewi Lestari", amount: "Rp 125,000", method: "E-Wallet", status: "pending", date: "2024-01-15 09:45", }, ] const displayedTransactions = limit ? transactions.slice(0, limit) : transactions const getStatusBadge = (status: string) => { switch (status) { case "success": return Berhasil case "pending": return Pending case "failed": return Gagal default: return {status} } } return (

{displayedTransactions.map((transaction) => ( ))}

ID Transaksi	Pelanggan	Jumlah	Metode	Status	Tanggal	Aksi
{transaction.id}	{transaction.customer}	{transaction.amount}	{transaction.method}	{getStatusBadge(transaction.status)}	{transaction.date}	Lihat Detail Refund Download Invoice

) } [V0_FILE]typescriptreact:file="components/payment-methods.tsx" isMerged="true" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Switch } from "@/components/ui/switch" import { CreditCard, Smartphone, Building2, Plus } from "lucide-react" export function PaymentMethods() { const paymentMethods = [ { id: 1, name: "Credit Card", description: "Visa, Mastercard, American Express", icon: CreditCard, enabled: true, transactions: 245, fee: "2.9%", }, { id: 2, name: "Bank Transfer", description: "Transfer bank lokal dan internasional", icon: Building2, enabled: true, transactions: 156, fee: "Rp 5,000", }, { id: 3, name: "E-Wallet", description: "GoPay, OVO, DANA, ShopeePay", icon: Smartphone, enabled: true, transactions: 89, fee: "1.5%", }, ] return (

Metode Pembayaran

Kelola metode pembayaran yang tersedia

{paymentMethods.map((method) => (

{method.name} {method.description}

Transaksi bulan ini {method.transactions}

Biaya transaksi {method.fee}

))}

) } [V0_FILE]typescriptreact:file="app/page.tsx" isQuickEdit="true" isMerged="true" "use client" import PaymentDashboard from "../dashboard" export default function Page() { return } [V0_FILE]typescriptreact:file="components/payment-chart.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" export function PaymentChart() { // Sample data for the chart const chartData = [ { day: "Sen", gtv: 6.2, revenue: 5.1, profit: 3.4 }, { day: "Sel", gtv: 7.8, revenue: 6.5, profit: 4.2 }, { day: "Rab", gtv: 8.1, revenue: 6.8, profit: 4.6 }, { day: "Kam", gtv: 6.9, revenue: 5.8, profit: 3.9 }, { day: "Jum", gtv: 9.2, revenue: 7.8, profit: 5.3 }, { day: "Sab", gtv: 7.5, revenue: 6.3, profit: 4.1 }, { day: "Min", gtv: 5.8, revenue: 4.9, profit: 3.2 }, ] const maxAmount = Math.max(...chartData.map((d) => Math.max(d.gtv, d.revenue, d.profit))) return ( Tren Pembayaran Mingguan Volume transaksi 7 hari terakhir

{chartData.map((data, index) => (

{/* GTV Bar */}

{/* Revenue Bar */}

{/* Profit Bar */}

{data.day}

))}

{/* Legend */}

GTV

Revenue

Profit

Total GTV: Rp 51.5M Total Revenue: Rp 43.2M Total Profit: Rp 28.7M

) } [V0_FILE]typescriptreact:file="components/overview-cards.tsx" isEdit="true" isQuickEdit="true" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { DollarSign, CreditCard, TrendingUp, Target, Receipt, Minus, Plus } from "lucide-react" export function OverviewCards() { const cards = [ { title: "Transaction Success", value: "1,847", change: "+15.2%", changeType: "positive" as const, icon: TrendingUp, description: "transaksi berhasil hari ini", }, { title: "Total Transaction", value: "1,923", change: "+12.8%", changeType: "positive" as const, icon: CreditCard, description: "total transaksi hari ini", }, { title: "Success Rate", value: "96.05%", change: "+2.1%", changeType: "positive" as const, icon: Target, description: "tingkat keberhasilan", }, { title: "GTV", value: "Rp 45.2M", change: "+18.5%", changeType: "positive" as const, icon: DollarSign, description: "gross transaction value", }, { title: "Revenue", value: "Rp 38.7M", change: "+16.3%", changeType: "positive" as const, icon: Receipt, description: "dari transaksi paid", }, { title: "CoR", value: "Rp 12.4M", change: "+8.7%", changeType: "negative" as const, icon: Minus, description: "cost of revenue", }, { title: "Profit", value: "Rp 26.3M", change: "+22.1%", changeType: "positive" as const, icon: Plus, description: "keuntungan bersih", }, ] return (

{cards.map((card, index) => ( {card.title}

{card.value}

{card.change} {card.description}

))}

) } [V0_FILE]typescriptreact:file="components/pm-ratio-card.tsx" isFixed="true" isQuickEdit="true" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Progress } from "@/components/ui/progress" import { TrendingUp } from "lucide-react" export function PMRatioCard() { const pmRatio = 67.95 const previousPmRatio = 64.15 const change = pmRatio - previousPmRatio const changePercentage = ((change / previousPmRatio) * 100).toFixed(1) return (

PM Ratio (Profit Margin Ratio) Rasio margin keuntungan dari revenue

{pmRatio}%

+{changePercentage}% dari bulan lalu

Current PM Ratio {pmRatio}%

Excellent

≥ 60%

Good

40-59%

Poor

< 40%

Formula: PM Ratio = (Profit ÷ Revenue) × 100%

) } [V0_FILE]typescriptreact:file="components/financial-metrics.tsx" isEdit="true" isQuickEdit="true" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Progress } from "@/components/ui/progress" import { TrendingUp, DollarSign, Calculator, BarChart3 } from "lucide-react" export function FinancialMetrics() { const metrics = { transactionSuccess: 1847, totalTransaction: 1923, successRate: 96.05, gtv: 45200000, // Rp 45.2M revenue: 38700000, // Rp 38.7M (from paid transactions) cor: 12400000, // Rp 12.4M (Cost of Revenue) profit: 26300000, // Rp 26.3M pmRatio: 67.95, // 67.95% } const formatCurrency = (amount: number) => { if (amount >= 1000000) { return `Rp ${(amount / 1000000).toFixed(1)}M` } return `Rp ${amount.toLocaleString("id-ID")}` } const calculations = [ { title: "Revenue Calculation", description: "Revenue = GTV × Success Rate × Collection Rate", value: `${formatCurrency(metrics.gtv)} × ${metrics.successRate}% × 87.5% = ${formatCurrency(metrics.revenue)}`, icon: Calculator, color: "bg-blue-50 text-blue-700", }, { title: "Profit Calculation", description: "Profit = Revenue - Cost of Revenue", value: `${formatCurrency(metrics.revenue)} - ${formatCurrency(metrics.cor)} = ${formatCurrency(metrics.profit)}`, icon: TrendingUp, color: "bg-green-50 text-green-700", }, { title: "PM Ratio Calculation", description: "PM Ratio = (Profit / Revenue) × 100%", value: `(${formatCurrency(metrics.profit)} / ${formatCurrency(metrics.revenue)}) × 100% = ${metrics.pmRatio}%`, icon: BarChart3, color: "bg-purple-50 text-purple-700", }, ] return (

Financial Performance Analysis Analisis detail performa keuangan dan breakdown perhitungan

{/* Transaction Performance */}

Transaction Performance

Success Rate {metrics.successRate}%

Successful

{metrics.transactionSuccess.toLocaleString()}

Failed

{(metrics.totalTransaction - metrics.transactionSuccess).toLocaleString()}

{/* Revenue Breakdown */}

Revenue Breakdown

Profit Margin {metrics.pmRatio}%

Revenue

{formatCurrency(metrics.revenue)}

CoR

{formatCurrency(metrics.cor)}

{/* Calculation Details */}

{calculations.map((calc, index) => (

{calc.title} {calc.description}

{calc.value}

))}

) } [V0_FILE]typescriptreact:file="dashboard.tsx" isEdit="true" isQuickEdit="true" "use client" import { useState } from "react" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { CreditCard, Search, Filter, Download } from "lucide-react" import { OverviewCards } from "./components/overview-cards" import { TransactionTable } from "./components/transaction-table" import { PaymentChart } from "./components/payment-chart" import { PaymentMethods } from "./components/payment-methods" import { FinancialMetrics } from "./components/financial-metrics" import { PMRatioCard } from "./components/pm-ratio-card" export default function PaymentDashboard() { const [activeTab, setActiveTab] = useState("overview") return (

{/* Header */}

Payment Dashboard

Kelola sistem pembayaran Anda

{/* Main Content */}

Overview Transaksi Analytics Metode

Transaksi Terbaru 5 transaksi terakhir hari ini

Semua Transaksi Kelola dan pantau semua transaksi pembayaran

Metode Pembayaran Populer Distribusi penggunaan metode pembayaran

Credit Card

45%

Bank Transfer

30%

E-Wallet

25%

) }