'use client'; import { useState } from 'react'; import { Badge } from '@/components/ui/badge'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from '@/components/ui/select'; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from '@/components/ui/table'; import { cn } from '@/lib/utils'; type Status = 'active' | 'pending' | 'discontinued' | 'on-hold'; interface Product { sku: string; productName: string; stockLevel: number; category: string; status: Status; unitPrice: string; lastRestocked: string; } const data: Product[] = [ { sku: 'SKU-8472', productName: 'Wireless Mouse Pro', stockLevel: 245, category: 'Electronics', status: 'active', unitPrice: '$24.99', lastRestocked: 'Oct 15, 2024', }, { sku: 'SKU-3391', productName: 'Ergonomic Keyboard', stockLevel: 89, category: 'Electronics', status: 'active', unitPrice: '$79.99', lastRestocked: 'Oct 18, 2024', }, { sku: 'SKU-7156', productName: 'Office Chair Deluxe', stockLevel: 12, category: 'Furniture', status: 'pending', unitPrice: '$299.99', lastRestocked: 'Oct 12, 2024', }, { sku: 'SKU-9204', productName: 'USB-C Hub Adapter', stockLevel: 456, category: 'Accessories', status: 'active', unitPrice: '$34.50', lastRestocked: 'Oct 19, 2024', }, { sku: 'SKU-1638', productName: 'Standing Desk Frame', stockLevel: 5, category: 'Furniture', status: 'on-hold', unitPrice: '$449.00', lastRestocked: 'Oct 10, 2024', }, { sku: 'SKU-5529', productName: 'Laptop Stand Aluminum', stockLevel: 178, category: 'Accessories', status: 'active', unitPrice: '$45.99', lastRestocked: 'Oct 17, 2024', }, { sku: 'SKU-4817', productName: 'Mechanical Keyboard RGB', stockLevel: 0, category: 'Electronics', status: 'discontinued', unitPrice: '$129.99', lastRestocked: 'Oct 05, 2024', }, ]; function getStatusBadge(status: Status) { switch (status) { case 'active': return ( Active ); case 'pending': return ( Pending ); case 'discontinued': return ( Discontinued ); case 'on-hold': return ( On Hold ); default: return null; } } export default function Table03() { const [selectedCategory, setSelectedCategory] = useState('all'); const filteredData = data.filter((item) => { const categoryMatch = selectedCategory === 'all' || item.category === selectedCategory; return categoryMatch; }); const uniqueCategories = Array.from( new Set(data.map((item) => item.category)) ); return (

Product Inventory

Track and manage product stock levels across all warehouse locations.

SKU Product Name Category Status Unit Price Last Restocked {filteredData.length > 0 ? ( filteredData.map((item) => ( {item.sku} {item.productName} {item.category} {getStatusBadge(item.status)} {item.unitPrice} {item.lastRestocked} )) ) : ( No products found matching the selected filters. )}

); }