import { useTranslation } from '@/hooks/use-translation'; import { Head, Link } from '@inertiajs/react'; import AppLayout from '@/layouts/app-layout'; import { Button } from '@/components/ui/button'; import { Badge } from '@/components/ui/badge'; import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; import { ArrowLeft, Edit } from 'lucide-react'; import { type BreadcrumbItem } from '@/types'; import { formatCurrency } from '@/lib/utils'; interface Props { tier: { id: number; name: string; slug: string; description: string | null; price: string; billing_period: string; max_members: number | null; is_active: boolean; features: string[] | null; membership_periods?: Array<{ id: number }>; }; } export default function MembershipTierShow({ tier }: Readonly) { const { t } = useTranslation(); const breadcrumbs: BreadcrumbItem[] = [ { title: 'Dashboard', href: '/dashboard' }, { title: 'Membership Tiers', href: '/admin/membership-tiers' }, { title: tier.name, href: `/admin/membership-tiers/${tier.id}` }, ]; return (

{tier.name}

{tier.is_active ? t('Active') : t('Inactive')}
{t('Details')}
{t('Price')}
{formatCurrency(Number(tier.price))}
{t('Billing Period')}
{tier.billing_period}
{t('Max Members')}
{tier.max_members ?? t('Unlimited')}
{t('Membership periods')}
{tier.membership_periods?.length ?? 0}
{tier.description && (
{t('Description')}
{tier.description}
)} {tier.features && tier.features.length > 0 && (
{t('Features')}
    {tier.features.map((feature) => (
  • {feature}
    • ))}
)}
); }