# Overhaul The User Management Dashboard

**URL:** <https://talk.openmrs.org/t/overhaul-the-user-management-dashboard/6292>\
**Category:** ID Dashboard\
**Tags:** gsoc2016, id-dashboard\
**Created:** [May 14, 2016, 2:43am UTC](https://talk.openmrs.org/t/overhaul-the-user-management-dashboard/6292 "2016-05-14T02:43:10Z")\
**Posts on this page:** 1\
**Showing post:** 42

<div class="post-metadata">

**Author:** ![dmytro.trifonov](https://talk.openmrs.org/letter_avatar/dmytro.trifonov/32/5_5575768a8748004e209b776fc1b2916d.png) [@dmytro.trifonov](https://talk.openmrs.org/u/dmytro.trifonov)\
**Post date:** [June 1, 2016, 10:59pm UTC](https://talk.openmrs.org/t/overhaul-the-user-management-dashboard/6292/42 "2016-06-01T22:59:14Z")

</div>

Need to ask for you help… So, keep calm, there will be a long post 🙂

As we talked before starting GSOC, in our module we will render our react components on a server side. So, first, I created basic skeleton, with React and material-ui library, you can look the code in [this](https://github.com/diospark/openmrs-contrib-id-user-management-dashboard/commit/837cf9fa22986d6a6ecb3d0d4a3506f8988da46d) commit.

It renders UI well, but there was a one BIG problem: **material-ui** library requires **react-tap-event-plugin** for listening events, without this plugin click/tap events don’t working [MUI: The React component library you always wanted](http://www.material-ui.com/#/get-started/installation) There is an example, how to launch this plugin for client-side rendering, but I have no idea how to use it when we render components on a server side (because this plugin must be executed only when we render components).

Then I tried to set an app with client side rendering, just for testing how events will work. I pushed code to separate branch: [GitHub - diospark/openmrs-contrib-id-user-management-dashboard at client-side](https://github.com/diospark/openmrs-contrib-id-user-management-dashboard/tree/client-side)

There I’ve done setup converting React and ES6 specific js files, using **Babel** and **Browserify** plugins for Gulp, to format, which can be used on a client side (UI). In my case, click and other events working, but I got a lot of errors, regarding this issue [addComponentAsRefTo Invariant Violation · GitHub](https://gist.github.com/jimfb/4faa6cbfb1ef476bd105) I think, I believe, that I have a problem with my component structure, but I have no idea how can I fix that, and this is a big blocker for me.

Here is the screen of what happening when I am clicking on a table

 ![](https://talk.openmrs.org/uploads/default/original/2X/6/6ade520f736ec67db700c3cb76bd2701b9a6de0e.png)

So, will be good to find a decision for first or second situation that I described,

To start my code just resolve dependencies (npm install) , and start the server script (node server.js) For client side solution, you also have to compile js files before starting server, just install Gulp and launch ‘gulp’ command

Thanks

---

_[View the full topic](https://talk.openmrs.org/t/overhaul-the-user-management-dashboard/6292)._