import { useTranslation } from '@/hooks/use-translation'; import React, { useState } from 'react'; import { Head, Link, router, usePage } from '@inertiajs/react'; import AppLayout from '@/layouts/app-layout'; import { Button } from '@/components/ui/button'; import { Badge } from '@/components/ui/badge'; import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'; import { Plus, Edit, Trash2, TrendingUp, Users, Activity } from 'lucide-react'; import { BreadcrumbItem } from '@/types'; import { formatCurrency } from '@/lib/utils'; interface MembershipTier { id: number; name: string; slug: string; description: string | null; price: string; billing_period: 'annual' | 'monthly' | 'lifetime' | 'custom'; max_members: number | null; is_active: boolean; sort_order: number; features: string[] | null; created_at: string; updated_at: string; } interface TierStats { total: number; active: number; totalRevenue: string; } interface Props { tiers: MembershipTier[]; stats: TierStats; } const billingPeriodLabels: Record = { annual: 'Annual', monthly: 'Monthly', lifetime: 'Lifetime', custom: 'Custom', }; export default function MembershipTiersIndex({ tiers, stats }: Props) { const { t } = useTranslation(); const { currency } = usePage().props as unknown as { currency: string }; const handleDelete = (tier: MembershipTier) => { if (confirm(`Are you sure you want to delete the "${tier.name}" membership tier?`)) { router.delete(`/admin/membership-tiers/${tier.id}`); } }; const breadcrumbs: BreadcrumbItem[] = [ { title: 'Dashboard', href: '/dashboard' }, { title: 'Membership Tiers', href: '/admin/membership-tiers' }, ]; return (

{/* Header */}

{t('Membership Tiers')}

{t('Manage membership tier types and pricing')}

{/* Stats Cards */}

{t('Total Tiers')}

{stats.total}

{t('Active Tiers')}

{stats.active}

{t('Potential Annual Revenue')}

{formatCurrency(parseFloat(stats.totalRevenue), currency)}

{/* Tiers Table */} {t('Membership Tiers')} {t('All membership tier types with pricing information')}

{tiers.length === 0 ? ( ) : ( tiers.map((tier) => ( )) )}

{t('Name')}	{t('Price')}	{t('Billing Period')}	{t('Max Members')}	{t('Status')}	{t('Sort Order')}	{t('Actions')}
{t('No membership tiers found. Create your first tier to get started.')}
{tier.name} {tier.description && ( {tier.description} )}	{formatCurrency(parseFloat(tier.price), currency)}	{billingPeriodLabels[tier.billing_period]}	{tier.max_members ? tier.max_members : 'Unlimited'}	{tier.is_active ? 'Active' : 'Inactive'}	{tier.sort_order}

); }