9daf1fd378
- Add comprehensive database migrations (001-024) for schema evolution - Enhance API schema with expanded type definitions and resolvers - Add new middleware: audit logging, rate limiting, MFA enforcement, security, tenant auth - Implement new services: AI optimization, billing, blockchain, compliance, marketplace - Add adapter layer for cloud integrations (Cloudflare, Kubernetes, Proxmox, storage) - Update Crossplane provider with enhanced VM management capabilities - Add comprehensive test suite for API endpoints and services - Update frontend components with improved GraphQL subscriptions and real-time updates - Enhance security configurations and headers (CSP, CORS, etc.) - Update documentation and configuration files - Add new CI/CD workflows and validation scripts - Implement design system improvements and UI enhancements
68 lines
2.3 KiB
TypeScript
68 lines
2.3 KiB
TypeScript
'use client';
|
|
|
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/Card';
|
|
import { CreditCard, FileText } from 'lucide-react';
|
|
import Link from 'next/link';
|
|
|
|
export function BillingTile() {
|
|
// Mock data - in production, this would come from API
|
|
const billing = {
|
|
currentInvoice: 45230,
|
|
nextBillingDate: '2024-02-15',
|
|
paymentMethod: 'Credit Card ending in 4242',
|
|
invoicesPending: 0,
|
|
};
|
|
|
|
return (
|
|
<Card className="bg-gray-800 border-gray-700">
|
|
<CardHeader>
|
|
<CardTitle className="text-white flex items-center gap-2">
|
|
<CreditCard className="h-5 w-5 text-orange-500" />
|
|
Billing & Invoices
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="space-y-4">
|
|
<div>
|
|
<p className="text-2xl font-bold text-white mb-1">
|
|
${billing.currentInvoice.toLocaleString()}
|
|
</p>
|
|
<p className="text-sm text-gray-400">Current Invoice</p>
|
|
</div>
|
|
|
|
<div className="p-3 bg-gray-900 rounded-lg">
|
|
<p className="text-xs text-gray-400 mb-1">Next Billing Date</p>
|
|
<p className="text-sm font-semibold text-white">
|
|
{new Date(billing.nextBillingDate).toLocaleDateString()}
|
|
</p>
|
|
</div>
|
|
|
|
<div className="p-3 bg-gray-900 rounded-lg">
|
|
<p className="text-xs text-gray-400 mb-1">Payment Method</p>
|
|
<p className="text-sm text-white">{billing.paymentMethod}</p>
|
|
</div>
|
|
|
|
{billing.invoicesPending > 0 && (
|
|
<div className="p-3 bg-yellow-500/10 border border-yellow-500/20 rounded-lg">
|
|
<div className="flex items-center gap-2">
|
|
<FileText className="h-4 w-4 text-yellow-400" />
|
|
<span className="text-sm text-yellow-400 font-semibold">
|
|
{billing.invoicesPending} invoice{billing.invoicesPending > 1 ? 's' : ''} pending
|
|
</span>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<Link
|
|
href="/admin/billing"
|
|
className="block text-center text-sm text-orange-500 hover:text-orange-400 transition-colors"
|
|
>
|
|
View All Invoices →
|
|
</Link>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|
|
|