import { Head, Link, router } from '@inertiajs/react'; import { Heart, Star, Trophy } from 'lucide-react'; import { PageHeader } from '@/components/admin/page-header'; import { Badge } from '@/components/ui/badge'; import { Button } from '@/components/ui/button'; import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; import { Input } from '@/components/ui/input'; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from '@/components/ui/table'; import AppLayout from '@/layouts/app-layout'; import adminRoutes from '@/routes/admin'; import type { BreadcrumbItem } from '@/types'; import type { AdminProduct } from '@/types/admin'; function typeBadge(type: string) { const map: Record = { simple: 'bg-blue-100 text-blue-800 border-blue-200', variable: 'bg-purple-100 text-purple-800 border-purple-200', grouped: 'bg-orange-100 text-orange-800 border-orange-200', digital: 'bg-teal-100 text-teal-800 border-teal-200', }; return {type}; } export default function ProductShow({ product, wishlistCount, }: { product: AdminProduct; wishlistCount: number; }) { const breadcrumbs: BreadcrumbItem[] = [ { title: 'Admin', href: adminRoutes.dashboard().url }, { title: 'Products', href: adminRoutes.products.index().url }, { title: product.name, href: adminRoutes.products.show(product.id).url, }, ]; const isOnSale = product.sale_price !== null && product.regular_price !== null && parseFloat(product.sale_price) < parseFloat(product.regular_price); const setBestSeller = (bestSeller: boolean, rank?: number) => router.patch( adminRoutes.products.bestSeller(product.id).url, { best_seller: bestSeller, rank: rank ?? null }, { preserveScroll: true }, ); return (
{product.best_seller_rank !== null && ( { if (e.key === 'Enter') { const rank = Number( (e.target as HTMLInputElement) .value, ); if (rank >= 1) { setBestSeller(true, rank); } } }} /> )} {typeBadge(product.type)} {product.is_active ? ( Active ) : ( Inactive )}
} />
{/* Core Details */} Product Details b.code) .join(', ') : '—' } /> {product.sub_category && ( )} {product.parent && (
Parent Product {product.parent.name}
)} {/* Description */} {(product.description || product.short_description) && ( Description {product.short_description && (

Short Description

{product.short_description}

)} {product.description && (

Full Description

)} )} {/* Attributes */} {product.attributes && Object.keys(product.attributes).length > 0 && ( Attributes
{Object.entries( product.attributes, ).map(([key, val]) => (
{key} {String(val)}
))}
)} {/* Variants */} {(product.children?.length ?? 0) > 0 && ( Variants ({product.children!.length}) Image Name SKU Price Stock Status {product.children!.map((child) => ( {child.primary_image ?.public_url ? ( {child.name} ) : (
)} {child.name} {child.sku} {child.regular_price ?? '—'} {child.in_stock ? ( In Stock ) : ( Out )} {child.is_active ? ( Active ) : ( Inactive )} ))}
)}
{/* Wishlist Stats */} Wishlist

{wishlistCount}

{wishlistCount === 1 ? 'user has' : 'users have'}{' '} wishlisted this product

{/* Pricing */} Pricing {isOnSale && ( On Sale )} {/* Stock */} Stock
In Stock {product.in_stock ? ( Yes ) : ( No )}
{product.manage_stock && ( )} {/* Gallery */} {(product.media?.length ?? 0) > 0 && ( Images ({product.media!.length})
{product.media!.map((m) => (
{m.alt {m.is_primary && ( Primary )}
))}
)}
); } function Row({ label, value }: { label: string; value: string }) { return (
{label} {value}
); }