From f3a39e39ba99ffc285d494b350896370f9906706 Mon Sep 17 00:00:00 2001 From: Matt Date: Wed, 15 Jan 2025 14:35:19 -0500 Subject: [PATCH] Add At Risk to products views --- .../components/products/ProductFilters.tsx | 11 ++--- .../src/components/products/ProductTable.tsx | 18 +++++---- .../src/components/products/ProductViews.tsx | 40 +++++++++++++------ inventory/src/pages/Products.tsx | 4 +- 4 files changed, 46 insertions(+), 27 deletions(-) diff --git a/inventory/src/components/products/ProductFilters.tsx b/inventory/src/components/products/ProductFilters.tsx index f066810..6bd28ac 100644 --- a/inventory/src/components/products/ProductFilters.tsx +++ b/inventory/src/components/products/ProductFilters.tsx @@ -49,11 +49,12 @@ const FILTER_OPTIONS: FilterOption[] = [ label: 'Stock Status', type: 'select', options: [ - { label: 'Critical', value: 'Critical' }, - { label: 'Reorder', value: 'Reorder' }, - { label: 'Healthy', value: 'Healthy' }, - { label: 'Overstocked', value: 'Overstocked' }, - { label: 'New', value: 'New' } + { label: 'Critical', value: 'critical' }, + { label: 'At Risk', value: 'at-risk' }, + { label: 'Reorder', value: 'reorder' }, + { label: 'Healthy', value: 'healthy' }, + { label: 'Overstocked', value: 'overstocked' }, + { label: 'New', value: 'new' } ], group: 'Inventory' }, diff --git a/inventory/src/components/products/ProductTable.tsx b/inventory/src/components/products/ProductTable.tsx index b569b34..184bfb3 100644 --- a/inventory/src/components/products/ProductTable.tsx +++ b/inventory/src/components/products/ProductTable.tsx @@ -85,7 +85,8 @@ function SortableHeader({ column, columnDef, onSort, sortColumn, sortDirection } style={style} className={cn( "cursor-pointer select-none", - columnDef?.width + columnDef?.width, + sortColumn === column && "bg-accent/50" )} {...attributes} {...listeners} @@ -95,8 +96,8 @@ function SortableHeader({ column, columnDef, onSort, sortColumn, sortDirection } {columnDef?.label ?? column} {sortColumn === column && ( sortDirection === 'desc' - ? - : + ? + : )} @@ -154,21 +155,22 @@ export function ProductTable({ const getStockStatus = (status: string | undefined) => { if (!status) return null; - switch (status.toLowerCase()) { + const normalizedStatus = status.toLowerCase().replace(/-/g, ' '); + switch (normalizedStatus) { case 'critical': return Critical; case 'reorder': - return Reorder; + return Reorder; case 'healthy': - return Healthy; + return Healthy; case 'overstocked': return Overstocked; case 'new': return New; case 'out of stock': return Out of Stock; - case 'at-risk': - return At Risk; + case 'at risk': + return At Risk; default: return {status}; } diff --git a/inventory/src/components/products/ProductViews.tsx b/inventory/src/components/products/ProductViews.tsx index 3eaa6e4..eeb5764 100644 --- a/inventory/src/components/products/ProductViews.tsx +++ b/inventory/src/components/products/ProductViews.tsx @@ -1,6 +1,15 @@ import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Product } from "@/types/products" -import { AlertCircle, AlertTriangle, CheckCircle2, PackageSearch, Sparkles } from "lucide-react" +import { + AlertTriangle, + AlertCircle, + CheckCircle2, + PackageSearch, + Sparkles, + Timer, + PackagePlus, + PackageX +} from "lucide-react" export type ProductView = { id: string @@ -19,35 +28,42 @@ export const PRODUCT_VIEWS: ProductView[] = [ columns: ["image", "title", "SKU", "stock_quantity", "price", "stock_status"] }, { - id: "Critical", + id: "critical", label: "Critical Stock", icon: AlertTriangle, iconClassName: "", - columns: ["image", "title", "SKU", "stock_quantity", "daily_sales_avg", "reorder_qty", "replenishable", "last_purchase_date", "lead_time_status"] + columns: ["image", "title", "SKU", "stock_quantity", "daily_sales_avg", "reorder_qty", "last_purchase_date", "lead_time_status"] }, { - id: "Reorder", + id: "reorder", label: "Reorder Soon", - icon: AlertCircle, + icon: PackagePlus, iconClassName: "", - columns: ["image", "title", "SKU", "stock_quantity", "daily_sales_avg", "reorder_qty", "replenishable", "last_purchase_date", "lead_time_status"] + columns: ["image", "title", "SKU", "stock_quantity", "daily_sales_avg", "reorder_qty", "last_purchase_date", "lead_time_status"] }, { - id: "Healthy", + id: "healthy", label: "Healthy Stock", icon: CheckCircle2, iconClassName: "", columns: ["image", "title", "stock_quantity", "daily_sales_avg", "stock_status", "abc_class"] }, { - id: "Overstocked", - label: "Overstock", - icon: PackageSearch, + id: "at-risk", + label: "At Risk", + icon: Timer, iconClassName: "", - columns: ["image", "title", "stock_quantity", "daily_sales_avg", "overstocked_amt", "replenishable", "last_sale_date", "abc_class"] + columns: ["image", "title", "stock_quantity", "daily_sales_avg", "weekly_sales_avg", "days_of_inventory", "last_sale_date"] }, { - id: "New", + id: "overstocked", + label: "Overstock", + icon: PackageX, + iconClassName: "", + columns: ["image", "title", "stock_quantity", "daily_sales_avg", "overstocked_amt", "days_of_inventory", "last_sale_date"] + }, + { + id: "new", label: "New Products", icon: Sparkles, iconClassName: "", diff --git a/inventory/src/pages/Products.tsx b/inventory/src/pages/Products.tsx index 053c4e6..72def4d 100644 --- a/inventory/src/pages/Products.tsx +++ b/inventory/src/pages/Products.tsx @@ -127,8 +127,8 @@ const VIEW_COLUMNS: Record = { 'stock_quantity', 'daily_sales_avg', 'weekly_sales_avg', - 'monthly_sales_avg', 'days_of_inventory', + 'last_sale_date', ], new: [ 'image', @@ -241,7 +241,7 @@ export function Products() { // Add view filter if (activeView !== 'all') { - params.append('stockStatus', activeView); + params.append('stockStatus', activeView === 'at-risk' ? 'At Risk' : activeView); } // Add showNonReplenishable param