{"id":18822981,"url":"https://github.com/morzhanov/react-rest-admin-panel","last_synced_at":"2025-04-14T01:24:43.141Z","repository":{"id":122681957,"uuid":"157112397","full_name":"morzhanov/react-rest-admin-panel","owner":"morzhanov","description":"Scallable and easy to use admin dashboard that will help you to manage your REST API data built with React and Mobx.","archived":false,"fork":false,"pushed_at":"2020-09-16T13:28:14.000Z","size":7113,"stargazers_count":11,"open_issues_count":2,"forks_count":3,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-27T15:22:14.438Z","etag":null,"topics":["admin","admin-dashboard","admin-panel","axios","babel","eslint","javascript","js","material-ui","mobx","mobx-react","mobx-state-tree","prettier","react","rest","rest-api","stylus","webpack4"],"latest_commit_sha":null,"homepage":"https://rest-admin-panel.herokuapp.com/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/morzhanov.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-11-11T19:16:17.000Z","updated_at":"2024-06-28T08:51:58.000Z","dependencies_parsed_at":null,"dependency_job_id":"0daf8b12-08fd-4881-a8b0-a992a8a16a56","html_url":"https://github.com/morzhanov/react-rest-admin-panel","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/morzhanov%2Freact-rest-admin-panel","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/morzhanov%2Freact-rest-admin-panel/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/morzhanov%2Freact-rest-admin-panel/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/morzhanov%2Freact-rest-admin-panel/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/morzhanov","download_url":"https://codeload.github.com/morzhanov/react-rest-admin-panel/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248805758,"owners_count":21164385,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["admin","admin-dashboard","admin-panel","axios","babel","eslint","javascript","js","material-ui","mobx","mobx-react","mobx-state-tree","prettier","react","rest","rest-api","stylus","webpack4"],"created_at":"2024-11-08T00:52:17.799Z","updated_at":"2025-04-14T01:24:43.130Z","avatar_url":"https://github.com/morzhanov.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-rest-admin-panel\n\n\u003cimg src=\"https://i.imgur.com/KKc5TOa.png\"/\u003e\n\nScallable and easy to use admin dashboard that will help you to manage your REST API data built with React and Mobx.\n\n## DEMO\n\nhttps://rest-admin-panel.herokuapp.com/\n\n## Description\n\nCreating frontend part for the admin panel of the REST API server always takes a lot of time to design and develop, and it's could be complicated and challenging. This project will help you quickly connect your API to a scalable frontend application for managing your data. This project based on JSON configuration files, so to add new Entity to manage you should only add [entity].js config file for it, all other logic is automated. Also this project provides ready to use logging, authentication and other base logic for admin panel. All datatable contais sorting, filtering and search features. Also this project implements pages to create and update you entities items.\n\n## Installation\n\nUse these steps to install project\n\n```\n1. yarn install\n2. yarn start\n```\n\nBuild project:\n\n```\nyarn build\n```\n\n## Main pages\n\n* \u003ca href=\"https://rest-admin-panel.herokuapp.com/auth\"\u003eAuth page\u003c/a\u003e\n* \u003ca href=\"https://rest-admin-panel.herokuapp.com/admin/home\"\u003eHome page\u003c/a\u003e\n* \u003ca href=\"https://rest-admin-panel.herokuapp.com/admin/task/\"\u003eEntity list page\u003c/a\u003e\n* \u003ca href=\"https://rest-admin-panel.herokuapp.com/admin/task/2\"\u003eUpdate entity page\u003c/a\u003e\n* \u003ca href=\"https://rest-admin-panel.herokuapp.com/admin/task/add\"\u003eAdd new entity page\u003c/a\u003e\n\n\n#### NOTE: You can also add your custom page into the project, it's always up to You! If you familiar with React and Mobx libraries it's gona be fast and easy.\n\n### Fake API\n\nProject already contains test entities (user and task entity) for demonstration All data generates using \u003ca href=\"https://github.com/marak/Faker.js/\"\u003efaker.js\u003c/a\u003e library. Also this project contains fake API server with mocked methods that will take test data from fixtures. You can review how project works in the \u003ca href=\"https://rest-admin-panel.herokuapp.com/\"\u003eDemo\u003c/a\u003e application. \n\nTo enter demo application you should provide any email and password data, application doesn't saves your data and it's not connected to any back-end server or database.\n\n## Configuration file\n\nTo add new entity into the project you should create new [entity_name].js file in `/src/entities` folder and connect it in the `/src/entities/index.js` file:\n\n```\n// connect your entities here\nimport user from './user'\nimport task from './task'\n\n// INFO: provide your entities here\nconst entities = [user, task]\n\nexport default entities\n```\n\nHere's basic minimal entity configuration file:\n\n```\nimport ExampleIcon from '@material-ui/icons/ExampleIcon'\n\nexport default {\n  name: 'example',\n\n  icon: ExampleIcon,\n\n  url: 'https://url.to.entity.api',\n\n  fields: [\n    {\n      name: 'name',\n      type: 'string',\n      rules: 'required'\n    }\n  ]\n}\n```\n\nHere's \u003cb\u003eexample configuration file\u003c/b\u003e that contains more complex fields for the `Task` entity:\n\n```\nimport React from 'react'\nimport Assignment from '@material-ui/icons/Assignment'\nimport apiUrls from '../utils/apiUrls'\nimport { UpdateEntityUrlMethod } from '../utils/constants'\n\n// NOTICE: we should use .jsx extention for this file to support custom actions\nexport default {\n  name: 'task',\n\n  icon: Assignment,\n\n  url: apiUrls.fake.task,\n\n  updateUrlMethod: UpdateEntityUrlMethod.PATCH,\n\n  filtersUrl: apiUrls.fake.taskFilters,\n\n  pagination: { pageSize: 20, pageNumber: 1 },\n\n  filters: [\n    {\n      name: 'status',\n      value: ''\n    },\n    {\n      name: 'importance',\n      value: ''\n    }\n  ],\n\n  fields: [\n    {\n      name: 'name',\n      type: 'string',\n      rules: 'required'\n    },\n    {\n      name: 'desc',\n      type: 'string',\n      rules: 'email|required'\n    },\n    {\n      name: 'status',\n      type: 'dropdown',\n      rules: 'required',\n      options: ['Created', 'In progress', 'Closed'],\n      // example of custom body action\n      actions: {\n        body: {\n          custom: ({ value }) =\u003e (\n            \u003cdiv style={{ display: 'flex', alignItems: 'center' }}\u003e\n              \u003cspan\n                style={{\n                  borderRadius: '50%',\n                  width: 8,\n                  height: 8,\n                  marginRight: 8,\n                  backgroundColor:\n                    value === 'Created'\n                      ? '#bbb'\n                      : value === 'In progress'\n                      ? '#3d2'\n                      : '#222'\n                }}\n              /\u003e\n              {value}\n            \u003c/div\u003e\n          )\n        }\n      }\n    },\n    {\n      name: 'importance',\n      type: 'dropdown',\n      rules: 'required',\n      options: ['Low', 'Medium', 'High'],\n      // example of custom body action\n      actions: {\n        body: {\n          custom: ({ value }) =\u003e (\n            \u003cspan\n              style={{\n                color: value === 'Low' ? '#3d2' : value === 'Medium' ? '#c37800' : '#e23'\n              }}\n            \u003e\n              {value}\n            \u003c/span\u003e\n          )\n        }\n      }\n    }\n  ]\n}\n```\n\n## Configuration file API\n\n#### name\n\nEntity name.\n\n#### icon\n\nEntity icon, will be displayed on the sidebar menu. You can use \u003ca href=\"https://material-ui.com/style/icons/\"\u003eMaterialUI icons\u003c/a\u003e or provide custom icon component or use simple SVG file.\n\n#### url\n\nEntity base url. This url will be used to perform CRUD operations over entity.\n\n#### updateUrlMethod  (optional)\n\nHTTP method that will be used to update update entity, by default project uses PATCH method. Available methods is PUT and PATCH. You can assign here literal values [`PATCH`, `POST`], or use `UpdateEntityUrlMethod` enum from `src/utils/constants`.\n\n#### filtersUrl  (optional)\n\nupdateUrlMethod will be used to fetch entity filters, that could be used to filter entity items in the entity table. Filter name should be one of the entity fields. This parameter is optional, and you can provide all options for filters within `filters` item object just hardcoded them. But in the case if you have a big amount of unique options for the filter you probably want to fetch them asyncronously from some API endpoint.\n\n```\nNOTE: you can inject all url parameters as string literal or add them to the `src/utils/apiUrls` file and import from there.\n```\n\n#### pagination (optional)\n\npagination field will change default pagination rules. As default project will use `pageSize = 20` and `pageNumber = 1` values. \n\nexample: \n```\npagination: { pageSize: 20, pageNumber: 1 }\n```\n\n\n#### fitlers (optional)\n\nArray that contains entity filters. \n\nFilter fields:\n```\n{\n  name: 'status',   // name, should be one of the entity fields names\n  value: ''         // default filter value\n  options: []       // array of options, you can provide them here or fecth async using `filtersUrl`\n}\n```\n\n#### fields\n\nThis array should contain all entity fields configuration.\n\nField fields:\n```\nname: 'name',                                     // field name\ntype: 'dropdown',                                 // field type\nrules: 'required',                                // field validation rules\noptions: ['Created', 'In progress', 'Closed'],    // array of options, only for dropdown type\nactions: {                                        // field custom actions\n  head: {                                         // field head custom axtions\n    custom: \u003cReactElement\u003e,                       // custom action React element\n    className                                     // head custom className\n  }\n  body: {                                         // body custom actions\n    custom:  \u003cReactElement\u003e,                      // custom action React element\n    className                                     // body custom className\n  }\n}\n```\n\n### Entity field fields\n\n#### name\n\nEntity field name\n\n#### type\n\nEntity field type. Available types: number, boolean, string, dropdown.\n\nIf field type is boolen in the `Entity edit page` it will be rendered as Checkbox element.\nIf field type is dropdown it will be rendered as `\u003cselect\u003e` element with options from `\u003coptions\u003e` field.\n\n#### rules\n\nEntity field validation rules, you can review all available rules in the \u003ca href=\"https://github.com/skaterdav85/validatorjs\"\u003evalidator.js\u003c/a\u003e API page.\n\n#### options\n\nArray of dropdown-select options, only for `dropdown` field type.\n\n#### actions\n\nActions is a custom React elements. You can use actions if you want to customize you entity table with special fields in the table body or header. Just pass custom render function in the `custom` field. With this function you can \n\nExample:\n```\nactions: {\n        body: {\n          custom: ({ value, name, history }) =\u003e (\n            \u003cdiv style={{ display: 'flex', alignItems: 'center' }}\u003e\n              \u003cspan\n                style={{\n                  borderRadius: '50%',\n                  backgroundColor:\n                    value === 'Created'\n                      ? '#bbb'\n                      : value === 'In progress'\n                      ? '#3d2'\n                      : '#222'\n                }}\n              /\u003e\n              {value} {name}\n              \u003cbutton onClick={() =\u003e history.push('home')}\u003eGo to home\u003c/button\u003e\n            \u003c/div\u003e\n          )\n        }\n      }\n```\n\nRender function will receive `value`, `className`, `name`, and  `history` object of react-router-dom library. You can add actions into head and body elements which will accordingly customize table head and body items.\n\n\n## Main Technologies and libraries\n\n- \u003ca href=\"https://reactjs.org/\"\u003eReact\u003c/a\u003e\n- \u003ca href=\"https://reacttraining.com/react-router/\"\u003eReact Router\u003c/a\u003e\n- \u003ca href=\"https://github.com/mobxjs/mobx-state-tree\"\u003eMobx-State-Tree\u003c/a\u003e\n- \u003ca href=\"https://github.com/mobxjs/mobx\"\u003eMobx\u003c/a\u003e\n- \u003ca href=\"https://material-ui.com/\"\u003eMaterial UI\u003c/a\u003e\n- \u003ca href=\"https://github.com/foxhound87/mobx-react-form\"\u003eMobx-react-form\u003c/a\u003e\n- \u003ca href=\"https://webpack.js.org/\"\u003eWebpack 4\u003c/a\u003e\n- \u003ca href=\"https://github.com/axios/axios\"\u003eAxios\u003c/a\u003e\n- \u003ca href=\"https://github.com/skaterdav85/validatorjs\"\u003eValidator.js\u003c/a\u003e\n- \u003ca href=\"https://eslint.org/\"\u003eESLint\u003c/a\u003e\n- \u003ca href=\"https://github.com/prettier/prettier\"\u003ePrettier\u003c/a\u003e\n- \u003ca href=\"https://babeljs.io/\"\u003eBabel\u003c/a\u003e\n- \u003ca href=\"http://stylus-lang.com/\"\u003eStylus\u003c/a\u003e\n- \u003ca href=\"https://lodash.com/\"\u003eLodash\u003c/a\u003e\n- \u003ca href=\"https://postcss.org/\"\u003ePostCSS\u003c/a\u003e\n\n#### also:\n\n- Webpack to build project.\n- Babel to compile ES6 and ES7 code.\n- You can use Stylus within this project.\n- Check your code with ESLint and Prettier.\n- Supports hot-module-reload.\n- Uses MaterialUI and base design.\n\n## Contributing\n\n1.  Fork it!\n2.  Create your feature branch: `git checkout -b my-new-feature`\n3.  Commit your changes: `git commit -am 'Add some feature'`\n4.  Push to the branch: `git push origin my-new-feature`\n5.  Submit a pull request :D\n\n## Author\n\nVlad Morzhanov\n\n## License\n\n#### (The MIT License)\n\nCopyright (c) 2018 Vlad Morzhanov.\nYou can review license in the LICENSE file.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmorzhanov%2Freact-rest-admin-panel","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmorzhanov%2Freact-rest-admin-panel","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmorzhanov%2Freact-rest-admin-panel/lists"}