"use client" import { useState } from "react" import { motion } from "framer-motion" import { fadeIn, slideDown, stagger, staggerItem } from "@/lib/animations" import { Card, CardContent, CardDescription, 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 { Badge } from "@/components/ui/badge" import { Separator } from "@/components/ui/separator" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from "@/components/ui/table" import { RotateCcw, Search, Undo2 } from "lucide-react" type RefundStatus = "requested" | "approved" | "rejected" | "completed" interface RefundRequest { id: string transaction: string customer: string amount: string reason: string status: RefundStatus date: string } const refunds: RefundRequest[] = [ { id: "1", transaction: "PC-2A5F9B-1K3M", customer: "John Doe", amount: "MK 51,000", reason: "Duplicate charge", status: "completed", date: "2026-06-10" }, { id: "2", transaction: "PC-8B2D1A-4X7Q", customer: "Jane Smith", amount: "MK 168,300", reason: "Service not as described", status: "requested", date: "2026-06-08" }, { id: "3", transaction: "PC-3C6E7F-9P2L", customer: "Bob Kabwe", amount: "MK 85,000", reason: "Cancelled subscription", status: "approved", date: "2026-06-05" }, { id: "4", transaction: "PC-7D9E2F-3U8V", customer: "Alice Banda", amount: "MK 25,500", reason: "Accidental purchase", status: "rejected", date: "2026-06-01" }, { id: "5", transaction: "PC-4G5H6I-2W1X", customer: "Tom Phiri", amount: "MK 136,000", reason: "Product defective", status: "requested", date: "2026-06-11" }, ] const statusConfig: Record = { completed: { variant: "secondary", label: "Completed" }, approved: { variant: "default", label: "Approved" }, requested: { variant: "outline", label: "Requested" }, rejected: { variant: "destructive", label: "Rejected" }, } const reasons = ["Duplicate charge", "Service not as described", "Cancelled subscription", "Accidental purchase", "Product defective", "Other"] export default function Refunds() { const [search, setSearch] = useState("") const [showForm, setShowForm] = useState(false) const [reason, setReason] = useState("") const [amount, setAmount] = useState("") const [notes, setNotes] = useState("") const filtered = refunds.filter((r) => r.transaction.toLowerCase().includes(search.toLowerCase()) || r.customer.toLowerCase().includes(search.toLowerCase()) ) return (

Refunds Manage refund requests and process refunds

setSearch(e.target.value)} className="pl-8" />

{showForm && (

Process Refund

Amount setAmount(e.target.value)} />

Reason

Notes (optional)

setNotes(e.target.value)}
                      className="h-16 w-full rounded-lg border border-input bg-transparent px-2.5 py-1.5 text-sm outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"
                    />
                  </div>
                  <div className="flex gap-2">
                    <Button disabled={!amount || !reason}>Submit Refund</Button>
                    <Button variant="outline" onClick={() => { setShowForm(false); setAmount(""); setReason(""); setNotes("") }}>Cancel</Button>
                  </div>
                </motion.div>
              )}

<Table>
                <TableHeader>
                  <TableRow>
                    <TableHead>Transaction</TableHead>
                    <TableHead>Customer</TableHead>
                    <TableHead>Amount</TableHead>
                    <TableHead>Reason</TableHead>
                    <TableHead>Status</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  <motion.tbody variants={stagger} initial="hidden" animate="visible">
                    {filtered.map((r) => (
                      <motion.tr key={r.id} variants={staggerItem} className="border-b transition-colors hover:bg-muted/50">
                        <TableCell className="font-mono text-xs">{r.transaction}</TableCell>
                        <TableCell className="text-muted-foreground">{r.customer}</TableCell>
                        <TableCell className="font-medium">{r.amount}</TableCell>
                        <TableCell className="text-muted-foreground">{r.reason}</TableCell>
                        <TableCell>
                          <Badge variant={statusConfig[r.status].variant}>{statusConfig[r.status].label}</Badge>
                        </TableCell>
                      </motion.tr>
                    ))}
                  </motion.tbody>
                  {filtered.length === 0 && (
                    <TableRow>
                      <TableCell colSpan={5} className="py-8 text-center text-muted-foreground">No refunds found.</TableCell>
                    </TableRow>
                  )}
                </TableBody>
              </Table>
            </CardContent>
          </Card>
        </motion.div>
      </motion.div>
    </div>
  )
}
</article></body></html>

Transaction	Customer	Amount	Reason	Status
PC-2A5F9B-1K3M	John Doe	MK 51,000	Duplicate charge	Completed
PC-8B2D1A-4X7Q	Jane Smith	MK 168,300	Service not as described	Requested
PC-3C6E7F-9P2L	Bob Kabwe	MK 85,000	Cancelled subscription	Approved
PC-7D9E2F-3U8V	Alice Banda	MK 25,500	Accidental purchase	Rejected
PC-4G5H6I-2W1X	Tom Phiri	MK 136,000	Product defective	Requested

Transaction	Customer	Amount	Reason	Status
PC-2A5F9B-1K3M	John Doe	MK 51,000	Duplicate charge	Completed
PC-8B2D1A-4X7Q	Jane Smith	MK 168,300	Service not as described	Requested
PC-3C6E7F-9P2L	Bob Kabwe	MK 85,000	Cancelled subscription	Approved
PC-7D9E2F-3U8V	Alice Banda	MK 25,500	Accidental purchase	Rejected
PC-4G5H6I-2W1X	Tom Phiri	MK 136,000	Product defective	Requested