import { Head, Link, router } from '@inertiajs/react'; import { ConfirmDialog } from '@/components/admin/confirm-dialog'; import { Badge } from '@/components/ui/badge'; import { Button } from '@/components/ui/button'; import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; import { useState } from 'react'; interface Subscription { id: number; status: string; starts_at: string | null; ends_at: string | null; created_at: string; updated_at: string; user: { id: number; name: string; email: string; title: string | null; profession: string | null; } | null; tier: { id: number; name: string; price_usd: number; duration: string; } | null; } const statusVariant: Record = { active: 'default', expired: 'secondary', cancelled: 'destructive', pending: 'outline', }; export default function SubscriptionsShow({ subscription }: { subscription: Subscription }) { const [confirmCancel, setConfirmCancel] = useState(false); return ( <>

Subscription #{subscription.id}

{subscription.status.charAt(0).toUpperCase() + subscription.status.slice(1)}

Member {subscription.user ? ( <>

Name {subscription.user.name}

Email {subscription.user.email}

{subscription.user.title && (

Title {subscription.user.title}

)} {subscription.user.profession && (

Profession {subscription.user.profession}

)} ) : (

User deleted.

)} Tier {subscription.tier ? ( <>

Name {subscription.tier.name}

Price {subscription.tier.price_usd === 0 ? 'Free' : `$${Number(subscription.tier.price_usd).toFixed(2)}`}

Duration {subscription.tier.duration}

) : (

Tier deleted.

)} Dates

Created {new Date(subscription.created_at).toLocaleDateString()}

Starts {subscription.starts_at ? new Date(subscription.starts_at).toLocaleDateString() : '—'}

Expires {subscription.ends_at ? new Date(subscription.ends_at).toLocaleDateString() : 'Lifetime'}

{subscription.status === 'active' && (

)}

router.post(`/admin/subscriptions/${subscription.id}/cancel`, {}, { onSuccess: () => setConfirmCancel(false), }) } /> ); }