"use client" import { useState } from "react" import { motion } from "framer-motion" import { slideUp, stagger, staggerItem, buttonTap } 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 { Badge } from "@/components/ui/badge" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from "@/components/ui/table" import { Receipt, Search, Download, Mail, ChevronLeft, ChevronRight, Store } from "lucide-react" interface ReceiptEntry { id: string merchant: string date: string amount: string category: string receiptNumber: string } const receipts: ReceiptEntry[] = [ { id: "1", merchant: "Pro Plan Subscription", date: "Jun 10, 2026", amount: "MK 51,000", category: "Software", receiptNumber: "RCP-001" }, { id: "2", merchant: "Annual Premium", date: "Jun 08, 2026", amount: "MK 493,000", category: "Software", receiptNumber: "RCP-002" }, { id: "3", merchant: "AWS Hosting", date: "Jun 05, 2026", amount: "MK 77,400", category: "Infrastructure", receiptNumber: "RCP-003" }, { id: "4", merchant: "Stripe Fees", date: "Jun 01, 2026", amount: "MK 20,900", category: "Fees", receiptNumber: "RCP-004" }, { id: "5", merchant: "Domain Renewal", date: "May 28, 2026", amount: "MK 25,500", category: "Domains", receiptNumber: "RCP-005" }, { id: "6", merchant: "Slack Premium", date: "May 25, 2026", amount: "MK 13,600", category: "Software", receiptNumber: "RCP-006" }, { id: "7", merchant: "GitHub Enterprise", date: "May 20, 2026", amount: "MK 35,700", category: "Software", receiptNumber: "RCP-007" }, ] const ITEMS_PER_PAGE = 5 export default function Receipts() { const [search, setSearch] = useState("") const [page, setPage] = useState(1) const filtered = receipts.filter((r) => r.merchant.toLowerCase().includes(search.toLowerCase()) || r.receiptNumber.toLowerCase().includes(search.toLowerCase()) ) const totalPages = Math.max(1, Math.ceil(filtered.length / ITEMS_PER_PAGE)) const paginated = filtered.slice((page - 1) * ITEMS_PER_PAGE, page * ITEMS_PER_PAGE) return (

Receipts View and download your payment receipts

{ setSearch(e.target.value); setPage(1) }} className="pl-8" /> Merchant Date Amount Category Actions {paginated.map((r) => (

{r.merchant}

{r.date} {r.amount} {r.category}

))} {paginated.length === 0 && ( No receipts found. )}

Page {page} of {totalPages}

) }

Merchant	Date	Amount	Category
Pro Plan Subscription	Jun 10, 2026	MK 51,000	Software
Annual Premium	Jun 08, 2026	MK 493,000	Software
AWS Hosting	Jun 05, 2026	MK 77,400	Infrastructure
Stripe Fees	Jun 01, 2026	MK 20,900	Fees
Domain Renewal	May 28, 2026	MK 25,500	Domains

Merchant	Date	Amount	Category
Pro Plan Subscription	Jun 10, 2026	MK 51,000	Software
Annual Premium	Jun 08, 2026	MK 493,000	Software
AWS Hosting	Jun 05, 2026	MK 77,400	Infrastructure
Stripe Fees	Jun 01, 2026	MK 20,900	Fees
Domain Renewal	May 28, 2026	MK 25,500	Domains