Data Provider

Description

Data sources from your database or other custom sources used by the admin dashboard to create menus and enable viewing and editing of your data.

Create

Create a file in your project and fill it with your data based on the schema from the example below:

Example:

src/admin/DataProvider.ts

import DashboardOutlinedIcon from '@mui/icons-material/DashboardOutlined';
import PeopleOutlineOutlinedIcon from '@mui/icons-material/PeopleOutlineOutlined';
import LayersOutlinedIcon from '@mui/icons-material/LayersOutlined';
import LogoutOutlinedIcon from '@mui/icons-material/LogoutOutlined';
import { AdminNavigationTypes } from '../types';
import demoResource from './demoResource';
import demoSectionResource from './demoSectionResource';
import FiberManualRecordIcon from '@mui/icons-material/FiberManualRecord';

export default function DataProvider(locale: string): AdminNavigationTypes {
  const navLinks: any = [
    {
      navLinkTitle: { en: 'Dashboard', de: 'Armaturenbrett' },
      icon: DashboardOutlinedIcon,
      path: '/dashboard'
    },
    {
      sectionTitle: { en: 'Sections', de: 'Abschnitte' }
    },
    {
      NavGroupTitle: { en: 'Sections', de: 'Abschnitte' },
      icon: LayersOutlinedIcon,
      childrenGroup: [
        {
          navSubGroupTitle: { en: 'Hero section', de: 'Heldenbereich' },
          icon: FiberManualRecordIcon,
          children: [
            {
              navLinkTitle: { en: 'General', de: 'Allgemein' },
              icon: FiberManualRecordIcon,
              path: '/hero-general',
              resource: demoSectionResource(locale)
            },
            {
              navLinkTitle: { en: 'Data', de: 'Daten' },
              icon: FiberManualRecordIcon,
              path: '/hero',
              resource: demoResource(locale)
            }
          ]
        }
      ]
    },
    {
      sectionTitle: { en: 'Pages', de: 'Seiten' }
    },
    {
      navLinkTitle: { en: 'Users', de: 'Benutzer' },
      icon: PeopleOutlineOutlinedIcon,
      path: '/users'
    },
    {
      navLinkTitle: { en: 'Logout', de: 'Ausloggen' },
      icon: LogoutOutlinedIcon,
      path: '/logout'
    }
  ];

  return navLinks;
}

Implementation

Example:

import DataProvider from '@/app/admin/data-provider/dataProvider';
export default function AdminDashboard() {
  return (
    <MarkusAdmin
      dataProvider={DataProvider}
    />
  )
}

Data Types:

• AdminNavigationTypes

Data Resource:

• demoSectionResource
• demoResource