initial commit

app/billing/page.tsx

@@ -0,0 +1,51 @@
+'use client'
+
+import React from 'react'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
+import BillingHistory from '@/components/billing/BillingHistory'
+import { BalanceCard } from '@/components/balance/BalanceCard'
+
+export default function BillingPage() {
+  return (
+    <div className="container mx-auto px-4 py-8">
+      <div className="mb-8">
+        <h1 className="text-3xl font-bold mb-2">Billing & Usage</h1>
+        <p className="text-gray-600">
+          Manage your billing, view service usage, and track your spending across all SiliconPin
+          services.
+        </p>
+      </div>
+
+      <Tabs defaultValue="history" className="space-y-6">
+        <TabsList className="grid w-full grid-cols-2">
+          <TabsTrigger value="history">Billing History</TabsTrigger>
+          <TabsTrigger value="balance">Balance Management</TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="history" className="space-y-6">
+          <BillingHistory />
+        </TabsContent>
+
+        <TabsContent value="balance" className="space-y-6">
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+            <BalanceCard />
+            <Card>
+              <CardHeader>
+                <CardTitle>Payment Methods</CardTitle>
+                <CardDescription>
+                  Manage your payment methods and billing preferences
+                </CardDescription>
+              </CardHeader>
+              <CardContent>
+                <div className="text-center py-8 text-gray-500">
+                  Payment methods management coming soon
+                </div>
+              </CardContent>
+            </Card>
+          </div>
+        </TabsContent>
+      </Tabs>
+    </div>
+  )
+}