initial commit

app/balance/page.tsx

@@ -0,0 +1,107 @@
+'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>
+  )
+}