Added: Tabs, Drawer & Bar Chart

Drawer: Needs to display a dropdown w/ lists
Chart: Service Call Missing

ui/src/components/EventsChart/index.jsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { Bar } from 'react-chartjs-2';
+
+const EventsChart = () => {
+    const data = {
+        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
+        datasets: [
+          {
+            label: '# of Votes',
+            data: [12, 19, 3, 5, 2, 3],
+            backgroundColor: [
+              'rgba(255, 99, 132, 0.2)',
+              'rgba(54, 162, 235, 0.2)',
+              'rgba(255, 206, 86, 0.2)',
+              'rgba(75, 192, 192, 0.2)',
+              'rgba(153, 102, 255, 0.2)',
+              'rgba(255, 159, 64, 0.2)',
+            ],
+            borderColor: [
+              'rgba(255, 99, 132, 1)',
+              'rgba(54, 162, 235, 1)',
+              'rgba(255, 206, 86, 1)',
+              'rgba(75, 192, 192, 1)',
+              'rgba(153, 102, 255, 1)',
+              'rgba(255, 159, 64, 1)',
+            ],
+            borderWidth: 1,
+          },
+        ],
+      };
+
+    const options = {
+        scales: {
+            yAxes: [
+            {
+              ticks: {
+                beginAtZero: true,
+              },
+            },
+          ],
+        },
+      };
+
+
+return <> <Bar data={data} options={options} /> </>
+
+}
+
+EventsChart.propTypes = {
+    
+};
+
+export default EventsChart;

ui/src/components/TableUsers/index.jsx

@@ -7,10 +7,10 @@ import Service from "../../utils/Service";
 //import Tag from 'antd/lib/tag';
 
 
-const TableUsers = ({ onView }) => {
+const TableUsers = ({ onCalendar, onList }) => {
     const [users, setUsers] = useState([]);
     const [loading, setLoading] = useState(false);
-    const [userEvents, setUserEvents] = useState(null);
+    //const [userEvents, setUserEvents] = useState(null);
 
     useEffect(() => {
         Service.call({
@@ -41,7 +41,7 @@ const TableUsers = ({ onView }) => {
             title: "Events",
             render: (text, record, index) => (
                 <div>
-                    {<Button onClick={() => { onView(record) }}>Open Calendar</Button>}
+                    {<Button onClick={() => { onCalendar(record) }}>Open Calendar</Button>}
 
                 </div>
 
@@ -51,7 +51,7 @@ const TableUsers = ({ onView }) => {
             title: "Lists of Tasks",
             render: (text, record, index) => (
                 <div>
-                    {<Button onClick={() => { console.log('tasklist') }}>View</Button>}
+                    {<Button onClick={() => { onList() }}>View</Button>}
                 </div>
 
             )
@@ -60,7 +60,7 @@ const TableUsers = ({ onView }) => {
             title: "Reminders",
             render: (text, record, index) => (
                 <div>
-                   {<Button onClick={() => { console.log('reminders') }}>View</Button>}
+                   {<Button>View</Button>}
                 </div>
 
             )

ui/src/components/UserDrawer/index.jsx

@@ -0,0 +1,32 @@
+import React, { useState, useEffect } from "react";
+import PropTypes from "prop-types";
+
+import Drawer from 'antd/lib/drawer';
+
+const UserDrawer = ({visible, onClose}) => {
+
+    return (
+        <>
+          <Drawer
+            title="Basic Drawer"
+            placement="right"
+            closable={true}
+            onClose={onClose}
+            visible={visible}
+          >
+            <p>Some contents...</p>
+            <p>Some contents...</p>
+            <p>Some contents...</p>
+          </Drawer>
+        </>
+      );
+
+
+}
+
+UserDrawer.propTypes = {
+    visible: PropTypes.bool.isRequired,
+    
+};
+
+export default UserDrawer;

ui/src/containers/DashboardContainer/index.jsx

@@ -1,10 +1,16 @@
 import React, { Component } from "react";
-import MyButton from "../../components/MyButton/index.jsx";
-import Spin from 'antd/lib/spin';
-import notification from 'antd/lib/notification';
 import "./index.less";
+
+import Spin from 'antd/lib/spin';
+import Tabs from 'antd/lib/tabs';
+
 import TableUsers from "../../components/TableUsers/index.jsx";
 import UserCalendar from "../../components/UserCalendar/index.jsx";
+import UserDrawer from '../../components/UserDrawer/index.jsx';
+import EventsChart from '../../components/EventsChart/index.jsx';
+import MyButton from "../../components/MyButton/index.jsx";
+
+const { TabPane } = Tabs;
 
 export default class DashboardContainer extends Component {
     constructor(props) {
@@ -13,16 +19,17 @@ export default class DashboardContainer extends Component {
             counter: 0,
             title: 'Bom Dia!',
             loading: false,
-            user: null
+            user: null,
+            visible: false
         };
+
         this.button = React.createRef();
         this.click = this.click.bind(this);
         this.openCalendar = this.openCalendar.bind(this);
         this.closeCalendar = this.closeCalendar.bind(this);
-    }
-
-    
-      
+        this.showDrawer = this.showDrawer.bind(this);
+        this.closeDrawer = this.closeDrawer.bind(this);
+    }    
 
     componentWillMount() {
         console.log("will mount")
@@ -44,8 +51,18 @@ export default class DashboardContainer extends Component {
   
     click() {
         this.setState({ counter: this.state.counter + 1 });
+        console.log('visible: ', this.state.visible);
     }
 
+    
+    showDrawer() {
+        this.setState({visible: true});
+      };
+
+    closeDrawer() {
+        this.setState({visible: false});
+      };
+      
     openCalendar(user) {
         this.setState({ user });
     }
@@ -56,7 +73,7 @@ export default class DashboardContainer extends Component {
 
     render() {
         console.log("render");
-        const { counter, title, loading, user } = this.state;
+        const { counter, title, loading, user, visible } = this.state;
         if (loading) {
             return <Spin/>;
         }
@@ -71,11 +88,28 @@ export default class DashboardContainer extends Component {
         }
         return (
             <div className="my-dashboard">
-                
-                <h1>Table Users</h1>
-                <TableUsers onView={ this.openCalendar } />
+                <UserDrawer 
+                    visible={visible}
+                    onClose={this.closeDrawer}
+                />
+
+                <Tabs type="card">
+                    <TabPane tab="Table Users" key="1">
+                        <TableUsers 
+                            onCalendar={ this.openCalendar } 
+                            onList = { this.showDrawer }
+                        />
+                    </TabPane>
+
+                    <TabPane tab="Statistics" key="2">
+                        <EventsChart />
+                    </TabPane>
+
+                    <TabPane tab="3" key="3">
+                        Content of Tab Pane 3
+                    </TabPane>
+                </Tabs>
 
-                <h1>Table...</h1>
                 <div className="my-dashboard__button">
                     <MyButton
                         mainRef={ this.button }