Upload 'WANHEDA' Front End implementation files

WANHEDA_Front_End/src/App.js

+import React, { Component } from "react";
+import { HashRouter, Route, Switch } from "react-router-dom";
+import "./scss/style.scss";
+import { ToastContainer } from "react-toastify";
+import { connect } from "react-redux";
+
+const loading = (
+  <div className="pt-3 text-center">
+    <div className="sk-spinner sk-spinner-pulse"></div>
+  </div>
+);
+
+// Containers
+const TheLayout = React.lazy(() => import("./containers/TheLayout"));
+
+// Pages
+const Login = React.lazy(() => import("./views/users/Login"));
+const Register = React.lazy(() => import("./views/users/Register"));
+const Page404 = React.lazy(() => import("./views/pages/page404/Page404"));
+const Page500 = React.lazy(() => import("./views/pages/page500/Page500"));
+
+class App extends Component {
+  render() {
+    if (this.props.user.username) {
+      return (
+        <HashRouter>
+          <React.Suspense fallback={loading}>
+            <Switch>
+              <Route
+                exact
+                path="/404"
+                name="Page 404"
+                render={(props) => <Page404 {...props} />}
+              />
+              <Route
+                exact
+                path="/500"
+                name="Page 500"
+                render={(props) => <Page500 {...props} />}
+              />
+              <Route
+                path="/"
+                name="Home"
+                render={(props) => <TheLayout {...props} />}
+              />
+            </Switch>
+            <ToastContainer />
+          </React.Suspense>
+        </HashRouter>
+      );
+    } else {
+      return (
+        <HashRouter>
+          <React.Suspense fallback={loading}>
+            <Switch>
+              <Route
+                exact
+                path="/login"
+                name="Login Page"
+                render={(props) => <Login {...props} />}
+              />
+              <Route
+                exact
+                path="/register"
+                name="Register Page"
+                render={(props) => <Register {...props} />}
+              />
+              <Route
+                exact
+                path="/404"
+                name="Page 404"
+                render={(props) => <Page404 {...props} />}
+              />
+              <Route
+                exact
+                path="/500"
+                name="Page 500"
+                render={(props) => <Page500 {...props} />}
+              />
+            </Switch>
+            <ToastContainer />
+          </React.Suspense>
+        </HashRouter>
+      );
+    }
+  }
+}
+
+const mapStateToProps = (state) => {
+  return {
+    user: state.userData.user,
+  };
+};
+
+export default connect(mapStateToProps, null)(App);

WANHEDA_Front_End/src/App.test.js

+import React from 'react'
+import { shallow } from 'enzyme/build'
+import App from './App'
+import ChartLineSimple from './views/charts/ChartLineSimple'
+import Dashboard from './views/dashboard/Dashboard.js'
+
+
+it('mounts without crashing', () => {
+  const wrapper = shallow(<App/>)
+  wrapper.unmount()
+})
+
+it('mounts dashboard without crashing', () => {
+  const wrapper = shallow(<Dashboard/>)
+  wrapper.unmount()
+})
+
+it('mounts charts without crashing', () => {
+  const wrapper = shallow(<ChartLineSimple/> )
+  wrapper.unmount()
+})

WANHEDA_Front_End/src/action/blacklist.actions.js

+import {
+  GET_BLACK_LIST_ERROR,
+  GET_BLACK_LIST_SUCCESS,
+  ADD_TO_BLACK_LIST_SUCCESS,
+  ADD_TO_BLACK_LIST_ERROR,
+} from "./types";
+import { SERVER_URL } from "../constant";
+import axios from "axios";
+import { toast } from "react-toastify";
+
+export const getBlackListSuccess = (data) => {
+  return {
+    type: GET_BLACK_LIST_SUCCESS,
+    payload: data,
+  };
+};
+
+export const getBlackListError = (data) => {
+  return {
+    type: GET_BLACK_LIST_ERROR,
+    payload: data,
+  };
+};
+
+export const getBlackList = () => {
+  return (dispatch) => {
+    return axios
+      .get(`${SERVER_URL}/blacklist/getall`)
+      .then((response) => {
+        dispatch(getBlackListSuccess(response.data.result));
+        toast.success(response.data.message);
+        dispatch(getBlackListError(""));
+      })
+      .catch((error) => {
+        dispatch(getBlackListError("Error in getting the blacklist"));
+      });
+  };
+};
+
+// ADD TO BLACKLIST ----------------------------------------
+export const addToBlackListSuccess = (data) => {
+  return {
+    type: ADD_TO_BLACK_LIST_SUCCESS,
+    payload: data,
+  };
+};
+
+export const addToBlackListError = (data) => {
+  return {
+    type: ADD_TO_BLACK_LIST_ERROR,
+    payload: data,
+  };
+};
+
+export const addToBlackList = (ip) => {
+  const data = { ip: ip.ip };
+  return (dispatch) => {
+    return axios
+      .post(`${SERVER_URL}/blacklist/add`, data)
+      .then((response) => {
+        dispatch(addToBlackListSuccess(ip));
+        toast.success(response.data.message);
+        dispatch(addToBlackListError(""));
+      })
+      .catch((error) => {
+        dispatch(addToBlackListError("Error in in adding to whitelist"));
+      });
+  };
+};

WANHEDA_Front_End/src/action/notification.actions.js

+import { GET_NOTIFICATION_SUCCESS, GET_NOTIFICATION_ERROR } from "./types";
+import { SERVER_URL } from "../constant";
+import axios from "axios";
+import { toast } from "react-toastify";
+
+export const getNotificationSuccess = (data) => {
+  return {
+    type: GET_NOTIFICATION_SUCCESS,
+    payload: data,
+  };
+};
+
+export const getNotificationError = (data) => {
+  return {
+    type: GET_NOTIFICATION_ERROR,
+    payload: data,
+  };
+};
+
+export const getNotification = () => {
+  return (dispatch) => {
+    return axios
+      .get(`${SERVER_URL}/notification/getall`)
+      .then((response) => {
+        dispatch(getNotificationSuccess(response.data.result));
+        toast.success(response.data.message);
+        dispatch(getNotificationError(""));
+      })
+      .catch((error) => {
+        dispatch(getNotificationError("Error in getting the notifications"));
+      });
+  };
+};

WANHEDA_Front_End/src/action/types.js

+//USER ACTION TYPES--------------------------------
+export const USER_LOGIN_SUCCESS = "USER_LOGIN_SUCCESS";
+export const USER_LOGIN_FAILED = "USER_LOGIN_FAILED";
+export const USER_LOGIN_ERROR = "USER_LOGIN_ERROR";
+
+export const USER_SIGNUP_SUCCESS = "USER_SIGNUP_SUCCESS";
+export const USER_SIGNUP_FAILED = "USER_SIGNUP_FAILED";
+export const USER_SIGNUP_ERROR = "USER_SIGNUP_ERROR";
+
+export const GET_USER_PROFILE_SUCCESS = "GET_USER_PROFILE_SUCCESS";
+export const GET_USER_PROFILE_ERROR = "GET_USER_PROFILE_ERROR";
+
+export const USER_LOGOUT_SUCCESS = "USER_LOGOUT_SUCCESS";
+
+//NOTIFICATION ACTION TYPES--------------------------------
+export const GET_NOTIFICATION_SUCCESS = "GET_NOTIFICATION_SUCCESS";
+export const GET_NOTIFICATION_ERROR = "GET_NOTIFICATION_ERROR";
+
+//WHITE LIST ACTION TYPES--------------------------------
+export const GET_WHITE_LIST_SUCCESS = "GET_WHITE_LIST_SUCCESS";
+export const GET_WHITE_LIST_ERROR = "GET_WHITE_LIST_ERROR";
+
+export const ADD_TO_WHITE_LIST_SUCCESS = "ADD_TO_WHITE_LIST_SUCCESS";
+export const ADD_TO_WHITE_LIST_ERROR = "ADD_TO_WHITE_LIST_ERROR";
+
+//Black LIST ACTION TYPES--------------------------------
+export const GET_BLACK_LIST_SUCCESS = "GET_BLACK_LIST_SUCCESS";
+export const GET_BLACK_LIST_ERROR = "GET_BLACK_LIST_ERROR";
+
+export const ADD_TO_BLACK_LIST_SUCCESS = "ADD_TO_BLACK_LIST_SUCCESS";
+export const ADD_TO_BLACK_LIST_ERROR = "ADD_TO_BLACK_LIST_ERROR";

WANHEDA_Front_End/src/action/user.actions.js

+import {
+  USER_LOGIN_SUCCESS,
+  USER_LOGIN_FAILED,
+  USER_LOGIN_ERROR,
+  USER_SIGNUP_SUCCESS,
+  USER_SIGNUP_FAILED,
+  USER_SIGNUP_ERROR,
+  USER_LOGOUT_SUCCESS,
+  GET_USER_PROFILE_SUCCESS,
+  GET_USER_PROFILE_ERROR,
+} from "./types";
+import { SERVER_URL, API_ENDPOINT, AUTH_ENDPOINT } from "../constant";
+import axios from "axios";
+import { history } from "../index";
+import { toast } from "react-toastify";
+
+//LOGIN-----------------------------
+export const userLoginSuccess = (data) => {
+  return {
+    type: USER_LOGIN_SUCCESS,
+    payload: data,
+  };
+};
+
+export const userLoginFailed = (data) => {
+  return {
+    type: USER_LOGIN_FAILED,
+    payload: data,
+  };
+};
+
+export const userLoginError = (data) => {
+  return {
+    type: USER_LOGIN_ERROR,
+    payload: data,
+  };
+};
+
+export const userLogin = (user) => {
+  const data = {
+    email: user.email,
+    password: user.password,
+  };
+
+  return (dispatch) => {
+    return axios
+      .post(`${SERVER_URL}/user/login`, data)
+      .then((response) => {
+        if (!response.data.result.username) {
+          dispatch(userLoginFailed(response.data.result));
+          return;
+        }
+        const headers = {
+          username: response.data.result.username,
+        };
+        data.headers = headers;
+        data.username = response.data.result.username;
+        dispatch(userLoginFailed(""));
+        dispatch(userLoginSuccess(data));
+        toast.success("Loged successfully");
+        history.push("/");
+      })
+      .catch((error) => {
+        dispatch(userLoginFailed(error.message));
+        toast.error(error.message, {
+          position: "top-center",
+        });
+      });
+  };
+};
+
+//LOGOUT-------------------------------------
+export const userLogoutSuccess = () => {
+  return {
+    type: USER_LOGOUT_SUCCESS,
+  };
+};
+
+export const userLogout = () => {
+  return (dispatch) => {
+    dispatch(userLogoutSuccess());
+    history.push("/login");
+  };
+};
+
+//SIGN UP-----------------------------
+export const userSignUpSuccess = (data) => {
+  return {
+    type: USER_SIGNUP_SUCCESS,
+    payload: data,
+  };
+};
+
+export const userSignUpFailed = (data) => {
+  return {
+    type: USER_SIGNUP_FAILED,
+    payload: data,
+  };
+};
+
+export const userSignUpError = (data) => {
+  return {
+    type: USER_SIGNUP_ERROR,
+    payload: data,
+  };
+};
+
+export const userSignUp = (user) => {
+  const data = {
+    username: user.username,
+    email: user.email,
+    password: user.password,
+  };
+  return (dispatch) => {
+    return axios
+      .post(`${SERVER_URL}/user/register`, data)
+      .then((response) => {
+        const headers = {
+          username: user.username,
+        };
+        data.headers = headers;
+        dispatch(userSignUpError(""));
+        dispatch(userSignUpSuccess(data));
+        toast.success("Account Created Successfully");
+        history.push("/");
+      })
+      .catch((error) => {
+        dispatch(userSignUpError(error.response.data.message));
+        toast.error(error.response.data.message, {
+          position: "top-center",
+        });
+      });
+  };
+};
+//GET PROFILE DETAILS-----------------------------
+export const getProfileSuccess = (data) => {
+  return {
+    type: GET_USER_PROFILE_SUCCESS,
+    payload: data,
+  };
+};
+
+export const getProfileError = (data) => {
+  return {
+    type: GET_USER_PROFILE_ERROR,
+    payload: data,
+  };
+};
+
+export const getProfile = (header) => {
+  return (dispatch) => {
+    return axios
+      .get(`${SERVER_URL}/${AUTH_ENDPOINT}/profile`, {
+        headers: header,
+      })
+      .then((response) => {
+        dispatch(getProfileError(""));
+        dispatch(getProfileSuccess(response.data));
+      })
+      .catch((error) => {
+        dispatch(getProfileError(error.message));
+        toast.error(error.message, {
+          position: "top-center",
+        });
+      });
+  };
+};

WANHEDA_Front_End/src/action/whitelist.actions.js

+import {
+  GET_WHITE_LIST_ERROR,
+  GET_WHITE_LIST_SUCCESS,
+  ADD_TO_WHITE_LIST_ERROR,
+  ADD_TO_WHITE_LIST_SUCCESS,
+} from "./types";
+import { SERVER_URL } from "../constant";
+import axios from "axios";
+import { toast } from "react-toastify";
+
+//GET WHITELIST -----------------------------------------
+export const getWhiteListSuccess = (data) => {
+  return {
+    type: GET_WHITE_LIST_SUCCESS,
+    payload: data,
+  };
+};
+
+export const getWhiteListError = (data) => {
+  return {
+    type: GET_WHITE_LIST_ERROR,
+    payload: data,
+  };
+};
+
+export const getWhiteList = () => {
+  return (dispatch) => {
+    return axios
+      .get(`${SERVER_URL}/whitelist/getall`)
+      .then((response) => {
+        dispatch(getWhiteListSuccess(response.data.result));
+        toast.success(response.data.message);
+        dispatch(getWhiteListError(""));
+      })
+      .catch((error) => {
+        dispatch(getWhiteListError("Error in getting the whitelist"));
+      });
+  };
+};
+
+// ADD TO WHITELIST ----------------------------------------
+export const addToWhiteListSuccess = (data) => {
+  return {
+    type: ADD_TO_WHITE_LIST_SUCCESS,
+    payload: data,
+  };
+};
+
+export const addToWhiteListError = (data) => {
+  return {
+    type: ADD_TO_WHITE_LIST_ERROR,
+    payload: data,
+  };
+};
+
+export const addToWhiteList = (ip) => {
+  const data = { ip: ip.ip };
+  return (dispatch) => {
+    return axios
+      .post(`${SERVER_URL}/whitelist/add`, data)
+      .then((response) => {
+        dispatch(addToWhiteListSuccess(ip));
+        toast.success(response.data.message);
+        dispatch(addToWhiteListError(""));
+      })
+      .catch((error) => {
+        dispatch(addToWhiteListError("Error in in adding to whitelist"));
+      });
+  };
+};

WANHEDA_Front_End/src/assets/icons/index.js

+import { sygnet } from './sygnet'
+import { logo } from './logo'
+import { logoNegative } from './logo-negative'
+
+import {
+  cibSkype,
+  cibFacebook,
+  cibTwitter,
+  cibLinkedin,
+  cibFlickr,
+  cibTumblr,
+  cibXing,
+  cibGithub,
+  cibStackoverflow,
+  cibYoutube,
+  cibDribbble,
+  cibInstagram,
+  cibPinterest,
+  cibVk,
+  cibYahoo,
+  cibBehance,
+  cibReddit,
+  cibVimeo,
+  cibCcMastercard,
+  cibCcVisa,
+  cibStripe,
+  cibPaypal,
+  cibGooglePay,
+  cibCcAmex
+} from '@coreui/icons'
+import {
+  cifUs,
+  cifBr,
+  cifIn,
+  cifFr,
+  cifEs,
+  cifPl
+} from '@coreui/icons'
+import {
+  cilAlignCenter,
+  cilAlignLeft,
+  cilAlignRight,
+  cilApplicationsSettings,
+  cilArrowRight,
+  cilArrowTop,
+  cilAsterisk,
+  cilBan,
+  cilBasket,
+  cilBell,
+  cilBold,
+  cilBookmark,
+  cilCalculator,
+  cilCalendar,
+  cilCloudDownload,
+  cilChartPie,
+  cilCheck,
+  cilChevronBottom,
+  cilChevronLeft,
+  cilChevronRight,
+  cilChevronTop,
+  cilCircle,
+  cilCheckCircle,
+  cilCode,
+  cilCommentSquare,
+  cilCreditCard,
+  cilCursor,
+  cilCursorMove,
+  cilDrop,
+  cilDollar,
+  cilEnvelopeClosed,
+  cilEnvelopeLetter,
+  cilEnvelopeOpen,
+  cilEuro,
+  cilGlobeAlt,
+  cilGrid,
+  cilFile,
+  cilFullscreen,
+  cilFullscreenExit,
+  cilGraph,
+  cilHome,
+  cilInbox,
+  cilIndentDecrease,
+  cilIndentIncrease,
+  cilInputPower,
+  cilItalic,
+  cilJustifyCenter,
+  cilJustifyLeft,
+  cilLaptop,
+  cilLayers,
+  cilLightbulb,
+  cilList,
+  cilListNumbered,
+  cilListRich,
+  cilLocationPin,
+  cilLockLocked,
+  cilMagnifyingGlass,
+  cilMap,
+  cilMoon,
+  cilNotes,
+  cilOptions,
+  cilPaperclip,
+  cilPaperPlane,
+  cilPencil,
+  cilPeople,
+  cilPhone,
+  cilPrint,
+  cilPuzzle,
+  cilSave,
+  cilScrubber,
+  cilSettings,
+  cilShare,
+  cilShareAll,
+  cilShareBoxed,
+  cilShieldAlt,
+  cilSpeech,
+  cilSpeedometer,
+  cilSpreadsheet,
+  cilStar,
+  cilSun,
+  cilTags,
+  cilTask,
+  cilTrash,
+  cilUnderline,
+  cilUser,
+  cilUserFemale,
+  cilUserFollow,
+  cilUserUnfollow,
+  cilX,
+  cilXCircle,
+  cilWarning
+} from '@coreui/icons'
+
+export const icons = Object.assign({}, {
+  sygnet,
+  logo,
+  logoNegative
+}, {
+  cilAlignCenter,
+  cilAlignLeft,
+  cilAlignRight,
+  cilApplicationsSettings,
+  cilArrowRight,
+  cilArrowTop,
+  cilAsterisk,
+  cilBan,
+  cilBasket,
+  cilBell,
+  cilBold,
+  cilBookmark,
+  cilCalculator,
+  cilCalendar,
+  cilCloudDownload,
+  cilChartPie,
+  cilCheck,
+  cilChevronBottom,
+  cilChevronLeft,
+  cilChevronRight,
+  cilChevronTop,
+  cilCircle,
+  cilCheckCircle,
+  cilCode,
+  cilCommentSquare,
+  cilCreditCard,
+  cilCursor,
+  cilCursorMove,
+  cilDrop,
+  cilDollar,
+  cilEnvelopeClosed,
+  cilEnvelopeLetter,
+  cilEnvelopeOpen,
+  cilEuro,
+  cilGlobeAlt,
+  cilGrid,
+  cilFile,
+  cilFullscreen,
+  cilFullscreenExit,
+  cilGraph,
+  cilHome,
+  cilInbox,
+  cilIndentDecrease,
+  cilIndentIncrease,
+  cilInputPower,
+  cilItalic,
+  cilJustifyCenter,
+  cilJustifyLeft,
+  cilLaptop,
+  cilLayers,
+  cilLightbulb,
+  cilList,
+  cilListNumbered,
+  cilListRich,
+  cilLocationPin,
+  cilLockLocked,
+  cilMagnifyingGlass,
+  cilMap,
+  cilMoon,
+  cilNotes,
+  cilOptions,
+  cilPaperclip,
+  cilPaperPlane,
+  cilPencil,
+  cilPeople,
+  cilPhone,
+  cilPrint,
+  cilPuzzle,
+  cilSave,
+  cilScrubber,
+  cilSettings,
+  cilShare,
+  cilShareAll,
+  cilShareBoxed,
+  cilShieldAlt,
+  cilSpeech,
+  cilSpeedometer,
+  cilSpreadsheet,
+  cilStar,
+  cilSun,
+  cilTags,
+  cilTask,
+  cilTrash,
+  cilUnderline,
+  cilUser,
+  cilUserFemale,
+  cilUserFollow,
+  cilUserUnfollow,
+  cilX,
+  cilXCircle,
+  cilWarning
+}, {
+  cifUs,
+  cifBr,
+  cifIn,
+  cifFr,
+  cifEs,
+  cifPl
+}, {
+  cibSkype,
+  cibFacebook,
+  cibTwitter,
+  cibLinkedin,
+  cibFlickr,
+  cibTumblr,
+  cibXing,
+  cibGithub,
+  cibStackoverflow,
+  cibYoutube,
+  cibDribbble,
+  cibInstagram,
+  cibPinterest,
+  cibVk,
+  cibYahoo,
+  cibBehance,
+  cibReddit,
+  cibVimeo,
+  cibCcMastercard,
+  cibCcVisa,
+  cibStripe,
+  cibPaypal,
+  cibGooglePay,
+  cibCcAmex
+})

WANHEDA_Front_End/src/assets/icons/logo-negative.js

+export const logoNegative = ['608 134', `
+  <title>coreui react pro logo</title>
+  <g>
+    <g style="fill:#80d0ff;">
+      <path d="M362.0177,90.1512,353.25,69.4149a.2507.2507,0,0,0-.2559-.1914H343.01a.2263.2263,0,0,0-.2559.2559V90.0233a.5657.5657,0,0,1-.64.64h-1.2163a.5652.5652,0,0,1-.64-.64V46.5028a.5655.5655,0,0,1,.64-.64H353.442a9.9792,9.9792,0,0,1,7.7437,3.2324A12.2,12.2,0,0,1,364.13,57.64a12.4389,12.4389,0,0,1-2.24,7.584,9.37,9.37,0,0,1-6.08,3.7441c-.1709.086-.2139.1915-.128.3194l8.7041,20.6084.064.2558q0,.5127-.5757.5118h-1.1523A.703.703,0,0,1,362.0177,90.1512ZM342.754,48.3593v18.496a.2259.2259,0,0,0,.2559.2559h10.3037a7.6713,7.6713,0,0,0,6.0166-2.5918,9.8807,9.8807,0,0,0,2.3037-6.8164,10.2875,10.2875,0,0,0-2.272-6.9756,7.6033,7.6033,0,0,0-6.0483-2.624H343.01A.2263.2263,0,0,0,342.754,48.3593Z"/>
+      <path d="M401.3263,48.1034H381.2945a.2262.2262,0,0,0-.2558.2559v18.496a.2259.2259,0,0,0,.2558.2559h13.8238a.5664.5664,0,0,1,.6406.64v.96a.5663.5663,0,0,1-.6406.6406H381.2945a.2263.2263,0,0,0-.2558.2559v18.56a.2258.2258,0,0,0,.2558.2558h20.0318a.5671.5671,0,0,1,.6406.6407v.96a.566.566,0,0,1-.6406.64H379.1827a.5653.5653,0,0,1-.64-.64V46.5028a.5656.5656,0,0,1,.64-.64h22.1436a.5664.5664,0,0,1,.6406.64v.96A.5663.5663,0,0,1,401.3263,48.1034Z"/>
+      <path d="M439.047,90.1512l-2.4317-8.832a.2971.2971,0,0,0-.32-.1924H419.5274a.2957.2957,0,0,0-.32.1924l-2.3681,8.7676a.6577.6577,0,0,1-.7036.5762H414.919a.5385.5385,0,0,1-.5756-.7041l12.0317-43.584a.6436.6436,0,0,1,.7041-.5117h1.6a.6442.6442,0,0,1,.7041.5117l12.16,43.584.0644.1923q0,.5127-.64.5118h-1.2163A.6428.6428,0,0,1,439.047,90.1512ZM419.9435,78.9188a.3031.3031,0,0,0,.2236.0967h15.4883a.3048.3048,0,0,0,.2236-.0967c.0645-.0635.0742-.1162.0322-.1592l-7.872-28.9287c-.043-.0849-.086-.1279-.128-.1279s-.0859.043-.1279.1279L419.9112,78.76C419.8683,78.8026,419.879,78.8553,419.9435,78.9188Z"/>
+      <path d="M456.6017,87.911a11.6372,11.6372,0,0,1-3.3277-8.7041V57.1913a11.4158,11.4158,0,0,1,3.36-8.5762,12.0941,12.0941,0,0,1,8.8-3.2637,12.2566,12.2566,0,0,1,8.8643,3.2315,11.3927,11.3927,0,0,1,3.36,8.6084v.64a.5663.5663,0,0,1-.6406.6407l-1.28.0634q-.6408,0-.64-.5761v-.8321a9.289,9.289,0,0,0-2.6558-6.9121,10.6734,10.6734,0,0,0-14.0161,0,9.2854,9.2854,0,0,0-2.6563,6.9121V79.3993a9.2808,9.2808,0,0,0,2.6563,6.9121,10.67,10.67,0,0,0,14.0161,0,9.2843,9.2843,0,0,0,2.6558-6.9121v-.7686q0-.5757.64-.5752l1.28.0635a.5667.5667,0,0,1,.6406.6406v.5118a11.4952,11.4952,0,0,1-3.36,8.64,13.6227,13.6227,0,0,1-17.6963,0Z"/>
+      <path d="M514.4376,46.5028v.96a.5658.5658,0,0,1-.64.6406H503.046a.2263.2263,0,0,0-.2559.2559v41.664a.566.566,0,0,1-.6406.64h-1.2158a.5652.5652,0,0,1-.64-.64V48.3593a.2266.2266,0,0,0-.2558-.2559H489.8619a.5656.5656,0,0,1-.64-.6406v-.96a.5656.5656,0,0,1,.64-.64H513.798A.5658.5658,0,0,1,514.4376,46.5028Z"/>
+      <path d="M522.0665,89.5116a2.8385,2.8385,0,0,1-.8-2.0488,2.9194,2.9194,0,0,1,.8-2.1114,2.7544,2.7544,0,0,1,2.08-.832,2.8465,2.8465,0,0,1,2.9438,2.9434,2.7541,2.7541,0,0,1-.832,2.08,2.9221,2.9221,0,0,1-2.1118.8008A2.754,2.754,0,0,1,522.0665,89.5116Z"/>
+      <path d="M542.4054,88.0077a11.3123,11.3123,0,0,1-3.2-8.416v-5.44a.5656.5656,0,0,1,.64-.64h1.2158a.5661.5661,0,0,1,.64.64v5.5039a9.1424,9.1424,0,0,0,2.5283,6.72,8.9745,8.9745,0,0,0,6.6875,2.5605,8.7908,8.7908,0,0,0,9.28-9.28V46.5028a.5655.5655,0,0,1,.64-.64h1.2163a.566.566,0,0,1,.64.64V79.5917a11.2545,11.2545,0,0,1-3.2325,8.416,13.0618,13.0618,0,0,1-17.0556,0Z"/>
+      <path d="M580.35,88.1034a10.4859,10.4859,0,0,1-3.36-8.1279v-1.792a.5663.5663,0,0,1,.64-.6407h1.0884a.5668.5668,0,0,1,.64.6407v1.6a8.5459,8.5459,0,0,0,2.752,6.6562,10.5353,10.5353,0,0,0,7.36,2.4961,9.8719,9.8719,0,0,0,6.9761-2.3681,8.2161,8.2161,0,0,0,2.56-6.336,8.4,8.4,0,0,0-1.12-4.416,11.3812,11.3812,0,0,0-3.3281-3.3926,71.6714,71.6714,0,0,0-6.1763-3.7119,71.0479,71.0479,0,0,1-6.24-3.84,12.1711,12.1711,0,0,1-3.4238-3.68,10.2614,10.2614,0,0,1-1.28-5.3438,9.8579,9.8579,0,0,1,3.0718-7.7441,12.0122,12.0122,0,0,1,8.32-2.752q5.6954,0,8.96,3.1036a10.8251,10.8251,0,0,1,3.2642,8.2246v1.6a.5658.5658,0,0,1-.64.64h-1.1519a.5652.5652,0,0,1-.64-.64V56.8075a8.8647,8.8647,0,0,0-2.624-6.6885,9.9933,9.9933,0,0,0-7.232-2.5273,9.37,9.37,0,0,0-6.5278,2.1435,7.8224,7.8224,0,0,0-2.3682,6.1123,7.8006,7.8006,0,0,0,1.0244,4.16,10.387,10.387,0,0,0,3.0078,3.0391,62.8714,62.8714,0,0,0,5.9522,3.4882,71.0575,71.0575,0,0,1,6.72,4.2559,13.4674,13.4674,0,0,1,3.648,3.9365,10.049,10.049,0,0,1,1.28,5.1836,10.7177,10.7177,0,0,1-3.2637,8.1924q-3.2637,3.0717-8.832,3.0723Q583.71,91.1757,580.35,88.1034Z"/>
+    </g>
+
+    <g style="fill:#fff;">
+      <g>
+        <path d="M99.835,36.0577l-39-22.5167a12,12,0,0,0-12,0l-39,22.5166a12.0339,12.0339,0,0,0-6,10.3924V91.4833a12.0333,12.0333,0,0,0,6,10.3923l39,22.5167a12,12,0,0,0,12,0l39-22.5167a12.0331,12.0331,0,0,0,6-10.3923V46.45A12.0334,12.0334,0,0,0,99.835,36.0577Zm-2,55.4256a4,4,0,0,1-2,3.4641l-39,22.5167a4.0006,4.0006,0,0,1-4,0l-39-22.5167a4,4,0,0,1-2-3.4641V46.45a4,4,0,0,1,2-3.4642l39-22.5166a4,4,0,0,1,4,0l39,22.5166a4,4,0,0,1,2,3.4642Z"/>
+        <path d="M77.8567,82.0046h-2.866a4,4,0,0,0-1.9247.4934L55.7852,91.9833,35.835,80.4648V57.4872l19.95-11.5185,17.2893,9.4549a3.9993,3.9993,0,0,0,1.9192.4906h2.8632a2,2,0,0,0,2-2V51.2024a2,2,0,0,0-1.04-1.7547L59.628,38.9521a8.0391,8.0391,0,0,0-7.8428.09L31.8346,50.56a8.0246,8.0246,0,0,0-4,6.9287v22.976a8,8,0,0,0,4,6.9283l19.95,11.5186a8.0429,8.0429,0,0,0,7.8433.0879l19.19-10.5312a2,2,0,0,0,1.0378-1.7533v-2.71A2,2,0,0,0,77.8567,82.0046Z"/>
+      </g>
+      <g>
+        <path d="M172.58,45.3618a15.0166,15.0166,0,0,0-15,14.9995V77.6387a15,15,0,0,0,30,0V60.3613A15.0166,15.0166,0,0,0,172.58,45.3618Zm7,32.2769a7,7,0,0,1-14,0V60.3613a7,7,0,0,1,14,0Z"/>
+        <path d="M135.9138,53.4211a7.01,7.01,0,0,1,7.8681,6.0752.9894.9894,0,0,0,.9843.865h6.03a1.0108,1.0108,0,0,0,.9987-1.0971,15.0182,15.0182,0,0,0-15.7162-13.8837,15.2881,15.2881,0,0,0-14.2441,15.4163V77.2037A15.288,15.288,0,0,0,136.0792,92.62a15.0183,15.0183,0,0,0,15.7162-13.8842,1.0107,1.0107,0,0,0-.9987-1.0971h-6.03a.9894.9894,0,0,0-.9843.865,7.01,7.01,0,0,1-7.8679,6.0757,7.1642,7.1642,0,0,1-6.0789-7.1849V60.6057A7.1638,7.1638,0,0,1,135.9138,53.4211Z"/>
+        <path d="M218.7572,72.9277a12.1585,12.1585,0,0,0,7.1843-11.0771V58.1494A12.1494,12.1494,0,0,0,213.7921,46H196.835a1,1,0,0,0-1,1V91a1,1,0,0,0,1,1h6a1,1,0,0,0,1-1V74h6.6216l7.9154,17.4138a1,1,0,0,0,.91.5862h6.5911a1,1,0,0,0,.91-1.4138Zm-.8157-11.0771A4.1538,4.1538,0,0,1,213.7926,66h-9.8511V54h9.8511a4.1538,4.1538,0,0,1,4.1489,4.1494Z"/>
+        <path d="M260.835,46h-26a1,1,0,0,0-1,1V91a1,1,0,0,0,1,1h26a1,1,0,0,0,1-1V85a1,1,0,0,0-1-1h-19V72h13a1,1,0,0,0,1-1V65a1,1,0,0,0-1-1h-13V54h19a1,1,0,0,0,1-1V47A1,1,0,0,0,260.835,46Z"/>
+        <path d="M298.835,46h-6a1,1,0,0,0-1,1V69.6475a7.0066,7.0066,0,1,1-14,0V47a1,1,0,0,0-1-1h-6a1,1,0,0,0-1,1V69.6475a15.0031,15.0031,0,1,0,30,0V47A1,1,0,0,0,298.835,46Z"/>
+        <rect x="307.835" y="46" width="8" height="38" rx="1"/>
+      </g>
+    </g>
+  </g>
+`]

WANHEDA_Front_End/src/assets/icons/logo.js

+export const logo = ['608 134', `
+  <title>coreui react pro</title>
+  <g>
+    <g style="fill:#00a1ff">
+      <path d="M362.0177,90.1512,353.25,69.4149a.2507.2507,0,0,0-.2559-.1914H343.01a.2263.2263,0,0,0-.2559.2559V90.0233a.5657.5657,0,0,1-.64.64h-1.2163a.5652.5652,0,0,1-.64-.64V46.5028a.5655.5655,0,0,1,.64-.64H353.442a9.9792,9.9792,0,0,1,7.7437,3.2324A12.2,12.2,0,0,1,364.13,57.64a12.4389,12.4389,0,0,1-2.24,7.584,9.37,9.37,0,0,1-6.08,3.7441c-.1709.086-.2139.1915-.128.3194l8.7041,20.6084.064.2558q0,.5127-.5757.5118h-1.1523A.703.703,0,0,1,362.0177,90.1512ZM342.754,48.3593v18.496a.2259.2259,0,0,0,.2559.2559h10.3037a7.6713,7.6713,0,0,0,6.0166-2.5918,9.8807,9.8807,0,0,0,2.3037-6.8164,10.2875,10.2875,0,0,0-2.272-6.9756,7.6033,7.6033,0,0,0-6.0483-2.624H343.01A.2263.2263,0,0,0,342.754,48.3593Z"/>
+      <path d="M401.3263,48.1034H381.2945a.2262.2262,0,0,0-.2558.2559v18.496a.2259.2259,0,0,0,.2558.2559h13.8238a.5664.5664,0,0,1,.6406.64v.96a.5663.5663,0,0,1-.6406.6406H381.2945a.2263.2263,0,0,0-.2558.2559v18.56a.2258.2258,0,0,0,.2558.2558h20.0318a.5671.5671,0,0,1,.6406.6407v.96a.566.566,0,0,1-.6406.64H379.1827a.5653.5653,0,0,1-.64-.64V46.5028a.5656.5656,0,0,1,.64-.64h22.1436a.5664.5664,0,0,1,.6406.64v.96A.5663.5663,0,0,1,401.3263,48.1034Z"/>
+      <path d="M439.047,90.1512l-2.4317-8.832a.2971.2971,0,0,0-.32-.1924H419.5274a.2957.2957,0,0,0-.32.1924l-2.3681,8.7676a.6577.6577,0,0,1-.7036.5762H414.919a.5385.5385,0,0,1-.5756-.7041l12.0317-43.584a.6436.6436,0,0,1,.7041-.5117h1.6a.6442.6442,0,0,1,.7041.5117l12.16,43.584.0644.1923q0,.5127-.64.5118h-1.2163A.6428.6428,0,0,1,439.047,90.1512ZM419.9435,78.9188a.3031.3031,0,0,0,.2236.0967h15.4883a.3048.3048,0,0,0,.2236-.0967c.0645-.0635.0742-.1162.0322-.1592l-7.872-28.9287c-.043-.0849-.086-.1279-.128-.1279s-.0859.043-.1279.1279L419.9112,78.76C419.8683,78.8026,419.879,78.8553,419.9435,78.9188Z"/>
+      <path d="M456.6017,87.911a11.6372,11.6372,0,0,1-3.3277-8.7041V57.1913a11.4158,11.4158,0,0,1,3.36-8.5762,12.0941,12.0941,0,0,1,8.8-3.2637,12.2566,12.2566,0,0,1,8.8643,3.2315,11.3927,11.3927,0,0,1,3.36,8.6084v.64a.5663.5663,0,0,1-.6406.6407l-1.28.0634q-.6408,0-.64-.5761v-.8321a9.289,9.289,0,0,0-2.6558-6.9121,10.6734,10.6734,0,0,0-14.0161,0,9.2854,9.2854,0,0,0-2.6563,6.9121V79.3993a9.2808,9.2808,0,0,0,2.6563,6.9121,10.67,10.67,0,0,0,14.0161,0,9.2843,9.2843,0,0,0,2.6558-6.9121v-.7686q0-.5757.64-.5752l1.28.0635a.5667.5667,0,0,1,.6406.6406v.5118a11.4952,11.4952,0,0,1-3.36,8.64,13.6227,13.6227,0,0,1-17.6963,0Z"/>
+      <path d="M514.4376,46.5028v.96a.5658.5658,0,0,1-.64.6406H503.046a.2263.2263,0,0,0-.2559.2559v41.664a.566.566,0,0,1-.6406.64h-1.2158a.5652.5652,0,0,1-.64-.64V48.3593a.2266.2266,0,0,0-.2558-.2559H489.8619a.5656.5656,0,0,1-.64-.6406v-.96a.5656.5656,0,0,1,.64-.64H513.798A.5658.5658,0,0,1,514.4376,46.5028Z"/>
+      <path d="M522.0665,89.5116a2.8385,2.8385,0,0,1-.8-2.0488,2.9194,2.9194,0,0,1,.8-2.1114,2.7544,2.7544,0,0,1,2.08-.832,2.8465,2.8465,0,0,1,2.9438,2.9434,2.7541,2.7541,0,0,1-.832,2.08,2.9221,2.9221,0,0,1-2.1118.8008A2.754,2.754,0,0,1,522.0665,89.5116Z"/>
+      <path d="M542.4054,88.0077a11.3123,11.3123,0,0,1-3.2-8.416v-5.44a.5656.5656,0,0,1,.64-.64h1.2158a.5661.5661,0,0,1,.64.64v5.5039a9.1424,9.1424,0,0,0,2.5283,6.72,8.9745,8.9745,0,0,0,6.6875,2.5605,8.7908,8.7908,0,0,0,9.28-9.28V46.5028a.5655.5655,0,0,1,.64-.64h1.2163a.566.566,0,0,1,.64.64V79.5917a11.2545,11.2545,0,0,1-3.2325,8.416,13.0618,13.0618,0,0,1-17.0556,0Z"/>
+      <path d="M580.35,88.1034a10.4859,10.4859,0,0,1-3.36-8.1279v-1.792a.5663.5663,0,0,1,.64-.6407h1.0884a.5668.5668,0,0,1,.64.6407v1.6a8.5459,8.5459,0,0,0,2.752,6.6562,10.5353,10.5353,0,0,0,7.36,2.4961,9.8719,9.8719,0,0,0,6.9761-2.3681,8.2161,8.2161,0,0,0,2.56-6.336,8.4,8.4,0,0,0-1.12-4.416,11.3812,11.3812,0,0,0-3.3281-3.3926,71.6714,71.6714,0,0,0-6.1763-3.7119,71.0479,71.0479,0,0,1-6.24-3.84,12.1711,12.1711,0,0,1-3.4238-3.68,10.2614,10.2614,0,0,1-1.28-5.3438,9.8579,9.8579,0,0,1,3.0718-7.7441,12.0122,12.0122,0,0,1,8.32-2.752q5.6954,0,8.96,3.1036a10.8251,10.8251,0,0,1,3.2642,8.2246v1.6a.5658.5658,0,0,1-.64.64h-1.1519a.5652.5652,0,0,1-.64-.64V56.8075a8.8647,8.8647,0,0,0-2.624-6.6885,9.9933,9.9933,0,0,0-7.232-2.5273,9.37,9.37,0,0,0-6.5278,2.1435,7.8224,7.8224,0,0,0-2.3682,6.1123,7.8006,7.8006,0,0,0,1.0244,4.16,10.387,10.387,0,0,0,3.0078,3.0391,62.8714,62.8714,0,0,0,5.9522,3.4882,71.0575,71.0575,0,0,1,6.72,4.2559,13.4674,13.4674,0,0,1,3.648,3.9365,10.049,10.049,0,0,1,1.28,5.1836,10.7177,10.7177,0,0,1-3.2637,8.1924q-3.2637,3.0717-8.832,3.0723Q583.71,91.1757,580.35,88.1034Z"/>
+    </g>
+    <g style="fill:#3c4b64">
+      <g>
+        <path d="M99.835,36.0577l-39-22.5167a12,12,0,0,0-12,0l-39,22.5166a12.0339,12.0339,0,0,0-6,10.3924V91.4833a12.0333,12.0333,0,0,0,6,10.3923l39,22.5167a12,12,0,0,0,12,0l39-22.5167a12.0331,12.0331,0,0,0,6-10.3923V46.45A12.0334,12.0334,0,0,0,99.835,36.0577Zm-2,55.4256a4,4,0,0,1-2,3.4641l-39,22.5167a4.0006,4.0006,0,0,1-4,0l-39-22.5167a4,4,0,0,1-2-3.4641V46.45a4,4,0,0,1,2-3.4642l39-22.5166a4,4,0,0,1,4,0l39,22.5166a4,4,0,0,1,2,3.4642Z"/>
+        <path d="M77.8567,82.0046h-2.866a4,4,0,0,0-1.9247.4934L55.7852,91.9833,35.835,80.4648V57.4872l19.95-11.5185,17.2893,9.4549a3.9993,3.9993,0,0,0,1.9192.4906h2.8632a2,2,0,0,0,2-2V51.2024a2,2,0,0,0-1.04-1.7547L59.628,38.9521a8.0391,8.0391,0,0,0-7.8428.09L31.8346,50.56a8.0246,8.0246,0,0,0-4,6.9287v22.976a8,8,0,0,0,4,6.9283l19.95,11.5186a8.0429,8.0429,0,0,0,7.8433.0879l19.19-10.5312a2,2,0,0,0,1.0378-1.7533v-2.71A2,2,0,0,0,77.8567,82.0046Z"/>
+      </g>
+      <g>
+        <path d="M172.58,45.3618a15.0166,15.0166,0,0,0-15,14.9995V77.6387a15,15,0,0,0,30,0V60.3613A15.0166,15.0166,0,0,0,172.58,45.3618Zm7,32.2769a7,7,0,0,1-14,0V60.3613a7,7,0,0,1,14,0Z"/>
+        <path d="M135.9138,53.4211a7.01,7.01,0,0,1,7.8681,6.0752.9894.9894,0,0,0,.9843.865h6.03a1.0108,1.0108,0,0,0,.9987-1.0971,15.0182,15.0182,0,0,0-15.7162-13.8837,15.2881,15.2881,0,0,0-14.2441,15.4163V77.2037A15.288,15.288,0,0,0,136.0792,92.62a15.0183,15.0183,0,0,0,15.7162-13.8842,1.0107,1.0107,0,0,0-.9987-1.0971h-6.03a.9894.9894,0,0,0-.9843.865,7.01,7.01,0,0,1-7.8679,6.0757,7.1642,7.1642,0,0,1-6.0789-7.1849V60.6057A7.1638,7.1638,0,0,1,135.9138,53.4211Z"/>
+        <path d="M218.7572,72.9277a12.1585,12.1585,0,0,0,7.1843-11.0771V58.1494A12.1494,12.1494,0,0,0,213.7921,46H196.835a1,1,0,0,0-1,1V91a1,1,0,0,0,1,1h6a1,1,0,0,0,1-1V74h6.6216l7.9154,17.4138a1,1,0,0,0,.91.5862h6.5911a1,1,0,0,0,.91-1.4138Zm-.8157-11.0771A4.1538,4.1538,0,0,1,213.7926,66h-9.8511V54h9.8511a4.1538,4.1538,0,0,1,4.1489,4.1494Z"/>
+        <path d="M260.835,46h-26a1,1,0,0,0-1,1V91a1,1,0,0,0,1,1h26a1,1,0,0,0,1-1V85a1,1,0,0,0-1-1h-19V72h13a1,1,0,0,0,1-1V65a1,1,0,0,0-1-1h-13V54h19a1,1,0,0,0,1-1V47A1,1,0,0,0,260.835,46Z"/>
+        <path d="M298.835,46h-6a1,1,0,0,0-1,1V69.6475a7.0066,7.0066,0,1,1-14,0V47a1,1,0,0,0-1-1h-6a1,1,0,0,0-1,1V69.6475a15.0031,15.0031,0,1,0,30,0V47A1,1,0,0,0,298.835,46Z"/>
+        <rect x="307.835" y="46" width="8" height="38" rx="1"/>
+      </g>
+    </g>
+  </g>
+`]

WANHEDA_Front_End/src/assets/icons/sygnet.js

+export const sygnet = ['160 160', `
+  <title>coreui logo</title>
+  <g>
+    <g style="fill:#fff;">
+      <path d="M125,47.091,86,24.5743a12,12,0,0,0-12,0L35,47.091a12.0336,12.0336,0,0,0-6,10.3923v45.0334a12.0335,12.0335,0,0,0,6,10.3923l39,22.5166a11.9993,11.9993,0,0,0,12,0l39-22.5166a12.0335,12.0335,0,0,0,6-10.3923V57.4833A12.0336,12.0336,0,0,0,125,47.091Zm-2,55.4257a4,4,0,0,1-2,3.464L82,128.4974a4,4,0,0,1-4,0L39,105.9807a4,4,0,0,1-2-3.464V57.4833a4,4,0,0,1,2-3.4641L78,31.5025a4,4,0,0,1,4,0l39,22.5167a4,4,0,0,1,2,3.4641Z"/>
+      <path d="M103.0216,93.0379h-2.866a4,4,0,0,0-1.9246.4935L80.95,103.0167,61,91.4981V68.5206L80.95,57.002l17.2894,9.455a4,4,0,0,0,1.9192.4905h2.8632a2,2,0,0,0,2-2V62.2357a2,2,0,0,0-1.04-1.7547L84.793,49.9854a8.0391,8.0391,0,0,0-7.8428.09L57,61.5929A8.0243,8.0243,0,0,0,53,68.5216v22.976a8,8,0,0,0,4,6.9283l19.95,11.5185a8.0422,8.0422,0,0,0,7.8433.0879l19.19-10.5311a2,2,0,0,0,1.0378-1.7534v-2.71A2,2,0,0,0,103.0216,93.0379Z"/>
+    </g>
+  </g>
+`]

WANHEDA_Front_End/src/constant.js

+export const SERVER_URL = "http://127.0.0.1:5000";
+
+export const API_ENDPOINT = "api";
+
+export const AUTH_ENDPOINT = "auth";

WANHEDA_Front_End/src/containers/TheContent.js

+import React, { Suspense } from 'react'
+import {
+  Redirect,
+  Route,
+  Switch
+} from 'react-router-dom'
+import { CContainer, CFade } from '@coreui/react'
+
+// routes config
+import routes from '../routes'
+  
+const loading = (
+  <div className="pt-3 text-center">
+    <div className="sk-spinner sk-spinner-pulse"></div>
+  </div>
+)
+
+const TheContent = () => {
+  return (
+    <main className="c-main">
+      <CContainer fluid>
+        <Suspense fallback={loading}>
+          <Switch>
+            {routes.map((route, idx) => {
+              return route.component && (
+                <Route
+                  key={idx}
+                  path={route.path}
+                  exact={route.exact}
+                  name={route.name}
+                  render={props => (
+                    <CFade>
+                      <route.component {...props} />
+                    </CFade>
+                  )} />
+              )
+            })}
+            <Redirect from="/" to="/dashboard" />
+          </Switch>
+        </Suspense>
+      </CContainer>
+    </main>
+  )
+}
+
+export default React.memo(TheContent)

WANHEDA_Front_End/src/containers/TheFooter.js

+import React from 'react'
+import { CFooter } from '@coreui/react'
+
+const TheFooter = () => {
+  return (
+    <CFooter fixed={false}>
+      <div>
+        <a href="https://coreui.io" target="_blank" rel="noopener noreferrer">CoreUI</a>
+        <span className="ml-1">&copy; 2020 creativeLabs.</span>
+      </div>
+      <div className="mfs-auto">
+        <span className="mr-1">Powered by</span>
+        <a href="https://coreui.io/react" target="_blank" rel="noopener noreferrer">CoreUI for React</a>
+      </div>
+    </CFooter>
+  )
+}
+
+export default React.memo(TheFooter)

WANHEDA_Front_End/src/containers/TheHeader.js

+import React from 'react'
+import { useSelector, useDispatch } from 'react-redux'
+import {
+  CHeader,
+  CToggler,
+  CHeaderBrand,
+  CHeaderNav,
+  CHeaderNavItem,
+  CHeaderNavLink,
+  CSubheader,
+  CBreadcrumbRouter,
+  CLink
+} from '@coreui/react'
+import CIcon from '@coreui/icons-react'
+
+// routes config
+import routes from '../routes'
+
+import { 
+  TheHeaderDropdown,
+  TheHeaderDropdownMssg,
+  TheHeaderDropdownNotif,
+  TheHeaderDropdownTasks
+}  from './index'
+
+const TheHeader = () => {
+  const dispatch = useDispatch()
+  const sidebarShow = useSelector(state => state.sidebarShow)
+
+  const toggleSidebar = () => {
+    const val = [true, 'responsive'].includes(sidebarShow) ? false : 'responsive'
+    dispatch({type: 'set', sidebarShow: val})
+  }
+
+  const toggleSidebarMobile = () => {
+    const val = [false, 'responsive'].includes(sidebarShow) ? true : 'responsive'
+    dispatch({type: 'set', sidebarShow: val})
+  }
+
+  return (
+    <CHeader withSubheader>
+      <CToggler
+        inHeader
+        className="ml-md-3 d-lg-none"
+        onClick={toggleSidebarMobile}
+      />
+      <CToggler
+        inHeader
+        className="ml-3 d-md-down-none"
+        onClick={toggleSidebar}
+      />
+      <CHeaderBrand className="mx-auto d-lg-none" to="/">
+        <CIcon name="logo" height="48" alt="Logo"/>
+      </CHeaderBrand>
+
+      <CHeaderNav className="d-md-down-none mr-auto">
+        <CHeaderNavItem className="px-3" >
+          <CHeaderNavLink to="/dashboard">Dashboard</CHeaderNavLink>
+        </CHeaderNavItem>
+        <CHeaderNavItem  className="px-3">
+          <CHeaderNavLink to="/users">Users</CHeaderNavLink>
+        </CHeaderNavItem>
+        <CHeaderNavItem className="px-3">
+          <CHeaderNavLink>Settings</CHeaderNavLink>
+        </CHeaderNavItem>
+      </CHeaderNav>
+
+      <CHeaderNav className="px-3">
+        <TheHeaderDropdownNotif/>
+        <TheHeaderDropdownTasks/>
+        <TheHeaderDropdownMssg/>
+        <TheHeaderDropdown/>
+      </CHeaderNav>
+
+      <CSubheader className="px-3 justify-content-between">
+        <CBreadcrumbRouter 
+          className="border-0 c-subheader-nav m-0 px-0 px-md-3" 
+          routes={routes} 
+        />
+          <div className="d-md-down-none mfe-2 c-subheader-nav">
+            <CLink className="c-subheader-nav-link"href="#">
+              <CIcon name="cil-speech" alt="Settings" />
+            </CLink>
+            <CLink 
+              className="c-subheader-nav-link" 
+              aria-current="page" 
+              to="/dashboard"
+            >
+              <CIcon name="cil-graph" alt="Dashboard" />&nbsp;Dashboard
+            </CLink>
+            <CLink className="c-subheader-nav-link" href="#">
+              <CIcon name="cil-settings" alt="Settings" />&nbsp;Settings
+            </CLink>
+          </div>
+      </CSubheader>
+    </CHeader>
+  )
+}
+
+export default TheHeader

WANHEDA_Front_End/src/containers/TheHeaderDropdown.js

+import React from "react";
+import { connect } from "react-redux";
+import { userLogout } from "../action/user.actions";
+import {
+  CBadge,
+  CDropdown,
+  CDropdownItem,
+  CDropdownMenu,
+  CDropdownToggle,
+  CImg,
+} from "@coreui/react";
+import CIcon from "@coreui/icons-react";
+
+const TheHeaderDropdown = (props) => {
+  const handleLogout = () => {
+    props.onLogout();
+  };
+
+  return (
+    <CDropdown inNav className="c-header-nav-items mx-2" direction="down">
+      <CDropdownToggle className="c-header-nav-link" caret={false}>
+        <div className="c-avatar">
+          <CImg
+            src={"avatars/6.jpg"}
+            className="c-avatar-img"
+            alt="admin@bootstrapmaster.com"
+          />
+        </div>
+      </CDropdownToggle>
+      <CDropdownMenu className="pt-0" placement="bottom-end">
+        <CDropdownItem header tag="div" color="light" className="text-center">
+          <strong>Account</strong>
+        </CDropdownItem>
+        <CDropdownItem>
+          <CIcon name="cil-bell" className="mfe-2" />
+          Updates
+          <CBadge color="info" className="mfs-auto">
+            42
+          </CBadge>
+        </CDropdownItem>
+        <CDropdownItem>
+          <CIcon name="cil-envelope-open" className="mfe-2" />
+          Messages
+          <CBadge color="success" className="mfs-auto">
+            42
+          </CBadge>
+        </CDropdownItem>
+        <CDropdownItem>
+          <CIcon name="cil-task" className="mfe-2" />
+          Tasks
+          <CBadge color="danger" className="mfs-auto">
+            42
+          </CBadge>
+        </CDropdownItem>
+        <CDropdownItem>
+          <CIcon name="cil-comment-square" className="mfe-2" />
+          Comments
+          <CBadge color="warning" className="mfs-auto">
+            42
+          </CBadge>
+        </CDropdownItem>
+        <CDropdownItem header tag="div" color="light" className="text-center">
+          <strong>Settings</strong>
+        </CDropdownItem>
+        <CDropdownItem>
+          <CIcon name="cil-user" className="mfe-2" />
+          Profile
+        </CDropdownItem>
+        <CDropdownItem>
+          <CIcon name="cil-settings" className="mfe-2" />
+          Settings
+        </CDropdownItem>
+        <CDropdownItem>
+          <CIcon name="cil-credit-card" className="mfe-2" />
+          Payments
+          <CBadge color="secondary" className="mfs-auto">
+            42
+          </CBadge>
+        </CDropdownItem>
+        <CDropdownItem>
+          <CIcon name="cil-file" className="mfe-2" />
+          Projects
+          <CBadge color="primary" className="mfs-auto">
+            42
+          </CBadge>
+        </CDropdownItem>
+        <CDropdownItem divider />
+        <CDropdownItem onClick={handleLogout}>
+          <CIcon name="cil-lock-locked" className="mfe-2" />
+          Log Out{" "}
+        </CDropdownItem>
+      </CDropdownMenu>
+    </CDropdown>
+  );
+};
+const mapStateToProps = (state) => {
+  return {
+    user: state.userData.user || [],
+  };
+};
+
+const mapDispatchToProps = (dispatch) => {
+  return {
+    onLogout: () => {
+      dispatch(userLogout());
+    },
+  };
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(TheHeaderDropdown);

WANHEDA_Front_End/src/containers/TheHeaderDropdownMssg.js

+import React from 'react'
+import {
+  CBadge,
+  CDropdown,
+  CDropdownItem,
+  CDropdownMenu,
+  CDropdownToggle,
+  CImg
+} from '@coreui/react'
+import CIcon from '@coreui/icons-react'
+
+const TheHeaderDropdownMssg = () => {
+  const itemsCount = 4
+  return (
+    <CDropdown
+      inNav
+      className="c-header-nav-item mx-2"
+      direction="down"
+    >
+      <CDropdownToggle className="c-header-nav-link" caret={false}>
+        <CIcon name="cil-envelope-open" /><CBadge shape="pill" color="info">{itemsCount}</CBadge>
+      </CDropdownToggle>
+      <CDropdownMenu className="pt-0" placement="bottom-end">
+        <CDropdownItem
+          header
+          tag="div"
+          color="light"
+        >
+          <strong>You have {itemsCount} messages</strong>
+        </CDropdownItem>
+        <CDropdownItem href="#">
+          <div className="message">
+            <div className="pt-3 mr-3 float-left">
+              <div className="c-avatar">
+                <CImg
+                  src={'avatars/7.jpg'}
+                  className="c-avatar-img"
+                  alt="admin@bootstrapmaster.com"
+                />
+                <span className="c-avatar-status bg-success"></span>
+              </div>
+            </div>
+            <div>
+              <small className="text-muted">John Doe</small>
+              <small className="text-muted float-right mt-1">Just now</small>
+            </div>
+            <div className="text-truncate font-weight-bold">
+              <span className="fa fa-exclamation text-danger"></span> Important message
+            </div>
+            <div className="small text-muted text-truncate">
+              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...
+            </div>
+          </div>
+        </CDropdownItem>
+
+        <CDropdownItem href="#">
+          <div className="message">
+            <div className="pt-3 mr-3 float-left">
+              <div className="c-avatar">
+                <CImg
+                  src={'avatars/6.jpg'}
+                  className="c-avatar-img"
+                  alt="admin@bootstrapmaster.com"
+                />
+                <span className="c-avatar-status bg-warning"></span>
+              </div>
+            </div>
+            <div>
+              <small className="text-muted">Jane Dovve</small>
+              <small className="text-muted float-right mt-1">5 minutes ago</small>
+            </div>
+            <div className="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
+            <div className="small text-muted text-truncate">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...
+            </div>
+          </div>
+        </CDropdownItem>
+
+        <CDropdownItem href="#">
+          <div className="message">
+            <div className="pt-3 mr-3 float-left">
+              <div className="c-avatar">
+                <CImg
+                  src={'avatars/5.jpg'}
+                  className="c-avatar-img"
+                  alt="admin@bootstrapmaster.com"
+                />
+                <span className="c-avatar-status bg-danger"></span>
+              </div>
+            </div>
+            <div>
+              <small className="text-muted">Janet Doe</small>
+              <small className="text-muted float-right mt-1">1:52 PM</small>
+            </div>
+            <div className="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
+            <div className="small text-muted text-truncate">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...
+            </div>
+          </div>
+        </CDropdownItem>
+
+        <CDropdownItem href="#">
+          <div className="message">
+            <div className="pt-3 mr-3 float-left">
+              <div className="c-avatar">
+                <CImg
+                  src={'avatars/4.jpg'}
+                  className="c-avatar-img"
+                  alt="admin@bootstrapmaster.com"
+                />
+                <span className="c-avatar-status bg-info"></span>
+              </div>
+            </div>
+            <div>
+              <small className="text-muted">Joe Doe</small>
+              <small className="text-muted float-right mt-1">4:03 AM</small>
+            </div>
+            <div className="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
+            <div className="small text-muted text-truncate">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...
+            </div>
+          </div>
+        </CDropdownItem>
+        <CDropdownItem href="#" className="text-center border-top"><strong>View all messages</strong></CDropdownItem>
+      </CDropdownMenu>
+    </CDropdown>
+  )
+}
+
+export default TheHeaderDropdownMssg
\ No newline at end of file

WANHEDA_Front_End/src/containers/TheHeaderDropdownNotif.js

+import React from 'react'
+import {
+  CBadge,
+  CDropdown,
+  CDropdownItem,
+  CDropdownMenu,
+  CDropdownToggle,
+  CProgress
+} from '@coreui/react'
+import CIcon from '@coreui/icons-react'
+
+const TheHeaderDropdownNotif = () => {
+  const itemsCount = 5
+  return (
+    <CDropdown
+      inNav
+      className="c-header-nav-item mx-2"
+    >
+      <CDropdownToggle className="c-header-nav-link" caret={false}>
+        <CIcon name="cil-bell"/>
+        <CBadge shape="pill" color="danger">{itemsCount}</CBadge>
+      </CDropdownToggle>
+      <CDropdownMenu  placement="bottom-end" className="pt-0">
+        <CDropdownItem
+          header
+          tag="div"
+          className="text-center"
+          color="light"
+        >
+          <strong>You have {itemsCount} notifications</strong>
+        </CDropdownItem>
+        <CDropdownItem><CIcon name="cil-user-follow" className="mr-2 text-success" /> New user registered</CDropdownItem>
+        <CDropdownItem><CIcon name="cil-user-unfollow" className="mr-2 text-danger" /> User deleted</CDropdownItem>
+        <CDropdownItem><CIcon name="cil-chart-pie" className="mr-2 text-info" /> Sales report is ready</CDropdownItem>
+        <CDropdownItem><CIcon name="cil-basket" className="mr-2 text-primary" /> New client</CDropdownItem>
+        <CDropdownItem><CIcon name="cil-speedometer" className="mr-2 text-warning" /> Server overloaded</CDropdownItem>
+        <CDropdownItem
+          header
+          tag="div"
+          color="light"
+        >
+          <strong>Server</strong>
+        </CDropdownItem>
+        <CDropdownItem className="d-block">
+          <div className="text-uppercase mb-1">
+            <small><b>CPU Usage</b></small>
+          </div>
+          <CProgress size="xs" color="info" value={25} />
+          <small className="text-muted">348 Processes. 1/4 Cores.</small>
+        </CDropdownItem>
+        <CDropdownItem className="d-block">
+          <div className="text-uppercase mb-1">
+            <small><b>Memory Usage</b></small>
+          </div>
+          <CProgress size="xs" color="warning" value={70} />
+          <small className="text-muted">11444GB/16384MB</small>
+        </CDropdownItem>
+        <CDropdownItem className="d-block">
+          <div className="text-uppercase mb-1">
+            <small><b>SSD 1 Usage</b></small>
+          </div>
+          <CProgress size="xs" color="danger" value={90} />
+          <small className="text-muted">243GB/256GB</small>
+        </CDropdownItem>
+      </CDropdownMenu>
+    </CDropdown>
+  )
+}
+
+export default TheHeaderDropdownNotif
\ No newline at end of file

WANHEDA_Front_End/src/containers/TheHeaderDropdownTasks.js

+import React from 'react'
+import {
+  CBadge,
+  CDropdown,
+  CDropdownItem,
+  CDropdownMenu,
+  CDropdownToggle,
+  CProgress
+} from '@coreui/react'
+import CIcon from '@coreui/icons-react'
+
+const TheHeaderDropdownTasks = () => {
+  const itemsCount = 5
+  return (
+    <CDropdown
+      inNav
+      className="c-header-nav-item mx-2"
+    >
+      <CDropdownToggle className="c-header-nav-link" caret={false}>
+        <CIcon name="cil-list" />
+        <CBadge shape="pill" color="warning">{itemsCount}</CBadge>
+      </CDropdownToggle>
+      <CDropdownMenu placement="bottom-end" className="pt-0">
+        <CDropdownItem
+          header
+          tag="div"
+          className="text-center"
+          color="light"
+        >
+          <strong>You have {itemsCount} pending tasks</strong>
+        </CDropdownItem>
+        <CDropdownItem className="d-block">
+          <div className="small mb-1">Upgrade NPM &amp; Bower <span
+            className="float-right"><strong>0%</strong></span></div>
+          <CProgress size="xs" color="info" value={0} />
+        </CDropdownItem>
+        <CDropdownItem className="d-block">
+          <div className="small mb-1">ReactJS Version <span className="float-right"><strong>25%</strong></span></div>
+          <CProgress size="xs" color="danger" value={25} />
+        </CDropdownItem>
+        <CDropdownItem className="d-block">
+          <div className="small mb-1">VueJS Version <span className="float-right"><strong>50%</strong></span></div>
+          <CProgress size="xs" color="warning" value={50} />
+        </CDropdownItem>
+        <CDropdownItem className="d-block">
+          <div className="small mb-1">Add new layouts <span className="float-right"><strong>75%</strong></span></div>
+          <CProgress size="xs" color="info" value={75} />
+        </CDropdownItem>
+        <CDropdownItem className="d-block">
+          <div className="small mb-1">Angular 2 Cli Version <span className="float-right"><strong>100%</strong></span></div>
+          <CProgress size="xs" color="success" value={100} />
+        </CDropdownItem>
+        <CDropdownItem className="text-center border-top"><strong>View all tasks</strong></CDropdownItem>
+      </CDropdownMenu>
+    </CDropdown>
+  )
+}
+
+export default TheHeaderDropdownTasks
\ No newline at end of file

WANHEDA_Front_End/src/containers/TheLayout.js

+import React from 'react'
+import {
+  TheContent,
+  TheSidebar,
+  TheFooter,
+  TheHeader
+} from './index'
+
+const TheLayout = () => {
+
+  return (
+    <div className="c-app c-default-layout">
+      <TheSidebar/>
+      <div className="c-wrapper">
+        <TheHeader/>
+        <div className="c-body">
+          <TheContent/>
+        </div>
+        <TheFooter/>
+      </div>
+    </div>
+  )
+}
+
+export default TheLayout

WANHEDA_Front_End/src/containers/TheSidebar.js

+import React from "react";
+import { useSelector, useDispatch } from "react-redux";
+import {
+  CCreateElement,
+  CSidebar,
+  CSidebarBrand,
+  CSidebarNav,
+  CSidebarNavDivider,
+  CSidebarNavTitle,
+  CSidebarMinimizer,
+  CSidebarNavDropdown,
+  CSidebarNavItem,
+} from "@coreui/react";
+
+import CIcon from "@coreui/icons-react";
+
+// sidebar nav config
+import navigation from "./_nav";
+
+const TheSidebar = () => {
+  const dispatch = useDispatch();
+  const show = useSelector((state) => state.sideBarData.sidebarShow);
+
+  return (
+    <CSidebar
+      show={show}
+      onShowChange={(val) => dispatch({ type: "set", sidebarShow: val })}
+    >
+      <CSidebarBrand className="d-md-down-none" to="/">
+        <CIcon
+          className="c-sidebar-brand-full"
+          name="logo-negative"
+          height={35}
+        />
+        <CIcon
+          className="c-sidebar-brand-minimized"
+          name="sygnet"
+          height={35}
+        />
+      </CSidebarBrand>
+      <CSidebarNav>
+        <CCreateElement
+          items={navigation}
+          components={{
+            CSidebarNavDivider,
+            CSidebarNavDropdown,
+            CSidebarNavItem,
+            CSidebarNavTitle,
+          }}
+        />
+      </CSidebarNav>
+      <CSidebarMinimizer className="c-d-md-down-none" />
+    </CSidebar>
+  );
+};
+
+export default React.memo(TheSidebar);

WANHEDA_Front_End/src/containers/_nav.js

+import React from "react";
+import CIcon from "@coreui/icons-react";
+
+export default [
+  {
+    _tag: "CSidebarNavItem",
+    name: "Dashboard",
+    to: "/dashboard",
+    icon: <CIcon name="cil-speedometer" customClasses="c-sidebar-nav-icon" />,
+  },
+  {
+    _tag: "CSidebarNavItem",
+    name: "White List",
+    to: "/ip-manager/whitelist",
+    icon: "cil-drop",
+  },
+  {
+    _tag: "CSidebarNavItem",
+    name: "Black List",
+    to: "/ip-manager/blacklist",
+    icon: "cil-pencil",
+  },
+  {
+    _tag: "CSidebarNavDivider",
+  },
+];

WANHEDA_Front_End/src/containers/index.js

+import TheContent from './TheContent'
+import TheFooter from './TheFooter'
+import TheHeader from './TheHeader'
+import TheHeaderDropdown from './TheHeaderDropdown'
+import TheHeaderDropdownMssg from './TheHeaderDropdownMssg'
+import TheHeaderDropdownNotif from './TheHeaderDropdownNotif'
+import TheHeaderDropdownTasks from './TheHeaderDropdownTasks'
+import TheLayout from './TheLayout'
+import TheSidebar from './TheSidebar'
+
+export {
+  TheContent,
+  TheFooter,
+  TheHeader,
+  TheHeaderDropdown,
+  TheHeaderDropdownMssg,
+  TheHeaderDropdownNotif,
+  TheHeaderDropdownTasks,
+  TheLayout,
+  TheSidebar
+}

WANHEDA_Front_End/src/index.js

+import "react-app-polyfill/ie11"; // For IE 11 support
+import "react-app-polyfill/stable";
+import "./polyfill";
+import React from "react";
+import ReactDOM from "react-dom";
+import App from "./App";
+import * as serviceWorker from "./serviceWorker";
+
+import { icons } from "./assets/icons";
+
+import { Provider } from "react-redux";
+import store from "./store";
+import { BrowserRouter as Router } from "react-router-dom";
+import { createBrowserHistory } from "history";
+export const history = createBrowserHistory({ forceRefresh: true });
+
+React.icons = icons;
+
+ReactDOM.render(
+  <Provider store={store}>
+    <Router>
+      <App />
+    </Router>
+  </Provider>,
+  document.getElementById("root")
+);
+
+serviceWorker.unregister();

WANHEDA_Front_End/src/polyfill.js

+/*
+* required polyfills
+*/
+import "core-js";
+import 'core-js/features/set/map';
+import 'core-js/features/map';
+
+/** IE9, IE10 and IE11 requires all of the following polyfills. **/
+// import 'core-js/es6/symbol'
+// import 'core-js/es6/object'
+// import 'core-js/es6/function'
+// import 'core-js/es6/parse-int'
+// import 'core-js/es6/parse-float'
+// import 'core-js/es6/number'
+// import 'core-js/es6/math'
+// import 'core-js/es6/string'
+// import 'core-js/es6/date'
+// import 'core-js/es6/array'
+// import 'core-js/es6/regexp'
+// import 'core-js/es6/map'
+// import 'core-js/es6/weak-map'
+// import 'core-js/es6/set'
+// import 'core-js/es7/object'
+
+/** IE10 and IE11 requires the following for the Reflect API. */
+// import 'core-js/es6/reflect'
+
+/** Evergreen browsers require these. **/
+// Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove.
+// import 'core-js/es7/reflect'
+
+// CustomEvent() constructor functionality in IE9, IE10, IE11
+(function () {
+
+  if ( typeof window.CustomEvent === "function" ) return false
+
+  function CustomEvent ( event, params ) {
+    params = params || { bubbles: false, cancelable: false, detail: undefined }
+    var evt = document.createEvent( 'CustomEvent' )
+    evt.initCustomEvent( event, params.bubbles, params.cancelable, params.detail )
+    return evt
+  }
+
+  CustomEvent.prototype = window.Event.prototype
+
+  window.CustomEvent = CustomEvent
+})()

WANHEDA_Front_End/src/reducers/blacklistReducer.js

+import {
+  GET_BLACK_LIST_SUCCESS,
+  GET_BLACK_LIST_ERROR,
+  ADD_TO_BLACK_LIST_ERROR,
+  ADD_TO_BLACK_LIST_SUCCESS,
+} from "../action/types";
+
+const blacklistInitialState = {
+  blacklist: [],
+};
+
+const blackListReducer = (state = blacklistInitialState, action) => {
+  switch (action.type) {
+    case GET_BLACK_LIST_SUCCESS:
+      return { ...state, blacklist: action.payload };
+    case GET_BLACK_LIST_ERROR:
+      return { ...state, error: action.payload };
+    case ADD_TO_BLACK_LIST_SUCCESS:
+      return { ...state, blacklist: [...state.blacklist, action.payload] };
+    case ADD_TO_BLACK_LIST_ERROR:
+      return { ...state, error: action.payload };
+    default:
+      return state;
+  }
+};
+
+export default blackListReducer;

WANHEDA_Front_End/src/reducers/index.js

+import { combineReducers } from "redux";
+import userReducer from "./userReducer";
+import sidebarReducer from "./sidebarReducer";
+import notificationReducer from "./notificationReducer";
+import whitelistReducre from "./whitelistReducer";
+import blacklistReducre from "./blacklistReducer";
+
+export default combineReducers({
+  sideBarData: sidebarReducer,
+  userData: userReducer,
+  notificationData: notificationReducer,
+  whitelistData: whitelistReducre,
+  blacklistData: blacklistReducre,
+});

WANHEDA_Front_End/src/reducers/notificationReducer.js

+import {
+  GET_NOTIFICATION_SUCCESS,
+  GET_NOTIFICATION_ERROR,
+} from "../action/types";
+
+const notificationInitialState = {
+  notification: [],
+};
+
+const notificationReducer = (state = notificationInitialState, action) => {
+  switch (action.type) {
+    case GET_NOTIFICATION_SUCCESS:
+      return { ...state, notification: action.payload };
+    case GET_NOTIFICATION_ERROR:
+      return { ...state, error: action.payload };
+    default:
+      return state;
+  }
+};
+
+export default notificationReducer;

WANHEDA_Front_End/src/reducers/sidebarReducer.js

+import { createStore } from "redux";
+
+const initialState = {
+  sidebarShow: "responsive",
+};
+
+const sidebarReducer = (state = initialState, { type, ...rest }) => {
+  switch (type) {
+    case "set":
+      return { ...state, ...rest };
+    default:
+      return state;
+  }
+};
+
+export default sidebarReducer;

WANHEDA_Front_End/src/reducers/userReducer.js

+import {
+  USER_LOGIN_SUCCESS,
+  USER_LOGIN_FAILED,
+  USER_LOGIN_ERROR,
+  USER_LOGOUT_SUCCESS,
+  USER_SIGNUP_SUCCESS,
+  USER_SIGNUP_FAILED,
+  USER_SIGNUP_ERROR,
+  GET_USER_PROFILE_SUCCESS,
+  GET_USER_PROFILE_ERROR,
+} from "../action/types";
+
+const userInitialState = {
+  user: [],
+  profile: [],
+  error: "",
+};
+
+const userReducer = (state = userInitialState, action) => {
+  switch (action.type) {
+    case USER_LOGIN_SUCCESS:
+      return { ...state, user: action.payload };
+    case USER_LOGIN_FAILED:
+      return { ...state, error: action.payload };
+    case USER_LOGIN_ERROR:
+      return { ...state, error: action.payload };
+    case USER_SIGNUP_SUCCESS:
+      return { ...state, user: action.payload };
+    case USER_SIGNUP_FAILED:
+      return { ...state, error: action.payload };
+    case USER_SIGNUP_ERROR:
+      return { ...state, error: action.payload };
+    case GET_USER_PROFILE_SUCCESS:
+      return { ...state, profile: action.payload };
+    case GET_USER_PROFILE_ERROR:
+      return { ...state, error: action.payload };
+    case USER_LOGOUT_SUCCESS:
+      return { ...state, user: [] };
+    default:
+      return state;
+  }
+};
+
+export default userReducer;

WANHEDA_Front_End/src/reducers/whitelistReducer.js

+import {
+  GET_WHITE_LIST_SUCCESS,
+  GET_WHITE_LIST_ERROR,
+  ADD_TO_WHITE_LIST_ERROR,
+  ADD_TO_WHITE_LIST_SUCCESS,
+} from "../action/types";
+
+const whitelistInitialState = {
+  whitelist: [],
+};
+
+const whitelistReducer = (state = whitelistInitialState, action) => {
+  switch (action.type) {
+    case GET_WHITE_LIST_SUCCESS:
+      return { ...state, whitelist: action.payload };
+    case GET_WHITE_LIST_ERROR:
+      return { ...state, error: action.payload };
+    case ADD_TO_WHITE_LIST_SUCCESS:
+      return { ...state, whitelist: [...state.whitelist, action.payload] };
+    case ADD_TO_WHITE_LIST_ERROR:
+      return { ...state, error: action.payload };
+    default:
+      return state;
+  }
+};
+
+export default whitelistReducer;

WANHEDA_Front_End/src/reusable/DocsLink.js

+import React from 'react'
+import { CLink } from '@coreui/react'
+
+const DocsLink = props => {
+  const {
+    name,
+    text,
+    ...rest
+  } = props
+
+  const href = name ? `https://coreui.io/react/docs/components/${name}` : props.href
+
+  return (
+    <div className="card-header-actions">
+      <CLink 
+        {...rest}
+        href={href}
+        rel="noreferrer noopener" 
+        target="_blank" 
+        className="card-header-action"  
+      >
+        <small className="text-muted">{ text || 'docs' }</small>
+      </CLink>
+    </div>
+  )
+}
+
+export default React.memo(DocsLink)
\ No newline at end of file

WANHEDA_Front_End/src/reusable/index.js

+import DocsLink from './DocsLink'
+
+export {
+  DocsLink
+}
\ No newline at end of file

WANHEDA_Front_End/src/routes.js

+import React from "react";
+
+const Dashboard = React.lazy(() => import("./views/dashboard/Dashboard"));
+
+const Whitelist = React.lazy(() => import("./views/ipmanager/Whitelist"));
+const Blacklist = React.lazy(() => import("./views/ipmanager/Blacklist"));
+
+const Users = React.lazy(() => import("./views/users/Users"));
+const User = React.lazy(() => import("./views/users/User"));
+
+const routes = [
+  { path: "/", exact: true, name: "Home" },
+  { path: "/dashboard", name: "Dashboard", component: Dashboard },
+  { path: "/whitelist", name: "IP Manager", component: Whitelist, exact: true },
+  { path: "/ip-manager/whitelist", name: "White List", component: Whitelist },
+  { path: "/ip-manager/blacklist", name: "Black List", component: Blacklist },
+
+  { path: "/users", exact: true, name: "Users", component: Users },
+  { path: "/users/:id", exact: true, name: "User Details", component: User },
+];
+
+export default routes;

WANHEDA_Front_End/src/scss/_custom.scss

+// Here you can add other styles

WANHEDA_Front_End/src/scss/_variables.scss

+// Variable overrides

WANHEDA_Front_End/src/scss/style.scss

+// If you want to override variables do it here
+@import "variables";
+
+// Import CoreUI styles
+@import "~@coreui/coreui/scss/coreui.scss";
+
+// If you want to add something do it here
+@import "custom";

WANHEDA_Front_End/src/serviceWorker.js

+// In production, we register a service worker to serve assets from local cache.
+
+// This lets the app load faster on subsequent visits in production, and gives
+// it offline capabilities. However, it also means that developers (and users)
+// will only see deployed updates on the "N+1" visit to a page, since previously
+// cached resources are updated in the background.
+
+// To learn more about the benefits of this model, read https://goo.gl/KwvDNy.
+// This link also includes instructions on opting out of this behavior.
+
+const isLocalhost = Boolean(
+  window.location.hostname === 'localhost' ||
+    // [::1] is the IPv6 localhost address.
+    window.location.hostname === '[::1]' ||
+    // 127.0.0.1/8 is considered localhost for IPv4.
+    window.location.hostname.match(
+      /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
+    )
+);
+
+export function register(config) {
+  if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
+    // The URL constructor is available in all browsers that support SW.
+    const publicUrl = new URL(process.env.PUBLIC_URL, window.location);
+    if (publicUrl.origin !== window.location.origin) {
+      // Our service worker won't work if PUBLIC_URL is on a different origin
+      // from what our page is served on. This might happen if a CDN is used to
+      // serve assets; see https://github.com/facebook/create-react-app/issues/2374
+      return;
+    }
+
+    window.addEventListener('load', () => {
+      const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
+
+      if (isLocalhost) {
+        // This is running on localhost. Let's check if a service worker still exists or not.
+        checkValidServiceWorker(swUrl, config);
+
+        // Add some additional logging to localhost, pointing developers to the
+        // service worker/PWA documentation.
+        navigator.serviceWorker.ready.then(() => {
+          console.log(
+            'This web app is being served cache-first by a service ' +
+              'worker. To learn more, visit https://goo.gl/SC7cgQ'
+          );
+        });
+      } else {
+        // Is not local host. Just register service worker
+        registerValidSW(swUrl, config);
+      }
+    });
+  }
+}
+
+function registerValidSW(swUrl, config) {
+  navigator.serviceWorker
+    .register(swUrl)
+    .then(registration => {
+      registration.onupdatefound = () => {
+        const installingWorker = registration.installing;
+        installingWorker.onstatechange = () => {
+          if (installingWorker.state === 'installed') {
+            if (navigator.serviceWorker.controller) {
+              // At this point, the old content will have been purged and
+              // the fresh content will have been added to the cache.
+              // It's the perfect time to display a "New content is
+              // available; please refresh." message in your web app.
+              console.log('New content is available; please refresh.');
+
+              // Execute callback
+              if (config.onUpdate) {
+                config.onUpdate(registration);
+              }
+            } else {
+              // At this point, everything has been precached.
+              // It's the perfect time to display a
+              // "Content is cached for offline use." message.
+              console.log('Content is cached for offline use.');
+
+              // Execute callback
+              if (config.onSuccess) {
+                config.onSuccess(registration);
+              }
+            }
+          }
+        };
+      };
+    })
+    .catch(error => {
+      console.error('Error during service worker registration:', error);
+    });
+}
+
+function checkValidServiceWorker(swUrl, config) {
+  // Check if the service worker can be found. If it can't reload the page.
+  fetch(swUrl)
+    .then(response => {
+      // Ensure service worker exists, and that we really are getting a JS file.
+      if (
+        response.status === 404 ||
+        response.headers.get('content-type').indexOf('javascript') === -1
+      ) {
+        // No service worker found. Probably a different app. Reload the page.
+        navigator.serviceWorker.ready.then(registration => {
+          registration.unregister().then(() => {
+            window.location.reload();
+          });
+        });
+      } else {
+        // Service worker found. Proceed as normal.
+        registerValidSW(swUrl, config);
+      }
+    })
+    .catch(() => {
+      console.log(
+        'No internet connection found. App is running in offline mode.'
+      );
+    });
+}
+
+export function unregister() {
+  if ('serviceWorker' in navigator) {
+    navigator.serviceWorker.ready.then(registration => {
+      registration.unregister();
+    });
+  }
+}

WANHEDA_Front_End/src/setupTests.js

+import { configure } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+
+configure({ adapter: new Adapter() });
+
+if (global.document) {
+  document.createRange = () => ( {
+    setStart: () => {},
+    setEnd: () => {},
+    commonAncestorContainer: {
+      nodeName: 'BODY',
+      ownerDocument: document,
+    },
+  });
+}

WANHEDA_Front_End/src/store.js

+import { applyMiddleware, createStore, compose } from "redux";
+import thunk from "redux-thunk";
+import rootReducer from "./reducers";
+
+const saveToLocalStorage = (state) => {
+  try {
+    const serializedState = JSON.stringify(state);
+    localStorage.setItem("state", serializedState);
+  } catch (e) {
+    console.log(e);
+  }
+};
+
+const loadFromLocalStorage = () => {
+  try {
+    const serializedState = localStorage.getItem("state");
+
+    if (serializedState === null) {
+      return undefined;
+    }
+    return JSON.parse(serializedState);
+  } catch (err) {
+    console.log(err);
+    return undefined;
+  }
+};
+
+const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
+const persistedState = loadFromLocalStorage();
+const store = createStore(
+  rootReducer,
+  persistedState,
+  composeEnhancers(applyMiddleware(thunk))
+);
+
+store.subscribe(() => saveToLocalStorage(store.getState()));
+
+export default store;

WANHEDA_Front_End/src/views/charts/ChartBarSimple.js

+import React from "react";
+import PropTypes from "prop-types";
+import { CChartBar } from "@coreui/react-chartjs";
+
+const ChartBarSimple = (props) => {
+  const {
+    backgroundColor,
+    pointHoverBackgroundColor,
+    dataPoints,
+    label,
+    pointed,
+    ...attributes
+  } = props;
+
+  const defaultDatasets = (() => {
+    return [
+      {
+        data: dataPoints,
+        label: label,
+        barPercentage: 0.5,
+        categoryPercentage: 1,
+      },
+    ];
+  })();
+
+  const defaultOptions = (() => {
+    return {
+      maintainAspectRatio: false,
+      legend: {
+        display: false,
+      },
+      scales: {
+        xAxes: [
+          {
+            display: false,
+          },
+        ],
+        yAxes: [
+          {
+            display: false,
+          },
+        ],
+      },
+    };
+  })();
+
+  // render
+  return (
+    <CChartBar
+      {...attributes}
+      datasets={defaultDatasets}
+      options={defaultOptions}
+      labels={label}
+    />
+  );
+};
+
+ChartBarSimple.propTypes = {
+  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+  className: PropTypes.string,
+  //
+  backgroundColor: PropTypes.string,
+  pointHoverBackgroundColor: PropTypes.string,
+  dataPoints: PropTypes.array,
+  label: PropTypes.string,
+  pointed: PropTypes.bool,
+};
+
+ChartBarSimple.defaultProps = {
+  backgroundColor: "rgba(0,0,0,.2)",
+  dataPoints: [10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12],
+  label: "Sales",
+};
+
+export default ChartBarSimple;

WANHEDA_Front_End/src/views/charts/ChartLineSimple.js

+import React from "react";
+import PropTypes from "prop-types";
+import { CChartLine } from "@coreui/react-chartjs";
+
+const ChartLineSimple = (props) => {
+  const {
+    borderColor,
+    backgroundColor,
+    pointHoverBackgroundColor,
+    dataPoints,
+    label,
+    pointed,
+    ...attributes
+  } = props;
+
+  const pointHoverColor = (() => {
+    if (pointHoverBackgroundColor) {
+      return pointHoverBackgroundColor;
+    } else if (backgroundColor !== "transparent") {
+      return backgroundColor;
+    }
+    return borderColor;
+  })();
+
+  const defaultDatasets = (() => {
+    return [
+      {
+        data: dataPoints,
+        label,
+      },
+    ];
+  })();
+
+  const pointedOptions = (() => {
+    return {
+      scales: {
+        xAxes: [
+          {
+            offset: true,
+            gridLines: {
+              color: "transparent",
+              zeroLineColor: "transparent",
+            },
+            ticks: {
+              fontSize: 2,
+              fontColor: "transparent",
+            },
+          },
+        ],
+        yAxes: [
+          {
+            display: false,
+            ticks: {
+              display: false,
+              min: Math.min.apply(Math, dataPoints) - 5,
+              max: Math.max.apply(Math, dataPoints) + 5,
+            },
+          },
+        ],
+      },
+      elements: {
+        line: {
+          borderWidth: 1,
+        },
+        point: {
+          radius: 4,
+          hitRadius: 10,
+          hoverRadius: 4,
+        },
+      },
+    };
+  })();
+
+  const straightOptions = (() => {
+    return {
+      scales: {
+        xAxes: [
+          {
+            display: false,
+          },
+        ],
+        yAxes: [
+          {
+            display: false,
+          },
+        ],
+      },
+      elements: {
+        line: {
+          borderWidth: 2,
+        },
+        point: {
+          radius: 0,
+          hitRadius: 10,
+          hoverRadius: 4,
+        },
+      },
+    };
+  })();
+
+  const defaultOptions = (() => {
+    const options = pointed ? pointedOptions : straightOptions;
+    return Object.assign({}, options, {
+      maintainAspectRatio: false,
+      legend: {
+        display: false,
+      },
+    });
+  })();
+
+  const computedDatasets = (() => {})();
+
+  const computedOptions = (() => {})();
+
+  // render
+
+  return (
+    <CChartLine
+      {...attributes}
+      datasets={computedDatasets}
+      options={computedOptions}
+      labels={label}
+    />
+  );
+};
+
+ChartLineSimple.propTypes = {
+  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+  className: PropTypes.string,
+  //
+  borderColor: PropTypes.string,
+  backgroundColor: PropTypes.string,
+  pointHoverBackgroundColor: PropTypes.string,
+  dataPoints: PropTypes.array,
+  label: PropTypes.string,
+  pointed: PropTypes.bool,
+};
+
+ChartLineSimple.defaultProps = {
+  borderColor: "rgba(255,255,255,.55)",
+  backgroundColor: "transparent",
+  dataPoints: [10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12],
+  label: "Sales",
+};
+
+export default ChartLineSimple;

WANHEDA_Front_End/src/views/charts/Charts.js

+import React from 'react'
+import {
+  CCard,
+  CCardBody,
+  CCardGroup,
+  CCardHeader
+} from '@coreui/react'
+import {
+  CChartBar,
+  CChartLine,
+  CChartDoughnut,
+  CChartRadar,
+  CChartPie,
+  CChartPolarArea
+} from '@coreui/react-chartjs'
+import { DocsLink } from 'src/reusable'
+
+const Charts = () => {
+
+  return (
+    <CCardGroup columns className = "cols-2" >
+      <CCard>
+        <CCardHeader>
+          Bar Chart
+          <DocsLink href="http://www.chartjs.org"/>
+        </CCardHeader>
+        <CCardBody>
+          <CChartBar
+            datasets={[
+              {
+                label: 'GitHub Commits',
+                backgroundColor: '#f87979',
+                data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 11]
+              }
+            ]}
+            labels="months"
+            options={{
+              tooltips: {
+                enabled: true
+              }
+            }}
+          />
+        </CCardBody>
+      </CCard>
+
+      <CCard>
+        <CCardHeader>
+          Doughnut Chart
+        </CCardHeader>
+        <CCardBody>
+          <CChartDoughnut
+            datasets={[
+              {
+                backgroundColor: [
+                  '#41B883',
+                  '#E46651',
+                  '#00D8FF',
+                  '#DD1B16'
+                ],
+                data: [40, 20, 80, 10]
+              }
+            ]}
+            labels={['VueJs', 'EmberJs', 'ReactJs', 'AngularJs']}
+            options={{
+              tooltips: {
+                enabled: true
+              }
+            }}
+          />
+        </CCardBody>
+      </CCard>
+
+      <CCard>
+        <CCardHeader>
+          Line Chart
+        </CCardHeader>
+        <CCardBody>
+          <CChartLine
+            datasets={[
+              {
+                label: 'Data One',
+                backgroundColor: 'rgb(228,102,81,0.9)',
+                data: [30, 39, 10, 50, 30, 70, 35]
+              },
+              {
+                label: 'Data Two',
+                backgroundColor: 'rgb(0,216,255,0.9)',
+                data: [39, 80, 40, 35, 40, 20, 45]
+              }
+            ]}
+            options={{
+              tooltips: {
+                enabled: true
+              }
+            }}
+            labels="months"
+          />
+        </CCardBody>
+      </CCard>
+
+      <CCard>
+        <CCardHeader>
+          Pie Chart
+        </CCardHeader>
+        <CCardBody>
+          <CChartPie
+            datasets={[
+              {
+                backgroundColor: [
+                  '#41B883',
+                  '#E46651',
+                  '#00D8FF',
+                  '#DD1B16'
+                ],
+                data: [40, 20, 80, 10]
+              }
+            ]}
+            labels={['VueJs', 'EmberJs', 'ReactJs', 'AngularJs']}
+            options={{
+              tooltips: {
+                enabled: true
+              }
+            }}
+          />
+        </CCardBody>
+      </CCard>
+
+      <CCard>
+        <CCardHeader>
+          Polar Area Chart
+        </CCardHeader>
+        <CCardBody>
+          <CChartPolarArea
+            datasets={[
+              {
+                label: 'My First dataset',
+                backgroundColor: 'rgba(179,181,198,0.2)',
+                pointBackgroundColor: 'rgba(179,181,198,1)',
+                pointBorderColor: '#fff',
+                pointHoverBackgroundColor: 'rgba(179,181,198,1)',
+                pointHoverBorderColor: 'rgba(179,181,198,1)',
+                data: [65, 59, 90, 81, 56, 55, 40]
+              },
+              {
+                label: 'My Second dataset',
+                backgroundColor: 'rgba(255,99,132,0.2)',
+                pointBackgroundColor: 'rgba(255,99,132,1)',
+                pointBorderColor: '#fff',
+                pointHoverBackgroundColor: 'rgba(255,99,132,1)',
+                pointHoverBorderColor: 'rgba(255,99,132,1)',
+                data: [28, 48, 40, 19, 96, 27, 100]
+              }
+            ]}
+            options={{
+              aspectRatio: 1.5,
+              tooltips: {
+                enabled: true
+              }
+            }}
+            labels={[
+              'Eating', 'Drinking', 'Sleeping', 'Designing',
+              'Coding', 'Cycling', 'Running'
+            ]}
+          />
+        </CCardBody>
+      </CCard>
+
+      <CCard>
+        <CCardHeader>
+          Radar Chart
+        </CCardHeader>
+        <CCardBody>
+          <CChartRadar
+            datasets={[
+              {
+                label: '2019',
+                backgroundColor: 'rgba(179,181,198,0.2)',
+                borderColor: 'rgba(179,181,198,1)',
+                pointBackgroundColor: 'rgba(179,181,198,1)',
+                pointBorderColor: '#fff',
+                pointHoverBackgroundColor: '#fff',
+                pointHoverBorderColor: 'rgba(179,181,198,1)',
+                tooltipLabelColor: 'rgba(179,181,198,1)',
+                data: [65, 59, 90, 81, 56, 55, 40]
+              },
+              {
+                label: '2020',
+                backgroundColor: 'rgba(255,99,132,0.2)',
+                borderColor: 'rgba(255,99,132,1)',
+                pointBackgroundColor: 'rgba(255,99,132,1)',
+                pointBorderColor: '#fff',
+                pointHoverBackgroundColor: '#fff',
+                pointHoverBorderColor: 'rgba(255,99,132,1)',
+                tooltipLabelColor: 'rgba(255,99,132,1)',
+                data: [28, 48, 40, 19, 96, 27, 100]
+              }
+            ]}
+            options={{
+              aspectRatio: 1.5,
+              tooltips: {
+                enabled: true
+              }
+            }}
+            labels={[
+              'Eating', 'Drinking', 'Sleeping', 'Designing',
+              'Coding', 'Cycling', 'Running'
+            ]}
+          />
+        </CCardBody>
+      </CCard>
+    </CCardGroup>
+  )
+}
+
+export default Charts

WANHEDA_Front_End/src/views/charts/MainChartExample.js

+import React from "react";
+import { CChartLine } from "@coreui/react-chartjs";
+import {
+  getStyle,
+  hexToRgba,
+} from "src/views/ipmanager/colors/node_modules/@coreui/utils";
+
+const brandSuccess = getStyle("success") || "#4dbd74";
+const brandInfo = getStyle("info") || "#20a8d8";
+const brandDanger = getStyle("danger") || "#f86c6b";
+
+const MainChartExample = (attributes) => {
+  const random = (min, max) => {
+    return Math.floor(Math.random() * (max - min + 1) + min);
+  };
+
+  const defaultDatasets = (() => {
+    let elements = 27;
+    const data1 = [];
+    const data2 = [];
+    const data3 = [];
+    for (let i = 0; i <= elements; i++) {
+      data1.push(random(50, 200));
+      data2.push(random(80, 100));
+      data3.push(65);
+    }
+    return [
+      {
+        label: "My First dataset",
+        backgroundColor: hexToRgba(brandInfo, 10),
+        borderColor: brandInfo,
+        pointHoverBackgroundColor: brandInfo,
+        borderWidth: 2,
+        data: data1,
+      },
+      {
+        label: "My Second dataset",
+        backgroundColor: "transparent",
+        borderColor: brandSuccess,
+        pointHoverBackgroundColor: brandSuccess,
+        borderWidth: 2,
+        data: data2,
+      },
+      {
+        label: "My Third dataset",
+        backgroundColor: "transparent",
+        borderColor: brandDanger,
+        pointHoverBackgroundColor: brandDanger,
+        borderWidth: 1,
+        borderDash: [8, 5],
+        data: data3,
+      },
+    ];
+  })();
+
+  const defaultOptions = (() => {
+    return {
+      maintainAspectRatio: false,
+      legend: {
+        display: false,
+      },
+      scales: {
+        xAxes: [
+          {
+            gridLines: {
+              drawOnChartArea: false,
+            },
+          },
+        ],
+        yAxes: [
+          {
+            ticks: {
+              beginAtZero: true,
+              maxTicksLimit: 5,
+              stepSize: Math.ceil(250 / 5),
+              max: 250,
+            },
+            gridLines: {
+              display: true,
+            },
+          },
+        ],
+      },
+      elements: {
+        point: {
+          radius: 0,
+          hitRadius: 10,
+          hoverRadius: 4,
+          hoverBorderWidth: 3,
+        },
+      },
+    };
+  })();
+
+  // render
+  return (
+    <CChartLine
+      {...attributes}
+      datasets={defaultDatasets}
+      options={defaultOptions}
+      labels={[
+        "Mo",
+        "Tu",
+        "We",
+        "Th",
+        "Fr",
+        "Sa",
+        "Su",
+        "Mo",
+        "Tu",
+        "We",
+        "Th",
+        "Fr",
+        "Sa",
+        "Su",
+        "Mo",
+        "Tu",
+        "We",
+        "Th",
+        "Fr",
+        "Sa",
+        "Su",
+        "Mo",
+        "Tu",
+        "We",
+        "Th",
+        "Fr",
+        "Sa",
+        "Su",
+      ]}
+    />
+  );
+};
+
+export default MainChartExample;

WANHEDA_Front_End/src/views/dashboard/Dashboard.js

+import React, { useEffect, useState, lazy } from "react";
+import { Link } from "react-router-dom";
+import { connect } from "react-redux";
+import { getNotification } from "../../action/notification.actions";
+import {
+  CBadge,
+  CCard,
+  CCardBody,
+  CCardHeader,
+  CCol,
+  CRow,
+  CDataTable,
+} from "@coreui/react";
+
+const Dashboard = (props) => {
+  const fields = ["ip", "message", "time"];
+  useEffect(() => {
+    props.onGetNotification();
+  }, []);
+  return (
+    <CRow>
+      <CCol>
+        <CCard>
+          <CCardHeader>Activites</CCardHeader>
+          <CCardBody>
+            <CDataTable
+              items={props.notifications}
+              fields={fields}
+              itemsPerPage={10}
+              pagination
+              scopedSlots={{
+                status: (item) => (
+                  <td>
+                    <CBadge color={"red"}>{item.status}</CBadge>
+                  </td>
+                ),
+              }}
+            />
+          </CCardBody>
+        </CCard>
+      </CCol>
+    </CRow>
+  );
+};
+
+const mapStateToProps = (state) => {
+  return {
+    error: state.notificationData.error || "",
+    notifications: state.notificationData.notification || [],
+  };
+};
+
+const mapDispatchToProps = (dispatch) => {
+  return {
+    onGetNotification: () => {
+      dispatch(getNotification());
+    },
+  };
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(Dashboard);

WANHEDA_Front_End/src/views/ipmanager/Blacklist.js

+import React, { useEffect, useState } from "react";
+import { connect } from "react-redux";
+import { getBlackList, addToBlackList } from "../../action/blacklist.actions";
+
+import {
+  CCard,
+  CCardHeader,
+  CCardBody,
+  CRow,
+  CCol,
+  CDataTable,
+  CBadge,
+  CInput,
+  CButton,
+} from "@coreui/react";
+
+const BlackList = (props) => {
+  const fields = ["ip"];
+  const [ip, setIp] = useState([]);
+
+  useEffect(() => {
+    props.onGetBlacklist();
+  }, []);
+
+  const handleAddToBlackList = (e) => {
+    e.preventDefault();
+    const ip_data = {
+      ip: ip,
+    };
+    setIp("");
+    props.onAddToBlackList(ip_data);
+  };
+
+  return (
+    <CRow>
+      <CCol xs="12" lg="8">
+        <CCard>
+          <CCardHeader>Black List</CCardHeader>
+          <CCardBody>
+            <CDataTable
+              items={props.blacklist}
+              fields={fields}
+              itemsPerPage={10}
+              pagination
+              scopedSlots={{
+                status: (item) => (
+                  <td>
+                    <CBadge color={"red"}>{item.status}</CBadge>
+                  </td>
+                ),
+              }}
+            />
+          </CCardBody>
+        </CCard>
+      </CCol>
+      <CCol xs="12" lg="4">
+        <CCard>
+          <CCardHeader>Add to Black List</CCardHeader>
+          <CCardBody>
+            <CInput
+              type="text"
+              id="ip"
+              name="ip"
+              value={ip}
+              onChange={(e) => {
+                setIp(e.target.value);
+              }}
+              placeholder="Enter an IP Address.."
+              required
+            />
+
+            <CButton
+              color={"info"}
+              className="m-2"
+              onClick={handleAddToBlackList}
+            >
+              Add
+            </CButton>
+          </CCardBody>
+        </CCard>
+      </CCol>
+    </CRow>
+  );
+};
+
+const mapStateToProps = (state) => {
+  return {
+    error: state.blacklistData.error || "",
+    blacklist: state.blacklistData.blacklist || [],
+  };
+};
+
+const mapDispatchToProps = (dispatch) => {
+  return {
+    onGetBlacklist: () => {
+      dispatch(getBlackList());
+    },
+    onAddToBlackList: (ip) => {
+      dispatch(addToBlackList(ip));
+    },
+  };
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(BlackList);

WANHEDA_Front_End/src/views/ipmanager/Whitelist.js

+import React, { useEffect, useState } from "react";
+import { connect } from "react-redux";
+import { getWhiteList, addToWhiteList } from "../../action/whitelist.actions";
+
+import {
+  CRow,
+  CCol,
+  CCard,
+  CCardHeader,
+  CCardBody,
+  CDataTable,
+  CBadge,
+  CInput,
+  CButton,
+} from "@coreui/react";
+
+const Whitelist = (props) => {
+  const fields = ["ip"];
+
+  const [ip, setIp] = useState("");
+
+  useEffect(() => {
+    props.onGetWhitelist();
+  }, []);
+
+  const handleAddToWhiteList = (e) => {
+    e.preventDefault();
+    const ip_data = {
+      ip: ip,
+    };
+    setIp("");
+    props.onAddToWhiteList(ip_data);
+  };
+
+  return (
+    <CRow>
+      <CCol xs="12" lg="8">
+        <CCard>
+          <CCardHeader>White List</CCardHeader>
+          <CCardBody>
+            <CDataTable
+              items={props.whitelist}
+              fields={fields}
+              itemsPerPage={10}
+              pagination
+              scopedSlots={{
+                status: (item) => (
+                  <td>
+                    <CBadge color={"red"}>{item.status}</CBadge>
+                  </td>
+                ),
+              }}
+            />
+          </CCardBody>
+        </CCard>
+      </CCol>
+      <CCol xs="12" lg="4">
+        <CCard>
+          <CCardHeader>Add to White List</CCardHeader>
+          <CCardBody>
+            <CInput
+              type="text"
+              placeholder="Add a valid IP Address.."
+              autoComplete="ip"
+              onChange={(e) => setIp(e.target.value)}
+              required
+            />
+            <CButton
+              color={"info"}
+              className="m-2"
+              onClick={handleAddToWhiteList}
+            >
+              Add
+            </CButton>
+          </CCardBody>
+        </CCard>
+      </CCol>
+    </CRow>
+  );
+};
+
+const mapStateToProps = (state) => {
+  return {
+    error: state.whitelistData.error || "",
+    whitelist: state.whitelistData.whitelist || [],
+  };
+};
+
+const mapDispatchToProps = (dispatch) => {
+  return {
+    onGetWhitelist: () => {
+      dispatch(getWhiteList());
+    },
+    onAddToWhiteList: (ip) => {
+      dispatch(addToWhiteList(ip));
+    },
+  };
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(Whitelist);

WANHEDA_Front_End/src/views/pages/page404/Page404.js

+import React from 'react'
+import {
+  CButton,
+  CCol,
+  CContainer,
+  CInput,
+  CInputGroup,
+  CInputGroupPrepend,
+  CInputGroupAppend,
+  CInputGroupText,
+  CRow
+} from '@coreui/react'
+import CIcon from '@coreui/icons-react'
+
+const Page404 = () => {
+  return (
+    <div className="c-app c-default-layout flex-row align-items-center">
+      <CContainer>
+        <CRow className="justify-content-center">
+          <CCol md="6">
+            <div className="clearfix">
+              <h1 className="float-left display-3 mr-4">404</h1>
+              <h4 className="pt-3">Oops! You{'\''}re lost.</h4>
+              <p className="text-muted float-left">The page you are looking for was not found.</p>
+            </div>
+            <CInputGroup className="input-prepend">
+              <CInputGroupPrepend>
+                <CInputGroupText>
+                  <CIcon name="cil-magnifying-glass" />
+                </CInputGroupText>
+              </CInputGroupPrepend>
+              <CInput size="16" type="text" placeholder="What are you looking for?" />
+              <CInputGroupAppend>
+                <CButton color="info">Search</CButton>
+              </CInputGroupAppend>
+            </CInputGroup>
+          </CCol>
+        </CRow>
+      </CContainer>
+    </div>
+  )
+}
+
+export default Page404

WANHEDA_Front_End/src/views/pages/page500/Page500.js

+import React from 'react'
+import {
+  CButton,
+  CCol,
+  CContainer,
+  CInput,
+  CInputGroup,
+  CInputGroupAppend,
+  CInputGroupPrepend,
+  CInputGroupText,
+  CRow
+} from '@coreui/react'
+import CIcon from '@coreui/icons-react'
+
+const Page500 = () => {
+  return (
+    <div className="c-app c-default-layout flex-row align-items-center">
+      <CContainer>
+        <CRow className="justify-content-center">
+          <CCol md="6">
+            <span className="clearfix">
+              <h1 className="float-left display-3 mr-4">500</h1>
+              <h4 className="pt-3">Houston, we have a problem!</h4>
+              <p className="text-muted float-left">The page you are looking for is temporarily unavailable.</p>
+            </span>
+            <CInputGroup className="input-prepend">
+              <CInputGroupPrepend>
+                <CInputGroupText>
+                  <CIcon name="cil-magnifying-glass" />
+                </CInputGroupText>
+              </CInputGroupPrepend>
+              <CInput size="16" type="text" placeholder="What are you looking for?" />
+              <CInputGroupAppend>
+                <CButton color="info">Search</CButton>
+              </CInputGroupAppend>
+            </CInputGroup>
+          </CCol>
+        </CRow>
+      </CContainer>
+    </div>
+  )
+}
+
+export default Page500

WANHEDA_Front_End/src/views/users/Login.js

+import React, { useEffect, useState } from "react";
+import { Link } from "react-router-dom";
+import { connect } from "react-redux";
+import { userLogin, userLoginError } from "../../action/user.actions";
+import {
+  CButton,
+  CCard,
+  CCardBody,
+  CCardGroup,
+  CCol,
+  CContainer,
+  CForm,
+  CInput,
+  CInputGroup,
+  CInputGroupPrepend,
+  CInputGroupText,
+  CRow,
+} from "@coreui/react";
+import CIcon from "@coreui/icons-react";
+
+const Login = (props) => {
+  const [email, setEmail] = useState("");
+
+  const [password, setPassword] = useState("");
+
+  useEffect(() => {
+    props.onLoginError("");
+  }, []);
+
+  const handleSignIn = (e) => {
+    e.preventDefault();
+    const user = {
+      email: email,
+      password: password,
+    };
+    setEmail("");
+    setPassword("");
+    props.onLogin(user);
+  };
+
+  return (
+    <div className="c-app c-default-layout flex-row align-items-center">
+      <CContainer>
+        <CRow className="justify-content-center">
+          <CCol md="8">
+            <CCardGroup>
+              <CCard className="p-4">
+                <CCardBody>
+                  <CForm>
+                    <h1>Login</h1>
+                    <p className="text-muted">Sign In to your account</p>
+                    <CInputGroup className="mb-3">
+                      <CInputGroupPrepend>
+                        <CInputGroupText>
+                          <CIcon name="cil-user" />
+                        </CInputGroupText>
+                      </CInputGroupPrepend>
+                      <CInput
+                        type="email"
+                        placeholder="Email"
+                        autoComplete="email"
+                        value={email}
+                        onChange={(e) => setEmail(e.target.value)}
+                        required
+                      />
+                    </CInputGroup>
+                    <CInputGroup className="mb-4">
+                      <CInputGroupPrepend>
+                        <CInputGroupText>
+                          <CIcon name="cil-lock-locked" />
+                        </CInputGroupText>
+                      </CInputGroupPrepend>
+                      <CInput
+                        type="password"
+                        placeholder="Password"
+                        autoComplete="current-password"
+                        value={password}
+                        onChange={(e) => setPassword(e.target.value)}
+                        required
+                      />
+                    </CInputGroup>
+                    {props.error ? (
+                      <p style={{ color: "red" }}> {props.error} </p>
+                    ) : (
+                      ""
+                    )}
+                    <CRow>
+                      <CCol xs="6">
+                        <CButton
+                          color="primary"
+                          className="px-4"
+                          onClick={handleSignIn}
+                        >
+                          Login
+                        </CButton>
+                      </CCol>
+                      <CCol xs="6" className="text-right">
+                        <CButton color="link" className="px-0">
+                          Forgot password?
+                        </CButton>
+                      </CCol>
+                    </CRow>
+                  </CForm>
+                </CCardBody>
+              </CCard>
+              <CCard
+                className="text-white bg-primary py-5 d-md-down-none"
+                style={{ width: "44%" }}
+              >
+                <CCardBody className="text-center">
+                  <div>
+                    <h2>Sign up</h2>
+                    <p>
+                      Lorem ipsum dolor sit amet, consectetur adipisicing elit,
+                      sed do eiusmod tempor incididunt ut labore et dolore magna
+                      aliqua.
+                    </p>
+                    <Link to="/register">
+                      <CButton
+                        color="primary"
+                        className="mt-3"
+                        active
+                        tabIndex={-1}
+                      >
+                        Register Now!
+                      </CButton>
+                    </Link>
+                  </div>
+                </CCardBody>
+              </CCard>
+            </CCardGroup>
+          </CCol>
+        </CRow>
+      </CContainer>
+    </div>
+  );
+};
+
+const mapStateToProps = (state) => {
+  return {
+    error: state.userData.error || "",
+  };
+};
+
+const mapDispatchToProps = (dispatch) => {
+  return {
+    onLogin: (user) => {
+      dispatch(userLogin(user));
+    },
+    onLoginError: (message) => {
+      dispatch(userLoginError(message));
+    },
+  };
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(Login);

WANHEDA_Front_End/src/views/users/Register.js

+import React, { useState } from "react";
+import { connect } from "react-redux";
+import { userSignUp, userSignUpError } from "../../action/user.actions";
+import {
+  CButton,
+  CCard,
+  CCardBody,
+  CCardFooter,
+  CCol,
+  CContainer,
+  CForm,
+  CInput,
+  CInputGroup,
+  CInputGroupPrepend,
+  CInputGroupText,
+  CRow,
+} from "@coreui/react";
+import CIcon from "@coreui/icons-react";
+import { toast } from "react-toastify";
+
+const Register = (props) => {
+  const [username, setUsername] = useState("");
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+
+  const handleSignUp = (e) => {
+    e.preventDefault();
+    props.onSignupError("");
+
+    if (username == "") {
+      props.onSignupError("Enter valid username");
+      return;
+    }
+
+    if (email == "") {
+      props.onSignupError("Enter valid email");
+      return;
+    }
+
+    if (password == "") {
+      props.onSignupError("Enter valid password");
+      return;
+    }
+    if (password == confirmPassword) {
+      const data = {
+        email: email,
+        password: password,
+        username: username,
+      };
+      props.onSignup(data);
+    } else {
+      toast.error("Password Don't match");
+      props.onSignupError("Password don't match");
+    }
+  };
+
+  return (
+    <div className="c-app c-default-layout flex-row align-items-center">
+      <CContainer>
+        <CRow className="justify-content-center">
+          <CCol md="9" lg="7" xl="6">
+            <CCard className="mx-4">
+              <CCardBody className="p-4">
+                <CForm>
+                  <h1>Register</h1>
+                  <p className="text-muted">Create your account</p>
+                  <CInputGroup className="mb-3">
+                    <CInputGroupPrepend>
+                      <CInputGroupText>
+                        <CIcon name="cil-user" />
+                      </CInputGroupText>
+                    </CInputGroupPrepend>
+                    <CInput
+                      type="text"
+                      placeholder="Username"
+                      autoComplete="username"
+                      onChange={(e) => setUsername(e.target.value)}
+                      required
+                    />
+                  </CInputGroup>
+                  <CInputGroup className="mb-3">
+                    <CInputGroupPrepend>
+                      <CInputGroupText>@</CInputGroupText>
+                    </CInputGroupPrepend>
+                    <CInput
+                      type="email"
+                      placeholder="Email"
+                      autoComplete="email"
+                      onChange={(e) => setEmail(e.target.value)}
+                      required
+                    />
+                  </CInputGroup>
+                  <CInputGroup className="mb-3">
+                    <CInputGroupPrepend>
+                      <CInputGroupText>
+                        <CIcon name="cil-lock-locked" />
+                      </CInputGroupText>
+                    </CInputGroupPrepend>
+                    <CInput
+                      type="password"
+                      placeholder="Password"
+                      autoComplete="new-password"
+                      required
+                      onChange={(e) => setPassword(e.target.value)}
+                    />
+                  </CInputGroup>
+                  <CInputGroup className="mb-4">
+                    <CInputGroupPrepend>
+                      <CInputGroupText>
+                        <CIcon name="cil-lock-locked" />
+                      </CInputGroupText>
+                    </CInputGroupPrepend>
+                    <CInput
+                      type="password"
+                      placeholder="Repeat password"
+                      autoComplete="new-password"
+                      onChange={(e) => setConfirmPassword(e.target.value)}
+                      required
+                    />
+                  </CInputGroup>
+
+                  {props.error ? (
+                    <p style={{ color: "red" }}> {props.error} </p>
+                  ) : (
+                    ""
+                  )}
+                  <CButton color="success" block onClick={handleSignUp}>
+                    Create Account
+                  </CButton>
+                </CForm>
+              </CCardBody>
+              <CCardFooter className="p-4">
+                <CRow>
+                  <CCol xs="12" sm="6">
+                    <CButton className="btn-facebook mb-1" block>
+                      <span>facebook</span>
+                    </CButton>
+                  </CCol>
+                  <CCol xs="12" sm="6">
+                    <CButton className="btn-twitter mb-1" block>
+                      <span>twitter</span>
+                    </CButton>
+                  </CCol>
+                </CRow>
+              </CCardFooter>
+            </CCard>
+          </CCol>
+        </CRow>
+      </CContainer>
+    </div>
+  );
+};
+
+const mapStateToProps = (state) => {
+  return {
+    error: state.userData.error || "",
+  };
+};
+
+const mapDispatchToProps = (dispatch) => {
+  return {
+    onSignup: (user) => {
+      dispatch(userSignUp(user));
+    },
+    onSignupError: (error) => {
+      dispatch(userSignUpError(error));
+    },
+  };
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(Register);

WANHEDA_Front_End/src/views/users/User.js

+import React from 'react'
+import { CCard, CCardBody, CCardHeader, CCol, CRow } from '@coreui/react'
+import CIcon from '@coreui/icons-react'
+
+import usersData from './UsersData'
+
+const User = ({match}) => {
+  const user = usersData.find( user => user.id.toString() === match.params.id)
+  const userDetails = user ? Object.entries(user) : 
+    [['id', (<span><CIcon className="text-muted" name="cui-icon-ban" /> Not found</span>)]]
+
+  return (
+    <CRow>
+      <CCol lg={6}>
+        <CCard>
+          <CCardHeader>
+            User id: {match.params.id}
+          </CCardHeader>
+          <CCardBody>
+              <table className="table table-striped table-hover">
+                <tbody>
+                  {
+                    userDetails.map(([key, value], index) => {
+                      return (
+                        <tr key={index.toString()}>
+                          <td>{`${key}:`}</td>
+                          <td><strong>{value}</strong></td>
+                        </tr>
+                      )
+                    })
+                  }
+                </tbody>
+              </table>
+          </CCardBody>
+        </CCard>
+      </CCol>
+    </CRow>
+  )
+}
+
+export default User

WANHEDA_Front_End/src/views/users/Users.js

+import React, { useState, useEffect } from 'react'
+import { useHistory, useLocation } from 'react-router-dom'
+import {
+  CBadge,
+  CCard,
+  CCardBody,
+  CCardHeader,
+  CCol,
+  CDataTable,
+  CRow,
+  CPagination
+} from '@coreui/react'
+
+import usersData from './UsersData'
+
+const getBadge = status => {
+  switch (status) {
+    case 'Active': return 'success'
+    case 'Inactive': return 'secondary'
+    case 'Pending': return 'warning'
+    case 'Banned': return 'danger'
+    default: return 'primary'
+  }
+}
+
+const Users = () => {
+  const history = useHistory()
+  const queryPage = useLocation().search.match(/page=([0-9]+)/, '')
+  const currentPage = Number(queryPage && queryPage[1] ? queryPage[1] : 1)
+  const [page, setPage] = useState(currentPage)
+
+  const pageChange = newPage => {
+    currentPage !== newPage && history.push(`/users?page=${newPage}`)
+  }
+
+  useEffect(() => {
+    currentPage !== page && setPage(currentPage)
+  }, [currentPage, page])
+
+  return (
+    <CRow>
+      <CCol xl={6}>
+        <CCard>
+          <CCardHeader>
+            Users
+            <small className="text-muted"> example</small>
+          </CCardHeader>
+          <CCardBody>
+          <CDataTable
+            items={usersData}
+            fields={[
+              { key: 'name', _classes: 'font-weight-bold' },
+              'registered', 'role', 'status'
+            ]}
+            hover
+            striped
+            itemsPerPage={5}
+            activePage={page}
+            clickableRows
+            onRowClick={(item) => history.push(`/users/${item.id}`)}
+            scopedSlots = {{
+              'status':
+                (item)=>(
+                  <td>
+                    <CBadge color={getBadge(item.status)}>
+                      {item.status}
+                    </CBadge>
+                  </td>
+                )
+            }}
+          />
+          <CPagination
+            activePage={page}
+            onActivePageChange={pageChange}
+            pages={5}
+            doubleArrows={false} 
+            align="center"
+          />
+          </CCardBody>
+        </CCard>
+      </CCol>
+    </CRow>
+  )
+}
+
+export default Users

WANHEDA_Front_End/src/views/users/UsersData.js

+const usersData = [
+  {id: 0, name: 'John Doe', registered: '2018/01/01', role: 'Guest', status: 'Pending'},
+  {id: 1, name: 'Samppa Nori', registered: '2018/01/01', role: 'Member', status: 'Active'},
+  {id: 2, name: 'Estavan Lykos', registered: '2018/02/01', role: 'Staff', status: 'Banned'},
+  {id: 3, name: 'Chetan Mohamed', registered: '2018/02/01', role: 'Admin', status: 'Inactive'},
+  {id: 4, name: 'Derick Maximinus', registered: '2018/03/01', role: 'Member', status: 'Pending'},
+  {id: 5, name: 'Friderik Dávid', registered: '2018/01/21', role: 'Staff', status: 'Active'},
+  {id: 6, name: 'Yiorgos Avraamu', registered: '2018/01/01', role: 'Member', status: 'Active'},
+  {id: 7, name: 'Avram Tarasios', registered: '2018/02/01', role: 'Staff', status: 'Banned'},
+  {id: 8, name: 'Quintin Ed', registered: '2018/02/01', role: 'Admin', status: 'Inactive'},
+  {id: 9, name: 'Enéas Kwadwo', registered: '2018/03/01', role: 'Member', status: 'Pending'},
+  {id: 10, name: 'Agapetus Tadeáš', registered: '2018/01/21', role: 'Staff', status: 'Active'},
+  {id: 11, name: 'Carwyn Fachtna', registered: '2018/01/01', role: 'Member', status: 'Active'},
+  {id: 12, name: 'Nehemiah Tatius', registered: '2018/02/01', role: 'Staff', status: 'Banned'},
+  {id: 13, name: 'Ebbe Gemariah', registered: '2018/02/01', role: 'Admin', status: 'Inactive'},
+  {id: 14, name: 'Eustorgios Amulius', registered: '2018/03/01', role: 'Member', status: 'Pending'},
+  {id: 15, name: 'Leopold Gáspár', registered: '2018/01/21', role: 'Staff', status: 'Active'},
+  {id: 16, name: 'Pompeius René', registered: '2018/01/01', role: 'Member', status: 'Active'},
+  {id: 17, name: 'Paĉjo Jadon', registered: '2018/02/01', role: 'Staff', status: 'Banned'},
+  {id: 18, name: 'Micheal Mercurius', registered: '2018/02/01', role: 'Admin', status: 'Inactive'},
+  {id: 19, name: 'Ganesha Dubhghall', registered: '2018/03/01', role: 'Member', status: 'Pending'},
+  {id: 20, name: 'Hiroto Šimun', registered: '2018/01/21', role: 'Staff', status: 'Active'},
+  {id: 21, name: 'Vishnu Serghei', registered: '2018/01/01', role: 'Member', status: 'Active'},
+  {id: 22, name: 'Zbyněk Phoibos', registered: '2018/02/01', role: 'Staff', status: 'Banned'},
+  {id: 23, name: 'Aulus Agmundr', registered: '2018/01/01', role: 'Member', status: 'Pending'},
+  {id: 42, name: 'Ford Prefect', registered: '2001/05/25', role: 'Alien', status: 'Don\'t panic!'}
+]
+
+export default usersData

WANHEDA_Front_End/src/views/widgets/Widgets.js

+import React from 'react'
+import {
+  CCardGroup,
+  CCardFooter,
+  CCol,
+  CLink,
+  CRow,
+  CWidgetProgress,
+  CWidgetIcon,
+  CWidgetProgressIcon,
+  CWidgetSimple,
+  CProgress,
+} from '@coreui/react'
+import WidgetsBrand from './WidgetsBrand'
+import WidgetsDropdown from './WidgetsDropdown'
+
+import ChartLineSimple from '../charts/ChartLineSimple'
+import ChartBarSimple from '../charts/ChartBarSimple'
+
+import CIcon from '@coreui/icons-react'
+
+const Widgets = () => {
+  return (
+    <>
+      <WidgetsDropdown />
+      <CRow>
+        <CCol xs="12" sm="6" lg="3">
+          <CWidgetProgress color="success" header="89.9%" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."/>
+        </CCol>
+        <CCol xs="12" sm="6" lg="3">
+          <CWidgetProgress color="info" header="12.124" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."/>
+        </CCol>
+        <CCol xs="12" sm="6" lg="3">
+          <CWidgetProgress color="warning" header="$98.111,00" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."/>
+        </CCol>
+        <CCol xs="12" sm="6" lg="3">
+          <CWidgetProgress header="2 TB" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim.">
+            <CProgress color="danger" animated size="xs" className="my-3" value={75}/>
+          </CWidgetProgress>
+        </CCol>
+
+        <CCol xs="12" sm="6" lg="3">
+          <CWidgetProgress inverse color="success" variant="inverse" header="89.9%" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."/>
+        </CCol>
+        <CCol xs="12" sm="6" lg="3">
+          <CWidgetProgress inverse color="info" variant="inverse" header="12.124" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."/>
+        </CCol>
+        <CCol xs="12" sm="6" lg="3">
+          <CWidgetProgress inverse color="warning" variant="inverse" header="$98.111,00" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."/>
+        </CCol>
+        <CCol xs="12" sm="6" lg="3">
+          <CWidgetProgress inverse color="danger" variant="inverse" value={95} header="2 TB" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."/>
+        </CCol>
+
+      </CRow>
+
+      <CRow>
+        <CCol xs="12" sm="6" lg="3">
+          <CWidgetIcon text="income" header="$1.999,50" color="primary">
+            <CIcon width={24} name="cil-settings"/>
+          </CWidgetIcon>
+        </CCol>
+        <CCol xs="12" sm="6" lg="3">
+          <CWidgetIcon text="income" header="$1.999,50" color="info">
+            <CIcon width={24} name="cil-user"/>
+          </CWidgetIcon>
+        </CCol>
+        <CCol xs="12" sm="6" lg="3">
+          <CWidgetIcon text="income" header="$1.999,50" color="warning">
+            <CIcon width={24} name="cil-moon"/>
+          </CWidgetIcon>
+        </CCol>
+        <CCol xs="12" sm="6" lg="3">
+          <CWidgetIcon text="income" header="$1.999,50" color="danger">
+            <CIcon width={24} name="cil-bell"/>
+          </CWidgetIcon>
+        </CCol>
+        <CCol xs="12" sm="6" lg="3">
+          <CWidgetIcon text="income" header="$1.999,50" color="primary" iconPadding={false}>
+            <CIcon width={24} name="cil-settings"/>
+          </CWidgetIcon>
+        </CCol>
+        <CCol xs="12" sm="6" lg="3">
+          <CWidgetIcon text="income" header="$1.999,50" color="info" iconPadding={false}>
+            <CIcon width={24} name="cil-laptop"/>
+          </CWidgetIcon>
+        </CCol>
+        <CCol xs="12" sm="6" lg="3">
+          <CWidgetIcon text="income" header="$1.999,50" color="warning" iconPadding={false}>
+            <CIcon width={24} name="cil-moon"/>
+          </CWidgetIcon>
+        </CCol>
+        <CCol xs="12" sm="6" lg="3">
+          <CWidgetIcon text="income" header="$1.999,50" color="danger" iconPadding={false}>
+            <CIcon width={24} name="cil-bell"/>
+          </CWidgetIcon>
+            
+        </CCol>
+        <CCol xs="12" sm="6" lg="4">
+          <CWidgetIcon text="income" header="$1.999,50" color="primary" iconPadding={false}>
+            <CIcon width={24} name="cil-settings" className="mx-5"/>
+          </CWidgetIcon>
+        </CCol>
+        <CCol xs="12" sm="6" lg="4">
+          <CWidgetIcon text="income" header="$1.999,50" color="info" iconPadding={false}>
+            <CIcon width={24} name="cil-laptop" className="mx-5"/>
+          </CWidgetIcon>
+        </CCol>
+        <CCol xs="12" sm="6" lg="4">
+          <CWidgetIcon 
+            text="income" 
+            header="$1.999,50" 
+            color="warning" 
+            iconPadding={false}
+            footerSlot={
+              <CCardFooter className="card-footer px-3 py-2">
+                <CLink
+                  className="font-weight-bold font-xs btn-block text-muted"
+                  href="https://coreui.io/"
+                  rel="noopener norefferer" 
+                  target="_blank"
+                >
+                  View more
+                  <CIcon name="cil-arrow-right" className="float-right" width="16"/>
+                </CLink>
+              </CCardFooter>
+            }
+          >
+            <CIcon width={24} name="cil-moon" className="mx-5"/>
+          </CWidgetIcon>
+        </CCol>
+      </CRow>
+      <WidgetsBrand/>
+      <WidgetsBrand withCharts/>
+      <CCardGroup className="mb-4">
+        <CWidgetProgressIcon
+          header="87.500"
+          text="Visitors"
+          color="gradient-info"
+        >
+          <CIcon name="cil-people" height="36"/>
+        </CWidgetProgressIcon>
+        <CWidgetProgressIcon
+          header="385"
+          text="New Clients"
+          color="gradient-success"
+        >
+          <CIcon name="cil-userFollow" height="36"/>
+        </CWidgetProgressIcon>
+        <CWidgetProgressIcon
+          header="1238"
+          text="Products sold"
+          color="gradient-warning"
+        >
+          <CIcon name="cil-basket" height="36"/>
+        </CWidgetProgressIcon>
+        <CWidgetProgressIcon
+          header="28%"
+          text="Returning Visitors"
+        >
+          <CIcon name="cil-chartPie" height="36"/>
+        </CWidgetProgressIcon>
+        <CWidgetProgressIcon
+          header="5:34:11"
+          text="Avg. Time"
+          color="gradient-danger"
+          progressSlot={
+            <CProgress color="danger" size="xs" value={75} animated className="my-3"
+          />}
+        >
+          <CIcon name="cil-speedometer" height="36"/>
+        </CWidgetProgressIcon>
+      </CCardGroup>
+      <CCardGroup className="mb-4">
+        <CWidgetProgressIcon
+          header="87.500"
+          text="Visitors"
+          color="gradient-info"
+          inverse
+        >
+          <CIcon name="cil-people" height="36"/>
+        </CWidgetProgressIcon>
+        <CWidgetProgressIcon
+          header="385"
+          text="New Clients"
+          color="gradient-success"
+          inverse
+        >
+          <CIcon name="cil-userFollow" height="36"/>
+        </CWidgetProgressIcon>
+        <CWidgetProgressIcon
+          header="1238"
+          text="Products sold"
+          color="gradient-warning"
+          inverse
+        >
+          <CIcon name="cil-basket" height="36"/>
+        </CWidgetProgressIcon>
+        <CWidgetProgressIcon
+          header="28%"
+          text="Returning Visitors"
+          color="gradient-primary"
+          inverse
+        >
+          <CIcon name="cil-chartPie" height="36"/>
+        </CWidgetProgressIcon>
+        <CWidgetProgressIcon
+          header="5:34:11"
+          text="Avg. Time"
+          color="gradient-danger"
+          inverse
+        >
+          <CIcon name="cil-speedometer" height="36"/>
+        </CWidgetProgressIcon>
+      </CCardGroup>
+      <CRow>
+        <CCol sm="6" md="2">
+          <CWidgetProgressIcon
+            header="87.500"
+            text="Visitors"
+            color="gradient-info"
+          >
+            <CIcon name="cil-people" height="36"/>
+          </CWidgetProgressIcon>
+        </CCol>
+        <CCol sm="6" md="2">
+          <CWidgetProgressIcon
+            header="385"
+            text="New Clients"
+            color="gradient-success"
+          >
+            <CIcon name="cil-userFollow" height="36"/>
+          </CWidgetProgressIcon>
+        </CCol>
+        <CCol sm="6" md="2">
+          <CWidgetProgressIcon
+            header="1238"
+            text="Products sold"
+            color="gradient-warning"
+          >
+            <CIcon name="cil-basket" height="36"/>
+          </CWidgetProgressIcon>
+        </CCol>
+        <CCol sm="6" md="2">
+          <CWidgetProgressIcon
+            header="28%"
+            text="Returning Visitors"
+            color="gradient-primary"
+          >
+            <CIcon name="cil-chartPie" height="36"/>
+          </CWidgetProgressIcon>
+        </CCol>
+        <CCol sm="6" md="2">
+          <CWidgetProgressIcon
+            header="5:34:11"
+            text="Avg. Time"
+            color="gradient-danger"
+          >
+            <CIcon name="cil-speedometer" height="36"/>
+          </CWidgetProgressIcon>
+        </CCol>
+        <CCol sm="6" md="2">
+          <CWidgetProgressIcon
+            header="972"
+            text="comments"
+            color="gradient-info"
+          >
+            <CIcon name="cil-speech" height="36"/>
+          </CWidgetProgressIcon>
+        </CCol>
+      </CRow>
+      <CRow>
+        <CCol sm="6" md="2">
+          <CWidgetProgressIcon
+            header="87.500"
+            text="Visitors"
+            color="gradient-info"
+            inverse
+          >
+            <CIcon name="cil-people" height="36"/>
+          </CWidgetProgressIcon>
+        </CCol>
+        <CCol sm="6" md="2">
+          <CWidgetProgressIcon
+            header="385"
+            text="New Clients"
+            color="gradient-success"
+            inverse
+          >
+            <CIcon name="cil-userFollow" height="36"/>
+          </CWidgetProgressIcon>
+        </CCol>
+        <CCol sm="6" md="2">
+          <CWidgetProgressIcon
+            header="1238"
+            text="Products sold"
+            color="gradient-warning"
+            inverse
+          >
+            <CIcon name="cil-basket" height="36"/>
+          </CWidgetProgressIcon>
+        </CCol>
+        <CCol sm="6" md="2">
+          <CWidgetProgressIcon
+            header="28%"
+            text="Returning Visitors"
+            color="gradient-primary"
+            inverse
+          >
+            <CIcon name="cil-chartPie" height="36"/>
+          </CWidgetProgressIcon>
+        </CCol>
+        <CCol sm="6" md="2">
+          <CWidgetProgressIcon
+            header="5:34:11"
+            text="Avg. Time"
+            color="gradient-danger"
+            inverse
+          >
+            <CIcon name="cil-speedometer" height="36"/>
+          </CWidgetProgressIcon>
+        </CCol>
+        <CCol sm="6" md="2">
+          <CWidgetProgressIcon
+            header="972"
+            text="comments"
+            color="gradient-info"
+            inverse
+          >
+            <CIcon name="cil-speech" height="36"/>
+          </CWidgetProgressIcon>
+        </CCol>
+      </CRow>
+      <CRow>
+        <CCol sm="4" lg="2">
+          <CWidgetSimple header="title" text="1,123">
+            <ChartLineSimple style={{ height: '40px' }} borderColor="danger"/>
+          </CWidgetSimple>
+        </CCol>
+        <CCol sm="4" lg="2">
+          <CWidgetSimple header="title" text="1,123">
+            <ChartLineSimple style={{ height: '40px' }} borderColor="primary"/>
+          </CWidgetSimple>
+        </CCol>
+        <CCol sm="4" lg="2">
+          <CWidgetSimple header="title" text="1,123">
+            <ChartLineSimple style={{ height: '40px' }} borderColor="success"/>
+          </CWidgetSimple>
+        </CCol>
+        <CCol sm="4" lg="2">
+          <CWidgetSimple header="title" text="1,123">
+            <ChartBarSimple style={{ height: '40px' }} backgroundColor="danger"/>
+          </CWidgetSimple>
+        </CCol>
+        <CCol sm="4" lg="2">
+          <CWidgetSimple header="title" text="1,123">
+            <ChartBarSimple style={{ height: '40px' }} backgroundColor="primary"/>
+          </CWidgetSimple>
+        </CCol>
+        <CCol sm="4" lg="2">
+          <CWidgetSimple header="title" text="1,123">
+            <ChartBarSimple style={{ height: '40px' }} backgroundColor="success"/>
+          </CWidgetSimple>
+        </CCol>
+      </CRow>
+    </>
+  )
+}
+
+export default Widgets

WANHEDA_Front_End/src/views/widgets/WidgetsBrand.js

+import React from 'react';
+import PropTypes from 'prop-types';
+import { CWidgetBrand, CRow, CCol } from '@coreui/react';
+import CIcon from '@coreui/icons-react';
+import ChartLineSimple from '../charts/ChartLineSimple';
+
+const WidgetsBrand = ({withCharts})=>{
+
+  // render
+
+  return withCharts ?
+  <CRow>
+    <CCol sm="6" lg="3">
+      <CWidgetBrand
+        color="facebook"
+        rightHeader="89k"
+        rightFooter="friends"
+        leftHeader="459"
+        leftFooter="feeds"
+      >
+        <CIcon
+          name="cib-facebook"
+          height="52"
+          className="my-4"
+        />
+        <ChartLineSimple
+          className="position-absolute w-100 h-100"
+          backgroundColor="rgba(255,255,255,.1)"
+          dataPoints={[65, 59, 84, 84, 51, 55, 40]}
+          label="Friends"
+          labels="months"
+        />
+      </CWidgetBrand>
+    </CCol>
+
+    <CCol sm="6" lg="3">
+      <CWidgetBrand
+        color="twitter"
+        rightHeader="973k"
+        rightFooter="followers"
+        leftHeader="1.792"
+        leftFooter="tweets"
+      >
+        <CIcon
+          name="cib-twitter"
+          height="52"
+          className="my-4"
+        />
+        <ChartLineSimple
+          className="position-absolute w-100 h-100"
+          backgroundColor="rgba(255,255,255,.1)"
+          dataPoints={[1, 13, 9, 17, 34, 41, 38]}
+          label="Followers"
+          labels="months"
+        />
+      </CWidgetBrand>
+    </CCol>
+
+    <CCol sm="6" lg="3">
+      <CWidgetBrand
+        color="linkedin"
+        rightHeader="500+"
+        rightFooter="contracts"
+        leftHeader="292"
+        leftFooter="feeds"
+      >
+        <CIcon
+          name="cib-linkedin"
+          height="52"
+          className="my-4"
+        />
+        <ChartLineSimple
+          className="position-absolute w-100 h-100"
+          backgroundColor="rgba(255,255,255,.1)"
+          dataPoints={[78, 81, 80, 45, 34, 12, 40]}
+          label="Contracts"
+          labels="months"
+        />
+      </CWidgetBrand>
+    </CCol> 
+
+    <CCol sm="6" lg="3">
+      <CWidgetBrand
+        rightHeader="12"
+        rightFooter="events"
+        leftHeader="4"
+        leftFooter="meetings"
+        color="gradient-warning"
+      >
+        <CIcon
+          name="cil-calendar"
+          height="52"
+          className="my-4"
+        />
+        <ChartLineSimple
+          className="position-absolute w-100 h-100"
+          backgroundColor="rgba(255,255,255,.1)"
+          dataPoints={[35, 23, 56, 22, 97, 23, 64]}
+          label="Followers"
+          labels="months"
+        />
+      </CWidgetBrand>
+    </CCol>
+  </CRow> :
+  
+  <CRow>
+    <CCol sm="6" lg="3">
+      <CWidgetBrand
+        color="facebook"
+        rightHeader="89k"
+        rightFooter="friends"
+        leftHeader="459"
+        leftFooter="feeds"
+      >
+        <CIcon
+          name="cib-facebook"
+          height="56"
+          className="my-4"
+        />
+      </CWidgetBrand>
+    </CCol>
+
+    <CCol sm="6" lg="3">
+      <CWidgetBrand
+        color="twitter"
+        rightHeader="973k"
+        rightFooter="followers"
+        leftHeader="1.792"
+        leftFooter="tweets"
+      >
+        <CIcon
+          name="cib-twitter"
+          height="56"
+          className="my-4"
+        />
+      </CWidgetBrand>
+    </CCol>
+
+    <CCol sm="6" lg="3">
+      <CWidgetBrand
+        color="linkedin"
+        rightHeader="500+"
+        rightFooter="contracts"
+        leftHeader="292"
+        leftFooter="feeds"
+      >
+        <CIcon
+          name="cib-linkedin"
+          height="56"
+          className="my-4"
+        />
+      </CWidgetBrand>
+    </CCol>
+
+    <CCol sm="6" lg="3">
+      <CWidgetBrand
+        rightHeader="12"
+        rightFooter="events"
+        leftHeader="4"
+        leftFooter="meetings"
+        color="gradient-warning"
+      >
+        <CIcon
+          name="cil-calendar"
+          height="56"
+          className="my-4"
+        />
+      </CWidgetBrand>
+    </CCol>
+  </CRow>
+}
+
+WidgetsBrand.propTypes = {
+  withCharts: PropTypes.bool
+}
+
+export default WidgetsBrand

WANHEDA_Front_End/src/views/widgets/WidgetsDropdown.js

+import React from 'react'
+import {
+  CWidgetDropdown,
+  CRow,
+  CCol,
+  CDropdown,
+  CDropdownMenu,
+  CDropdownItem,
+  CDropdownToggle
+} from '@coreui/react'
+import CIcon from '@coreui/icons-react'
+import ChartLineSimple from '../charts/ChartLineSimple'
+import ChartBarSimple from '../charts/ChartBarSimple'
+
+const WidgetsDropdown = () => {
+  // render
+  return (
+    <CRow>
+      <CCol sm="6" lg="3">
+        <CWidgetDropdown
+          color="gradient-primary"
+          header="9.823"
+          text="Members online"
+          footerSlot={
+            <ChartLineSimple
+              pointed
+              className="c-chart-wrapper mt-3 mx-3"
+              style={{height: '70px'}}
+              dataPoints={[65, 59, 84, 84, 51, 55, 40]}
+              pointHoverBackgroundColor="primary"
+              label="Members"
+              labels="months"
+            />
+          }
+        >
+          <CDropdown>
+            <CDropdownToggle color="transparent">
+              <CIcon name="cil-settings"/>
+            </CDropdownToggle>
+            <CDropdownMenu className="pt-0" placement="bottom-end">
+              <CDropdownItem>Action</CDropdownItem>
+              <CDropdownItem>Another action</CDropdownItem>
+              <CDropdownItem>Something else here...</CDropdownItem>
+              <CDropdownItem disabled>Disabled action</CDropdownItem>
+            </CDropdownMenu>
+          </CDropdown>
+        </CWidgetDropdown>
+      </CCol>
+
+      <CCol sm="6" lg="3">
+        <CWidgetDropdown
+          color="gradient-info"
+          header="9.823"
+          text="Members online"
+          footerSlot={
+            <ChartLineSimple
+              pointed
+              className="mt-3 mx-3"
+              style={{height: '70px'}}
+              dataPoints={[1, 18, 9, 17, 34, 22, 11]}
+              pointHoverBackgroundColor="info"
+              options={{ elements: { line: { tension: 0.00001 }}}}
+              label="Members"
+              labels="months"
+            />
+          }
+        >
+          <CDropdown>
+            <CDropdownToggle caret={false} color="transparent">
+              <CIcon name="cil-location-pin"/>
+            </CDropdownToggle>
+            <CDropdownMenu className="pt-0" placement="bottom-end">
+              <CDropdownItem>Action</CDropdownItem>
+              <CDropdownItem>Another action</CDropdownItem>
+              <CDropdownItem>Something else here...</CDropdownItem>
+              <CDropdownItem disabled>Disabled action</CDropdownItem>
+            </CDropdownMenu>
+          </CDropdown>
+        </CWidgetDropdown>
+      </CCol>
+
+      <CCol sm="6" lg="3">
+        <CWidgetDropdown
+          color="gradient-warning"
+          header="9.823"
+          text="Members online"
+          footerSlot={
+            <ChartLineSimple
+              className="mt-3"
+              style={{height: '70px'}}
+              backgroundColor="rgba(255,255,255,.2)"
+              dataPoints={[78, 81, 80, 45, 34, 12, 40]}
+              options={{ elements: { line: { borderWidth: 2.5 }}}}
+              pointHoverBackgroundColor="warning"
+              label="Members"
+              labels="months"
+            />
+          }
+        >
+          <CDropdown>
+            <CDropdownToggle color="transparent">
+              <CIcon name="cil-settings"/>
+            </CDropdownToggle>
+            <CDropdownMenu className="pt-0" placement="bottom-end">
+              <CDropdownItem>Action</CDropdownItem>
+              <CDropdownItem>Another action</CDropdownItem>
+              <CDropdownItem>Something else here...</CDropdownItem>
+              <CDropdownItem disabled>Disabled action</CDropdownItem>
+            </CDropdownMenu>
+          </CDropdown>
+        </CWidgetDropdown>
+      </CCol>
+
+      <CCol sm="6" lg="3">
+        <CWidgetDropdown
+          color="gradient-danger"
+          header="9.823"
+          text="Members online"
+          footerSlot={
+            <ChartBarSimple
+              className="mt-3 mx-3"
+              style={{height: '70px'}}
+              backgroundColor="rgb(250, 152, 152)"
+              label="Members"
+              labels="months"
+            />
+          }
+        >
+          <CDropdown>
+            <CDropdownToggle caret className="text-white" color="transparent">
+              <CIcon name="cil-settings"/>
+            </CDropdownToggle>
+            <CDropdownMenu className="pt-0" placement="bottom-end">
+              <CDropdownItem>Action</CDropdownItem>
+              <CDropdownItem>Another action</CDropdownItem>
+              <CDropdownItem>Something else here...</CDropdownItem>
+              <CDropdownItem disabled>Disabled action</CDropdownItem>
+            </CDropdownMenu>
+          </CDropdown>
+        </CWidgetDropdown>
+      </CCol>
+    </CRow>
+  )
+}
+
+export default WidgetsDropdown