mirror of
https://github.com/christianvidalwolf-prog/CrazeAnalytix.git
synced 2026-08-03 11:45:23 +02:00
feat: wire MKT tab to top-level filters and remove internal category filter
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:
co-authored by
Claude Sonnet 4.6
parent
12fb15cae3
commit
657009a7ba
@@ -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>
|
||||||
|
|
||||||
|
|||||||
@@ -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" />
|
||||||
|
|||||||
Reference in New Issue
Block a user