52 lines
1.8 KiB
TypeScript
52 lines
1.8 KiB
TypeScript
'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>
|
|
)
|
|
}
|