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