108 lines
3.8 KiB
TypeScript
108 lines
3.8 KiB
TypeScript
'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 (
|
|
<div className="container mx-auto px-4 py-8">
|
|
<div className="text-center">
|
|
<h1 className="text-2xl font-bold mb-4">Access Denied</h1>
|
|
<p className="text-muted-foreground mb-4">Please log in to view your balance.</p>
|
|
<Link href="/auth">
|
|
<Button>Login</Button>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div className="container mx-auto px-4 py-8 max-w-4xl">
|
|
<div className="mb-6">
|
|
<Link href="/">
|
|
<Button variant="ghost" size="sm" className="mb-4">
|
|
<ArrowLeft className="h-4 w-4 mr-2" />
|
|
Back to Dashboard
|
|
</Button>
|
|
</Link>
|
|
<h1 className="text-3xl font-bold">Balance Management</h1>
|
|
<p className="text-muted-foreground">
|
|
Manage your account balance and view transaction history
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid gap-6 md:grid-cols-2">
|
|
{/* Main Balance Card */}
|
|
<div className="space-y-6">
|
|
<BalanceCard showAddBalance={true} />
|
|
|
|
{/* Quick Balance Display Examples */}
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="text-lg">Balance Display Variants</CardTitle>
|
|
<CardDescription>Different ways to show balance in your UI</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
<div>
|
|
<p className="text-sm font-medium mb-2">Default Display:</p>
|
|
<BalanceDisplay variant="default" />
|
|
</div>
|
|
|
|
<div>
|
|
<p className="text-sm font-medium mb-2">Compact Display:</p>
|
|
<BalanceDisplay variant="compact" />
|
|
</div>
|
|
|
|
<div>
|
|
<p className="text-sm font-medium mb-2">Badge Display:</p>
|
|
<BalanceDisplay variant="badge" />
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
|
|
{/* Transaction History */}
|
|
<div className="space-y-6">
|
|
<TransactionHistory showFilters={true} maxHeight="500px" />
|
|
|
|
{/* Account Info */}
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="text-lg">Account Information</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="space-y-3">
|
|
<div className="flex justify-between">
|
|
<span className="text-muted-foreground">Name:</span>
|
|
<span className="font-medium">{user.name}</span>
|
|
</div>
|
|
<div className="flex justify-between">
|
|
<span className="text-muted-foreground">Email:</span>
|
|
<span className="font-medium">{user.email}</span>
|
|
</div>
|
|
{user.siliconId && (
|
|
<div className="flex justify-between">
|
|
<span className="text-muted-foreground">Silicon ID:</span>
|
|
<span className="font-medium">{user.siliconId}</span>
|
|
</div>
|
|
)}
|
|
<div className="flex justify-between">
|
|
<span className="text-muted-foreground">Account Type:</span>
|
|
<span className="font-medium capitalize">{user.role}</span>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|