feat: implement Forecast 2026 (Fc 26) tab with seasonality logic and actual sales comparison

App.tsx

@@ -5,8 +5,8 @@ import Dashboard from './components/Dashboard';
 import FilterBar from './components/FilterBar';
 import AIChat from './components/AIChat';
 import CrazeLogo from './components/CrazeLogo';
-import { SalesRecord, FilterState, AggregatedData, AdsRecord, TrafficRecord } from './types';
+import { SalesRecord, FilterState, AggregatedData, AdsRecord, TrafficRecord, ForecastRecord, ProductForecastData } from './types';
-import { processCSV, filterData, filterAdsData, aggregateData, getUniqueValues, processAdsCSV, processAdsExcel, processTrafficExcel, mergeSalesAndAdsData } from './services/dataProcessor';
+import { processCSV, filterData, filterAdsData, aggregateData, getUniqueValues, processAdsCSV, processAdsExcel, processTrafficExcel, mergeSalesAndAdsData, processForecastExcel, calculateForecastViewData } from './services/dataProcessor';
 import { queryGemini } from './services/geminiService';
 import { ChartIcon, TableIcon, UploadIcon, DownloadIcon, CloseIcon, TrendingIcon, MegaphoneIcon } from './components/Icons';
 import { loadSalesData, saveSalesData, clearSalesData, loadAdsData, saveAdsData, clearAdsData } from './services/storage';
@@ -16,6 +16,7 @@ const DataGrid = lazy(() => import('./components/DataGrid'));
 const WeeklyGrid = lazy(() => import('./components/WeeklyGrid'));
 const TopMovers = lazy(() => import('./components/TopMovers'));
 const AdsPerformance = lazy(() => import('./components/AdsPerformance'));
+const ForecastView = lazy(() => import('./components/ForecastView'));
 
 // Loading fallback component
 const LoadingSpinner = () => (
@@ -42,7 +43,8 @@ const App: React.FC = () => {
   const [trafficData, setTrafficData] = useState<TrafficRecord[]>([]);
   const [loading, setLoading] = useState(true);
   const [syncing, setSyncing] = useState(false);
-  const [view, setView] = useState<'dashboard' | 'table' | 'weekly' | 'movers' | 'ads'>('dashboard'); // Added 'weekly' view
+  const [view, setView] = useState<'dashboard' | 'table' | 'weekly' | 'movers' | 'ads' | 'forecast'>('dashboard'); // Added 'forecast' view
+  const [forecastData, setForecastData] = useState<ProductForecastData[]>([]);
   const [isChatOpen, setIsChatOpen] = useState(false);
   const [activeUrl, setActiveUrl] = useState<string | null>(() => localStorage.getItem('craze_csv_url') || PERMANENT_DROPBOX_URL);
   const [lastUpdated, setLastUpdated] = useState<string | null>(null);
@@ -86,6 +88,9 @@ const App: React.FC = () => {
       setIsDataModalOpen(false);
 
       console.log('[App] Successfully loaded', data.length, 'rows');
+
+      // Refresh forecast too
+      handleForecastFetch(data, globalAsinMetadata);
     } catch (error) {
       console.error("Failed to fetch/parse CSV", error);
       alert("Error loading data. Please refresh the page.");
@@ -138,6 +143,22 @@ const App: React.FC = () => {
     }
   }, []);
 
+  const handleForecastFetch = useCallback(async (sales: SalesRecord[], meta: Map<string, { sku: string; title: string; line: string }>) => {
+    try {
+      console.log('[App] Fetching forecast from /forecast.xlsx...');
+      const response = await fetch('/forecast.xlsx');
+      if (!response.ok) throw new Error("Forecast file not found");
+
+      const buffer = await response.arrayBuffer();
+      const fcRecords = await processForecastExcel(buffer);
+      const viewData = calculateForecastViewData(sales, fcRecords, meta);
+      setForecastData(viewData);
+      console.log('[App] Forecast loaded:', viewData.length, 'records');
+    } catch (error) {
+      console.warn("Forecast fetch failed (expected if local file not set up yet):", error);
+    }
+  }, []);
+
   const initializeData = (data: SalesRecord[]) => {
     setRawData(data);
     setFilters({
@@ -211,6 +232,9 @@ const App: React.FC = () => {
       // 1c. Always fetch Traffic data (no caching for now)
       console.log("Fetching Traffic data...");
       handleTrafficFetch();
+
+      // 1d. Fetch Forecast data
+      handleForecastFetch(cachedData || [], globalAsinMetadata);
     };
     initApp();
   }, [handleDataFetch]);
@@ -502,6 +526,13 @@ const App: React.FC = () => {
               >
                 <MegaphoneIcon /> <span className="hidden sm:inline">Ads</span>
               </button>
+              <button
+                onClick={() => setView('forecast')}
+                className={`flex items-center gap-2 px-3 py-2 rounded-md text-sm font-medium transition-all
+                  ${view === 'forecast' ? 'bg-slate-800 text-white shadow-sm ring-1 ring-white/10' : 'text-slate-400 hover:text-white hover:bg-slate-800/50'}`}
+              >
+                <ChartIcon /> <span className="hidden sm:inline">Fc 26</span>
+              </button>
             </div>
           </div>
         </div>
@@ -532,6 +563,7 @@ const App: React.FC = () => {
                 {view === 'weekly' && <WeeklyGrid data={combinedAdsData} top50Ranking={top50Ranking2025} onDrillDown={handleSkuDrillDown} />}
                 {view === 'movers' && <TopMovers data={filteredData} />}
                 {view === 'ads' && <AdsPerformance data={combinedAdsData} filters={filters} top50Ranking={top50Ranking2025} />}
+                {view === 'forecast' && <ForecastView data={forecastData} />}
               </Suspense>
             </div>
           </>

api/fetch-forecast.ts

@@ -0,0 +1,49 @@
+
+import type { VercelRequest, VercelResponse } from '@vercel/node';
+import fs from 'fs';
+import path from 'path';
+
+export default async function handler(req: VercelRequest, res: VercelResponse) {
+    // CORS headers
+    res.setHeader('Access-Control-Allow-Origin', '*');
+    res.setHeader('Access-Control-Allow-Methods', 'GET, OPTIONS');
+    res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
+
+    if (req.method === 'OPTIONS') {
+        return res.status(200).end();
+    }
+
+    try {
+        console.log('[fetch-forecast] Reading Forecast file from local storage...');
+        // Try multiple possible paths to be robust
+        const pathsToTry = [
+            path.join(process.cwd(), 'fc 26.xlsx'),
+            path.join(process.cwd(), 'public', 'fc 26.xlsx'),
+            path.join('/Users/christianvidalwolf/github/CrazeAnalytix', 'fc 26.xlsx') // Direct path as fallback for this environment
+        ];
+
+        let buffer = null;
+        let foundPath = '';
+
+        for (const p of pathsToTry) {
+            console.log(`[fetch-forecast] Checking path: ${p}`);
+            if (fs.existsSync(p)) {
+                buffer = fs.readFileSync(p);
+                foundPath = p;
+                break;
+            }
+        }
+
+        if (!buffer) {
+            throw new Error(`Forecast file 'fc 26.xlsx' not found in any of: ${pathsToTry.join(', ')}`);
+        }
+
+        console.log(`[fetch-forecast] Successfully read Forecast Excel from ${foundPath}, size: ${buffer.byteLength}`);
+
+        res.setHeader('Content-Type', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet');
+        res.status(200).send(buffer);
+    } catch (error: any) {
+        console.error('[fetch-forecast] Error:', error);
+        res.status(500).json({ error: error.message });
+    }
+}

components/ForecastView.tsx

@@ -0,0 +1,205 @@
+
+import React, { useMemo, useState } from 'react';
+import { ProductForecastData } from '../types';
+import {
+    BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer,
+    LineChart, Line, Legend, ComposedChart, Area
+} from 'recharts';
+
+interface ForecastViewProps {
+    data: ProductForecastData[];
+}
+
+const COLORS = ['#6366f1', '#ec4899', '#10b981', '#f59e0b', '#8b5cf6', '#0ea5e9'];
+
+const ForecastView: React.FC<ForecastViewProps> = ({ data }) => {
+    const [searchTerm, setSearchTerm] = useState('');
+
+    // Global Aggregate Data
+    const globalMonthlyData = useMemo(() => {
+        const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+        return months.map(m => {
+            let forecast = 0;
+            let actual = 0;
+            data.forEach(p => {
+                const monthPoint = p.monthlyData.find(md => md.month === m);
+                if (monthPoint) {
+                    forecast += monthPoint.forecastUnits;
+                    actual += monthPoint.actualUnits;
+                }
+            });
+            return { name: m, Forecast: forecast, Actual: actual };
+        });
+    }, [data]);
+
+    const globalSummary = useMemo(() => {
+        let totalForecast = 0;
+        let totalActual = 0;
+        data.forEach(p => {
+            totalForecast += p.annualForecast;
+            p.monthlyData.forEach(md => {
+                totalActual += md.actualUnits;
+            });
+        });
+        const fulfillment = totalForecast > 0 ? (totalActual / totalForecast) * 100 : 0;
+        return { totalForecast, totalActual, fulfillment };
+    }, [data]);
+
+    const filteredProducts = useMemo(() => {
+        if (!searchTerm) return data;
+        const s = searchTerm.toLowerCase();
+        return data.filter(p =>
+            p.asin.toLowerCase().includes(s) ||
+            p.sku.toLowerCase().includes(s) ||
+            p.title.toLowerCase().includes(s)
+        );
+    }, [data, searchTerm]);
+
+    const sortedProducts = useMemo(() => {
+        return [...filteredProducts].sort((a, b) => b.annualForecast - a.annualForecast);
+    }, [filteredProducts]);
+
+    return (
+        <div className="p-6 space-y-6 max-w-7xl mx-auto animate-fade-in pb-24">
+
+            {/* Summary Cards */}
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+                <div className="bg-slate-900 border border-border rounded-2xl p-6 shadow-xl relative overflow-hidden group">
+                    <div className="absolute top-0 right-0 w-32 h-32 bg-indigo-500/10 rounded-full -mr-16 -mt-16 blur-3xl group-hover:bg-indigo-500/20 transition-all"></div>
+                    <h3 className="text-xs font-black text-slate-500 uppercase tracking-widest mb-4">Total Forecast 2026</h3>
+                    <div className="text-4xl font-black text-white">
+                        {globalSummary.totalForecast.toLocaleString('de-DE')} <span className="text-sm font-medium text-slate-500">Units</span>
+                    </div>
+                </div>
+
+                <div className="bg-slate-900 border border-border rounded-2xl p-6 shadow-xl relative overflow-hidden group">
+                    <div className="absolute top-0 right-0 w-32 h-32 bg-emerald-500/10 rounded-full -mr-16 -mt-16 blur-3xl group-hover:bg-emerald-500/20 transition-all"></div>
+                    <h3 className="text-xs font-black text-slate-500 uppercase tracking-widest mb-4">Total Actual Sales 2026</h3>
+                    <div className="text-4xl font-black text-emerald-400">
+                        {globalSummary.totalActual.toLocaleString('de-DE')} <span className="text-sm font-medium text-slate-500">Units</span>
+                    </div>
+                </div>
+
+                <div className="bg-slate-900 border border-indigo-500/30 rounded-2xl p-6 shadow-xl relative overflow-hidden group">
+                    <div className="absolute top-0 right-0 w-32 h-32 bg-indigo-500/20 rounded-full -mr-16 -mt-16 blur-3xl"></div>
+                    <h3 className="text-xs font-black text-indigo-400 uppercase tracking-widest mb-4">Global Fulfillment</h3>
+                    <div className="flex items-baseline gap-2">
+                        <div className={`text-4xl font-black ${globalSummary.fulfillment >= 100 ? 'text-emerald-400' : 'text-indigo-400'}`}>
+                            {globalSummary.fulfillment.toFixed(1)}%
+                        </div>
+                    </div>
+                    {/* Fulfillment Progress Bar */}
+                    <div className="mt-4 w-full h-2 bg-slate-800 rounded-full overflow-hidden">
+                        <div
+                            className="h-full bg-gradient-to-r from-indigo-500 to-fuchsia-500 shadow-[0_0_8px_rgba(99,102,241,0.5)] transition-all duration-1000"
+                            style={{ width: `${Math.min(100, globalSummary.fulfillment)}%` }}
+                        ></div>
+                    </div>
+                </div>
+            </div>
+
+            {/* Main Trend Chart */}
+            <div className="bg-slate-900 border border-border rounded-2xl p-6 shadow-xl">
+                <div className="flex justify-between items-center mb-6">
+                    <h3 className="text-lg font-bold text-white flex items-center gap-2">
+                        <svg className="w-5 h-5 text-indigo-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" /></svg>
+                        Monthly Evolution: Forecast vs Actual
+                    </h3>
+                </div>
+                <div className="h-96">
+                    <ResponsiveContainer width="100%" height="100%">
+                        <ComposedChart data={globalMonthlyData}>
+                            <CartesianGrid strokeDasharray="3 3" stroke="#1e293b" vertical={false} />
+                            <XAxis dataKey="name" stroke="#64748b" />
+                            <YAxis stroke="#64748b" />
+                            <Tooltip
+                                contentStyle={{ backgroundColor: '#0f172a', borderColor: '#1e293b', borderRadius: '12px', padding: '12px' }}
+                                itemStyle={{ fontWeight: 'bold' }}
+                            />
+                            <Legend verticalAlign="top" height={36} />
+                            <Bar dataKey="Actual" fill="#10b981" radius={[4, 4, 0, 0]} name="Actual Sales" barSize={40} />
+                            <Line type="monotone" dataKey="Forecast" stroke="#6366f1" strokeWidth={4} dot={{ r: 6, fill: '#6366f1' }} name="Forecast Target" />
+                            <Area type="monotone" dataKey="Forecast" fill="#6366f1" fillOpacity={0.05} stroke="none" />
+                        </ComposedChart>
+                    </ResponsiveContainer>
+                </div>
+            </div>
+
+            {/* Product Table */}
+            <div className="bg-slate-900 border border-border rounded-2xl shadow-xl overflow-hidden">
+                <div className="p-6 border-b border-border flex flex-col md:flex-row justify-between gap-4">
+                    <h3 className="text-lg font-bold text-white uppercase tracking-tight">Product Performance Comparison</h3>
+                    <div className="relative">
+                        <input
+                            type="text"
+                            placeholder="Search by ASIN, SKU or Title..."
+                            value={searchTerm}
+                            onChange={(e) => setSearchTerm(e.target.value)}
+                            className="bg-slate-950 border border-slate-700 rounded-lg px-10 py-2 text-sm text-slate-200 focus:outline-none focus:border-indigo-500 w-full md:w-80"
+                        />
+                        <svg className="absolute left-3 top-2.5 w-4 h-4 text-slate-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" /></svg>
+                    </div>
+                </div>
+                <div className="overflow-x-auto">
+                    <table className="w-full text-left text-sm whitespace-nowrap">
+                        <thead className="bg-slate-950 text-slate-500 uppercase text-[10px] font-black tracking-widest border-b border-border">
+                            <tr>
+                                <th className="px-6 py-4">Product Info</th>
+                                <th className="px-6 py-4 text-right">Annual Forecast</th>
+                                <th className="px-6 py-4 text-right">Actual 2026</th>
+                                <th className="px-6 py-4 text-right">Fulfillment %</th>
+                                <th className="px-6 py-4">Monthly Status (YTD)</th>
+                            </tr>
+                        </thead>
+                        <tbody className="divide-y divide-slate-800">
+                            {sortedProducts.map((p) => {
+                                const actualTotal = p.monthlyData.reduce((acc, md) => acc + md.actualUnits, 0);
+                                const fulfillment = p.annualForecast > 0 ? (actualTotal / p.annualForecast) * 100 : 0;
+
+                                return (
+                                    <tr key={p.asin} className="hover:bg-indigo-500/5 transition-colors group">
+                                        <td className="px-6 py-4">
+                                            <div className="flex flex-col">
+                                                <span className="font-bold text-slate-200 group-hover:text-indigo-400 transition-colors">{p.asin}</span>
+                                                <span className="text-[10px] text-slate-500 truncate max-w-xs">{p.title}</span>
+                                            </div>
+                                        </td>
+                                        <td className="px-6 py-4 text-right font-mono font-bold text-slate-400">
+                                            {p.annualForecast.toLocaleString('de-DE')}
+                                        </td>
+                                        <td className="px-6 py-4 text-right font-mono font-bold text-emerald-400">
+                                            {actualTotal.toLocaleString('de-DE')}
+                                        </td>
+                                        <td className="px-6 py-4 text-right">
+                                            <span className={`px-2 py-1 rounded text-xs font-black ${fulfillment >= 50 ? 'bg-emerald-500/10 text-emerald-400' : fulfillment >= 20 ? 'bg-indigo-500/10 text-indigo-400' : 'bg-slate-800 text-slate-500'}`}>
+                                                {fulfillment.toFixed(1)}%
+                                            </span>
+                                        </td>
+                                        <td className="px-6 py-4 min-w-[240px]">
+                                            <div className="flex gap-1 h-3 items-end">
+                                                {p.monthlyData.map((md, idx) => {
+                                                    const isMet = md.actualUnits >= md.forecastUnits && md.forecastUnits > 0;
+                                                    const height = md.forecastUnits > 0 ? (Math.min(1.5, md.actualUnits / md.forecastUnits) * 100) : 0;
+                                                    return (
+                                                        <div
+                                                            key={md.month}
+                                                            className={`flex-1 rounded-t-sm transition-all ${isMet ? 'bg-emerald-500' : md.actualUnits > 0 ? 'bg-indigo-500' : 'bg-slate-800'}`}
+                                                            style={{ height: `${Math.max(10, height)}%` }}
+                                                            title={`${md.month}: ${md.actualUnits} / ${md.forecastUnits}`}
+                                                        ></div>
+                                                    );
+                                                })}
+                                            </div>
+                                        </td>
+                                    </tr>
+                                );
+                            })}
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default ForecastView;

services/dataProcessor.ts

@@ -1,4 +1,4 @@
-import { SalesRecord, AdsRecord, TrafficRecord, CombinedKPIs, FilterState, AggregatedData, LineGrowthMetric, ItemGrowthMetric, SeasonalityPoint, YearlySplitData, PivotRow, YearlyData, TimeSeriesData, ComparisonTimeSeriesPoint } from '../types';
+import { SalesRecord, AdsRecord, TrafficRecord, CombinedKPIs, FilterState, AggregatedData, LineGrowthMetric, ItemGrowthMetric, SeasonalityPoint, YearlySplitData, PivotRow, YearlyData, TimeSeriesData, ComparisonTimeSeriesPoint, ForecastRecord, MonthlyForecastPoint, ProductForecastData } from '../types';
 import * as XLSX from 'xlsx';
 import Papa from 'papaparse';
 
@@ -1496,3 +1496,96 @@ export const pivotWeeklySalesData = (data: CombinedKPIs[]): {
         weeks: sortedWeeks
     };
 };
+
+export const processForecastExcel = async (fileOrBuffer: File | ArrayBuffer): Promise<ForecastRecord[]> => {
+    try {
+        const arrayBuffer = fileOrBuffer instanceof File
+            ? await fileOrBuffer.arrayBuffer()
+            : fileOrBuffer;
+        const workbook = XLSX.read(arrayBuffer, { type: 'array' });
+        const sheetName = workbook.SheetNames[0];
+        const worksheet = workbook.Sheets[sheetName];
+        const jsonData: any[] = XLSX.utils.sheet_to_json(worksheet, { defval: "" });
+
+        return jsonData.map(row => ({
+            asin: String(row['ASIN'] || row['asin'] || '').trim().toUpperCase(),
+            annualForecast: parseUnits(String(row['Forecast 2026'] || row['forecast 2026'] || '0'))
+        })).filter(r => r.asin && r.annualForecast > 0);
+    } catch (error) {
+        console.error("Error processing Forecast Excel:", error);
+        throw error;
+    }
+};
+
+export const calculateForecastViewData = (
+    rawData: SalesRecord[],
+    forecastData: ForecastRecord[],
+    asinMetadata: Map<string, { sku: string; title: string; line: string }>
+): ProductForecastData[] => {
+    const data2025 = rawData.filter(r => r.year === 2025);
+    const data2026 = rawData.filter(r => r.year === 2026);
+
+    // Calculate Global Seasonality weights for 2025
+    const getWeights = (records: SalesRecord[]) => {
+        const weights = new Array(12).fill(0);
+        let total = 0;
+        records.forEach(r => {
+            const m = r.month.split('-')[0];
+            const idx = MONTH_ORDER.indexOf(m);
+            if (idx !== -1) {
+                weights[idx] += r.units;
+                total += r.units;
+            }
+        });
+        if (total === 0) return new Array(12).fill(1 / 12);
+        return weights.map(w => w / total);
+    };
+
+    const globalWeights = getWeights(data2025);
+
+    // Map 2025 data by ASIN for quick access
+    const dataByAsin2025 = new Map<string, SalesRecord[]>();
+    data2025.forEach(r => {
+        const key = r.asin.trim().toUpperCase();
+        if (!dataByAsin2025.has(key)) dataByAsin2025.set(key, []);
+        dataByAsin2025.get(key)!.push(r);
+    });
+
+    // Map 2026 actual sales by ASIN and Month
+    const actuals2026 = new Map<string, Map<string, number>>();
+    data2026.forEach(r => {
+        const key = r.asin.trim().toUpperCase();
+        const m = r.month.split('-')[0];
+        if (!actuals2026.has(key)) actuals2026.set(key, new Map());
+        const monthMap = actuals2026.get(key)!;
+        monthMap.set(m, (monthMap.get(m) || 0) + r.units);
+    });
+
+    return forecastData.map(fc => {
+        const identifier = fc.asin.toUpperCase();
+        const meta = asinMetadata.get(identifier);
+
+        // 1. Determine weights (Product specific or global backup)
+        const productRecords2025 = dataByAsin2025.get(identifier) || [];
+        const weights = productRecords2025.length > 0 ? getWeights(productRecords2025) : globalWeights;
+
+        // 2. Build monthly points
+        const monthlyData: MonthlyForecastPoint[] = MONTH_ORDER.map((m, idx) => {
+            const forecastUnits = Math.round(fc.annualForecast * weights[idx]);
+            const actualUnits = actuals2026.get(identifier)?.get(m) || 0;
+            return {
+                month: m,
+                forecastUnits,
+                actualUnits
+            };
+        });
+
+        return {
+            asin: identifier,
+            sku: meta?.sku || identifier, // Fallback to ASIN if SKU not found
+            title: meta?.title || identifier,
+            annualForecast: fc.annualForecast,
+            monthlyData
+        };
+    });
+};

types.ts

@@ -194,3 +194,22 @@ export interface CombinedKPIs {
   cvrUnits: number;
   glanceViews: number;   // Traffic / page views
 }
+
+export interface ForecastRecord {
+  asin: string;
+  annualForecast: number;
+}
+
+export interface MonthlyForecastPoint {
+  month: string;
+  forecastUnits: number;
+  actualUnits: number;
+}
+
+export interface ProductForecastData {
+  asin: string;
+  sku: string;
+  title: string;
+  annualForecast: number;
+  monthlyData: MonthlyForecastPoint[];
+}