diff --git a/CLAUDE.md b/CLAUDE.md index 211dd0c..cdeb895 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -1,3 +1,4 @@ * Avoid using glob tool for search as it may not work properly on this codebase. Search using bash instead. * If you use the task tool to have an agent investigate something, make sure to let it know to avoid using glob -* Prefer solving tasks in a single session. Only spawn subagents for genuinely independent workstreams. \ No newline at end of file +* Prefer solving tasks in a single session. Only spawn subagents for genuinely independent workstreams. +* The postgres/query tool is not working and not connected to the current version of the database. If you need to query the database for any reason you can use "ssh netcup" and use psql on the server with inventory_readonly 6D3GUkxuFgi2UghwgnUd \ No newline at end of file diff --git a/inventory-server/scripts/import/products.js b/inventory-server/scripts/import/products.js index fd74a47..e7c6539 100644 --- a/inventory-server/scripts/import/products.js +++ b/inventory-server/scripts/import/products.js @@ -435,7 +435,7 @@ async function materializeCalculations(prodConnection, localConnection, incremen LEFT JOIN product_categories pc4 ON p.artist = pc4.cat_id LEFT JOIN product_last_sold pls ON p.pid = pls.pid WHERE ${incrementalUpdate ? ` - p.date_created > ? OR + p.date_created >= DATE(?) OR p.stamp > ? OR ci.stamp > ? OR pcp.date_deactive > ? OR diff --git a/inventory-server/src/routes/metrics.js b/inventory-server/src/routes/metrics.js index 01924fa..9122d21 100644 --- a/inventory-server/src/routes/metrics.js +++ b/inventory-server/src/routes/metrics.js @@ -1,6 +1,5 @@ const express = require('express'); const router = express.Router(); -const { Pool } = require('pg'); // Assuming pg driver // --- Configuration & Helpers --- @@ -255,32 +254,98 @@ const SPECIAL_SORT_COLUMNS = { }; // Status priority for sorting (lower number = higher priority) +// Values must match what's stored in the DB status column const STATUS_PRIORITY = { 'Critical': 1, 'At Risk': 2, - 'Reorder': 3, - 'Overstocked': 4, + 'Reorder Soon': 3, + 'Overstock': 4, 'Healthy': 5, 'New': 6 - // Any other status will be sorted alphabetically after these }; // Get database column name from frontend column name +// Returns null for unknown keys so callers can skip them function getDbColumn(frontendColumn) { - return COLUMN_MAP[frontendColumn] || 'pm.title'; // Default to title if not found + return COLUMN_MAP[frontendColumn] || null; } -// Get column type for proper sorting +// Get column type by searching through the COLUMN_TYPES arrays function getColumnType(frontendColumn) { - return COLUMN_TYPES[frontendColumn] || 'string'; + if (COLUMN_TYPES.numeric.includes(frontendColumn)) return 'numeric'; + if (COLUMN_TYPES.date.includes(frontendColumn)) return 'date'; + if (COLUMN_TYPES.boolean.includes(frontendColumn)) return 'boolean'; + return 'string'; } // --- Route Handlers --- +// GET /metrics/summary - Aggregate KPI summary for the current view +router.get('/summary', async (req, res) => { + const pool = req.app.locals.pool; + + try { + // Build WHERE clause from same filters as main list endpoint + const conditions = ['pm.is_visible = true', 'pm.is_replenishable = true']; + const params = []; + let paramCounter = 1; + + // Handle showNonReplenishable + if (req.query.showNonReplenishable === 'true') { + // Remove the is_replenishable condition + conditions.pop(); + } + // Handle showInvisible + if (req.query.showInvisible === 'true') { + conditions.shift(); // Remove is_visible condition + } + + // Handle stock_status filter + if (req.query.stock_status) { + conditions.push(`pm.status = $${paramCounter++}`); + params.push(req.query.stock_status); + } + + const whereClause = conditions.length > 0 ? `WHERE ${conditions.join(' AND ')}` : ''; + + const sql = ` + SELECT + COUNT(*)::int AS total_products, + COALESCE(SUM(pm.current_stock_cost), 0)::numeric(15,2) AS total_stock_value, + COALESCE(SUM(pm.current_stock_retail), 0)::numeric(15,2) AS total_stock_retail, + COUNT(*) FILTER (WHERE pm.status IN ('Critical', 'Reorder Soon'))::int AS needs_reorder_count, + COALESCE(SUM(pm.replenishment_cost) FILTER (WHERE pm.replenishment_units > 0), 0)::numeric(15,2) AS total_replenishment_cost, + COALESCE(SUM(pm.replenishment_units) FILTER (WHERE pm.replenishment_units > 0), 0)::int AS total_replenishment_units, + COALESCE(SUM(pm.overstocked_cost) FILTER (WHERE pm.overstocked_units > 0), 0)::numeric(15,2) AS total_overstock_value, + COALESCE(SUM(pm.overstocked_units) FILTER (WHERE pm.overstocked_units > 0), 0)::int AS total_overstock_units, + COALESCE(SUM(pm.on_order_qty), 0)::int AS total_on_order_units, + COALESCE(SUM(pm.on_order_cost), 0)::numeric(15,2) AS total_on_order_cost, + COALESCE(AVG(pm.stock_cover_in_days) FILTER (WHERE pm.stock_cover_in_days IS NOT NULL AND pm.current_stock > 0), 0)::numeric(10,1) AS avg_stock_cover_days, + COUNT(*) FILTER (WHERE pm.current_stock = 0)::int AS out_of_stock_count, + COALESCE(SUM(pm.forecast_lost_revenue) FILTER (WHERE pm.forecast_lost_revenue > 0), 0)::numeric(15,2) AS total_lost_revenue, + COALESCE(SUM(pm.forecast_lost_sales_units) FILTER (WHERE pm.forecast_lost_sales_units > 0), 0)::int AS total_lost_sales_units, + COUNT(*) FILTER (WHERE pm.status = 'Critical')::int AS critical_count, + COUNT(*) FILTER (WHERE pm.status = 'Reorder Soon')::int AS reorder_count, + COUNT(*) FILTER (WHERE pm.status = 'At Risk')::int AS at_risk_count, + COUNT(*) FILTER (WHERE pm.status = 'Overstock')::int AS overstock_count, + COUNT(*) FILTER (WHERE pm.status = 'Healthy')::int AS healthy_count, + COUNT(*) FILTER (WHERE pm.status = 'New')::int AS new_count + FROM public.product_metrics pm + ${whereClause} + `; + + const { rows } = await pool.query(sql, params); + res.json(rows[0]); + + } catch (error) { + console.error('Error fetching metrics summary:', error); + res.status(500).json({ error: 'Failed to fetch metrics summary.' }); + } +}); + // GET /metrics/filter-options - Provide distinct values for filter dropdowns router.get('/filter-options', async (req, res) => { const pool = req.app.locals.pool; - console.log('GET /metrics/filter-options'); try { const [vendorRes, brandRes, abcClassRes] = await Promise.all([ pool.query(`SELECT DISTINCT vendor FROM public.product_metrics WHERE vendor IS NOT NULL AND vendor <> '' ORDER BY vendor`), @@ -304,7 +369,6 @@ router.get('/filter-options', async (req, res) => { // GET /metrics/ - List all product metrics with filtering, sorting, pagination router.get('/', async (req, res) => { const pool = req.app.locals.pool; - console.log('GET /metrics received query:', req.query); try { // --- Pagination --- @@ -317,11 +381,9 @@ router.get('/', async (req, res) => { // --- Sorting --- const sortQueryKey = req.query.sort || 'title'; // Default sort field key - const dbColumn = getDbColumn(sortQueryKey); + const sortDbColumn = getDbColumn(sortQueryKey) || 'pm.title'; const columnType = getColumnType(sortQueryKey); - console.log(`Sorting request: ${sortQueryKey} -> ${dbColumn} (${columnType})`); - const sortDirection = req.query.order?.toLowerCase() === 'desc' ? 'DESC' : 'ASC'; // Always put nulls last regardless of sort direction or column type @@ -332,29 +394,29 @@ router.get('/', async (req, res) => { if (SPECIAL_SORT_COLUMNS[sortQueryKey] === 'abs') { // Sort by absolute value for columns where negative values matter - orderByClause = `ABS(${dbColumn}::numeric) ${sortDirection} ${nullsOrder}`; - } else if (columnType === 'number' || SPECIAL_SORT_COLUMNS[sortQueryKey] === true) { + orderByClause = `ABS(${sortDbColumn}::numeric) ${sortDirection} ${nullsOrder}`; + } else if (columnType === 'numeric' || SPECIAL_SORT_COLUMNS[sortQueryKey] === true) { // For numeric columns, cast to numeric to ensure proper sorting - orderByClause = `${dbColumn}::numeric ${sortDirection} ${nullsOrder}`; + orderByClause = `${sortDbColumn}::numeric ${sortDirection} ${nullsOrder}`; } else if (columnType === 'date') { // For date columns, cast to timestamp to ensure proper sorting - orderByClause = `CASE WHEN ${dbColumn} IS NULL THEN 1 ELSE 0 END, ${dbColumn}::timestamp ${sortDirection}`; - } else if (columnType === 'status' || SPECIAL_SORT_COLUMNS[sortQueryKey] === 'priority') { + orderByClause = `CASE WHEN ${sortDbColumn} IS NULL THEN 1 ELSE 0 END, ${sortDbColumn}::timestamp ${sortDirection}`; + } else if (SPECIAL_SORT_COLUMNS[sortQueryKey] === 'priority') { // Special handling for status column, using priority for known statuses orderByClause = ` - CASE WHEN ${dbColumn} IS NULL THEN 999 - WHEN ${dbColumn} = 'Critical' THEN 1 - WHEN ${dbColumn} = 'At Risk' THEN 2 - WHEN ${dbColumn} = 'Reorder' THEN 3 - WHEN ${dbColumn} = 'Overstocked' THEN 4 - WHEN ${dbColumn} = 'Healthy' THEN 5 - WHEN ${dbColumn} = 'New' THEN 6 + CASE WHEN ${sortDbColumn} IS NULL THEN 999 + WHEN ${sortDbColumn} = 'Critical' THEN 1 + WHEN ${sortDbColumn} = 'At Risk' THEN 2 + WHEN ${sortDbColumn} = 'Reorder Soon' THEN 3 + WHEN ${sortDbColumn} = 'Overstock' THEN 4 + WHEN ${sortDbColumn} = 'Healthy' THEN 5 + WHEN ${sortDbColumn} = 'New' THEN 6 ELSE 100 END ${sortDirection} ${nullsOrder}, - ${dbColumn} ${sortDirection}`; + ${sortDbColumn} ${sortDirection}`; } else { // For string and boolean columns, no special casting needed - orderByClause = `CASE WHEN ${dbColumn} IS NULL THEN 1 ELSE 0 END, ${dbColumn} ${sortDirection}`; + orderByClause = `CASE WHEN ${sortDbColumn} IS NULL THEN 1 ELSE 0 END, ${sortDbColumn} ${sortDirection}`; } // --- Filtering --- @@ -389,26 +451,26 @@ router.get('/', async (req, res) => { let operator = '='; // Default operator let value = req.query[key]; - // Check for operator suffixes (e.g., sales30d_gt, title_like) - const operatorMatch = key.match(/^(.*)_(eq|ne|gt|gte|lt|lte|like|ilike|between|in)$/); + // Check for operator suffixes (e.g., sales30d_gt, title_ilike, isVisible_is_true) + const operatorMatch = key.match(/^(.*)_(eq|ne|gt|gte|lt|lte|like|ilike|starts_with|ends_with|not_contains|between|in|is_empty|is_not_empty|is_true|is_false)$/); if (operatorMatch) { filterKey = operatorMatch[1]; // e.g., "sales30d" operator = operatorMatch[2]; // e.g., "gt" } // Get the database column for this filter key - const dbColumn = getDbColumn(filterKey); + const filterDbColumn = getDbColumn(filterKey); const valueType = getColumnType(filterKey); - - if (!dbColumn) { + + if (!filterDbColumn) { console.warn(`Invalid filter key ignored: ${key}`); continue; // Skip if the key doesn't map to a known column } // --- Build WHERE clause fragment --- + let needsParam = true; // Declared outside try so catch can access it try { let conditionFragment = ''; - let needsParam = true; // Most operators need a parameter switch (operator.toLowerCase()) { case 'eq': operator = '='; break; @@ -417,48 +479,65 @@ router.get('/', async (req, res) => { case 'gte': operator = '>='; break; case 'lt': operator = '<'; break; case 'lte': operator = '<='; break; - case 'like': operator = 'LIKE'; value = `%${value}%`; break; // Add wildcards for LIKE - case 'ilike': operator = 'ILIKE'; value = `%${value}%`; break; // Add wildcards for ILIKE + case 'like': operator = 'ILIKE'; value = `%${value}%`; break; + case 'ilike': operator = 'ILIKE'; value = `%${value}%`; break; + case 'starts_with': operator = 'ILIKE'; value = `${value}%`; break; + case 'ends_with': operator = 'ILIKE'; value = `%${value}`; break; + case 'not_contains': operator = 'NOT ILIKE'; value = `%${value}%`; break; + case 'is_empty': + conditionFragment = `(${filterDbColumn} IS NULL OR ${filterDbColumn}::text = '')`; + needsParam = false; + break; + case 'is_not_empty': + conditionFragment = `(${filterDbColumn} IS NOT NULL AND ${filterDbColumn}::text <> '')`; + needsParam = false; + break; + case 'is_true': + conditionFragment = `${filterDbColumn} = true`; + needsParam = false; + break; + case 'is_false': + conditionFragment = `${filterDbColumn} = false`; + needsParam = false; + break; case 'between': const [val1, val2] = String(value).split(','); if (val1 !== undefined && val2 !== undefined) { - conditionFragment = `${dbColumn} BETWEEN $${paramCounter++} AND $${paramCounter++}`; + conditionFragment = `${filterDbColumn} BETWEEN $${paramCounter++} AND $${paramCounter++}`; params.push(parseValue(val1, valueType), parseValue(val2, valueType)); - needsParam = false; // Params added manually + needsParam = false; } else { console.warn(`Invalid 'between' value for ${key}: ${value}`); - continue; // Skip this filter + continue; } break; case 'in': const inValues = String(value).split(','); if (inValues.length > 0) { const placeholders = inValues.map(() => `$${paramCounter++}`).join(', '); - conditionFragment = `${dbColumn} IN (${placeholders})`; - params.push(...inValues.map(v => parseValue(v, valueType))); // Add all parsed values - needsParam = false; // Params added manually + conditionFragment = `${filterDbColumn} IN (${placeholders})`; + params.push(...inValues.map(v => parseValue(v, valueType))); + needsParam = false; } else { console.warn(`Invalid 'in' value for ${key}: ${value}`); - continue; // Skip this filter + continue; } break; - // Add other operators as needed (IS NULL, IS NOT NULL, etc.) - case '=': // Keep default '=' - default: operator = '='; break; // Ensure default is handled + case '=': + default: operator = '='; break; } if (needsParam) { - conditionFragment = `${dbColumn} ${operator} $${paramCounter++}`; + conditionFragment = `${filterDbColumn} ${operator} $${paramCounter++}`; params.push(parseValue(value, valueType)); } if (conditionFragment) { - conditions.push(`(${conditionFragment})`); // Wrap condition in parentheses + conditions.push(`(${conditionFragment})`); } } catch (parseError) { console.warn(`Skipping filter for key "${key}" due to parsing error: ${parseError.message}`); - // Decrement counter if param wasn't actually used due to error if (needsParam) paramCounter--; } } @@ -466,13 +545,8 @@ router.get('/', async (req, res) => { // --- Construct and Execute Queries --- const whereClause = conditions.length > 0 ? `WHERE ${conditions.join(' AND ')}` : ''; - // Debug log of conditions and parameters - console.log('Constructed WHERE conditions:', conditions); - console.log('Parameters:', params); - // Count Query const countSql = `SELECT COUNT(*) AS total FROM public.product_metrics pm ${whereClause}`; - console.log('Executing Count Query:', countSql, params); const countPromise = pool.query(countSql, params); // Data Query (Select all columns from metrics table for now) @@ -484,16 +558,6 @@ router.get('/', async (req, res) => { LIMIT $${paramCounter} OFFSET $${paramCounter + 1} `; const dataParams = [...params, limit, offset]; - - // Log detailed query information for debugging - console.log('Executing Data Query:'); - console.log(' - Sort Column:', dbColumn); - console.log(' - Column Type:', columnType); - console.log(' - Sort Direction:', sortDirection); - console.log(' - Order By Clause:', orderByClause); - console.log(' - Full SQL:', dataSql); - console.log(' - Parameters:', dataParams); - const dataPromise = pool.query(dataSql, dataParams); // Execute queries in parallel @@ -501,7 +565,6 @@ router.get('/', async (req, res) => { const total = parseInt(countResult.rows[0].total, 10); const metrics = dataResult.rows; - console.log(`Total: ${total}, Fetched: ${metrics.length} for page ${page}`); // --- Respond --- res.json({ @@ -535,7 +598,6 @@ router.get('/:pid', async (req, res) => { return res.status(400).json({ error: 'Invalid Product ID.' }); } - console.log(`GET /metrics/${pid}`); try { const { rows } = await pool.query( `SELECT * FROM public.product_metrics WHERE pid = $1`, @@ -543,11 +605,8 @@ router.get('/:pid', async (req, res) => { ); if (rows.length === 0) { - console.log(`Metrics not found for PID: ${pid}`); return res.status(404).json({ error: 'Metrics not found for this product.' }); } - - console.log(`Metrics found for PID: ${pid}`); // Data is pre-calculated, return the first (only) row res.json(rows[0]); @@ -566,7 +625,7 @@ function parseValue(value, type) { if (value === null || value === undefined || value === '') return null; // Allow empty strings? Or handle differently? switch (type) { - case 'number': + case 'numeric': const num = parseFloat(value); if (isNaN(num)) throw new Error(`Invalid number format: "${value}"`); return num; diff --git a/inventory-server/src/routes/products.js b/inventory-server/src/routes/products.js index 6347c54..01a862e 100644 --- a/inventory-server/src/routes/products.js +++ b/inventory-server/src/routes/products.js @@ -731,32 +731,33 @@ router.get('/:id/time-series', async (req, res) => { LIMIT 10 `, [id]); - // Get recent purchase orders with detailed status + // Get recent purchase orders with received quantities from the receivings table const { rows: recentPurchases } = await pool.query(` - SELECT - TO_CHAR(date, 'YYYY-MM-DD') as date, - TO_CHAR(expected_date, 'YYYY-MM-DD') as expected_date, - TO_CHAR(received_date, 'YYYY-MM-DD') as received_date, - po_id, - ordered, - received, - status, - receiving_status, - cost_price, - notes, - CASE - WHEN received_date IS NOT NULL THEN - (received_date - date) - WHEN expected_date < CURRENT_DATE AND status < $2 THEN - (CURRENT_DATE - expected_date) - ELSE NULL + SELECT + TO_CHAR(po.date, 'YYYY-MM-DD') as date, + TO_CHAR(po.expected_date, 'YYYY-MM-DD') as expected_date, + TO_CHAR(MAX(r.received_date), 'YYYY-MM-DD') as received_date, + po.po_id, + po.ordered, + COALESCE(SUM(r.qty_each), 0)::integer as received, + po.status, + po.po_cost_price as cost_price, + po.notes, + CASE + WHEN MAX(r.received_date) IS NOT NULL THEN + EXTRACT(DAY FROM MAX(r.received_date) - po.date)::integer + WHEN po.expected_date < CURRENT_DATE AND po.status NOT IN ('done', 'canceled') THEN + (CURRENT_DATE - po.expected_date) + ELSE NULL END as lead_time_days - FROM purchase_orders - WHERE pid = $1 - AND status != $3 - ORDER BY date DESC + FROM purchase_orders po + LEFT JOIN receivings r ON r.receiving_id = po.po_id AND r.pid = po.pid AND r.status != 'canceled' + WHERE po.pid = $1 + AND po.status != 'canceled' + GROUP BY po.id, po.po_id, po.date, po.expected_date, po.ordered, po.status, po.po_cost_price, po.notes + ORDER BY po.date DESC LIMIT 10 - `, [id, PurchaseOrderStatus.ReceivingStarted, PurchaseOrderStatus.Canceled]); + `, [id]); res.json({ monthly_sales: formattedMonthlySales, @@ -772,8 +773,7 @@ router.get('/:id/time-series', async (req, res) => { ...po, ordered: parseInt(po.ordered), received: parseInt(po.received), - status: parseInt(po.status), - receiving_status: parseInt(po.receiving_status), + status: po.status, // Text-based status (e.g., 'done', 'ordered', 'receiving_started') cost_price: parseFloat(po.cost_price), lead_time_days: po.lead_time_days ? parseInt(po.lead_time_days) : null })) diff --git a/inventory/src/components/newsletter/RecommendationTable.tsx b/inventory/src/components/newsletter/RecommendationTable.tsx index f3f2e54..a6a4d60 100644 --- a/inventory/src/components/newsletter/RecommendationTable.tsx +++ b/inventory/src/components/newsletter/RecommendationTable.tsx @@ -381,8 +381,8 @@ export function RecommendationTable({ category }: RecommendationTableProps) { {p.current_stock ?? 0} - {p.on_order_qty > 0 && ( - (+{p.on_order_qty}) + {p.preorder_count > 0 && ( + (+{p.preorder_count}) )} {p.sales_7d ?? 0} diff --git a/inventory/src/components/products/ProductDetail.tsx b/inventory/src/components/products/ProductDetail.tsx index 10d4038..959fbfe 100644 --- a/inventory/src/components/products/ProductDetail.tsx +++ b/inventory/src/components/products/ProductDetail.tsx @@ -6,19 +6,20 @@ import { Skeleton } from "@/components/ui/skeleton"; import { Card, CardHeader, CardTitle, CardContent, CardDescription } from "@/components/ui/card"; import { Button } from "@/components/ui/button"; import { X } from "lucide-react"; -import { ProductMetric, ProductStatus } from "@/types/products"; -import { - getStatusBadge, - formatCurrency, - formatNumber, - formatPercentage, - formatDays, - formatDate, +import { ProductMetric } from "@/types/products"; +import { + formatCurrency, + formatNumber, + formatPercentage, + formatDays, + formatDate, formatBoolean } from "@/utils/productUtils"; +import { StatusBadge } from "@/components/products/StatusBadge"; +import { transformMetricsRow } from "@/utils/transformUtils"; import { cn } from "@/lib/utils"; import config from "@/config"; -import { ResponsiveContainer, BarChart, Bar, LineChart, Line, XAxis, YAxis, Tooltip, CartesianGrid, Legend } from "recharts"; +import { ResponsiveContainer, LineChart, Line, XAxis, YAxis, Tooltip, CartesianGrid, Legend } from "recharts"; import { Badge } from "@/components/ui/badge"; import { Table, TableHeader, TableRow, TableHead, TableBody, TableCell } from "@/components/ui/table"; @@ -30,8 +31,7 @@ interface ProductPurchaseOrder { receivedDate: string | null; ordered: number; received: number; - status: number; - receivingStatus: number; + status: string; costPrice: number; notes: string | null; leadTimeDays: number | null; @@ -42,7 +42,6 @@ interface ProductTimeSeries { month: string; sales: number; revenue: number; - profit: number; }[]; recentPurchases: ProductPurchaseOrder[]; } @@ -63,36 +62,7 @@ export function ProductDetail({ productId, onClose }: ProductDetailProps) { throw new Error(`Failed to fetch product details (${response.status}): ${errorData.error || 'Server error'}`); } const rawData = await response.json(); - - // Transform snake_case to camelCase and convert string numbers to actual numbers - const transformed: any = {}; - Object.entries(rawData).forEach(([key, value]) => { - // Better handling of snake_case to camelCase conversion - let camelKey = key; - - // First handle cases like sales_7d -> sales7d - camelKey = camelKey.replace(/_(\d+[a-z])/g, '$1'); - - // Then handle regular snake_case -> camelCase - camelKey = camelKey.replace(/_([a-z])/g, (_, p1) => p1.toUpperCase()); - - // Convert numeric strings to actual numbers - if (typeof value === 'string' && !isNaN(Number(value)) && - !key.toLowerCase().includes('date') && key !== 'sku' && key !== 'title' && - key !== 'brand' && key !== 'vendor') { - transformed[camelKey] = Number(value); - } else { - transformed[camelKey] = value; - } - }); - - // Ensure pid is a number - transformed.pid = typeof transformed.pid === 'string' ? - parseInt(transformed.pid, 10) : transformed.pid; - - console.log("Transformed product data:", transformed); - - return transformed; + return transformMetricsRow(rawData) as ProductMetric; }, enabled: !!productId, // Only run query when productId is truthy }); @@ -108,48 +78,58 @@ export function ProductDetail({ productId, onClose }: ProductDetailProps) { throw new Error(`Failed to fetch time series data (${response.status}): ${errorData.error || 'Server error'}`); } const data = await response.json(); - - // Ensure the monthly_sales data is properly formatted for charts - const formattedMonthlySales = data.monthly_sales.map((item: any) => ({ + + // Map backend field names (units_sold) to frontend chart keys (sales) + // Reverse from DESC to ASC so the chart shows oldest-to-newest (left-to-right) + const formattedMonthlySales = [...(data.monthly_sales || [])].reverse().map((item: any) => ({ month: item.month, - sales: Number(item.sales), - revenue: Number(item.revenue), - profit: Number(item.profit || 0) + sales: Number(item.units_sold || 0), + revenue: Number(item.revenue || 0), })); - + + // Transform snake_case PO fields to camelCase expected by ProductPurchaseOrder + const formattedPurchases: ProductPurchaseOrder[] = (data.recent_purchases || []).map((po: any) => ({ + poId: po.po_id, + date: po.date, + expectedDate: po.expected_date, + receivedDate: po.received_date, + ordered: po.ordered, + received: po.received, + status: po.status, + costPrice: po.cost_price, + notes: po.notes, + leadTimeDays: po.lead_time_days, + })); + return { monthlySales: formattedMonthlySales, - recentPurchases: data.recent_purchases || [] + recentPurchases: formattedPurchases, }; }, enabled: !!productId, // Only run query when productId is truthy }); - // Get PO status names - const getPOStatusName = (status: number): string => { - const statusMap: {[key: number]: string} = { - 0: 'Canceled', - 1: 'Created', - 10: 'Ready to Send', - 11: 'Ordered', - 12: 'Preordered', - 13: 'Electronically Sent', - 15: 'Receiving Started', - 50: 'Completed' + // Get PO status display names (DB stores text statuses) + const getPOStatusName = (status: string): string => { + const statusMap: Record = { + canceled: 'Canceled', + created: 'Created', + ordered: 'Ordered', + electronically_sent: 'Electronically Sent', + receiving_started: 'Receiving Started', + done: 'Completed', }; return statusMap[status] || 'Unknown'; }; // Get status badge color class - const getStatusBadgeClass = (status: number): string => { - if (status === 0) return "bg-destructive text-destructive-foreground"; // Canceled - if (status === 50) return "bg-green-600 text-white"; // Completed - if (status >= 15) return "bg-amber-500 text-black"; // In progress - return "bg-blue-600 text-white"; // Other statuses + const getStatusBadgeClass = (status: string): string => { + if (status === 'canceled') return "bg-destructive text-destructive-foreground"; + if (status === 'done') return "bg-green-600 text-white"; + if (status === 'receiving_started') return "bg-amber-500 text-black"; + return "bg-blue-600 text-white"; // created, ordered, electronically_sent }; - const isLoading = isLoadingProduct || isLoadingTimeSeries; - if (!productId) return null; // Don't render anything if no ID return ( @@ -160,7 +140,7 @@ export function ProductDetail({ productId, onClose }: ProductDetailProps) { {/* Header */}
- {isLoading ? ( + {isLoadingProduct ? ( ) : product?.imageUrl ? (
@@ -171,14 +151,23 @@ export function ProductDetail({ productId, onClose }: ProductDetailProps) { )}
- {isLoading ? : product?.title || 'Product Detail'} + {isLoadingProduct ? : product?.title || 'Product Detail'} - {isLoading ? : product?.sku || ''} + {isLoadingProduct ? : ( + <> + {product?.sku || ''} + {product?.lastCalculated && ( + + · Updated {formatDate(product.lastCalculated)} + + )} + + )} {/* Show Status Badge */} - {!isLoading && product && ( -
+ {!isLoadingProduct && product && ( +
)}
@@ -189,7 +178,7 @@ export function ProductDetail({ productId, onClose }: ProductDetailProps) { {/* Content Area */}
- {isLoading ? ( + {isLoadingProduct ? (
@@ -234,6 +223,15 @@ export function ProductDetail({ productId, onClose }: ProductDetailProps) { + + Customer Engagement + + + + + + + @@ -248,7 +246,7 @@ export function ProductDetail({ productId, onClose }: ProductDetailProps) { Stock Position - } /> +
} /> @@ -264,6 +262,15 @@ export function ProductDetail({ productId, onClose }: ProductDetailProps) { + + Service Level (30 Days) + + + + + + + @@ -288,36 +295,29 @@ export function ProductDetail({ productId, onClose }: ProductDetailProps) { - { - if (name === 'revenue' || name === 'profit') { + if (name === 'Revenue') { return [formatCurrency(value), name]; } return [value, name]; }} /> - - - @@ -342,59 +342,16 @@ export function ProductDetail({ productId, onClose }: ProductDetailProps) { - {/* Inventory KPIs Chart */} - - Key Inventory Metrics - - - {isLoading ? ( - - ) : ( - - - - - - { - if (name === 'Sell Through %' || name === 'Margin %') { - return [`${value.toFixed(1)}%`, name]; - } - return [value.toFixed(2), name]; - }} - /> - - - - )} + Growth Analysis + + + + + - + Inventory Performance (30 Days) @@ -503,16 +460,18 @@ export function ProductDetail({ productId, onClose }: ProductDetailProps) { ) : 'N/A' } /> - { - const totalOrdered = timeSeriesData.recentPurchases.reduce((acc, po) => acc + po.ordered, 0); - const totalReceived = timeSeriesData.recentPurchases.reduce((acc, po) => acc + po.received, 0); - return totalOrdered > 0 ? formatPercentage(totalReceived / totalOrdered) : 'N/A'; + // Only include POs where receiving has started or completed for an accurate rate + const receivingPOs = timeSeriesData.recentPurchases.filter(po => ['receiving_started', 'done'].includes(po.status)); + const totalOrdered = receivingPOs.reduce((acc, po) => acc + po.ordered, 0); + const totalReceived = receivingPOs.reduce((acc, po) => acc + po.received, 0); + return totalOrdered > 0 ? formatPercentage((totalReceived / totalOrdered) * 100) : 'N/A'; })() : 'N/A' - } + } /> po.status < 50 && po.receivingStatus < 40 + po => !['done', 'canceled'].includes(po.status) ).length ) : 'N/A' } @@ -584,6 +543,29 @@ export function ProductDetail({ productId, onClose }: ProductDetailProps) { + + Demand & Seasonality + + + + + + + + + + + Lifetime & First Period + + + + + + + + + + ) : null} diff --git a/inventory/src/components/products/ProductFilters.tsx b/inventory/src/components/products/ProductFilters.tsx index 2a6788c..ae0dec9 100644 --- a/inventory/src/components/products/ProductFilters.tsx +++ b/inventory/src/components/products/ProductFilters.tsx @@ -19,14 +19,21 @@ import { import { Input } from "@/components/ui/input"; import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"; import { Skeleton } from "@/components/ui/skeleton"; -import { ProductFilterOptions, ProductMetricColumnKey } from "@/types/products"; +import { + ProductFilterOptions, + ProductMetricColumnKey, + ComparisonOperator, + ActiveFilterValue, + FilterValue, +} from "@/types/products"; // Define operators for different filter types const STRING_OPERATORS: ComparisonOperator[] = ["contains", "equals", "starts_with", "ends_with", "not_contains", "is_empty", "is_not_empty"]; const NUMBER_OPERATORS: ComparisonOperator[] = ["=", ">", ">=", "<", "<=", "between", "is_empty", "is_not_empty"]; const BOOLEAN_OPERATORS: ComparisonOperator[] = ["is_true", "is_false"]; const DATE_OPERATORS: ComparisonOperator[] = ["=", ">", ">=", "<", "<=", "between", "is_empty", "is_not_empty"]; -const SELECT_OPERATORS: ComparisonOperator[] = ["=", "!=", "in", "not_in", "is_empty", "is_not_empty"]; +// Select filters use direct value selection (no operator UI), so only equality is applied +const SELECT_OPERATORS: ComparisonOperator[] = ["="]; interface FilterOption { id: ProductMetricColumnKey | 'search'; @@ -37,21 +44,6 @@ interface FilterOption { operators?: ComparisonOperator[]; } -type FilterValue = string | number | boolean; - -export type ComparisonOperator = - | "=" | "!=" | ">" | ">=" | "<" | "<=" | "between" - | "contains" | "equals" | "starts_with" | "ends_with" | "not_contains" - | "in" | "not_in" | "is_empty" | "is_not_empty" | "is_true" | "is_false"; - -// Support both simple values and complex ones with operators -export type ActiveFilterValue = FilterValue | FilterValueWithOperator; - -interface FilterValueWithOperator { - value: FilterValue | string[] | number[]; - operator: ComparisonOperator; -} - interface ActiveFilterDisplay { id: string; label: string; @@ -76,8 +68,8 @@ const BASE_FILTER_OPTIONS: FilterOption[] = [ { id: 'status', label: 'Status', type: 'select', group: 'Basic Info', operators: SELECT_OPERATORS, options: [ { value: 'Critical', label: 'Critical' }, { value: 'At Risk', label: 'At Risk' }, - { value: 'Reorder', label: 'Reorder' }, - { value: 'Overstocked', label: 'Overstocked' }, + { value: 'Reorder Soon', label: 'Reorder Soon' }, + { value: 'Overstock', label: 'Overstock' }, { value: 'Healthy', label: 'Healthy' }, { value: 'New', label: 'New' }, ]}, @@ -347,7 +339,7 @@ export function ProductFilters({ if (!selectedFilter) return; let valueToApply: FilterValue | [string, string]; // Use string for dates - let requiresOperator = selectedFilter.type === 'number' || selectedFilter.type === 'date'; + let requiresOperator = selectedFilter.type === 'number' || selectedFilter.type === 'date' || selectedFilter.type === 'text'; if (selectedOperator === 'between') { if (!inputValue || !inputValue2) return; // Need both values @@ -357,9 +349,9 @@ export function ProductFilters({ const numVal = parseFloat(inputValue); if (isNaN(numVal)) return; // Invalid number valueToApply = numVal; - } else if (selectedFilter.type === 'boolean' || selectedFilter.type === 'select') { + } else if (selectedFilter.type === 'select') { valueToApply = inputValue; // Value set directly via CommandItem select - requiresOperator = false; // Usually simple equality for selects/booleans + requiresOperator = false; // Usually simple equality for selects } else { // Text or Date (not between) if (!inputValue.trim()) return; valueToApply = inputValue.trim(); @@ -404,9 +396,15 @@ export function ProductFilters({ if (!option) return String(value); // Fallback if (typeof value === 'object' && value !== null && 'operator' in value) { + // Boolean operators get friendly display + if (value.operator === 'is_true') return `${option.label}: Yes`; + if (value.operator === 'is_false') return `${option.label}: No`; + if (value.operator === 'is_empty') return `${option.label}: is empty`; + if (value.operator === 'is_not_empty') return `${option.label}: is not empty`; + const opLabel = value.operator === '=' ? '' : `${value.operator} `; if (value.operator === 'between' && Array.isArray(value.value)) { - return `${option.label}: ${opLabel} ${value.value[0]} and ${value.value[1]}`; + return `${option.label}: ${value.value[0]} to ${value.value[1]}`; } return `${option.label}: ${opLabel}${value.value}`; } @@ -529,8 +527,8 @@ export function ProductFilters({ ← {selectedFilter.label} - {/* Render Operator Select ONLY if type is number or date */} - {(selectedFilter.type === 'number' || selectedFilter.type === 'date') && renderOperatorSelect()} + {/* Render Operator Select for number, date, and text types */} + {(selectedFilter.type === 'number' || selectedFilter.type === 'date' || selectedFilter.type === 'text') && renderOperatorSelect()} {/* Render Input based on type */}
@@ -606,8 +604,42 @@ export function ProductFilters({ {/* Select and Boolean types are handled via CommandList below */}
- {/* CommandList for Select and Boolean */} - {(selectedFilter.type === 'select' || selectedFilter.type === 'boolean') && ( + {/* Boolean type: show Yes/No buttons */} + {selectedFilter.type === 'boolean' && ( +
+ + +
+ )} + + {/* CommandList for Select type */} + {selectedFilter.type === 'select' && ( = 1_000_000) return `$${(num / 1_000_000).toFixed(1)}M`; + if (num >= 1_000) return `$${(num / 1_000).toFixed(1)}K`; + return `$${num.toFixed(0)}`; +} + +function formatNumber(value: number): string { + return value.toLocaleString(); +} + +function formatDays(value: string | number): string { + const num = typeof value === 'string' ? parseFloat(value) : value; + if (isNaN(num) || num === 0) return '0 days'; + return `${num.toFixed(0)} days`; +} + +interface CardConfig { + label: string; + value: string; + subValue?: string; + icon: any; + iconClassName: string; +} + +function getCardsForView(data: SummaryData, activeView: string): CardConfig[] { + const allCards: Record = { + all: [ + { + label: 'Stock Value', + value: formatCurrency(data.total_stock_value), + subValue: `${formatCurrency(data.total_stock_retail)} retail`, + icon: DollarSign, + iconClassName: 'text-blue-500', + }, + { + label: 'Needs Reorder', + value: formatNumber(data.needs_reorder_count), + subValue: `${formatCurrency(data.total_replenishment_cost)} to replenish`, + icon: AlertTriangle, + iconClassName: 'text-amber-500', + }, + { + label: 'On Order', + value: formatNumber(data.total_on_order_units) + ' units', + subValue: `${formatCurrency(data.total_on_order_cost)} cost`, + icon: Truck, + iconClassName: 'text-indigo-500', + }, + { + label: 'Overstock Value', + value: formatCurrency(data.total_overstock_value), + subValue: `${formatNumber(data.total_overstock_units)} excess units`, + icon: PackageX, + iconClassName: 'text-orange-400', + }, + ], + critical: [ + { + label: 'Out of Stock', + value: formatNumber(data.out_of_stock_count), + subValue: `of ${formatNumber(data.total_products)} products`, + icon: PackageMinus, + iconClassName: 'text-red-500', + }, + { + label: 'Replenishment Needed', + value: formatNumber(data.total_replenishment_units) + ' units', + subValue: `${formatCurrency(data.total_replenishment_cost)} cost`, + icon: ShoppingCart, + iconClassName: 'text-blue-500', + }, + { + label: 'On Order', + value: formatNumber(data.total_on_order_units) + ' units', + subValue: `${formatCurrency(data.total_on_order_cost)} cost`, + icon: Truck, + iconClassName: 'text-indigo-500', + }, + { + label: 'Forecast Lost Sales', + value: formatNumber(data.total_lost_sales_units) + ' units', + subValue: `${formatCurrency(data.total_lost_revenue)} revenue`, + icon: AlertTriangle, + iconClassName: 'text-red-400', + }, + ], + reorder: [ + { + label: 'Replenishment Needed', + value: formatNumber(data.total_replenishment_units) + ' units', + subValue: `${formatCurrency(data.total_replenishment_cost)} cost`, + icon: ShoppingCart, + iconClassName: 'text-amber-500', + }, + { + label: 'Also Critical', + value: formatNumber(data.critical_count), + subValue: 'need ordering too', + icon: AlertTriangle, + iconClassName: 'text-red-500', + }, + { + label: 'On Order', + value: formatNumber(data.total_on_order_units) + ' units', + subValue: `${formatCurrency(data.total_on_order_cost)} cost`, + icon: Truck, + iconClassName: 'text-indigo-500', + }, + { + label: 'Forecast Lost Sales', + value: formatNumber(data.total_lost_sales_units) + ' units', + subValue: `${formatCurrency(data.total_lost_revenue)} revenue`, + icon: AlertTriangle, + iconClassName: 'text-red-400', + }, + ], + healthy: [ + { + label: 'Healthy Products', + value: formatNumber(data.healthy_count), + subValue: `of ${formatNumber(data.total_products)} total`, + icon: Package, + iconClassName: 'text-green-500', + }, + { + label: 'Avg Stock Cover', + value: formatDays(data.avg_stock_cover_days), + icon: Clock, + iconClassName: 'text-green-500', + }, + { + label: 'Stock Value', + value: formatCurrency(data.total_stock_value), + subValue: `${formatCurrency(data.total_stock_retail)} retail`, + icon: DollarSign, + iconClassName: 'text-blue-500', + }, + { + label: 'On Order', + value: formatNumber(data.total_on_order_units) + ' units', + subValue: `${formatCurrency(data.total_on_order_cost)} cost`, + icon: Truck, + iconClassName: 'text-indigo-500', + }, + ], + 'at-risk': [ + { + label: 'At Risk Products', + value: formatNumber(data.at_risk_count), + icon: AlertTriangle, + iconClassName: 'text-orange-500', + }, + { + label: 'Avg Stock Cover', + value: formatDays(data.avg_stock_cover_days), + icon: Clock, + iconClassName: 'text-orange-400', + }, + { + label: 'Forecast Lost Sales', + value: formatNumber(data.total_lost_sales_units) + ' units', + subValue: `${formatCurrency(data.total_lost_revenue)} revenue`, + icon: AlertTriangle, + iconClassName: 'text-red-400', + }, + { + label: 'On Order', + value: formatNumber(data.total_on_order_units) + ' units', + subValue: `${formatCurrency(data.total_on_order_cost)} cost`, + icon: Truck, + iconClassName: 'text-indigo-500', + }, + ], + overstocked: [ + { + label: 'Overstocked Products', + value: formatNumber(data.overstock_count), + icon: PackageX, + iconClassName: 'text-orange-400', + }, + { + label: 'Excess Units', + value: formatNumber(data.total_overstock_units), + icon: Package, + iconClassName: 'text-orange-400', + }, + { + label: 'Overstock Value', + value: formatCurrency(data.total_overstock_value), + subValue: 'at cost', + icon: DollarSign, + iconClassName: 'text-orange-500', + }, + { + label: 'Avg Stock Cover', + value: formatDays(data.avg_stock_cover_days), + icon: Clock, + iconClassName: 'text-blue-400', + }, + ], + new: [ + { + label: 'New Products', + value: formatNumber(data.new_count), + icon: Package, + iconClassName: 'text-purple-500', + }, + { + label: 'Stock Value', + value: formatCurrency(data.total_stock_value), + subValue: `${formatCurrency(data.total_stock_retail)} retail`, + icon: DollarSign, + iconClassName: 'text-blue-500', + }, + { + label: 'On Order', + value: formatNumber(data.total_on_order_units) + ' units', + subValue: `${formatCurrency(data.total_on_order_cost)} cost`, + icon: Truck, + iconClassName: 'text-indigo-500', + }, + { + label: 'Out of Stock', + value: formatNumber(data.out_of_stock_count), + subValue: `of ${formatNumber(data.total_products)} products`, + icon: PackageMinus, + iconClassName: 'text-red-400', + }, + ], + }; + + return allCards[activeView] || allCards.all; +} + +export function ProductSummaryCards({ activeView, showNonReplenishable, showInvisible }: ProductSummaryCardsProps) { + const { data, isLoading } = useQuery({ + queryKey: ['productsSummary', showNonReplenishable, showInvisible], + queryFn: async () => { + const params = new URLSearchParams(); + if (showNonReplenishable) params.append('showNonReplenishable', 'true'); + if (showInvisible) params.append('showInvisible', 'true'); + const response = await fetch(`/api/metrics/summary?${params.toString()}`, { credentials: 'include' }); + if (!response.ok) throw new Error('Failed to fetch summary'); + return response.json(); + }, + staleTime: 60 * 1000, // Cache for 1 minute + }); + + if (isLoading || !data) { + return ( +
+ {Array.from({ length: 4 }).map((_, i) => ( +
+
+
+
+ ))} +
+ ); + } + + const cards = getCardsForView(data, activeView); + + return ( +
+ {cards.map((card) => ( +
+
+

{card.label}

+ +
+

{card.value}

+ {card.subValue && ( +

{card.subValue}

+ )} +
+ ))} +
+ ); +} diff --git a/inventory/src/components/products/ProductTable.tsx b/inventory/src/components/products/ProductTable.tsx index d67a5fb..26e6059 100644 --- a/inventory/src/components/products/ProductTable.tsx +++ b/inventory/src/components/products/ProductTable.tsx @@ -25,19 +25,10 @@ import { useSortable, } from "@dnd-kit/sortable"; import { CSS } from "@dnd-kit/utilities"; -import { ProductMetric, ProductMetricColumnKey, ProductStatus } from "@/types/products"; +import { ProductMetric, ProductMetricColumnKey } from "@/types/products"; import { Skeleton } from "@/components/ui/skeleton"; -import { getStatusBadge } from "@/utils/productUtils"; - -// Column definition -interface ColumnDef { - key: ProductMetricColumnKey; - label: string; - group: string; - noLabel?: boolean; - width?: string; - format?: (value: any, product?: ProductMetric) => React.ReactNode; -} +import { StatusBadge } from "@/components/products/StatusBadge"; +import { ColumnDef } from "@/components/products/columnDefinitions"; interface ProductTableProps { products: ProductMetric[]; @@ -145,10 +136,6 @@ export function ProductTable({ return columnOrder.filter(col => visibleColumns.has(col)); }, [columnOrder, visibleColumns]); - const handleDragStart = () => { - // No need to set activeId as it's not used in the new implementation - }; - const handleDragEnd = (event: DragEndEvent) => { const { active, over } = event; @@ -163,18 +150,23 @@ export function ProductTable({ } }; + // Pre-compute a Map for O(1) column def lookups instead of O(n) find() per cell + const columnDefMap = React.useMemo(() => { + return new Map(columnDefs.map(col => [col.key, col])); + }, [columnDefs]); + const formatColumnValue = (product: ProductMetric, columnKey: ProductMetricColumnKey): React.ReactNode => { const value = product[columnKey as keyof ProductMetric]; - const columnDef = columnDefs.find(col => col.key === columnKey); - + const columnDef = columnDefMap.get(columnKey); + // Use the format function from column definition if available if (columnDef?.format) { return columnDef.format(value, product); } - - // Special handling for status + + // Special handling for status - proper React component instead of dangerouslySetInnerHTML if (columnKey === 'status') { - return
; + return ; } // Special handling for boolean values @@ -204,9 +196,7 @@ export function ProductTable({ {}} >
{isLoading && ( @@ -226,7 +216,7 @@ export function ProductTable({ def.key === columnKey)} + columnDef={columnDefMap.get(columnKey)} onSort={onSort} sortColumn={sortColumn} sortDirection={sortDirection} @@ -254,7 +244,7 @@ export function ProductTable({ data-state={isLoading ? 'loading' : undefined} > {orderedVisibleColumns.map((columnKey) => { - const colDef = columnDefs.find(c => c.key === columnKey); + const colDef = columnDefMap.get(columnKey); return ( ( {orderedVisibleColumns.map(key => { - const colDef = columnDefs.find(c => c.key === key); + const colDef = columnDefMap.get(key); return ( void + viewCounts?: ViewCounts | null } -export function ProductViews({ activeView, onViewChange }: ProductViewsProps) { +function getCountForView(viewId: string, counts: ViewCounts): number | null { + switch (viewId) { + case 'all': return counts.total_products; + case 'critical': return counts.critical_count; + case 'reorder': return counts.reorder_count; + case 'healthy': return counts.healthy_count; + case 'at-risk': return counts.at_risk_count; + case 'overstocked': return counts.overstock_count; + case 'new': return counts.new_count; + default: return null; + } +} + +export function ProductViews({ activeView, onViewChange, viewCounts }: ProductViewsProps) { return ( - {PRODUCT_VIEWS.map((view) => ( - - - {view.label} - - ))} + {PRODUCT_VIEWS.map((view) => { + const count = viewCounts ? getCountForView(view.id, viewCounts) : null; + return ( + + + {view.label} + {count !== null && ( + + {count.toLocaleString()} + + )} + + ); + })} ) diff --git a/inventory/src/components/products/Products.tsx b/inventory/src/components/products/Products.tsx deleted file mode 100644 index 270d56e..0000000 --- a/inventory/src/components/products/Products.tsx +++ /dev/null @@ -1,210 +0,0 @@ -import * as React from "react"; -import { useQuery } from "@tanstack/react-query"; -import { useSearchParams } from "react-router-dom"; -import { Loader2 } from "lucide-react"; -import { ProductFilterOptions, ProductMetric, ProductMetricColumnKey } from "@/types/products"; -import { ProductTable } from "./ProductTable"; -import { ProductFilters } from "./ProductFilters"; -import { ProductDetail } from "./ProductDetail"; -import config from "@/config"; -import { getProductStatus } from "@/utils/productUtils"; - -export function Products() { - const [searchParams, setSearchParams] = useSearchParams(); - const [selectedProductId, setSelectedProductId] = React.useState(null); - - // Get current filter values from URL params - const currentPage = Number(searchParams.get("page") || "1"); - const pageSize = Number(searchParams.get("pageSize") || "25"); - const sortBy = searchParams.get("sortBy") || "title"; - const sortDirection = searchParams.get("sortDirection") || "asc"; - const filterType = searchParams.get("filterType") || ""; - const filterValue = searchParams.get("filterValue") || ""; - const searchQuery = searchParams.get("search") || ""; - const statusFilter = searchParams.get("status") || ""; - - // Fetch filter options - const { - data: filterOptions, - isLoading: isLoadingOptions - } = useQuery({ - queryKey: ["productFilterOptions"], - queryFn: async () => { - const response = await fetch(`${config.apiUrl}/metrics/filter-options`, { - credentials: 'include', - }); - - if (!response.ok) { - return { vendors: [], brands: [], abcClasses: [] }; - } - - return await response.json(); - }, - initialData: { vendors: [], brands: [], abcClasses: [] }, // Provide initial data to prevent undefined - }); - - // Fetch products with metrics data - const { - data, - isLoading, - error - } = useQuery<{ products: ProductMetric[], total: number }>({ - queryKey: ["products", currentPage, pageSize, sortBy, sortDirection, filterType, filterValue, searchQuery, statusFilter], - queryFn: async () => { - // Build query parameters - const params = new URLSearchParams(); - params.append("page", currentPage.toString()); - params.append("limit", pageSize.toString()); - - if (sortBy) params.append("sortBy", sortBy); - if (sortDirection) params.append("sortDirection", sortDirection); - if (filterType && filterValue) { - params.append("filterType", filterType); - params.append("filterValue", filterValue); - } - if (searchQuery) params.append("search", searchQuery); - if (statusFilter) params.append("status", statusFilter); - - const response = await fetch(`${config.apiUrl}/metrics?${params.toString()}`, { - credentials: 'include', - }); - - if (!response.ok) { - const errorData = await response.json().catch(() => ({})); - throw new Error(errorData.error || `Failed to fetch products (${response.status})`); - } - - const data = await response.json(); - - // Calculate status for each product - const productsWithStatus = data.products.map((product: ProductMetric) => ({ - ...product, - status: getProductStatus(product) - })); - - return { - products: productsWithStatus, - total: data.total - }; - }, - }); - - - const handleSortChange = (field: string, direction: "asc" | "desc") => { - searchParams.set("sortBy", field); - searchParams.set("sortDirection", direction); - setSearchParams(searchParams); - }; - - const handleSort = (column: ProductMetricColumnKey) => { - // Toggle sort direction if same column, otherwise default to asc - const newDirection = sortBy === column && sortDirection === "asc" ? "desc" : "asc"; - handleSortChange(column, newDirection as "asc" | "desc"); - }; - - const handleViewProduct = (id: number) => { - setSelectedProductId(id); - }; - - const handleCloseProductDetail = () => { - setSelectedProductId(null); - }; - - // Create a wrapper function to handle all filter changes - const handleFiltersChange = (filters: Record) => { - // Reset to first page when applying filters - searchParams.set("page", "1"); - - // Update searchParams with all filters - Object.entries(filters).forEach(([key, value]) => { - if (value) { - searchParams.set(key, String(value)); - } else { - searchParams.delete(key); - } - }); - - setSearchParams(searchParams); - }; - - // Clear all filters - const handleClearFilters = () => { - // Keep only pagination and sorting params - const newParams = new URLSearchParams(); - newParams.set("page", "1"); - newParams.set("pageSize", pageSize.toString()); - newParams.set("sortBy", sortBy); - newParams.set("sortDirection", sortDirection); - setSearchParams(newParams); - }; - - // Current active filters - const activeFilters = React.useMemo(() => { - const filters: Record = {}; - - if (filterType && filterValue) { - filters[filterType] = filterValue; - } - - if (searchQuery) { - filters.search = searchQuery; - } - - if (statusFilter) { - filters.status = statusFilter; - } - - return filters; - }, [filterType, filterValue, searchQuery, statusFilter]); - - return ( -
-
-

Products

-
- - - - {isLoading ? ( -
-
- - Loading products... -
-
- ) : error ? ( -
- Error loading products: {(error as Error).message} -
- ) : ( - - )} - - -
- ); -} \ No newline at end of file diff --git a/inventory/src/components/products/StatusBadge.tsx b/inventory/src/components/products/StatusBadge.tsx new file mode 100644 index 0000000..c48d2e5 --- /dev/null +++ b/inventory/src/components/products/StatusBadge.tsx @@ -0,0 +1,33 @@ +import { cn } from "@/lib/utils"; + +const STATUS_STYLES: Record = { + 'Critical': 'bg-red-600 text-white border-transparent', + 'Reorder Soon': 'bg-yellow-500 text-black border-secondary', + 'Healthy': 'bg-green-600 text-white border-transparent', + 'Overstock': 'bg-blue-600 text-white border-secondary', + 'At Risk': 'border-orange-500 text-orange-600', + 'New': 'bg-purple-600 text-white border-transparent', + 'Unknown': 'bg-muted text-muted-foreground border-transparent', +}; + +interface StatusBadgeProps { + status: string | null | undefined; + className?: string; +} + +export function StatusBadge({ status, className }: StatusBadgeProps) { + const displayStatus = status || 'Unknown'; + const styles = STATUS_STYLES[displayStatus] || ''; + + return ( +
+ {displayStatus} +
+ ); +} diff --git a/inventory/src/components/products/columnDefinitions.ts b/inventory/src/components/products/columnDefinitions.ts new file mode 100644 index 0000000..443a7f3 --- /dev/null +++ b/inventory/src/components/products/columnDefinitions.ts @@ -0,0 +1,288 @@ +import type { ReactNode } from 'react'; +import { createElement } from 'react'; +import type { ProductMetric, ProductMetricColumnKey } from "@/types/products"; + +export interface ColumnDef { + key: ProductMetricColumnKey; + label: string; + group: string; + noLabel?: boolean; + width?: string; + format?: (value: any, product?: ProductMetric) => ReactNode; +} + +/** + * Creates an inline trend indicator element showing value + colored arrow. + * Used in sales/growth columns to provide at-a-glance trend information. + */ +function trendIndicator(value: any, _product?: ProductMetric): ReactNode { + if (value === null || value === undefined) return '-'; + const num = typeof value === 'number' ? value : parseFloat(value); + if (isNaN(num)) return '-'; + if (num === 0) return createElement('span', { className: 'text-muted-foreground' }, '0%'); + const isPositive = num > 0; + const color = isPositive ? 'text-green-600' : 'text-red-600'; + const arrow = isPositive ? '\u2191' : '\u2193'; // ↑ or ↓ + return createElement('span', { className: `font-medium ${color}` }, `${arrow} ${Math.abs(num).toFixed(1)}%`); +} + +// Define available columns with their groups +export const AVAILABLE_COLUMNS: ColumnDef[] = [ + // Identity & Basic Info + { key: 'imageUrl', label: 'Image', group: 'Product Identity', noLabel: true, width: 'w-[60px]' }, + { key: 'title', label: 'Name', group: 'Product Identity'}, + { key: 'sku', label: 'Item Number', group: 'Product Identity' }, + { key: 'barcode', label: 'UPC', group: 'Product Identity' }, + { key: 'brand', label: 'Company', group: 'Product Identity' }, + { key: 'line', label: 'Line', group: 'Product Identity' }, + { key: 'subline', label: 'Subline', group: 'Product Identity' }, + { key: 'artist', label: 'Artist', group: 'Product Identity' }, + { key: 'isVisible', label: 'Visible', group: 'Product Identity' }, + { key: 'isReplenishable', label: 'Replenishable', group: 'Product Identity' }, + { key: 'abcClass', label: 'ABC Class', group: 'Product Identity' }, + { key: 'status', label: 'Status', group: 'Product Identity' }, + { key: 'dateCreated', label: 'Created', group: 'Dates' }, + + // Supply Chain + { key: 'vendor', label: 'Supplier', group: 'Supply Chain' }, + { key: 'vendorReference', label: 'Supplier #', group: 'Supply Chain' }, + { key: 'notionsReference', label: 'Notions #', group: 'Supply Chain' }, + { key: 'harmonizedTariffCode', label: 'Tariff Code', group: 'Supply Chain' }, + { key: 'countryOfOrigin', label: 'Country', group: 'Supply Chain' }, + { key: 'location', label: 'Location', group: 'Supply Chain' }, + { key: 'moq', label: 'MOQ', group: 'Supply Chain', format: (v) => v === 0 ? '0' : v ? v.toString() : '-' }, + + // Physical Properties + { key: 'weight', label: 'Weight', group: 'Physical', format: (v) => v === 0 ? '0' : v ? v.toFixed(2) : '-' }, + { key: 'length', label: 'Length', group: 'Physical', format: (v) => v === 0 ? '0' : v ? v.toFixed(2) : '-' }, + { key: 'width', label: 'Width', group: 'Physical', format: (v) => v === 0 ? '0' : v ? v.toFixed(2) : '-' }, + { key: 'height', label: 'Height', group: 'Physical', format: (v) => v === 0 ? '0' : v ? v.toFixed(2) : '-' }, + { key: 'dimensions', label: 'Dimensions', group: 'Physical', format: (_, product) => { + const length = product?.length; + const width = product?.width; + const height = product?.height; + if (length && width && height) { + return `${length}\u00d7${width}\u00d7${height}`; + } + return '-'; + }}, + + // Customer Engagement + { key: 'rating', label: 'Rating', group: 'Customer', format: (v) => v === 0 ? '0' : v ? v.toFixed(1) : '-' }, + { key: 'reviews', label: 'Reviews', group: 'Customer', format: (v) => v === 0 ? '0' : v ? v.toString() : '-' }, + { key: 'baskets', label: 'Basket Adds', group: 'Customer', format: (v) => v === 0 ? '0' : v ? v.toString() : '-' }, + { key: 'notifies', label: 'Stock Alerts', group: 'Customer', format: (v) => v === 0 ? '0' : v ? v.toString() : '-' }, + + // Inventory & Stock + { key: 'currentStock', label: 'Current Stock', group: 'Inventory', format: (v) => v === 0 ? '0' : v ? v.toString() : '-' }, + { key: 'preorderCount', label: 'Preorders', group: 'Inventory', format: (v) => v === 0 ? '0' : v ? v.toString() : '-' }, + { key: 'notionsInvCount', label: 'Notions Inv.', group: 'Inventory', format: (v) => v === 0 ? '0' : v ? v.toString() : '-' }, + { key: 'configSafetyStock', label: 'Safety Stock', group: 'Inventory', format: (v) => v === 0 ? '0' : v ? v.toString() : '-' }, + { key: 'replenishmentUnits', label: 'Replenish Units', group: 'Inventory', format: (v) => v === 0 ? '0' : v ? v.toString() : '-' }, + { key: 'stockCoverInDays', label: 'Stock Cover (Days)', group: 'Inventory', format: (v) => v === 0 ? '0' : v ? v.toFixed(1) : '-' }, + { key: 'sellsOutInDays', label: 'Sells Out In (Days)', group: 'Inventory', format: (v) => v === 0 ? '0' : v ? v.toFixed(1) : '-' }, + { key: 'onOrderQty', label: 'On Order', group: 'Inventory', format: (v) => v === 0 ? '0' : v ? v.toString() : '-' }, + { key: 'earliestExpectedDate', label: 'Expected Date', group: 'Inventory' }, + { key: 'isOldStock', label: 'Old Stock', group: 'Inventory' }, + { key: 'overstockedUnits', label: 'Overstock Qty', group: 'Inventory', format: (v) => v === 0 ? '0' : v ? v.toString() : '-' }, + { key: 'stockoutDays30d', label: 'Stockout Days (30d)', group: 'Inventory', format: (v) => v === 0 ? '0' : v ? v.toString() : '-' }, + { key: 'stockoutRate30d', label: 'Stockout Rate %', group: 'Inventory', format: (v) => v === 0 ? '0%' : v ? `${v.toFixed(1)}%` : '-' }, + { key: 'avgStockUnits30d', label: 'Avg Stock Units (30d)', group: 'Inventory', format: (v) => v === 0 ? '0' : v ? v.toFixed(1) : '-' }, + { key: 'receivedQty30d', label: 'Received Qty (30d)', group: 'Inventory', format: (v) => v === 0 ? '0' : v ? v.toString() : '-' }, + { key: 'poCoverInDays', label: 'PO Cover (Days)', group: 'Inventory', format: (v) => v === 0 ? '0' : v ? v.toFixed(1) : '-' }, + + // Pricing & Costs + { key: 'currentPrice', label: 'Price', group: 'Pricing', format: (v) => v === 0 ? '0' : v ? v.toFixed(2) : '-' }, + { key: 'currentRegularPrice', label: 'Regular Price', group: 'Pricing', format: (v) => v === 0 ? '0' : v ? v.toFixed(2) : '-' }, + { key: 'currentCostPrice', label: 'Cost', group: 'Pricing', format: (v) => v === 0 ? '0' : v ? v.toFixed(2) : '-' }, + { key: 'currentLandingCostPrice', label: 'Landing Cost', group: 'Pricing', format: (v) => v === 0 ? '0' : v ? v.toFixed(2) : '-' }, + { key: 'currentStockCost', label: 'Stock Cost', group: 'Valuation', format: (v) => v === 0 ? '0' : v ? v.toFixed(2) : '-' }, + { key: 'currentStockRetail', label: 'Stock Retail', group: 'Valuation', format: (v) => v === 0 ? '0' : v ? v.toFixed(2) : '-' }, + { key: 'currentStockGross', label: 'Stock Gross', group: 'Valuation', format: (v) => v === 0 ? '0' : v ? v.toFixed(2) : '-' }, + { key: 'onOrderCost', label: 'On Order Cost', group: 'Valuation', format: (v) => v === 0 ? '0' : v ? v.toFixed(2) : '-' }, + { key: 'onOrderRetail', label: 'On Order Retail', group: 'Valuation', format: (v) => v === 0 ? '0' : v ? v.toFixed(2) : '-' }, + { key: 'overstockedCost', label: 'Overstock Cost', group: 'Valuation', format: (v) => v === 0 ? '0' : v ? v.toFixed(2) : '-' }, + { key: 'overstockedRetail', label: 'Overstock Retail', group: 'Valuation', format: (v) => v === 0 ? '0' : v ? v.toFixed(2) : '-' }, + { key: 'avgStockCost30d', label: 'Avg Stock Cost (30d)', group: 'Valuation', format: (v) => v === 0 ? '0' : v ? v.toFixed(2) : '-' }, + { key: 'avgStockRetail30d', label: 'Avg Stock Retail (30d)', group: 'Valuation', format: (v) => v === 0 ? '0' : v ? v.toFixed(2) : '-' }, + { key: 'avgStockGross30d', label: 'Avg Stock Gross (30d)', group: 'Valuation', format: (v) => v === 0 ? '0' : v ? v.toFixed(2) : '-' }, + { key: 'receivedCost30d', label: 'Received Cost (30d)', group: 'Valuation', format: (v) => v === 0 ? '0' : v ? v.toFixed(2) : '-' }, + { key: 'replenishmentCost', label: 'Replenishment Cost', group: 'Valuation', format: (v) => v === 0 ? '0' : v ? v.toFixed(2) : '-' }, + { key: 'replenishmentRetail', label: 'Replenishment Retail', group: 'Valuation', format: (v) => v === 0 ? '0' : v ? v.toFixed(2) : '-' }, + { key: 'replenishmentProfit', label: 'Replenishment Profit', group: 'Valuation', format: (v) => v === 0 ? '0' : v ? v.toFixed(2) : '-' }, + + // Dates & Timing + { key: 'dateFirstReceived', label: 'First Received', group: 'Dates' }, + { key: 'dateLastReceived', label: 'Last Received', group: 'Dates' }, + { key: 'dateFirstSold', label: 'First Sold', group: 'Dates' }, + { key: 'dateLastSold', label: 'Last Sold', group: 'Dates' }, + { key: 'ageDays', label: 'Age (Days)', group: 'Dates', format: (v) => v === 0 ? '0' : v ? v.toString() : '-' }, + { key: 'avgLeadTimeDays', label: 'Avg Lead Time', group: 'Dates', format: (v) => v === 0 ? '0' : v ? v.toFixed(1) : '-' }, + { key: 'replenishDate', label: 'Replenish Date', group: 'Dates' }, + { key: 'planningPeriodDays', label: 'Planning Period (Days)', group: 'Dates', format: (v) => v === 0 ? '0' : v ? v.toString() : '-' }, + + // Sales & Revenue + { key: 'salesVelocityDaily', label: 'Daily Velocity', group: 'Sales', format: (v) => v === 0 ? '0' : v ? v.toFixed(1) : '-' }, + { key: 'yesterdaySales', label: 'Yesterday Sales', group: 'Sales', format: (v) => v === 0 ? '0' : v ? v.toString() : '-' }, + { key: 'sales7d', label: 'Sales (7d)', group: 'Sales', format: (v) => v === 0 ? '0' : v ? v.toString() : '-' }, + { key: 'revenue7d', label: 'Revenue (7d)', group: 'Sales', format: (v) => v === 0 ? '0' : v ? v.toFixed(2) : '-' }, + { key: 'sales14d', label: 'Sales (14d)', group: 'Sales', format: (v) => v === 0 ? '0' : v ? v.toString() : '-' }, + { key: 'revenue14d', label: 'Revenue (14d)', group: 'Sales', format: (v) => v === 0 ? '0' : v ? v.toFixed(2) : '-' }, + { key: 'sales30d', label: 'Sales (30d)', group: 'Sales', format: (v, product) => { + if (v === null || v === undefined) return '-'; + const display = v === 0 ? '0' : v.toString(); + const growth = product?.salesGrowth30dVsPrev; + if (growth === null || growth === undefined || growth === 0) return display; + const isUp = growth > 0; + const arrow = isUp ? '\u2191' : '\u2193'; + const color = isUp ? 'text-green-600' : 'text-red-600'; + return createElement('span', { className: 'inline-flex items-center gap-1.5' }, + createElement('span', null, display), + createElement('span', { className: `text-[10px] ${color}` }, `${arrow}${Math.abs(growth).toFixed(0)}%`), + ); + }}, + { key: 'revenue30d', label: 'Revenue (30d)', group: 'Sales', format: (v, product) => { + if (v === null || v === undefined) return '-'; + const display = v === 0 ? '0' : v.toFixed(2); + const growth = product?.revenueGrowth30dVsPrev; + if (growth === null || growth === undefined || growth === 0) return display; + const isUp = growth > 0; + const arrow = isUp ? '\u2191' : '\u2193'; + const color = isUp ? 'text-green-600' : 'text-red-600'; + return createElement('span', { className: 'inline-flex items-center gap-1.5' }, + createElement('span', null, display), + createElement('span', { className: `text-[10px] ${color}` }, `${arrow}${Math.abs(growth).toFixed(0)}%`), + ); + }}, + { key: 'sales365d', label: 'Sales (365d)', group: 'Sales', format: (v) => v === 0 ? '0' : v ? v.toString() : '-' }, + { key: 'revenue365d', label: 'Revenue (365d)', group: 'Sales', format: (v) => v === 0 ? '0' : v ? v.toFixed(2) : '-' }, + { key: 'avgSalesPerDay30d', label: 'Avg Sales/Day (30d)', group: 'Sales', format: (v) => v === 0 ? '0' : v ? v.toFixed(1) : '-' }, + { key: 'avgSalesPerMonth30d', label: 'Avg Sales/Month (30d)', group: 'Sales', format: (v) => v === 0 ? '0' : v ? v.toFixed(1) : '-' }, + { key: 'asp30d', label: 'ASP (30d)', group: 'Sales', format: (v) => v === 0 ? '0' : v ? v.toFixed(2) : '-' }, + { key: 'acp30d', label: 'ACP (30d)', group: 'Sales', format: (v) => v === 0 ? '0' : v ? v.toFixed(2) : '-' }, + { key: 'avgRos30d', label: 'Avg ROS (30d)', group: 'Sales', format: (v) => v === 0 ? '0' : v ? v.toFixed(2) : '-' }, + { key: 'returnsUnits30d', label: 'Returns Units (30d)', group: 'Sales', format: (v) => v === 0 ? '0' : v ? v.toString() : '-' }, + { key: 'returnsRevenue30d', label: 'Returns Revenue (30d)', group: 'Sales', format: (v) => v === 0 ? '0' : v ? v.toFixed(2) : '-' }, + { key: 'discounts30d', label: 'Discounts (30d)', group: 'Sales', format: (v) => v === 0 ? '0' : v ? v.toFixed(2) : '-' }, + { key: 'grossRevenue30d', label: 'Gross Revenue (30d)', group: 'Sales', format: (v) => v === 0 ? '0' : v ? v.toFixed(2) : '-' }, + { key: 'grossRegularRevenue30d', label: 'Gross Regular Revenue (30d)', group: 'Sales', format: (v) => v === 0 ? '0' : v ? v.toFixed(2) : '-' }, + { key: 'lifetimeSales', label: 'Lifetime Sales', group: 'Sales', format: (v) => v === 0 ? '0' : v ? v.toString() : '-' }, + { key: 'lifetimeRevenue', label: 'Lifetime Revenue', group: 'Sales', format: (v) => v === 0 ? '0' : v ? v.toFixed(2) : '-' }, + + // Financial Performance + { key: 'cogs30d', label: 'COGS (30d)', group: 'Financial', format: (v) => v === 0 ? '0' : v ? v.toFixed(2) : '-' }, + { key: 'profit30d', label: 'Profit (30d)', group: 'Financial', format: (v) => v === 0 ? '0' : v ? v.toFixed(2) : '-' }, + { key: 'margin30d', label: 'Margin %', group: 'Financial', format: (v) => v === 0 ? '0%' : v ? `${v.toFixed(1)}%` : '-' }, + { key: 'markup30d', label: 'Markup %', group: 'Financial', format: (v) => v === 0 ? '0%' : v ? `${v.toFixed(1)}%` : '-' }, + { key: 'gmroi30d', label: 'GMROI', group: 'Financial', format: (v) => v === 0 ? '0' : v ? v.toFixed(2) : '-' }, + { key: 'stockturn30d', label: 'Stock Turn', group: 'Financial', format: (v) => v === 0 ? '0' : v ? v.toFixed(2) : '-' }, + { key: 'sellThrough30d', label: 'Sell Through %', group: 'Financial', format: (v) => v === 0 ? '0%' : v ? `${v.toFixed(1)}%` : '-' }, + { key: 'returnRate30d', label: 'Return Rate %', group: 'Financial', format: (v) => v === 0 ? '0%' : v ? `${v.toFixed(1)}%` : '-' }, + { key: 'discountRate30d', label: 'Discount Rate %', group: 'Financial', format: (v) => v === 0 ? '0%' : v ? `${v.toFixed(1)}%` : '-' }, + { key: 'markdown30d', label: 'Markdown (30d)', group: 'Financial', format: (v) => v === 0 ? '0' : v ? v.toFixed(2) : '-' }, + { key: 'markdownRate30d', label: 'Markdown Rate %', group: 'Financial', format: (v) => v === 0 ? '0%' : v ? `${v.toFixed(1)}%` : '-' }, + + // Forecasting + { key: 'leadTimeForecastUnits', label: 'Lead Time Forecast Units', group: 'Forecasting', format: (v) => v === 0 ? '0' : v ? v.toFixed(1) : '-' }, + { key: 'daysOfStockForecastUnits', label: 'Days of Stock Forecast Units', group: 'Forecasting', format: (v) => v === 0 ? '0' : v ? v.toFixed(1) : '-' }, + { key: 'planningPeriodForecastUnits', label: 'Planning Period Forecast Units', group: 'Forecasting', format: (v) => v === 0 ? '0' : v ? v.toFixed(1) : '-' }, + { key: 'leadTimeClosingStock', label: 'Lead Time Closing Stock', group: 'Forecasting', format: (v) => v === 0 ? '0' : v ? v.toFixed(1) : '-' }, + { key: 'daysOfStockClosingStock', label: 'Days of Stock Closing Stock', group: 'Forecasting', format: (v) => v === 0 ? '0' : v ? v.toFixed(1) : '-' }, + { key: 'replenishmentNeededRaw', label: 'Replenishment Needed Raw', group: 'Forecasting', format: (v) => v === 0 ? '0' : v ? v.toFixed(1) : '-' }, + { key: 'forecastLostSalesUnits', label: 'Forecast Lost Sales Units', group: 'Forecasting', format: (v) => v === 0 ? '0' : v ? v.toFixed(1) : '-' }, + { key: 'forecastLostRevenue', label: 'Forecast Lost Revenue', group: 'Forecasting', format: (v) => v === 0 ? '0' : v ? v.toFixed(2) : '-' }, + + // First Period Performance + { key: 'first7DaysSales', label: 'First 7 Days Sales', group: 'First Period', format: (v) => v === 0 ? '0' : v ? v.toString() : '-' }, + { key: 'first7DaysRevenue', label: 'First 7 Days Revenue', group: 'First Period', format: (v) => v === 0 ? '0' : v ? v.toFixed(2) : '-' }, + { key: 'first30DaysSales', label: 'First 30 Days Sales', group: 'First Period', format: (v) => v === 0 ? '0' : v ? v.toString() : '-' }, + { key: 'first30DaysRevenue', label: 'First 30 Days Revenue', group: 'First Period', format: (v) => v === 0 ? '0' : v ? v.toFixed(2) : '-' }, + { key: 'first60DaysSales', label: 'First 60 Days Sales', group: 'First Period', format: (v) => v === 0 ? '0' : v ? v.toString() : '-' }, + { key: 'first60DaysRevenue', label: 'First 60 Days Revenue', group: 'First Period', format: (v) => v === 0 ? '0' : v ? v.toFixed(2) : '-' }, + { key: 'first90DaysSales', label: 'First 90 Days Sales', group: 'First Period', format: (v) => v === 0 ? '0' : v ? v.toString() : '-' }, + { key: 'first90DaysRevenue', label: 'First 90 Days Revenue', group: 'First Period', format: (v) => v === 0 ? '0' : v ? v.toFixed(2) : '-' }, + + // Growth Metrics — uses trendIndicator for colored arrows + { key: 'salesGrowth30dVsPrev', label: 'Sales Growth (30d)', group: 'Growth Analysis', format: trendIndicator }, + { key: 'revenueGrowth30dVsPrev', label: 'Rev Growth (30d)', group: 'Growth Analysis', format: trendIndicator }, + { key: 'salesGrowthYoy', label: 'Sales Growth YoY', group: 'Growth Analysis', format: trendIndicator }, + { key: 'revenueGrowthYoy', label: 'Rev Growth YoY', group: 'Growth Analysis', format: trendIndicator }, + + // Demand Variability Metrics + { key: 'salesVariance30d', label: 'Sales Variance (30d)', group: 'Demand Variability', format: (v) => v === 0 ? '0' : v ? v.toFixed(2) : '-' }, + { key: 'salesStdDev30d', label: 'Sales Std Dev (30d)', group: 'Demand Variability', format: (v) => v === 0 ? '0' : v ? v.toFixed(2) : '-' }, + { key: 'salesCv30d', label: 'Sales CV % (30d)', group: 'Demand Variability', format: (v) => v === 0 ? '0%' : v ? `${v.toFixed(1)}%` : '-' }, + { key: 'demandPattern', label: 'Demand Pattern', group: 'Demand Variability' }, + + // Service Level Metrics + { key: 'fillRate30d', label: 'Fill Rate % (30d)', group: 'Service Level', format: (v) => v === 0 ? '0%' : v ? `${v.toFixed(1)}%` : '-' }, + { key: 'stockoutIncidents30d', label: 'Stockout Incidents (30d)', group: 'Service Level', format: (v) => v === 0 ? '0' : v ? v.toString() : '-' }, + { key: 'serviceLevel30d', label: 'Service Level % (30d)', group: 'Service Level', format: (v) => v === 0 ? '0%' : v ? `${v.toFixed(1)}%` : '-' }, + { key: 'lostSalesIncidents30d', label: 'Lost Sales Incidents (30d)', group: 'Service Level', format: (v) => v === 0 ? '0' : v ? v.toString() : '-' }, + + // Seasonality Metrics + { key: 'seasonalityIndex', label: 'Seasonality Index', group: 'Seasonality', format: (v) => v === 0 ? '0' : v ? v.toFixed(2) : '-' }, + { key: 'seasonalPattern', label: 'Seasonal Pattern', group: 'Seasonality' }, + { key: 'peakSeason', label: 'Peak Season', group: 'Seasonality' }, + + // Quality Indicators + { key: 'lifetimeRevenueQuality', label: 'Lifetime Revenue Quality', group: 'Data Quality' }, +]; + +// Define default columns for each view +export const VIEW_COLUMNS: Record = { + // General overview: identification + headline KPIs + trend + all: [ + 'imageUrl', 'title', 'sku', 'brand', 'status', 'abcClass', 'currentStock', 'currentPrice', + 'salesVelocityDaily', 'sales30d', 'revenue30d', 'profit30d', 'margin30d', 'stockCoverInDays', + 'salesGrowth30dVsPrev' + ], + // Urgency-focused: what's out, how fast, what's coming, cost of inaction + critical: [ + 'status', 'imageUrl', 'title', 'vendor', 'currentStock', 'configSafetyStock', 'sellsOutInDays', + 'salesVelocityDaily', 'sales30d', 'replenishmentUnits', 'onOrderQty', 'earliestExpectedDate', + 'avgLeadTimeDays', 'stockoutDays30d', 'forecastLostRevenue' + ], + // Purchase planning: what to order, how much, cost, supplier, timeline + reorder: [ + 'status', 'imageUrl', 'title', 'vendor', 'currentStock', 'sellsOutInDays', 'stockCoverInDays', + 'salesVelocityDaily', 'sales30d', 'replenishmentUnits', 'replenishmentCost', 'replenishDate', + 'currentCostPrice', 'moq', 'avgLeadTimeDays', 'onOrderQty' + ], + // Excess inventory: how much, what it costs, is it moving, is it old + overstocked: [ + 'status', 'imageUrl', 'title', 'currentStock', 'overstockedUnits', 'overstockedCost', + 'currentStockCost', 'salesVelocityDaily', 'sales30d', 'stockCoverInDays', 'stockturn30d', + 'dateLastSold', 'isOldStock', 'salesGrowth30dVsPrev', 'margin30d' + ], + // Early warnings: stock trajectory, is help on the way, what to do + 'at-risk': [ + 'status', 'imageUrl', 'title', 'vendor', 'currentStock', 'stockCoverInDays', 'sellsOutInDays', + 'salesVelocityDaily', 'sales30d', 'salesGrowth30dVsPrev', 'onOrderQty', 'earliestExpectedDate', + 'replenishmentUnits', 'avgLeadTimeDays', 'fillRate30d' + ], + // New product monitoring: early performance, benchmarks, engagement + new: [ + 'status', 'imageUrl', 'title', 'brand', 'currentStock', 'currentPrice', + 'salesVelocityDaily', 'sales30d', 'revenue30d', 'margin30d', + 'dateFirstReceived', 'ageDays', 'first7DaysSales', 'first30DaysSales', 'reviews' + ], + // Performance monitoring: profitability, efficiency, trends + healthy: [ + 'status', 'imageUrl', 'title', 'abcClass', 'currentStock', 'stockCoverInDays', + 'salesVelocityDaily', 'sales30d', 'revenue30d', 'profit30d', 'margin30d', + 'gmroi30d', 'stockturn30d', 'sellThrough30d', 'salesGrowth30dVsPrev' + ], +}; + +// Pre-computed column lookup map for O(1) access by key +export const COLUMN_DEF_MAP = new Map( + AVAILABLE_COLUMNS.map(col => [col.key, col]) +); + +// Pre-computed columns grouped by their group property +export const COLUMNS_BY_GROUP = AVAILABLE_COLUMNS.reduce((acc, col) => { + if (!acc[col.group]) acc[col.group] = []; + acc[col.group].push(col); + return acc; +}, {} as Record); diff --git a/inventory/src/pages/Products.tsx b/inventory/src/pages/Products.tsx index 4a395ff..4c98382 100644 --- a/inventory/src/pages/Products.tsx +++ b/inventory/src/pages/Products.tsx @@ -1,14 +1,15 @@ -import React, { useState, useEffect, useMemo } from 'react'; +import React, { useState, useEffect, useMemo, useCallback } from 'react'; import { useSearchParams } from 'react-router-dom'; import { useQuery, keepPreviousData } from '@tanstack/react-query'; import { motion } from 'framer-motion'; -import { Settings2 } from 'lucide-react'; +import { Settings2, Search, X } from 'lucide-react'; import { Button } from "@/components/ui/button"; +import { Input } from "@/components/ui/input"; import { Switch } from "@/components/ui/switch"; import { Label } from "@/components/ui/label"; -import { - DropdownMenu, - DropdownMenuContent, +import { + DropdownMenu, + DropdownMenuContent, DropdownMenuTrigger, DropdownMenuLabel, DropdownMenuSeparator, @@ -29,320 +30,123 @@ import { ProductFilters } from "@/components/products/ProductFilters"; import { ProductDetail } from "@/components/products/ProductDetail"; import { ProductViews } from "@/components/products/ProductViews"; import { ProductTableSkeleton } from "@/components/products/ProductTableSkeleton"; +import { ProductSummaryCards } from "@/components/products/ProductSummaryCards"; import { useToast } from "@/hooks/use-toast"; +import { useDebounce } from "@/hooks/useDebounce"; +import { AVAILABLE_COLUMNS, VIEW_COLUMNS, COLUMNS_BY_GROUP } from "@/components/products/columnDefinitions"; +import { transformMetricsRow, OPERATOR_MAP } from "@/utils/transformUtils"; -// Column definition type -interface ColumnDef { - key: ProductMetricColumnKey; - label: string; - group: string; - noLabel?: boolean; - width?: string; - format?: (value: any, product?: ProductMetric) => React.ReactNode; +// --- ColumnToggle Component --- +// Extracted as a proper component for stable React identity and correct internal state management. + +interface ColumnToggleProps { + visibleColumns: Set; + onColumnVisibilityChange: (column: ProductMetricColumnKey, isVisible: boolean) => void; + onResetToDefault: () => void; } -// Define available columns with their groups -const AVAILABLE_COLUMNS: ColumnDef[] = [ - // Identity & Basic Info - { key: 'imageUrl', label: 'Image', group: 'Product Identity', noLabel: true, width: 'w-[60px]' }, - { key: 'title', label: 'Name', group: 'Product Identity'}, - { key: 'sku', label: 'Item Number', group: 'Product Identity' }, - { key: 'barcode', label: 'UPC', group: 'Product Identity' }, - { key: 'brand', label: 'Company', group: 'Product Identity' }, - { key: 'line', label: 'Line', group: 'Product Identity' }, - { key: 'subline', label: 'Subline', group: 'Product Identity' }, - { key: 'artist', label: 'Artist', group: 'Product Identity' }, - { key: 'isVisible', label: 'Visible', group: 'Product Identity' }, - { key: 'isReplenishable', label: 'Replenishable', group: 'Product Identity' }, - { key: 'abcClass', label: 'ABC Class', group: 'Product Identity' }, - { key: 'status', label: 'Status', group: 'Product Identity' }, - { key: 'dateCreated', label: 'Created', group: 'Dates' }, - - // Supply Chain - { key: 'vendor', label: 'Supplier', group: 'Supply Chain' }, - { key: 'vendorReference', label: 'Supplier #', group: 'Supply Chain' }, - { key: 'notionsReference', label: 'Notions #', group: 'Supply Chain' }, - { key: 'harmonizedTariffCode', label: 'Tariff Code', group: 'Supply Chain' }, - { key: 'countryOfOrigin', label: 'Country', group: 'Supply Chain' }, - { key: 'location', label: 'Location', group: 'Supply Chain' }, - { key: 'moq', label: 'MOQ', group: 'Supply Chain', format: (v) => v === 0 ? '0' : v ? v.toString() : '-' }, +function ColumnToggle({ visibleColumns, onColumnVisibilityChange, onResetToDefault }: ColumnToggleProps) { + const [open, setOpen] = React.useState(false); - // Physical Properties - { key: 'weight', label: 'Weight', group: 'Physical', format: (v) => v === 0 ? '0' : v ? v.toFixed(2) : '-' }, - { key: 'length', label: 'Length', group: 'Physical', format: (v) => v === 0 ? '0' : v ? v.toFixed(2) : '-' }, - { key: 'width', label: 'Width', group: 'Physical', format: (v) => v === 0 ? '0' : v ? v.toFixed(2) : '-' }, - { key: 'height', label: 'Height', group: 'Physical', format: (v) => v === 0 ? '0' : v ? v.toFixed(2) : '-' }, - { key: 'dimensions', label: 'Dimensions', group: 'Physical', format: (_, product) => { - // Handle dimensions as separate length, width, height fields - const length = product?.length; - const width = product?.width; - const height = product?.height; - if (length && width && height) { - return `${length}×${width}×${height}`; + return ( + + + + + e.preventDefault()} + onPointerDownOutside={(e) => { + if (!(e.target as HTMLElement).closest('[role="dialog"]')) { + setOpen(false); + } + }} + onInteractOutside={(e) => { + if ((e.target as HTMLElement).closest('[role="dialog"]')) { + e.preventDefault(); + } + }} + > +
+ Toggle columns + +
+ +
+ {Object.entries(COLUMNS_BY_GROUP).map(([group, columns]) => ( +
+ + {group} + +
+ {columns.map((column) => ( + { + onColumnVisibilityChange(column.key, checked); + }} + onSelect={(e) => { + e.preventDefault(); + }} + > + {column.label} + + ))} +
+
+ ))} +
+ + + ); +} + +// --- Helper: Transform frontend filter state to API query params --- + +function transformFilters(filters: Record): Record { + const transformedFilters: Record = {}; + + Object.entries(filters).forEach(([key, value]) => { + if (typeof value === 'object' && value !== null && 'operator' in value) { + const operatorSuffix = OPERATOR_MAP[value.operator] || 'eq'; + + // For between, send as comma-separated string (backend splits on comma) + if (value.operator === 'between' && Array.isArray(value.value)) { + transformedFilters[`${key}_${operatorSuffix}`] = value.value.join(','); + } else { + transformedFilters[`${key}_${operatorSuffix}`] = value.value; + } + } else { + // Simple values (from select/boolean filters) are passed as-is + transformedFilters[key] = value; } - return '-'; - }}, - - // Customer Engagement - { key: 'rating', label: 'Rating', group: 'Customer', format: (v) => v === 0 ? '0' : v ? v.toFixed(1) : '-' }, - { key: 'reviews', label: 'Reviews', group: 'Customer', format: (v) => v === 0 ? '0' : v ? v.toString() : '-' }, - { key: 'baskets', label: 'Basket Adds', group: 'Customer', format: (v) => v === 0 ? '0' : v ? v.toString() : '-' }, - { key: 'notifies', label: 'Stock Alerts', group: 'Customer', format: (v) => v === 0 ? '0' : v ? v.toString() : '-' }, - - // Inventory & Stock - { key: 'currentStock', label: 'Current Stock', group: 'Inventory', format: (v) => v === 0 ? '0' : v ? v.toString() : '-' }, - { key: 'preorderCount', label: 'Preorders', group: 'Inventory', format: (v) => v === 0 ? '0' : v ? v.toString() : '-' }, - { key: 'notionsInvCount', label: 'Notions Inv.', group: 'Inventory', format: (v) => v === 0 ? '0' : v ? v.toString() : '-' }, - { key: 'configSafetyStock', label: 'Safety Stock', group: 'Inventory', format: (v) => v === 0 ? '0' : v ? v.toString() : '-' }, - { key: 'replenishmentUnits', label: 'Replenish Units', group: 'Inventory', format: (v) => v === 0 ? '0' : v ? v.toString() : '-' }, - { key: 'stockCoverInDays', label: 'Stock Cover (Days)', group: 'Inventory', format: (v) => v === 0 ? '0' : v ? v.toFixed(1) : '-' }, - { key: 'sellsOutInDays', label: 'Sells Out In (Days)', group: 'Inventory', format: (v) => v === 0 ? '0' : v ? v.toFixed(1) : '-' }, - { key: 'onOrderQty', label: 'On Order', group: 'Inventory', format: (v) => v === 0 ? '0' : v ? v.toString() : '-' }, - { key: 'earliestExpectedDate', label: 'Expected Date', group: 'Inventory' }, - { key: 'isOldStock', label: 'Old Stock', group: 'Inventory' }, - { key: 'overstockedUnits', label: 'Overstock Qty', group: 'Inventory', format: (v) => v === 0 ? '0' : v ? v.toString() : '-' }, - { key: 'stockoutDays30d', label: 'Stockout Days (30d)', group: 'Inventory', format: (v) => v === 0 ? '0' : v ? v.toString() : '-' }, - { key: 'stockoutRate30d', label: 'Stockout Rate %', group: 'Inventory', format: (v) => v === 0 ? '0%' : v ? `${v.toFixed(1)}%` : '-' }, - { key: 'avgStockUnits30d', label: 'Avg Stock Units (30d)', group: 'Inventory', format: (v) => v === 0 ? '0' : v ? v.toFixed(1) : '-' }, - { key: 'receivedQty30d', label: 'Received Qty (30d)', group: 'Inventory', format: (v) => v === 0 ? '0' : v ? v.toString() : '-' }, - { key: 'poCoverInDays', label: 'PO Cover (Days)', group: 'Inventory', format: (v) => v === 0 ? '0' : v ? v.toFixed(1) : '-' }, - - // Pricing & Costs - { key: 'currentPrice', label: 'Price', group: 'Pricing', format: (v) => v === 0 ? '0' : v ? v.toFixed(2) : '-' }, - { key: 'currentRegularPrice', label: 'Regular Price', group: 'Pricing', format: (v) => v === 0 ? '0' : v ? v.toFixed(2) : '-' }, - { key: 'currentCostPrice', label: 'Cost', group: 'Pricing', format: (v) => v === 0 ? '0' : v ? v.toFixed(2) : '-' }, - { key: 'currentLandingCostPrice', label: 'Landing Cost', group: 'Pricing', format: (v) => v === 0 ? '0' : v ? v.toFixed(2) : '-' }, - { key: 'currentStockCost', label: 'Stock Cost', group: 'Valuation', format: (v) => v === 0 ? '0' : v ? v.toFixed(2) : '-' }, - { key: 'currentStockRetail', label: 'Stock Retail', group: 'Valuation', format: (v) => v === 0 ? '0' : v ? v.toFixed(2) : '-' }, - { key: 'currentStockGross', label: 'Stock Gross', group: 'Valuation', format: (v) => v === 0 ? '0' : v ? v.toFixed(2) : '-' }, - { key: 'onOrderCost', label: 'On Order Cost', group: 'Valuation', format: (v) => v === 0 ? '0' : v ? v.toFixed(2) : '-' }, - { key: 'onOrderRetail', label: 'On Order Retail', group: 'Valuation', format: (v) => v === 0 ? '0' : v ? v.toFixed(2) : '-' }, - { key: 'overstockedCost', label: 'Overstock Cost', group: 'Valuation', format: (v) => v === 0 ? '0' : v ? v.toFixed(2) : '-' }, - { key: 'overstockedRetail', label: 'Overstock Retail', group: 'Valuation', format: (v) => v === 0 ? '0' : v ? v.toFixed(2) : '-' }, - { key: 'avgStockCost30d', label: 'Avg Stock Cost (30d)', group: 'Valuation', format: (v) => v === 0 ? '0' : v ? v.toFixed(2) : '-' }, - { key: 'avgStockRetail30d', label: 'Avg Stock Retail (30d)', group: 'Valuation', format: (v) => v === 0 ? '0' : v ? v.toFixed(2) : '-' }, - { key: 'avgStockGross30d', label: 'Avg Stock Gross (30d)', group: 'Valuation', format: (v) => v === 0 ? '0' : v ? v.toFixed(2) : '-' }, - { key: 'receivedCost30d', label: 'Received Cost (30d)', group: 'Valuation', format: (v) => v === 0 ? '0' : v ? v.toFixed(2) : '-' }, - { key: 'replenishmentCost', label: 'Replenishment Cost', group: 'Valuation', format: (v) => v === 0 ? '0' : v ? v.toFixed(2) : '-' }, - { key: 'replenishmentRetail', label: 'Replenishment Retail', group: 'Valuation', format: (v) => v === 0 ? '0' : v ? v.toFixed(2) : '-' }, - { key: 'replenishmentProfit', label: 'Replenishment Profit', group: 'Valuation', format: (v) => v === 0 ? '0' : v ? v.toFixed(2) : '-' }, - - // Dates & Timing - { key: 'dateFirstReceived', label: 'First Received', group: 'Dates' }, - { key: 'dateLastReceived', label: 'Last Received', group: 'Dates' }, - { key: 'dateFirstSold', label: 'First Sold', group: 'Dates' }, - { key: 'dateLastSold', label: 'Last Sold', group: 'Dates' }, - { key: 'ageDays', label: 'Age (Days)', group: 'Dates', format: (v) => v === 0 ? '0' : v ? v.toString() : '-' }, - { key: 'avgLeadTimeDays', label: 'Avg Lead Time', group: 'Dates', format: (v) => v === 0 ? '0' : v ? v.toFixed(1) : '-' }, - { key: 'replenishDate', label: 'Replenish Date', group: 'Dates' }, - { key: 'planningPeriodDays', label: 'Planning Period (Days)', group: 'Dates', format: (v) => v === 0 ? '0' : v ? v.toString() : '-' }, - - // Sales & Revenue - { key: 'salesVelocityDaily', label: 'Daily Velocity', group: 'Sales', format: (v) => v === 0 ? '0' : v ? v.toFixed(1) : '-' }, - { key: 'yesterdaySales', label: 'Yesterday Sales', group: 'Sales', format: (v) => v === 0 ? '0' : v ? v.toString() : '-' }, - { key: 'sales7d', label: 'Sales (7d)', group: 'Sales', format: (v) => v === 0 ? '0' : v ? v.toString() : '-' }, - { key: 'revenue7d', label: 'Revenue (7d)', group: 'Sales', format: (v) => v === 0 ? '0' : v ? v.toFixed(2) : '-' }, - { key: 'sales14d', label: 'Sales (14d)', group: 'Sales', format: (v) => v === 0 ? '0' : v ? v.toString() : '-' }, - { key: 'revenue14d', label: 'Revenue (14d)', group: 'Sales', format: (v) => v === 0 ? '0' : v ? v.toFixed(2) : '-' }, - { key: 'sales30d', label: 'Sales (30d)', group: 'Sales', format: (v) => v === 0 ? '0' : v ? v.toString() : '-' }, - { key: 'revenue30d', label: 'Revenue (30d)', group: 'Sales', format: (v) => v === 0 ? '0' : v ? v.toFixed(2) : '-' }, - { key: 'sales365d', label: 'Sales (365d)', group: 'Sales', format: (v) => v === 0 ? '0' : v ? v.toString() : '-' }, - { key: 'revenue365d', label: 'Revenue (365d)', group: 'Sales', format: (v) => v === 0 ? '0' : v ? v.toFixed(2) : '-' }, - { key: 'avgSalesPerDay30d', label: 'Avg Sales/Day (30d)', group: 'Sales', format: (v) => v === 0 ? '0' : v ? v.toFixed(1) : '-' }, - { key: 'avgSalesPerMonth30d', label: 'Avg Sales/Month (30d)', group: 'Sales', format: (v) => v === 0 ? '0' : v ? v.toFixed(1) : '-' }, - { key: 'asp30d', label: 'ASP (30d)', group: 'Sales', format: (v) => v === 0 ? '0' : v ? v.toFixed(2) : '-' }, - { key: 'acp30d', label: 'ACP (30d)', group: 'Sales', format: (v) => v === 0 ? '0' : v ? v.toFixed(2) : '-' }, - { key: 'avgRos30d', label: 'Avg ROS (30d)', group: 'Sales', format: (v) => v === 0 ? '0' : v ? v.toFixed(2) : '-' }, - { key: 'returnsUnits30d', label: 'Returns Units (30d)', group: 'Sales', format: (v) => v === 0 ? '0' : v ? v.toString() : '-' }, - { key: 'returnsRevenue30d', label: 'Returns Revenue (30d)', group: 'Sales', format: (v) => v === 0 ? '0' : v ? v.toFixed(2) : '-' }, - { key: 'discounts30d', label: 'Discounts (30d)', group: 'Sales', format: (v) => v === 0 ? '0' : v ? v.toFixed(2) : '-' }, - { key: 'grossRevenue30d', label: 'Gross Revenue (30d)', group: 'Sales', format: (v) => v === 0 ? '0' : v ? v.toFixed(2) : '-' }, - { key: 'grossRegularRevenue30d', label: 'Gross Regular Revenue (30d)', group: 'Sales', format: (v) => v === 0 ? '0' : v ? v.toFixed(2) : '-' }, - { key: 'lifetimeSales', label: 'Lifetime Sales', group: 'Sales', format: (v) => v === 0 ? '0' : v ? v.toString() : '-' }, - { key: 'lifetimeRevenue', label: 'Lifetime Revenue', group: 'Sales', format: (v) => v === 0 ? '0' : v ? v.toFixed(2) : '-' }, - - // Financial Performance - { key: 'cogs30d', label: 'COGS (30d)', group: 'Financial', format: (v) => v === 0 ? '0' : v ? v.toFixed(2) : '-' }, - { key: 'profit30d', label: 'Profit (30d)', group: 'Financial', format: (v) => v === 0 ? '0' : v ? v.toFixed(2) : '-' }, - { key: 'margin30d', label: 'Margin %', group: 'Financial', format: (v) => v === 0 ? '0%' : v ? `${v.toFixed(1)}%` : '-' }, - { key: 'markup30d', label: 'Markup %', group: 'Financial', format: (v) => v === 0 ? '0%' : v ? `${v.toFixed(1)}%` : '-' }, - { key: 'gmroi30d', label: 'GMROI', group: 'Financial', format: (v) => v === 0 ? '0' : v ? v.toFixed(2) : '-' }, - { key: 'stockturn30d', label: 'Stock Turn', group: 'Financial', format: (v) => v === 0 ? '0' : v ? v.toFixed(2) : '-' }, - { key: 'sellThrough30d', label: 'Sell Through %', group: 'Financial', format: (v) => v === 0 ? '0%' : v ? `${v.toFixed(1)}%` : '-' }, - { key: 'returnRate30d', label: 'Return Rate %', group: 'Financial', format: (v) => v === 0 ? '0%' : v ? `${v.toFixed(1)}%` : '-' }, - { key: 'discountRate30d', label: 'Discount Rate %', group: 'Financial', format: (v) => v === 0 ? '0%' : v ? `${v.toFixed(1)}%` : '-' }, - { key: 'markdown30d', label: 'Markdown (30d)', group: 'Financial', format: (v) => v === 0 ? '0' : v ? v.toFixed(2) : '-' }, - { key: 'markdownRate30d', label: 'Markdown Rate %', group: 'Financial', format: (v) => v === 0 ? '0%' : v ? `${v.toFixed(1)}%` : '-' }, - - // Forecasting - { key: 'leadTimeForecastUnits', label: 'Lead Time Forecast Units', group: 'Forecasting', format: (v) => v === 0 ? '0' : v ? v.toFixed(1) : '-' }, - { key: 'daysOfStockForecastUnits', label: 'Days of Stock Forecast Units', group: 'Forecasting', format: (v) => v === 0 ? '0' : v ? v.toFixed(1) : '-' }, - { key: 'planningPeriodForecastUnits', label: 'Planning Period Forecast Units', group: 'Forecasting', format: (v) => v === 0 ? '0' : v ? v.toFixed(1) : '-' }, - { key: 'leadTimeClosingStock', label: 'Lead Time Closing Stock', group: 'Forecasting', format: (v) => v === 0 ? '0' : v ? v.toFixed(1) : '-' }, - { key: 'daysOfStockClosingStock', label: 'Days of Stock Closing Stock', group: 'Forecasting', format: (v) => v === 0 ? '0' : v ? v.toFixed(1) : '-' }, - { key: 'replenishmentNeededRaw', label: 'Replenishment Needed Raw', group: 'Forecasting', format: (v) => v === 0 ? '0' : v ? v.toFixed(1) : '-' }, - { key: 'forecastLostSalesUnits', label: 'Forecast Lost Sales Units', group: 'Forecasting', format: (v) => v === 0 ? '0' : v ? v.toFixed(1) : '-' }, - { key: 'forecastLostRevenue', label: 'Forecast Lost Revenue', group: 'Forecasting', format: (v) => v === 0 ? '0' : v ? v.toFixed(2) : '-' }, - - // First Period Performance - { key: 'first7DaysSales', label: 'First 7 Days Sales', group: 'First Period', format: (v) => v === 0 ? '0' : v ? v.toString() : '-' }, - { key: 'first7DaysRevenue', label: 'First 7 Days Revenue', group: 'First Period', format: (v) => v === 0 ? '0' : v ? v.toFixed(2) : '-' }, - { key: 'first30DaysSales', label: 'First 30 Days Sales', group: 'First Period', format: (v) => v === 0 ? '0' : v ? v.toString() : '-' }, - { key: 'first30DaysRevenue', label: 'First 30 Days Revenue', group: 'First Period', format: (v) => v === 0 ? '0' : v ? v.toFixed(2) : '-' }, - { key: 'first60DaysSales', label: 'First 60 Days Sales', group: 'First Period', format: (v) => v === 0 ? '0' : v ? v.toString() : '-' }, - { key: 'first60DaysRevenue', label: 'First 60 Days Revenue', group: 'First Period', format: (v) => v === 0 ? '0' : v ? v.toFixed(2) : '-' }, - { key: 'first90DaysSales', label: 'First 90 Days Sales', group: 'First Period', format: (v) => v === 0 ? '0' : v ? v.toString() : '-' }, - { key: 'first90DaysRevenue', label: 'First 90 Days Revenue', group: 'First Period', format: (v) => v === 0 ? '0' : v ? v.toFixed(2) : '-' }, - - // Growth Metrics - { key: 'salesGrowth30dVsPrev', label: 'Sales Growth % (30d vs Prev)', group: 'Growth Analysis', format: (v) => v === 0 ? '0%' : v ? `${v.toFixed(1)}%` : '-' }, - { key: 'revenueGrowth30dVsPrev', label: 'Revenue Growth % (30d vs Prev)', group: 'Growth Analysis', format: (v) => v === 0 ? '0%' : v ? `${v.toFixed(1)}%` : '-' }, - { key: 'salesGrowthYoy', label: 'Sales Growth % YoY', group: 'Growth Analysis', format: (v) => v === 0 ? '0%' : v ? `${v.toFixed(1)}%` : '-' }, - { key: 'revenueGrowthYoy', label: 'Revenue Growth % YoY', group: 'Growth Analysis', format: (v) => v === 0 ? '0%' : v ? `${v.toFixed(1)}%` : '-' }, - - // Demand Variability Metrics - { key: 'salesVariance30d', label: 'Sales Variance (30d)', group: 'Demand Variability', format: (v) => v === 0 ? '0' : v ? v.toFixed(2) : '-' }, - { key: 'salesStdDev30d', label: 'Sales Std Dev (30d)', group: 'Demand Variability', format: (v) => v === 0 ? '0' : v ? v.toFixed(2) : '-' }, - { key: 'salesCv30d', label: 'Sales CV % (30d)', group: 'Demand Variability', format: (v) => v === 0 ? '0%' : v ? `${v.toFixed(1)}%` : '-' }, - { key: 'demandPattern', label: 'Demand Pattern', group: 'Demand Variability' }, - - // Service Level Metrics - { key: 'fillRate30d', label: 'Fill Rate % (30d)', group: 'Service Level', format: (v) => v === 0 ? '0%' : v ? `${v.toFixed(1)}%` : '-' }, - { key: 'stockoutIncidents30d', label: 'Stockout Incidents (30d)', group: 'Service Level', format: (v) => v === 0 ? '0' : v ? v.toString() : '-' }, - { key: 'serviceLevel30d', label: 'Service Level % (30d)', group: 'Service Level', format: (v) => v === 0 ? '0%' : v ? `${v.toFixed(1)}%` : '-' }, - { key: 'lostSalesIncidents30d', label: 'Lost Sales Incidents (30d)', group: 'Service Level', format: (v) => v === 0 ? '0' : v ? v.toString() : '-' }, - - // Seasonality Metrics - { key: 'seasonalityIndex', label: 'Seasonality Index', group: 'Seasonality', format: (v) => v === 0 ? '0' : v ? v.toFixed(2) : '-' }, - { key: 'seasonalPattern', label: 'Seasonal Pattern', group: 'Seasonality' }, - { key: 'peakSeason', label: 'Peak Season', group: 'Seasonality' }, - - // Quality Indicators - { key: 'lifetimeRevenueQuality', label: 'Lifetime Revenue Quality', group: 'Data Quality' }, -]; + }); -// Define default columns for each view -const VIEW_COLUMNS: Record = { - all: [ - 'imageUrl', - 'title', - 'brand', - 'status', - 'currentStock', - 'currentPrice', - 'salesVelocityDaily', - 'sales30d', - 'revenue30d', - 'profit30d', - 'stockCoverInDays', - 'currentStockCost', - 'salesGrowth30dVsPrev' - ], - critical: [ - 'status', - 'imageUrl', - 'title', - 'currentStock', - 'configSafetyStock', - 'replenishmentUnits', - 'salesVelocityDaily', - 'sales7d', - 'sales30d', - 'onOrderQty', - 'earliestExpectedDate', - 'vendor', - 'dateLastReceived', - 'avgLeadTimeDays', - 'serviceLevel30d', - 'stockoutIncidents30d' - ], - reorder: [ - 'status', - 'imageUrl', - 'title', - 'currentStock', - 'configSafetyStock', - 'replenishmentUnits', - 'salesVelocityDaily', - 'sellsOutInDays', - 'currentCostPrice', - 'sales30d', - 'vendor', - 'avgLeadTimeDays', - 'dateLastReceived', - 'demandPattern' - ], - overstocked: [ - 'status', - 'imageUrl', - 'title', - 'currentStock', - 'overstockedUnits', - 'sales7d', - 'sales30d', - 'salesVelocityDaily', - 'stockCoverInDays', - 'stockturn30d', - 'currentStockCost', - 'overstockedCost', - 'dateLastSold', - 'salesVariance30d' - ], - 'at-risk': [ - 'status', - 'imageUrl', - 'title', - 'currentStock', - 'configSafetyStock', - 'salesVelocityDaily', - 'sales7d', - 'sales30d', - 'stockCoverInDays', - 'sellsOutInDays', - 'dateLastSold', - 'avgLeadTimeDays', - 'profit30d', - 'fillRate30d', - 'salesGrowth30dVsPrev' - ], - new: [ - 'status', - 'imageUrl', - 'title', - 'currentStock', - 'salesVelocityDaily', - 'sales7d', - 'vendor', - 'brand', - 'currentPrice', - 'currentCostPrice', - 'dateFirstReceived', - 'ageDays', - 'abcClass', - 'first7DaysSales', - 'first30DaysSales' - ], - healthy: [ - 'status', - 'imageUrl', - 'title', - 'currentStock', - 'stockCoverInDays', - 'salesVelocityDaily', - 'sales30d', - 'revenue30d', - 'profit30d', - 'margin30d', - 'gmroi30d', - 'stockturn30d', - 'salesGrowth30dVsPrev', - 'serviceLevel30d' - ], -}; + return transformedFilters; +} + +// --- Main Products Page Component --- export function Products() { const [searchParams, setSearchParams] = useSearchParams(); const [filters, setFilters] = useState>({}); + const [searchQuery, setSearchQuery] = useState(''); + const debouncedSearch = useDebounce(searchQuery, 300); const [sortColumn, setSortColumn] = useState('title'); const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('asc'); // Track last sort direction for each column @@ -353,10 +157,11 @@ export function Products() { const [activeView, setActiveView] = useState(searchParams.get('view') || "all"); const [pageSize] = useState(50); const [showNonReplenishable, setShowNonReplenishable] = useState(false); + const [showInvisible, setShowInvisible] = useState(false); const [selectedProductId, setSelectedProductId] = useState(null); - const [, setIsLoading] = useState(false); const { toast } = useToast(); - + const searchInputRef = React.useRef(null); + // Store visible columns and order for each view const [viewColumns, setViewColumns] = useState>>(() => { const initialColumns: Record> = {}; @@ -365,7 +170,7 @@ export function Products() { }); return initialColumns; }); - + const [viewColumnOrder, setViewColumnOrder] = useState>(() => { const initialOrder: Record = {}; Object.entries(VIEW_COLUMNS).forEach(([view, defaultColumns]) => { @@ -377,40 +182,49 @@ export function Products() { return initialOrder; }); - // Get current view's columns + // Get current view's columns, auto-adding indicator columns when toggles are active const visibleColumns = useMemo(() => { const columns = new Set(viewColumns[activeView] || VIEW_COLUMNS.all); - + // Add isReplenishable column when showing non-replenishable products for better visibility if (showNonReplenishable) { columns.add('isReplenishable'); } - + // Add isVisible column when showing invisible products so users can distinguish them + if (showInvisible) { + columns.add('isVisible'); + } + return columns; - }, [viewColumns, activeView, showNonReplenishable]); + }, [viewColumns, activeView, showNonReplenishable, showInvisible]); const columnOrder = viewColumnOrder[activeView] || viewColumnOrder.all; // Handle column visibility changes - const handleColumnVisibilityChange = (column: ProductMetricColumnKey, isVisible: boolean) => { + const handleColumnVisibilityChange = useCallback((column: ProductMetricColumnKey, isVisible: boolean) => { setViewColumns(prev => ({ ...prev, - [activeView]: isVisible + [activeView]: isVisible ? new Set([...prev[activeView], column]) : new Set([...prev[activeView]].filter(col => col !== column)) })); - }; + }, [activeView]); - // Handle column order changes - const handleColumnOrderChange = (newOrder: ProductMetricColumnKey[]) => { - setViewColumnOrder(prev => ({ - ...prev, - [activeView]: newOrder - })); + // Handle column order changes (newVisibleOrder only contains visible columns from drag reorder) + const handleColumnOrderChange = (newVisibleOrder: ProductMetricColumnKey[]) => { + setViewColumnOrder(prev => { + const oldFullOrder = prev[activeView] || []; + // Append hidden columns (preserving their relative order) after the reordered visible columns + const hiddenColumns = oldFullOrder.filter(col => !visibleColumns.has(col)); + return { + ...prev, + [activeView]: [...newVisibleOrder, ...hiddenColumns] + }; + }); }; // Reset columns to default for current view - const resetColumnsToDefault = () => { + const resetColumnsToDefault = useCallback(() => { setViewColumns(prev => ({ ...prev, [activeView]: new Set(VIEW_COLUMNS[activeView] || VIEW_COLUMNS.all) @@ -423,145 +237,73 @@ export function Products() { .filter(key => !(VIEW_COLUMNS[activeView] || VIEW_COLUMNS.all).includes(key)) ] })); - }; + }, [activeView]); - // Function to fetch products data - const transformFilters = (filters: Record) => { - const transformedFilters: Record = {}; - - Object.entries(filters).forEach(([key, value]) => { - if (typeof value === 'object' && 'operator' in value) { - // Convert the operator format to match what the backend expects - // Backend expects keys like "sales30d_gt" instead of separate operator parameters - const operatorSuffix = value.operator === '=' ? 'eq' : - value.operator === '>' ? 'gt' : - value.operator === '>=' ? 'gte' : - value.operator === '<' ? 'lt' : - value.operator === '<=' ? 'lte' : - value.operator === 'between' ? 'between' : 'eq'; - - // Create a key with the correct suffix format: key_operator - transformedFilters[`${key}_${operatorSuffix}`] = value.value; - } else { - // Simple values are passed as-is - transformedFilters[key] = value; - } - }); - - return transformedFilters; - }; + // Merge search query into filters for the API call + const effectiveFilters = useMemo(() => { + const merged = { ...filters }; + if (debouncedSearch.trim()) { + merged['title'] = { value: debouncedSearch.trim(), operator: 'contains' as const }; + } + return merged; + }, [filters, debouncedSearch]); - const fetchProducts = async () => { - setIsLoading(true); + // Fetch products data with stable callback reference + const fetchProducts = useCallback(async () => { try { const params = new URLSearchParams(); params.append('page', currentPage.toString()); params.append('limit', pageSize.toString()); - + if (sortColumn) { - // Don't convert camelCase to snake_case - use the column name directly - // as defined in the backend's COLUMN_MAP - console.log(`Sorting: ${sortColumn} (${sortDirection})`); params.append('sort', sortColumn); params.append('order', sortDirection); } - + if (activeView && activeView !== 'all') { - const stockStatus = activeView === 'at-risk' ? 'At Risk' : - activeView === 'reorder' ? 'Reorder Soon' : - activeView === 'overstocked' ? 'Overstock' : + const stockStatus = activeView === 'at-risk' ? 'At Risk' : + activeView === 'reorder' ? 'Reorder Soon' : + activeView === 'overstocked' ? 'Overstock' : activeView === 'new' ? 'New' : activeView.charAt(0).toUpperCase() + activeView.slice(1); - - console.log(`View: ${activeView} → Stock Status: ${stockStatus}`); params.append('stock_status', stockStatus); } // Transform filters to match API expectations - const transformedFilters = transformFilters(filters); + const transformedFilters = transformFilters(effectiveFilters); Object.entries(transformedFilters).forEach(([key, value]) => { if (value !== undefined && value !== null && value !== '') { - // Don't convert camelCase to snake_case - use the filter name directly if (Array.isArray(value)) { - params.append(key, JSON.stringify(value)); + params.append(key, value.join(',')); } else { params.append(key, value.toString()); } } }); - if (!showNonReplenishable) { - params.append('showNonReplenishable', 'false'); + if (showNonReplenishable) { + params.append('showNonReplenishable', 'true'); } - // Log the final query parameters for debugging - console.log('API Query:', params.toString()); + if (showInvisible) { + params.append('showInvisible', 'true'); + } - const response = await fetch(`/api/metrics?${params.toString()}`); + const response = await fetch(`/api/metrics?${params.toString()}`, {credentials: 'include'}); if (!response.ok) throw new Error('Failed to fetch products'); - + const data = await response.json(); - - // Transform snake_case keys to camelCase and convert string numbers to actual numbers - const transformedProducts = data.metrics?.map((product: any) => { - const transformed: any = {}; - - // Process all keys to convert from snake_case to camelCase - Object.entries(product).forEach(([key, value]) => { - // Better handling of snake_case to camelCase conversion - let camelKey = key; - - // First handle cases like sales_7d -> sales7d - camelKey = camelKey.replace(/_(\d+[a-z])/g, '$1'); - - // Then handle regular snake_case -> camelCase - camelKey = camelKey.replace(/_([a-z])/g, (_, p1) => p1.toUpperCase()); - - // Convert numeric strings to actual numbers, but handle empty strings properly - if (typeof value === 'string' && value !== '' && !isNaN(Number(value)) && - !key.toLowerCase().includes('date') && key !== 'sku' && key !== 'title' && - key !== 'brand' && key !== 'vendor') { - transformed[camelKey] = Number(value); - } else { - transformed[camelKey] = value; - } - }); - - // Ensure pid is a number - transformed.pid = typeof transformed.pid === 'string' ? - parseInt(transformed.pid, 10) : transformed.pid; - - return transformed; - }) || []; - - // Debug: Log the first item to check field mapping - if (transformedProducts.length > 0) { - console.log('Sample product after transformation:'); - console.log('sales7d:', transformedProducts[0].sales7d); - console.log('sales30d:', transformedProducts[0].sales30d); - console.log('revenue30d:', transformedProducts[0].revenue30d); - console.log('margin30d:', transformedProducts[0].margin30d); - console.log('markup30d:', transformedProducts[0].markup30d); - - // Debug specific fields with issues - console.log('configSafetyStock:', transformedProducts[0].configSafetyStock); - console.log('length:', transformedProducts[0].length); - console.log('width:', transformedProducts[0].width); - console.log('height:', transformedProducts[0].height); - console.log('first7DaysSales:', transformedProducts[0].first7DaysSales); - console.log('first30DaysSales:', transformedProducts[0].first30DaysSales); - console.log('first7DaysRevenue:', transformedProducts[0].first7DaysRevenue); - console.log('first30DaysRevenue:', transformedProducts[0].first30DaysRevenue); - } - - // Transform the metrics response to match our expected format + + // Use shared transform utility instead of inline conversion + const transformedProducts = data.metrics?.map((product: any) => transformMetricsRow(product)) || []; + return { products: transformedProducts, - pagination: data.pagination || { - total: 0, + pagination: data.pagination || { + total: 0, pages: 0, - currentPage: 1, - limit: pageSize + currentPage: 1, + limit: pageSize }, filters: data.appliedQuery?.filters || {} }; @@ -573,10 +315,8 @@ export function Products() { variant: "destructive", }); return null; - } finally { - setIsLoading(false); } - }; + }, [currentPage, pageSize, sortColumn, sortDirection, activeView, effectiveFilters, showNonReplenishable, showInvisible, toast]); // Query for filter options const { data: filterOptionsData, isLoading: isLoadingFilterOptions } = useQuery({ @@ -586,7 +326,7 @@ export function Products() { const response = await fetch('/api/metrics/filter-options'); if (!response.ok) throw new Error('Failed to fetch filter options'); const data = await response.json(); - + // Ensure we have the expected structure with correct casing return { vendors: data.vendors || [], @@ -601,13 +341,32 @@ export function Products() { staleTime: 5 * 60 * 1000, // Cache for 5 minutes }); + // Query for summary data (powers KPI cards and view counts) + const { data: summaryData } = useQuery({ + queryKey: ['productsSummary', showNonReplenishable, showInvisible], + queryFn: async () => { + const params = new URLSearchParams(); + if (showNonReplenishable) params.append('showNonReplenishable', 'true'); + if (showInvisible) params.append('showInvisible', 'true'); + const response = await fetch(`/api/metrics/summary?${params.toString()}`, { credentials: 'include' }); + if (!response.ok) throw new Error('Failed to fetch summary'); + return response.json(); + }, + staleTime: 60 * 1000, + }); + // Query for products data const { data, isFetching } = useQuery({ - queryKey: ['products', currentPage, pageSize, sortColumn, sortDirection, activeView, filters, showNonReplenishable], + queryKey: ['products', currentPage, pageSize, sortColumn, sortDirection, activeView, effectiveFilters, showNonReplenishable, showInvisible], queryFn: fetchProducts, placeholderData: keepPreviousData, }); + // Reset page when debounced search changes + useEffect(() => { + setCurrentPage(1); + }, [debouncedSearch]); + // Update current page if it exceeds the total pages useEffect(() => { if (data?.pagination.pages && currentPage > data.pagination.pages) { @@ -615,10 +374,22 @@ export function Products() { } }, [currentPage, data?.pagination.pages]); + // Global keyboard shortcut: "/" to focus search + useEffect(() => { + const handleKeyDown = (e: KeyboardEvent) => { + if (e.key === '/' && !['INPUT', 'TEXTAREA', 'SELECT'].includes((e.target as HTMLElement).tagName)) { + e.preventDefault(); + searchInputRef.current?.focus(); + } + }; + window.addEventListener('keydown', handleKeyDown); + return () => window.removeEventListener('keydown', handleKeyDown); + }, []); + // Handle sort column change with improved column-specific direction memory const handleSort = (column: ProductMetricColumnKey) => { let nextDirection: 'asc' | 'desc'; - + if (sortColumn === column) { // If clicking the same column, toggle direction nextDirection = sortDirection === 'asc' ? 'desc' : 'asc'; @@ -627,28 +398,28 @@ export function Products() { // 1. If this column has been sorted before, use the stored direction // 2. Otherwise use a sensible default (asc for text, desc for numeric columns) const prevDirection = columnSortDirections[column]; - + if (prevDirection) { // Use the stored direction nextDirection = prevDirection; } else { // Determine sensible default based on column type const columnDef = AVAILABLE_COLUMNS.find(c => c.key === column); - const isNumeric = columnDef?.group === 'Sales' || - columnDef?.group === 'Financial' || - columnDef?.group === 'Stock' || + const isNumeric = columnDef?.group === 'Sales' || + columnDef?.group === 'Financial' || + columnDef?.group === 'Stock' || ['currentPrice', 'currentRegularPrice', 'currentCostPrice', 'currentStock'].includes(column); - + // Start with descending for numeric columns (to see highest values first) // Start with ascending for text columns (alphabetical order) nextDirection = isNumeric ? 'desc' : 'asc'; } } - + // Update the current sort state setSortDirection(nextDirection); setSortColumn(column); - + // Remember this column's sort direction for next time setColumnSortDirections(prev => ({ ...prev, @@ -664,6 +435,7 @@ export function Products() { const handleClearFilters = () => { setFilters({}); + setSearchQuery(''); setCurrentPage(1); }; @@ -673,89 +445,6 @@ export function Products() { window.scrollTo({ top: 0, behavior: 'smooth' }); }; - // Group columns by their group property - const columnsByGroup = AVAILABLE_COLUMNS.reduce((acc, col) => { - if (!acc[col.group]) { - acc[col.group] = []; - } - acc[col.group].push(col); - return acc; - }, {} as Record); - - const renderColumnToggle = () => { - const [open, setOpen] = React.useState(false); - - return ( - - - - - e.preventDefault()} - onPointerDownOutside={(e) => { - // Only close if clicking outside the dropdown - if (!(e.target as HTMLElement).closest('[role="dialog"]')) { - setOpen(false); - } - }} - onInteractOutside={(e) => { - // Prevent closing when interacting with checkboxes - if ((e.target as HTMLElement).closest('[role="dialog"]')) { - e.preventDefault(); - } - }} - > -
- Toggle columns - -
- -
- {Object.entries(columnsByGroup).map(([group, columns]) => ( -
- - {group} - -
- {columns.map((column) => ( - { - handleColumnVisibilityChange(column.key, checked); - }} - onSelect={(e) => { - e.preventDefault(); - }} - > - {column.label} - - ))} -
-
- ))} -
- - - ); - }; - // Calculate pagination numbers const totalPages = data?.pagination.pages || 1; const showEllipsis = totalPages > 7; @@ -767,10 +456,20 @@ export function Products() { : [currentPage - 2, currentPage - 1, currentPage, currentPage + 1, currentPage + 2] : Array.from({ length: totalPages }, (_, i) => i + 1); - // Update URL when view changes + // Update URL when view changes, reset filters and conditionally reset sort const handleViewChange = (view: string) => { setActiveView(view); setCurrentPage(1); + setFilters({}); // Clear filters when switching views to avoid confusion + setSearchQuery(''); // Clear search when switching views + + // Reset sort if the current sort column isn't visible in the new view + const newViewColumns = VIEW_COLUMNS[view] || VIEW_COLUMNS.all; + if (!newViewColumns.includes(sortColumn)) { + setSortColumn('title'); + setSortDirection('asc'); + } + setSearchParams(prev => { const newParams = new URLSearchParams(prev); newParams.set('view', view); @@ -784,6 +483,7 @@ export function Products() { if (viewParam && viewParam !== activeView) { setActiveView(viewParam); } + // eslint-disable-next-line react-hooks/exhaustive-deps }, [searchParams]); return ( @@ -795,11 +495,37 @@ export function Products() { >

Products

+
+ + setSearchQuery(e.target.value)} + className="pl-9 pr-8 h-9" + /> + {searchQuery && ( + + )} +
- + +
@@ -827,12 +553,27 @@ export function Products() { />
+
+ { + setShowInvisible(checked); + setCurrentPage(1); + }} + /> + +
{data?.pagination?.total !== undefined && (
{data.pagination.total.toLocaleString()} products
)} - {renderColumnToggle()} +
@@ -843,8 +584,7 @@ export function Products() { ({ ...product, - // No need to calculate status anymore since it comes from the backend - status: product.status || 'Healthy' // Fallback only if status is null + status: product.status || 'Unknown' })) || []} onSort={handleSort} sortColumn={sortColumn} @@ -855,12 +595,12 @@ export function Products() { onColumnOrderChange={handleColumnOrderChange} onViewProduct={(productId) => setSelectedProductId(productId)} /> - + {totalPages > 1 && ( - { e.preventDefault(); @@ -869,7 +609,7 @@ export function Products() { aria-disabled={currentPage === 1} /> - + {showEllipsis && currentPage > 4 && ( <> @@ -888,7 +628,7 @@ export function Products() { )} - + {pageNumbers.map((page) => ( ))} - + {showEllipsis && currentPage < totalPages - 3 && ( <> @@ -922,7 +662,7 @@ export function Products() { )} - + - setSelectedProductId(null)} + setSelectedProductId(null)} /> ); -} \ No newline at end of file +} diff --git a/inventory/src/types/products.ts b/inventory/src/types/products.ts index c3e781f..3e2ccf1 100644 --- a/inventory/src/types/products.ts +++ b/inventory/src/types/products.ts @@ -92,6 +92,7 @@ export interface ProductMetric { imageUrl: string | null; isVisible: boolean; isReplenishable: boolean; + lastCalculated: string | null; // Additional Product Fields barcode: string | null; @@ -334,11 +335,6 @@ export type ProductMetricColumnKey = | 'configDaysOfStock' | 'poCoverInDays' | 'toOrderUnits' - | 'costPrice' - | 'valueAtCost' - | 'profit' - | 'margin' - | 'targetPrice' | 'replenishmentCost' | 'replenishmentRetail' | 'replenishmentProfit' @@ -347,20 +343,13 @@ export type ProductMetricColumnKey = | 'sales14d' | 'revenue14d' | 'sales30d' - | 'units30d' | 'revenue30d' | 'sales365d' | 'revenue365d' - | 'avgSalePrice30d' - | 'avgDailySales30d' - | 'avgDailyRevenue30d' - | 'stockturnRate30d' | 'margin30d' | 'markup30d' | 'cogs30d' | 'profit30d' - | 'roas30d' - | 'adSpend30d' | 'gmroi30d' | 'stockturn30d' | 'sellThrough30d' @@ -421,100 +410,14 @@ export type ProductMetricColumnKey = | 'peakSeason' | 'imageUrl'; -// Mapping frontend keys to backend query param keys -export const FRONTEND_TO_BACKEND_KEY_MAP: Record = { - pid: 'pid', - sku: 'sku', - title: 'title', - brand: 'brand', - vendor: 'vendor', - imageUrl: 'imageUrl', - isVisible: 'isVisible', - isReplenishable: 'isReplenishable', - currentPrice: 'currentPrice', - currentRegularPrice: 'currentRegularPrice', - currentCostPrice: 'currentCostPrice', - currentLandingCostPrice: 'currentLandingCostPrice', - currentStock: 'currentStock', - currentStockCost: 'currentStockCost', - currentStockRetail: 'currentStockRetail', - currentStockGross: 'currentStockGross', - onOrderQty: 'onOrderQty', - onOrderCost: 'onOrderCost', - onOrderRetail: 'onOrderRetail', - earliestExpectedDate: 'earliestExpectedDate', - dateCreated: 'dateCreated', - dateFirstReceived: 'dateFirstReceived', - dateLastReceived: 'dateLastReceived', - dateFirstSold: 'dateFirstSold', - dateLastSold: 'dateLastSold', - ageDays: 'ageDays', - sales7d: 'sales7d', - revenue7d: 'revenue7d', - sales14d: 'sales14d', - revenue14d: 'revenue14d', - sales30d: 'sales30d', - revenue30d: 'revenue30d', - cogs30d: 'cogs30d', - profit30d: 'profit30d', - stockoutDays30d: 'stockoutDays30d', - sales365d: 'sales365d', - revenue365d: 'revenue365d', - avgStockUnits30d: 'avgStockUnits30d', - avgStockCost30d: 'avgStockCost30d', - receivedQty30d: 'receivedQty30d', - receivedCost30d: 'receivedCost30d', - asp30d: 'asp30d', - acp30d: 'acp30d', - margin30d: 'margin30d', - gmroi30d: 'gmroi30d', - stockturn30d: 'stockturn30d', - sellThrough30d: 'sellThrough30d', - avgLeadTimeDays: 'avgLeadTimeDays', - abcClass: 'abcClass', - salesVelocityDaily: 'salesVelocityDaily', - configLeadTime: 'configLeadTime', - configDaysOfStock: 'configDaysOfStock', - stockCoverInDays: 'stockCoverInDays', - sellsOutInDays: 'sellsOutInDays', - replenishDate: 'replenishDate', - overstockedUnits: 'overstockedUnits', - overstockedCost: 'overstockedCost', - isOldStock: 'isOldStock', - yesterdaySales: 'yesterdaySales', - status: 'status', // Frontend-only field - // New metrics from P3-P5 implementation - salesGrowth30dVsPrev: 'salesGrowth30dVsPrev', - revenueGrowth30dVsPrev: 'revenueGrowth30dVsPrev', - salesGrowthYoy: 'salesGrowthYoy', - revenueGrowthYoy: 'revenueGrowthYoy', - salesVariance30d: 'salesVariance30d', - salesStdDev30d: 'salesStdDev30d', - salesCv30d: 'salesCv30d', - demandPattern: 'demandPattern', - fillRate30d: 'fillRate30d', - stockoutIncidents30d: 'stockoutIncidents30d', - serviceLevel30d: 'serviceLevel30d', - lostSalesIncidents30d: 'lostSalesIncidents30d', - seasonalityIndex: 'seasonalityIndex', - seasonalPattern: 'seasonalPattern', - peakSeason: 'peakSeason', - lifetimeRevenueQuality: 'lifetimeRevenueQuality' -}; - -// Function to get backend key safely -export function getBackendKey(frontendKey: string): string | null { - return FRONTEND_TO_BACKEND_KEY_MAP[frontendKey] || null; -} - export type ActiveFilterValue = FilterValue | FilterValueWithOperator; -interface FilterValueWithOperator { +export interface FilterValueWithOperator { value: FilterValue | string[] | number[]; operator: ComparisonOperator; } -type FilterValue = string | number | boolean; +export type FilterValue = string | number | boolean; export type ComparisonOperator = | "=" | "!=" | ">" | ">=" | "<" | "<=" | "between" diff --git a/inventory/src/utils/productUtils.ts b/inventory/src/utils/productUtils.ts index de872b9..96b5957 100644 --- a/inventory/src/utils/productUtils.ts +++ b/inventory/src/utils/productUtils.ts @@ -1,109 +1,19 @@ -import { ProductMetric, ProductStatus } from "@/types/products"; - -//Calculates the product status based on various metrics - -export function getProductStatus(product: ProductMetric): ProductStatus { - if (!product.isReplenishable) { - return "Healthy"; // Non-replenishable items default to Healthy - } - - const { - currentStock, - stockCoverInDays, - sellsOutInDays, - overstockedUnits, - configLeadTime, - avgLeadTimeDays, - dateLastSold, - ageDays, - isOldStock - } = product; - - const leadTime = configLeadTime ?? avgLeadTimeDays ?? 30; // Default lead time if none configured - const safetyThresholdDays = leadTime * 0.5; // Safety threshold is 50% of lead time - - // Check for overstock first - if (overstockedUnits != null && overstockedUnits > 0) { - return "Overstock"; - } - - // Check for critical stock - if (stockCoverInDays != null) { - // Stock is <= 0 or very low compared to lead time - if (currentStock <= 0 || stockCoverInDays <= 0) { - return "Critical"; - } - if (stockCoverInDays < safetyThresholdDays) { - return "Critical"; - } - } - - // Check for products that will need reordering soon - if (sellsOutInDays != null && sellsOutInDays < (leadTime + 7)) { // Within lead time + 1 week - // If also critically low, keep Critical status - if (stockCoverInDays != null && stockCoverInDays < safetyThresholdDays) { - return "Critical"; - } - return "Reorder Soon"; - } - - // Check for 'At Risk' - e.g., old stock or hasn't sold in a long time - const ninetyDaysAgo = new Date(); - ninetyDaysAgo.setDate(ninetyDaysAgo.getDate() - 90); - - if (isOldStock) { - return "At Risk"; - } - - if (dateLastSold && new Date(dateLastSold) < ninetyDaysAgo && (ageDays ?? 0) > 180) { - return "At Risk"; - } - - // Very high stock cover (more than a year) is at risk too - if (stockCoverInDays != null && stockCoverInDays > 365) { - return "At Risk"; - } - - // If none of the above, assume Healthy - return "Healthy"; -} - -//Returns a Badge component HTML string for a given product status -export function getStatusBadge(status: ProductStatus): string { - switch (status) { - case 'Critical': - return '
Critical
'; - case 'Reorder Soon': - return '
Reorder Soon
'; - case 'Healthy': - return '
Healthy
'; - case 'Overstock': - return '
Overstock
'; - case 'At Risk': - return '
At Risk
'; - case 'New': - return '
New
'; - default: - return '
Unknown
'; - } -} - -//Formatting utilities for displaying metrics +// Formatting utilities for displaying metrics export const formatCurrency = (value: number | null | undefined, digits = 2): string => { if (value == null) return 'N/A'; - return new Intl.NumberFormat('en-US', { - style: 'currency', - currency: 'USD', - minimumFractionDigits: digits, - maximumFractionDigits: digits + return new Intl.NumberFormat('en-US', { + style: 'currency', + currency: 'USD', + minimumFractionDigits: digits, + maximumFractionDigits: digits }).format(value); }; export const formatNumber = (value: number | null | undefined, digits = 0): string => { if (value == null) return 'N/A'; - return value.toLocaleString(undefined, { - minimumFractionDigits: digits, - maximumFractionDigits: digits + return value.toLocaleString(undefined, { + minimumFractionDigits: digits, + maximumFractionDigits: digits }); }; @@ -120,10 +30,10 @@ export const formatDays = (value: number | null | undefined, digits = 0): string export const formatDate = (dateString: string | null | undefined): string => { if (!dateString) return 'N/A'; try { - return new Date(dateString).toLocaleDateString('en-US', { - year: 'numeric', - month: 'short', - day: 'numeric' + return new Date(dateString).toLocaleDateString('en-US', { + year: 'numeric', + month: 'short', + day: 'numeric' }); } catch (e) { return 'Invalid Date'; @@ -133,4 +43,4 @@ export const formatDate = (dateString: string | null | undefined): string => { export const formatBoolean = (value: boolean | null | undefined): string => { if (value == null) return 'N/A'; return value ? 'Yes' : 'No'; -}; \ No newline at end of file +}; diff --git a/inventory/src/utils/transformUtils.ts b/inventory/src/utils/transformUtils.ts new file mode 100644 index 0000000..feb9c93 --- /dev/null +++ b/inventory/src/utils/transformUtils.ts @@ -0,0 +1,67 @@ +/** + * Shared utilities for transforming data between backend (snake_case) and frontend (camelCase) formats. + */ + +// Fields that should remain as strings even if they look numeric +const STRING_FIELDS = new Set([ + 'sku', 'title', 'brand', 'vendor', 'barcode', + 'vendor_reference', 'notions_reference', 'harmonized_tariff_code' +]); + +/** + * Converts a snake_case key to camelCase. + * Handles numeric suffixes like sales_7d -> sales7d + */ +export function snakeToCamelCase(key: string): string { + let result = key; + // First handle cases like sales_7d -> sales7d + result = result.replace(/_(\d+[a-z])/g, '$1'); + // Then handle regular snake_case -> camelCase + result = result.replace(/_([a-z])/g, (_, p1) => p1.toUpperCase()); + return result; +} + +/** + * Transforms a single metrics row from snake_case DB format to camelCase frontend format. + * Converts numeric strings to actual numbers except for known string fields and dates. + */ +export function transformMetricsRow(row: Record): Record { + const transformed: Record = {}; + + for (const [key, value] of Object.entries(row)) { + const camelKey = snakeToCamelCase(key); + + if ( + typeof value === 'string' && + value !== '' && + !isNaN(Number(value)) && + !key.toLowerCase().includes('date') && + !STRING_FIELDS.has(key) + ) { + transformed[camelKey] = Number(value); + } else { + transformed[camelKey] = value; + } + } + + // Ensure pid is a number + if (transformed.pid !== undefined) { + transformed.pid = typeof transformed.pid === 'string' + ? parseInt(transformed.pid, 10) + : transformed.pid; + } + + return transformed; +} + +/** + * Maps frontend operator names to backend query param suffixes. + */ +export const OPERATOR_MAP: Record = { + '=': 'eq', '!=': 'ne', '>': 'gt', '>=': 'gte', '<': 'lt', '<=': 'lte', + 'between': 'between', 'in': 'in', 'not_in': 'ne', + 'contains': 'ilike', 'equals': 'eq', + 'starts_with': 'starts_with', 'ends_with': 'ends_with', 'not_contains': 'not_contains', + 'is_empty': 'is_empty', 'is_not_empty': 'is_not_empty', + 'is_true': 'is_true', 'is_false': 'is_false', +}; diff --git a/inventory/tsconfig.tsbuildinfo b/inventory/tsconfig.tsbuildinfo index 51c3bd3..607578c 100644 --- a/inventory/tsconfig.tsbuildinfo +++ b/inventory/tsconfig.tsbuildinfo @@ -1 +1 @@ -{"root":["./src/app.tsx","./src/config.ts","./src/main.tsx","./src/vite-env.d.ts","./src/components/config.ts","./src/components/analytics/categoryperformance.tsx","./src/components/analytics/priceanalysis.tsx","./src/components/analytics/profitanalysis.tsx","./src/components/analytics/stockanalysis.tsx","./src/components/analytics/vendorperformance.tsx","./src/components/auth/firstaccessiblepage.tsx","./src/components/auth/protected.tsx","./src/components/auth/requireauth.tsx","./src/components/chat/chatroom.tsx","./src/components/chat/chattest.tsx","./src/components/chat/roomlist.tsx","./src/components/chat/searchresults.tsx","./src/components/dashboard/financialoverview.tsx","./src/components/dashboard/operationsmetrics.tsx","./src/components/dashboard/payrollmetrics.tsx","./src/components/dashboard/periodselectionpopover.tsx","./src/components/dashboard/shared/dashboardbadge.tsx","./src/components/dashboard/shared/dashboardcharttooltip.tsx","./src/components/dashboard/shared/dashboardsectionheader.tsx","./src/components/dashboard/shared/dashboardskeleton.tsx","./src/components/dashboard/shared/dashboardstatcard.tsx","./src/components/dashboard/shared/dashboardstatcardmini.tsx","./src/components/dashboard/shared/dashboardstates.tsx","./src/components/dashboard/shared/dashboardtable.tsx","./src/components/dashboard/shared/index.ts","./src/components/discount-simulator/configpanel.tsx","./src/components/discount-simulator/resultschart.tsx","./src/components/discount-simulator/resultstable.tsx","./src/components/discount-simulator/summarycard.tsx","./src/components/forecasting/daterangepickerquick.tsx","./src/components/forecasting/quickorderbuilder.tsx","./src/components/forecasting/columns.tsx","./src/components/layout/appsidebar.tsx","./src/components/layout/mainlayout.tsx","./src/components/layout/navuser.tsx","./src/components/newsletter/campaignhistorydialog.tsx","./src/components/newsletter/newsletterstats.tsx","./src/components/newsletter/recommendationtable.tsx","./src/components/overview/bestsellers.tsx","./src/components/overview/forecastmetrics.tsx","./src/components/overview/overstockmetrics.tsx","./src/components/overview/overview.tsx","./src/components/overview/purchasemetrics.tsx","./src/components/overview/replenishmentmetrics.tsx","./src/components/overview/salesmetrics.tsx","./src/components/overview/stockmetrics.tsx","./src/components/overview/topoverstockedproducts.tsx","./src/components/overview/topreplenishproducts.tsx","./src/components/overview/vendorperformance.tsx","./src/components/product-editor/comboboxfield.tsx","./src/components/product-editor/editablecomboboxfield.tsx","./src/components/product-editor/editableinput.tsx","./src/components/product-editor/editablemultiselect.tsx","./src/components/product-editor/imagemanager.tsx","./src/components/product-editor/producteditform.tsx","./src/components/product-editor/productsearch.tsx","./src/components/product-editor/types.ts","./src/components/product-import/createproductcategorydialog.tsx","./src/components/product-import/reactspreadsheetimport.tsx","./src/components/product-import/config.ts","./src/components/product-import/index.ts","./src/components/product-import/translationsrsiprops.ts","./src/components/product-import/types.ts","./src/components/product-import/components/closeconfirmationdialog.tsx","./src/components/product-import/components/modalwrapper.tsx","./src/components/product-import/components/providers.tsx","./src/components/product-import/components/savesessiondialog.tsx","./src/components/product-import/components/savedsessionslist.tsx","./src/components/product-import/components/table.tsx","./src/components/product-import/hooks/usersi.ts","./src/components/product-import/steps/steps.tsx","./src/components/product-import/steps/uploadflow.tsx","./src/components/product-import/steps/imageuploadstep/imageuploadstep.tsx","./src/components/product-import/steps/imageuploadstep/types.ts","./src/components/product-import/steps/imageuploadstep/components/droppablecontainer.tsx","./src/components/product-import/steps/imageuploadstep/components/genericdropzone.tsx","./src/components/product-import/steps/imageuploadstep/components/unassignedimagessection.tsx","./src/components/product-import/steps/imageuploadstep/components/productcard/copybutton.tsx","./src/components/product-import/steps/imageuploadstep/components/productcard/imagedropzone.tsx","./src/components/product-import/steps/imageuploadstep/components/productcard/productcard.tsx","./src/components/product-import/steps/imageuploadstep/components/productcard/sortableimage.tsx","./src/components/product-import/steps/imageuploadstep/components/unassignedimagessection/unassignedimageitem.tsx","./src/components/product-import/steps/imageuploadstep/hooks/usebulkimageupload.ts","./src/components/product-import/steps/imageuploadstep/hooks/usedraganddrop.ts","./src/components/product-import/steps/imageuploadstep/hooks/useproductimageoperations.ts","./src/components/product-import/steps/imageuploadstep/hooks/useproductimagesinit.ts","./src/components/product-import/steps/imageuploadstep/hooks/useurlimageupload.ts","./src/components/product-import/steps/matchcolumnsstep/matchcolumnsstep.tsx","./src/components/product-import/steps/matchcolumnsstep/types.ts","./src/components/product-import/steps/matchcolumnsstep/components/matchicon.tsx","./src/components/product-import/steps/matchcolumnsstep/components/templatecolumn.tsx","./src/components/product-import/steps/matchcolumnsstep/utils/findmatch.ts","./src/components/product-import/steps/matchcolumnsstep/utils/findunmatchedrequiredfields.ts","./src/components/product-import/steps/matchcolumnsstep/utils/getfieldoptions.ts","./src/components/product-import/steps/matchcolumnsstep/utils/getmatchedcolumns.ts","./src/components/product-import/steps/matchcolumnsstep/utils/normalizecheckboxvalue.ts","./src/components/product-import/steps/matchcolumnsstep/utils/normalizetabledata.ts","./src/components/product-import/steps/matchcolumnsstep/utils/setcolumn.ts","./src/components/product-import/steps/matchcolumnsstep/utils/setignorecolumn.ts","./src/components/product-import/steps/matchcolumnsstep/utils/setsubcolumn.ts","./src/components/product-import/steps/matchcolumnsstep/utils/uniqueentries.ts","./src/components/product-import/steps/selectheaderstep/selectheaderstep.tsx","./src/components/product-import/steps/selectheaderstep/components/selectheadertable.tsx","./src/components/product-import/steps/selectheaderstep/components/columns.tsx","./src/components/product-import/steps/selectsheetstep/selectsheetstep.tsx","./src/components/product-import/steps/uploadstep/uploadstep.tsx","./src/components/product-import/steps/uploadstep/components/dropzone.tsx","./src/components/product-import/steps/uploadstep/components/columns.tsx","./src/components/product-import/steps/uploadstep/utils/readfilesasync.ts","./src/components/product-import/steps/validationstep/index.tsx","./src/components/product-import/steps/validationstep/components/aisuggestionbadge.tsx","./src/components/product-import/steps/validationstep/components/copydownbanner.tsx","./src/components/product-import/steps/validationstep/components/floatingselectionbar.tsx","./src/components/product-import/steps/validationstep/components/initializingoverlay.tsx","./src/components/product-import/steps/validationstep/components/searchabletemplateselect.tsx","./src/components/product-import/steps/validationstep/components/suggestionbadges.tsx","./src/components/product-import/steps/validationstep/components/validationcontainer.tsx","./src/components/product-import/steps/validationstep/components/validationfooter.tsx","./src/components/product-import/steps/validationstep/components/validationtable.tsx","./src/components/product-import/steps/validationstep/components/validationtoolbar.tsx","./src/components/product-import/steps/validationstep/components/cells/checkboxcell.tsx","./src/components/product-import/steps/validationstep/components/cells/comboboxcell.tsx","./src/components/product-import/steps/validationstep/components/cells/inputcell.tsx","./src/components/product-import/steps/validationstep/components/cells/multiselectcell.tsx","./src/components/product-import/steps/validationstep/components/cells/multilineinput.tsx","./src/components/product-import/steps/validationstep/components/cells/selectcell.tsx","./src/components/product-import/steps/validationstep/contexts/aisuggestionscontext.tsx","./src/components/product-import/steps/validationstep/dialogs/aidebugdialog.tsx","./src/components/product-import/steps/validationstep/dialogs/aivalidationprogress.tsx","./src/components/product-import/steps/validationstep/dialogs/aivalidationresults.tsx","./src/components/product-import/steps/validationstep/dialogs/sanitycheckdialog.tsx","./src/components/product-import/steps/validationstep/hooks/useautoinlineaivalidation.ts","./src/components/product-import/steps/validationstep/hooks/usecopydownvalidation.ts","./src/components/product-import/steps/validationstep/hooks/usefieldoptions.ts","./src/components/product-import/steps/validationstep/hooks/useinlineaivalidation.ts","./src/components/product-import/steps/validationstep/hooks/useproductlines.ts","./src/components/product-import/steps/validationstep/hooks/usesanitycheck.ts","./src/components/product-import/steps/validationstep/hooks/usetemplatemanagement.ts","./src/components/product-import/steps/validationstep/hooks/useupcvalidation.ts","./src/components/product-import/steps/validationstep/hooks/usevalidationactions.ts","./src/components/product-import/steps/validationstep/hooks/useaivalidation/index.ts","./src/components/product-import/steps/validationstep/hooks/useaivalidation/useaiapi.ts","./src/components/product-import/steps/validationstep/hooks/useaivalidation/useaiprogress.ts","./src/components/product-import/steps/validationstep/hooks/useaivalidation/useaitransform.ts","./src/components/product-import/steps/validationstep/store/selectors.ts","./src/components/product-import/steps/validationstep/store/types.ts","./src/components/product-import/steps/validationstep/store/validationstore.ts","./src/components/product-import/steps/validationstep/utils/aivalidationutils.ts","./src/components/product-import/steps/validationstep/utils/countryutils.ts","./src/components/product-import/steps/validationstep/utils/datamutations.ts","./src/components/product-import/steps/validationstep/utils/inlineaipayload.ts","./src/components/product-import/steps/validationstep/utils/priceutils.ts","./src/components/product-import/steps/validationstep/utils/upcutils.ts","./src/components/product-import/steps/validationstepold/index.tsx","./src/components/product-import/steps/validationstepold/types.ts","./src/components/product-import/steps/validationstepold/components/aivalidationdialogs.tsx","./src/components/product-import/steps/validationstepold/components/basecellcontent.tsx","./src/components/product-import/steps/validationstepold/components/initializingvalidation.tsx","./src/components/product-import/steps/validationstepold/components/searchabletemplateselect.tsx","./src/components/product-import/steps/validationstepold/components/upcvalidationtableadapter.tsx","./src/components/product-import/steps/validationstepold/components/validationcell.tsx","./src/components/product-import/steps/validationstepold/components/validationcontainer.tsx","./src/components/product-import/steps/validationstepold/components/validationtable.tsx","./src/components/product-import/steps/validationstepold/components/cells/checkboxcell.tsx","./src/components/product-import/steps/validationstepold/components/cells/inputcell.tsx","./src/components/product-import/steps/validationstepold/components/cells/multiselectcell.tsx","./src/components/product-import/steps/validationstepold/components/cells/multilineinput.tsx","./src/components/product-import/steps/validationstepold/components/cells/selectcell.tsx","./src/components/product-import/steps/validationstepold/hooks/useaivalidation.tsx","./src/components/product-import/steps/validationstepold/hooks/usefieldvalidation.tsx","./src/components/product-import/steps/validationstepold/hooks/usefiltermanagement.tsx","./src/components/product-import/steps/validationstepold/hooks/useinitialvalidation.tsx","./src/components/product-import/steps/validationstepold/hooks/useproductlinesfetching.tsx","./src/components/product-import/steps/validationstepold/hooks/userowoperations.tsx","./src/components/product-import/steps/validationstepold/hooks/usetemplatemanagement.tsx","./src/components/product-import/steps/validationstepold/hooks/useuniqueitemnumbersvalidation.tsx","./src/components/product-import/steps/validationstepold/hooks/useuniquevalidation.tsx","./src/components/product-import/steps/validationstepold/hooks/useupcvalidation.tsx","./src/components/product-import/steps/validationstepold/hooks/usevalidation.tsx","./src/components/product-import/steps/validationstepold/hooks/usevalidationstate.tsx","./src/components/product-import/steps/validationstepold/hooks/validationtypes.ts","./src/components/product-import/steps/validationstepold/types/index.ts","./src/components/product-import/steps/validationstepold/utils/aivalidationutils.ts","./src/components/product-import/steps/validationstepold/utils/countryutils.ts","./src/components/product-import/steps/validationstepold/utils/datamutations.ts","./src/components/product-import/steps/validationstepold/utils/priceutils.ts","./src/components/product-import/steps/validationstepold/utils/upcutils.ts","./src/components/product-import/utils/exceedsmaxrecords.ts","./src/components/product-import/utils/mapdata.ts","./src/components/product-import/utils/mapworkbook.ts","./src/components/product-import/utils/steps.ts","./src/components/products/productdetail.tsx","./src/components/products/productfilters.tsx","./src/components/products/producttable.tsx","./src/components/products/producttableskeleton.tsx","./src/components/products/productviews.tsx","./src/components/products/products.tsx","./src/components/purchase-orders/categorymetricscard.tsx","./src/components/purchase-orders/filtercontrols.tsx","./src/components/purchase-orders/ordermetricscard.tsx","./src/components/purchase-orders/paginationcontrols.tsx","./src/components/purchase-orders/purchaseorderaccordion.tsx","./src/components/purchase-orders/purchaseorderstable.tsx","./src/components/purchase-orders/vendormetricscard.tsx","./src/components/settings/datamanagement.tsx","./src/components/settings/globalsettings.tsx","./src/components/settings/permissionselector.tsx","./src/components/settings/productsettings.tsx","./src/components/settings/promptmanagement.tsx","./src/components/settings/reusableimagemanagement.tsx","./src/components/settings/templatemanagement.tsx","./src/components/settings/userform.tsx","./src/components/settings/userlist.tsx","./src/components/settings/usermanagement.tsx","./src/components/settings/vendorsettings.tsx","./src/components/templates/searchproducttemplatedialog.tsx","./src/components/templates/templateform.tsx","./src/components/ui/accordion.tsx","./src/components/ui/alert-dialog.tsx","./src/components/ui/alert.tsx","./src/components/ui/avatar.tsx","./src/components/ui/badge.tsx","./src/components/ui/button.tsx","./src/components/ui/calendar.tsx","./src/components/ui/card.tsx","./src/components/ui/carousel.tsx","./src/components/ui/checkbox.tsx","./src/components/ui/code.tsx","./src/components/ui/collapsible.tsx","./src/components/ui/command.tsx","./src/components/ui/date-range-picker-narrow.tsx","./src/components/ui/date-range-picker.tsx","./src/components/ui/dialog.tsx","./src/components/ui/drawer.tsx","./src/components/ui/dropdown-menu.tsx","./src/components/ui/form.tsx","./src/components/ui/input.tsx","./src/components/ui/label.tsx","./src/components/ui/page-loading.tsx","./src/components/ui/pagination.tsx","./src/components/ui/popover.tsx","./src/components/ui/progress.tsx","./src/components/ui/radio-group.tsx","./src/components/ui/scroll-area.tsx","./src/components/ui/select.tsx","./src/components/ui/separator.tsx","./src/components/ui/sheet.tsx","./src/components/ui/sidebar.tsx","./src/components/ui/skeleton.tsx","./src/components/ui/sonner.tsx","./src/components/ui/switch.tsx","./src/components/ui/table.tsx","./src/components/ui/tabs.tsx","./src/components/ui/textarea.tsx","./src/components/ui/toast.tsx","./src/components/ui/toaster.tsx","./src/components/ui/toggle-group.tsx","./src/components/ui/toggle.tsx","./src/components/ui/tooltip.tsx","./src/config/dashboard.ts","./src/contexts/authcontext.tsx","./src/contexts/dashboardscrollcontext.tsx","./src/contexts/importsessioncontext.tsx","./src/hooks/use-mobile.tsx","./src/hooks/use-toast.ts","./src/hooks/usedebounce.ts","./src/hooks/useimportautosave.ts","./src/lib/utils.ts","./src/lib/dashboard/chartconfig.ts","./src/lib/dashboard/designtokens.ts","./src/pages/analytics.tsx","./src/pages/blackfridaydashboard.tsx","./src/pages/brands.tsx","./src/pages/categories.tsx","./src/pages/chat.tsx","./src/pages/dashboard.tsx","./src/pages/discountsimulator.tsx","./src/pages/forecasting.tsx","./src/pages/htslookup.tsx","./src/pages/import.tsx","./src/pages/login.tsx","./src/pages/newsletter.tsx","./src/pages/overview.tsx","./src/pages/producteditor.tsx","./src/pages/products.tsx","./src/pages/purchaseorders.tsx","./src/pages/settings.tsx","./src/pages/smalldashboard.tsx","./src/pages/vendors.tsx","./src/services/apiv2.ts","./src/services/importsessionapi.ts","./src/services/producteditor.ts","./src/types/dashboard-shims.d.ts","./src/types/dashboard.d.ts","./src/types/discount-simulator.ts","./src/types/globals.d.ts","./src/types/importsession.ts","./src/types/products.ts","./src/types/react-data-grid.d.ts","./src/types/status-codes.ts","./src/utils/emojiutils.ts","./src/utils/naturallanguageperiod.ts","./src/utils/productutils.ts"],"version":"5.6.3"} \ No newline at end of file +{"root":["./src/app.tsx","./src/config.ts","./src/main.tsx","./src/vite-env.d.ts","./src/components/config.ts","./src/components/analytics/categoryperformance.tsx","./src/components/analytics/priceanalysis.tsx","./src/components/analytics/profitanalysis.tsx","./src/components/analytics/stockanalysis.tsx","./src/components/analytics/vendorperformance.tsx","./src/components/auth/firstaccessiblepage.tsx","./src/components/auth/protected.tsx","./src/components/auth/requireauth.tsx","./src/components/chat/chatroom.tsx","./src/components/chat/chattest.tsx","./src/components/chat/roomlist.tsx","./src/components/chat/searchresults.tsx","./src/components/dashboard/financialoverview.tsx","./src/components/dashboard/operationsmetrics.tsx","./src/components/dashboard/payrollmetrics.tsx","./src/components/dashboard/periodselectionpopover.tsx","./src/components/dashboard/shared/dashboardbadge.tsx","./src/components/dashboard/shared/dashboardcharttooltip.tsx","./src/components/dashboard/shared/dashboardsectionheader.tsx","./src/components/dashboard/shared/dashboardskeleton.tsx","./src/components/dashboard/shared/dashboardstatcard.tsx","./src/components/dashboard/shared/dashboardstatcardmini.tsx","./src/components/dashboard/shared/dashboardstates.tsx","./src/components/dashboard/shared/dashboardtable.tsx","./src/components/dashboard/shared/index.ts","./src/components/discount-simulator/configpanel.tsx","./src/components/discount-simulator/resultschart.tsx","./src/components/discount-simulator/resultstable.tsx","./src/components/discount-simulator/summarycard.tsx","./src/components/forecasting/daterangepickerquick.tsx","./src/components/forecasting/quickorderbuilder.tsx","./src/components/forecasting/columns.tsx","./src/components/layout/appsidebar.tsx","./src/components/layout/mainlayout.tsx","./src/components/layout/navuser.tsx","./src/components/newsletter/campaignhistorydialog.tsx","./src/components/newsletter/newsletterstats.tsx","./src/components/newsletter/recommendationtable.tsx","./src/components/overview/bestsellers.tsx","./src/components/overview/forecastmetrics.tsx","./src/components/overview/overstockmetrics.tsx","./src/components/overview/overview.tsx","./src/components/overview/purchasemetrics.tsx","./src/components/overview/replenishmentmetrics.tsx","./src/components/overview/salesmetrics.tsx","./src/components/overview/stockmetrics.tsx","./src/components/overview/topoverstockedproducts.tsx","./src/components/overview/topreplenishproducts.tsx","./src/components/overview/vendorperformance.tsx","./src/components/product-editor/comboboxfield.tsx","./src/components/product-editor/editablecomboboxfield.tsx","./src/components/product-editor/editableinput.tsx","./src/components/product-editor/editablemultiselect.tsx","./src/components/product-editor/imagemanager.tsx","./src/components/product-editor/producteditform.tsx","./src/components/product-editor/productsearch.tsx","./src/components/product-editor/types.ts","./src/components/product-import/createproductcategorydialog.tsx","./src/components/product-import/reactspreadsheetimport.tsx","./src/components/product-import/config.ts","./src/components/product-import/index.ts","./src/components/product-import/translationsrsiprops.ts","./src/components/product-import/types.ts","./src/components/product-import/components/closeconfirmationdialog.tsx","./src/components/product-import/components/modalwrapper.tsx","./src/components/product-import/components/providers.tsx","./src/components/product-import/components/savesessiondialog.tsx","./src/components/product-import/components/savedsessionslist.tsx","./src/components/product-import/components/table.tsx","./src/components/product-import/hooks/usersi.ts","./src/components/product-import/steps/steps.tsx","./src/components/product-import/steps/uploadflow.tsx","./src/components/product-import/steps/imageuploadstep/imageuploadstep.tsx","./src/components/product-import/steps/imageuploadstep/types.ts","./src/components/product-import/steps/imageuploadstep/components/droppablecontainer.tsx","./src/components/product-import/steps/imageuploadstep/components/genericdropzone.tsx","./src/components/product-import/steps/imageuploadstep/components/unassignedimagessection.tsx","./src/components/product-import/steps/imageuploadstep/components/productcard/copybutton.tsx","./src/components/product-import/steps/imageuploadstep/components/productcard/imagedropzone.tsx","./src/components/product-import/steps/imageuploadstep/components/productcard/productcard.tsx","./src/components/product-import/steps/imageuploadstep/components/productcard/sortableimage.tsx","./src/components/product-import/steps/imageuploadstep/components/unassignedimagessection/unassignedimageitem.tsx","./src/components/product-import/steps/imageuploadstep/hooks/usebulkimageupload.ts","./src/components/product-import/steps/imageuploadstep/hooks/usedraganddrop.ts","./src/components/product-import/steps/imageuploadstep/hooks/useproductimageoperations.ts","./src/components/product-import/steps/imageuploadstep/hooks/useproductimagesinit.ts","./src/components/product-import/steps/imageuploadstep/hooks/useurlimageupload.ts","./src/components/product-import/steps/matchcolumnsstep/matchcolumnsstep.tsx","./src/components/product-import/steps/matchcolumnsstep/types.ts","./src/components/product-import/steps/matchcolumnsstep/components/matchicon.tsx","./src/components/product-import/steps/matchcolumnsstep/components/templatecolumn.tsx","./src/components/product-import/steps/matchcolumnsstep/utils/findmatch.ts","./src/components/product-import/steps/matchcolumnsstep/utils/findunmatchedrequiredfields.ts","./src/components/product-import/steps/matchcolumnsstep/utils/getfieldoptions.ts","./src/components/product-import/steps/matchcolumnsstep/utils/getmatchedcolumns.ts","./src/components/product-import/steps/matchcolumnsstep/utils/normalizecheckboxvalue.ts","./src/components/product-import/steps/matchcolumnsstep/utils/normalizetabledata.ts","./src/components/product-import/steps/matchcolumnsstep/utils/setcolumn.ts","./src/components/product-import/steps/matchcolumnsstep/utils/setignorecolumn.ts","./src/components/product-import/steps/matchcolumnsstep/utils/setsubcolumn.ts","./src/components/product-import/steps/matchcolumnsstep/utils/uniqueentries.ts","./src/components/product-import/steps/selectheaderstep/selectheaderstep.tsx","./src/components/product-import/steps/selectheaderstep/components/selectheadertable.tsx","./src/components/product-import/steps/selectheaderstep/components/columns.tsx","./src/components/product-import/steps/selectsheetstep/selectsheetstep.tsx","./src/components/product-import/steps/uploadstep/uploadstep.tsx","./src/components/product-import/steps/uploadstep/components/dropzone.tsx","./src/components/product-import/steps/uploadstep/components/columns.tsx","./src/components/product-import/steps/uploadstep/utils/readfilesasync.ts","./src/components/product-import/steps/validationstep/index.tsx","./src/components/product-import/steps/validationstep/components/aisuggestionbadge.tsx","./src/components/product-import/steps/validationstep/components/copydownbanner.tsx","./src/components/product-import/steps/validationstep/components/floatingselectionbar.tsx","./src/components/product-import/steps/validationstep/components/initializingoverlay.tsx","./src/components/product-import/steps/validationstep/components/searchabletemplateselect.tsx","./src/components/product-import/steps/validationstep/components/suggestionbadges.tsx","./src/components/product-import/steps/validationstep/components/validationcontainer.tsx","./src/components/product-import/steps/validationstep/components/validationfooter.tsx","./src/components/product-import/steps/validationstep/components/validationtable.tsx","./src/components/product-import/steps/validationstep/components/validationtoolbar.tsx","./src/components/product-import/steps/validationstep/components/cells/checkboxcell.tsx","./src/components/product-import/steps/validationstep/components/cells/comboboxcell.tsx","./src/components/product-import/steps/validationstep/components/cells/inputcell.tsx","./src/components/product-import/steps/validationstep/components/cells/multiselectcell.tsx","./src/components/product-import/steps/validationstep/components/cells/multilineinput.tsx","./src/components/product-import/steps/validationstep/components/cells/selectcell.tsx","./src/components/product-import/steps/validationstep/contexts/aisuggestionscontext.tsx","./src/components/product-import/steps/validationstep/dialogs/aidebugdialog.tsx","./src/components/product-import/steps/validationstep/dialogs/aivalidationprogress.tsx","./src/components/product-import/steps/validationstep/dialogs/aivalidationresults.tsx","./src/components/product-import/steps/validationstep/dialogs/sanitycheckdialog.tsx","./src/components/product-import/steps/validationstep/hooks/useautoinlineaivalidation.ts","./src/components/product-import/steps/validationstep/hooks/usecopydownvalidation.ts","./src/components/product-import/steps/validationstep/hooks/usefieldoptions.ts","./src/components/product-import/steps/validationstep/hooks/useinlineaivalidation.ts","./src/components/product-import/steps/validationstep/hooks/useproductlines.ts","./src/components/product-import/steps/validationstep/hooks/usesanitycheck.ts","./src/components/product-import/steps/validationstep/hooks/usetemplatemanagement.ts","./src/components/product-import/steps/validationstep/hooks/useupcvalidation.ts","./src/components/product-import/steps/validationstep/hooks/usevalidationactions.ts","./src/components/product-import/steps/validationstep/hooks/useaivalidation/index.ts","./src/components/product-import/steps/validationstep/hooks/useaivalidation/useaiapi.ts","./src/components/product-import/steps/validationstep/hooks/useaivalidation/useaiprogress.ts","./src/components/product-import/steps/validationstep/hooks/useaivalidation/useaitransform.ts","./src/components/product-import/steps/validationstep/store/selectors.ts","./src/components/product-import/steps/validationstep/store/types.ts","./src/components/product-import/steps/validationstep/store/validationstore.ts","./src/components/product-import/steps/validationstep/utils/aivalidationutils.ts","./src/components/product-import/steps/validationstep/utils/countryutils.ts","./src/components/product-import/steps/validationstep/utils/datamutations.ts","./src/components/product-import/steps/validationstep/utils/inlineaipayload.ts","./src/components/product-import/steps/validationstep/utils/priceutils.ts","./src/components/product-import/steps/validationstep/utils/upcutils.ts","./src/components/product-import/steps/validationstepold/index.tsx","./src/components/product-import/steps/validationstepold/types.ts","./src/components/product-import/steps/validationstepold/components/aivalidationdialogs.tsx","./src/components/product-import/steps/validationstepold/components/basecellcontent.tsx","./src/components/product-import/steps/validationstepold/components/initializingvalidation.tsx","./src/components/product-import/steps/validationstepold/components/searchabletemplateselect.tsx","./src/components/product-import/steps/validationstepold/components/upcvalidationtableadapter.tsx","./src/components/product-import/steps/validationstepold/components/validationcell.tsx","./src/components/product-import/steps/validationstepold/components/validationcontainer.tsx","./src/components/product-import/steps/validationstepold/components/validationtable.tsx","./src/components/product-import/steps/validationstepold/components/cells/checkboxcell.tsx","./src/components/product-import/steps/validationstepold/components/cells/inputcell.tsx","./src/components/product-import/steps/validationstepold/components/cells/multiselectcell.tsx","./src/components/product-import/steps/validationstepold/components/cells/multilineinput.tsx","./src/components/product-import/steps/validationstepold/components/cells/selectcell.tsx","./src/components/product-import/steps/validationstepold/hooks/useaivalidation.tsx","./src/components/product-import/steps/validationstepold/hooks/usefieldvalidation.tsx","./src/components/product-import/steps/validationstepold/hooks/usefiltermanagement.tsx","./src/components/product-import/steps/validationstepold/hooks/useinitialvalidation.tsx","./src/components/product-import/steps/validationstepold/hooks/useproductlinesfetching.tsx","./src/components/product-import/steps/validationstepold/hooks/userowoperations.tsx","./src/components/product-import/steps/validationstepold/hooks/usetemplatemanagement.tsx","./src/components/product-import/steps/validationstepold/hooks/useuniqueitemnumbersvalidation.tsx","./src/components/product-import/steps/validationstepold/hooks/useuniquevalidation.tsx","./src/components/product-import/steps/validationstepold/hooks/useupcvalidation.tsx","./src/components/product-import/steps/validationstepold/hooks/usevalidation.tsx","./src/components/product-import/steps/validationstepold/hooks/usevalidationstate.tsx","./src/components/product-import/steps/validationstepold/hooks/validationtypes.ts","./src/components/product-import/steps/validationstepold/types/index.ts","./src/components/product-import/steps/validationstepold/utils/aivalidationutils.ts","./src/components/product-import/steps/validationstepold/utils/countryutils.ts","./src/components/product-import/steps/validationstepold/utils/datamutations.ts","./src/components/product-import/steps/validationstepold/utils/priceutils.ts","./src/components/product-import/steps/validationstepold/utils/upcutils.ts","./src/components/product-import/utils/exceedsmaxrecords.ts","./src/components/product-import/utils/mapdata.ts","./src/components/product-import/utils/mapworkbook.ts","./src/components/product-import/utils/steps.ts","./src/components/products/productdetail.tsx","./src/components/products/productfilters.tsx","./src/components/products/producttable.tsx","./src/components/products/producttableskeleton.tsx","./src/components/products/productviews.tsx","./src/components/products/products.tsx","./src/components/products/statusbadge.tsx","./src/components/products/columndefinitions.ts","./src/components/purchase-orders/categorymetricscard.tsx","./src/components/purchase-orders/filtercontrols.tsx","./src/components/purchase-orders/ordermetricscard.tsx","./src/components/purchase-orders/paginationcontrols.tsx","./src/components/purchase-orders/purchaseorderaccordion.tsx","./src/components/purchase-orders/purchaseorderstable.tsx","./src/components/purchase-orders/vendormetricscard.tsx","./src/components/settings/datamanagement.tsx","./src/components/settings/globalsettings.tsx","./src/components/settings/permissionselector.tsx","./src/components/settings/productsettings.tsx","./src/components/settings/promptmanagement.tsx","./src/components/settings/reusableimagemanagement.tsx","./src/components/settings/templatemanagement.tsx","./src/components/settings/userform.tsx","./src/components/settings/userlist.tsx","./src/components/settings/usermanagement.tsx","./src/components/settings/vendorsettings.tsx","./src/components/templates/searchproducttemplatedialog.tsx","./src/components/templates/templateform.tsx","./src/components/ui/accordion.tsx","./src/components/ui/alert-dialog.tsx","./src/components/ui/alert.tsx","./src/components/ui/avatar.tsx","./src/components/ui/badge.tsx","./src/components/ui/button.tsx","./src/components/ui/calendar.tsx","./src/components/ui/card.tsx","./src/components/ui/carousel.tsx","./src/components/ui/checkbox.tsx","./src/components/ui/code.tsx","./src/components/ui/collapsible.tsx","./src/components/ui/command.tsx","./src/components/ui/date-range-picker-narrow.tsx","./src/components/ui/date-range-picker.tsx","./src/components/ui/dialog.tsx","./src/components/ui/drawer.tsx","./src/components/ui/dropdown-menu.tsx","./src/components/ui/form.tsx","./src/components/ui/input.tsx","./src/components/ui/label.tsx","./src/components/ui/page-loading.tsx","./src/components/ui/pagination.tsx","./src/components/ui/popover.tsx","./src/components/ui/progress.tsx","./src/components/ui/radio-group.tsx","./src/components/ui/scroll-area.tsx","./src/components/ui/select.tsx","./src/components/ui/separator.tsx","./src/components/ui/sheet.tsx","./src/components/ui/sidebar.tsx","./src/components/ui/skeleton.tsx","./src/components/ui/sonner.tsx","./src/components/ui/switch.tsx","./src/components/ui/table.tsx","./src/components/ui/tabs.tsx","./src/components/ui/textarea.tsx","./src/components/ui/toast.tsx","./src/components/ui/toaster.tsx","./src/components/ui/toggle-group.tsx","./src/components/ui/toggle.tsx","./src/components/ui/tooltip.tsx","./src/config/dashboard.ts","./src/contexts/authcontext.tsx","./src/contexts/dashboardscrollcontext.tsx","./src/contexts/importsessioncontext.tsx","./src/hooks/use-mobile.tsx","./src/hooks/use-toast.ts","./src/hooks/usedebounce.ts","./src/hooks/useimportautosave.ts","./src/lib/utils.ts","./src/lib/dashboard/chartconfig.ts","./src/lib/dashboard/designtokens.ts","./src/pages/analytics.tsx","./src/pages/blackfridaydashboard.tsx","./src/pages/brands.tsx","./src/pages/categories.tsx","./src/pages/chat.tsx","./src/pages/dashboard.tsx","./src/pages/discountsimulator.tsx","./src/pages/forecasting.tsx","./src/pages/htslookup.tsx","./src/pages/import.tsx","./src/pages/login.tsx","./src/pages/newsletter.tsx","./src/pages/overview.tsx","./src/pages/producteditor.tsx","./src/pages/products.tsx","./src/pages/purchaseorders.tsx","./src/pages/settings.tsx","./src/pages/smalldashboard.tsx","./src/pages/vendors.tsx","./src/services/apiv2.ts","./src/services/importsessionapi.ts","./src/services/producteditor.ts","./src/types/dashboard-shims.d.ts","./src/types/dashboard.d.ts","./src/types/discount-simulator.ts","./src/types/globals.d.ts","./src/types/importsession.ts","./src/types/products.ts","./src/types/react-data-grid.d.ts","./src/types/status-codes.ts","./src/utils/emojiutils.ts","./src/utils/naturallanguageperiod.ts","./src/utils/productutils.ts","./src/utils/transformutils.ts"],"version":"5.6.3"} \ No newline at end of file