christianV/CrazeAnalytix
1
0
Fork 0
mirror of https://github.com/christianvidalwolf-prog/CrazeAnalytix.git synced 2026-08-03 11:45:23 +02:00
Code Issues Packages Projects Releases Wiki Activity

Implement Custom Numeric Filtering (>10, 5-10) for Stock/WOC columns in Weekly Sales

Browse Source
This commit is contained in:
christian.vidal
2026-01-30 19:28:53 +01:00
parent c691d4e9ba
commit 2a199d397e
3 changed files with 89 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/InColumnStockFilter.tsx
+36 -2
View File
@@ -22,7 +22,9 @@ export const InColumnStockFilter: React.FC<InColumnStockFilterProps> = ({
icon
}) => {
const [isOpen, setIsOpen] = useState(false);
const [customInput, setCustomInput] = useState('');
const containerRef = useRef<HTMLDivElement>(null);
const inputRef = useRef<HTMLInputElement>(null);
// Close when clicking outside
useEffect(() => {
@@ -50,6 +52,15 @@ export const InColumnStockFilter: React.FC<InColumnStockFilterProps> = ({
setIsOpen(false);
};
const handleCustomAdd = () => {
if (customInput.trim()) {
if (!currentFilters.includes(customInput.trim())) {
onFilterChange([...currentFilters, customInput.trim()]);
}
setCustomInput('');
}
};
return (
<div className="relative inline-block ml-1" ref={containerRef}>
<button
@@ -72,13 +83,36 @@ export const InColumnStockFilter: React.FC<InColumnStockFilterProps> = ({
</button>
{isOpen && (
<div className="absolute left-0 mt-2 w-48 bg-slate-900 border border-slate-700 rounded-xl shadow-2xl z-[999] p-2 animate-in fade-in zoom-in duration-150">
<div className="px-2 py-1.5 text-[10px] font-black text-slate-500 uppercase tracking-widest border-b border-slate-800 mb-1 flex justify-between items-center">
<div className="absolute left-0 mt-2 w-56 bg-slate-900 border border-slate-700 rounded-xl shadow-2xl z-[999] p-2 animate-in fade-in zoom-in duration-150">
<div className="px-2 py-1.5 text-[10px] font-black text-slate-500 uppercase tracking-widest border-b border-slate-800 mb-2 flex justify-between items-center">
<span>{title}</span>
{currentFilters.length > 0 && (
<button onClick={clearFilters} className="text-indigo-400 hover:text-indigo-300">Clear</button>
)}
</div>
{/* Custom Input */}
<div className="px-2 mb-2 flex gap-1">
<input
ref={inputRef}
type="text"
className="bg-slate-950 border border-slate-700 text-xs text-white rounded px-2 py-1 w-full focus:border-indigo-500 focus:outline-none placeholder:text-slate-600"
placeholder="e.g. >10, 50-100"
value={customInput}
onChange={(e) => setCustomInput(e.target.value)}
onKeyDown={(e) => {
if (e.key === 'Enter') handleCustomAdd();
e.stopPropagation(); // Prevent grid row clicks if any
}}
autoFocus
/>
<button
onClick={handleCustomAdd}
className="bg-indigo-600 hover:bg-indigo-500 text-white px-2 rounded text-xs font-bold"
>
+
</button>
</div>
{options.map(option => {
const isSelected = currentFilters.includes(option);
return (
components/WeeklyGrid.tsx
+2 -8
View File
@@ -1,7 +1,7 @@
import React, { useMemo, useState, useEffect, useCallback, useRef } from 'react';
import * as XLSX from 'xlsx';
import { CombinedKPIs } from '../types';
import { pivotWeeklySalesData, WeeklyPivotRow, PAN_EU_COUNTRIES } from '../services/dataProcessor';
import { pivotWeeklySalesData, WeeklyPivotRow, PAN_EU_COUNTRIES, checkNumericConditions } from '../services/dataProcessor';
import { StockBadge } from './StockBadge';
import { InColumnStockFilter } from './InColumnStockFilter';
import { Top50Badge } from './Top50Badge';
@@ -307,13 +307,7 @@ const WeeklyGrid: React.FC<WeeklyGridProps & { top50Mode: 'eu' | 'uk' }> = ({
woc = 999;
}
return wocFilter.some(f => {
if (f === '< 4 Weeks') return woc < 4;
if (f === '> 4 Weeks') return woc >= 4;
if (f === 'Out of Stock') return woc === 0;
if (f === 'Infinite Cover') return woc === 999;
return true;
});
return checkNumericConditions(woc, wocFilter);
});
}
services/dataProcessor.ts
+51 -55
View File
@@ -49,6 +49,55 @@ const parseUnits = (value: string): number => {
const MONTH_ORDER = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
// Helper for numeric filtering (e.g. ">5", "10-20")
export const checkNumericConditions = (value: number, filters: string[]): boolean => {
if (!filters || filters.length === 0) return true;
return filters.some(f => {
// Handle specific string labels
if (f.includes('Out of Stock') || f === 'Out of Stock') return value === 0;
if (f.includes('In Stock') && !f.includes('Low')) return value > 0;
if (f.includes('Low Stock')) return value < 10;
if (f === '< 4 Weeks') return value < 4;
if (f === '> 4 Weeks') return value >= 4;
if (f === 'Infinite Cover') return value === 999;
const input = f.trim().toLowerCase();
// Range: 10-20
if (input.includes('-') && !input.startsWith('-')) { // Avoid negative numbers confusion if possible, though simple range usually 10-20
const parts = input.split('-').map(s => parseFloat(s.trim()));
if (parts.length === 2 && !isNaN(parts[0]) && !isNaN(parts[1])) {
return value >= parts[0] && value <= parts[1];
}
}
// Expressions
if (input.startsWith('<=')) {
const val = parseFloat(input.substring(2));
return !isNaN(val) && value <= val;
}
if (input.startsWith('>=')) {
const val = parseFloat(input.substring(2));
return !isNaN(val) && value >= val;
}
if (input.startsWith('<')) {
const val = parseFloat(input.substring(1));
return !isNaN(val) && value < val;
}
if (input.startsWith('>')) {
const val = parseFloat(input.substring(1));
return !isNaN(val) && value > val;
}
// Exact Match
const val = parseFloat(input);
if (!isNaN(val)) return value === val;
return false;
});
};
// Comprehensive Month Mapping (English + Spanish + Short/Full)
const MONTH_MAP: Record<string, string> = {
// English Short
@@ -735,34 +784,7 @@ const checkStockFilter = (sku: string, filters: string[], stockMap?: Map<string,
const baseSku = sku?.replace(/(DE|EN)$/i, '');
const stockValue = stockMap.get(baseSku) || 0;
return filters.some(f => {
// Smart Filters
if (f === 'Out of Stock (0)') return stockValue === 0;
if (f === 'In Stock (>0)') return stockValue > 0;
if (f === 'Low Stock (<10)') return stockValue < 10;
// Numeric Range (e.g. ">10", "1-50")
const input = f.trim().toLowerCase();
if (input.includes('-')) {
const [start, end] = input.split('-').map(s => parseFloat(s.trim()));
if (!isNaN(start) && !isNaN(end)) return stockValue >= start && stockValue <= end;
} else if (input.startsWith('<=')) {
const val = parseFloat(input.substring(2).trim());
if (!isNaN(val)) return stockValue <= val;
} else if (input.startsWith('>=')) {
const val = parseFloat(input.substring(2).trim());
if (!isNaN(val)) return stockValue >= val;
} else if (input.startsWith('<')) {
const val = parseFloat(input.substring(1).trim());
if (!isNaN(val)) return stockValue < val;
} else if (input.startsWith('>')) {
const val = parseFloat(input.substring(1).trim());
if (!isNaN(val)) return stockValue > val;
}
// Exact Match
return stockValue.toString() === f;
});
return checkNumericConditions(stockValue, filters);
};
const checkVendorStockFilter = (asin: string, filters: string[], vendorStockMap?: Map<string, { eu: number; uk: number }>, mode: 'eu' | 'uk' = 'eu'): boolean => {
@@ -772,33 +794,7 @@ const checkVendorStockFilter = (asin: string, filters: string[], vendorStockMap?
const data = vendorStockMap.get(asin);
const stockValue = data ? (mode === 'uk' ? data.uk : data.eu) : 0;
return filters.some(f => {
if (f === 'Out of Stock (0)') return stockValue === 0;
if (f === 'In Stock (>20)') return stockValue > 20;
if (f === 'In Stock (>0)') return stockValue > 0;
if (f === 'Low Stock (<10)') return stockValue < 10;
const input = f.trim().toLowerCase();
if (input.includes('-')) {
const [start, end] = input.split('-').map(s => parseFloat(s.trim()));
if (!isNaN(start) && !isNaN(end)) return stockValue >= start && stockValue <= end;
} else if (input.startsWith('<=')) {
const val = parseFloat(input.substring(2).trim());
if (!isNaN(val)) return stockValue <= val;
} else if (input.startsWith('>=')) {
const val = parseFloat(input.substring(2).trim());
if (!isNaN(val)) return stockValue >= val;
} else if (input.startsWith('<')) {
const val = parseFloat(input.substring(1).trim());
if (!isNaN(val)) return stockValue < val;
} else if (input.startsWith('>')) {
const val = parseFloat(input.substring(1).trim());
if (!isNaN(val)) return stockValue > val;
} else if (!isNaN(parseFloat(input))) {
return stockValue === parseFloat(input);
}
return false;
});
return checkNumericConditions(stockValue, filters);
};
// Filter Ads Data by Country, Year, Week, ASIN, SKU, and Product Line