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

feat: wire MKT tab to top-level filters and remove internal category filter

Browse Source 
MktDataView now receives filteredData/filteredAdsData so the global
FilterBar controls the tab's data. Removed the local "All Categories"
dropdown that previously sat next to the Include COGS toggle.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Christian Vidal Wolf
2026-03-12 14:35:37 +01:00
co-authored by Claude Sonnet 4.6
parent 12fb15cae3
commit 657009a7ba
2 changed files with 3 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
App.tsx
+1 -1
View File
@@ -926,7 +926,7 @@ const App: React.FC = () => {
<Suspense fallback={<LoadingSpinner />}> <Suspense fallback={<LoadingSpinner />}>
<div className={view === 'mkt' ? '' : 'hidden'}> <div className={view === 'mkt' ? '' : 'hidden'}>
<MktDataView rawData={rawData} adsData={adsData} /> <MktDataView rawData={filteredData} adsData={filteredAdsData} />
</div> </div>
</Suspense> </Suspense>
components/mkt/MktDataView.tsx
+2 -32
View File
@@ -5,7 +5,7 @@ import { Product } from './types';
import { KPICards } from './KPICards'; import { KPICards } from './KPICards';
import { MasterTable } from './MasterTable'; import { MasterTable } from './MasterTable';
import { WaterfallModal } from './WaterfallModal'; import { WaterfallModal } from './WaterfallModal';
import { Filter, Settings2 } from 'lucide-react'; import { Settings2 } from 'lucide-react';
// --------------------------------------------------------------------------- // ---------------------------------------------------------------------------
// Excel parsing helpers (all files use raw: true so numbers come back as JS numbers) // Excel parsing helpers (all files use raw: true so numbers come back as JS numbers)
@@ -94,7 +94,6 @@ interface MktDataViewProps {
export default function MktDataView({ rawData, adsData }: MktDataViewProps) { export default function MktDataView({ rawData, adsData }: MktDataViewProps) {
const [includeCOGS, setIncludeCOGS] = useState(true); const [includeCOGS, setIncludeCOGS] = useState(true);
const [selectedCategory, setSelectedCategory] = useState<string>('All');
const [selectedProduct, setSelectedProduct] = useState<Product | null>(null); const [selectedProduct, setSelectedProduct] = useState<Product | null>(null);
const [mktLoading, setMktLoading] = useState(true); const [mktLoading, setMktLoading] = useState(true);
@@ -198,20 +197,7 @@ export default function MktDataView({ rawData, adsData }: MktDataViewProps) {
})); }));
}, [rawData, adsData, dealsMap, promosMap, chargebacksMap]); }, [rawData, adsData, dealsMap, promosMap, chargebacksMap]);
const categories = useMemo( const filteredProducts = allProducts;
() => ['All', ...Array.from(new Set(allProducts.map(p => p.category))).sort()],
[allProducts]
);
const filteredProducts = useMemo(() => {
if (selectedCategory === 'All') return allProducts;
return allProducts.filter(p => p.category === selectedCategory);
}, [allProducts, selectedCategory]);
// Reset category filter when product list changes (e.g. rawData load)
useEffect(() => {
setSelectedCategory('All');
}, [rawData]);
// --------------------------------------------------------------------------- // ---------------------------------------------------------------------------
// Loading skeleton — shown while MKT files are being fetched or rawData is empty // Loading skeleton — shown while MKT files are being fetched or rawData is empty
@@ -256,22 +242,6 @@ export default function MktDataView({ rawData, adsData }: MktDataViewProps) {
</div> </div>
<div className="flex items-center gap-4"> <div className="flex items-center gap-4">
{/* Category Filter */}
<div className="flex items-center gap-2 bg-[#0A0C10] px-3 py-1.5 rounded-lg border border-[#1F2433]">
<Filter className="w-4 h-4 text-slate-400" />
<select
className="bg-transparent text-sm font-medium text-slate-300 outline-none cursor-pointer"
value={selectedCategory}
onChange={(e) => setSelectedCategory(e.target.value)}
>
{categories.map(cat => (
<option key={cat} value={cat} className="bg-[#13161F]">
{cat === 'All' ? 'All Categories' : cat}
</option>
))}
</select>
</div>
{/* COGS Toggle */} {/* COGS Toggle */}
<div className="flex items-center gap-2 bg-[#0A0C10] px-3 py-1.5 rounded-lg border border-[#1F2433]"> <div className="flex items-center gap-2 bg-[#0A0C10] px-3 py-1.5 rounded-lg border border-[#1F2433]">
<Settings2 className="w-4 h-4 text-slate-400" /> <Settings2 className="w-4 h-4 text-slate-400" />