07. Customize dashboard

By default, AdminBro comes with a simple dashboard. You can easily modify it by adding some widgets.

how to change default dashboard

You can pass your custom dashboard to the AdminBro via options

const adminBroOptions = {
  ...
  databases: [...],
  resources: [...],
  dashboard: {
    handler: async () => {
      return { some: 'output' }
    },
    component: AdminBro.bundle('./my-dashboard-component')
  },
  ...
}

and implement component for it:

// my-dashboard-component.jsx
import { ApiClient } from 'admin-bro'
import { Box } from '@admin-bro/design-system'

const api = new ApiClient()

const Dashboard = () => {
  const [data, setData] = useState({})

  useEffect(() => {
    api.getDashboard().then((response) => {
      setData(response.data)
    })
  }, [])

  return (
    <Box variant="grey">
      <Box variant="white">
        some: { data.some }
      </Box>
    </Box>
  )
}

export default Dashboard

As you can see we don't provide any props to the dashboard component. But you can easily use ApiClient to invoke any action.