Initial commit

2018-06-11 11:09:35 +02:00
commit ed7df7b11f
1954 changed files with 483354 additions and 0 deletions
--- a/client-wiaas/src/mainComponents/box/WiaasBox.jsx
+++ b/client-wiaas/src/mainComponents/box/WiaasBox.jsx
@@ -0,0 +1,120 @@
+import React, {Component} from 'react';
+import {Container, Col, Row, Popover, PopoverHeader, PopoverBody} from 'reactstrap';
+
+let boxCount = 0;
+
+class WiaasBox extends Component {
+    constructor(props) {
+        super(props);
+
+        if(!this.props.id){
+            boxCount++;
+            this.idBox = 'wiaas-box-' + boxCount;
+        }else{
+            this.idBox = this.props.id;
+        }
+
+        this.className = this.props.className ? 'wiaas-box ' + this.props.className : 'wiaas-box';
+
+        this.toggleBoxVisibility = this.toggleBoxVisibility.bind(this);
+        this.togglePopover = this.togglePopover.bind(this);
+        this.getVisibilityIcon = this.getVisibilityIcon.bind(this);
+        this.getExtraHeaderContentSize = this.getExtraHeaderContentSize.bind(this);
+        this.getMainTitleContentSize = this.getMainTitleContentSize.bind(this);
+        this.state = {
+            isContentVisible: typeof this.props.isContentVisible !== 'undefined' ? this.props.isContentVisible : true,
+            visibilityIcon: 'fa fa-minus',
+            popoverOpen: false
+        };
+    }
+
+    toggleBoxVisibility() {
+        this.setState({
+            isContentVisible: !this.state.isContentVisible,
+        });
+    }
+
+    togglePopover(){
+        this.setState({
+            popoverOpen: !this.state.popoverOpen
+        });
+    }
+
+    getVisibilityIcon() {
+        return this.state.isContentVisible ? 'fa fa-minus' : 'fa fa-plus';
+    }
+
+    getMainTitleContentSize() {
+        return  this.props.customHeader ? 4 : 10;
+    }
+
+    getExtraHeaderContentSize() {
+        if(this.props.mainTitle) {
+            return this.props.customHeader ? 7 : 1;
+        }
+
+        return 12;
+    }
+
+    render() {
+        const {mainTitle, infoPopover} = this.props;
+        const CustomHeader = this.props.customHeader;
+        const customHeaderParams = this.props.customHeaderParams || {};
+
+        return (
+            <div className="wiaas-box-container">
+                <div id={this.idBox} className={this.className} >
+                    {
+                    (mainTitle || CustomHeader) &&
+                    <div className="wiaas-box-header">
+                        <Container fluid={true}>
+                            <Row>
+                                {
+                                    mainTitle &&
+                                    <Col lg={this.getMainTitleContentSize()} xs="12">
+                                        <div className="wiaas-main-title">{mainTitle}</div>
+                                        <div className="wiaas-divider"></div>
+                                    </Col>
+                                }
+                                <Col lg={this.getExtraHeaderContentSize()} md="12" xs="12">
+                                    {
+                                        CustomHeader && <CustomHeader params={customHeaderParams}/>
+                                    }
+                                </Col>
+                                    {
+                                        this.props.children &&
+                                        <div className="wiaas-box-visibility-icon wiaas-icon" onClick={this.toggleBoxVisibility}>
+                                            <i className={this.getVisibilityIcon()} aria-hidden="true"></i>
+                                        </div>
+                                    }
+                                    {
+                                        infoPopover &&
+                                        <div id={'popover-' + this.idBox} onClick={this.togglePopover} className="wiaas-info-icon wiaas-icon">
+                                            <i className="fa fa-question" aria-hidden="true"></i>
+                                            <Popover placement="bottom"
+                                                    container={this.idBox}
+                                                    isOpen={this.state.popoverOpen}
+                                                    target={'popover-' + this.idBox}
+                                                    toggle={this.togglePopover}>
+                                                <PopoverHeader>{infoPopover.title}</PopoverHeader>
+                                                <PopoverBody dangerouslySetInnerHTML={{__html: infoPopover.message}}></PopoverBody>
+                                            </Popover>
+                                        </div>
+                                    }
+                            </Row>
+                        </Container>
+                    </div>
+                    }
+                    {
+                        this.state.isContentVisible &&
+                        <div className="wiaas-box-content">
+                            {this.props.children}
+                        </div>
+                    }
+                </div>
+            </div>
+        );
+    }
+}
+
+export default WiaasBox;
--- a/client-wiaas/src/mainComponents/box/WiaasBox.scss
+++ b/client-wiaas/src/mainComponents/box/WiaasBox.scss
@@ -0,0 +1,59 @@
+@import '../../styleConstants.scss';
+
+.wiaas-box-container {
+    padding: 0.5rem 0;
+    height: 100%;
+}
+
+.wiaas-box {
+    border-radius: $box-radius;
+    height: 100%;
+}
+
+.wiaas-box-header {
+    position: relative;
+    padding: 19px;
+    border-radius: $box-radius $box-radius 0 0;
+    box-shadow: 0 2px 4px 0 $boxShadow;
+    background: $container-background;
+    z-index: 1;
+}
+
+.wiaas-main-title {
+    display: inline-block;
+    font-size: $font-size-big;
+    font-weight: 600;
+    text-align: left;
+    color: $title-color;
+}
+
+.wiaas-divider {
+    display: inline-block;
+    width: 1px;
+    height: 1em;
+    background-color: $divider-color;
+    margin-left: 20px;
+}
+
+.wiaas-icon {
+    width: 1.5625rem;
+    height: 1.5625rem;
+    text-align: center;
+    border-radius: 50%;
+    border: solid 1px $borderColor;
+    cursor: pointer;
+}
+
+.wiaas-box-visibility-icon {
+    position: absolute;
+    right: 0.5rem;
+}
+
+.wiaas-info-icon {
+    position: absolute;
+    right: 2.5625rem;
+}
+
+.no-margin-box {
+    margin: 0;
+}
--- a/client-wiaas/src/mainComponents/dialog/DialogBox.jsx
+++ b/client-wiaas/src/mainComponents/dialog/DialogBox.jsx
@@ -0,0 +1,96 @@
+import React, {Component} from 'react';
+import {connect} from 'react-redux';
+import {Button, Modal, ModalHeader, ModalBody, ModalFooter, Input} from 'reactstrap';
+import {setDialogOpenFlag} from '../../actions/dialog/dialogActions';
+import './DialogBox.css';
+
+class DialogBox extends Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+          inputValue: ''
+        };
+
+        this.toggleDialogBox = this.toggleDialogBox.bind(this);
+        this.handleInputChange = this.handleInputChange.bind(this);
+    }
+
+    toggleDialogBox(isDialogOpen, button) {
+        if(button && !button.waitForAction){
+            this.props.dispatch(setDialogOpenFlag(!isDialogOpen));
+        }
+
+        if(!button){
+            this.props.dispatch(setDialogOpenFlag(!isDialogOpen));
+        }
+
+        if (button && button.action) {
+            button.action(this.state);
+        }
+    }
+
+    handleInputChange(event) {
+      this.setState({inputValue: event.target.value});
+      event.preventDefault();
+    }
+
+
+    render() {
+        const {isDialogOpen, dialogContent} = this.props;
+        const specificClass = dialogContent && dialogContent.class ? dialogContent.class : '';
+
+        return (
+            <div>
+            { dialogContent &&
+                <Modal isOpen={isDialogOpen} toggle={this.toggleDialogBox} className={"generic-dialog-box " + specificClass}>
+                    <ModalHeader>
+                        {dialogContent.header ? dialogContent.header : 'Confirmation'}
+                        {
+                            dialogContent.hasCloseIcon &&
+                            <i className="fa fa-times dialog-close"
+                                onClick={() => {this.toggleDialogBox(isDialogOpen)}}
+                                aria-hidden="true"></i>
+                        }
+                    </ModalHeader>
+                    <ModalBody>
+                        {dialogContent.TagName && <dialogContent.TagName params={dialogContent.params || {}}/>}
+                        {dialogContent.body && dialogContent.body}
+                        {dialogContent.bodyVariable &&
+                            <span className="highlighted-item">{dialogContent.bodyVariable}?</span>
+                        }
+                        {(!dialogContent.body && !dialogContent.TagName) && 'Are you sure?'}
+                        {dialogContent.inputArray &&
+                            dialogContent.inputArray.map((inputContent, mapKey) =>
+                                <Input key={inputContent.class + mapKey}
+                                    className={'dialog-input ' + inputContent.class}
+                                    type={inputContent.type}
+                                    placeholder={inputContent.placeholder}
+                                    value={this.state.inputValue}
+                                    onChange={this.handleInputChange}
+                                    autoFocus />)
+                        }
+                    </ModalBody>
+                    { ('buttons' in dialogContent && dialogContent.buttons.length) &&
+                        <ModalFooter>
+                            {
+                                dialogContent.buttons.map((buttonObject, mapKey) =>
+                                <Button key={mapKey}
+                                    id={buttonObject.id}
+                                    color={buttonObject.color}
+                                    className={buttonObject.className}
+                                    onClick={() => {this.toggleDialogBox(isDialogOpen, buttonObject)}}>
+                                    {buttonObject.name}
+                                </Button>)
+                            }
+                        </ModalFooter>
+                    }
+                </Modal>
+            }
+            </div>
+        );
+    }
+
+}
+
+export default connect()(DialogBox);
--- a/client-wiaas/src/mainComponents/dialog/DialogBox.scss
+++ b/client-wiaas/src/mainComponents/dialog/DialogBox.scss
@@ -0,0 +1,128 @@
+@import "../../styleConstants.scss";
+
+.ui-dialog {
+    position: relative;
+    top: 50%;
+    left: 50%;
+    outline: 0 none;
+    padding: 0!important !important;
+    z-index: 101;
+    background-color: #fff;
+    border: 1px solid #f6f6f6;
+}
+
+.ui-dialog.react-draggable .ui-dialog-titlebar {
+    cursor: move;
+}
+
+.ui-dialog .ui-dialog-titlebar {
+    position: relative;
+    font-size: 1em;
+    border-radius: 0.5em;
+    padding: 0.5em;
+    height: 3em;
+    border-bottom: 1px solid #f6f6f6;
+}
+
+.ui-dialog .ui-dialog-titlebar .title {
+    float: left;
+    margin-right: 0.5em;
+    font-family: Arial,Helvetica,sans-serif;
+    font-size: 1.5em;
+}
+
+.ui-dialog .ui-dialog-content {
+    background: none repeat scroll 0 0 transparent;
+    border: 0 none;
+    overflow: auto;
+    position: relative;
+    padding: 0.5em;
+}
+
+.ui-dialog .ui-dialog-buttonpane {
+    position: absolute;
+    width: 100%;
+    bottom: 0;
+    text-align: right;
+    border-width: 1px 0 0;
+    border-top: 1px solid #f6f6f6;
+}
+
+.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
+    padding: 0.5em;
+}
+
+.ui-dialog .ui-dialog-buttonpane button {
+    margin: 0 0.5em;
+    cursor: pointer;
+    background-color: #f6f6f6;
+    padding: 0.5em 1em;
+    outline: none;
+    border: 1px solid #ccc;
+    border-radius: 3px;
+}
+
+.modal {
+    text-align: center;
+    padding: 0!important;
+}
+
+.modal:before {
+    content: '';
+    display: inline-block;
+    height: 100%;
+    vertical-align: middle;
+}
+
+.modal-dialog {
+    display: inline-block;
+    text-align: left;
+    vertical-align: middle;
+}
+
+.modal-title {
+    color: $whiteColor;
+}
+
+.modal-header {
+    background: $blueColor;
+}
+
+.modal-content {
+    border-radius: 7px;
+}
+
+.generic-dialog-box {
+    min-width: 30%;
+
+    .btn-success {
+        background-color: $greenColor;
+        border-color: $borderColor;
+        cursor: pointer;
+    }
+
+    .btn-secondary {
+        background-color: $whiteColor;
+        color: $darkGreyColor;
+        cursor: pointer;
+    }
+}
+
+.highlighted-item {
+    font-weight: $font-weight;
+}
+
+.installation-scheduling {
+    width: 35%;
+}
+
+.dialog-input {
+    margin-top: 1rem;
+}
+
+.dialog-close {
+    color: $whiteColor;
+    position: absolute;
+    right: 1rem;
+    cursor: pointer;
+}
--- a/client-wiaas/src/mainComponents/menu/Menu.jsx
+++ b/client-wiaas/src/mainComponents/menu/Menu.jsx
@@ -0,0 +1,107 @@
+import React, {Component} from 'react';
+import {connect} from 'react-redux';
+import {Link} from 'react-router-dom';
+import {
+    Collapse,
+    Navbar,
+    NavbarToggler,
+    NavbarBrand,
+    Nav,
+    NavItem,
+    NavLink
+} from 'reactstrap';
+import {fetchCartCount} from '../../actions/cart/cartActions';
+import {resetActiveSubModule} from '../../actions/page/pageActions';
+import CartIcon from '../../containers/cart/components/CartIcon.jsx';
+import Submenu from './Submenu.jsx';
+import './menu.css';
+import logoWhite from '../../svg/logoWhite.svg';
+
+class Menu extends Component {
+    constructor(props) {
+        super(props);
+
+        this.toggle = this.toggle.bind(this);
+        this.toggleSubmenu = this.toggleSubmenu.bind(this);
+        this.toggleDropdown = this.toggleDropdown.bind(this);
+        this.state = {
+            isOpen: false,
+            isSubmenuOpen: false,
+            dropdownOpen: false
+        };
+    }
+
+    toggle() {
+        this.setState({
+            isOpen: !this.state.isOpen
+        });
+    }
+
+    toggleSubmenu() {
+        this.setState({
+            isSubmenuOpen: !this.state.isSubmenuOpen
+        });
+    }
+
+    toggleDropdown() {
+        this.setState({
+            dropdownOpen: !this.state.dropdownOpen
+       });
+    }
+
+    isInMenu(module) {
+        return parseInt(module.isInMenu, 10) === 1;
+    }
+
+    componentDidMount() {
+        this.props.dispatch(fetchCartCount());
+    }
+
+    onModuleClick(moduleName){
+        this.props.dispatch(resetActiveSubModule());
+        this.props.addActiveClass(moduleName);
+    }
+
+    render() {
+        const {wiaasModules} = this.props;
+
+        return (
+            <div>
+                <Navbar id="main-menu-bar" className="navigation-bar" dark expand="md">
+                    <NavbarBrand tag={Link} to="/"><img className="logo-image" src={logoWhite} alt="WIAAS" /></NavbarBrand>
+                    <NavbarToggler onClick={this.toggle}/>
+                    <Collapse isOpen={this.state.isOpen} navbar>
+                        <Nav className="mr-auto" navbar>
+                            {
+                                (wiaasModules && wiaasModules.modules) &&
+                                wiaasModules.modules.filter(this.isInMenu).map((module, index) =>
+                                    <NavItem key={index}
+                                        id={"nav-button-" + module.url}
+                                        className={(this.props.activeModule === module.url) ? "navbar-button active" : "navbar-button"}
+                                        onClick={() => this.onModuleClick(module.url)}>
+                                        <NavLink tag={Link} to={'/' + module.url}>{module.menuName}</NavLink>
+                                    </NavItem>
+                                )
+                            }
+                        </Nav>
+                        <Nav className="nav-btn-cart navbar-right" navbar>
+                            <NavItem id="nav-button-cart">
+                                <NavLink tag={Link} to="/cart">
+                                    <span className="fa fa-shopping-cart cart-icon"></span>
+                                    <CartIcon cartCount={this.props.cartCount} />
+                                </NavLink>
+                            </NavItem>
+                        </Nav>
+                    </Collapse>
+                </Navbar>
+                <Submenu activeModule={this.props.activeModule}/>
+            </div>
+        );
+    }
+}
+const mapStateToProps = (state) => ({
+    wiaasModules: state.auth.modules,
+    cartCount: state.cartReducer.cartCount
+});
+
+export default connect(mapStateToProps)(Menu);
--- a/client-wiaas/src/mainComponents/menu/Submenu.jsx
+++ b/client-wiaas/src/mainComponents/menu/Submenu.jsx
@@ -0,0 +1,128 @@
+import React, {Component} from 'react';
+import {connect} from 'react-redux';
+import {Link} from 'react-router-dom';
+import {
+    Collapse,
+    Navbar,
+    NavbarToggler,
+    Nav,
+    NavItem,
+    NavLink,
+    Dropdown,
+    DropdownToggle,
+    DropdownMenu,
+    DropdownItem
+} from 'reactstrap';
+import {logout} from '../../actions/login/authActions';
+import {setActiveSubModule} from '../../actions/page/pageActions';
+import {recieveProfileInfo} from '../../actions/profileSettings/profileSettingsActions';
+import CoMarketCatalogSelect from '../../containers/coMarket/components/CoMarketCatalogSelect.jsx';
+import {menuTexts} from '../../constants/menuConstants';
+
+const extraSubmenuContent = {
+    'co-market': CoMarketCatalogSelect,
+    'cart': CoMarketCatalogSelect
+};
+
+class Submenu extends Component {
+    constructor(props) {
+        super(props);
+
+        this.toggle = this.toggle.bind(this);
+        this.toggleSubmenu = this.toggleSubmenu.bind(this);
+        this.toggleDropdown = this.toggleDropdown.bind(this);
+        this.logoutHandle = this.logoutHandle.bind(this);
+        this.state = {
+            isOpen: false,
+            isSubmenuOpen: false,
+            dropdownOpen: false
+        };
+    }
+
+    toggle() {
+        this.setState({
+            isOpen: !this.state.isOpen
+        });
+    }
+
+    toggleSubmenu() {
+        this.setState({
+            isSubmenuOpen: !this.state.isSubmenuOpen
+        });
+    }
+
+    toggleDropdown() {
+        this.setState({
+            dropdownOpen: !this.state.dropdownOpen
+       });
+    }
+
+    logoutHandle() {
+        this.props.dispatch(logout());
+        this.props.dispatch(recieveProfileInfo({}));
+    };
+
+    isInMenu(module) {
+        return parseInt(module.isInMenu, 10) === 1;
+    }
+
+    setActiveSubmodule(submoduleName) {
+        this.props.dispatch(setActiveSubModule(submoduleName));
+    }
+
+    render() {
+        const {wiaasModules, userInfo, activeModule, profileInfo, urlParams} = this.props;
+        const TagName = extraSubmenuContent[activeModule] || null;
+
+        return (
+            <Navbar id="secondary-menu-bar" className="submenu-navigation-bar " light expand="md">
+                <NavbarToggler onClick={this.toggleSubmenu}/>
+                <Collapse isOpen={this.state.isSubmenuOpen} className="ml-auto submenu-elements" navbar>
+                    {
+                        (wiaasModules && wiaasModules.subModules && wiaasModules.subModules[activeModule]) &&
+                        <Nav className="mr-auto submenu-navbar" navbar>
+                            { wiaasModules.subModules[activeModule].map((subModule, index) =>
+                                <NavItem key={index}
+                                    id={"nav-submodule-button-" + subModule.url}
+                                    onClick={() => this.setActiveSubmodule(subModule.url)}
+                                    className="navbar-button">
+                                    <NavLink tag={Link} to={'/' + subModule.url}>{subModule.menuName}</NavLink>
+                                </NavItem>
+                            )}
+                            <NavItem></NavItem>
+                        </Nav>
+                    }
+                    {
+                        TagName && <TagName idCommercialLead={parseInt(urlParams.idCommercialLead, 10)} activeModule={activeModule}/>
+                    }
+                    <Nav className="ml-auto navbar-right" navbar>
+                        <Dropdown isOpen={this.state.dropdownOpen} toggle={this.toggleDropdown}>
+                            <DropdownToggle id="nav-logout-expand" nav caret>
+                              { profileInfo && profileInfo.name
+                                  ? profileInfo.name
+                                  : userInfo && userInfo.wiaas_user_full_name
+                              }
+                            </DropdownToggle>
+                            <DropdownMenu right>
+                                <DropdownItem>
+                                    <NavLink id="nav-profile" tag={Link} to='/profileSettings'>{menuTexts.buttons.Profile} <i className="fa fa-cog"></i></NavLink>
+                                </DropdownItem>
+                                <DropdownItem>
+                                    <NavLink id="nav-logout" tag={Link} to='/' onClick={this.logoutHandle}>{menuTexts.buttons.Logout} <i className="fa fa-sign-out"></i></NavLink>
+                                </DropdownItem>
+                            </DropdownMenu>
+                        </Dropdown>
+                    </Nav>
+                </Collapse>
+            </Navbar>
+        );
+    }
+}
+const mapStateToProps = (state) => ({
+    wiaasModules: state.auth.modules,
+    userInfo: state.auth.userInfo,
+    profileInfo: state.profileSettingsReducer.profileInfo,
+    urlParams: state.pageReducer.urlParams
+});
+
+export default connect(mapStateToProps)(Submenu);
--- a/client-wiaas/src/mainComponents/menu/menu.scss
+++ b/client-wiaas/src/mainComponents/menu/menu.scss
@@ -0,0 +1,119 @@
+@import '../../styleConstants.scss';
+
+.navbar {
+    padding: 0 1rem;
+}
+
+.navigation-bar {
+    background-color: $header-background;
+    position: relative;
+    height: 3.8rem;
+}
+
+.submenu-navigation-bar {
+    position: relative;
+    background-color: $subheader-background;
+    box-shadow: 0 4px 7px 0 $shadow-color;
+    height: 3.12rem;
+}
+
+.navbar-light .navbar-nav .nav-link {
+    font-size: $font-size-normal;
+    font-weight: $font-weight;
+    text-align: left;
+    color: $warmGreyColor;
+}
+
+.navbar-light .navbar-nav > .active {
+    border-bottom: 0.2rem solid $lightGreenColor;
+    width: fit-content;
+    margin-bottom: -0.3rem;
+}
+
+.navbar-button {
+    margin-left: -0.5rem;
+    margin-right: 2rem;
+}
+
+.navbar-dark .navbar-nav .nav-link {
+    font-size: $font-size-normal;
+    font-weight: $font-weight;
+    text-align: left;
+    color: $whiteColor;
+}
+
+.navbar-dark .navbar-nav > .active {
+    border-bottom: 0.3rem solid $lightGreenColor;
+    width: fit-content;
+    margin-bottom: -0.3rem;
+}
+
+.logo-image {
+    max-height: 68%;
+    max-width: 12%;
+    position: absolute;
+    left: 45%;
+    top: 0.8rem;
+}
+
+.nav-btn-cart {
+    padding: 0.2rem;
+    background-color: rgba(113, 194, 191, 0.5);
+    width: 11.5rem;
+}
+
+.cart-icon {
+    font-size: 1.2rem;
+    vertical-align: middle;
+}
+
+.items-cart-count {
+    margin-left: 1rem;
+    width: 12rem;
+}
+
+.navbar-collapse {
+    min-width: 100%;
+}
+
+.submenu-elements {
+    min-width: 90%;
+    padding-left: 2rem;
+}
+
+.nav-link {
+    padding: 1rem;
+}
+
+.dropdown-menu{
+    padding: 0;
+}
+
+#nav-button-logout {
+    cursor: pointer;
+}
+
+@media all and (max-width: 768px) {
+    .navigation-bar {
+        min-height: 3.6rem;
+        height:auto;
+    }
+    .submenu-navigation-bar {
+        height: auto;
+    }
+
+    .navbar-button {
+        margin: 0;
+    }
+
+    .nav-link {
+        font-size: 1.5rem !important;
+    }
+
+    .nav-btn-cart {
+        display: inline-block;
+        width: auto;
+        padding: 0 1rem;
+        margin-top: 5px;
+    }
+}
--- a/client-wiaas/src/mainComponents/notification/NotificationBox.jsx
+++ b/client-wiaas/src/mainComponents/notification/NotificationBox.jsx
@@ -0,0 +1,36 @@
+import React, {Component} from 'react';
+import {connect} from 'react-redux';
+import {ToastContainer, toast} from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.min.css';
+import {destroyMessage} from '../../actions/notification/notificationActions';
+import './notificationBox.css';
+
+class NotificationBox extends Component {
+
+    render() {
+        const {messages} = this.props;
+        const messagesJson = messages && messages.messageJson;
+        const messageObject = messages && messages.messageObj;
+
+        if (messagesJson && messagesJson.length) {
+            messagesJson.forEach(messageObj => {
+                let messageTranslated = (messageObject && messageObject[messageObj.message]) ? messageObject[messageObj.message] : messageObj.message;
+                messageTranslated += messageObj.key ? ' ' + messageObj.key : '';
+                toast[messageObj.code](messageTranslated);
+                this.props.dispatch(destroyMessage());
+            })
+        }
+        return (
+            <div>
+                <ToastContainer className="generic-banner-box" position="top-right"
+                    autoClose={5000}
+                    hideProgressBar={false}
+                    newestOnTop={true}
+                    closeOnClick={true}
+                    pauseOnHover={true}/>
+            </div>
+        );
+    }
+}
+
+export default connect()(NotificationBox);
--- a/client-wiaas/src/mainComponents/notification/notificationBox.scss
+++ b/client-wiaas/src/mainComponents/notification/notificationBox.scss
@@ -0,0 +1,23 @@
+@import '../../styleConstants.scss';
+
+.generic-banner-box {
+    top: 7rem;
+
+    .toastify-content--success {
+        background: $greenColor;
+        border-color: $borderColor;
+        border-radius: 0.4rem;
+    }
+
+    .toastify-content--error {
+        background: $redColor;
+        border-color: $borderColor;
+        border-radius: 0.4rem;
+    }
+
+    .toastify-content--warning {
+        background: $warning;
+        border-color: $borderColor;
+        border-radius: 0.4rem;
+    }
+}
--- a/client-wiaas/src/mainComponents/table/WiaasTable.jsx
+++ b/client-wiaas/src/mainComponents/table/WiaasTable.jsx
@@ -0,0 +1,63 @@
+import React, {Component} from 'react';
+import {Container, Col, Row} from 'reactstrap';
+import './WiaasTable.css';
+
+
+class WiaasTable extends Component {
+    render() {
+        const {id, className} = this.props;
+        return (
+            <div id={id} className={'wiaas-table ' + className}>{this.props.children}</div>
+        );
+    }
+}
+
+class WiaasTableHeader extends Component {
+    render() {
+        const {headers} = this.props;
+        return (
+            <div className="wiaas-table-header">
+                <Row>
+                    {
+                        headers &&
+                        headers.map((header, index) => <Col key={index}>{header}</Col>)
+                    }
+                </Row>
+            </div>
+        );
+    }
+}
+
+class WiaasTableBody extends Component {
+    render() {
+        const {id} = this.props;
+        return (
+            <div id={id} className="wiaas-table-body"><Container fluid={true}>{this.props.children}</Container></div>
+        );
+    }
+}
+
+class WiaasTableRow extends Component {
+    render() {
+        const {className, id, children} = this.props;
+
+        return (
+            <Row id={id} className={'wiaas-table-row ' + className}>{children}</Row>
+        );
+    }
+}
+
+class WiaasTableCol extends Component {
+    render() {
+        const {header, className, id, children} = this.props;
+
+        return (
+            <Col id={id} lg="" md="6" sm="12" xs="12" className={'wiaas-table-col ' + className}>
+                {header && <div className="wiass-table-small-scr-header">{header} :</div>}
+                {children}
+            </Col>
+        );
+    }
+}
+
+export{ WiaasTable, WiaasTableHeader, WiaasTableBody, WiaasTableRow, WiaasTableCol};
--- a/client-wiaas/src/mainComponents/table/WiaasTable.scss
+++ b/client-wiaas/src/mainComponents/table/WiaasTable.scss
@@ -0,0 +1,55 @@
+@import '../../styleConstants.scss';
+
+.wiaas-table {
+
+    .wiaas-table-header {
+        background: #f7f7f7;
+        padding: 9px 21px;
+        font-weight: 600;
+        text-align: left;
+        font-size: $font-size-small;
+        color: #7e7e7e;
+    }
+
+    .wiaas-table-body{
+        padding: 0;
+        background: #FFF;
+    }
+
+    .wiaas-table-row{
+        padding: 19px 0;
+    }
+
+    .wiaas-table-col{
+        font-size: $font-size-small;
+        font-weight: 600;
+        text-align: left;
+        color: #33425b;
+    }
+
+    .wiass-table-small-scr-header{
+        display: none;
+    }
+
+    @media all and (max-width: 991px) {
+
+        .wiass-table-small-scr-header {
+            display: inline-block;
+            margin-right: 1rem;
+        }
+
+        .wiaas-table-header {
+            display: none;
+        }
+
+    }
+
+    @media all and (max-width: 768px) {
+        .wiaas-table-row {
+            padding:  0.5rem 0;
+        }
+        .wiaas-table-col {
+            padding-bottom:  0.2rem;
+        }
+    }
+}
--- a/client-wiaas/src/mainComponents/wiaasRouter/MyComponent.jsx
+++ b/client-wiaas/src/mainComponents/wiaasRouter/MyComponent.jsx
@@ -0,0 +1,21 @@
+import React, {Component} from 'react';
+import {connect} from 'react-redux';
+import {setParamsFromUrl, resetParamsFromUrl} from '../../actions/page/pageActions';
+
+class MyComponent extends Component {
+    componentWillMount(){
+        if(this.props.match && this.props.match.params){
+            this.props.dispatch(setParamsFromUrl(this.props.match.params));
+        }else{
+            this.props.dispatch(resetParamsFromUrl(this.props.match.params));
+        }
+    }
+
+    render() {
+        const {TagName} = this.props;
+
+        return(<TagName {...this.props}/>);
+    }
+}
+
+export default connect()(MyComponent);
--- a/client-wiaas/src/mainComponents/wiaasRouter/WiaasRouter.jsx
+++ b/client-wiaas/src/mainComponents/wiaasRouter/WiaasRouter.jsx
@@ -0,0 +1,91 @@
+import React, {Component} from 'react';
+import {connect} from 'react-redux';
+import {Route, Switch} from 'react-router-dom';
+import { withRouter } from 'react-router';
+import {setActiveSubModule} from '../../actions/page/pageActions';
+import {MainContainers} from '../../constants/appContainers';
+import MyComponent from './MyComponent.jsx';
+
+class WiaasRouter extends Component {
+    filterModules(wiaasModules) {
+        const filteredModules = [];
+        let subModules = [];
+        if(wiaasModules.subModules){
+            Object.keys(wiaasModules.subModules).forEach((moduleKey) => {
+                subModules = subModules.concat(wiaasModules.subModules[moduleKey]);
+            });
+        }
+        const mergedModules = wiaasModules.modules.concat(subModules);
+        mergedModules.forEach((module) => {
+            if(typeof MainContainers[module.name] !== 'undefined'){
+                filteredModules.push(module);
+
+                const params = MainContainers[module.name].params;
+                if(params.length){
+                    const auxModule = Object.assign({}, module);
+                    params.forEach((param)=> {
+                        auxModule.url += '/:' + param;
+                    });
+                    filteredModules.push(auxModule);
+                }
+            }else{
+                console.log('Unavailable module' + module.name);
+            }
+        });
+
+        return  filteredModules;
+    }
+
+    isInMenu(module) {
+        return parseInt(module.isInMenu, 10) === 1;
+    }
+
+    componentWillReceiveProps(nextProps) {
+        const location = nextProps.location  && nextProps.location.pathname ?  nextProps.location.pathname : null;
+        const wiaasModules = nextProps.wiaasModules && nextProps.wiaasModules.modules ? this.filterModules(nextProps.wiaasModules) : null;
+
+        if(location && wiaasModules && location !== '/') {
+            let moduleByPath = wiaasModules.find(moduleData => {
+                return location.indexOf('/' + moduleData.url) !== -1;
+            });
+            if(moduleByPath){
+                if(moduleByPath.moduleUrl){
+                    nextProps.dispatch(setActiveSubModule(moduleByPath.url));
+                    nextProps.addActiveClass(moduleByPath.moduleUrl);
+                }else{
+                    nextProps.addActiveClass(moduleByPath.url);
+                }
+            }
+        }else{
+            if(wiaasModules){
+                const firstInMenu = wiaasModules.find(moduleData => {
+                    return this.isInMenu(moduleData);
+                });
+                nextProps.addActiveClass(firstInMenu.url);
+            }
+        }
+    }
+
+    render() {
+        const wiaasModules = this.props.wiaasModules && this.props.wiaasModules.modules ? this.filterModules(this.props.wiaasModules) : [];
+
+        return (
+            wiaasModules &&
+            <div className="app-content">
+                <Switch>
+                    <Route exact path='/' render={(props) => (<MyComponent {...props} TagName={MainContainers.Dashboards.container}/>)} />
+                    {wiaasModules.map((module, index) =>
+                             <Route key={'container-' + index}
+                                exact
+                                path={'/' + module.url}
+                                render={(props) => (<MyComponent {...props} TagName={MainContainers[module.name].container}/>)}
+                                />
+                    )}
+                </Switch>
+            </div>
+        );
+    }
+}
+const mapStateToProps = (state) => ({wiaasModules: state.auth.modules});
+
+export default withRouter(connect(mapStateToProps)(WiaasRouter));