import { Head, Link, usePage } from '@inertiajs/react'; import { ArrowUpRight, BadgeCheck, Boxes, Layers3, Package, PackageCheck, PackageX, Plus, Store, Tags, Warehouse, } from 'lucide-react'; import { Button } from '@/components/ui/button'; import { dashboard } from '@/routes'; import type { Auth } from '@/types'; type Totals = { stores: number; categories: number; brands: number; products: number; }; type RecentProduct = { id: number; name: string; slug: string; price: string; stock: number; feature_image_url: string | null; is_active: boolean; created_at: string; store: { id: number; name: string }; category: { id: number; name: string }; brand: { id: number; name: string }; }; type PageProps = { auth: Auth; totals: Totals; active: Totals; inventory: { total_stock: number; low_stock: number; out_of_stock: number; }; recentProducts: RecentProduct[]; }; const numberFormatter = new Intl.NumberFormat(); export default function Dashboard({ totals, active, inventory, recentProducts, }: PageProps) { const { auth } = usePage().props; const can = (permission: string) => auth.permissions.includes(permission); const statCards = [ { label: 'Total stores', value: totals.stores, active: active.stores, href: '/stores', permission: 'stores.view', icon: Store, accent: 'from-violet-500/20 via-violet-500/5 to-transparent', iconStyle: 'bg-violet-500/10 text-violet-700 dark:text-violet-300', }, { label: 'Categories', value: totals.categories, active: active.categories, href: '/categories', permission: 'categories.view', icon: Tags, accent: 'from-cyan-500/20 via-cyan-500/5 to-transparent', iconStyle: 'bg-cyan-500/10 text-cyan-700 dark:text-cyan-300', }, { label: 'Brands', value: totals.brands, active: active.brands, href: '/brands', permission: 'brands.view', icon: BadgeCheck, accent: 'from-amber-500/20 via-amber-500/5 to-transparent', iconStyle: 'bg-amber-500/10 text-amber-700 dark:text-amber-300', }, { label: 'Products', value: totals.products, active: active.products, href: '/products', permission: 'products.view', icon: Package, accent: 'from-emerald-500/20 via-emerald-500/5 to-transparent', iconStyle: 'bg-emerald-500/10 text-emerald-700 dark:text-emerald-300', }, ]; const inventoryItems = [ { label: 'Units in stock', value: inventory.total_stock, icon: Boxes, style: 'bg-blue-500/10 text-blue-700 dark:text-blue-300', }, { label: 'Low-stock products', value: inventory.low_stock, icon: PackageCheck, style: 'bg-amber-500/10 text-amber-700 dark:text-amber-300', }, { label: 'Out of stock', value: inventory.out_of_stock, icon: PackageX, style: 'bg-rose-500/10 text-rose-700 dark:text-rose-300', }, ]; return ( <>
Commerce overview

Welcome back, {auth.user.name}

Monitor your catalog, inventory, stores, and product structure from one clear workspace.

{can('products.create') && ( )}
{statCards.map((card) => { const content = ( <>
{can(card.permission) && ( )}
{numberFormatter.format(card.value)}
{card.label}
{numberFormatter.format(card.active)}{' '} active
); const className = 'group relative min-h-48 overflow-hidden rounded-2xl border bg-card p-5 shadow-sm transition-all hover:-translate-y-0.5 hover:shadow-md'; return can(card.permission) ? ( {content} ) : (
{content}
); })}

Recently added products

The latest items added to your catalog.

{can('products.view') && ( )}
{recentProducts.map((product) => (
{product.feature_image_url ? ( {product.name} ) : ( )}
{product.name}
{product.brand.name} ·{' '} {product.category.name} ·{' '} {product.store.name}
${Number(product.price).toFixed(2)}
{product.stock} in stock
))} {recentProducts.length === 0 && (

No products yet

Add your first product to populate this dashboard.

)}

Inventory health

Current product availability

{inventoryItems.map((item) => (
{item.label}
{numberFormatter.format(item.value)}
))}
); } Dashboard.layout = { breadcrumbs: [ { title: 'Dashboard', href: dashboard(), }, ], };