Type {errors.type && (

{errors.type}

)}

Amount (in dollars) setData('amount', e.target.value)} /> {errors.amount && (

{errors.amount}

)}

Reason

setData('reason', e.target.value)}
                                            rows={3}
                                        />
                                        {errors.reason && (
                                            <p className="text-sm text-red-600">{errors.reason}</p>
                                        )}
                                    </div>
                                </div>

<DialogFooter>
                                    <Button
                                        type="button"
                                        variant="outline"
                                        onClick={() => setOpen(false)}
                                    >
                                        Cancel
                                    </Button>
                                    <Button type="submit" disabled={processing}>
                                        {processing ? 'Processing...' : 'Confirm'}
                                    </Button>
                                </DialogFooter>
                            </form>
                        </DialogContent>
                    </Dialog>
                </div>

<div className="grid gap-4 md:grid-cols-3">
                    <Card>
                        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                            <CardTitle className="text-sm font-medium">Current Credits</CardTitle>
                            <CreditCard className="h-4 w-4 text-muted-foreground" />
                        </CardHeader>
                        <CardContent>
                            <div className="text-2xl font-bold">
                                {Number(user.credit_balance || 0).toFixed(2)} USD
                            </div>
                        </CardContent>
                    </Card>

<Card>
                        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                            <CardTitle className="text-sm font-medium">Total Purchased</CardTitle>
                            <Activity className="h-4 w-4 text-muted-foreground" />
                        </CardHeader>
                        <CardContent>
                            <div className="text-2xl font-bold text-green-600">
                                {Number(totalPurchased).toFixed(2)} USD
                            </div>
                        </CardContent>
                    </Card>

<Card>
                        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                            <CardTitle className="text-sm font-medium">Total Spent</CardTitle>
                            <Activity className="h-4 w-4 text-muted-foreground" />
                        </CardHeader>
                        <CardContent>
                            <div className="text-2xl font-bold text-red-600">
                                {Number(totalSpent).toFixed(2)} USD
                            </div>
                        </CardContent>
                    </Card>
                </div>

<Card>
                    <CardHeader>
                        <CardTitle>User Information</CardTitle>
                    </CardHeader>
                    <CardContent>
                        <div className="grid gap-4 md:grid-cols-2">
                            <div>
                                <p className="text-sm text-muted-foreground">Name</p>
                                <p className="font-medium">{user.name}</p>
                            </div>
                            <div>
                                <p className="text-sm text-muted-foreground">Email</p>
                                <p className="font-medium">{user.email}</p>
                            </div>
                        </div>
                    </CardContent>
                </Card>

<Card>
                    <CardHeader>
                        <CardTitle>Recent Transactions</CardTitle>
                        <CardDescription>
                            Showing {transactionsData.length} most recent transactions
                        </CardDescription>
                    </CardHeader>
                    <CardContent>
                        {transactionsData.length === 0 ? (
                            <div className="flex items-center justify-center py-12 text-center">
                                <div>
                                    <CreditCard className="mx-auto h-12 w-12 text-muted-foreground" />
                                    <p className="mt-4 text-lg font-medium">No transactions found</p>
                                    <p className="text-sm text-muted-foreground">
                                        Transactions will appear here once the user makes purchases or uses credits
                                    </p>
                                </div>
                            </div>
                        ) : (
                            <Table>
                                <TableHeader>
                                    <TableRow>
                                        <TableHead>Description</TableHead>
                                        <TableHead>Type</TableHead>
                                        <TableHead>Amount</TableHead>
                                        <TableHead>Date</TableHead>
                                    </TableRow>
                                </TableHeader>
                                <TableBody>
                                    {transactionsData.map((transaction) => (
                                        <TableRow key={transaction.id}>
                                            <TableCell className="font-medium">
                                                {transaction.description}
                                            </TableCell>
                                            <TableCell>
                                                <Badge 
                                                    variant={transaction.type === 'credit' ? 'default' : 'destructive'}
                                                >
                                                    {transaction.type === 'credit' ? 'Credit' : 'Debit'}
                                                </Badge>
                                            </TableCell>
                                            <TableCell>
                                                <span className={'font-bold ' + (transaction.type === 'credit' ? 'text-green-600' : 'text-red-600')}>
                                                    {transaction.type === 'credit' ? '+' : '-'}
                                                    {Number(transaction.amount).toFixed(2)} USD
                                                </span>
                                            </TableCell>
                                            <TableCell className="text-muted-foreground">
                                                {new Date(transaction.created_at).toLocaleString()}
                                            </TableCell>
                                        </TableRow>
                                    ))}
                                </TableBody>
                            </Table>
                        )}
                    </CardContent>
                </Card>
            </div>
        </AppLayout>
    );
}