Add inferred product classification

src/pages/ProductDetails.tsx

@@ -4,12 +4,14 @@ import { Package, DollarSign, ReceiptText, Warehouse } from 'lucide-react';
 import { AreaChart, Area, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';
 import BackButton from '../components/BackButton';
 import DateRangePicker from '../components/DateRangePicker';
+import ProductTypeBadge from '../components/ProductTypeBadge';
 import RefreshStatus from '../components/RefreshStatus';
 import type { DateRange, ProductDetailsAnalytics } from '../types';
 import { fetchProductDetailsAnalytics } from '../dataService';
 import { parseProductName } from '../productParsing';
 import { formatColorLabel } from '../displayFormatters';
 import { averageRecentValues, formatDateBucketLabel, formatDateBucketLongLabel, getAutoDateBucket, getMovingAverageWindow, getRangeDayCount, getDateBucketKey, type DateBucket } from '../chartUtils';
+import { classifyProductType, getProductTypeConfig } from '../productClassification';
 
 const CHART_GRID_COLOR = 'var(--chart-grid)';
 const CHART_AXIS_COLOR = 'var(--chart-axis)';
@@ -181,6 +183,8 @@ const ProductDetails = () => {
   }
 
   const { productInfo, chartData, totalSold, totalRevenue, totalOrders = 0, averageTicket = 0, variantBreakdown = [] } = details;
+  const productType = classifyProductType(productInfo.name);
+  const productTypeConfig = getProductTypeConfig(productType);
   const isRefreshing = isLoading && Boolean(details);
   const isSingleDayRange = formatDateKey(dateRange.start) === formatDateKey(dateRange.end);
   const isHourlyChart = isSingleDayRange && chartData.some(point => /h$|:/.test(point.date));
@@ -292,6 +296,10 @@ const ProductDetails = () => {
             <div>
               <div className="text-[10px] font-bold text-zinc-400 dark:text-dark-muted uppercase tracking-widest">ID: #{productInfo.id}</div>
               <h1 className="text-2xl font-bold text-zinc-900 dark:text-dark-text">{productInfo.name}</h1>
+              <div className="mt-2 flex flex-wrap items-center gap-2">
+                <ProductTypeBadge type={productType} />
+                <span className="text-xs font-semibold text-dark-muted">{productTypeConfig.description}</span>
+              </div>
             </div>
           </div>
         </div>