Optimize performance (persistent tabs, pagination) and add sortable columns + stock badges to ForecastView

This commit is contained in:
Christian Vidal Wolf
2026-01-28 15:11:47 +01:00
parent 1b362d0660
commit d40740fce7
2 changed files with 125 additions and 55 deletions
+28 -21
View File
@@ -646,9 +646,12 @@ const App: React.FC = () => {
<>
<FilterBar filters={filters} onFilterChange={handleFilterChange} options={filterOptions} />
<div className="mt-6">
{view === 'dashboard' && <Dashboard data={aggregatedData} filterState={filters} adsData={filteredAdsData} stockMap={stockMap} />}
{view === 'table' && (
<Suspense fallback={<LoadingSpinner />}>
<div className={view === 'dashboard' ? '' : 'hidden'}>
<Dashboard data={aggregatedData} filterState={filters} adsData={filteredAdsData} stockMap={stockMap} />
</div>
<Suspense fallback={<LoadingSpinner />}>
<div className={view === 'table' ? '' : 'hidden'}>
<DataGrid
data={combinedAdsData}
hasCustomerFilter={filters.customer.length > 0}
@@ -658,10 +661,11 @@ const App: React.FC = () => {
top50Ranking={top50Ranking2025}
top50Mode={filters.customer.includes('Amazon UK') ? 'uk' : 'eu'}
/>
</Suspense>
)}
{view === 'weekly' && (
<Suspense fallback={<LoadingSpinner />}>
</div>
</Suspense>
<Suspense fallback={<LoadingSpinner />}>
<div className={view === 'weekly' ? '' : 'hidden'}>
<WeeklyGrid
data={combinedAdsData}
onDrillDown={handleSkuDrillDown}
@@ -676,15 +680,17 @@ const App: React.FC = () => {
top50Ranking={top50Ranking2025}
velocityMap={velocityMap}
/>
</Suspense>
)}
{view === 'movers' && (
<Suspense fallback={<LoadingSpinner />}>
</div>
</Suspense>
<Suspense fallback={<LoadingSpinner />}>
<div className={view === 'movers' ? '' : 'hidden'}>
<TopMovers data={filteredData} stockMap={stockMap} />
</Suspense>
)}
{view === 'ads' && (
<Suspense fallback={<LoadingSpinner />}>
</div>
</Suspense>
<Suspense fallback={<LoadingSpinner />}>
<div className={view === 'ads' ? '' : 'hidden'}>
<AdsPerformance
data={combinedAdsData}
filters={filters}
@@ -697,10 +703,11 @@ const App: React.FC = () => {
onVendorStockFilterChange={(s) => setFilters(prev => ({ ...prev, vendorStock: s }))}
top50Mode={filters.customer.includes('Amazon UK') ? 'uk' : 'eu'}
/>
</Suspense>
)}
{view === 'forecast' && (
<Suspense fallback={<LoadingSpinner />}>
</div>
</Suspense>
<Suspense fallback={<LoadingSpinner />}>
<div className={view === 'forecast' ? '' : 'hidden'}>
<ForecastView
data={forecastData}
filters={filters}
@@ -713,8 +720,8 @@ const App: React.FC = () => {
onVendorStockFilterChange={(s) => setFilters(prev => ({ ...prev, vendorStock: s }))}
top50Mode={filters.customer.includes('Amazon UK') ? 'uk' : 'eu'}
/>
</Suspense>
)}
</div>
</Suspense>
</div>
</>
)}