> For the complete documentation index, see [llms.txt](https://optim-finance.gitbook.io/optim-finance/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://optim-finance.gitbook.io/optim-finance/oada-ui/oada-smart-contract-api/epoch-stake-auction/auction-dashboard.md).

# Auction Dashboard

The auction dashboard provides an overview of the current auction state and bid statistics:

```typescript
// src/features/dAppHub/EpochStakeAuction/Dashboard/index.tsx
// Main component for the stake auction dashboard
export const EpochStakeAuctionDashboard = () => {
  // Component implementation details
  const oadaFrontendInfo = useAppSelector(selectOadaFrontendInfo)

  // Calculate bid statistics
  const [minBidApy, maxBidApy] = oadaFrontendInfo.bidViews.reduce(([prevMinApy, prevMaxApy], view) => {
    const apy = Big(view.apy.toString())
    const nextMinApy = min(prevMinApy, apy)
    const nextMaxApy = max(prevMaxApy, apy)
    return [nextMinApy, nextMaxApy]
  }, [Big(Number.MAX_VALUE), Big(Number.MIN_VALUE)])

  // Calculate bid range and interval for bucketing
  const bidRange = maxBidApy.eq(minBidApy) ? Big(1) : maxBidApy.sub(minBidApy)
  const bidStep = bidRange.div(bidApyBucketCount)
  const intervalLength = bidStep

  // Create table buckets for order book display
  const tableBuckets = _.range(0, +bidRange + 1, 1).map(v => {
    return {
      apy: `${minBidApy.add(v).div(10)}%`,
      requestedStakeAmount: 0,
    }
  })

  // Populate table buckets with bid data
  oadaFrontendInfo.bidViews.forEach(bidView =>
    tableBuckets[bidView.apy - +minBidApy].requestedStakeAmount +=
      +calcRequestedStakeAmount(Big(bidView.amount), Big(bidView.apy))
  )

  // Component render logic
  return (
    // JSX implementation
  );
};
```