"use client" import { useState } from "react" import { motion } from "framer-motion" import { fadeIn, stagger, staggerItem, buttonTap } from "@/lib/animations" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from "@/components/ui/table" import { Upload, FileSpreadsheet, CheckCircle2, AlertTriangle, Loader2, Download, Trash2 } from "lucide-react" interface BatchItem { id: string recipient: string amount: string status: "pending" | "valid" | "error" error?: string } const reviewData: BatchItem[] = [ { id: "1", recipient: "alice@example.com", amount: "MK 850,000", status: "valid" }, { id: "2", recipient: "bob@example.com", amount: "MK 425,000", status: "valid" }, { id: "3", recipient: "charlie@example.com", amount: "MK 1,700,000", status: "valid" }, { id: "4", recipient: "invalid-email", amount: "MK 170,000", status: "error", error: "Invalid email" }, { id: "5", recipient: "dave@example.com", amount: "MK 1,275,000", status: "valid" }, ] const batchHistory = [ { date: "Jun 10, 2026", count: 15, total: "MK 7,140,000", status: "completed" }, { date: "Jun 05, 2026", count: 8, total: "MK 3,060,000", status: "completed" }, { date: "May 28, 2026", count: 22, total: "MK 11,050,000", status: "failed" }, ] export default function BatchPayments() { const [file, setFile] = useState(null) const [processing, setProcessing] = useState(false) const [processed, setProcessed] = useState(false) const [items] = useState(reviewData) const handleUpload = () => { if (!file) return setProcessing(true) setTimeout(() => { setProcessing(false) setProcessed(true) }, 2000) } const handleProcess = () => { setProcessing(true) setTimeout(() => { setProcessing(false) }, 3000) } return (

Batch Payments

Process multiple payments at once

Upload CSV Upload a CSV file with recipient and amount columns

{file ? file.name : "Drop CSV file here or click to browse"}

CSV format: recipient, amount, currency (optional)

setFile(e.target.files?.[0] || null)} />

{processed && (

Review Payments {items.filter((i) => i.status === "valid").length} valid, {items.filter((i) => i.status === "error").length} errors

i.status === "error") ? "destructive" : "secondary"}> {items.some((i) => i.status === "error") ? "Issues Found" : "Ready"}

Recipient Amount Status {items.map((item) => ( {item.recipient} {item.amount} {item.status === "valid" ? ( Valid ) : ( {item.error} )} ))}

)} Batch History Date Payments Total Status {batchHistory.map((batch, i) => ( {batch.date} {batch.count} {batch.total} {batch.status === "completed" ? "Completed" : "Failed"} ))}

) }

Date	Payments	Total	Status
Jun 10, 2026	15	MK 7,140,000	Completed
Jun 05, 2026	8	MK 3,060,000	Completed
May 28, 2026	22	MK 11,050,000	Failed

Date	Payments	Total	Status
Jun 10, 2026	15	MK 7,140,000	Completed
Jun 05, 2026	8	MK 3,060,000	Completed
May 28, 2026	22	MK 11,050,000	Failed