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

Optimize Forecast View performance and implement WOC filter across views

Browse Source
This commit is contained in:
Christian Vidal Wolf
2026-01-29 08:47:03 +01:00
parent 98e8bb3904
commit d19f0cddac
6 changed files with 169 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
App.tsx
+25 -7
View File
@@ -50,6 +50,8 @@ const App: React.FC = () => {
const [lastUpdated, setLastUpdated] = useState<string | null>(null);
const [stockMap, setStockMap] = useState<Map<string, number>>(new Map());
const [vendorStockMap, setVendorStockMap] = useState<Map<string, { eu: number; uk: number }>>(new Map());
const [cachedForecastRecords, setCachedForecastRecords] = useState<ForecastRecord[]>([]);
const [lastForecastFile, setLastForecastFile] = useState<string | null>(null);
// Modal State
const [isDataModalOpen, setIsDataModalOpen] = useState(false);
@@ -65,6 +67,7 @@ const App: React.FC = () => {
week: [],
stock: [],
vendorStock: [],
woc: [],
});
const top50Mode = useMemo(() => {
@@ -200,12 +203,20 @@ const App: React.FC = () => {
const isUK = activeFilters.customer.includes('Amazon UK');
const filename = isUK ? '/fc UK 26.xlsx' : '/fc 26.xlsx';
console.log(`[App] Fetching forecast from ${filename}...`);
const response = await fetch(filename);
if (!response.ok) throw new Error(`Forecast file ${filename} not found`);
let fcRecords = cachedForecastRecords;
const buffer = await response.arrayBuffer();
const fcRecords = await processForecastExcel(buffer);
if (lastForecastFile !== filename || cachedForecastRecords.length === 0) {
console.log(`[App] Fetching fresh forecast from ${filename}...`);
const response = await fetch(filename);
if (!response.ok) throw new Error(`Forecast file ${filename} not found`);
const buffer = await response.arrayBuffer();
fcRecords = await processForecastExcel(buffer);
setCachedForecastRecords(fcRecords);
setLastForecastFile(filename);
} else {
console.log(`[App] Using cached forecast for ${filename}`);
}
// Build precise metadata map from GLOBAL sales records to ensure info is found even if filtered for market
const meta = new Map<string, { sku: string; title: string; line: string }>();
@@ -221,11 +232,11 @@ const App: React.FC = () => {
const viewData = calculateForecastViewData(sales, fcRecords, meta, activeFilters, velocityMap);
setForecastData(viewData);
console.log('[App] Forecast loaded:', viewData.length, 'records');
console.log('[App] Forecast calculation complete:', viewData.length, 'records');
} catch (error) {
console.warn("Forecast fetch failed:", error);
}
}, [velocityMap]); // Added velocityMap to dependencies
}, [velocityMap, cachedForecastRecords, lastForecastFile]);
// Update forecast when filters change
useEffect(() => {
@@ -253,6 +264,7 @@ const App: React.FC = () => {
week: [],
stock: [],
vendorStock: [],
woc: [],
});
};
@@ -676,6 +688,8 @@ const App: React.FC = () => {
onStockFilterChange={(s) => setFilters(prev => ({ ...prev, stock: s }))}
vendorStockFilter={filters.vendorStock}
onVendorStockFilterChange={(s) => setFilters(prev => ({ ...prev, vendorStock: s }))}
wocFilter={filters.woc}
onWocFilterChange={(s) => setFilters(prev => ({ ...prev, woc: s }))}
customerFilters={filters.customer}
top50Mode={filters.customer.includes('Amazon UK') ? 'uk' : 'eu'}
top50Ranking={top50Ranking2025}
@@ -702,6 +716,8 @@ const App: React.FC = () => {
onStockFilterChange={(s) => setFilters(prev => ({ ...prev, stock: s }))}
vendorStockFilter={filters.vendorStock}
onVendorStockFilterChange={(s) => setFilters(prev => ({ ...prev, vendorStock: s }))}
wocFilter={filters.woc}
onWocFilterChange={(s) => setFilters(prev => ({ ...prev, woc: s }))}
top50Mode={filters.customer.includes('Amazon UK') ? 'uk' : 'eu'}
/>
</div>
@@ -719,6 +735,8 @@ const App: React.FC = () => {
onStockFilterChange={(s) => setFilters(prev => ({ ...prev, stock: s }))}
vendorStockFilter={filters.vendorStock}
onVendorStockFilterChange={(s) => setFilters(prev => ({ ...prev, vendorStock: s }))}
wocFilter={filters.woc}
onWocFilterChange={(s) => setFilters(prev => ({ ...prev, woc: s }))}
top50Mode={filters.customer.includes('Amazon UK') ? 'uk' : 'eu'}
/>
</div>
Buy_Box_tracker.xlsx
BIN
View File
Binary file not shown.
components/AdsPerformance.tsx
+42
View File
@@ -21,6 +21,8 @@ interface AdsPerformanceProps {
vendorStockMap?: Map<string, { eu: number; uk: number }>;
vendorStockFilter: string[];
onVendorStockFilterChange: (newFilters: string[]) => void;
wocFilter: string[];
onWocFilterChange: (newFilters: string[]) => void;
}
type SortKey = keyof CombinedKPIs | 'acos' | 'roas' | 'tacos' | 'ctr' | 'cpc' | 'cvrUnits';
@@ -106,6 +108,8 @@ const AdsPerformance: React.FC<AdsPerformanceProps> = ({
onStockFilterChange,
vendorStockFilter,
onVendorStockFilterChange,
wocFilter,
onWocFilterChange,
top50Mode
}) => {
const [searchTerm, setSearchTerm] = useState('');
@@ -258,6 +262,33 @@ const AdsPerformance: React.FC<AdsPerformanceProps> = ({
);
}
// Apply WOC Filter
if (wocFilter && wocFilter.length > 0 && vendorStockMap) {
result = result.filter(item => {
const asin = item.asin.trim().toUpperCase();
const stockData = vendorStockMap.get(asin);
if (!stockData) return false;
const stock = top50Mode === 'uk' ? stockData.uk : stockData.eu;
const velocity = item.avgWeeklySales || 0;
let woc: number = 0;
if (velocity > 0) {
woc = stock / velocity;
} else if (stock > 0) {
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;
});
});
}
if (showOnlyTop50 && top50Ranking) {
result.sort((a, b) => {
const asinA = a.asin.trim().toUpperCase();
@@ -408,6 +439,17 @@ const AdsPerformance: React.FC<AdsPerformanceProps> = ({
'Low Stock (<10)',
]}
/>
<InColumnStockFilter
currentFilters={wocFilter}
onFilterChange={onWocFilterChange}
title="Week Coverage"
options={[
'< 4 Weeks',
'> 4 Weeks',
'Out of Stock',
'Infinite Cover'
]}
/>
</div>
</div>
</th>
components/ForecastView.tsx
+58 -4
View File
@@ -23,6 +23,8 @@ interface ForecastViewProps {
onStockFilterChange: (newFilters: string[]) => void;
vendorStockFilter: string[];
onVendorStockFilterChange: (newFilters: string[]) => void;
wocFilter: string[];
onWocFilterChange: (newFilters: string[]) => void;
}
const MONTH_ORDER = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
@@ -169,10 +171,20 @@ const ForecastView: React.FC<ForecastViewProps> = ({
onStockFilterChange,
vendorStockFilter,
onVendorStockFilterChange,
wocFilter,
onWocFilterChange,
top50Mode
}) => {
const [searchTerm, setSearchTerm] = useState('');
const debouncedSearch = useMemo(() => searchTerm.toLowerCase(), [searchTerm]);
const [debouncedSearch, setDebouncedSearch] = useState('');
useEffect(() => {
const timer = setTimeout(() => {
setDebouncedSearch(searchTerm.toLowerCase());
}, 300);
return () => clearTimeout(timer);
}, [searchTerm]);
const [showOnlyTop50, setShowOnlyTop50] = useState(false);
const [displayCount, setDisplayCount] = useState(50);
const [sortConfig, setSortConfig] = useState<{ key: string; direction: 'asc' | 'desc' }>({ key: 'actualUnits', direction: 'desc' });
@@ -232,8 +244,8 @@ const ForecastView: React.FC<ForecastViewProps> = ({
return Array.from(dataMap.values());
}, [baseFilteredData]);
const processedData = useMemo(() => {
let result = baseFilteredData.map(item => {
const calculatedData = useMemo(() => {
return baseFilteredData.map(item => {
const forecastPeriod = activeMonths.reduce((sum, month) => {
return sum + (item.monthlyData?.[month]?.forecastUnits || 0);
}, 0);
@@ -247,6 +259,10 @@ const ForecastView: React.FC<ForecastViewProps> = ({
fcAchievement
};
});
}, [baseFilteredData, activeMonths]);
const processedData = useMemo(() => {
let result = [...calculatedData];
if (showOnlyTop50 && top50Ranking) {
const currentRankMap = top50Mode === 'eu' ? top50Ranking.eu : top50Ranking.uk;
@@ -261,6 +277,33 @@ const ForecastView: React.FC<ForecastViewProps> = ({
);
}
// Apply WOC Filter
if (wocFilter && wocFilter.length > 0 && vendorStockMap) {
result = result.filter(p => {
const asin = p.asin.trim().toUpperCase();
const stockData = vendorStockMap.get(asin);
if (!stockData) return false;
const stock = top50Mode === 'uk' ? stockData.uk : stockData.eu;
const velocity = p.avgWeeklySales || 0;
let woc: number = 0;
if (velocity > 0) {
woc = stock / velocity;
} else if (stock > 0) {
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;
});
});
}
// Apply Sorting
const { key, direction } = sortConfig;
result.sort((a: any, b: any) => {
@@ -276,7 +319,7 @@ const ForecastView: React.FC<ForecastViewProps> = ({
});
return result;
}, [baseFilteredData, debouncedSearch, showOnlyTop50, top50Ranking, top50Mode, sortConfig, activeMonths]);
}, [calculatedData, debouncedSearch, showOnlyTop50, top50Ranking, top50Mode, sortConfig]);
const paginatedData = useMemo(() => processedData.slice(0, displayCount), [processedData, displayCount]);
@@ -393,6 +436,17 @@ const ForecastView: React.FC<ForecastViewProps> = ({
className="bg-slate-950 border border-white/10 rounded-xl px-4 py-2 text-sm text-white focus:outline-none w-64"
/>
<button onClick={handleExportExcel} className="p-2 bg-slate-800 hover:bg-slate-700 text-white rounded-xl border border-white/5 transition-all"><DownloadIcon /></button>
<InColumnStockFilter
currentFilters={wocFilter}
onFilterChange={onWocFilterChange}
title="Week Coverage"
options={[
'< 4 Weeks',
'> 4 Weeks',
'Out of Stock',
'Infinite Cover'
]}
/>
</div>
</div>
components/WeeklyGrid.tsx
+43 -1
View File
@@ -21,6 +21,8 @@ interface WeeklyGridProps {
vendorStockMap?: Map<string, { eu: number; uk: number }>;
vendorStockFilter: string[];
onVendorStockFilterChange: (newFilters: string[]) => void;
wocFilter: string[];
onWocFilterChange: (newFilters: string[]) => void;
velocityMap?: Map<string, number>;
}
@@ -152,6 +154,8 @@ const WeeklyGrid: React.FC<WeeklyGridProps & { top50Mode: 'eu' | 'uk' }> = ({
onStockFilterChange,
vendorStockFilter,
onVendorStockFilterChange,
wocFilter,
onWocFilterChange,
customerFilters,
top50Mode,
velocityMap
@@ -272,8 +276,35 @@ const WeeklyGrid: React.FC<WeeklyGridProps & { top50Mode: 'eu' | 'uk' }> = ({
}
}
// WOC Filter
if (wocFilter && wocFilter.length > 0 && velocityMap && vendorStockMap) {
result = result.filter(r => {
const asin = r.asin.trim().toUpperCase();
const stockData = vendorStockMap.get(asin);
if (!stockData) return false;
const stock = top50Mode === 'uk' ? stockData.uk : stockData.eu;
const velocity = velocityMap.get(asin) || 0;
let woc: number = 0;
if (velocity > 0) {
woc = stock / velocity;
} else if (stock > 0) {
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 result;
}, [rows, debouncedSearch, showOnlyTop50, top50Ranking, growthFilterMode, growthThreshold, sortConfig, weeks, top50Mode]);
}, [rows, debouncedSearch, showOnlyTop50, top50Ranking, growthFilterMode, growthThreshold, sortConfig, weeks, top50Mode, wocFilter, velocityMap, vendorStockMap]);
// 2. Sort results
const sortedRows = useMemo(() => {
@@ -499,6 +530,17 @@ const WeeklyGrid: React.FC<WeeklyGridProps & { top50Mode: 'eu' | 'uk' }> = ({
'Low Stock (<10)',
]}
/>
<InColumnStockFilter
currentFilters={wocFilter}
onFilterChange={onWocFilterChange}
title="Week Coverage"
options={[
'< 4 Weeks',
'> 4 Weeks',
'Out of Stock',
'Infinite Cover'
]}
/>
</div>
{sortConfig?.metric === 'rank' && (
<span className="text-amber-500 font-black text-sm animate-bounce-subtle">
types.ts
+1
View File
@@ -25,6 +25,7 @@ export interface FilterState {
week: string[]; // Added Week filter
stock: string[]; // Added Stock filter
vendorStock: string[]; // Added Vendor Stock filter
woc: string[]; // Added Weeks of Coverage filter
}
export interface GrowthMetric {