Creating a Custom Dashboard in React with Data from Payload CMS

This topic will cover how to create a custom dashboard in React that displays and manages data from Payload CMS.

React Example: Dashboard Layout

import React, { useEffect, useState } from 'react';
import axios from 'axios';


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


  useEffect(() => {
    const fetchData = async () => {
      const response = await axios.get('https://your-payload-cms.com/api/your-collection');
      setData(response.data.docs);
    };
    fetchData();
  }, []);


  return (
    <div className="dashboard">
      <h1>Admin Dashboard</h1>
      <div className="grid grid-cols-3 gap-4">
        {data.map((item) => (
          <div key={item.id} className="card">
            <h2>{item.title}</h2>
            <p>{item.description}</p>
          </div>
        ))}
      </div>
    </div>
  );
};


export default Dashboard;

Payload CMS Example: Customizing the Admin Interface

// This customization is done in the Payload CMS configuration file.
module.exports = {
  collections: [
    {
      slug: 'your-collection',
      fields: [
        {
          name: 'title',
          type: 'text',
          required: true,
        },
        {
          name: 'description',
          type: 'textarea',
        },
        // Additional fields...
      ],
      admin: {
        useAsTitle: 'title',
        description: 'Manage your collection items here.',
        components: {
          views: {
            DashboardView: require('./custom-dashboard-view'),
          },
        },
      },
    },
  ],
};