"use client" import { useState } from "react" import { motion } from "framer-motion" import { fadeIn, slideDown, 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 { Separator } from "@/components/ui/separator" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from "@/components/ui/table" import { cn } from "@/lib/utils" import { Search, FileText, Download, Eye, CreditCard, Filter, ChevronDown } from "lucide-react" type InvoiceStatus = "paid" | "pending" | "overdue" | "cancelled" interface Invoice { id: string number: string client: string amount: string issued: string due: string status: InvoiceStatus } const invoices: Invoice[] = [ { id: "1", number: "INV-001", client: "Acme Corp", amount: "MK 4,080,000", issued: "2026-06-01", due: "2026-06-30", status: "pending" }, { id: "2", number: "INV-002", client: "TechStart Inc", amount: "MK 2,040,000", issued: "2026-05-15", due: "2026-06-14", status: "overdue" }, { id: "3", number: "INV-003", client: "Global Services", amount: "MK 6,120,000", issued: "2026-05-10", due: "2026-06-09", status: "paid" }, { id: "4", number: "INV-004", client: "BuildRight Co", amount: "MK 1,360,000", issued: "2026-05-20", due: "2026-06-19", status: "paid" }, { id: "5", number: "INV-005", client: "DataFlow Ltd", amount: "MK 8,840,000", issued: "2026-04-01", due: "2026-05-01", status: "cancelled" }, { id: "6", number: "INV-006", client: "CloudBase", amount: "MK 1,615,000", issued: "2026-06-05", due: "2026-07-05", status: "pending" }, { id: "7", number: "INV-007", client: "Apex Digital", amount: "MK 3,060,000", issued: "2026-06-10", due: "2026-07-10", status: "pending" }, ] const statusConfig: Record = { paid: { variant: "secondary", label: "Paid" }, pending: { variant: "outline", label: "Pending" }, overdue: { variant: "destructive", label: "Overdue" }, cancelled: { variant: "default", label: "Cancelled" }, } export default function Invoices() { const [search, setSearch] = useState("") const [filterStatus, setFilterStatus] = useState("all") const [showFilters, setShowFilters] = useState(false) const filtered = invoices.filter((inv) => { const matchesSearch = inv.number.toLowerCase().includes(search.toLowerCase()) || inv.client.toLowerCase().includes(search.toLowerCase()) const matchesStatus = filterStatus === "all" || inv.status === filterStatus return matchesSearch && matchesStatus }) return (

Invoices Manage and track your invoices

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

{showFilters && ( {(["all", "paid", "pending", "overdue", "cancelled"] as const).map((status) => ( ))} )} Invoice Client Amount Due Status Actions {filtered.map((inv) => ( {inv.number} {inv.client} {inv.amount} {inv.due} {statusConfig[inv.status].label}

{inv.status === "pending" && ( )}

))} {filtered.length === 0 && ( No invoices found. )}

) }

Invoice	Client	Amount	Due	Status
INV-001	Acme Corp	MK 4,080,000	2026-06-30	Pending
INV-002	TechStart Inc	MK 2,040,000	2026-06-14	Overdue
INV-003	Global Services	MK 6,120,000	2026-06-09	Paid
INV-004	BuildRight Co	MK 1,360,000	2026-06-19	Paid
INV-005	DataFlow Ltd	MK 8,840,000	2026-05-01	Cancelled
INV-006	CloudBase	MK 1,615,000	2026-07-05	Pending
INV-007	Apex Digital	MK 3,060,000	2026-07-10	Pending

Invoice	Client	Amount	Due	Status
INV-001	Acme Corp	MK 4,080,000	2026-06-30	Pending
INV-002	TechStart Inc	MK 2,040,000	2026-06-14	Overdue
INV-003	Global Services	MK 6,120,000	2026-06-09	Paid
INV-004	BuildRight Co	MK 1,360,000	2026-06-19	Paid
INV-005	DataFlow Ltd	MK 8,840,000	2026-05-01	Cancelled
INV-006	CloudBase	MK 1,615,000	2026-07-05	Pending
INV-007	Apex Digital	MK 3,060,000	2026-07-10	Pending