mno-enterprise-frontend 2.0.0

data/app/assets/stylesheets/mno_enterprise/twitter-bootstrap/wells.less

@@ -0,0 +1,29 @@
+//
+// Wells
+// --------------------------------------------------
+
+
+// Base class
+.well {
+  min-height: 20px;
+  padding: 19px;
+  margin-bottom: 20px;
+  background-color: @well-bg;
+  border: 1px solid @well-border;
+  border-radius: @border-radius-base;
+  .box-shadow(inset 0 1px 1px rgba(0,0,0,.05));
+  blockquote {
+    border-color: #ddd;
+    border-color: rgba(0,0,0,.15);
+  }
+}
+
+// Sizes
+.well-lg {
+  padding: 24px;
+  border-radius: @border-radius-large;
+}
+.well-sm {
+  padding: 9px;
+  border-radius: @border-radius-small;
+}

data/app/assets/stylesheets/mno_enterprise/variables.less

@@ -0,0 +1,226 @@
+// Use this file to override Twitter Bootstrap variables or define own variables.
+/*-----------------------------------------------------------------------*/
+/*-----------------------------------------------------------------------*/
+/*-----------------------------------------------------------------------*/
+/*                       Design variables                                */
+/*-----------------------------------------------------------------------*/
+/*-----------------------------------------------------------------------*/
+/*-----------------------------------------------------------------------*/
+
+/*-----------------------------------------------------------------------*/
+/*                          Fonts & Text                                 */
+/*-----------------------------------------------------------------------*/
+@font-family-sans-serif:         Arial, "Helvetica Neue", Helvetica, sans-serif;
+@font-family-base:               @font-family-sans-serif;
+@small:                          11px;
+@normal:                         13px;
+
+/*-----------------------------------------------------------------------*/
+/*                              Login Page                               */
+/*-----------------------------------------------------------------------*/
+@login-bg-color:                     @bg-main-color;
+@login-box-grid-position:            { margin-top: 80px; .make-sm-column(4); .make-sm-column-offset(4); };
+
+@login-box-title-color:               @decorator-main-color;
+@login-box-title:                     { text-transform: uppercase; };
+@login-box-title-display-box-arrow:   false;
+
+@login-box-bg-color:                  @bg-inverse-color;
+@login-box-padding:                   20px;
+@login-box-brand-logo-img:            "mno_enterprise/main-logo.png";
+@login-box-brand-logo:                { min-height: 61px; max-width: 160px; max-height: 130px; margin: 17px auto 5px auto; };
+@login-box-btn-login:                 { width: 100%; };
+
+/*-----------------------------------------------------------------------*/
+/*                           Dashboard Layout                            */
+/*-----------------------------------------------------------------------*/
+@dashboard-bg-color:                            @bg-main-color;
+
+@dashboard-section-title-color:                 @text-strong-color;
+@dashboard-section-title-alignment:             center;
+@dashboard-section-title-display-subline:       false;
+
+// Side navbar menu
+//--------------------------------------
+@dashboard-side-menu-padding:                   30px 0px 0px 14px;
+@dashboard-side-menu-bg-color:                  @bg-inverse-color;
+@dashboard-side-menu-horizontal:                { min-width:550px; };
+
+@dashboard-side-menu-brand-logo-img:            "mno_enterprise/main-logo.png";
+@dashboard-side-menu-brand-logo:                { background-size: 204px; width: 51px; margin-left: 5px; };
+@dashboard-side-menu-brand-logo-expanded:       { width: 201px; background-size: 100%; };
+
+@dashboard-side-menu-link-color:                @text-inverse-color;
+@dashboard-side-menu-link-bg-color:             @dashboard-side-menu-bg-color;
+
+@dashboard-side-menu-link-hover-color:          @dashboard-side-menu-bg-color;
+@dashboard-side-menu-link-hover-bg-color:       lighten(@bg-main-color,15%);
+
+@dashboard-side-menu-link-active-color:         @dashboard-side-menu-bg-color;
+@dashboard-side-menu-link-active-bg-color:      @bg-main-color;
+
+@_default_style:                                { .fa-2x; margin-top: 6px; margin-left: 2px; color: @dashboard-side-menu-link-color; };
+@_default_style_active:                         { @_default_style(); color: @dashboard-side-menu-link-active-color; };
+@dashboard-side-menu-btn-dashboard:             { .icon-fa(th); @_default_style(); };
+@dashboard-side-menu-btn-dashboard-active:      { .icon-fa(th); @_default_style_active(); };
+@dashboard-side-menu-btn-impac:                 { .icon-fa(pie-chart); @_default_style(); };
+@dashboard-side-menu-btn-impac-active:          { .icon-fa(pie-chart); @_default_style_active(); };
+@dashboard-side-menu-btn-account:               { .icon-fa(user); @_default_style(); margin-left: 5px; };
+@dashboard-side-menu-btn-account-active:        { .icon-fa(user); @_default_style_active(); margin-left: 5px; };
+@dashboard-side-menu-btn-company:               { .icon-fa(briefcase); @_default_style(); };
+@dashboard-side-menu-btn-company-active:        { .icon-fa(briefcase); @_default_style_active(); };
+@dashboard-side-menu-btn-marketplace:           { .icon-fa(plus-square-o); @_default_style(); margin-left: 5px; };
+@dashboard-side-menu-btn-marketplace-active:    { .icon-fa(plus-square-o); @_default_style_active(); margin-left: 5px; };
+@dashboard-side-menu-btn-logout:                { .icon-fa(lock); @_default_style(); margin-left: 6px; };
+@dashboard-side-menu-btn-logout-active:         { .icon-fa(lock); @_default_style_active(); margin-left: 6px; };
+
+// Company select box (top right)
+//--------------------------------------
+@dashboard-cpy-select-bg-color:                 @bg-inverse-intense-color;
+@dashboard-cpy-select-border-radius:            0px;
+@dashboard-cpy-select-padding:                  15px 25px;
+
+@dashboard-cpy-select-header-text-color:        @bg-inverse-color;
+@dashboard-cpy-select-header-text-size:         13px;
+
+@dashboard-cpy-select-link-color:               @dashboard-cpy-select-header-text-color;
+
+@dashboard-cpy-select-link-hover-color:         @dashboard-cpy-select-link-color;
+@dashboard-cpy-select-link-hover-bg-color:      lighten(@dashboard-cpy-select-bg-color,10%);
+
+@dashboard-cpy-select-link-create-color:        @decorator-alt-color;
+@dashboard-cpy-select-link-admin-color:         @elem-positive-color;
+
+@dashboard-cpy-select-switch-btn-color:         @dashboard-cpy-select-header-text-color;
+@dashboard-cpy-select-switch-btn-bg-color:      @dashboard-cpy-select-bg-color;
+@dashboard-cpy-select-switch-btn-icon:          { .icon-fa(caret-down); }; //pass a ruleset
+@dashboard-cpy-select-switch-btn-icon-active:   { .icon-fa(caret-up); }; //pass a ruleset
+
+/*-----------------------------------------------------------------------*/
+/*                        Dashboard > Apps Section                       */
+/*-----------------------------------------------------------------------*/
+@dashboard-apps-tile-bg-color:                  @bg-inverse-color;
+@dashboard-apps-tile-text-color:                @text-inverse-color;
+
+@dashboard-apps-tile-logo-border-size:          0px;
+@dashboard-apps-tile-logo-border-color:         @decorator-main-color;
+
+@dashboard-apps-tile-settings-color:            @dashboard-apps-tile-text-color;
+@dashboard-apps-tile-settings-bg-color:         @dashboard-apps-tile-bg-color;
+
+@dashboard-apps-tile-settings-hover-color:      @dashboard-apps-tile-bg-color;
+@dashboard-apps-tile-settings-hover-bg-color:   @dashboard-apps-tile-text-color;
+
+@dashboard-apps-tile-add-color:                 @dashboard-apps-tile-text-color;
+@dashboard-apps-tile-add-bg-color:              @dashboard-apps-tile-text-color;
+
+/*-----------------------------------------------------------------------*/
+/*                      Dashboard > Company Section                      */
+/*-----------------------------------------------------------------------*/
+// Tab Heading
+//--------------------------------------
+@dashboard-cpy-tabs-bg-color:                    @decorator-main-color;
+@dashboard-cpy-tabs-text-color:                  @text-inverse-color;
+@dashboard-cpy-tabs-border-radius:               2px;
+
+@dashboard-cpy-tabs-subline-size:                0px;
+@dashboard-cpy-tabs-subline-color:               transparent;
+
+@dashboard-cpy-tabs-active-text-color:           @decorator-alt-color;
+@dashboard-cpy-tabs-active-bg-color:             @bg-inverse-color;
+
+@dashboard-cpy-tabs-hover-text-color:            @bg-inverse-color;
+@dashboard-cpy-tabs-hover-bg-color:              @decorator-alt-color;
+
+// Tab Content
+//--------------------------------------
+@dashboard-cpy-tabcontent-bg-color:              @dashboard-cpy-tabs-bg-color;
+
+// Teams section
+//--------------------------------------
+@dashboard-cpy-teams-matrix-bg-color:            @bg-inverse-color;
+@dashboard-cpy-teams-matrix-border-color:        lighten(@bg-main-color,30%);
+
+
+/*-----------------------------------------------------------------------*/
+/*                 Mno Enterprise > Marketplace Section                  */
+/*-----------------------------------------------------------------------*/
+@dashboard-marketplace-search-text-color:             @bg-inverse-color;
+@dashboard-marketplace-search-border-color:           @bg-inverse-intense-color;
+
+@dashboard-marketplace-tile-bg-color:                 @bg-inverse-color;
+@dashboard-marketplace-tile-text-color:               @text-strong-color;
+@dashboard-marketplace-tile-img-border-color:         @dashboard-marketplace-tile-bg-color;
+
+@dashboard-marketplace-tile-hover-bg-color:           @decorator-main-color;
+@dashboard-marketplace-tile-hover-text-color:         @dashboard-marketplace-tile-text-color;
+@dashboard-marketplace-tile-hover-img-border-color:   darken(@decorator-main-color,10%);
+@dashboard-marketplace-tile-hover-arrow-color:        @text-strong-color;
+
+@dashboard-marketplace-show-header-text-color:        @bg-inverse-color;
+
+@dashboard-marketplace-app-card:                      { display: block; padding: 10px; height: 120px; margin-bottom: 10px; font-weight: 300; };
+
+/*-----------------------------------------------------------------------*/
+/*                     Responsive Table (cell table)                     */
+/*-----------------------------------------------------------------------*/
+@table-cell-row-spacing:               10px;
+@table-cell-row-padding:               3px;
+
+@table-cell-header-text-size:          12px;
+@table-cell-header-text-color:         @bg-inverse-color;
+@table-cell-header-bg-color:           @bg-main-color;
+@table-cell-header-additional-rule:    { text-transform: uppercase; };
+
+@table-cell-row-text-size:             13px;
+@table-cell-row-odd-bg-color:          fade(@bg-main-color,30%);
+@table-cell-row-even-bg-color:         fade(@bg-main-color,10%);
+
+
+/*-----------------------------------------------------------------------*/
+/*                       Twitter Bootstrap colors                        */
+/*-----------------------------------------------------------------------*/
+@brand-success:                  @elem-positive-color;
+@brand-warning:                  @decorator-alt-color;
+@brand-info:                     @text-inverse-color;
+@brand-danger:                   @text-inverse-color;
+@brand-primary:                  @text-inverse-color;
+
+/*-----------------------------------------------------------------------*/
+/*                          Navbar Customization                         */
+/*-----------------------------------------------------------------------*/
+@navbar-inverse-bg:              @bg-inverse-color;
+@navbar-height:                  40px;
+@navbar-inverse-link-color:      @decorator-inverse-color;
+@navbar-border-radius:           0px;
+@navbar-inverse-border:          @bg-inverse-color;
+@navbar-desktop-height:          120px;
+@navbar-inverse-link-active-bg:  @navbar-inverse-bg;
+
+/*-----------------------------------------------------------------------*/
+/*                          Form Customization                           */
+/*-----------------------------------------------------------------------*/
+@input-bg: @bg-on-bg-inverse-color;
+@input-color: @text-inverse-color;
+@input-color-placeholder: @input-color;
+
+@input-label-color: @text-inverse-color;
+
+/*-----------------------------------------------------------------------*/
+/*                         Buttons Customization                         */
+/*-----------------------------------------------------------------------*/
+
+// General
+@btn-font-weight:                500;
+
+// Warning
+@btn-warning-color:              #fff;
+
+// Success
+@btn-success-color:              #fff;
+
+/*-----------------------------------------------------------------------*/
+/*                            Footer                                     */
+/*-----------------------------------------------------------------------*/
+
+@footer-bg:                      @bg-main-color;

data/app/assets/templates/mno_enterprise/dashboard/account.html

@@ -0,0 +1,131 @@
+<h2 class="section-title">My Account</h2>
+<div class="spacer2"></div>
+<div accordion class="accordion">
+  <div accordion-group is-open="isPersoInfoOpen">
+    <div accordion-heading>
+      Personal Information  <span class="caret pull-right" ng-class="{'caret-down': !isPersoInfoOpen, 'caret-up': isPersoInfoOpen}"></span>
+    </div>
+    
+    <div class="alert alert-error" ng-show="errors.user">
+      <button class="close" ng-click="errors.user=''">×</button>
+      <ul>
+        <li ng-repeat="error in errors.user">{{error}}</li>
+      </ul>
+    </div>
+    <div class="alert alert-success" ng-show="success.user">
+      <button class="close" ng-click="success.user=''">×</button>
+      <p>{{success.user}}</p>
+    </div>
+    <form name='form'>
+      <div class='row'>
+        <div class='col-md-6'>
+          <label>Name</label>
+          <input type='text' ng-model='user.model.name' class='form-control'>
+        </div>
+        <div class='col-md-6'>
+          <label>Surname</label>
+          <input type='text' ng-model='user.model.surname' class='form-control'>
+        </div>
+      </div>
+      <div class='row'>
+        <div class='col-md-6'>
+          <label>Email</label>
+          <input type='text' ng-model='user.model.email' class='form-control'>
+        </div>
+        <div class='col-md-6'>
+          <label>Phone</label>
+          <div class="input-group">
+            <div class="input-group-addon select">
+              <select ng-options="phone[0] as phone[1] for phone in countryCodes" ng-model='user.model.phone_country_code'></select>
+            </div>
+            <input type='text' ng-model='user.model.phone' class='form-control'>
+          </div>
+        </div>
+      </div>
+      <br>
+      <div class='row'>
+        <div class='col-md-12'>
+          <button ng-disabled="!user.hasChanged()" ng-hide="user.loading" class='btn btn-warning' ng-click="user.update()">Save</button>
+          <button ng-show="user.hasChanged() && !user.loading" class='btn ng-hide' ng-click="user.cancelChanges()">Cancel</button>
+          <img class="ng-hide" ng-src="{{assetPath['mno_enterprise/loader-32x32-bg-inverse.gif']}}" ng-show="user.loading"/>
+        </div>
+      </div>
+    </form>
+  </div>
+  
+  
+  <!-- 
+    Change Password Section 
+    -->
+  <div accordion-group is-open="isChangePasswordOpen">
+    <div accordion-heading>
+        Change password <span class="caret pull-right" ng-class="{'caret-down': !isChangePasswordOpen, 'caret-up': isChangePasswordOpen}"></span>
+    </div>
+    <div class="alert alert-error" ng-show="errors.changePassword">
+      <button class="close" ng-click="errors.changePassword=''">×</button>
+      <ul>
+        <li ng-repeat="error in errors.changePassword">{{error}}</li>
+      </ul>
+    </div>
+    <div class="alert alert-success" ng-show="success.changePassword">
+      <button class="close" ng-click="success.changePassword=''">×</button>
+      <p>{{success.changePassword}}</p>
+    </div>
+    <form name='form'>
+      <div class='row'>
+        <div class='col-md-6'>
+          <label>Current Password</label>
+          <input type='password' ng-model='user.password.currentPassword' class='form-control'>
+        </div>
+      </div>
+      <div class='row'>
+        <div class='col-md-6'>
+          <label>New Password</label>
+          <input type='password' ng-model='user.password.newPassword' class='form-control'>
+        </div>
+        <div class='col-md-6'>
+          <label>Confirm Password</label>
+          <input type='password' ng-model='user.password.confirmPassword' class='form-control'>
+        </div>
+      </div>
+      <br>
+      <button ng-click="user.updatePassword()" ng-disabled="!user.updatePasswordEnabled()" ng-hide="user.loading" class='btn btn-warning'>Save</button>
+      <button ng-click="user.cancelPassword()" ng-show="user.cancelPasswordEnabled() && !user.loading" class='btn ng-hide'>Cancel</button>
+      <img class="ng-hide" ng-src="{{assetPath['mno_enterprise/loader-32x32-bg-inverse.gif']}}" ng-show="user.loading"/>
+    </form>
+  </div>
+  
+
+
+  <!-- 
+    Account Deletion Section 
+    -->
+  <!-- <div accordion-group is-open="isAccountDeletionOpen">
+    <div accordion-heading>
+        Account deletion <span class="caret pull-right" ng-class="{'caret-down': !isAccountDeletionOpen, 'caret-up': isAccountDeletionOpen}"></span>
+    </div>
+    <div class='align-center'>
+      <div class="alert alert-error" ng-show="errors.deletionReq">
+        <button class="close" ng-click="errors.deletionReq=''">×</button>
+        <ul>
+          <li ng-repeat="error in errors.deletionReq">{{error}}</li>
+        </ul>
+      </div>
+      <div ng-switch="user.currentDeletionRequestToken">
+        <div ng-switch-when="-1">
+          <p>Here you can delete your account. Before proceeding you will be asked for several confirmations (including email). Upon confirmation you will be redirected to a checkout page in order to pay any outstanding amount due.</p>
+          <p>All applications created under your account will be deleted. Do not forget to transfer any critical application to your coworkers (via organizations) before deleting your account.</p>
+          <button ng-click="user.createDeletionRequest()" ng-disabled="user.loading" class='btn btn-danger'>Request deletion of my account</button>
+        </div>
+        <div ng-switch-default>
+          <p>Instructions to delete your account have been sent to you by email. If you haven't received them you can resend the email by clicking on the button below:</p>
+          <button ng-click="user.resendDeletionRequest()" ng-disabled="user.loading" class='btn'>Resend instructions</button>
+          <p>You can cancel this request by clicking on the button below:</p>
+          <button ng-click="user.cancelDeletionRequest()" ng-disabled="user.loading" class='btn'>Cancel account termination request</button>
+        </div>
+      </div>
+    </div>
+  </div> -->
+  
+</div>
+

data/app/assets/templates/mno_enterprise/dashboard/app_deletion.html

@@ -0,0 +1,36 @@
+<div>
+  <script type="text/ng-template" id="internal-deletion-modal.html">
+    <div class="modal-header">
+      <div class="close" type="button" ng-click="modal.close()" >×</div>
+      <h3>Confirm app deletion</h3>
+    </div>
+    <div class="modal-body">
+      <div class="alert alert-error" ng-show="modal.errors">
+        <button class="close" ng-click="modal.errors=''">×</button>
+        <ul>
+          <li ng-repeat="error in modal.errors">{{error}}</li>
+        </ul>
+      </div>
+      
+      <p class="text-center"><small>In order to delete your app, please enter the following statement in the box below.</small></p>
+      
+      <div class="spacer1"></div>
+      
+      <p class="text-error text-center">{{sentence}}</p>
+      
+      <div class="row">
+        <div class="col-md-8 col-md-offset-2">
+          <input type="text" ng-model="sentenceCheck" class='form-control text-center' required>
+        </div>
+      </div>
+      
+      <div class="spacer1"></div>
+      
+    </div>
+    <div class="modal-footer">
+      <button class="btn" ng-click="modal.close()" ng-show="!modal.loading">Cancel</button>
+      <button class="btn btn-danger" ng-click="proceed()" ng-disabled="sentence != sentenceCheck" ng-show="!modal.loading">Delete</button>
+      <img class="ng-hide" ng-src="{{assetPath['mno_enterprise/loader-32x32-bg-inverse.gif']}}" ng-show="modal.loading"/>
+    </div>
+  </script>
+</div>

data/app/assets/templates/mno_enterprise/dashboard/apps_list.html

@@ -0,0 +1,103 @@
+<!-- <div class='star-wizard-button-wrapper'>
+  <div mno-star-wizard=true modal-open='starWizardModal.value'></div>
+  <a class='star-button hidden-sm hidden-xs btn btn-promo btn-success' ng-click='openStarWizard()'>
+    <span class='fa fa-upload'></span>
+    Data Upload Wizard
+  </a>
+</div> -->
+
+<h2 class="section-title">
+  Dashboard
+</h2>
+
+<div class="spacer2"></div>
+
+<div ng-switch="loading">
+  <div ng-switch-when='true'>
+    <div class='align-center'>
+      <img ng-src="{{assetPath['mno_enterprise/loader-32x32-bg-main.gif']}}">
+    </div>
+  </div>
+
+  <div ng-switch-default>
+    <div class='row'>
+      <div ng-repeat="app in apps" class='col-md-3'>
+        <div class='app-dashboard'>
+
+          <!-- Backface -->
+          <div ng-switch="displayOptions[app.id]">
+
+            <div ng-switch-when="true">
+              <div ng-init="openModal = 0" dashboard-plan-change-request=true app-id="{{app.id}}" open-modal="openModal"></div>
+              <div ng-init="deletionModal = 0" dashboard-app-deletion-request=true app-id="{{app.id}}" open-modal="deletionModal"></div>
+              <a ng-click="displayOptions[app.id] = !displayOptions[app.id]" ng-show="helper.displayCogwheel()" class="options" href=""><i class="fa fa-times"></i></a>
+
+              <!-- Data Sync Button -->
+              <div ng-show="appsListHelper.isDataSyncShown(app)">
+                <br>
+                <a class="btn btn-info" href="{{ appsListHelper.dataSyncPath(app) }}" mno-helptext="Trigger a manual sync between {{app.appName}} and Maestrano.">Manual Data Sync</a>
+              </div>
+
+              <!-- Data Disconnect Button -->
+              <div ng-show="appsListHelper.isDataDisconnectShown(app)">
+                <br>
+                <a class="btn btn-danger" ng-really-message="Are you sure you want to disconnect {{app.appName}} and Maestrano?" ng-really-click="appsListHelper.dataDisconnectClick(app)" href="" mno-helptext="Disconnect the link between {{app.appName}} and Maestrano.">Disconnect Link</a>
+              </div>
+              <br>
+              <div>
+                <br>
+                <button ng-click="restartApp.perform(app.id)" ng-show="helper.canRestartApp() && appsListHelper.isRestartShown(app)" ng-disabled="restartApp.loading" class="btn">Restart</button>
+                <button ng-click="deletionModal = deletionModal + 1" ng-show="helper.canDeleteApp()" class="btn btn-danger">Delete</button>
+              </div>
+            </div>
+
+            <!-- Frontface -->
+            <div ng-switch-default>
+              <a ng-click="displayOptions[app.id] = !displayOptions[app.id]" ng-show="helper.displayCogwheel()" class="options" href=""><i class="fa fa-cog"></i></a>
+              <br>
+              <a ng-href="{{appsListHelper.appActionUrl(app)}}" target="_blank">
+                <img class="app-logo" ng-src="{{app.logo}}">
+              </a>
+              <br>
+              <div editable-text="app.name" onaftersave="updateAppName(app)" class='title' style="border:0px;">{{app.name}}</div>
+
+              <!-- Connected company name -->
+              <div ng-show="appsListHelper.companyName(app)">
+                <div class='app-line' style="border:0px;" tooltip="{{appsListHelper.companyName(app)}}">
+                  Linked to: {{ appsListHelper.companyName(app) | truncate:25 }}
+                </div>
+              </div>
+
+              <!-- Connector Version -->
+              <div ng-show="appsListHelper.connectorVersion(app)">
+                <div class='app-line' style="border:0px;">MYOB Version: {{appsListHelper.connectorVersion(app)}}</div>
+              </div>
+
+              <!-- OAuth Connect Button -->
+              <div ng-show="appsListHelper.isOauthConnectBtnShown(app)">
+                <a class="btn btn-warning" ng-href="{{appsListHelper.oAuthConnectPath(app)}}">
+                  Connect
+                </a>
+              </div>
+
+              <a ng-href="{{appsListHelper.appActionUrl(app)}}" target="_blank" ng-hide="appsListHelper.isLaunchHidden(app)" class="btn btn-warning">Launch App</a>
+
+              <span ng-show="app.status == 'terminating' || app.status == 'terminated'">(deleted)</span>
+              <br>
+              <a ng-show="app.tutorial" ng-href="{{app.tutorial}}" class='tutorial' target="_blank">Tutorials</a>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div ng-if="helper.canCreateApp()" class='col-md-3'>
+        <div class='app-dashboard add-app'>
+          <a href="#/marketplace">
+            <div class="fa fa-plus-circle"></div>
+          </a>
+        </div>
+      </div>
+    </div>
+    <div class='spacer2'></div>
+    <div dashboard-bootstrap-wizard='true' ng-show='helper.displayBootstrapWizard()'></div>
+  </div>
+</div>