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

feat: Integrate PapaParse for CSV handling

Browse Source 
Adds papaparse as a dependency and updates the data processing service to use it for more robust CSV file parsing. This replaces manual CSV parsing logic with a dedicated library, improving reliability and handling of various CSV formats.

Also renames the `MoversIcon` to `TrendingIcon` to better reflect its usage in indicating trending performance metrics.
This commit is contained in:
Christian
2025-12-11 14:03:33 +01:00
parent 9ba63ab8f8
commit 31eed97ec4
14 changed files with 1311 additions and 1333 deletions
Download Patch File Download Diff File Expand all files Collapse all files
App.tsx
+22 -63
View File
@@ -1,15 +1,16 @@
import React, { useState, useMemo, useEffect, useCallback } from 'react'; import React, { useState, useMemo, useEffect, useCallback } from 'react';
import FileUpload from './components/FileUpload'; import FileUpload from './components/FileUpload';
import Dashboard from './components/Dashboard'; import Dashboard from './components/Dashboard';
import DataGrid from './components/DataGrid'; import DataGrid from './components/DataGrid';
import TopMovers from './components/TopMovers';
import FilterBar from './components/FilterBar'; import FilterBar from './components/FilterBar';
import AIChat from './components/AIChat'; import AIChat from './components/AIChat';
import CrazeLogo from './components/CrazeLogo'; import CrazeLogo from './components/CrazeLogo';
import TopMoversPage from './components/TopMoversPage'; // New import
import { SalesRecord, FilterState, AggregatedData } from './types'; import { SalesRecord, FilterState, AggregatedData } from './types';
import { processCSV, processExcel, filterData, aggregateData, getUniqueValues } from './services/dataProcessor'; import { processCSV, filterData, aggregateData, getUniqueValues } from './services/dataProcessor';
import { queryGemini } from './services/geminiService'; import { queryGemini } from './services/geminiService';
import { ChartIcon, TableIcon, UploadIcon, DownloadIcon, CloseIcon } from './components/Icons'; import { ChartIcon, TableIcon, UploadIcon, DownloadIcon, CloseIcon, TrendingIcon } from './components/Icons';
import { loadSalesData, saveSalesData, clearSalesData } from './services/storage'; import { loadSalesData, saveSalesData, clearSalesData } from './services/storage';
// New Refresh Icon // New Refresh Icon
@@ -19,13 +20,6 @@ const RefreshIcon = ({ className }: { className?: string }) => (
</svg> </svg>
); );
// New Movers Icon
const MoversIcon = ({ className }: { className?: string }) => (
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className={className}>
<path strokeLinecap="round" strokeLinejoin="round" d="M2.25 18 9 11.25l4.306 4.305a11.164 11.164 0 0 0 5.814-5.815L21.75 6m0 0-3.5-3.5m3.5 3.5-3.5 3.5" />
</svg>
);
// Hardcoded Permanent URL for Auto-Loading // Hardcoded Permanent URL for Auto-Loading
// Using the original share link to leverage Dropbox's redirect for robust fetching. // Using the original share link to leverage Dropbox's redirect for robust fetching.
const PERMANENT_DROPBOX_URL = "https://www.dropbox.com/scl/fi/b9zxn4z5i7sxwfakk5g5y/Amazon-Sell-Out-2023-2025.csv?rlkey=uoto6v0mm99py8nszy8ldtez8&dl=0"; const PERMANENT_DROPBOX_URL = "https://www.dropbox.com/scl/fi/b9zxn4z5i7sxwfakk5g5y/Amazon-Sell-Out-2023-2025.csv?rlkey=uoto6v0mm99py8nszy8ldtez8&dl=0";
@@ -34,14 +28,11 @@ const App: React.FC = () => {
const [rawData, setRawData] = useState<SalesRecord[]>([]); const [rawData, setRawData] = useState<SalesRecord[]>([]);
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
const [syncing, setSyncing] = useState(false); const [syncing, setSyncing] = useState(false);
const [view, setView] = useState<'dashboard' | 'table' | 'topMovers'>('dashboard'); // Added 'topMovers' const [view, setView] = useState<'dashboard' | 'table' | 'movers'>('dashboard');
const [isChatOpen, setIsChatOpen] = useState(false); const [isChatOpen, setIsChatOpen] = useState(false);
const [activeUrl, setActiveUrl] = useState<string | null>(() => localStorage.getItem('craze_csv_url') || PERMANENT_DROPBOX_URL); const [activeUrl, setActiveUrl] = useState<string | null>(() => localStorage.getItem('craze_csv_url') || PERMANENT_DROPBOX_URL);
const [lastUpdated, setLastUpdated] = useState<string | null>(null); const [lastUpdated, setLastUpdated] = useState<string | null>(null);
// API Key State
const [apiKey, setApiKey] = useState<string>(() => localStorage.getItem('gemini_api_key') || '');
// Modal State // Modal State
const [isDataModalOpen, setIsDataModalOpen] = useState(false); const [isDataModalOpen, setIsDataModalOpen] = useState(false);
@@ -56,16 +47,6 @@ const App: React.FC = () => {
title: [], title: [],
}); });
// Handle API Key Change
const handleApiKeyChange = (key: string) => {
setApiKey(key);
if (key) {
localStorage.setItem('gemini_api_key', key);
} else {
localStorage.removeItem('gemini_api_key');
}
};
// Handle URL Fetch (Auto/Manual) // Handle URL Fetch (Auto/Manual)
const handleUrlFetch = useCallback(async (url: string) => { const handleUrlFetch = useCallback(async (url: string) => {
setSyncing(true); setSyncing(true);
@@ -79,6 +60,8 @@ const App: React.FC = () => {
} }
// Use a CORS proxy to bypass browser's same-origin policy restrictions. // Use a CORS proxy to bypass browser's same-origin policy restrictions.
// This is necessary because Dropbox does not send the required CORS headers
// for direct client-side fetching from another domain.
const proxyUrl = `https://corsproxy.io/?${encodeURIComponent(directUrl)}`; const proxyUrl = `https://corsproxy.io/?${encodeURIComponent(directUrl)}`;
const response = await fetch(proxyUrl); const response = await fetch(proxyUrl);
@@ -152,24 +135,14 @@ const App: React.FC = () => {
const handleFileUpload = async (file: File) => { const handleFileUpload = async (file: File) => {
setSyncing(true); setSyncing(true);
try { try {
let data: SalesRecord[] = []; const data = await processCSV(file);
const lowerName = file.name.toLowerCase();
if (lowerName.endsWith('.csv')) {
data = await processCSV(file);
} else if (lowerName.endsWith('.xlsx') || lowerName.endsWith('.xls')) {
data = await processExcel(file);
} else {
throw new Error("Unsupported file format");
}
await saveSalesData(data); await saveSalesData(data);
initializeData(data); initializeData(data);
setLastUpdated(new Date().toISOString()); setLastUpdated(new Date().toISOString());
setIsDataModalOpen(false); setIsDataModalOpen(false);
} catch (error) { } catch (error) {
console.error("Failed to parse file", error); console.error("Failed to parse CSV", error);
alert("Error parsing file. Please check format (CSV or Excel)."); alert("Error parsing CSV. Please check the format.");
} finally { } finally {
setSyncing(false); setSyncing(false);
} }
@@ -254,7 +227,7 @@ const App: React.FC = () => {
}; };
const handleAskGemini = async (text: string) => { const handleAskGemini = async (text: string) => {
return await queryGemini(apiKey, text, aggregatedData, filteredData.length); return await queryGemini(text, aggregatedData, filteredData.length);
}; };
const disconnectUrl = async () => { const disconnectUrl = async () => {
@@ -329,12 +302,12 @@ const App: React.FC = () => {
> >
<TableIcon /> <span className="hidden sm:inline">Data Grid</span> <TableIcon /> <span className="hidden sm:inline">Data Grid</span>
</button> </button>
<button // New Top Movers Button <button
onClick={() => setView('topMovers')} onClick={() => setView('movers')}
className={`flex items-center gap-2 px-4 py-2 rounded-md text-sm font-medium transition-all className={`flex items-center gap-2 px-4 py-2 rounded-md text-sm font-medium transition-all
${view === 'topMovers' ? 'bg-slate-800 text-white shadow-sm ring-1 ring-white/10' : 'text-slate-400 hover:text-white hover:bg-slate-800/50'}`} ${view === 'movers' ? 'bg-slate-800 text-white shadow-sm ring-1 ring-white/10' : 'text-slate-400 hover:text-white hover:bg-slate-800/50'}`}
> >
<MoversIcon className="w-5 h-5" /> <span className="hidden sm:inline">Top Movers</span> <TrendingIcon /> <span className="hidden sm:inline">Top Movers</span>
</button> </button>
</div> </div>
</div> </div>
@@ -352,37 +325,23 @@ const App: React.FC = () => {
</div> </div>
) : ( ) : (
<> <>
{/* FilterBar is now relevant for all views including Top Movers */} <FilterBar filters={filters} onFilterChange={handleFilterChange} options={filterOptions} />
{(view === 'dashboard' || view === 'table' || view === 'topMovers') && (
<FilterBar filters={filters} onFilterChange={handleFilterChange} options={filterOptions} />
)}
<div className="mt-6"> <div className="mt-6">
{view === 'dashboard' ? ( {view === 'dashboard' && (
<Dashboard <Dashboard
data={aggregatedData} data={aggregatedData}
contextData={contextAggregatedData} // Pass context data contextData={contextAggregatedData}
/>
) : view === 'table' ? (
<DataGrid data={filteredData} />
) : ( // New Top Movers View
<TopMoversPage
filteredData={filteredData} // Pass globally filtered data
/> />
)} )}
{view === 'table' && <DataGrid data={filteredData} />}
{view === 'movers' && <TopMovers data={filteredData} />}
</div> </div>
</> </>
)} )}
</main> </main>
{/* Chat Assistant - Now with API Key Props */} {/* Chat Assistant */}
<AIChat <AIChat onSendMessage={handleAskGemini} isOpen={isChatOpen} setIsOpen={setIsChatOpen} />
onSendMessage={handleAskGemini}
isOpen={isChatOpen}
setIsOpen={setIsChatOpen}
apiKey={apiKey}
onApiKeyChange={handleApiKeyChange}
/>
{/* DATA MODAL */} {/* DATA MODAL */}
{isDataModalOpen && ( {isDataModalOpen && (
components/AIChat.tsx
+52 -125
View File
@@ -1,4 +1,3 @@
import React, { useState, useRef, useEffect } from 'react'; import React, { useState, useRef, useEffect } from 'react';
import { ChatIcon, CloseIcon, SendIcon } from './Icons'; import { ChatIcon, CloseIcon, SendIcon } from './Icons';
import { ChatMessage } from '../types'; import { ChatMessage } from '../types';
@@ -7,8 +6,6 @@ interface AIChatProps {
onSendMessage: (text: string) => Promise<string>; onSendMessage: (text: string) => Promise<string>;
isOpen: boolean; isOpen: boolean;
setIsOpen: (open: boolean) => void; setIsOpen: (open: boolean) => void;
apiKey: string;
onApiKeyChange: (key: string) => void;
} }
const ModelMessage: React.FC<{ text: string }> = ({ text }) => { const ModelMessage: React.FC<{ text: string }> = ({ text }) => {
@@ -58,37 +55,23 @@ const ModelMessage: React.FC<{ text: string }> = ({ text }) => {
return <>{elements.length > 0 ? elements : <p>{text}</p>}</>; return <>{elements.length > 0 ? elements : <p>{text}</p>}</>;
}; };
const SettingsIcon = () => (
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-5 h-5">
<path strokeLinecap="round" strokeLinejoin="round" d="M10.34 15.84c-.688-.06-1.386-.09-2.09-.09H7.5a4.5 4.5 0 1 1 0-9h.75c.704 0 1.402-.03 2.09-.09a1.692 1.692 0 0 1 1.624 1.374c.11 1.054.547 2.028 1.218 2.822.67.793 1.644 1.23 2.697 1.34a1.694 1.694 0 0 1 1.374 1.625c.06.688.09 1.386.09 2.09v.75a4.5 4.5 0 1 1-9 0v-.75c0-.704-.03-1.402-.09-2.09a1.692 1.692 0 0 1-1.374-1.624 11.264 11.264 0 0 0-1.34-2.698 11.263 11.263 0 0 0-2.822-1.217A1.692 1.692 0 0 1 10.34 15.84Z" />
</svg>
);
const AIChat: React.FC<AIChatProps> = ({ onSendMessage, isOpen, setIsOpen }) => {
const AIChat: React.FC<AIChatProps> = ({ onSendMessage, isOpen, setIsOpen, apiKey, onApiKeyChange }) => {
const [messages, setMessages] = useState<ChatMessage[]>([ const [messages, setMessages] = useState<ChatMessage[]>([
{ role: 'model', text: 'Hello! I am your AI Data Analyst. I can answer questions about your data, analyze trends, and perform calculations.', timestamp: new Date() } { role: 'model', text: 'Hello! I am your Sales Data Assistant. Ask me anything about the loaded data.', timestamp: new Date() }
]); ]);
const [input, setInput] = useState(''); const [input, setInput] = useState('');
const [isTyping, setIsTyping] = useState(false); const [isTyping, setIsTyping] = useState(false);
const [showConfig, setShowConfig] = useState(!apiKey);
const messagesEndRef = useRef<HTMLDivElement>(null); const messagesEndRef = useRef<HTMLDivElement>(null);
const scrollToBottom = () => { const scrollToBottom = () => {
messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' }); messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
}; };
useEffect(() => { useEffect(scrollToBottom, [messages, isOpen]);
if (isOpen) scrollToBottom();
}, [messages, isOpen, showConfig]);
useEffect(() => {
// If no API key is present when opened, show config
if (!apiKey) setShowConfig(true);
}, [apiKey]);
const handleSend = async () => { const handleSend = async () => {
if (!input.trim() || !apiKey) return; if (!input.trim()) return;
const userMsg: ChatMessage = { role: 'user', text: input, timestamp: new Date() }; const userMsg: ChatMessage = { role: 'user', text: input, timestamp: new Date() };
setMessages(prev => [...prev, userMsg]); setMessages(prev => [...prev, userMsg]);
@@ -108,12 +91,6 @@ const AIChat: React.FC<AIChatProps> = ({ onSendMessage, isOpen, setIsOpen, apiKe
} }
}; };
const handleSaveKey = (e: React.FormEvent) => {
e.preventDefault();
// Input value is already bound to parent state via local var, but we use form submission to switch view
if (apiKey) setShowConfig(false);
};
return ( return (
<> <>
{/* Trigger Button */} {/* Trigger Button */}
@@ -135,110 +112,60 @@ const AIChat: React.FC<AIChatProps> = ({ onSendMessage, isOpen, setIsOpen, apiKe
{/* Header */} {/* Header */}
<div className="bg-primary/10 p-4 border-b border-border flex justify-between items-center backdrop-blur"> <div className="bg-primary/10 p-4 border-b border-border flex justify-between items-center backdrop-blur">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<div className={`w-2 h-2 rounded-full ${apiKey ? 'bg-green-400 animate-pulse' : 'bg-red-500'}`}></div> <div className="w-2 h-2 rounded-full bg-green-400 animate-pulse"></div>
<h3 className="font-bold text-slate-100">AI Data Assistant</h3> <h3 className="font-bold text-slate-100">Data Assistant</h3>
</div> </div>
<div className="flex gap-2"> <button onClick={() => setIsOpen(false)} className="text-slate-400 hover:text-white transition-colors">
<CloseIcon />
</button>
</div>
{/* Messages */}
<div className="flex-1 overflow-y-auto p-4 space-y-4 bg-slate-950/50">
{messages.map((msg, idx) => (
<div key={idx} className={`flex ${msg.role === 'user' ? 'justify-end' : 'justify-start'}`}>
<div
className={`max-w-[85%] rounded-2xl p-3 text-sm leading-relaxed shadow-sm
${msg.role === 'user'
? 'bg-primary text-white rounded-br-none'
: 'bg-slate-800 text-slate-200 border border-border rounded-bl-none'}`}
>
{msg.role === 'model' ? <ModelMessage text={msg.text} /> : msg.text}
</div>
</div>
))}
{isTyping && (
<div className="flex justify-start">
<div className="bg-slate-800 border border-border rounded-2xl rounded-bl-none p-4 flex gap-1 items-center">
<div className="w-2 h-2 bg-slate-500 rounded-full animate-bounce"></div>
<div className="w-2 h-2 bg-slate-500 rounded-full animate-bounce delay-100"></div>
<div className="w-2 h-2 bg-slate-500 rounded-full animate-bounce delay-200"></div>
</div>
</div>
)}
<div ref={messagesEndRef} />
</div>
{/* Input */}
<div className="p-4 bg-slate-900 border-t border-border">
<div className="relative">
<input
type="text"
value={input}
onChange={(e) => setInput(e.target.value)}
onKeyDown={handleKeyDown}
placeholder="Ask about trends, totals..."
className="w-full bg-slate-950 border border-slate-700 text-slate-200 rounded-full py-3 pl-4 pr-12 focus:outline-none focus:border-primary transition-colors placeholder-slate-500 text-sm"
/>
<button <button
onClick={() => setShowConfig(!showConfig)} onClick={handleSend}
className="text-slate-400 hover:text-white transition-colors p-1 rounded hover:bg-white/10" disabled={!input.trim() || isTyping}
title="API Settings" className="absolute right-2 top-1/2 -translate-y-1/2 p-2 bg-primary text-white rounded-full hover:bg-indigo-400 disabled:opacity-50 transition-colors"
> >
<SettingsIcon /> <SendIcon />
</button>
<button onClick={() => setIsOpen(false)} className="text-slate-400 hover:text-white transition-colors p-1 rounded hover:bg-white/10">
<CloseIcon />
</button> </button>
</div> </div>
</div> </div>
{/* Configuration Screen */}
{showConfig ? (
<div className="flex-1 p-6 flex flex-col justify-center bg-slate-950">
<div className="mb-6 text-center">
<div className="w-12 h-12 bg-indigo-500/20 rounded-full flex items-center justify-center mx-auto mb-4 text-indigo-400">
<ChatIcon />
</div>
<h3 className="text-lg font-bold text-white mb-2">Connect Gemini AI</h3>
<p className="text-sm text-slate-400">
To enable the AI assistant, please enter your Google Gemini API Key.
</p>
</div>
<form onSubmit={handleSaveKey} className="space-y-4">
<div>
<label className="block text-xs font-semibold text-slate-500 uppercase mb-1">API Key</label>
<input
type="password"
value={apiKey}
onChange={(e) => onApiKeyChange(e.target.value)}
placeholder="AIzaSy..."
className="w-full bg-slate-900 border border-slate-700 rounded-lg px-4 py-3 text-white focus:ring-2 focus:ring-indigo-500 outline-none"
required
/>
<p className="text-[10px] text-slate-500 mt-2">
Key is stored locally in your browser.
<a href="https://aistudio.google.com/app/apikey" target="_blank" rel="noreferrer" className="text-indigo-400 hover:underline ml-1">Get a key here.</a>
</p>
</div>
<button
type="submit"
className="w-full bg-indigo-600 hover:bg-indigo-500 text-white font-bold py-3 rounded-lg transition-colors"
>
Save & Start Chatting
</button>
</form>
</div>
) : (
<>
{/* Messages */}
<div className="flex-1 overflow-y-auto p-4 space-y-4 bg-slate-950/50 custom-scrollbar">
{messages.map((msg, idx) => (
<div key={idx} className={`flex ${msg.role === 'user' ? 'justify-end' : 'justify-start'}`}>
<div
className={`max-w-[85%] rounded-2xl p-3 text-sm leading-relaxed shadow-sm
${msg.role === 'user'
? 'bg-primary text-white rounded-br-none'
: 'bg-slate-800 text-slate-200 border border-border rounded-bl-none'}`}
>
{msg.role === 'model' ? <ModelMessage text={msg.text} /> : msg.text}
</div>
</div>
))}
{isTyping && (
<div className="flex justify-start">
<div className="bg-slate-800 border border-border rounded-2xl rounded-bl-none p-4 flex gap-1 items-center">
<div className="w-2 h-2 bg-slate-500 rounded-full animate-bounce"></div>
<div className="w-2 h-2 bg-slate-500 rounded-full animate-bounce delay-100"></div>
<div className="w-2 h-2 bg-slate-500 rounded-full animate-bounce delay-200"></div>
</div>
</div>
)}
<div ref={messagesEndRef} />
</div>
{/* Input */}
<div className="p-4 bg-slate-900 border-t border-border">
<div className="relative">
<input
type="text"
value={input}
onChange={(e) => setInput(e.target.value)}
onKeyDown={handleKeyDown}
placeholder="Ask about revenue, growth, units..."
className="w-full bg-slate-950 border border-slate-700 text-slate-200 rounded-full py-3 pl-4 pr-12 focus:outline-none focus:border-primary transition-colors placeholder-slate-500 text-sm"
/>
<button
onClick={handleSend}
disabled={!input.trim() || isTyping}
className="absolute right-2 top-1/2 -translate-y-1/2 p-2 bg-primary text-white rounded-full hover:bg-indigo-400 disabled:opacity-50 transition-colors"
>
<SendIcon />
</button>
</div>
</div>
</>
)}
</div> </div>
</> </>
); );
components/Dashboard.tsx
+120 -153
View File
@@ -1,13 +1,10 @@
import React, { useState, useMemo, useEffect } from 'react'; import React, { useState, useMemo, useEffect } from 'react';
import { AggregatedData, LineGrowthMetric } from '../types'; // Updated import for LineGrowthMetric import { AggregatedData, GrowthMetric } from '../types';
import { import {
BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer,
LineChart, Line, Legend LineChart, Line, Legend
} from 'recharts'; } from 'recharts';
import { DownloadIcon } from './Icons'; // Import DownloadIcon
interface DashboardProps { interface DashboardProps {
data: AggregatedData; data: AggregatedData;
@@ -17,13 +14,7 @@ interface DashboardProps {
const COLORS = ['#6366f1', '#ec4899', '#10b981', '#f59e0b', '#8b5cf6', '#0ea5e9']; const COLORS = ['#6366f1', '#ec4899', '#10b981', '#f59e0b', '#8b5cf6', '#0ea5e9'];
// Reusable Expandable Card Component // Reusable Expandable Card Component
export const ExpandableCard: React.FC<{ const ExpandableCard: React.FC<{ title: string; children: React.ReactNode; className?: string }> = ({ title, children, className }) => {
title: string;
children: React.ReactNode;
className?: string;
onExport?: () => void; // Optional export function
exportFileName?: string; // Optional export file name
}> = ({ title, children, className, onExport, exportFileName }) => {
const [isExpanded, setIsExpanded] = useState(false); const [isExpanded, setIsExpanded] = useState(false);
const toggleExpand = () => setIsExpanded(!isExpanded); const toggleExpand = () => setIsExpanded(!isExpanded);
@@ -58,14 +49,6 @@ export const ExpandableCard: React.FC<{
<div className="flex justify-between items-center mb-4 border-b border-slate-800 pb-4 shrink-0"> <div className="flex justify-between items-center mb-4 border-b border-slate-800 pb-4 shrink-0">
<h3 className="text-xl font-bold text-slate-100 uppercase tracking-wide">{title}</h3> <h3 className="text-xl font-bold text-slate-100 uppercase tracking-wide">{title}</h3>
{onExport && (
<button
onClick={onExport}
className="flex items-center gap-2 px-3 py-2 bg-indigo-600 hover:bg-indigo-700 text-white rounded-lg text-sm font-medium transition-colors shadow-sm"
>
<DownloadIcon /> Export CSV
</button>
)}
</div> </div>
<div className="flex-1 overflow-auto bg-slate-900 rounded-xl p-6 border border-border custom-scrollbar"> <div className="flex-1 overflow-auto bg-slate-900 rounded-xl p-6 border border-border custom-scrollbar">
{children} {children}
@@ -80,26 +63,15 @@ export const ExpandableCard: React.FC<{
> >
<div className="flex justify-between items-start mb-4"> <div className="flex justify-between items-start mb-4">
<h3 className="text-sm font-semibold text-slate-400 uppercase tracking-wide">{title}</h3> <h3 className="text-sm font-semibold text-slate-400 uppercase tracking-wide">{title}</h3>
<div className="flex items-center gap-2"> <button
{onExport && ( onClick={toggleExpand}
<button className="opacity-0 group-hover:opacity-100 text-slate-500 hover:text-primary transition-opacity"
onClick={onExport} title="Expand to Fullscreen"
className="opacity-0 group-hover:opacity-100 text-slate-500 hover:text-indigo-400 transition-opacity" >
title={`Export ${exportFileName || title} to CSV`} <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-5 h-5">
> <path strokeLinecap="round" strokeLinejoin="round" d="M3.75 3.75v4.5m0-4.5h4.5m-4.5 0L9 9M3.75 20.25v-4.5m0 4.5h4.5m-4.5 0L9 15M20.25 3.75h-4.5m4.5 0v4.5m0-4.5L15 9m5.25 11.25h-4.5m4.5 0v-4.5m0 4.5L15 15" />
<DownloadIcon /> </svg>
</button> </button>
)}
<button
onClick={toggleExpand}
className="opacity-0 group-hover:opacity-100 text-slate-500 hover:text-primary transition-opacity"
title="Expand to Fullscreen"
>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-5 h-5">
<path strokeLinecap="round" strokeLinejoin="round" d="M3.75 3.75v4.5m0-4.5h4.5m-4.5 0L9 9M3.75 20.25v-4.5m0 4.5h4.5m-4.5 0L9 15M20.25 3.75h-4.5m4.5 0v4.5m0-4.5L15 9m5.25 11.25h-4.5m4.5 0v-4.5m0 4.5L15 15" />
</svg>
</button>
</div>
</div> </div>
<div className="flex-1 min-h-[250px] cursor-pointer" onClick={toggleExpand}>{children}</div> <div className="flex-1 min-h-[250px] cursor-pointer" onClick={toggleExpand}>{children}</div>
</div> </div>
@@ -325,11 +297,11 @@ const ComparisonTooltip = ({ active, payload, label, metric }: any) => {
const GrowthTable: React.FC<{ const GrowthTable: React.FC<{
title: string; title: string;
data: LineGrowthMetric[]; // Updated to LineGrowthMetric data: GrowthMetric[];
type: 'growth' | 'decline'; type: 'growth' | 'decline';
periods: { current: string; previous: string }; periods: { current: string; previous: string };
}> = ({ title, data, type, periods }) => { }> = ({ title, data, type, periods }) => {
const [sortConfig, setSortConfig] = useState<{ key: keyof LineGrowthMetric | null; direction: 'asc' | 'desc' }>({ key: null, direction: 'desc' }); const [sortConfig, setSortConfig] = useState<{ key: keyof GrowthMetric | null; direction: 'asc' | 'desc' }>({ key: null, direction: 'desc' });
const sortedData = useMemo(() => { const sortedData = useMemo(() => {
if (!sortConfig.key) return data; if (!sortConfig.key) return data;
@@ -344,7 +316,7 @@ const GrowthTable: React.FC<{
}); });
}, [data, sortConfig]); }, [data, sortConfig]);
const requestSort = (key: keyof LineGrowthMetric) => { const requestSort = (key: keyof GrowthMetric) => {
let direction: 'asc' | 'desc' = 'desc'; let direction: 'asc' | 'desc' = 'desc';
// If already sorting by this key, toggle direction // If already sorting by this key, toggle direction
if (sortConfig.key === key && sortConfig.direction === 'desc') { if (sortConfig.key === key && sortConfig.direction === 'desc') {
@@ -353,7 +325,7 @@ const GrowthTable: React.FC<{
setSortConfig({ key, direction }); setSortConfig({ key, direction });
}; };
const getSortIndicator = (key: keyof LineGrowthMetric) => { const getSortIndicator = (key: keyof GrowthMetric) => {
if (sortConfig.key !== key) { if (sortConfig.key !== key) {
return ( return (
<svg className="w-2.5 h-2.5 ml-1 text-slate-600 opacity-0 group-hover:opacity-50" fill="currentColor" viewBox="0 0 20 20"> <svg className="w-2.5 h-2.5 ml-1 text-slate-600 opacity-0 group-hover:opacity-50" fill="currentColor" viewBox="0 0 20 20">
@@ -372,112 +344,113 @@ const GrowthTable: React.FC<{
}; };
return ( return (
<div className="overflow-auto h-full relative"> <ExpandableCard title={title} className="h-full">
<table className="w-full text-left text-sm h-full border-separate border-spacing-0"> <div className="overflow-auto h-full relative">
<thead className="bg-slate-950 text-xs uppercase font-semibold text-slate-500 sticky top-0 z-10 shadow-sm"> <table className="w-full text-left text-sm h-full border-separate border-spacing-0">
<tr> <thead className="bg-slate-950 text-xs uppercase font-semibold text-slate-500 sticky top-0 z-10 shadow-sm">
<th <tr>
className="px-4 py-3 bg-slate-950 min-w-[150px] cursor-pointer hover:text-slate-300 group select-none transition-colors" <th
onClick={() => requestSort('line')} className="px-4 py-3 bg-slate-950 min-w-[150px] cursor-pointer hover:text-slate-300 group select-none transition-colors"
> onClick={() => requestSort('line')}
<div className="flex items-center">Product Line {getSortIndicator('line')}</div> >
</th> <div className="flex items-center">Product Line {getSortIndicator('line')}</div>
</th>
{/* Sell Out Columns */} {/* Sell Out Columns */}
<th <th
className="px-4 py-3 text-right bg-slate-950 text-slate-400 cursor-pointer hover:text-slate-300 group select-none transition-colors" className="px-4 py-3 text-right bg-slate-950 text-slate-400 cursor-pointer hover:text-slate-300 group select-none transition-colors"
onClick={() => requestSort('previousYearSellOut')} onClick={() => requestSort('previousYearSellOut')}
> >
<div className="flex items-center justify-end">Sell Out {periods.previous} {getSortIndicator('previousYearSellOut')}</div> <div className="flex items-center justify-end">Sell Out {periods.previous} {getSortIndicator('previousYearSellOut')}</div>
</th> </th>
<th <th
className="px-4 py-3 text-right bg-slate-950 text-slate-200 cursor-pointer hover:text-white group select-none transition-colors" className="px-4 py-3 text-right bg-slate-950 text-slate-200 cursor-pointer hover:text-white group select-none transition-colors"
onClick={() => requestSort('currentYearSellOut')} onClick={() => requestSort('currentYearSellOut')}
> >
<div className="flex items-center justify-end">Sell Out {periods.current} {getSortIndicator('currentYearSellOut')}</div> <div className="flex items-center justify-end">Sell Out {periods.current} {getSortIndicator('currentYearSellOut')}</div>
</th> </th>
<th <th
className="px-4 py-3 text-right bg-slate-950 cursor-pointer hover:text-slate-300 group select-none transition-colors" className="px-4 py-3 text-right bg-slate-950 cursor-pointer hover:text-slate-300 group select-none transition-colors"
onClick={() => requestSort('sellOutGrowthValue')} onClick={() => requestSort('sellOutGrowthValue')}
> >
<div className="flex items-center justify-end">SO Diff {getSortIndicator('sellOutGrowthValue')}</div> <div className="flex items-center justify-end">SO Diff {getSortIndicator('sellOutGrowthValue')}</div>
</th> </th>
<th <th
className="px-4 py-3 text-right bg-slate-950 cursor-pointer hover:text-slate-300 group select-none transition-colors" className="px-4 py-3 text-right bg-slate-950 cursor-pointer hover:text-slate-300 group select-none transition-colors"
onClick={() => requestSort('sellOutGrowthPercentage')} onClick={() => requestSort('sellOutGrowthPercentage')}
> >
<div className="flex items-center justify-end">SO Growth % {getSortIndicator('sellOutGrowthPercentage')}</div> <div className="flex items-center justify-end">SO Growth % {getSortIndicator('sellOutGrowthPercentage')}</div>
</th> </th>
{/* Units Columns */} {/* Units Columns */}
<th <th
className="px-4 py-3 text-right bg-slate-950 text-slate-400 cursor-pointer hover:text-slate-300 group select-none transition-colors" className="px-4 py-3 text-right bg-slate-950 text-slate-400 cursor-pointer hover:text-slate-300 group select-none transition-colors"
onClick={() => requestSort('previousYearUnits')} onClick={() => requestSort('previousYearUnits')}
> >
<div className="flex items-center justify-end">Units {periods.previous} {getSortIndicator('previousYearUnits')}</div> <div className="flex items-center justify-end">Units {periods.previous} {getSortIndicator('previousYearUnits')}</div>
</th> </th>
<th <th
className="px-4 py-3 text-right bg-slate-950 text-slate-200 cursor-pointer hover:text-white group select-none transition-colors" className="px-4 py-3 text-right bg-slate-950 text-slate-200 cursor-pointer hover:text-white group select-none transition-colors"
onClick={() => requestSort('currentYearUnits')} onClick={() => requestSort('currentYearUnits')}
> >
<div className="flex items-center justify-end">Units {periods.current} {getSortIndicator('currentYearUnits')}</div> <div className="flex items-center justify-end">Units {periods.current} {getSortIndicator('currentYearUnits')}</div>
</th> </th>
<th <th
className="px-4 py-3 text-right bg-slate-950 cursor-pointer hover:text-slate-300 group select-none transition-colors" className="px-4 py-3 text-right bg-slate-950 cursor-pointer hover:text-slate-300 group select-none transition-colors"
onClick={() => requestSort('unitsGrowthValue')} onClick={() => requestSort('unitsGrowthValue')}
> >
<div className="flex items-center justify-end">Units Diff {getSortIndicator('unitsGrowthValue')}</div> <div className="flex items-center justify-end">Units Diff {getSortIndicator('unitsGrowthValue')}</div>
</th> </th>
<th <th
className="px-4 py-3 text-right bg-slate-950 cursor-pointer hover:text-slate-300 group select-none transition-colors" className="px-4 py-3 text-right bg-slate-950 cursor-pointer hover:text-slate-300 group select-none transition-colors"
onClick={() => requestSort('unitsGrowthPercentage')} onClick={() => requestSort('unitsGrowthPercentage')}
> >
<div className="flex items-center justify-end">Units Growth % {getSortIndicator('unitsGrowthPercentage')}</div> <div className="flex items-center justify-end">Units Growth % {getSortIndicator('unitsGrowthPercentage')}</div>
</th> </th>
</tr> </tr>
</thead> </thead>
<tbody className="divide-y divide-border text-slate-300"> <tbody className="divide-y divide-border text-slate-300">
{sortedData.length > 0 ? ( {sortedData.length > 0 ? (
sortedData.map((item, idx) => ( sortedData.map((item, idx) => (
<tr key={idx} className="hover:bg-slate-800/50"> <tr key={idx} className="hover:bg-slate-800/50">
<td className="px-4 py-2 font-medium">{item.line}</td> <td className="px-4 py-2 font-medium">{item.line}</td>
{/* Sell Out Columns */} {/* Sell Out Columns */}
<td className="px-4 py-2 text-right text-slate-400">€{item.previousYearSellOut.toLocaleString(undefined, {maximumFractionDigits: 0})}</td> <td className="px-4 py-2 text-right text-slate-400">€{item.previousYearSellOut.toLocaleString(undefined, {maximumFractionDigits: 0})}</td>
<td className="px-4 py-2 text-right font-medium text-slate-200">€{item.currentYearSellOut.toLocaleString(undefined, {maximumFractionDigits: 0})}</td> <td className="px-4 py-2 text-right font-medium text-slate-200">€{item.currentYearSellOut.toLocaleString(undefined, {maximumFractionDigits: 0})}</td>
<td className={`px-4 py-2 text-right font-medium ${item.sellOutGrowthValue >= 0 ? 'text-emerald-400' : 'text-red-400'}`}> <td className={`px-4 py-2 text-right font-medium ${item.sellOutGrowthValue >= 0 ? 'text-emerald-400' : 'text-red-400'}`}>
{item.sellOutGrowthValue > 0 ? '+' : ''}€{item.sellOutGrowthValue.toLocaleString(undefined, {maximumFractionDigits: 0})} {item.sellOutGrowthValue > 0 ? '+' : ''}€{item.sellOutGrowthValue.toLocaleString(undefined, {maximumFractionDigits: 0})}
{/* {item.sellOutGrowthValue.toFixed(0)} */} </td>
</td> <td className="px-4 py-2 text-right">
<td className="px-4 py-2 text-right"> <span className={`inline-flex items-center px-2 py-0.5 rounded text-xs font-medium ${item.sellOutGrowthPercentage >= 0 ? 'bg-emerald-500/10 text-emerald-400' : 'bg-red-500/10 text-red-400'}`}>
<span className={`inline-flex items-center px-2 py-0.5 rounded text-xs font-medium ${item.sellOutGrowthPercentage >= 0 ? 'bg-emerald-500/10 text-emerald-400' : 'bg-red-500/10 text-red-400'}`}> {item.sellOutGrowthPercentage.toFixed(1)}%
{item.sellOutGrowthPercentage.toFixed(1)}% </span>
</span> </td>
</td>
{/* Units Columns */} {/* Units Columns */}
<td className="px-4 py-2 text-right text-slate-400">{item.previousYearUnits.toLocaleString()}</td> <td className="px-4 py-2 text-right text-slate-400">{item.previousYearUnits.toLocaleString()}</td>
<td className="px-4 py-2 text-right font-medium text-slate-200">{item.currentYearUnits.toLocaleString()}</td> <td className="px-4 py-2 text-right font-medium text-slate-200">{item.currentYearUnits.toLocaleString()}</td>
<td className={`px-4 py-2 text-right font-medium ${item.unitsGrowthValue >= 0 ? 'text-violet-400' : 'text-orange-400'}`}> <td className={`px-4 py-2 text-right font-medium ${item.unitsGrowthValue >= 0 ? 'text-violet-400' : 'text-orange-400'}`}>
{item.unitsGrowthValue > 0 ? '+' : ''}{item.unitsGrowthValue.toLocaleString()} {item.unitsGrowthValue > 0 ? '+' : ''}{item.unitsGrowthValue.toLocaleString()}
</td> </td>
<td className="px-4 py-2 text-right"> <td className="px-4 py-2 text-right">
<span className={`inline-flex items-center px-2 py-0.5 rounded text-xs font-medium ${item.unitsGrowthPercentage >= 0 ? 'bg-violet-500/10 text-violet-400' : 'bg-orange-500/10 text-orange-400'}`}> <span className={`inline-flex items-center px-2 py-0.5 rounded text-xs font-medium ${item.unitsGrowthPercentage >= 0 ? 'bg-violet-500/10 text-violet-400' : 'bg-orange-500/10 text-orange-400'}`}>
{item.unitsGrowthPercentage.toFixed(1)}% {item.unitsGrowthPercentage.toFixed(1)}%
</span> </span>
</td>
</tr>
))
) : (
<tr>
<td colSpan={9} className="px-4 py-6 text-center text-slate-500 italic">
Insufficient data to calculate {type}. (Select at least 2 distinct years/periods)
</td> </td>
</tr> </tr>
)) )}
) : ( </tbody>
<tr> </table>
<td colSpan={9} className="px-4 py-6 text-center text-slate-500 italic"> </div>
Insufficient data to calculate {type}. (Select at least 2 distinct years/periods) </ExpandableCard>
</td>
</tr>
)}
</tbody>
</table>
</div>
); );
} }
@@ -572,30 +545,24 @@ const Dashboard: React.FC<DashboardProps> = ({ data, contextData }) => {
</ExpandableCard> </ExpandableCard>
{/* Growth Table */} {/* Growth Table */}
<ExpandableCard <div className="h-72">
title={contextData ? "Fastest Growing Lines (Full Line Context)" : "Fastest Growing Lines (YoY - €)"}
className="h-[400px]" // Provide a default height for the card
>
<GrowthTable <GrowthTable
title={contextData ? "Fastest Growing Lines (Full Line Context)" : "Fastest Growing Lines (YoY - €)"} title={contextData ? "Fastest Growing Lines (Full Line Context)" : "Fastest Growing Lines (YoY - €)"}
data={displayData.topMovers} data={displayData.topMovers}
type="growth" type="growth"
periods={displayData.comparisonPeriods} periods={displayData.comparisonPeriods}
/> />
</ExpandableCard> </div>
{/* Decline Table */} {/* Decline Table */}
<ExpandableCard <div className="h-72">
title={contextData ? "Declining Lines (Full Line Context)" : "Declining Lines (YoY - €)"}
className="h-[400px]" // Provide a default height for the card
>
<GrowthTable <GrowthTable
title={contextData ? "Declining Lines (Full Line Context)" : "Declining Lines (YoY - €)"} title={contextData ? "Declining Lines (Full Line Context)" : "Declining Lines (YoY - €)"}
data={displayData.bottomMovers} data={displayData.bottomMovers}
type="decline" type="decline"
periods={displayData.comparisonPeriods} periods={displayData.comparisonPeriods}
/> />
</ExpandableCard> </div>
</div> </div>
{/* Right Column */} {/* Right Column */}
components/DataGrid.tsx
+336 -572
View File
File diff suppressed because it is too large Load Diff
components/FileUpload.tsx
+4 -3
View File
@@ -1,3 +1,4 @@
import React, { ChangeEvent, useState } from 'react'; import React, { ChangeEvent, useState } from 'react';
import { UploadIcon } from './Icons'; import { UploadIcon } from './Icons';
@@ -85,13 +86,13 @@ const FileUpload: React.FC<FileUploadProps> = ({
<UploadIcon /> <UploadIcon />
</div> </div>
<div className="text-center"> <div className="text-center">
<h3 className="font-semibold text-slate-200">Upload Data File</h3> <h3 className="font-semibold text-slate-200">Upload Local CSV</h3>
<p className="text-xs text-slate-500 mt-1">Supports .csv, .xlsx, .xls</p> <p className="text-xs text-slate-500 mt-1">Click to select file</p>
</div> </div>
<input <input
id="file-upload" id="file-upload"
type="file" type="file"
accept=".csv, .xlsx, .xls" accept=".csv"
onChange={handleChange} onChange={handleChange}
disabled={isLoading} disabled={isLoading}
className="hidden" className="hidden"
components/Icons.tsx
+2 -2
View File
@@ -56,8 +56,8 @@ export const FunnelIcon = () => (
</svg> </svg>
); );
export const MoversIcon = () => ( export const TrendingIcon = () => (
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-5 h-5"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-5 h-5">
<path strokeLinecap="round" strokeLinejoin="round" d="M2.25 18 9 11.25l4.306 4.305a11.164 11.164 0 0 0 5.814-5.815L21.75 6m0 0-3.5-3.5m3.5 3.5-3.5 3.5" /> <path strokeLinecap="round" strokeLinejoin="round" d="M2.25 18 9 11.25l4.306 4.307a11.95 11.95 0 0 1 5.814-5.519l2.74-1.22m0 0-5.94-2.28m5.94 2.28-2.28 5.941" />
</svg> </svg>
); );
components/ItemGrowthTable.tsx
-198
View File
@@ -1,198 +0,0 @@
import React, { useState, useMemo } from 'react';
import { ItemGrowthMetric } from '../types';
interface ItemGrowthTableProps {
title: string;
data: ItemGrowthMetric[];
type: 'growth' | 'decline';
periods: { current: string; previous: string };
}
type SortConfig = { key: keyof ItemGrowthMetric | null; direction: 'asc' | 'desc' };
const ItemGrowthTable: React.FC<ItemGrowthTableProps> = ({ title, data, type, periods }) => {
const [sortConfig, setSortConfig] = useState<SortConfig>({ key: null, direction: 'desc' });
const sortedData = useMemo(() => {
if (!sortConfig.key) {
// Default sort by units growth value for initial view
return [...data].sort((a, b) =>
type === 'growth' ? b.unitsGrowthValue - a.unitsGrowthValue : a.unitsGrowthValue - b.unitsGrowthValue
);
}
return [...data].sort((a, b) => {
const aVal = a[sortConfig.key!] as number | string;
const bVal = b[sortConfig.key!] as number | string;
if (typeof aVal === 'string' && typeof bVal === 'string') {
return sortConfig.direction === 'asc'
? (aVal as string).localeCompare(bVal as string)
: (bVal as string).localeCompare(aVal as string);
}
if (aVal < bVal) return sortConfig.direction === 'asc' ? -1 : 1;
if (aVal > bVal) return sortConfig.direction === 'asc' ? 1 : -1;
return 0;
});
}, [data, sortConfig, type]);
const requestSort = (key: keyof ItemGrowthMetric) => {
let direction: 'asc' | 'desc' = 'desc';
// If already sorting by this key, toggle direction
if (sortConfig.key === key && sortConfig.direction === 'desc') {
direction = 'asc';
}
setSortConfig({ key, direction });
};
const getSortIndicator = (key: keyof ItemGrowthMetric) => {
if (sortConfig.key !== key) {
return (
<svg className="w-2.5 h-2.5 ml-1 text-slate-600 opacity-0 group-hover:opacity-50" fill="currentColor" viewBox="0 0 20 20">
<path fillRule="evenodd" d="M10 3a1 1 0 01.707.293l3 3a1 1 0 01-1.414 1.414L10 5.414 7.707 7.707a1 1 0 01-1.414-1.414l3-3A1 1 0 0110 3zm-3.707 9.293a1 1 0 011.414 0L10 14.586l2.293-2.293a1 1 0 011.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clipRule="evenodd" />
</svg>
);
}
return (
<svg className="w-2.5 h-2.5 ml-1 text-primary" fill="currentColor" viewBox="0 0 20 20">
{sortConfig.direction === 'asc'
? <path fillRule="evenodd" d="M14.707 12.707a1 1 0 01-1.414 0L10 9.414l-3.293 3.293a1 1 0 01-1.414-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 010 1.414z" clipRule="evenodd" />
: <path fillRule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clipRule="evenodd" />
}
</svg>
);
};
return (
<div className="overflow-auto h-full relative">
<table className="w-full text-left text-sm h-full border-separate border-spacing-0">
<thead className="bg-slate-950 text-xs uppercase font-semibold text-slate-500 sticky top-0 z-10 shadow-sm">
<tr>
<th
className="px-4 py-3 bg-slate-950 min-w-[100px] cursor-pointer hover:text-slate-300 group select-none transition-colors"
onClick={() => requestSort('sku')}
>
<div className="flex items-center">SKU {getSortIndicator('sku')}</div>
</th>
<th
className="px-4 py-3 bg-slate-950 min-w-[100px] cursor-pointer hover:text-slate-300 group select-none transition-colors"
onClick={() => requestSort('asin')}
>
<div className="flex items-center">ASIN {getSortIndicator('asin')}</div>
</th>
<th
className="px-4 py-3 bg-slate-950 min-w-[200px] cursor-pointer hover:text-slate-300 group select-none transition-colors"
onClick={() => requestSort('title')}
>
<div className="flex items-center">Product Title {getSortIndicator('title')}</div>
</th>
<th
className="px-4 py-3 bg-slate-950 min-w-[120px] cursor-pointer hover:text-slate-300 group select-none transition-colors"
onClick={() => requestSort('line')}
>
<div className="flex items-center">Product Line {getSortIndicator('line')}</div>
</th>
{/* Sell Out Columns */}
<th
className="px-4 py-3 text-right bg-slate-950 text-slate-400 cursor-pointer hover:text-slate-300 group select-none transition-colors"
onClick={() => requestSort('previousYearSellOut')}
>
<div className="flex items-center justify-end">Sell Out {periods.previous} {getSortIndicator('previousYearSellOut')}</div>
</th>
<th
className="px-4 py-3 text-right bg-slate-950 text-slate-200 cursor-pointer hover:text-white group select-none transition-colors"
onClick={() => requestSort('currentYearSellOut')}
>
<div className="flex items-center justify-end">Sell Out {periods.current} {getSortIndicator('currentYearSellOut')}</div>
</th>
<th
className="px-4 py-3 text-right bg-slate-950 cursor-pointer hover:text-slate-300 group select-none transition-colors"
onClick={() => requestSort('sellOutGrowthValue')}
>
<div className="flex items-center justify-end">SO Diff {getSortIndicator('sellOutGrowthValue')}</div>
</th>
<th
className="px-4 py-3 text-right bg-slate-950 cursor-pointer hover:text-slate-300 group select-none transition-colors"
onClick={() => requestSort('sellOutGrowthPercentage')}
>
<div className="flex items-center justify-end">SO Growth % {getSortIndicator('sellOutGrowthPercentage')}</div>
</th>
{/* Units Columns */}
<th
className="px-4 py-3 text-right bg-slate-950 text-slate-400 cursor-pointer hover:text-slate-300 group select-none transition-colors"
onClick={() => requestSort('previousYearUnits')}
>
<div className="flex items-center justify-end">Units {periods.previous} {getSortIndicator('previousYearUnits')}</div>
</th>
<th
className="px-4 py-3 text-right bg-slate-950 text-slate-200 cursor-pointer hover:text-white group select-none transition-colors"
onClick={() => requestSort('currentYearUnits')}
>
<div className="flex items-center justify-end">Units {periods.current} {getSortIndicator('currentYearUnits')}</div>
</th>
<th
className="px-4 py-3 text-right bg-slate-950 cursor-pointer hover:text-slate-300 group select-none transition-colors"
onClick={() => requestSort('unitsGrowthValue')}
>
<div className="flex items-center justify-end">Units Diff {getSortIndicator('unitsGrowthValue')}</div>
</th>
<th
className="px-4 py-3 text-right bg-slate-950 cursor-pointer hover:text-slate-300 group select-none transition-colors"
onClick={() => requestSort('unitsGrowthPercentage')}
>
<div className="flex items-center justify-end">Units Growth % {getSortIndicator('unitsGrowthPercentage')}</div>
</th>
</tr>
</thead>
<tbody className="divide-y divide-border text-slate-300">
{sortedData.length > 0 ? (
sortedData.map((item, idx) => (
<tr key={idx} className="hover:bg-slate-800/50">
<td className="px-4 py-2 font-medium">{item.sku || '-'}</td>
<td className="px-4 py-2">{item.asin || '-'}</td>
<td className="px-4 py-2">{item.title || '-'}</td>
<td className="px-4 py-2">{item.line || '-'}</td>
{/* Sell Out Columns */}
<td className="px-4 py-2 text-right text-slate-400">€{item.previousYearSellOut.toLocaleString(undefined, {maximumFractionDigits: 0})}</td>
<td className="px-4 py-2 text-right font-medium text-slate-200">€{item.currentYearSellOut.toLocaleString(undefined, {maximumFractionDigits: 0})}</td>
<td className={`px-4 py-2 text-right font-medium ${item.sellOutGrowthValue >= 0 ? 'text-emerald-400' : 'text-red-400'}`}>
{item.sellOutGrowthValue > 0 ? '+' : ''}€{item.sellOutGrowthValue.toLocaleString(undefined, {maximumFractionDigits: 0})}
</td>
<td className="px-4 py-2 text-right">
<span className={`inline-flex items-center px-2 py-0.5 rounded text-xs font-medium ${item.sellOutGrowthPercentage >= 0 ? 'bg-emerald-500/10 text-emerald-400' : 'bg-red-500/10 text-red-400'}`}>
{item.sellOutGrowthPercentage.toFixed(1)}%
</span>
</td>
{/* Units Columns */}
<td className="px-4 py-2 text-right text-slate-400">{item.previousYearUnits.toLocaleString()}</td>
<td className="px-4 py-2 text-right font-medium text-slate-200">{item.currentYearUnits.toLocaleString()}</td>
<td className={`px-4 py-2 text-right font-medium ${item.unitsGrowthValue >= 0 ? 'text-violet-400' : 'text-orange-400'}`}>
{item.unitsGrowthValue > 0 ? '+' : ''}{item.unitsGrowthValue.toLocaleString()}
</td>
<td className="px-4 py-2 text-right">
<span className={`inline-flex items-center px-2 py-0.5 rounded text-xs font-medium ${item.unitsGrowthPercentage >= 0 ? 'bg-violet-500/10 text-violet-400' : 'bg-orange-500/10 text-orange-400'}`}>
{item.unitsGrowthPercentage.toFixed(1)}%
</span>
</td>
</tr>
))
) : (
<tr>
<td colSpan={13} className="px-4 py-6 text-center text-slate-500 italic">
Insufficient data to calculate {type}. (Select a customer and at least 2 distinct years/periods)
</td>
</tr>
)}
</tbody>
</table>
</div>
);
}
export default ItemGrowthTable;
components/TopMovers.tsx
+326
View File
@@ -0,0 +1,326 @@
import React, { useState, useMemo } from 'react';
import { SalesRecord } from '../types';
import { DownloadIcon } from './Icons';
interface TopMoversProps {
data: SalesRecord[];
}
type Metric = 'sellOut' | 'units';
interface SkuAggr {
sku: string;
title: string;
line: string;
previousValue: number;
currentValue: number;
diff: number;
pct: number;
}
// Reusable Table Component
const MoversTable: React.FC<{
title: string;
data: SkuAggr[];
metric: Metric;
previousYear: number;
currentYear: number;
type: 'growth' | 'decline';
}> = ({ title, data, metric, previousYear, currentYear, type }) => {
const formatValue = (val: number) => {
if (metric === 'sellOut') return `€${val.toLocaleString(undefined, { maximumFractionDigits: 0 })}`;
return val.toLocaleString();
};
const handleExport = () => {
if (!data || data.length === 0) return;
// Helper to force Comma as thousands separator (US Locale)
const formatForCSV = (val: number) => {
return val.toLocaleString('en-US', {
useGrouping: true,
minimumFractionDigits: metric === 'sellOut' ? 2 : 0,
maximumFractionDigits: metric === 'sellOut' ? 2 : 0,
});
};
// Prepare data for CSV
const csvData = data.map((item, index) => ({
Rank: index + 1,
Title: item.title,
SKU: item.sku,
'Product Line': item.line,
[`${previousYear} ${metric === 'sellOut' ? 'Sell Out' : 'Units'}`]: formatForCSV(item.previousValue),
[`${currentYear} ${metric === 'sellOut' ? 'Sell Out' : 'Units'}`]: formatForCSV(item.currentValue),
'Difference': formatForCSV(item.diff),
'% Change': `${item.pct.toFixed(2)}%`
}));
// Generate CSV string
// @ts-ignore - Papa is loaded globally via CDN
const csv = Papa.unparse(csvData);
// Create download link
const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
const filename = `${title.replace(/\s+/g, '_')}_${currentYear}_vs_${previousYear}.csv`;
link.setAttribute('download', filename);
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
};
const colorClass = type === 'growth' ? 'text-emerald-400' : 'text-rose-400';
const bgClass = type === 'growth' ? 'bg-emerald-500/10 text-emerald-400' : 'bg-rose-500/10 text-rose-400';
const headerColor = type === 'growth' ? 'border-emerald-500/30' : 'border-rose-500/30';
return (
<div className="bg-surface border border-border rounded-xl shadow-lg overflow-hidden flex flex-col h-full">
<div className={`px-6 py-4 border-b ${headerColor} bg-slate-900/50 flex justify-between items-center`}>
<h3 className={`text-lg font-bold flex items-center gap-2 ${colorClass}`}>
{type === 'growth' ? '🚀 ' : '📉 '} {title}
</h3>
<div className="flex items-center gap-4">
<button
onClick={handleExport}
className="flex items-center gap-2 px-3 py-1.5 bg-slate-800 hover:bg-slate-700 text-slate-300 rounded-lg text-xs font-medium border border-slate-700 transition-colors"
title="Export to CSV"
>
<DownloadIcon />
<span className="hidden sm:inline">Export</span>
</button>
<span className="text-xs text-slate-500 uppercase font-semibold tracking-wider">Top 20</span>
</div>
</div>
<div className="overflow-x-auto">
<table className="w-full text-left text-sm border-collapse">
<thead>
<tr className="bg-slate-950 text-slate-400 uppercase text-xs font-semibold tracking-wider">
<th className="px-6 py-3 border-b border-border w-16 text-center">Rank</th>
<th className="px-6 py-3 border-b border-border">SKU Details</th>
<th className="px-6 py-3 border-b border-border">Product Line</th>
<th className="px-6 py-3 border-b border-border text-right">{previousYear}</th>
<th className="px-6 py-3 border-b border-border text-right">{currentYear}</th>
<th className="px-6 py-3 border-b border-border text-right">Diff</th>
<th className="px-6 py-3 border-b border-border text-right">% Change</th>
</tr>
</thead>
<tbody className="divide-y divide-border">
{data.map((item, index) => {
const isPositive = item.diff >= 0;
return (
<tr key={item.sku} className="hover:bg-slate-800/50 transition-colors group">
<td className="px-6 py-3 text-center font-mono text-slate-500 font-bold">
{index + 1}
</td>
<td className="px-6 py-3">
<div className="flex flex-col">
<span className="text-white font-medium text-base truncate max-w-xs" title={item.title}>
{item.title || 'Unknown Title'}
</span>
<span className="text-xs text-slate-500 font-mono mt-0.5">SKU: {item.sku}</span>
</div>
</td>
<td className="px-6 py-3 text-slate-400">
<span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-slate-800 text-slate-300 border border-slate-700">
{item.line}
</span>
</td>
<td className="px-6 py-3 text-right text-slate-500">
{formatValue(item.previousValue)}
</td>
<td className="px-6 py-3 text-right font-bold text-slate-200 group-hover:text-white">
{formatValue(item.currentValue)}
</td>
<td className={`px-6 py-3 text-right font-medium ${isPositive ? 'text-emerald-400' : 'text-rose-400'}`}>
{isPositive ? '+' : ''}{formatValue(item.diff)}
</td>
<td className="px-6 py-3 text-right">
<span className={`inline-flex items-center gap-1 px-2 py-1 rounded text-xs font-bold w-20 justify-center ${bgClass}`}>
{isPositive ? '↑' : '↓'} {Math.abs(item.pct).toFixed(1)}%
</span>
</td>
</tr>
);
})}
{data.length === 0 && (
<tr>
<td colSpan={7} className="px-6 py-12 text-center text-slate-500 italic">
No records found matching this criteria.
</td>
</tr>
)}
</tbody>
</table>
</div>
</div>
);
};
const TopMovers: React.FC<TopMoversProps> = ({ data }) => {
const [metric, setMetric] = useState<Metric>('sellOut');
const [viewMode, setViewMode] = useState<'growth' | 'decline'>('growth');
// 1. Determine comparison years from filtered data
const { currentYear, previousYear, availableYears } = useMemo(() => {
const years = Array.from(new Set(data.map(d => d.year))).sort((a: number, b: number) => b - a);
return {
currentYear: years[0],
previousYear: years[1],
availableYears: years
};
}, [data]);
// 2. Aggregation Logic
const { growers, decliners } = useMemo(() => {
if (!currentYear || !previousYear) return { growers: [], decliners: [] };
// Map: SKU -> { currentVal, previousVal, metadata }
const map = new Map<string, { current: number; previous: number; title: string; line: string }>();
data.forEach(row => {
// Only care about the two comparison years
if (row.year !== currentYear && row.year !== previousYear) return;
if (!map.has(row.sku)) {
map.set(row.sku, { current: 0, previous: 0, title: row.title, line: row.line });
}
const entry = map.get(row.sku)!;
const value = metric === 'sellOut' ? row.sellOut : row.units;
if (row.year === currentYear) {
entry.current += value;
} else {
entry.previous += value;
}
});
// Convert to Array and Calculate Deltas
const list: SkuAggr[] = [];
map.forEach((val, sku) => {
// Filter out items that have 0 in BOTH years (irrelevant)
if (val.current === 0 && val.previous === 0) return;
const diff = val.current - val.previous;
let pct = 0;
if (val.previous !== 0) {
pct = (diff / val.previous) * 100;
} else if (val.current !== 0) {
// Infinite growth (0 -> 100)
pct = 100;
}
list.push({
sku,
title: val.title,
line: val.line,
previousValue: val.previous,
currentValue: val.current,
diff,
pct
});
});
// Separate and Sort
const growers = list
.filter(i => i.diff > 0)
.sort((a, b) => b.diff - a.diff) // Descending by Growth
.slice(0, 20);
const decliners = list
.filter(i => i.diff < 0)
.sort((a, b) => a.diff - b.diff) // Ascending by Decline (Most negative first)
.slice(0, 20);
return { growers, decliners };
}, [data, metric, currentYear, previousYear]);
if (availableYears.length < 2) {
return (
<div className="flex flex-col items-center justify-center h-96 bg-slate-900 rounded-xl border border-border p-8">
<h3 className="text-xl font-bold text-slate-300 mb-2">Insufficient Data for Comparison</h3>
<p className="text-slate-500 text-center max-w-md">
To see Top Movers, please ensure your filters include at least <b>two different years</b> (e.g., 2024 and 2025).
</p>
<p className="mt-4 text-xs text-slate-600">Current Years Available: {availableYears.join(', ') || 'None'}</p>
</div>
);
}
return (
<div className="space-y-6 max-w-7xl mx-auto pb-24 animate-fade-in">
{/* Controls Header */}
<div className="bg-surface border border-border rounded-xl p-6 shadow-sm flex flex-col md:flex-row justify-between items-center gap-4">
<div>
<h2 className="text-2xl font-bold text-blue-400 flex items-center gap-2">
Analytics Overview
</h2>
<p className="text-sm text-slate-400 mt-1">
Comparing Performance: <span className="font-mono text-indigo-300 font-bold">{previousYear}</span> vs <span className="font-mono text-indigo-300 font-bold">{currentYear}</span>
</p>
</div>
<div className="flex flex-col sm:flex-row gap-4 items-center">
{/* Gainers / Losers Toggle */}
<div className="bg-slate-900 p-1 rounded-lg border border-slate-800 flex text-sm">
<button
onClick={() => setViewMode('growth')}
className={`px-4 py-2 rounded-md transition-colors font-medium flex items-center gap-2 ${viewMode === 'growth' ? 'bg-emerald-600/20 text-emerald-400 border border-emerald-500/50 shadow-sm' : 'text-slate-400 hover:text-white'}`}
>
<span>🚀 Top Gainers</span>
</button>
<button
onClick={() => setViewMode('decline')}
className={`px-4 py-2 rounded-md transition-colors font-medium flex items-center gap-2 ${viewMode === 'decline' ? 'bg-rose-600/20 text-rose-400 border border-rose-500/50 shadow-sm' : 'text-slate-400 hover:text-white'}`}
>
<span>📉 Top Losers</span>
</button>
</div>
{/* Metric Toggle */}
<div className="bg-slate-900 p-1 rounded-lg border border-slate-800 flex text-sm">
<button
onClick={() => setMetric('sellOut')}
className={`px-4 py-2 rounded-md transition-colors font-medium ${metric === 'sellOut' ? 'bg-indigo-600 text-white shadow-sm' : 'text-slate-400 hover:text-white'}`}
>
Sell Out (€)
</button>
<button
onClick={() => setMetric('units')}
className={`px-4 py-2 rounded-md transition-colors font-medium ${metric === 'units' ? 'bg-indigo-600 text-white shadow-sm' : 'text-slate-400 hover:text-white'}`}
>
Units
</button>
</div>
</div>
</div>
{/* Single Active Table */}
<MoversTable
title={viewMode === 'growth' ? "Fastest Growing SKUs" : "Biggest Declining SKUs"}
data={viewMode === 'growth' ? growers : decliners}
metric={metric}
previousYear={previousYear}
currentYear={currentYear}
type={viewMode}
/>
</div>
);
};
export default TopMovers;
components/TopMoversPage.tsx
-92
View File
@@ -1,92 +0,0 @@
import React, { useState, useMemo } from 'react';
import { SalesRecord } from '../types';
import { calculateItemMovers, getUniqueValues, generateItemMoversCSV } from '../services/dataProcessor'; // Import generateItemMoversCSV
import ItemGrowthTable from './ItemGrowthTable';
import { ExpandableCard } from './Dashboard'; // Re-use ExpandableCard from Dashboard
interface TopMoversPageProps {
filteredData: SalesRecord[]; // Data already filtered by global customer, year, month, etc.
}
const TopMoversPage: React.FC<TopMoversPageProps> = ({ filteredData }) => {
// Local state for the specific comparison year, initially null for auto-selection
const [selectedComparisonYear, setSelectedComparisonYear] = useState<string | null>(null);
// Derive available years from the *currently filtered data* for the comparison year dropdown
const availableYearsForComparisonDropdown = useMemo(() => {
const yearsInFilteredData = getUniqueValues(filteredData, 'year');
// Sort descending for the dropdown
return yearsInFilteredData.sort((a,b) => parseInt(b) - parseInt(a));
}, [filteredData]);
// Derive top/bottom movers based on selections
const { topMovers, bottomMovers, comparisonPeriods } = useMemo(() => {
const comparisonYearNum = selectedComparisonYear ? parseInt(selectedComparisonYear) : null;
// Pass the globally filtered data. The global filter bar now handles customer/line/sku/etc filtering.
// We pass null for the local customer override as it is no longer used.
return calculateItemMovers(filteredData, null, comparisonYearNum);
}, [filteredData, selectedComparisonYear]);
// Handlers for export
const handleExportGainers = () => {
generateItemMoversCSV(topMovers, comparisonPeriods, 'Gainers');
};
const handleExportLosers = () => {
generateItemMoversCSV(bottomMovers, comparisonPeriods, 'Losers');
};
return (
<div className="p-6 space-y-6 max-w-7xl mx-auto animate-fade-in pb-24">
<div className="flex flex-wrap justify-between items-center gap-4 mb-6">
<h2 className="text-2xl font-bold text-white">Top Item Movers</h2>
<div className="bg-slate-900 border border-border rounded-xl px-4 py-2 flex items-center gap-3">
<label className="text-xs font-semibold text-slate-400 uppercase tracking-wider whitespace-nowrap">Comparison Year</label>
<select
value={selectedComparisonYear || ''}
onChange={(e) => setSelectedComparisonYear(e.target.value || null)}
className="bg-surface border border-border hover:border-slate-600 text-sm rounded-lg py-1.5 px-3 focus:outline-none focus:ring-2 focus:ring-primary/50 transition-colors text-white"
>
<option value="">Auto (Latest 2 Years)</option>
{availableYearsForComparisonDropdown.map(year => (
<option key={year} value={year}>{year}</option>
))}
</select>
</div>
</div>
{/* Top 20 Gainers Table */}
<ExpandableCard
title={`Top 20 Gainers (${comparisonPeriods.current} vs ${comparisonPeriods.previous})`}
className="h-[500px]"
onExport={handleExportGainers} // Pass export handler
exportFileName={`Top_20_Gainers_${comparisonPeriods.current}_vs_${comparisonPeriods.previous}`}
>
<ItemGrowthTable
title={`Top 20 Gainers (${comparisonPeriods.current} vs ${comparisonPeriods.previous})`}
data={topMovers}
type="growth"
periods={comparisonPeriods}
/>
</ExpandableCard>
{/* Top 20 Losers Table */}
<ExpandableCard
title={`Top 20 Losers (${comparisonPeriods.current} vs ${comparisonPeriods.previous})`}
className="h-[500px]"
onExport={handleExportLosers} // Pass export handler
exportFileName={`Top_20_Losers_${comparisonPeriods.current}_vs_${comparisonPeriods.previous}`}
>
<ItemGrowthTable
title={`Top 20 Losers (${comparisonPeriods.current} vs ${comparisonPeriods.previous})`}
data={bottomMovers}
type="decline"
periods={comparisonPeriods}
/>
</ExpandableCard>
</div>
);
};
export default TopMoversPage;
index.html
+2 -1
View File
@@ -48,7 +48,8 @@
"react/": "https://aistudiocdn.com/react@^19.2.0/", "react/": "https://aistudiocdn.com/react@^19.2.0/",
"@google/genai": "https://aistudiocdn.com/@google/genai@^1.30.0", "@google/genai": "https://aistudiocdn.com/@google/genai@^1.30.0",
"recharts": "https://aistudiocdn.com/recharts@^3.5.0", "recharts": "https://aistudiocdn.com/recharts@^3.5.0",
"xlsx": "https://esm.sh/xlsx@0.18.5" "xlsx": "https://esm.sh/xlsx@^0.18.5",
"papaparse": "https://esm.sh/papaparse@^5.5.3"
} }
} }
</script> </script>
package.json
+2 -1
View File
@@ -13,7 +13,8 @@
"react-dom": "^19.2.0", "react-dom": "^19.2.0",
"@google/genai": "^1.30.0", "@google/genai": "^1.30.0",
"recharts": "^3.5.0", "recharts": "^3.5.0",
"xlsx": "0.18.5" "xlsx": "^0.18.5",
"papaparse": "^5.5.3"
}, },
"devDependencies": { "devDependencies": {
"@types/node": "^22.14.0", "@types/node": "^22.14.0",
services/dataProcessor.ts
+324 -54
View File
@@ -1,12 +1,13 @@
import { SalesRecord, FilterState, AggregatedData, LineGrowthMetric, ItemGrowthMetric, SeasonalityPoint, YearlySplitData, PivotRow, YearlyData, TimeSeriesData, ComparisonTimeSeriesPoint } from '../types'; import { SalesRecord, AdsRecord, CombinedKPIs, FilterState, AggregatedData, LineGrowthMetric, ItemGrowthMetric, SeasonalityPoint, YearlySplitData, PivotRow, YearlyData, TimeSeriesData, ComparisonTimeSeriesPoint } from '../types';
import * as XLSX from 'xlsx'; import * as XLSX from 'xlsx';
import Papa from 'papaparse';
// Helper to parse currency values handling both EU (1.234,56) and US/Standard (1,234.56 or 1234.56) formats // Helper to parse currency values handling both EU (1.234,56) and US/Standard (1,234.56 or 1234.56) formats
const parseCurrency = (value: string): number => { const parseCurrency = (value: string): number => {
if (!value) return 0; if (!value) return 0;
// Remove currency symbol and whitespace // Remove currency symbol and whitespace
let clean = value.replace(/[€\s]/g, '').trim(); let clean = value.replace(/[€$£\s]/g, '').trim();
// HEURISTIC: // HEURISTIC:
// If it contains a comma, we assume it's likely European format (Decimal separator) // If it contains a comma, we assume it's likely European format (Decimal separator)
@@ -14,17 +15,27 @@ const parseCurrency = (value: string): number => {
// But given the context (DE data), comma is usually decimal. // But given the context (DE data), comma is usually decimal.
// Case A: European Format (e.g., "277.179,09" or "50,00") // Case A: European Format (e.g., "277.179,09" or "50,00")
if (clean.includes(',')) { if (clean.includes(',') && !clean.includes('.') && clean.indexOf(',') > clean.length - 4) {
// If it has dots (thousands), remove them clean = clean.replace(',', '.');
clean = clean.replace(/\./g, ''); return parseFloat(clean);
// Replace decimal comma with dot }
else if (clean.includes(',') && clean.includes('.')) {
// Mixed: 1.234,56
if (clean.indexOf(',') > clean.indexOf('.')) {
clean = clean.replace(/\./g, '').replace(',', '.');
} else {
// 1,234.56
clean = clean.replace(/,/g, '');
}
return parseFloat(clean);
}
else if (clean.includes(',')) {
// Likely EU decimal
clean = clean.replace(',', '.'); clean = clean.replace(',', '.');
return parseFloat(clean); return parseFloat(clean);
} }
// Case B: Standard/US Format or Clean Number (e.g. "277179.09" or "1000") // Case B: Standard/US Format or Clean Number (e.g. "277179.09" or "1000")
// Just remove any potential thousands separator commas (if any exist and we didn't catch them above)
// and parse.
clean = clean.replace(/,/g, ''); clean = clean.replace(/,/g, '');
const num = parseFloat(clean); const num = parseFloat(clean);
@@ -41,12 +52,38 @@ const parseUnits = (value: string): number => {
const MONTH_ORDER = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; const MONTH_ORDER = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
// Mapping for Spanish Month Names
const SPANISH_MONTHS: Record<string, string> = {
'ene': 'Jan', 'enero': 'Jan',
'feb': 'Feb', 'febrero': 'Feb',
'mar': 'Mar', 'marzo': 'Mar',
'abr': 'Apr', 'abril': 'Apr',
'may': 'May', 'mayo': 'May',
'jun': 'Jun', 'junio': 'Jun',
'jul': 'Jul', 'julio': 'Jul',
'ago': 'Aug', 'agosto': 'Aug',
'sep': 'Sep', 'septiembre': 'Sep', 'set': 'Sep', 'setiembre': 'Sep',
'oct': 'Oct', 'octubre': 'Oct',
'nov': 'Nov', 'noviembre': 'Nov',
'dic': 'Dec', 'diciembre': 'Dec'
};
// Robust Month Normalizer // Robust Month Normalizer
const normalizeMonth = (rawMonth: string): string => { const normalizeMonth = (rawMonth: string): string => {
if (!rawMonth) return ''; if (!rawMonth) return '';
let m = rawMonth.trim(); let m = rawMonth.trim();
// Handle numeric months "01", "1", "01-2023" (start with digits) // Handle numeric months "01", "1", "01-2023" (start with digits)
// If it's a full date string like "2023-04-01" or "01/04/2023"
if (m.includes('/') || m.includes('-')) {
const date = new Date(m);
if (!isNaN(date.getTime())) {
const monthIdx = date.getMonth();
const yearShort = date.getFullYear().toString().slice(2);
return `${MONTH_ORDER[monthIdx]}-${yearShort}`;
}
}
const numMatch = m.match(/^(\d{1,2})([^\d]|$)/); const numMatch = m.match(/^(\d{1,2})([^\d]|$)/);
if (numMatch) { if (numMatch) {
const num = parseInt(numMatch[1]); const num = parseInt(numMatch[1]);
@@ -55,26 +92,37 @@ const normalizeMonth = (rawMonth: string): string => {
// Handle text months "Apr-23", "Apr 23", "April" // Handle text months "Apr-23", "Apr 23", "April"
// Extract first sequence of letters // Extract first sequence of letters
const alphaMatch = m.match(/([a-zA-Z]+)/); const alphaMatch = m.match(/([a-zA-Z\u00C0-\u00FF]+)/); // Include accented chars for Spanish
if (alphaMatch) { if (alphaMatch) {
m = alphaMatch[1]; let alpha = alphaMatch[1].toLowerCase();
// Check Spanish mapping first
if (SPANISH_MONTHS[alpha]) {
m = SPANISH_MONTHS[alpha];
} else {
// Default to first 3 chars capitalize (English)
if (alpha.length > 3) alpha = alpha.substring(0, 3);
m = alpha.charAt(0).toUpperCase() + alpha.slice(1);
}
} }
// Take first 3 characters // Try to grab year from original string to append (e.g. "Apr-23")
if (m.length > 3) { const yearMatch = rawMonth.match(/(\d{2,4})/);
m = m.substring(0, 3); if (yearMatch) {
let y = yearMatch[1];
if (y.length === 4) y = y.slice(2);
// Only append if year is not part of the month name logic
if (!m.includes('-')) {
return `${m}-${y}`;
}
} }
// Capitalize first letter, lowercase rest
m = m.charAt(0).toUpperCase() + m.slice(1).toLowerCase();
return m; return m;
}; };
// Robust CSV Column Value Extractor // Robust CSV Column Value Extractor
// Handles case-insensitivity, trimming, multiple potential header aliases, AND ignores empty values to find fallbacks.
const getColumnValue = (row: any, aliases: string[]): string => { const getColumnValue = (row: any, aliases: string[]): string => {
const rowKeys = Object.keys(row); const rowKeys = Object.keys(row);
// Create a map of normalized keys in the row to the actual keys
const normalizedRowKeys: Record<string, string> = {}; const normalizedRowKeys: Record<string, string> = {};
rowKeys.forEach(k => { rowKeys.forEach(k => {
normalizedRowKeys[k.trim().toLowerCase()] = k; normalizedRowKeys[k.trim().toLowerCase()] = k;
@@ -87,8 +135,6 @@ const getColumnValue = (row: any, aliases: string[]): string => {
const val = row[actualKey]; const val = row[actualKey];
if (val !== undefined && val !== null) { if (val !== undefined && val !== null) {
const strVal = String(val).trim(); const strVal = String(val).trim();
// CRITICAL FIX: Only return if the value is NOT empty.
// This allows falling back to the next alias if the first matching column exists but is empty.
if (strVal.length > 0) { if (strVal.length > 0) {
return strVal; return strVal;
} }
@@ -98,37 +144,38 @@ const getColumnValue = (row: any, aliases: string[]): string => {
return ''; return '';
}; };
// Extracted Mapping Function // --- SALES / SELL OUT MAPPING ---
const mapRowToRecord = (row: any, index: number): SalesRecord => { const mapRowToRecord = (row: any, index: number): SalesRecord => {
const customer = getColumnValue(row, ['NEW CUSTOMER', 'Customer', 'Client', 'Account', 'Partner', 'COUNTRY', 'Country', 'Market']) || 'Unknown'; const customer = getColumnValue(row, ['NEW CUSTOMER', 'Customer', 'Client', 'Account', 'Partner', 'COUNTRY', 'Country', 'Market']) || 'Unknown';
const yearStr = getColumnValue(row, ['YEAR', 'Year', 'D']); const yearStr = getColumnValue(row, ['YEAR', 'Year', 'D']);
const year = parseInt(yearStr) || 0; // Sanitize year string before parsing (remove commas/dots e.g. "2,023")
let year = parseInt(yearStr.replace(/[,.]/g, '')) || 0;
const monthStr = getColumnValue(row, ['MONTH', 'Month', 'Period']); const monthStr = getColumnValue(row, ['MONTH', 'Month', 'Period']);
const month = normalizeMonth(monthStr); const month = normalizeMonth(monthStr);
// BACKFILL YEAR if missing but present in Month (e.g. "Apr-23")
if (year === 0 && month.includes('-')) {
const parts = month.split('-');
if (parts.length === 2) {
const yPart = parts[1];
// assume 20xx for 2 digits
if (yPart.length === 2) year = 2000 + parseInt(yPart);
else if (yPart.length === 4) year = parseInt(yPart);
}
}
const weekStr = getColumnValue(row, ['WEEK', 'Week', 'CW', 'Semana', 'KW', 'E']); const weekStr = getColumnValue(row, ['WEEK', 'Week', 'CW', 'Semana', 'KW', 'E']);
const weekNum = weekStr ? parseInt(weekStr.replace(/cw/i, '').trim(), 10) : NaN; const weekNum = weekStr ? parseInt(weekStr.replace(/cw/i, '').trim(), 10) : NaN;
const week = isNaN(weekNum) ? undefined : weekNum; const week = isNaN(weekNum) ? undefined : weekNum;
const line = getColumnValue(row, ['LINE', 'Line', 'Product Line']) || 'Other'; const line = getColumnValue(row, ['LINE', 'Line', 'Product Line']) || 'Unassigned';
// Updated ASIN priority list based on user feedback
const asin = getColumnValue(row, [ const asin = getColumnValue(row, [
'CUSTOMER REFERENCE', 'CUSTOMER REFERENCE', 'AMAZON ASIN', 'ASIN', 'Asin', 'PRODUCT ID', 'ITEM IDENTIFIER', 'ASIN NO.', 'Product ASIN', 'IDENTIFIER'
'AMAZON ASIN',
'ASIN',
'Asin',
'PRODUCT ID',
'ITEM IDENTIFIER',
'ASIN NO.',
'Product ASIN',
'IDENTIFIER'
]); ]);
const sku = getColumnValue(row, ['RAW ARTICLE NO.', 'SKU', 'Sku', 'Item No']); const sku = getColumnValue(row, ['RAW ARTICLE NO.', 'SKU', 'Sku', 'Item No']);
// Prioritize 'Title' column, fallback to 'Article Name' columns
const title = getColumnValue(row, ['ARTICLE NAME (Craze)', 'Title', 'TITLE', 'Product Title', 'Article Name', 'ArticleName']); const title = getColumnValue(row, ['ARTICLE NAME (Craze)', 'Title', 'TITLE', 'Product Title', 'Article Name', 'ArticleName']);
// Legacy/Backup field
const articleName = getColumnValue(row, ['ARTICLE NAME (Craze)', 'Article Name', 'ArticleName', 'Title']); const articleName = getColumnValue(row, ['ARTICLE NAME (Craze)', 'Article Name', 'ArticleName', 'Title']);
const unitsRaw = getColumnValue(row, ['UNITS', 'Units', 'Quantity', 'Qty']); const unitsRaw = getColumnValue(row, ['UNITS', 'Units', 'Quantity', 'Qty']);
@@ -152,24 +199,24 @@ const mapRowToRecord = (row: any, index: number): SalesRecord => {
export const processCSV = (fileOrContent: File | string): Promise<SalesRecord[]> => { export const processCSV = (fileOrContent: File | string): Promise<SalesRecord[]> => {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
// @ts-ignore - PapaParse is loaded globally via CDN // @ts-ignore
Papa.parse(fileOrContent, { Papa.parse(fileOrContent, {
header: true, header: true,
// delimiter: ";", // Allow auto-detect
skipEmptyLines: true, skipEmptyLines: true,
complete: (results: any) => { complete: (results: any) => {
try { try {
const data: SalesRecord[] = results.data.map((row: any, index: number) => { const data: SalesRecord[] = results.data.map((row: any, index: number) => {
return mapRowToRecord(row, index); return mapRowToRecord(row, index);
}).filter((r: SalesRecord) => r.year !== 2022 && r.line && r.line !== 'Other'); // Validation: Exclude 2022 and require line })
// Relaxed filtering: Only exclude rows with absolutely no year info even after backfill
.filter((r: SalesRecord) => r.year > 0);
resolve(data); resolve(data);
} catch (err) { } catch (err) {
reject(err); reject(err);
} }
}, },
error: (error: any) => { error: (error: any) => reject(error)
reject(error);
}
}); });
}); });
}; };
@@ -180,15 +227,13 @@ export const processExcel = async (file: File): Promise<SalesRecord[]> => {
const workbook = XLSX.read(arrayBuffer); const workbook = XLSX.read(arrayBuffer);
const firstSheetName = workbook.SheetNames[0]; const firstSheetName = workbook.SheetNames[0];
const worksheet = workbook.Sheets[firstSheetName]; const worksheet = workbook.Sheets[firstSheetName];
// Convert to JSON
// raw: false attempts to format the cell (e.g. dates), but for robustness we often prefer raw values or defval
// Using { defval: "" } ensures empty cells are present as empty strings if needed, but key logic handles missing keys.
const jsonData = XLSX.utils.sheet_to_json(worksheet, { defval: "" }); const jsonData = XLSX.utils.sheet_to_json(worksheet, { defval: "" });
const data: SalesRecord[] = jsonData.map((row: any, index: number) => { const data: SalesRecord[] = jsonData.map((row: any, index: number) => {
return mapRowToRecord(row, index); return mapRowToRecord(row, index);
}).filter((r: SalesRecord) => r.year !== 2022 && r.line && r.line !== 'Other'); })
// Relaxed filtering
.filter((r: SalesRecord) => r.year > 0);
return data; return data;
} catch (error) { } catch (error) {
@@ -197,14 +242,234 @@ export const processExcel = async (file: File): Promise<SalesRecord[]> => {
} }
} }
// --- ADS DATA MAPPING ---
const mapCountryToMarketplace = (country: string): string => {
const c = country.toLowerCase().trim();
if (c.includes('germany') || c.includes('deutschland')) return 'AMAZON DE';
if (c.includes('spain') || c.includes('espana') || c.includes('españa')) return 'AMAZON ES';
if (c.includes('france')) return 'AMAZON FR';
if (c.includes('italy') || c.includes('italia')) return 'AMAZON IT';
if (c.includes('kingdom') || c.includes('uk') || c === 'gb') return 'AMAZON UK';
if (c.includes('netherlands') || c.includes('nederland') || c.includes('holland')) return 'AMAZON NL';
if (c.includes('sweden')) return 'AMAZON SE';
if (c.includes('poland')) return 'AMAZON PL';
if (c.includes('belgium')) return 'AMAZON BE';
if (c.includes('turkey')) return 'AMAZON TR';
return country.toUpperCase(); // Fallback
};
export const processAdsCSV = (file: File): Promise<AdsRecord[]> => {
return new Promise((resolve, reject) => {
// @ts-ignore
Papa.parse(file, {
header: false, // Index-based mapping (A=0, B=1...)
skipEmptyLines: true,
complete: (results: any) => {
try {
const data: AdsRecord[] = [];
const rows = results.data;
const len = rows.length;
for (let i = 0; i < len; i++) {
const row = rows[i];
if (!Array.isArray(row) || row.length < 12) continue;
// Check header row (Column A: Country)
const c0 = String(row[0]).trim();
if (c0.toLowerCase() === 'country' || c0.toLowerCase() === 'marketplace') continue;
// Map by Column Index (A=0, B=1... L=11)
const countryRaw = row[0];
const monthRaw = row[1];
const asin = row[2];
const costRaw = row[3];
const clicksRaw = row[4];
const impressionsRaw = row[5];
// G, H, I, J unused/calculated
const unitsRaw = row[10]; // K
const salesRaw = row[11]; // L
if (!asin || !countryRaw) continue;
data.push({
country: mapCountryToMarketplace(String(countryRaw)),
month: normalizeMonth(String(monthRaw)),
asin: String(asin).trim(),
cost: parseCurrency(String(costRaw)),
clicks: parseUnits(String(clicksRaw)),
impressions: parseUnits(String(impressionsRaw)),
attributedSales30d: parseCurrency(String(salesRaw)),
attributedUnits30d: parseUnits(String(unitsRaw)),
});
}
resolve(data);
} catch (err) {
reject(err);
}
},
error: (error: any) => reject(error)
});
});
};
export const processAdsExcel = async (file: File): Promise<AdsRecord[]> => {
try {
const arrayBuffer = await file.arrayBuffer();
const workbook = XLSX.read(arrayBuffer);
const firstSheetName = workbook.SheetNames[0];
const worksheet = workbook.Sheets[firstSheetName];
// Use header: 'A' to strictly map columns by index letter as requested
const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: "A", defval: "" });
const data: AdsRecord[] = jsonData.map((row: any) => {
// Check if it's a header row
if (row['A'] === 'Country' && (row['C'] === 'ASIN' || row['C'] === 'Asin')) return null;
// Map by Column Letter as requested
// A: Country, B: Month, C: ASIN, D: Cost, E: Clicks, F: Impressions
// G: CPC, H: CTR, I: ACOS, J: Conversions
// K: Units, L: Sales
const countryRaw = row['A'];
const monthRaw = row['B'];
const asin = row['C'];
const costRaw = row['D'];
const clicksRaw = row['E'];
const impressionsRaw = row['F'];
const unitsRaw = row['K'];
const salesRaw = row['L'];
if (!asin || !countryRaw) return null;
return {
country: mapCountryToMarketplace(String(countryRaw)),
month: normalizeMonth(String(monthRaw)),
asin: String(asin).trim(),
cost: parseCurrency(String(costRaw)),
clicks: parseUnits(String(clicksRaw)),
impressions: parseUnits(String(impressionsRaw)),
attributedSales30d: parseCurrency(String(salesRaw)),
attributedUnits30d: parseUnits(String(unitsRaw)),
};
}).filter((r): r is AdsRecord => r !== null);
return data;
} catch (error) {
console.error("Error processing Ads Excel:", error);
throw error;
}
};
// --- DATA MERGING ---
export const mergeSalesAndAdsData = (salesData: SalesRecord[], adsData: AdsRecord[]): CombinedKPIs[] => {
// 1. Index Ads Data for fast lookup: Key = ASIN + Marketplace + Month
const adsMap = new Map<string, AdsRecord>();
adsData.forEach(ad => {
const key = `${ad.asin.toUpperCase()}|${ad.country.toUpperCase()}|${ad.month}`;
// If duplicates exist (e.g. multiple campaigns for same ASIN), sum them up
if (adsMap.has(key)) {
const existing = adsMap.get(key)!;
existing.cost += ad.cost;
existing.clicks += ad.clicks;
existing.impressions += ad.impressions;
existing.attributedSales30d += ad.attributedSales30d;
existing.attributedUnits30d += ad.attributedUnits30d;
} else {
adsMap.set(key, { ...ad });
}
});
// 2. Iterate Sales Data and merge
const mergedData: CombinedKPIs[] = salesData.map(sale => {
const key = `${sale.asin.toUpperCase()}|${sale.customer.toUpperCase()}|${sale.month}`;
const adData = adsMap.get(key) || {
country: sale.customer,
month: sale.month,
asin: sale.asin,
cost: 0,
clicks: 0,
impressions: 0,
attributedSales30d: 0,
attributedUnits30d: 0
};
const salesTotal = sale.sellOut;
const salesAds = adData.attributedSales30d;
// Logic: Organic = Total - Ads. Max(0) to avoid negative if attribution window logic differs vs finance dates
const salesOrganic = Math.max(0, salesTotal - salesAds);
const unitsTotal = sale.units;
const unitsAds = adData.attributedUnits30d;
const unitsOrganic = Math.max(0, unitsTotal - unitsAds);
// KPIs
const acos = salesAds > 0 ? (adData.cost / salesAds) * 100 : 0;
const tacos = salesTotal > 0 ? (adData.cost / salesTotal) * 100 : 0;
const roas = adData.cost > 0 ? salesAds / adData.cost : 0;
const ctr = adData.impressions > 0 ? (adData.clicks / adData.impressions) * 100 : 0;
const cpc = adData.clicks > 0 ? adData.cost / adData.clicks : 0;
// CVR (Units / Clicks)
const cvrUnits = adData.clicks > 0 ? (unitsAds / adData.clicks) * 100 : 0;
const paidSalesShare = salesTotal > 0 ? (salesAds / salesTotal) * 100 : 0;
const organicSalesShare = salesTotal > 0 ? (salesOrganic / salesTotal) * 100 : 0;
return {
id: sale.id,
marketplace: sale.customer,
month: sale.month,
year: sale.year,
asin: sale.asin,
title: sale.title,
line: sale.line,
sku: sale.sku,
salesTotal,
unitsTotal,
salesAds,
unitsAds,
cost: adData.cost,
clicks: adData.clicks,
impressions: adData.impressions,
salesOrganic,
unitsOrganic,
paidSalesShare,
organicSalesShare,
acos,
tacos,
roas,
ctr,
cpc,
cvrUnits
};
});
return mergedData;
};
// --- EXISTING HELPERS ---
export const filterData = (data: SalesRecord[], filters: FilterState): SalesRecord[] => { export const filterData = (data: SalesRecord[], filters: FilterState): SalesRecord[] => {
return data.filter(item => { return data.filter(item => {
// Item month is already normalized // 1. Month Logic: Handle "Apr-23" matching "Apr" filter
const recordMonth = item.month; const recordMonth = item.month; // e.g. "Apr-23"
const pureMonth = recordMonth.split('-')[0]; // "Apr"
// 2. Filter Checks
const customerMatch = filters.customer.length === 0 || filters.customer.includes(item.customer); const customerMatch = filters.customer.length === 0 || filters.customer.includes(item.customer);
const yearMatch = filters.year.length === 0 || filters.year.includes(item.year.toString()); const yearMatch = filters.year.length === 0 || filters.year.includes(item.year.toString());
const monthMatch = filters.month.length === 0 || filters.month.includes(recordMonth);
// Check match against pure month ("Apr") OR full month ("Apr-23") just in case filters evolve
const monthMatch = filters.month.length === 0 || filters.month.includes(pureMonth) || filters.month.includes(recordMonth);
const lineMatch = filters.line.length === 0 || filters.line.includes(item.line); const lineMatch = filters.line.length === 0 || filters.line.includes(item.line);
const asinMatch = filters.asin.length === 0 || filters.asin.includes(item.asin); const asinMatch = filters.asin.length === 0 || filters.asin.includes(item.asin);
const skuMatch = filters.sku.length === 0 || filters.sku.includes(item.sku); const skuMatch = filters.sku.length === 0 || filters.sku.includes(item.sku);
@@ -227,17 +492,22 @@ const calculateSeasonality = (data: SalesRecord[]): { seasonality: SeasonalityPo
data.forEach(record => { data.forEach(record => {
const monthName = record.month; const monthName = record.month;
// Extract year from record.month if it's in Format "Mon-YY", else use record.year
// record.year is numeric, record.month is "Apr-23".
const yearStr = record.year.toString(); const yearStr = record.year.toString();
yearsSet.add(yearStr); yearsSet.add(yearStr);
if (seasonalityMap.has(monthName)) { // We need to match month name purely (Jan, Feb) for the X Axis, ignoring year
const pureMonth = monthName.split('-')[0];
if (seasonalityMap.has(pureMonth)) {
// Sell Out // Sell Out
const entrySO = seasonalityMap.get(monthName)!; const entrySO = seasonalityMap.get(pureMonth)!;
const currentValSO = (entrySO[yearStr] as number) || 0; const currentValSO = (entrySO[yearStr] as number) || 0;
entrySO[yearStr] = currentValSO + record.sellOut; entrySO[yearStr] = currentValSO + record.sellOut;
// Units // Units
const entryUnits = seasonalityUnitsMap.get(monthName)!; const entryUnits = seasonalityUnitsMap.get(pureMonth)!;
const currentValUnits = (entryUnits[yearStr] as number) || 0; const currentValUnits = (entryUnits[yearStr] as number) || 0;
entryUnits[yearStr] = currentValUnits + record.units; entryUnits[yearStr] = currentValUnits + record.units;
} }
@@ -629,7 +899,7 @@ export const pivotSalesData = (data: SalesRecord[], dimensions: string[] = ['tit
} }
const row = map.get(key)!; const row = map.get(key)!;
const monthPart = record.month; const monthPart = record.month.split('-')[0]; // Handle "Apr-23" -> "Apr"
const monthIdx = MONTH_ORDER.indexOf(monthPart); const monthIdx = MONTH_ORDER.indexOf(monthPart);
const yearStr = record.year.toString(); const yearStr = record.year.toString();
services/geminiService.ts
+55 -46
View File
@@ -2,39 +2,49 @@
import { GoogleGenAI } from "@google/genai"; import { GoogleGenAI } from "@google/genai";
import { AggregatedData } from "../types"; import { AggregatedData } from "../types";
// Declare process to avoid TypeScript errors without causing aggressive bundler shims
declare const process: any;
const SYSTEM_INSTRUCTION = ` const SYSTEM_INSTRUCTION = `
You are an expert Data Analyst Assistant for "Craze Analytix". You are a senior data analyst assistant for a retail dashboard called "Craze Analytix".
You have access to a structured dataset of sales performance including Revenue (Sell Out), Units, Product Lines, and Seasonality. You have access to a detailed report of the currently filtered sales data.
The data includes Sell Out (Revenue in €), Units Sold, Product Lines, Customers/Markets, and Seasonality trends.
Your Capabilities: Your goal is to answer user questions specific to the provided data.
1. **Analyze Trends**: Use the provided Seasonality and Yearly Breakdown data. - If asked about "Trends" or "Seasonality", look at the Monthly Seasonality section.
2. **Perform Calculations**: You have access to detailed Product Line totals. You MUST calculate growth percentages, market shares, and sums dynamically if the user asks. - If asked about "Growth" or "Decline", look at the Top/Bottom Movers sections.
3. **Compare**: Compare performance between years (e.g., 2024 vs 2025). - If asked about specific Product Lines, look at the Product Line Breakdown.
- Always format numbers clearly (e.g., "€1.2M", "€5,200", "15k units").
Rules: - When comparing years, calculate the percentage difference if not explicitly provided.
- If the user asks for a calculation (e.g., "What is the % share of Line X?"), perform the math using the provided numbers. - Keep answers professional, concise, and business-focused.
- Always format currency as € (e.g., €1,200) and units with 'u' or 'units' (e.g., 500 units).
- Be concise but insightful. Point out significant growth or decline.
- If data is missing for a specific query, state clearly that it is not in the current filtered view.
`; `;
// Helper to get API key safely
const getApiKey = (): string | undefined => {
try {
return process.env.API_KEY;
} catch (e) {
return undefined;
}
};
const formatCurrency = (val: number) => `€${val.toLocaleString(undefined, {minimumFractionDigits: 0, maximumFractionDigits: 0})}`; const formatCurrency = (val: number) => `€${val.toLocaleString(undefined, {minimumFractionDigits: 0, maximumFractionDigits: 0})}`;
const formatUnits = (val: number) => `${val.toLocaleString()} units`; const formatUnits = (val: number) => `${val.toLocaleString()} units`;
export const queryGemini = async ( export const queryGemini = async (
apiKey: string,
question: string, question: string,
context: AggregatedData, context: AggregatedData,
filteredRecordCount: number filteredRecordCount: number
): Promise<string> => { ): Promise<string> => {
const apiKey = getApiKey();
if (!apiKey) { if (!apiKey) {
return "Please provide your Gemini API Key in the settings to enable the AI assistant."; return "API Key is missing. Please configure your environment variables (API_KEY) or check your .env file.";
} }
try { try {
// Ensure the key is clean of whitespace const ai = new GoogleGenAI({ apiKey });
const ai = new GoogleGenAI({ apiKey: apiKey.trim() });
// --- CONTEXT GENERATION --- // --- CONTEXT GENERATION ---
// We construct a structured report mirroring the dashboard charts // We construct a structured report mirroring the dashboard charts
@@ -46,62 +56,64 @@ export const queryGemini = async (
.join('\n'); .join('\n');
// 2. Seasonality (Line Chart Data) // 2. Seasonality (Line Chart Data)
// We simplify this to a CSV-like list for the AI to parse trends
const seasonalitySummary = context.seasonality.map(p => { const seasonalitySummary = context.seasonality.map(p => {
// Extract values for each year in the point
const yearValues = context.availableYears.map(y => `${y}: ${formatCurrency(p[y] as number || 0)}`).join(', '); const yearValues = context.availableYears.map(y => `${y}: ${formatCurrency(p[y] as number || 0)}`).join(', ');
return ` - ${p.name}: [${yearValues}]`; return ` - ${p.name}: [${yearValues}]`;
}).join('\n'); }).join('\n');
// 3. Growth/Decline // 3. Top Movers (Growth Table) - Limit to Top 10
const growthSummary = context.topMovers.slice(0, 10).map(m => const growthSummary = context.topMovers.slice(0, 10).map(m =>
` - ${m.line}: +€${m.sellOutGrowthValue.toLocaleString()} (${m.sellOutGrowthPercentage.toFixed(1)}%)` ` - ${m.line}: +€${m.sellOutGrowthValue.toLocaleString()} (${m.sellOutGrowthPercentage.toFixed(1)}%)`
).join('\n'); ).join('\n');
// 4. Declining Movers (Decline Table) - Limit to Top 10
const declineSummary = context.bottomMovers.slice(0, 10).map(m => const declineSummary = context.bottomMovers.slice(0, 10).map(m =>
` - ${m.line}: -€${Math.abs(m.sellOutGrowthValue).toLocaleString()} (${m.sellOutGrowthPercentage.toFixed(1)}%)` ` - ${m.line}: -€${Math.abs(m.sellOutGrowthValue).toLocaleString()} (${m.sellOutGrowthPercentage.toFixed(1)}%)`
).join('\n'); ).join('\n');
// 4. DETAILED BREAKDOWN (For Calculations) // 5. Product Lines Overview (Bar Charts) - Limit to Top 50 to save tokens but give depth
// We provide a JSON-like structure of ALL top product lines so the AI can compute shares/totals. const topLinesSummary = context.byLine.slice(0, 50).map((l, i) =>
// We limit this to top 100 to avoid token limits, which covers most relevant data. ` ${i+1}. ${l.name}: ${formatCurrency(l.value)} | ${formatUnits(l.units)}`
const detailedLines = context.byLine.slice(0, 100).map(l => ({ ).join('\n');
name: l.name,
revenue: l.value, // 6. Customer Distribution (Customer Chart)
units: l.units const customerSummary = context.byCustomer.map(c =>
})); ` - ${c.name}: ${formatCurrency(c.value)}`
).join('\n');
const fullReport = ` const fullReport = `
REPORT CONTEXT (Based on Current Filters): REPORT CONTEXT:
------------------------------------------ ----------------
GLOBAL METRICS: GLOBAL TOTALS:
Total Sell Out: ${formatCurrency(context.totalSellOut)} Total Sell Out: ${formatCurrency(context.totalSellOut)}
Total Units: ${formatUnits(context.totalUnits)} Total Units: ${formatUnits(context.totalUnits)}
Records Analyzed: ${filteredRecordCount} Records Analyzed: ${filteredRecordCount}
Years Available: ${context.availableYears.join(', ')} Years Available: ${context.availableYears.join(', ')}
YEARLY TOTALS: YEARLY BREAKDOWN:
${yearlySummary} ${yearlySummary}
MONTHLY TRENDS (Seasonality): MONTHLY SEASONALITY (Revenue Trends):
${seasonalitySummary} ${seasonalitySummary}
TOP PERFORMERS (Growth YoY): FASTEST GROWING LINES (Year-over-Year):
${growthSummary} ${growthSummary}
WORST PERFORMERS (Decline YoY): DECLINING LINES (Year-over-Year):
${declineSummary} ${declineSummary}
DETAILED PRODUCT LINE DATA (Use this for specific calculations): TOP PRODUCT LINES (Revenue & Units):
${JSON.stringify(detailedLines, null, 2)} ${topLinesSummary}
PERFORMANCE BY CUSTOMER:
${customerSummary}
`; `;
const response = await ai.models.generateContent({ const response = await ai.models.generateContent({
model: 'gemini-3-pro-preview', // Updated to the latest capable model for complex reasoning model: 'gemini-2.5-flash',
contents: [ contents: `Context Data:\n${fullReport}\n\nUser Question: ${question}`,
{
role: 'user',
parts: [{ text: `Context Data:\n${fullReport}\n\nUser Question: ${question}` }]
}
],
config: { config: {
systemInstruction: SYSTEM_INSTRUCTION, systemInstruction: SYSTEM_INSTRUCTION,
} }
@@ -111,11 +123,8 @@ ${JSON.stringify(detailedLines, null, 2)}
} catch (error: any) { } catch (error: any) {
console.error("Gemini API Error:", error); console.error("Gemini API Error:", error);
if (error.message && error.message.includes("403")) { if (error.message && error.message.includes("Not implemented on this platform")) {
return "Error 403: Invalid API Key. Please check your key in the settings."; return "System Error: The AI SDK detected a platform mismatch.";
}
if (error.message && error.message.includes("429")) {
return "Error 429: Quota exceeded. You are sending too many requests.";
} }
return `Error: ${error.message || "An unexpected error occurred while analyzing the data."}`; return `Error: ${error.message || "An unexpected error occurred while analyzing the data."}`;
types.ts
+50 -7
View File
@@ -1,5 +1,4 @@
export interface SalesRecord { export interface SalesRecord {
id: string; id: string;
customer: string; customer: string;
@@ -25,7 +24,7 @@ export interface FilterState {
title: string[]; // Added Title filter title: string[]; // Added Title filter
} }
export interface LineGrowthMetric { // Renamed from GrowthMetric export interface GrowthMetric {
line: string; line: string;
currentYearSellOut: number; currentYearSellOut: number;
previousYearSellOut: number; previousYearSellOut: number;
@@ -38,23 +37,23 @@ export interface LineGrowthMetric { // Renamed from GrowthMetric
unitsGrowthPercentage: number; unitsGrowthPercentage: number;
} }
export type LineGrowthMetric = GrowthMetric;
export interface ItemGrowthMetric { export interface ItemGrowthMetric {
sku: string; sku: string;
asin: string; asin: string;
title: string; title: string;
line: string; // Keep line for context line: string;
currentYearSellOut: number; currentYearSellOut: number;
previousYearSellOut: number; previousYearSellOut: number;
sellOutGrowthValue: number; sellOutGrowthValue: number;
sellOutGrowthPercentage: number; sellOutGrowthPercentage: number;
currentYearUnits: number; currentYearUnits: number;
previousYearUnits: number; previousYearUnits: number;
unitsGrowthValue: number; unitsGrowthValue: number;
unitsGrowthPercentage: number; unitsGrowthPercentage: number;
} }
export interface SeasonalityPoint { export interface SeasonalityPoint {
name: string; // "Jan", "Feb", etc. name: string; // "Jan", "Feb", etc.
[year: string]: number | string; // Dynamic keys for years: "2023": 500, "2024": 600 [year: string]: number | string; // Dynamic keys for years: "2023": 500, "2024": 600
@@ -75,8 +74,8 @@ export interface AggregatedData {
seasonality: SeasonalityPoint[]; seasonality: SeasonalityPoint[];
seasonalityUnits: SeasonalityPoint[]; seasonalityUnits: SeasonalityPoint[];
availableYears: string[]; availableYears: string[];
topMovers: LineGrowthMetric[]; // Now uses LineGrowthMetric topMovers: GrowthMetric[];
bottomMovers: LineGrowthMetric[]; // Now uses LineGrowthMetric bottomMovers: GrowthMetric[];
comparisonPeriods: { current: string; previous: string }; comparisonPeriods: { current: string; previous: string };
topLinesSplit: YearlySplitData[]; topLinesSplit: YearlySplitData[];
byCustomerSplit: YearlySplitData[]; byCustomerSplit: YearlySplitData[];
@@ -125,3 +124,47 @@ export interface ComparisonTimeSeriesPoint {
name: string; // "W1", "W2", etc. name: string; // "W1", "W2", etc.
[key: string]: number | string; // Dynamic keys like "2023_sellOut", "2024_units" [key: string]: number | string; // Dynamic keys like "2023_sellOut", "2024_units"
} }
export interface AdsRecord {
country: string;
month: string;
asin: string;
cost: number;
clicks: number;
impressions: number;
attributedSales30d: number;
attributedUnits30d: number;
}
export interface CombinedKPIs {
id: string;
marketplace: string;
month: string;
year: number;
asin: string;
title: string;
line: string;
sku: string;
salesTotal: number;
unitsTotal: number;
salesAds: number;
unitsAds: number;
cost: number;
clicks: number;
impressions: number;
salesOrganic: number;
unitsOrganic: number;
paidSalesShare: number;
organicSalesShare: number;
acos: number;
tacos: number;
roas: number;
ctr: number;
cpc: number;
cvrUnits: number;
}