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, GripVertical } 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 Stat { id: number; number: string; label: string; icon: string; order: number; is_active: boolean; } interface StatsProps { stats: Stat[]; } export default function Stats({ stats = [] }: StatsProps) { const breadcrumbs: BreadcrumbItem[] = [ { title: 'Dashboard', href: dashboard().url }, { title: 'Theme', href: '/admin/theme' }, { title: 'Stats', href: '/admin/theme/stats' }, ]; const [editingId, setEditingId] = useState(null); const [showNewForm, setShowNewForm] = useState(false); const newForm = useForm({ number: '', label: '', icon: '', order: stats.length + 1, is_active: true, }); const handleCreate = (e: React.FormEvent) => { e.preventDefault(); newForm.post('/admin/theme/stats', { onSuccess: () => { newForm.reset(); setShowNewForm(false); }, }); }; const handleDelete = (id: number) => { if (confirm('Are you sure you want to delete this stat?')) { router.delete(`/admin/theme/stats/${id}`); } }; return (
{showNewForm && (
newForm.setData('number', e.target.value)} placeholder="10,000+" /> {newForm.errors.number && (

{newForm.errors.number}

)}
newForm.setData('label', e.target.value)} placeholder="Happy Customers" /> {newForm.errors.label && (

{newForm.errors.label}

)}
newForm.setData('icon', e.target.value)} placeholder="👥" /> {newForm.errors.icon && (

{newForm.errors.icon}

)}
newForm.setData('order', parseInt(e.target.value))} />
)} Icon Number Label Order Status Actions {stats.length === 0 ? ( No stats yet. Click "Add Stat" to create one. ) : ( stats.map((stat) => ( {stat.icon} {stat.number} {stat.label} {stat.order} {stat.is_active ? 'Active' : 'Inactive'} )) )}
); }