Build an Admin Dashboard in React

Building an admin dashboard in React involves creating three key components: KPI cards, a revenue chart, and a table of recent activity. These components are arranged in a layout that adapts from phone to desktop. The hardest part of creating a dashboard is not the coding process, but determining what information to display.

To decide what to show on the dashboard, apply this test: each number on the first screen should answer a question someone actually asks every day. For instance, "How much did we sell this week?" warrants a card. Conversely, "Total registered users since launch" is less useful, as it only ever increases and doesn't prompt any action.

When designing the dashboard, limit the top row to four numbers. Each number should be accompanied by its change over a comparable period, as a number without context can't indicate whether the current situation is good or bad. Place the detail, such as the chart and the table, beneath the top row. This placement ensures users can focus on the high-level numbers first and then delve into the additional information when needed.

First, KPI cards serve as the foundation of the dashboard. The `Stat` component displays a label, a significant value, and an optional change with a direction indicator. The direction color-codes the change pill and selects the arrow. Here's an example code snippet for creating KPI cards:

```javascript

const kpis = [

{ label: 'Revenue', value: '$48,210', delta: '+12.4%', trend: 'up' },

{ label: 'Orders', value: '1,284', delta: '+3.1%', trend: 'up' },

{ label: 'Refunds', value: '18', delta: '-2', trend: 'down' },

{ label: 'Conversion', value: '3.2%', delta: '0.0%', trend: 'flat' },

] as const;

<div className="kpi-grid">

{kpis.map((k) => (

<Card

key={k.label}

shadow="sm"

radius="lg"

style={{ padding: 20 }}

>

<Stat

label={k.label}

value={k.value}

delta={k.delta}

trend={k.trend}

/>

</Card>

))}

</div>

```

Next, a revenue chart is created using the `Chart` component. This component takes rows of data, the key for the x-axis, and the series to draw. Multiple series automatically generate a legend. Here's an example of a revenue chart:

```javascript

const revenue = [

{ month: 'Jan', online: 12400, store: 8200 },

{ month: 'Feb', online: 13900, store: 7900 },

{ month: 'Mar', online: 15100, store: 8800 },

{ month: 'Apr', online: 16800, store: 9100 },

{ month: 'May', online: 18200, store: 9600 },

{ month: 'Jun', online: 21000, store: 10400 },

];

<Card

shadow="sm"

radius="lg"

style={{ padding: 20 }}

>

<Chart

type="area"

title="Revenue"

// Additional chart properties...

/>

</Card>

```

Finally, a table of recent activity is added beneath the KPI cards and revenue chart. This table provides additional context and detail to the user. The `Table` component, along with the `TableColumn` type, can be used to create the table structure.