import AppLayout from '@/layouts/app-layout'; import Heading from '@/components/heading'; import { Card, CardContent } from '@/components/ui/card'; import { Button } from '@/components/ui/button'; import { Input } from '@/components/ui/input'; import { Label } from '@/components/ui/label'; import { Head, useForm, router } from '@inertiajs/react'; import { Plus, Trash2 } from 'lucide-react'; import { dashboard } from '@/routes'; import { type BreadcrumbItem } from '@/types'; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'; import { Badge } from '@/components/ui/badge'; import { useState } from 'react'; interface PricingTier { id: number; credits: number; price: number; per_credit: number; popular: boolean; icon: string | null; savings: string | null; order: number; is_active: boolean; } interface PricingProps { pricing: PricingTier[]; } export default function Pricing({ pricing = [] }: PricingProps) { const breadcrumbs: BreadcrumbItem[] = [ { title: 'Dashboard', href: dashboard().url }, { title: 'Theme', href: '/admin/theme' }, { title: 'Pricing', href: '/admin/theme/pricing' }, ]; const [showNewForm, setShowNewForm] = useState(false); const newForm = useForm({ credits: '', price: '', per_credit: '', popular: false, icon: '', savings: '', order: pricing.length + 1, is_active: true, }); const handleCreate = (e: React.FormEvent) => { e.preventDefault(); newForm.post('/admin/theme/pricing', { onSuccess: () => { newForm.reset(); setShowNewForm(false); }, }); }; const handleDelete = (id: number) => { if (confirm('Are you sure you want to delete this pricing tier?')) { router.delete(`/admin/theme/pricing/${id}`); } }; return (
{showNewForm && (
newForm.setData('credits', e.target.value)} placeholder="100" /> {newForm.errors.credits && (

{newForm.errors.credits}

)}
newForm.setData('price', e.target.value)} placeholder="$10" />
newForm.setData('per_credit', e.target.value)} placeholder="$0.10" />
newForm.setData('icon', e.target.value)} placeholder="💎" />
newForm.setData('savings', e.target.value)} placeholder="Save 20%" />
)} Icon Credits Price Per Credit Savings Status Actions {pricing.length === 0 ? ( No pricing tiers yet. Click "Add Pricing Tier" to create one. ) : ( pricing.map((tier) => ( {tier.icon} {tier.credits} ${tier.price} ${tier.per_credit} {tier.savings || '-'}
{tier.is_active ? 'Active' : 'Inactive'} {tier.popular && Popular}
)) )}
); }