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

feat: move vendor stock to own column with EU/UK badges and add Stock header

Browse Source
This commit is contained in:
Christian Vidal Wolf
2026-06-17 16:31:23 +02:00
parent 8d8d4266b9
commit 64f2953c70
1 changed files with 41 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/ForecastView.tsx
+41 -28
View File
@@ -135,40 +135,48 @@ const ComparisonTableRow: React.FC<{ row: ComparisonRow }> = React.memo(({ row }
const barWidth = Math.min(100, row.pctPeriod);
return (
<tr className="hover:bg-indigo-500/5 transition-colors border-b border-slate-800/50 last:border-0">
<td className="px-4 py-3">
<div className="flex flex-col gap-1">
<span className="text-xs font-black text-indigo-400 tracking-tighter">{row.sku}</span>
{(row.vendorStockEU > 0 || row.vendorStockUK > 0) && (
<div className="flex flex-col gap-0.5">
{row.vendorStockEU > 0 && (
<div
className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded border text-[10px] font-bold bg-slate-200 text-slate-800 border-slate-300 w-fit"
title={`Stock Amazon Vendor EU: ${row.vendorStockEU}`}
>
<AmazonSmileIcon className="w-3 h-3 shrink-0" />
<span className="text-[7px] font-black uppercase opacity-60">EU</span>
<span>{row.vendorStockEU.toLocaleString('de-DE')}</span>
</div>
)}
{row.vendorStockUK > 0 && (
<div
className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded border text-[10px] font-bold bg-slate-200 text-slate-800 border-slate-300 w-fit"
title={`Stock Amazon Vendor UK: ${row.vendorStockUK}`}
>
<AmazonSmileIcon className="w-3 h-3 shrink-0" />
<span className="text-[7px] font-black uppercase opacity-60">UK</span>
<span>{row.vendorStockUK.toLocaleString('de-DE')}</span>
</div>
)}
</div>
)}
</div>
<td className="px-4 py-3 whitespace-nowrap">
<span className="text-xs font-black text-indigo-400 tracking-tighter">{row.sku}</span>
</td>
<td className="px-4 py-3 max-w-[280px]">
<span className="text-sm text-slate-200 line-clamp-1" title={row.description}>
{row.description}
</span>
</td>
<td className="px-4 py-3 whitespace-nowrap">
<div className="flex flex-col gap-1">
{row.vendorStockEU > 0 ? (
<div
className="inline-flex items-center gap-1.5 px-2 py-1 rounded bg-gradient-to-br from-indigo-500 to-blue-600 text-white border border-indigo-400/50 shadow-lg text-[10px] font-bold w-fit"
title={`Stock Amazon Vendor EU: ${row.vendorStockEU.toLocaleString('de-DE')}`}
>
<AmazonSmileIcon className="w-3 h-3 shrink-0" />
<span className="text-[7px] font-black uppercase opacity-80">EU</span>
<span>{row.vendorStockEU.toLocaleString('de-DE')}</span>
</div>
) : (
<div className="inline-flex items-center gap-1.5 px-2 py-1 rounded border text-[10px] font-bold bg-slate-800/50 text-slate-500 border-slate-700/50 w-fit">
<span className="text-[7px] font-black uppercase">EU</span>
<span>—</span>
</div>
)}
{row.vendorStockUK > 0 ? (
<div
className="inline-flex items-center gap-1.5 px-2 py-1 rounded bg-gradient-to-br from-rose-500 to-red-600 text-white border border-rose-400/50 shadow-lg text-[10px] font-bold w-fit"
title={`Stock Amazon Vendor UK: ${row.vendorStockUK.toLocaleString('de-DE')}`}
>
<AmazonSmileIcon className="w-3 h-3 shrink-0" />
<span className="text-[7px] font-black uppercase opacity-80">UK</span>
<span>{row.vendorStockUK.toLocaleString('de-DE')}</span>
</div>
) : (
<div className="inline-flex items-center gap-1.5 px-2 py-1 rounded border text-[10px] font-bold bg-slate-800/50 text-slate-500 border-slate-700/50 w-fit">
<span className="text-[7px] font-black uppercase">UK</span>
<span>—</span>
</div>
)}
</div>
</td>
<td className="px-4 py-3 text-right whitespace-nowrap">
<span className="text-sm font-black text-emerald-400">
{row.actualUnits.toLocaleString('de-DE')}
@@ -648,6 +656,11 @@ const ForecastView: React.FC<ForecastViewProps> = ({ asinMetadata, vendorStockMa
/>
</div>
</th>
<th className="px-4 py-3 text-left w-[12%]">
<div className="flex items-center gap-0.5">
<span>Stock</span>
</div>
</th>
<th className="px-4 py-3 text-right w-[11%]">
<div className="flex items-center justify-end gap-0.5">
<ExcelFilter