[V0_FILE]typescriptreact:file="deposit-table.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import * as React from "react" import { CaretSortIcon, ChevronDownIcon, DotsHorizontalIcon } from "@radix-ui/react-icons" import { flexRender, getCoreRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, type SortingState, useReactTable, type ColumnDef, type ColumnFiltersState, } from "@tanstack/react-table" import { Button } from "@/components/ui/button" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu" import { Input } from "@/components/ui/input" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Badge } from "@/components/ui/badge" import Link from "next/link" interface Deposit { id: string amount: number status: "pending" | "processing" | "completed" | "failed" email: string date: string method: string description: string } const data: Deposit[] = [ { id: "DEP-7529", amount: 499.99, status: "completed", email: "m.ross@example.com", date: "2024-01-28", method: "Credit Card", description: "Monthly subscription payment", }, { id: "DEP-7528", amount: 249.99, status: "processing", email: "steve@example.com", date: "2024-01-28", method: "PayPal", description: "One-time service fee", }, { id: "DEP-7527", amount: 999.99, status: "completed", email: "sarah.williams@example.com", date: "2024-01-27", method: "Bank Transfer", description: "Annual plan upgrade", }, { id: "DEP-7526", amount: 699.99, status: "failed", email: "j.thompson@example.com", date: "2024-01-27", method: "Credit Card", description: "Premium package purchase", }, { id: "DEP-7525", amount: 149.99, status: "pending", email: "alex.martinez@example.com", date: "2024-01-26", method: "PayPal", description: "Basic tier subscription", }, ] export function DepositTable() { const [sorting, setSorting] = React.useState([]) const [columnFilters, setColumnFilters] = React.useState([]) const columns: ColumnDef[] = [ { accessorKey: "id", header: "Transaction ID", cell: ({ row }) =>

{row.getValue("id")}

, }, { accessorKey: "amount", header: ({ column }) => { return ( ) }, cell: ({ row }) => { const amount = Number.parseFloat(row.getValue("amount")) const formatted = new Intl.NumberFormat("en-US", { style: "currency", currency: "USD", }).format(amount) return

{formatted}

}, }, { accessorKey: "method", header: "Payment Method", cell: ({ row }) => { return (

{row.getValue("method")}

) }, }, { accessorKey: "status", header: "Status", cell: ({ row }) => { const status = row.getValue("status") as string return ( {status.charAt(0).toUpperCase() + status.slice(1)} ) }, }, { accessorKey: "description", header: "Description", cell: ({ row }) =>

{row.getValue("description")}

, }, { accessorKey: "email", header: "Email", cell: ({ row }) =>

{row.getValue("email")}

, }, { accessorKey: "date", header: ({ column }) => { return ( ) }, }, { id: "actions", cell: ({ row }) => { const deposit = row.original return ( navigator.clipboard.writeText(deposit.id)}> Copy transaction ID View details Download receipt ) }, }, ] const table = useReactTable({ data, columns, state: { sorting, columnFilters, }, onSortingChange: setSorting, onColumnFiltersChange: setColumnFilters, getCoreRowModel: getCoreRowModel(), getSortedRowModel: getSortedRowModel(), getFilteredRowModel: getFilteredRowModel(), getPaginationRowModel: getPaginationRowModel(), }) return (

table.getColumn("description")?.setFilterValue(event.target.value)} className="max-w-xs" />

{table.getHeaderGroups().map((headerGroup) => ( {headerGroup.headers.map((header) => { return ( {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())} ) })} ))} {table.getRowModel().rows?.length ? ( table.getRowModel().rows.map((row) => ( {row.getVisibleCells().map((cell) => ( {flexRender(cell.column.columnDef.cell, cell.getContext())} ))} )) ) : ( No results. )}

Showing {table.getRowModel().rows?.length ?? 0} of {data.length} results

) } [V0_FILE]typescriptreact:file="page.tsx" isEdit="true" isMerged="true" import { DepositTable } from "./deposit-table" export default function DashboardPage() { return (

Deposits

Manage and track your deposits

) } [V0_FILE]typescriptreact:file="app/deposits/[id]/page.tsx" isMerged="true" import { DepositDetail } from "@/components/deposit-detail" // This would normally come from your database const deposit = { id: "DEP-7529", amount: 499.99, status: "completed", email: "m.ross@example.com", date: "2024-01-28", method: "Credit Card", description: "Monthly subscription payment", } as const export default function DepositDetailPage() { return } [V0_FILE]typescriptreact:file="components/deposit-detail.tsx" isQuickEdit="true" isMerged="true" "use client" import { ArrowLeft, Calendar, CheckCircle2, Copy, Download, Mail, Wallet } from "lucide-react" import Link from "next/link" import { useState } from "react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Separator } from "@/components/ui/separator" import { toast } from "@/components/ui/use-toast" interface DepositDetailProps { deposit: { id: string amount: number status: "pending" | "processing" | "completed" | "failed" email: string date: string method: string description: string } } export function DepositDetail({ deposit }: DepositDetailProps) { const [isCopied, setIsCopied] = useState(false) const copyToClipboard = async (text: string) => { try { await navigator.clipboard.writeText(text) setIsCopied(true) toast({ description: "Transaction ID copied to clipboard", }) setTimeout(() => setIsCopied(false), 2000) } catch (err) { toast({ variant: "destructive", description: "Failed to copy transaction ID", }) } } const formatDate = (dateString: string) => { return new Date(dateString).toLocaleDateString("en-US", { year: "numeric", month: "long", day: "numeric", }) } const formatTime = (dateString: string) => { return new Date(dateString).toLocaleTimeString("en-US", { hour: "2-digit", minute: "2-digit", }) } return (

Transaction Details

View detailed information about this deposit

Transaction Information Details about this transaction

Transaction ID

{deposit.id}

Status

{deposit.status.charAt(0).toUpperCase() + deposit.status.slice(1)}

Amount

{new Intl.NumberFormat("en-US", { style: "currency", currency: "USD", }).format(deposit.amount)}

Payment Method

{deposit.method}

Description

{deposit.description}

Customer Information Contact details for this transaction

{deposit.email}

Timeline Transaction history and updates

Transaction Created

{formatDate(deposit.date)} at {formatTime(deposit.date)}

Payment Processed

{formatDate(deposit.date)} at {formatTime(deposit.date)}

Transaction Completed

{formatDate(deposit.date)} at {formatTime(deposit.date)}

) } " [V0_FILE]typescriptreact:file="deposit-detail.tsx" isEdit="true" isQuickEdit="true" import { ArrowLeft, Copy, Download, Mail, Phone, MapPin, User2, Building2, Clock, CreditCard, FileText, Users, } from "lucide-react" import Link from "next/link" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Separator } from "@/components/ui/separator" import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" export default function DepositDetail() { const formatDate = (dateString: string) => { return new Date(dateString).toLocaleDateString("en-US", { year: "numeric", month: "long", day: "numeric", }) } const formatTime = (dateString: string) => { return new Date(dateString).toLocaleTimeString("en-US", { hour: "2-digit", minute: "2-digit", }) } return (

Deposit Details

Transaction ID: #1

Member Information Details about the member

Temitope Aroyewon

aroyewontope@gmail.com

+234 813 665 3463

Office Address

14b Falomo Street, VI, Lagos.

Residential Address

14b Falomo Street, VI, Lagos.

Next of Kin

Sean Paul (Brother)

+234 234 813 6653

20B Adekunle Akungba

Transaction Information Payment and service details

Amount

₦10,000.00

Status

Pending

Payment Method

Bank Transfer

Service Type

Savings

Narration

dkkff

Timeline Transaction history and updates

Payment Initiated

{formatDate("2025-01-26T19:07:45.000000Z")} at {formatTime("2025-01-26T19:07:45.000000Z")}

Pending Approval

Waiting for confirmation

Transaction Completed

Pending completion

Additional Information Other relevant details

Member Since

{formatDate("2023-01-01")}

Membership Expires

{formatDate("2024-11-30")}

Member ID

) }