Recipe — Store dashboard widgets

Compose WidgetShell, Billboard, and IncidentsWidget on a store home dashboard.

When to use

Store ops landing page with KPI headline and open incidents list.

Pattern

import {
  WidgetShell,
  Billboard,
  IncidentsWidget,
  NikeStoreProvider,
  ModuleAnalyticsProvider,
} from '@nike/whisker-component-library';
import { Grid } from '@nike/podium';

function StoreDashboard({ storeId, token, bffUrl, isProd }) {
  return (
    <ModuleAnalyticsProvider moduleName="store-home">
      <NikeStoreProvider
        storeId={storeId}
        loggedIn={Boolean(token)}
        accessToken={token}
        isProd={isProd}
        bffUrl={bffUrl}
      >
        <Grid columns={2} gap="lg">
          <WidgetShell>
            <Billboard label="Units on floor" value="1,204" />
          </WidgetShell>
          <WidgetShell>
            <IncidentsWidget accessToken={token} baseUrl={`${bffUrl}/incidents`} limit={5} />
          </WidgetShell>
        </Grid>
      </NikeStoreProvider>
    </ModuleAnalyticsProvider>
  );
}

Podium primitives

Grid, Stack for dashboard layout
Billboard / IncidentsWidget use Podium Text, Link, Skeleton

Pitfalls

IncidentsWidget needs valid accessToken — 401 when null.
storeNumber defaults from useNikeStore() — override via prop if needed.
Wrap KPI widgets in WidgetShell for consistent dashboard chrome.