'use client' import React from 'react' import { useAuth } from '@/contexts/AuthContext' import { BalanceCard, BalanceDisplay, TransactionHistory } from '@/components/balance' import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card' import { Button } from '@/components/ui/button' import { ArrowLeft, History } from 'lucide-react' import Link from 'next/link' export default function BalancePage() { const { user } = useAuth() if (!user) { return (

Access Denied

Please log in to view your balance.

) } return (

Balance Management

Manage your account balance and view transaction history

{/* Main Balance Card */}
{/* Quick Balance Display Examples */} Balance Display Variants Different ways to show balance in your UI

Default Display:

Compact Display:

Badge Display:

{/* Transaction History */}
{/* Account Info */} Account Information
Name: {user.name}
Email: {user.email}
{user.siliconId && (
Silicon ID: {user.siliconId}
)}
Account Type: {user.role}
) }