107 lines
3.5 KiB
TypeScript
107 lines
3.5 KiB
TypeScript
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from "@/components/ui/card"
|
|
import {
|
|
Table,
|
|
TableBody,
|
|
TableCell,
|
|
TableHead,
|
|
TableHeader,
|
|
TableRow,
|
|
} from "@/components/ui/table"
|
|
import { Badge } from "@/components/ui/badge"
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuLabel,
|
|
DropdownMenuTrigger,
|
|
} from "@/components/ui/dropdown-menu"
|
|
import { Button } from "@/components/ui/button"
|
|
import { MoreHorizontal } from "lucide-react"
|
|
import type { Payment } from "@/types/dashboard"
|
|
|
|
interface PaymentsTableProps {
|
|
payments: Payment[]
|
|
}
|
|
|
|
export function PaymentsTable({ payments }: PaymentsTableProps) {
|
|
const getCategoryColor = (category: Payment["category"]) => {
|
|
switch (category) {
|
|
case "groceries":
|
|
return "bg-green-500/15 text-green-500 hover:bg-green-500/20"
|
|
case "utilities":
|
|
return "bg-blue-500/15 text-blue-500 hover:bg-blue-500/20"
|
|
case "transport":
|
|
return "bg-purple-500/15 text-purple-500 hover:bg-purple-500/20"
|
|
case "entertainment":
|
|
return "bg-pink-500/15 text-pink-500 hover:bg-pink-500/20"
|
|
case "shopping":
|
|
return "bg-orange-500/15 text-orange-500 hover:bg-orange-500/20"
|
|
case "insurance":
|
|
return "bg-red-500/15 text-red-500 hover:bg-red-500/20"
|
|
case "housing":
|
|
return "bg-yellow-500/15 text-yellow-500 hover:bg-yellow-500/20"
|
|
default:
|
|
return ""
|
|
}
|
|
}
|
|
|
|
return (
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Recent Payments</CardTitle>
|
|
<CardDescription>You have {payments.length} payments this month.</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="overflow-x-auto">
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow>
|
|
<TableHead>Category</TableHead>
|
|
<TableHead>Description</TableHead>
|
|
<TableHead className="text-right">Amount</TableHead>
|
|
<TableHead className="text-right">Actions</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{payments.map((payment) => (
|
|
<TableRow key={payment.id}>
|
|
<TableCell>
|
|
<Badge className={getCategoryColor(payment.category)} variant="secondary">
|
|
{payment.category}
|
|
</Badge>
|
|
</TableCell>
|
|
<TableCell className="font-medium">{payment.description}</TableCell>
|
|
<TableCell className="text-right">
|
|
${payment.amount.toFixed(2)}
|
|
</TableCell>
|
|
<TableCell className="text-right">
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button variant="ghost" className="h-8 w-8 p-0">
|
|
<span className="sr-only">Open menu</span>
|
|
<MoreHorizontal className="h-4 w-4" />
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="end">
|
|
<DropdownMenuLabel>Actions</DropdownMenuLabel>
|
|
<DropdownMenuItem>View details</DropdownMenuItem>
|
|
<DropdownMenuItem>Download receipt</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</TableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
}
|