import AdminLayout from '@/Layouts/AdminLayout'; import { Head, Link, router } from '@inertiajs/react'; import { FileText, Layout, Settings, Megaphone, Target, ExternalLink, Edit, Trash2 } from 'lucide-react'; interface Product { id: number; name: string; description: string | null; price: number; currency: string; type: string; slug: string; } const getIcon = (name: string) => { if (name.includes('Playbook')) return FileText; if (name.includes('Framework')) return Layout; if (name.includes('Bundle')) return Settings; if (name.includes('Planner')) return Megaphone; return Target; }; export default function Index({ products }: { products: Product[] }) { const deleteProduct = (id: number) => { if (confirm('Delete this product?')) { router.delete(route('admin.products.destroy', id)); } }; return ( {/* Header */}

Products

{products.length} product{products.length !== 1 ? 's' : ''} live in the store.

New product
{/* Mobile View: Cards */}
{products.length > 0 ? products.map((p) => { const Icon = getIcon(p.name); return (

{p.name}

₦{p.price.toLocaleString()}

${(p.price / 1500).toFixed(0)}

{p.type}

Edit
); }) : (
No products found.
)}
{/* Desktop View: Table */}
{['Product', 'Category', 'Tags', 'NGN', 'USD', ''].map((h, i) => ( ))} {products.length > 0 ? products.map((p) => { const Icon = getIcon(p.name); return ( ); }) : ( )}
= 3 && i < 5 ? 'text-right' : ''}`} > {h}

{p.name}

{p.description || p.slug}

{p.type} {p.type === 'Resource' ? 'ASSET' : 'LMS'} {p.currency === 'NGN' ? `₦${p.price.toLocaleString()}` : '—'} {p.currency === 'USD' ? `$${p.price.toLocaleString()}` : `$${(p.price / 1500).toFixed(0)}`}
No products yet. Create your first product.
); }