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

Refine StockBadge design to Top 50 style and move to title row across all views

Browse Source
This commit is contained in:
Christian Vidal Wolf
2026-01-27 18:23:18 +01:00
parent f0d920de84
commit 6541f6655a
8 changed files with 70 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/ForecastView.tsx
+6 -5
View File
@@ -3,7 +3,6 @@ import * as XLSX from 'xlsx';
import { ProductForecastData, FilterState } from '../types';
import { DownloadIcon } from './Icons';
import { StockBadge } from './StockBadge';
import { StockBadge } from './StockBadge';
import {
BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer,
LineChart, Line, Legend, ComposedChart, Area
@@ -15,7 +14,6 @@ interface ForecastViewProps {
top50Ranking?: {
eu: Map<string, number>;
uk: Map<string, number>;
stockMap?: Map<string, number>;
};
stockMap?: Map<string, number>;
}
@@ -33,7 +31,7 @@ const Top50Badge: React.FC<{ rank: number; label: string; theme?: 'amber' | 'ind
);
};
const ForecastView: React.FC<ForecastViewProps> = ({ data, filters, top50Ranking, stockMap, stockMap }) => {
const ForecastView: React.FC<ForecastViewProps> = ({ data, filters, top50Ranking, stockMap }) => {
const [searchTerm, setSearchTerm] = useState('');
const [showOnlyTop50, setShowOnlyTop50] = useState(false);
const [top50Mode, setTop50Mode] = useState<'eu' | 'uk'>('eu');
@@ -411,8 +409,11 @@ const ForecastView: React.FC<ForecastViewProps> = ({ data, filters, top50Ranking
</div>
</div>
{/* Title Row */}
<div className="text-[13px] font-medium text-slate-100 leading-snug group-hover:text-white transition-colors">
{p.title}
<div className="flex items-start gap-2 text-[13px] font-medium text-slate-100 leading-snug group-hover:text-white transition-colors">
<span className="truncate max-w-[170px]">{p.title}</span>
{stockMap && (
<StockBadge stock={stockMap.get(p.sku?.replace(/(DE|EN)$/i, ''))} />
)}
</div>
{/* Line Row */}
<div className="text-[10px] font-black text-[#ec4899] uppercase tracking-[0.15em]">