markus-react-admin-dashboard

Installation

npm i --save markus-react-admin-dashboard

Introduction

Marcus React Admin Dashboard - MRAD is a simplified management system solution that allows you to enter data into the backend without wasting time creating an admin panel. It is written in typescript and can be implemented in any React or Next.js project.

Purpose

Marcus React Admin Dashboard - MRAD is ideal for:

• Input data used by the frontend.

• Settings data.

Free Headless CMS

Data entry, display, and editing functions are defined in your project, which you connect to the MRAD via MRADs functions. Based on your functions, MRAD creates a user interface that enables display and manipulation of your data, so basically the MRAD is a free Headless CMS.

How is it work

You define data access in your project. Data can be stored in a database, XML or JSON files and in locations that suit your project, completely independent of MRAD. All data manipulation logic is defined in your project. The implementation, rules for accessing your data, data types that are necessary for MRAD to function can be found here.

Features

• Translatable

• Light and dark mode

• Responsive

• Simplified

• Flexible

• Lightweight

Documentation

Documentation.

Implementation

Create a file at src/admin/AdminDashboard.tsx:

'use client'; // For Nextjs
import { MarkusAdmin } from 'markus-react-admin-dashboard';

export default function AdminDashboard() {
  return (
    <MarkusAdmin
      dataProvider={dataProvider}
      mode={palleteMode}
      locale={locale}
      fullLocales={fullLocales}
      logo={logo}
      iconLogo={iconLogo}
      translations={translations}
      user={user}
      logOut={logout}
    />
  );
}

Props

| Prop | Required | Type | Default | Description | | :--- | :--- | :--- | :--- | :--- | | dataProvider | Required | AdminNavigationTypes | - | The data provider for fetching resources | | mode | Optional | string | 'light' | Color mode: light or dark | | locale | Optional | string | 'en' | Language tag: 'en', 'de', 'it'... | | fullLocales | Optional | AdminFullLocales[] | [{ name: 'English', value: 'en' }] | Language selection | | logo | Optional | RactNode | '../assets/images/logo/logo.png' | Customized project logo | | iconLogo | Optional | ReactNode | '../assets/images/logo/icon-logo.png' | Customized project icon logo | | translations | Optional | Object[] | Default message translations | Info, warning... messages | | user | Optional | {} | {} | Basic data of a registered user with admin privileges | | logout | Optional | Function | - | A function that logs out an admin control panel user |

License

The files included in this repository are licensed under the MIT license.