import { CreditCard } from 'lucide-react'; import { Head, Link } from '@inertiajs/react'; import { AdminDataTable } from '@/Components/admin/AdminDataTable'; import { SortHeader } from '@/Components/admin/SortHeader'; import PageHeader from '@/Components/layout/PageHeader'; import { Badge } from '@/Components/ui/badge'; import { Button } from '@/Components/ui/button'; import { Card, CardContent, CardHeader, CardTitle } from '@/Components/ui/card'; import { Input } from '@/Components/ui/input'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from '@/Components/ui/select'; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from '@/Components/ui/table'; import { SUBSCRIPTION_STATUS_VARIANT } from '@/config/billing-constants'; import { useAdminFilters } from '@/hooks/useAdminFilters'; import { useNavigationState } from '@/hooks/useNavigationState'; import AdminLayout from '@/Layouts/AdminLayout'; import { capitalize, formatDate } from '@/lib/format'; import type { AdminBillingSubscriptionsProps } from '@/types/admin'; export default function BillingSubscriptions({ subscriptions, filters, statuses, tiers, }: AdminBillingSubscriptionsProps) { const { search, setSearch, updateFilter, handleSort, handlePage } = useAdminFilters({ route: '/admin/billing/subscriptions', filters, routerOptions: { preserveScroll: true }, }); const isNavigating = useNavigationState(); return ( } />
{/* Filters */} Filters
setSearch(e.target.value)} className="sm:max-w-xs" aria-label="Search subscriptions by name or email" />
{/* Table */} Tier Trial Ends Ends At {subscriptions.data.map((sub) => (
{sub.user_name}
{sub.user_email}
{capitalize(sub.tier)} {sub.stripe_status} {sub.quantity} {formatDate(sub.trial_ends_at, '\u2014')} {formatDate(sub.ends_at, '\u2014')} {formatDate(sub.created_at, '\u2014')} ))}
); }