100 lines
3.6 KiB
TypeScript
100 lines
3.6 KiB
TypeScript
import { useState, useEffect } from 'react';
|
|
import PageMeta from '../../components/common/PageMeta';
|
|
import { useToast } from '../../components/ui/toast/ToastContainer';
|
|
import { fetchAPI } from '../../services/api';
|
|
import { Card } from '../../components/ui/card';
|
|
import Badge from '../../components/ui/badge/Badge';
|
|
|
|
interface Subscription {
|
|
id: number;
|
|
account_name: string;
|
|
status: string;
|
|
current_period_start: string;
|
|
current_period_end: string;
|
|
}
|
|
|
|
export default function Subscriptions() {
|
|
const toast = useToast();
|
|
const [subscriptions, setSubscriptions] = useState<Subscription[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
|
|
useEffect(() => {
|
|
loadSubscriptions();
|
|
}, []);
|
|
|
|
const loadSubscriptions = async () => {
|
|
try {
|
|
setLoading(true);
|
|
const response = await fetchAPI('/v1/auth/subscriptions/');
|
|
setSubscriptions(response.results || []);
|
|
} catch (error: any) {
|
|
toast.error(`Failed to load subscriptions: ${error.message}`);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const getStatusColor = (status: string) => {
|
|
switch (status) {
|
|
case 'active':
|
|
return 'success';
|
|
case 'past_due':
|
|
return 'warning';
|
|
case 'canceled':
|
|
return 'error';
|
|
default:
|
|
return 'primary';
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="p-6">
|
|
<PageMeta title="Subscriptions" />
|
|
<div className="mb-6">
|
|
<h1 className="text-2xl font-bold text-gray-900 dark:text-white">Subscriptions</h1>
|
|
<p className="text-gray-600 dark:text-gray-400 mt-1">Manage account subscriptions</p>
|
|
</div>
|
|
|
|
{loading ? (
|
|
<div className="flex items-center justify-center h-64">
|
|
<div className="text-gray-500">Loading...</div>
|
|
</div>
|
|
) : (
|
|
<Card className="p-6">
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full">
|
|
<thead>
|
|
<tr className="border-b border-gray-200 dark:border-gray-700">
|
|
<th className="text-left py-3 px-4 text-sm font-medium text-gray-700 dark:text-gray-300">Account</th>
|
|
<th className="text-left py-3 px-4 text-sm font-medium text-gray-700 dark:text-gray-300">Status</th>
|
|
<th className="text-left py-3 px-4 text-sm font-medium text-gray-700 dark:text-gray-300">Period Start</th>
|
|
<th className="text-left py-3 px-4 text-sm font-medium text-gray-700 dark:text-gray-300">Period End</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{subscriptions.map((subscription) => (
|
|
<tr key={subscription.id} className="border-b border-gray-100 dark:border-gray-800">
|
|
<td className="py-3 px-4 text-sm text-gray-900 dark:text-white">{subscription.account_name}</td>
|
|
<td className="py-3 px-4">
|
|
<Badge variant="light" color={getStatusColor(subscription.status) as any}>
|
|
{subscription.status}
|
|
</Badge>
|
|
</td>
|
|
<td className="py-3 px-4 text-sm text-gray-600 dark:text-gray-400">
|
|
{new Date(subscription.current_period_start).toLocaleDateString()}
|
|
</td>
|
|
<td className="py-3 px-4 text-sm text-gray-600 dark:text-gray-400">
|
|
{new Date(subscription.current_period_end).toLocaleDateString()}
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</Card>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|