121 lines
4.3 KiB
TypeScript
121 lines
4.3 KiB
TypeScript
import { Card, CardContent, 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 { Search, Download, Eye, MoreVertical } from "lucide-react"
|
|
|
|
export default function TransactionsPage() {
|
|
return (
|
|
<div className="space-y-6">
|
|
<div className="flex items-center justify-between">
|
|
<h2 className="text-3xl font-bold">Transactions</h2>
|
|
<Button>
|
|
<Download className="w-4 h-4 mr-2" />
|
|
Export Data
|
|
</Button>
|
|
</div>
|
|
|
|
<Card>
|
|
<CardHeader>
|
|
<div className="flex items-center justify-between">
|
|
<CardTitle>All Transactions</CardTitle>
|
|
<div className="flex items-center gap-4">
|
|
<div className="relative">
|
|
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
|
|
<Input
|
|
placeholder="Search transaction..."
|
|
className="pl-10 w-64"
|
|
/>
|
|
</div>
|
|
<select className="px-3 py-2 border rounded-md text-sm">
|
|
<option>All Status</option>
|
|
<option>Completed</option>
|
|
<option>Pending</option>
|
|
<option>Failed</option>
|
|
</select>
|
|
<select className="px-3 py-2 border rounded-md text-sm">
|
|
<option>All Types</option>
|
|
<option>Payment</option>
|
|
<option>Refund</option>
|
|
<option>Subscription</option>
|
|
</select>
|
|
<Button variant="outline">
|
|
<Download className="w-4 h-4 mr-2" />
|
|
Export
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow>
|
|
<TableHead>Transaction ID</TableHead>
|
|
<TableHead>Client</TableHead>
|
|
<TableHead>Type</TableHead>
|
|
<TableHead>Amount</TableHead>
|
|
<TableHead>Status</TableHead>
|
|
<TableHead>Date</TableHead>
|
|
<TableHead>Payment Method</TableHead>
|
|
<TableHead>Action</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
<TableRow>
|
|
<TableCell className="font-medium">TXN001</TableCell>
|
|
<TableCell>Client Name</TableCell>
|
|
<TableCell>Payment</TableCell>
|
|
<TableCell>$99.00</TableCell>
|
|
<TableCell>
|
|
<Badge className="bg-green-500">Completed</Badge>
|
|
</TableCell>
|
|
<TableCell>2024-01-15</TableCell>
|
|
<TableCell>Credit Card</TableCell>
|
|
<TableCell>
|
|
<div className="flex items-center gap-2">
|
|
<Button variant="ghost" size="icon">
|
|
<Eye className="w-4 h-4" />
|
|
</Button>
|
|
<Button variant="ghost" size="icon">
|
|
<MoreVertical className="w-4 h-4" />
|
|
</Button>
|
|
</div>
|
|
</TableCell>
|
|
</TableRow>
|
|
<TableRow>
|
|
<TableCell className="font-medium">TXN002</TableCell>
|
|
<TableCell>Another Client</TableCell>
|
|
<TableCell>Refund</TableCell>
|
|
<TableCell>-$49.00</TableCell>
|
|
<TableCell>
|
|
<Badge className="bg-yellow-500">Pending</Badge>
|
|
</TableCell>
|
|
<TableCell>2024-01-14</TableCell>
|
|
<TableCell>Bank Transfer</TableCell>
|
|
<TableCell>
|
|
<div className="flex items-center gap-2">
|
|
<Button variant="ghost" size="icon">
|
|
<Eye className="w-4 h-4" />
|
|
</Button>
|
|
<Button variant="ghost" size="icon">
|
|
<MoreVertical className="w-4 h-4" />
|
|
</Button>
|
|
</div>
|
|
</TableCell>
|
|
</TableRow>
|
|
</TableBody>
|
|
</Table>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
)
|
|
}
|