License updated to GPLv3

🧲 New features
Custom user role permissions
Employee edit form updated
Employee daily task list
Attendance and employee distribution charts on dashboard
Improvements to company structure and company assets module
Improved tables for displaying data in several modules
Faster data loading (specially for employee module)
Initials based profile pictures
Re-designed login page
Re-designed user profile page
Improvements to filtering
New REST endpoints for employee qualifications

🐛 Bug fixes
Fixed, issue with managers being able to create performance reviews for employees who are not their direct reports
Fixed, issues related to using full profile image instead of using smaller version of profile image
Changing third gender to other
Improvements and fixes for internal frontend data caching

web/admin/src/dashboard/lib.js

@@ -1,8 +1,16 @@
+/* global document */
 /*
  Copyright (c) 2018 [Glacies UG, Berlin, Germany] (http://glacies.de)
  Developer: Thilina Hasantha (http://lk.linkedin.com/in/thilinah | https://github.com/thilinah)
  */
+import React from 'react';
+import {
+  Space, Card, Spin, Row, Col,
+} from 'antd';
+import { Donut, Pie } from '@antv/g2plot';
+import ReactDOM from 'react-dom';
 import AdapterBase from '../../../api/AdapterBase';
+import TaskList from '../../../components/TaskList';
 
 class DashboardAdapter extends AdapterBase {
   getDataMapping() {
@@ -19,6 +27,7 @@ class DashboardAdapter extends AdapterBase {
 
 
   get(callBackData) {
+    this.initializeReactDashboard();
   }
 
 
@@ -51,6 +60,191 @@ class DashboardAdapter extends AdapterBase {
   getInitDataFailCallBack(callBackData) {
 
   }
+
+  getSpinner() {
+    return (
+      <Row>
+        <Col span={8}> </Col>
+        <Col span={8}><Spin size="large" /></Col>
+        <Col span={8}> </Col>
+      </Row>
+    );
+  }
+
+  initializeReactDashboard() {
+    //this.drawCompanyLeaveEntitlementChart();
+    this.drawOnlineOfflineEmployeeChart();
+    this.drawEmployeeDistributionChart();
+    this.buildTaskList();
+  }
+
+  buildTaskList() {
+    document.getElementById('TaskListWrap').style.display = 'none';
+    ReactDOM.render(
+      this.getSpinner(),
+      document.getElementById('TaskListLoader'),
+    );
+    this.apiClient
+      .get('tasks')
+      .then((data) => {
+        document.getElementById('TaskListWrap').style.display = 'block';
+        ReactDOM.render(
+          <TaskList tasks={data.data} />,
+          document.getElementById('TaskList'),
+        );
+
+        ReactDOM.unmountComponentAtNode(document.getElementById('TaskListLoader'));
+      });
+  }
+
+  drawEmployeeDistributionChart() {
+    document.getElementById('EmployeeDistributionChart').style.display = 'none';
+    ReactDOM.render(
+      this.getSpinner(),
+      document.getElementById('EmployeeDistributionChartLoader'),
+    );
+
+    this.apiClient
+      .get('charts/employees-distribution')
+      .then((data) => {
+        const chartData = Object.keys(data.data).map((key) => ({
+          type: key.charAt(0).toUpperCase() + key.slice(1),
+          value: data.data[key],
+        }));
+        const props = {
+          forceFit: true,
+          title: {
+            visible: true,
+            text: 'Employee Distribution',
+          },
+          description: {
+            visible: false,
+            text: '',
+          },
+          statistic: {
+            visible: true,
+            content: {
+              value: chartData.reduce((acc, item) => acc + item.value, 0),
+              name: 'Total',
+            },
+          },
+          legend: {
+            visible: true,
+            position: 'bottom-center',
+          },
+          radius: 0.8,
+          padding: 'auto',
+          data: chartData,
+          angleField: 'value',
+          colorField: 'type',
+          label: {
+            visible: true,
+            type: 'outer',
+            offset: 20,
+          },
+        };
+        ReactDOM.unmountComponentAtNode(document.getElementById('EmployeeDistributionChartLoader'));
+        document.getElementById('EmployeeDistributionChart').style.display = 'block';
+        const plot = new Pie(document.getElementById('EmployeeDistributionChart'), props);
+        plot.render();
+      });
+  }
+
+  drawOnlineOfflineEmployeeChart() {
+    document.getElementById('EmployeeOnlineOfflineChart').style.display = 'none';
+    ReactDOM.render(
+      this.getSpinner(),
+      document.getElementById('EmployeeOnlineOfflineChartLoader'),
+    );
+
+    this.apiClient
+      .get('charts/employee-check-ins')
+      .then((data) => {
+        const chartData = Object.keys(data.data).map((key) => ({
+          type: key,
+          value: data.data[key],
+        }));
+        const props = {
+          forceFit: true,
+          title: {
+            visible: true,
+            text: 'Employee Check-Ins',
+          },
+          description: {
+            visible: false,
+            text: '',
+          },
+          statistic: {
+            visible: true,
+            content: {
+              value: chartData.reduce((acc, item) => acc + item.value, 0),
+              name: 'Total',
+            },
+          },
+          legend: {
+            visible: true,
+            position: 'bottom-center',
+          },
+          radius: 0.8,
+          padding: 'auto',
+          data: chartData,
+          angleField: 'value',
+          colorField: 'type',
+        };
+        ReactDOM.unmountComponentAtNode(document.getElementById('EmployeeOnlineOfflineChartLoader'));
+        document.getElementById('EmployeeOnlineOfflineChart').style.display = 'block';
+        const donutPlot = new Donut(document.getElementById('EmployeeOnlineOfflineChart'), props);
+        donutPlot.render();
+      });
+  }
+
+  drawCompanyLeaveEntitlementChart() {
+    document.getElementById('CompanyLeaveEntitlementChart').style.display = 'none';
+    ReactDOM.render(
+      this.getSpinner(),
+      document.getElementById('CompanyLeaveEntitlementChartLoader'),
+    );
+
+    this.apiClient
+      .get('charts/company-leave-entitlement')
+      .then((data) => {
+        const chartData = Object.keys(data.data).map((key) => ({
+          type: key,
+          value: data.data[key],
+        }));
+        const props = {
+          forceFit: true,
+          title: {
+            visible: true,
+            text: 'Company Vacation Usage',
+          },
+          description: {
+            visible: false,
+            text: '',
+          },
+          statistic: {
+            visible: true,
+            content: {
+              value: chartData.reduce((acc, item) => acc + item.value, 0),
+              name: 'Total',
+            },
+          },
+          legend: {
+            visible: true,
+            position: 'bottom-center',
+          },
+          radius: 0.8,
+          padding: 'auto',
+          data: chartData,
+          angleField: 'value',
+          colorField: 'type',
+        };
+        ReactDOM.unmountComponentAtNode(document.getElementById('CompanyLeaveEntitlementChartLoader'));
+        document.getElementById('CompanyLeaveEntitlementChart').style.display = 'block';
+        const donutPlot = new Donut(document.getElementById('CompanyLeaveEntitlementChart'), props);
+        donutPlot.render();
+      });
+  }
 }
 
 module.exports = { DashboardAdapter };