-
- {product?.image && (
-
-
- {isLoading ? (
-
- 
+
+ {/* Header */}
+
-
-
+
-
-
+ {isLoading ? (
+
- )}
-
+ 
+
+ ) : (
+ No Image
+ )}
+
+
+ {isLoading ?
+
+ {isLoading ?
+ {/* Show Status Badge */}
+ {!isLoading && product && (
+
+ )}
+
- {product?.title || 'Loading...'}
- {product?.SKU || ''}
-
-
-
- Overview
- Inventory
- Sales
- Purchase History
- Financial
- Vendor
- Additional Info
-
+
-
-
- ) : (
-
-
-
Basic Information
--
-
- Company -
- {product?.brand || "N/A"} -
- Supplier -
- {product?.vendor || "N/A"} -
- Supplier # -
- {product?.vendor_reference || "N/A"} -
- UPC -
- {product?.barcode || "N/A"} -
- Description -
- {product.description} + {/* Content Area */} +
- Categories -
-
- {product?.category_paths ?
- Object.entries(product.category_paths).map(([key, fullPath]) => {
- const [, leafCategory] = key.split(':');
- return (
- - - {leafCategory} - - - {fullPath} - -- ); - }) - : "N/A"} -
-
- Tags -
- - N/A - -
- Price -
- ${formatPrice(product?.price)} -
- Default Price -
- ${formatPrice(product?.regular_price)} -
- Cost Price -
- ${formatPrice(product?.cost_price)} -
- Landing Cost -
- ${formatPrice(product?.landing_cost_price)} -
- Shelf Count -
- {product?.stock_quantity} -
- Status -
- {product?.metrics?.stock_status || "N/A"} -
- Days of Inventory -
- {product?.metrics?.days_of_inventory || 0} days -
- Daily Sales -
- {product?.metrics?.daily_sales_avg?.toFixed(1) || "0.0"} units -
- Weekly Sales -
- {product?.metrics?.weekly_sales_avg?.toFixed(1) || "0.0"} units -
- Monthly Sales -
- {product?.metrics?.monthly_sales_avg?.toFixed(1) || "0.0"} units -
- Total Sold -
- {product.total_sold} -
- Rating -
- - {product.rating.toFixed(1)} - ★ - -
- Reviews -
- {product.reviews} -
- In Baskets -
- {product.baskets} -
- Notify Requests -
- {product.notifies} -
- Last Sold -
- {formatDate(product.date_last_sold)} -
- Revenue -
- ${formatPrice(product?.metrics?.total_revenue)} -
- Gross Profit -
- ${formatPrice(product?.metrics?.gross_profit)} -
- Cost of Goods Sold -
- ${formatPrice(product?.metrics?.cost_of_goods_sold)} -
- Margin -
- {product?.metrics?.avg_margin_percent?.toFixed(2) || "0.00"}% -
- GMROI -
- {product?.metrics?.gmroi?.toFixed(2) || "0.00"} -
- Current Lead Time -
- {product?.metrics?.current_lead_time || "N/A"} -
- Target Lead Time -
- {product?.metrics?.target_lead_time || "N/A"} -
- Lead Time Status -
- {product?.metrics?.lead_time_status || "N/A"} -
- Shelf Count -
- {product?.stock_quantity} -
- Status -
- {product?.metrics?.stock_status || "N/A"} -
- Days of Inventory -
- {product?.metrics?.days_of_inventory || 0} -
- Preorders -
- {product?.preorder_count} -
- Notions Inventory -
- {product?.notions_inv_count} -
- Reorder Point -
- {product?.metrics?.reorder_point || 0} -
- Safety Stock -
- {product?.metrics?.safety_stock || 0} -
- ABC Class -
- {product?.metrics?.abc_class || "N/A"} -
- Total Sold -
- {product.total_sold} -
- Rating -
- - {product.rating.toFixed(1)} - ★ - -
- Reviews -
- {product.reviews} -
- In Baskets -
- {product.baskets} -
- Notify Requests -
- {product.notifies} -
- Last Sold -
- {formatDate(product.date_last_sold)} -
- Gross Profit -
- ${formatPrice(product?.metrics?.gross_profit)} -
- GMROI -
- {product?.metrics?.gmroi?.toFixed(2) || "0.00"} -
- Margin % -
- {product?.metrics?.avg_margin_percent?.toFixed(2) || "0.00"}% -
- Cost of Goods Sold -
- ${formatPrice(product?.metrics?.cost_of_goods_sold)} -
- Landing Cost -
- ${formatPrice(product?.landing_cost_price)} -
- Lead Time -
- {product?.vendor_performance?.avg_lead_time_days?.toFixed(1) || "N/A"} days -
- On-Time Delivery -
- {product?.vendor_performance?.on_time_delivery_rate?.toFixed(1) || "N/A"}% -
- Order Fill Rate -
- {product?.vendor_performance?.order_fill_rate?.toFixed(1) || "N/A"}% -
- Total Orders -
- {product?.vendor_performance?.total_orders || 0} -
- Total Orders -
- {product?.vendor_performance?.total_orders} -
- Late Orders -
- {product?.vendor_performance?.total_late_orders} -
- Total Purchase Value -
- ${formatPrice(product?.vendor_performance?.total_purchase_value)} -
- Avg Order Value -
- ${formatPrice(product?.vendor_performance?.avg_order_value)} -
- Description -
- {product.description} -
- Created Date -
- {formatDate(product?.created_at)} -
- Last Updated -
- {formatDate(product?.updated_at)} -
- Product ID -
- {product?.pid} -
- Line -
- {product?.line || 'N/A'} -
- Subline -
- {product?.subline || 'N/A'} -
- Artist -
- {product?.artist || 'N/A'} -
- Country of Origin -
- {product?.country_of_origin || 'N/A'} -
- Location -
- {product?.location || 'N/A'} -
- HTS Code -
- {product?.harmonized_tariff_code || 'N/A'} -
- Notions Reference -
- {product?.notions_reference || 'N/A'} -
- Weight -
- {product?.weight ? `${product.weight} kg` : 'N/A'} -
- Dimensions -
- - {product?.dimensions - ? `${product.dimensions.length} × ${product.dimensions.width} × ${product.dimensions.height} cm` - : 'N/A' - } - -
- Rating -
- - {product?.rating - ? <> - {product.rating.toFixed(1)} - ★ - - : 'N/A' - } - -
- Review Count -
- {product?.reviews || 'N/A'} -
- Total Sold -
- {product?.total_sold || 'N/A'} -
- Currently in Baskets -
- {product?.baskets || 'N/A'} -
- Notify Requests -
- {product?.notifies || 'N/A'} -
- Date Last Sold -
- {formatDate(product?.date_last_sold) || 'N/A'} -
- {label} +
- {value} +
-
-
-
-
-
-
-
- {product?.description && (
-
-
+ {isLoading ? (
+
- {isLoading ? (
-
-
-
- {isLoading ? (
- ) => void;
onClearFilters: () => void;
activeFilters: Record;
}
export function ProductFilters({
- categories,
- vendors,
- brands,
+ filterOptions,
+ isLoadingOptions,
onFilterChange,
onClearFilters,
activeFilters,
@@ -410,15 +125,14 @@ export function ProductFilters({
const [selectedFilter, setSelectedFilter] = React.useState(null);
const [selectedOperator, setSelectedOperator] = React.useState("=");
const [inputValue, setInputValue] = React.useState("");
- const [inputValue2, setInputValue2] = React.useState("");
+ const [inputValue2, setInputValue2] = React.useState(""); // For 'between' operator
const [searchValue, setSearchValue] = React.useState("");
-
- // Add refs for the inputs
+
const numberInputRef = React.useRef(null);
const selectInputRef = React.useRef(null);
const textInputRef = React.useRef(null);
+ const dateInputRef = React.useRef(null);
- // Reset states when popup closes
const handlePopoverClose = () => {
setShowCommand(false);
setSelectedFilter(null);
@@ -431,93 +145,98 @@ export function ProductFilters({
// Handle keyboard shortcuts
React.useEffect(() => {
const handleKeyDown = (e: KeyboardEvent) => {
- // Command/Ctrl + K to toggle filter
if ((e.metaKey || e.ctrlKey) && e.key === "k") {
e.preventDefault();
- if (!showCommand) {
- setShowCommand(true);
- } else {
+ setShowCommand(prev => !prev);
+ if (showCommand) {
handlePopoverClose();
}
}
};
-
window.addEventListener("keydown", handleKeyDown);
return () => window.removeEventListener("keydown", handleKeyDown);
}, [showCommand]);
- // Update filter options with dynamic data
- const filterOptions = React.useMemo(() => {
- return FILTER_OPTIONS.map((option) => {
- if (option.id === "category") {
- return {
- ...option,
- options: categories.map((cat) => ({ label: cat, value: cat })),
- };
+ // Update filter options with dynamic data from props
+ const processedFilterOptions = React.useMemo(() => {
+ // Create a safe version of filterOptions with defaults to prevent undefined errors
+ const safeFilterOptions = {
+ vendors: filterOptions?.vendors || [],
+ brands: filterOptions?.brands || [],
+ abcClasses: filterOptions?.abcClasses || []
+ };
+
+ return BASE_FILTER_OPTIONS.map((option) => {
+ const newOption = { ...option }; // Create mutable copy
+ if (option.id === "vendor" && option.type === "select") {
+ newOption.options = safeFilterOptions.vendors.map((v) => ({ label: v, value: v }));
+ } else if (option.id === "brand" && option.type === "select") {
+ newOption.options = safeFilterOptions.brands.map((b) => ({ label: b, value: b }));
+ } else if (option.id === "abcClass" && option.type === "select") {
+ newOption.options = safeFilterOptions.abcClasses.map((abc) => ({ label: abc, value: abc }));
}
- if (option.id === "vendor") {
- return {
- ...option,
- options: vendors.map((vendor) => ({ label: vendor, value: vendor })),
- };
- }
- if (option.id === "brand") {
- return {
- ...option,
- options: brands.map((brand) => ({ label: brand, value: brand })),
- };
- }
- return option;
+ return newOption;
});
- }, [categories, vendors, brands]);
+ }, [filterOptions]);
// Filter options based on search
const filteredOptions = React.useMemo(() => {
- if (!searchValue) return filterOptions;
-
+ if (!searchValue) return processedFilterOptions;
const search = searchValue.toLowerCase();
- return filterOptions.filter(
+ return processedFilterOptions.filter(
(option) =>
option.label.toLowerCase().includes(search) ||
option.group.toLowerCase().includes(search)
);
- }, [filterOptions, searchValue]);
+ }, [processedFilterOptions, searchValue]);
const handleSelectFilter = React.useCallback((filter: FilterOption) => {
setSelectedFilter(filter);
setInputValue("");
-
+ setInputValue2("");
+ // Set default operator if the filter type supports operators
+ setSelectedOperator(filter.operators?.[0] || "=");
+
// Focus the appropriate input after state updates
requestAnimationFrame(() => {
- if (filter.type === "number") {
- numberInputRef.current?.focus();
- } else if (filter.type === "select") {
- selectInputRef.current?.focus();
- } else {
- textInputRef.current?.focus();
- }
+ if (filter.type === "number") numberInputRef.current?.focus();
+ else if (filter.type === "select") selectInputRef.current?.focus();
+ else if (filter.type === "date") dateInputRef.current?.focus();
+ else textInputRef.current?.focus();
});
}, []);
- const handleApplyFilter = (value: FilterValue | [number, number]) => {
+ const handleApplyFilter = () => {
if (!selectedFilter) return;
+ let valueToApply: FilterValue | [string, string]; // Use string for dates
+ let requiresOperator = selectedFilter.type === 'number' || selectedFilter.type === 'date';
+
+ if (selectedOperator === 'between') {
+ if (!inputValue || !inputValue2) return; // Need both values
+ valueToApply = [inputValue, inputValue2];
+ requiresOperator = true; // Always requires operator for between
+ } else if (selectedFilter.type === 'number') {
+ const numVal = parseFloat(inputValue);
+ if (isNaN(numVal)) return; // Invalid number
+ valueToApply = numVal;
+ } else if (selectedFilter.type === 'boolean' || selectedFilter.type === 'select') {
+ valueToApply = inputValue; // Value set directly via CommandItem select
+ requiresOperator = false; // Usually simple equality for selects/booleans
+ } else { // Text or Date (not between)
+ if (!inputValue.trim()) return;
+ valueToApply = inputValue.trim();
+ }
+
let filterValue: ActiveFilterValue;
- if (selectedOperator) {
- if (selectedOperator === "between" && Array.isArray(value)) {
- filterValue = {
- value: value.map(v => v.toString()),
- operator: selectedOperator,
- };
- } else {
- filterValue = {
- value: typeof value === 'number' ? value : value.toString(),
- operator: selectedOperator,
- };
- }
+ if (requiresOperator) {
+ filterValue = {
+ value: valueToApply,
+ operator: selectedOperator,
+ };
} else {
- filterValue = Array.isArray(value) ? value : value;
+ filterValue = valueToApply as FilterValue;
}
onFilterChange({
@@ -528,6 +247,13 @@ export function ProductFilters({
handlePopoverClose();
};
+ // Specific handler for select options to bypass operator selection
+ const handleApplySelectFilter = (value: string) => {
+ if (!selectedFilter) return;
+ onFilterChange({ ...activeFilters, [selectedFilter.id]: value });
+ handlePopoverClose();
+ };
+
const handleBackToFilters = () => {
setSelectedFilter(null);
setSelectedOperator("=");
@@ -535,335 +261,246 @@ export function ProductFilters({
setInputValue2("");
};
- const activeFiltersList = React.useMemo(() => {
- if (!activeFilters) return [];
+ // Get display value for filter badges
+ const getFilterDisplayValue = (id: string, value: ActiveFilterValue): string => {
+ const option = processedFilterOptions.find(opt => opt.id === id);
+ if (!option) return String(value); // Fallback
- return Object.entries(activeFilters).map(([id, value]): ActiveFilter => {
- const option = filterOptions.find((opt) => opt.id === id);
- let displayValue = String(value);
-
- if (option?.type === "select" && option.options) {
- const optionLabel = option.options.find(
- (opt) => opt.value === value
- )?.label;
- if (optionLabel) displayValue = optionLabel;
+ if (typeof value === 'object' && value !== null && 'operator' in value) {
+ 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}: ${opLabel}${value.value}`;
+ }
- return {
- id,
- label: option?.label || id,
- value,
- displayValue,
- };
- });
- }, [activeFilters, filterOptions]);
+ // Handle simple values (selects, booleans, text)
+ if (option.type === 'select' || option.type === 'boolean') {
+ const selectedOpt = option.options?.find(opt => opt.value === String(value));
+ return `${option.label}: ${selectedOpt?.label || String(value)}`;
+ }
+ return `${option.label}: ${String(value)}`;
+ };
+
+ const activeFiltersList = React.useMemo((): ActiveFilterDisplay[] => {
+ return Object.entries(activeFilters)
+ .map(([id, value]): ActiveFilterDisplay | null => {
+ const option = processedFilterOptions.find(opt => opt.id === id);
+ if (!option) return null; // Should not happen if state is clean
+
+ return {
+ id,
+ label: option.label,
+ value,
+ displayValue: getFilterDisplayValue(id, value),
+ };
+ })
+ .filter((f): f is ActiveFilterDisplay => f !== null); // Type guard to remove nulls
+ }, [activeFilters, processedFilterOptions]);
+
+ // Render operator select
const renderOperatorSelect = () => (
- value && setSelectedOperator(value)
- }
- className="flex-wrap"
+ onValueChange={(value: ComparisonOperator) => value && setSelectedOperator(value)}
+ className="flex-wrap justify-start gap-1"
+ size="sm"
>
-
- =
-
-
- {">"}
-
-
- ≥
-
-
- {"<"}
-
-
- ≤
-
-
- Between
-
+ {selectedFilter?.operators?.map(op => (
+
+ {op === '=' ? '=' : op === '>=' ? '≥' : op === '<=' ? '≤' : op}
+
+ )) || (
+ =
+ )}
);
-
- const getFilterDisplayValue = (filter: ActiveFilter) => {
- if (typeof filter.value === "object" && "operator" in filter.value) {
- const { operator, value } = filter.value;
- if (Array.isArray(value)) {
- return `${operator} ${value[0]} and ${value[1]}`;
- }
- return `${operator} ${value}`;
- }
- return filter.value.toString();
- };
-
return (
-
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- )}
-
-
-
+
- )}
-
-
-
-
-
-
-
- Pricing
--
-
-
-
-
-
-
-
-
- Stock Status
--
-
-
-
-
-
-
- Sales Velocity
--
-
-
-
-
-
-
- Sales Trend
-
-
-
-
-
- Customer Engagement
--
- {product?.total_sold > 0 && (
-
-
- )}
- {product?.rating > 0 && (
-
-
- )}
- {product?.reviews > 0 && (
-
-
- )}
- {product?.baskets > 0 && (
-
-
- )}
- {product?.notifies > 0 && (
-
-
- )}
- {product?.date_last_sold && (
-
-
- )}
- Financial Metrics
--
-
-
-
-
-
-
-
-
-
-
- Lead Time
--
-
-
-
-
-
-
-
-
-
-
-
-
-
- )}
- Current Stock
--
-
-
-
-
-
-
- {product?.preorder_count > 0 && (
-
-
- )}
- {product?.notions_inv_count > 0 && (
-
-
- )}
- Stock Thresholds
--
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+ Key Info
+
+
+
+ Pricing & Cost
+
+
+
-
- {isLoading ? (
-
+
+
+ Current Stock
+
+
+
+ Stock Position
+
+
+
+ On Order
+
+
+
-
- {isLoading ? (
-
-
-
- {isLoading ? (
-
-
-
- {isLoading ? (
-
-
+
+
+ Dates
+
+
+
+ Configuration
+
+
+
+
+ ) : null}
+
);
-}
\ No newline at end of file
+}
+
+// Helper component for consistent display in detail view
+const InfoItem = ({ label, value, isLarge = false }: { label: string; value: React.ReactNode, isLarge?: boolean }) => (
+ Recent Orders
-Monthly Sales Trend
-
-
-
-
-
+ ) : error ? (
+
+
+ Overview
+ Inventory
+ Performance
+ Details
+
-
-
-
- )}
-
+
+ Error loading product details: {error.message}
-
+ ) : product ? (
+ Customer Engagement
--
- {product?.total_sold > 0 && (
-
-
- )}
- {product?.rating > 0 && (
-
-
- )}
- {product?.reviews > 0 && (
-
-
- )}
- {product?.baskets > 0 && (
-
-
- )}
- {product?.notifies > 0 && (
-
-
- )}
- {product?.date_last_sold && (
-
-
- )}
-
-
-
-
-
-
- )}
- Recent Purchase Orders
-
-
-
+
+
+ Sales Performance (30 Days)
+
+
+
+ Inventory Performance (30 Days)
+
+
+
+ Historical Performance
+
+
+
-
-
-
-
-
-
- )}
- Financial Overview
--
-
-
-
-
-
-
- Cost Breakdown
--
-
-
-
-
- Profit Margin Trend
-
-
-
-
-
-
-
-
-
-
-
-
-
- ) : (
- Vendor Performance
--
-
-
-
-
-
-
-
-
- Order History
--
-
-
-
-
-
-
-
-
- No vendor performance data available
- )}
-
-
-
-
-
-
-
-
-
-
- )}
- Product Details
--
- {product?.description && (
-
-
- )}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Physical Attributes
--
-
-
-
-
- Customer Metrics
--
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+);
\ No newline at end of file
diff --git a/inventory/src/components/products/ProductFilters.tsx b/inventory/src/components/products/ProductFilters.tsx
index e677f8a..a47b717 100644
--- a/inventory/src/components/products/ProductFilters.tsx
+++ b/inventory/src/components/products/ProductFilters.tsx
@@ -8,7 +8,6 @@ import {
CommandInput,
CommandItem,
CommandList,
- CommandSeparator,
} from "@/components/ui/command";
import { X, Plus } from "lucide-react";
import { cn } from "@/lib/utils";
@@ -19,6 +18,8 @@ import {
} from "@/components/ui/popover";
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";
type FilterValue = string | number | boolean;
type ComparisonOperator = "=" | ">" | ">=" | "<" | "<=" | "between";
@@ -29,379 +30,93 @@ interface FilterValueWithOperator {
}
// Support both simple values and complex ones with operators
-export type ActiveFilterValue = FilterValue | FilterValueWithOperator | [number, number];
+export type ActiveFilterValue = FilterValue | FilterValueWithOperator;
-interface ActiveFilter {
+interface ActiveFilterDisplay {
id: string;
label: string;
value: ActiveFilterValue;
displayValue: string;
}
-interface FilterOption {
- id: string;
+export interface FilterOption {
+ id: ProductMetricColumnKey | 'search';
label: string;
- type: "select" | "number" | "boolean" | "text";
+ type: "select" | "number" | "boolean" | "text" | "date";
options?: { label: string; value: string }[];
group: string;
operators?: ComparisonOperator[];
}
-const FILTER_OPTIONS: FilterOption[] = [
+// Base filter options - static part of the filters, which will be merged with dynamic options
+const BASE_FILTER_OPTIONS: FilterOption[] = [
+ // Search Group
+ { id: "search", label: "Search (Title, SKU...)", type: "text", group: "Search" },
+
// Basic Info Group
- { id: "search", label: "Search", type: "text", group: "Basic Info" },
{ id: "sku", label: "SKU", type: "text", group: "Basic Info" },
- { id: "barcode", label: "UPC/Barcode", type: "text", group: "Basic Info" },
{ id: "vendor", label: "Vendor", type: "select", group: "Basic Info" },
- { id: "vendor_reference", label: "Supplier #", type: "text", group: "Basic Info" },
{ id: "brand", label: "Brand", type: "select", group: "Basic Info" },
- { id: "category", label: "Category", type: "select", group: "Basic Info" },
- { id: "description", label: "Description", type: "text", group: "Basic Info" },
- { id: "harmonized_tariff_code", label: "HTS Code", type: "text", group: "Basic Info" },
- { id: "notions_reference", label: "Notions Ref", type: "text", group: "Basic Info" },
- { id: "line", label: "Line", type: "text", group: "Basic Info" },
- { id: "subline", label: "Subline", type: "text", group: "Basic Info" },
- { id: "artist", label: "Artist", type: "text", group: "Basic Info" },
- { id: "country_of_origin", label: "Origin", type: "text", group: "Basic Info" },
- { id: "location", label: "Location", type: "text", group: "Basic Info" },
-
- // Physical Properties
- {
- id: "weight",
- label: "Weight",
- type: "number",
- group: "Physical Properties",
- operators: ["=", ">", ">=", "<", "<=", "between"],
- },
-
- // Inventory Group
- {
- id: "stockStatus",
- label: "Stock Status",
- type: "select",
- options: [
- { 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",
- },
- {
- id: "stock",
- label: "Stock Quantity",
- type: "number",
- group: "Inventory",
- operators: ["=", ">", ">=", "<", "<=", "between"],
- },
- {
- id: "preorderCount",
- label: "Preorder Count",
- type: "number",
- group: "Inventory",
- operators: ["=", ">", ">=", "<", "<=", "between"],
- },
- {
- id: "notionsInvCount",
- label: "Notions Inventory",
- type: "number",
- group: "Inventory",
- operators: ["=", ">", ">=", "<", "<=", "between"],
- },
- {
- id: "daysOfStock",
- label: "Days of Stock",
- type: "number",
- group: "Inventory",
- operators: ["=", ">", ">=", "<", "<=", "between"],
- },
- {
- id: "weeksOfStock",
- label: "Weeks of Stock",
- type: "number",
- group: "Inventory",
- operators: ["=", ">", ">=", "<", "<=", "between"],
- },
- {
- id: "reorderPoint",
- label: "Reorder Point",
- type: "number",
- group: "Inventory",
- operators: ["=", ">", ">=", "<", "<=", "between"],
- },
- {
- id: "safetyStock",
- label: "Safety Stock",
- type: "number",
- group: "Inventory",
- operators: ["=", ">", ">=", "<", "<=", "between"],
- },
- {
- id: "replenishable",
- label: "Replenishable",
- type: "select",
- options: [
- { label: "Yes", value: "true" },
- { label: "No", value: "false" },
- ],
- group: "Inventory",
- },
- {
- id: "abcClass",
- label: "ABC Class",
- type: "select",
- options: [
- { label: "A", value: "A" },
- { label: "B", value: "B" },
- { label: "C", value: "C" },
- ],
- group: "Inventory",
- },
+ { id: "isVisible", label: "Is Visible", type: "select", options: [{label: 'Yes', value: 'true'}, {label: 'No', value: 'false'}], group: "Basic Info" },
+ { id: "isReplenishable", label: "Is Replenishable", type: "select", options: [{label: 'Yes', value: 'true'}, {label: 'No', value: 'false'}], group: "Basic Info" },
+ { id: "dateCreated", label: "Date Created", type: "date", group: "Basic Info", operators: ["=", ">", ">=", "<", "<=", "between"] },
+ { id: "ageDays", label: "Age (Days)", type: "number", group: "Basic Info", operators: ["=", ">", ">=", "<", "<=", "between"] },
+ // Status Group
+ // { id: "status", label: "Status", type: "select", options: [...] } - Will be populated dynamically or handled via views
+
+ // Stock Group
+ { id: "abcClass", label: "ABC Class", type: "select", group: "Stock" },
+ { id: "currentStock", label: "Current Stock", type: "number", group: "Stock", operators: ["=", ">", ">=", "<", "<=", "between"] },
+ { id: "currentStockCost", label: "Stock Cost", type: "number", group: "Stock", operators: ["=", ">", ">=", "<", "<=", "between"] },
+ { id: "currentStockRetail", label: "Stock Retail", type: "number", group: "Stock", operators: ["=", ">", ">=", "<", "<=", "between"] },
+ { id: "onOrderQty", label: "On Order Qty", type: "number", group: "Stock", operators: ["=", ">", ">=", "<", "<=", "between"] },
+ { id: "stockCoverInDays", label: "Stock Cover (Days)", type: "number", group: "Stock", operators: ["=", ">", ">=", "<", "<=", "between"] },
+ { id: "sellsOutInDays", label: "Sells Out In (Days)", type: "number", group: "Stock", operators: ["=", ">", ">=", "<", "<=", "between"] },
+ { id: "overstockedUnits", label: "Overstock Units", type: "number", group: "Stock", operators: ["=", ">", ">=", "<", "<=", "between"] },
+ { id: "isOldStock", label: "Is Old Stock", type: "select", options: [{label: 'Yes', value: 'true'}, {label: 'No', value: 'false'}], group: "Stock" },
+
// Pricing Group
- {
- id: "price",
- label: "Price",
- type: "number",
- group: "Pricing",
- operators: ["=", ">", ">=", "<", "<=", "between"],
- },
- {
- id: "costPrice",
- label: "Cost Price",
- type: "number",
- group: "Pricing",
- operators: ["=", ">", ">=", "<", "<=", "between"],
- },
- {
- id: "landingCost",
- label: "Landing Cost",
- type: "number",
- group: "Pricing",
- operators: ["=", ">", ">=", "<", "<=", "between"],
- },
-
+ { id: "currentPrice", label: "Current Price", type: "number", group: "Pricing", operators: ["=", ">", ">=", "<", "<=", "between"] },
+ { id: "currentCostPrice", label: "Cost Price", type: "number", group: "Pricing", operators: ["=", ">", ">=", "<", "<=", "between"] },
+ { id: "currentLandingCostPrice", label: "Landing Cost", type: "number", group: "Pricing", operators: ["=", ">", ">=", "<", "<=", "between"] },
+
// Sales Metrics Group
- {
- id: "dailySalesAvg",
- label: "Daily Sales Avg",
- type: "number",
- group: "Sales Metrics",
- operators: ["=", ">", ">=", "<", "<=", "between"],
- },
- {
- id: "weeklySalesAvg",
- label: "Weekly Sales Avg",
- type: "number",
- group: "Sales Metrics",
- operators: ["=", ">", ">=", "<", "<=", "between"],
- },
- {
- id: "monthlySalesAvg",
- label: "Monthly Sales Avg",
- type: "number",
- group: "Sales Metrics",
- operators: ["=", ">", ">=", "<", "<=", "between"],
- },
- {
- id: "avgQuantityPerOrder",
- label: "Avg Qty/Order",
- type: "number",
- group: "Sales Metrics",
- operators: ["=", ">", ">=", "<", "<=", "between"],
- },
- {
- id: "numberOfOrders",
- label: "Order Count",
- type: "number",
- group: "Sales Metrics",
- operators: ["=", ">", ">=", "<", "<=", "between"],
- },
- {
- id: "firstSaleDate",
- label: "First Sale Date",
- type: "text",
- group: "Sales Metrics",
- },
- {
- id: "lastSaleDate",
- label: "Last Sale Date",
- type: "text",
- group: "Sales Metrics",
- },
- {
- id: "date_last_sold",
- label: "Date Last Sold",
- type: "text",
- group: "Sales Metrics",
- },
- {
- id: "total_sold",
- label: "Total Sold",
- type: "number",
- group: "Sales Metrics",
- operators: ["=", ">", ">=", "<", "<=", "between"],
- },
- {
- id: "baskets",
- label: "In Baskets",
- type: "number",
- group: "Sales Metrics",
- operators: ["=", ">", ">=", "<", "<=", "between"],
- },
- {
- id: "notifies",
- label: "Notifies",
- type: "number",
- group: "Sales Metrics",
- operators: ["=", ">", ">=", "<", "<=", "between"],
- },
- {
- id: "rating",
- label: "Rating",
- type: "number",
- group: "Sales Metrics",
- operators: ["=", ">", ">=", "<", "<=", "between"],
- },
- {
- id: "reviews",
- label: "Reviews",
- type: "number",
- group: "Sales Metrics",
- operators: ["=", ">", ">=", "<", "<=", "between"],
- },
-
- // Financial Metrics Group
- {
- id: "margin",
- label: "Margin %",
- type: "number",
- group: "Financial Metrics",
- operators: ["=", ">", ">=", "<", "<=", "between"],
- },
- {
- id: "gmroi",
- label: "GMROI",
- type: "number",
- group: "Financial Metrics",
- operators: ["=", ">", ">=", "<", "<=", "between"],
- },
- {
- id: "inventoryValue",
- label: "Inventory Value",
- type: "number",
- group: "Financial Metrics",
- operators: ["=", ">", ">=", "<", "<=", "between"],
- },
- {
- id: "costOfGoodsSold",
- label: "COGS",
- type: "number",
- group: "Financial Metrics",
- operators: ["=", ">", ">=", "<", "<=", "between"],
- },
- {
- id: "grossProfit",
- label: "Gross Profit",
- type: "number",
- group: "Financial Metrics",
- operators: ["=", ">", ">=", "<", "<=", "between"],
- },
- {
- id: "turnoverRate",
- label: "Turnover Rate",
- type: "number",
- group: "Financial Metrics",
- operators: ["=", ">", ">=", "<", "<=", "between"],
- },
-
- // Lead Time & Stock Coverage Group
- {
- id: "leadTime",
- label: "Lead Time (Days)",
- type: "number",
- group: "Lead Time & Coverage",
- operators: ["=", ">", ">=", "<", "<=", "between"],
- },
- {
- id: "currentLeadTime",
- label: "Current Lead Time",
- type: "number",
- group: "Lead Time & Coverage",
- operators: ["=", ">", ">=", "<", "<=", "between"],
- },
- {
- id: "targetLeadTime",
- label: "Target Lead Time",
- type: "number",
- group: "Lead Time & Coverage",
- operators: ["=", ">", ">=", "<", "<=", "between"],
- },
- {
- id: "leadTimeStatus",
- label: "Lead Time Status",
- type: "select",
- options: [
- { label: "On Target", value: "on_target" },
- { label: "Warning", value: "warning" },
- { label: "Critical", value: "critical" },
- ],
- group: "Lead Time & Coverage",
- },
- {
- id: "stockCoverage",
- label: "Stock Coverage Ratio",
- type: "number",
- group: "Lead Time & Coverage",
- operators: ["=", ">", ">=", "<", "<=", "between"],
- },
- {
- id: "lastPurchaseDate",
- label: "Last Purchase Date",
- type: "text",
- group: "Lead Time & Coverage",
- },
- {
- id: "firstReceivedDate",
- label: "First Received Date",
- type: "text",
- group: "Lead Time & Coverage",
- },
- {
- id: "lastReceivedDate",
- label: "Last Received Date",
- type: "text",
- group: "Lead Time & Coverage",
- },
-
- // Classification Group
- {
- id: "managingStock",
- label: "Managing Stock",
- type: "select",
- options: [
- { label: "Yes", value: "true" },
- { label: "No", value: "false" },
- ],
- group: "Classification",
- },
+ { id: "sales7d", label: "Sales (7d)", type: "number", group: "Sales Metrics", operators: ["=", ">", ">=", "<", "<=", "between"] },
+ { id: "revenue7d", label: "Revenue (7d)", type: "number", group: "Sales Metrics", operators: ["=", ">", ">=", "<", "<=", "between"] },
+ { id: "sales30d", label: "Sales (30d)", type: "number", group: "Sales Metrics", operators: ["=", ">", ">=", "<", "<=", "between"] },
+ { id: "revenue30d", label: "Revenue (30d)", type: "number", group: "Sales Metrics", operators: ["=", ">", ">=", "<", "<=", "between"] },
+ { id: "profit30d", label: "Profit (30d)", type: "number", group: "Sales Metrics", operators: ["=", ">", ">=", "<", "<=", "between"] },
+ { id: "sales365d", label: "Sales (365d)", type: "number", group: "Sales Metrics", operators: ["=", ">", ">=", "<", "<=", "between"] },
+ { id: "revenue365d", label: "Revenue (365d)", type: "number", group: "Sales Metrics", operators: ["=", ">", ">=", "<", "<=", "between"] },
+ { id: "salesVelocityDaily", label: "Daily Velocity", type: "number", group: "Sales Metrics", operators: ["=", ">", ">=", "<", "<=", "between"] },
+ { id: "dateLastSold", label: "Date Last Sold", type: "date", group: "Sales Metrics", operators: ["=", ">", ">=", "<", "<=", "between"] },
+ { id: "yesterdaySales", label: "Sales (Yesterday)", type: "number", group: "Sales Metrics", operators: ["=", ">", ">=", "<", "<=", "between"] },
+
+ // Financial KPIs
+ { id: "margin30d", label: "Margin % (30d)", type: "number", group: "Financial Metrics", operators: ["=", ">", ">=", "<", "<=", "between"] },
+ { id: "gmroi30d", label: "GMROI (30d)", type: "number", group: "Financial Metrics", operators: ["=", ">", ">=", "<", "<=", "between"] },
+ { id: "stockturn30d", label: "Stock Turn (30d)", type: "number", group: "Financial Metrics", operators: ["=", ">", ">=", "<", "<=", "between"] },
+ { id: "sellThrough30d", label: "Sell Thru % (30d)", type: "number", group: "Financial Metrics", operators: ["=", ">", ">=", "<", "<=", "between"] },
+
+ // Lead Time & Replenishment
+ { id: "avgLeadTimeDays", label: "Avg Lead Time", type: "number", group: "Lead Time", operators: ["=", ">", ">=", "<", "<=", "between"] },
+ { id: "configLeadTime", label: "Config Lead Time", type: "number", group: "Lead Time", operators: ["=", ">", ">=", "<", "<=", "between"] },
+ { id: "earliestExpectedDate", label: "Next Arrival Date", type: "date", group: "Lead Time", operators: ["=", ">", ">=", "<", "<=", "between"] },
+ { id: "dateLastReceived", label: "Date Last Received", type: "date", group: "Lead Time", operators: ["=", ">", ">=", "<", "<=", "between"] },
];
interface ProductFiltersProps {
- categories: string[];
- vendors: string[];
- brands: string[];
+ filterOptions: ProductFilterOptions;
+ isLoadingOptions: boolean;
onFilterChange: (filters: Record
+
- {
- if (!open) {
- handlePopoverClose();
- } else {
- setShowCommand(true);
- }
- }}
- modal={true}
- >
+
{
- console.log('Escape pressed, selectedFilter:', selectedFilter); // Debug log
if (selectedFilter) {
- event.preventDefault();
- event.stopPropagation();
+ event.preventDefault(); // Prevent popover closing
handleBackToFilters();
}
}}
+ onCloseAutoFocus={(e) => e.preventDefault()} // Prevent refocus on trigger
>
{!selectedFilter ? (
<>
{
- if (e.key === "Escape") {
- e.preventDefault();
- handlePopoverClose();
- }
- }}
/>
- No filters found.
- {Object.entries(
- filteredOptions.reduce>(
- (acc, filter) => {
- if (!acc[filter.group]) acc[filter.group] = [];
- acc[filter.group].push(filter);
- return acc;
- },
- {}
- )
- ).map(([group, filters]) => (
-
-
- {filters.map((filter) => (
- {
- handleSelectFilter(filter);
- if (filter.type !== "select") {
- setInputValue("");
- }
- }}
- className={cn(
- "cursor-pointer",
- activeFilters?.[filter.id] && "bg-accent"
- )}
- >
- {filter.label}
- {activeFilters?.[filter.id] && (
-
- Active
-
- )}
-
- ))}
-
-
- ))}
-
-
- ) : selectedFilter.type === "number" ? (
- {
- if (e.key === "Backspace" && !inputValue) {
- e.preventDefault();
- handleBackToFilters();
- } else if (e.key === "Escape") {
- e.preventDefault();
- handleBackToFilters();
- }
- }}
- />
-
- No options found.
-
-
- ← Back to filters
-
- handleApplyFilter(option.value)}
- className="cursor-pointer"
- >
- {option.label}
-
+ {isLoadingOptions ? (
+ No filters found.
+ {Object.entries(
+ filteredOptions.reduce>(
+ (acc, filter) => {
+ if (!acc[filter.group]) acc[filter.group] = [];
+ acc[filter.group].push(filter);
+ return acc;
+ }, {}
+ )
+ ).map(([group, filtersInGroup]) => (
+
+ {filtersInGroup.map((filter) => (
+ handleSelectFilter(filter)}
+ className={cn("cursor-pointer", activeFilters?.[filter.id] && "font-semibold")}
+ >
+ {filter.label}
+
+ ))}
+
))}
-
+
+ )}
) : (
- <>
- {
- if (e.key === "Enter" && inputValue.trim()) {
- handleApplyFilter(inputValue.trim());
- } else if (e.key === "Escape") {
- e.preventDefault();
- handleBackToFilters();
- }
- }}
- />
-
-
-
- ← Back to filters
-
- handleApplyFilter(inputValue.trim())}
- className="cursor-pointer"
- >
- Apply filter: {inputValue}
-
- )}
-
-
-
+
@@ -872,17 +509,16 @@ export function ProductFilters({
- {getFilterDisplayValue(filter)}
+ {filter.displayValue}
-
- ) : selectedFilter.type === "select" ? (
- <>
-
-
-
-
-
- {renderOperatorSelect()}
-
- setInputValue(e.target.value)}
- onKeyDown={(e) => {
- if (e.key === "Enter") {
- if (selectedOperator === "between") {
- if (inputValue2) {
- const val1 = parseFloat(inputValue);
- const val2 = parseFloat(inputValue2);
- if (!isNaN(val1) && !isNaN(val2)) {
- handleApplyFilter([val1, val2]);
- }
- }
- } else {
- const val = parseFloat(inputValue);
- if (!isNaN(val)) {
- handleApplyFilter(val);
- }
- }
- } else if (e.key === "Escape") {
- e.preventDefault();
- handleBackToFilters();
- }
- }}
- className="w-[120px] [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
- />
- {selectedOperator === "between" && (
- <>
- and
- setInputValue2(e.target.value)}
- onKeyDown={(e) => {
- if (e.key === "Enter") {
- const val1 = parseFloat(inputValue);
- const val2 = parseFloat(inputValue2);
- if (!isNaN(val1) && !isNaN(val2)) {
- handleApplyFilter([val1, val2]);
- }
- } else if (e.key === "Escape") {
- e.preventDefault();
- handleBackToFilters();
- }
- }}
- className="w-[120px] [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
- />
-
- )}
-
-
-
+
+ ) : (
+ <>
+
+
+
+ {/* Render Operator Select ONLY if type is number or date */}
+ {(selectedFilter.type === 'number' || selectedFilter.type === 'date') && renderOperatorSelect()}
+
+ {/* Render Input based on type */}
+
+
+ No options found.
+
+ {selectedFilter.options
+ ?.filter(option =>
+ option.label.toLowerCase().includes(inputValue.toLowerCase())
+ )
+ .map(option => (
+ handleApplySelectFilter(option.value)}
+ className="cursor-pointer"
+ >
+ {option.label}
+
+ ))}
+
+
+
+ )}
+
)}
+ {selectedFilter.type === 'number' && (
+ <>
+ setInputValue(e.target.value)}
+ onKeyDown={(e) => { if (e.key === 'Enter') handleApplyFilter(); }}
+ className="h-8 flex-1 min-w-0"
+ />
+ {selectedOperator === 'between' && (
+ <>
+ and
+ setInputValue2(e.target.value)}
+ onKeyDown={(e) => { if (e.key === 'Enter') handleApplyFilter(); }}
+ className="h-8 flex-1 min-w-0"
+ />
+
+ )}
+
+ )}
+ {selectedFilter.type === 'date' && (
+ <>
+ setInputValue(e.target.value)}
+ onKeyDown={(e) => { if (e.key === 'Enter') handleApplyFilter(); }}
+ className="h-8 flex-1 min-w-0"
+ />
+ {selectedOperator === 'between' && (
+ <>
+ and
+ setInputValue2(e.target.value)}
+ onKeyDown={(e) => { if (e.key === 'Enter') handleApplyFilter(); }}
+ className="h-8 flex-1 min-w-0"
+ />
+
+ )}
+
+ )}
+ {selectedFilter.type === 'text' && (
+ setInputValue(e.target.value)}
+ onKeyDown={(e) => { if (e.key === 'Enter') handleApplyFilter(); }}
+ className="h-8 flex-1"
+ />
+ )}
+
+ {/* Apply button for Number, Date, Text */}
+ {(selectedFilter.type === 'number' || selectedFilter.type === 'date' || selectedFilter.type === 'text') && (
+
+ )}
+
+ {/* Select and Boolean types are handled via CommandList below */}
+
+
+ {/* CommandList for Select and Boolean */}
+ {(selectedFilter.type === 'select' || selectedFilter.type === 'boolean') && (
+