adding the dcae dt code

Adding DCAE-dt code

Change-Id: Id6b779db9d24e10825fb97ad5fd46f41e65e6738
Issue-ID: SDC-1614
Signed-off-by: Eran (ev672n), Vosk <ev672n@att.com>

23 files changed, 3355 insertions, 0 deletions

diff --git a/app/main/dashboard/about/about.controller.js b/app/main/dashboard/about/about.controller.js
new file mode 100644
index 0000000..32d903d
--- /dev/null
+++ b/app/main/dashboard/about/about.controller.js
@@ -0,0 +1,16 @@
+(function () {
+
+    'use strict';
+
+    angular
+        .module('dcaeApp.dashboard.about')
+        .controller('DashboardAboutController', dashboardAboutController);
+
+    function dashboardAboutController($state) {
+
+        var vm = this;
+        vm.test = "lllllllllllllllll";
+
+    }
+
+})();
diff --git a/app/main/dashboard/about/about.html b/app/main/dashboard/about/about.html
new file mode 100644
index 0000000..52b5326
--- /dev/null
+++ b/app/main/dashboard/about/about.html
@@ -0,0 +1,2 @@
+<h1>This is about</h1>
+{{vm.test}}
diff --git a/app/main/dashboard/about/about.less b/app/main/dashboard/about/about.less
new file mode 100644
index 0000000..0232877
--- /dev/null
+++ b/app/main/dashboard/about/about.less
@@ -0,0 +1,5 @@
+.about {
+    h1 {
+        font-size: 160px;
+    }
+}
diff --git a/app/main/dashboard/about/about.module.js b/app/main/dashboard/about/about.module.js
new file mode 100644
index 0000000..c447f6a
--- /dev/null
+++ b/app/main/dashboard/about/about.module.js
@@ -0,0 +1,24 @@
+(function () {
+
+    'use strict';
+
+    angular
+        .module('dcaeApp.dashboard.about', [])
+        .config(config);
+
+    function config($stateProvider) {
+
+        $stateProvider.state('dcae.app.about', {
+            url: '/about',
+            views: {
+                'content@dcae.app': {
+                    templateUrl: 'main/dashboard/about/about.html',
+                    controller: 'DashboardAboutController as vm'
+                }
+            },
+            bodyClass: 'about'
+        });
+
+    }
+
+})();
diff --git a/app/main/dashboard/dcaedt/dcae.less b/app/main/dashboard/dcaedt/dcae.less
new file mode 100644
index 0000000..6d93f7e
--- /dev/null
+++ b/app/main/dashboard/dcaedt/dcae.less
@@ -0,0 +1,1376 @@
+.about {
+    h1 {
+        font-size: 40px;
+    }
+}
+
+.home {
+    ul.users {
+        li {
+            font-size: 20px;
+        }
+    }
+}
+.sdc-dashboard-container {
+    .tlv-loader {
+        top: -110px;
+        left: 80px;
+    }
+    .sdc-hide-popover {
+        .popover {
+            display: none !important;
+        }
+    }
+}
+
+/* dashboard card main icons */
+.dcae-s-sdc-service                      { background-position: -60px -2654px; width: 14px; height: 17px;}
+.dcae-s-sdc-resource                     { background-position: -54px -2585px; width: 16px; height: 16px;}
+
+.dcae-sprite {
+  background-image: url('images/sprites/sprite-global-old.png');
+  display: inline-block;
+}
+.dcae-sprite-new {
+    background-image: url('images/sprites/sprite-global.png');
+    display: inline-block;
+}
+.dcae-sprite.logo                        { background-position: -50px  -100px; width: 39px; height: 32px;}
+.dcae-sprite.white-arrow-down            { background-position: -50px  -200px; width: 15px; height: 9px;}
+.dcae-sprite.white-arrow-up              { background-position: -100px -200px; width: 15px; height: 9px;}
+.arrow-left                         { background-position: -262px -4041px; width: 11px; height: 10px;}
+.dcae-sprite.tab-info                    { background-position: -50px -300px;  width: 18px; height: 20px;}
+.dcae-sprite.edit                        { background-position: -51px -689px;  width: 31px; height: 30px;}
+.dcae-sprite.details                     { background-position: -50px -900px;  width: 19px; height: 19px;}
+.dcae-sprite.structure                   { background-position: -212px -3880px; width: 23px; height: 21px;}
+.dcae-sprite.artifacts                   { background-position: -50px -1098px; width: 20px; height: 20px;}
+.dcae-sprite.menu                        { background-position: -50px -1200px; width: 17px; height: 14px;}
+.dcae-sprite.catalog                     { background-position: -53px -1303px; width: 20px; height: 20px;}
+.dcae-sprite.distribution                { background-position: -50px -1400px; width: 24px; height: 14px;}
+.dcae-sprite.support                     { background-position: -50px -1500px; width: 22px; height: 22px;}
+.dcae-sprite.filter                      { background-position: -50px -1600px; width: 15px; height: 16px;}
+.dcae-sprite.card-menu                   { background-position: -50px -2000px; width: 4px;  height: 16px;}
+.dcae-sprite.relationships               { background-position: -50px -2097px; width: 26px; height: 19px;}
+.dcae-sprite.lifecycle                   { background-position: -50px -2200px; width: 20px; height: 20px;}
+.dcae-sprite.properties                  { background-position: -50px -2300px; width: 19px; height: 19px;}
+.dcae-sprite.e-sdc-small-icon-delete     { background-position: -64px -2771px; width: 11px; height: 13px;}
+.dcae-sprite.magnification-glass         { background-position: -49px -3138px; width: 12px; height: 12px;}
+.dcae-sprite.clear-text                  { background-position: -104px -4040px; width: 10px; height: 11px;}
+/*new tabs icons*/
+.dcae-sprite.info                        { background-position: -105px -3583px; width: 18px; height: 18px;}
+.dcae-sprite.information-artifacts       { background-position: -105px -3632px; width: 20px; height: 21px;}
+.dcae-sprite.deployment-artifacts        { background-position: -105px -3682px; width: 19px; height: 19px;}
+.dcae-sprite.properties                  { background-position: -105px -3733px; width: 18px; height: 18px;}
+.dcae-sprite.relations                   { background-position: -105px -3781px; width: 20px;  height: 20px;}
+.dcae-sprite.inputs                      { background-position: -104px -3887px; width: 18px; height: 14px;}
+.dcae-sprite.api                         { background-position: -104px -3930px; width: 25px; height: 21px;}
+
+.dcae-main-right-container {
+  background-color: #ffffff;
+  bottom: 0;
+  padding: 22px 12px;
+  position: absolute;
+  left: 240px;
+  right: 0;
+  top: 0px;
+  overflow: scroll;
+}
+
+.dcae-left-sidebar {
+    width: 242px;
+    overflow: hidden;
+    background-color: #f8f8f8;
+    -webkit-box-shadow: 1px 0 4px 0 rgba(24,24,25,.17);
+    -moz-box-shadow: 1px 0 4px 0 rgba(24,24,25,.17);
+    box-shadow: 1px 0 4px 0 rgba(24,24,25,.17);
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    padding: 12px 18px;
+    z-index: 1;
+}
+
+.dcae-left-sidebar-nav {
+    margin-top: 46px;
+}
+
+.dcae-menu-item.selected {
+    border-left: 4px solid #009fdb;
+    padding-left: 18px;
+    color: #009fdb;
+}
+
+.dcae-menu-item {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    width: 100%;
+    white-space: nowrap;
+    display: inline-block;
+    max-width: none;
+    white-space: normal;
+    cursor: pointer;
+}
+//////////////////////////////Cards////////////////////
+.dcae-dashboard-card-new {
+    border: 2px dashed #a8b3b9;
+    .border-radius(2px);
+    cursor: pointer;
+    display: inline-block;
+    margin: 9px;
+    position: relative;
+    vertical-align: middle;
+    height: 190px;
+    width: 190px;
+}
+
+.dcae-dashboard-card-new-content {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    height: 100%;
+    cursor: pointer;
+}
+
+.dcae-dashboard-card-new-content-plus {
+    .dcae-sprite-new;
+    .add-icon;
+    position: relative;
+    margin-bottom: 20px;
+
+    &:after {
+        .n_14_m;
+        content: 'ADD';
+        position: absolute;
+        top: 25px;
+        left: -3px;
+        vertical-align: -50%;
+    }
+}
+
+.dcae-dashboard-card-import-content-plus {
+    .dcae-sprite-new;
+    .import-icon;
+    position: relative;
+    margin-bottom: 20px;
+
+    &:after {
+        .n_14_m;
+        content: 'IMPORT';
+        position: absolute;
+        top: 25px;
+        left: -16px;
+        vertical-align: -50%;
+    }
+}
+
+.sdc-dashboard-create-element-container,
+.sdc-dashboard-import-element-container {
+
+    width: 140px;
+
+    .tlv-btn.import-dcae {
+        padding: 0;
+    }
+
+    .tlv-btn {
+        position: relative;
+        width: 100%;
+        margin-bottom: 10px;
+
+        &:last-child {
+            margin-bottom: 0;
+        }
+    }
+
+    input[type="file"] {
+        cursor: inherit;
+        filter: alpha(opacity=0);
+        opacity: 0;
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 138px;
+        height: 30px;
+    }
+}
+
+.dcae-dashboard-card {
+    width: 190px;
+    height: 190px;
+    background-color:  #fff;
+    .border-radius(2px);
+    .box-shadow(0px 2px 2px 0px rgba(24, 24, 25, 0.05));
+    display: inline-block;
+    margin: 10px;
+    position: relative;
+    vertical-align: middle;
+    border: solid 1px #e4e1e1;
+
+    &:hover {
+        border: solid 1px @main_color_o;
+        .box-shadow(3px 3px 2px 0px rgba(24, 24, 25, 0.05));
+    }
+
+    &:active {
+        border: solid 1px @main_color_c;
+        .box-shadow(3px 3px 2px 0px rgba(24, 24, 25, 0.05));
+    }
+}
+
+.dcae-dashboard-card-body {
+    .hand;
+    border-bottom: 1px solid #ffffff;
+    height: 155px;
+    position: relative;
+    text-align: center;
+}
+
+.dcae-dashboard-card-description {
+    .c_3;
+    .hand;
+    background-color: rgba(57, 73, 84, 0.9);
+    border-radius: 4px 4px 0 0;
+    bottom: 0;
+    left: 0;
+    opacity: 0;
+    padding: 10px;
+    position: absolute;
+    right: 0;
+    text-align: left;
+    top: 0;
+    word-wrap: break-word;
+    z-index: 4;
+    min-height: 100px;
+    overflow: hidden;
+}
+
+      .dcae-workspace-top-bar {
+            height: 26px;
+            padding: 12px 10px 0px 50px;
+            border-bottom: 1px solid #d2d2d2;
+            display: flex;
+            justify-content: space-between;
+
+            .version-container{
+
+            }
+
+            .progress-container{
+                flex-grow:4;
+                z-index: 10000000;
+
+                .general-view-top-progress{
+                    width:30%;
+                    margin: 0 auto;
+                }
+            }
+
+            .not-latest{
+                position: absolute;
+                left: 24px;
+                top: 20px;
+                .dcae-sprite-new;
+                .asdc-warning;
+            }
+
+            .sdc-workspace-top-bar-buttons {
+
+                > button, > span:not(.delimiter){
+                    margin-right: 10px;
+                    vertical-align: middle;
+                    .hand;
+
+                    &.dcae-sprite-new {
+                        text-indent: 100%;
+                    }
+                    &.disabled, &:hover.disabled {
+                        pointer-events: none;
+                    }
+                }
+                .delimiter {
+                    height: 32px;
+                    width: 1px;
+                    background-color: #959595;
+                    display: inline-block;
+                    vertical-align: middle;
+                    margin-right: 20px;
+                }
+
+            }
+
+
+            .lifecycle-state {
+                padding: 7px 0 0 10px;
+                margin: 2px 0 7px 10px;
+                border-left: 1px solid #d2d2d2;
+                line-height: 15px;
+                font-family: @font-omnes-medium;
+                color: #d2d2d2;
+
+                .lifecycle-state-icon {
+                    .dcae-sprite-new;
+                }
+                .lifecycle-state-text {
+
+                    font-weight: bold;
+                    text-transform: uppercase;
+                    vertical-align: top;
+                    padding: 3px;
+                }
+            }
+
+            .version-selector {
+               // float:left;
+                background-color: transparent;
+                border: none;
+                margin-top: 6px;
+            }
+        }
+
+    .dcae-asset-creation-info {
+        color: #959595;
+        font-family: omnes-regular,sans-serif;
+        font-size: 12px;
+        margin: 8px 20px 0 0;
+    }
+
+        // Workspace bar //
+.dcae-dashboard-card-schema {
+    margin-top: 30px;
+}
+
+.dcae-dashboard-card-edit {
+    .hand;
+    position: absolute;
+    right: 13px;
+    top: 15px;
+    z-index: 2;
+}
+
+.dcae-vfcmt-title{
+    text-align: left;
+    margin: 7px;
+    color: #009fdb;
+}
+
+.dcae-dashboard-card-footer {
+    border-top: 1px solid #eaeaea;
+    margin: 0px 5px;
+    position: relative;
+}
+
+.dcae-dashboard-card-avatar {
+    .uppercase;
+    border-radius: 50%;
+    display: inline-block;
+    position: absolute;
+    left: -6px;
+    text-align: center;
+    top: -6px;
+
+    span {
+
+        background-color: @main_color_p;
+        .border-radius(15px);
+        color: @color_c;
+        content: '';
+        height: 30px;
+        text-align: center;
+        display: block;
+        border: solid 2px #ECEFF3;
+        padding: 3px 10px 2px 10px;
+
+        &.VF {
+            .j_14_m;
+            &::before {
+                content: 'VF';
+            }
+        }
+
+        &.VFC {
+            .j_14_m;
+            &::before {
+                content: 'VFC';
+            }
+        }
+
+        &.CP {
+            .j_14_m;
+            &::before {
+                content: 'CP';
+            }
+        }
+
+        &.VL {
+            .j_14_m;
+            &::before {
+                content: 'VL';
+            }
+        }
+
+        &.SERVICE {
+            .c_14_m;
+            &::before {
+                content: 'S';
+            }
+        }
+
+        &.PRODUCT {
+            .b_14_m;
+            &::before {
+                content: 'P';
+            }
+        }
+
+        &.green {
+            .d_12;
+            &::before {
+                content: 'R';
+            }
+        }
+        &.red {
+            .r_12;
+            &::before {
+                content: 'S';
+            }
+        }
+        &.dblack {
+            .s_12;
+            &::before {
+                content: 'P';
+            }
+        }
+    }
+}
+
+.dcae-dashboard-card-info {
+    display: inline-block;
+    vertical-align: middle;
+    max-width: 165px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.dcae-dashboard-card-info-name-container{
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    margin: 0 0 2px 10px;
+}
+.dcae-dashboard-card-info-name {
+    .m_14_m;
+    display: inline-block;
+    vertical-align: middle;
+    max-width: 165px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.dcae-dashboard-card-info-lifecycleState {
+    .m_13_m;
+    display: inline-block;
+    vertical-align: middle;
+    max-width: 165px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.dcae-dashboard-card-info-user {
+    .n_13_r;
+    text-align: left;
+    line-height: 18px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    width: 100%;
+}
+
+.dcae-dashboard-card-menu-button {
+    display: inline-block;
+    padding: 12px 0 0 10px;
+    position: absolute;
+    right: 12px;
+    top: 8px;
+    border-left: solid 1px @color_k;
+    height: 42px;
+
+    &:hover {
+        .dcae-dashboard-card-menu {
+            display: block;
+        }
+    }
+}
+
+.dcae-dashboard-card-menu {
+    .bg_c;
+    border-radius: 0 0 4px 4px;
+    border-top: 3px solid @color_a;
+    box-shadow: 0 2px 2px 0px rgba(0, 0, 0, 0.2);
+    color: @color_s;
+    display: none;
+    min-height: 30px;
+    padding: 9px 0;
+    position: absolute;
+    right: -27px;
+    width: 208px;
+    z-index: 9;
+    max-height: 164px;
+
+    &::before {
+        //TODO: Missing image for small blue triangle.
+        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAFCAYAAAB4ka1VAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDE0IDc5LjE1Njc5NywgMjAxNC8wOC8yMC0wOTo1MzowMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkE1OTIzNDI1MENFQjExRTU4ODRERTI1MDM2REZCOUYzIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkE1OTIzNDI2MENFQjExRTU4ODRERTI1MDM2REZCOUYzIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QTU5MjM0MjMwQ0VCMTFFNTg4NERFMjUwMzZERkI5RjMiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QTU5MjM0MjQwQ0VCMTFFNTg4NERFMjUwMzZERkI5RjMiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4gBXTlAAAAOElEQVR42mK0rp7NgASMgZgFiE/CBJjQJPcA8U4gNkdXAJMUAGJ+ZEVMaJIwAFfEhEUSRRFAgAEAVtgJyiLAPWAAAAAASUVORK5CYII=');
+        content: '';
+        display: block;
+        height: 21px;
+        position: absolute;
+        right: 24px;
+        top: -24px;
+        width: 184px;
+        background-repeat: no-repeat;
+        background-position: 175px 16px;
+    }
+}
+
+.i-sdc-dashboard-card-menu-item {
+    .hand;
+    line-height: 24px;
+    padding: 0 10px;
+    &:hover { .a_7; }
+}
+
+.dcae-dashboard-card-info-lifecycleState-icon{
+    position:absolute;
+    bottom:18px;
+    right:10px;
+}
+
+// Same for dashboard and catalog view.
+.dcae-dashboard-card-schema-image {
+    position: absolute;
+    top: 41%;
+
+    //TODO: Israel - remove this after getting the services sprite.
+    height: 45px;
+    width: 53px;
+    background-repeat: no-repeat;
+
+    // Center the icon vertical and horizontal.
+    margin: auto;
+    left: 0;
+    right: 0;
+    top: -10px;
+    bottom: 0;
+}
+
+/* dashboard card main icons */
+.dcae-dashboard-card-schema-image.service      { .dcae-s-sdc-service }
+.dcae-dashboard-card-schema-image.resource     { .dcae-s-sdc-resource }
+
+/* dashboard card statuses icons */
+.dcae-dashboard-card-edit.NOT_CERTIFIED_CHECKIN        { .dcae-sprite; .dcae-s-sdc-state.NOT_CERTIFIED_CHECKIN; }
+.dcae-dashboard-card-edit.NOT_CERTIFIED_CHECKOUT       { .dcae-sprite; .dcae-s-sdc-state.NOT_CERTIFIED_CHECKOUT; }
+.dcae-dashboard-card-edit.CERTIFIED                    { .dcae-sprite; .dcae-s-sdc-state.CERTIFIED; }
+.dcae-dashboard-card-edit.READY_FOR_CERTIFICATION      { .dcae-sprite; .dcae-s-sdc-state.READY_FOR_CERTIFICATION; }
+.dcae-dashboard-card-edit.CERTIFICATION_IN_PROGRESS    { .dcae-sprite; .dcae-s-sdc-state.CERTIFICATION_IN_PROGRESS; }
+.dcae-dashboard-card-edit.DISTRIBUTED                  { .dcae-sprite; .dcae-s-sdc-state.DISTRIBUTED; }
+
+.dcae-dashboard-card-avatar.green + .dcae-dashboard-card-edit.NOT_CERTIFIED_CHECKIN   { .dcae-sprite; .dcae-s-sdc-state.NOT_CERTIFIED_CHECKIN.green; }
+.dcae-dashboard-card-avatar.green + .dcae-dashboard-card-edit.NOT_CERTIFIED_CHECKOUT  { .dcae-sprite; .dcae-s-sdc-state.NOT_CERTIFIED_CHECKOUT.green; }
+.dcae-dashboard-card-avatar.green + .dcae-dashboard-card-edit.CERTIFIED               { .dcae-sprite; .dcae-s-sdc-state.CERTIFIED.green; }
+.dcae-dashboard-card-avatar.green + .dcae-dashboard-card-edit.READY_FOR_CERTIFICATION { .dcae-sprite; .dcae-s-sdc-state.READY_FOR_CERTIFICATION.green; }
+.dcae-dashboard-card-avatar.green + .dcae-dashboard-card-edit.CERTIFICATION_IN_PROGRESS { .dcae-sprite; .dcae-s-sdc-state.CERTIFICATION_IN_PROGRESS.green; }
+.dcae-dashboard-card-avatar.green + .dcae-dashboard-card-edit.DISTRIBUTED             { .dcae-sprite; .dcae-s-sdc-state.DISTRIBUTED.green; }
+
+.dcae-dashboard-card-avatar.red + .dcae-dashboard-card-edit.NOT_CERTIFIED_CHECKIN     { .dcae-sprite; .dcae-s-sdc-state.NOT_CERTIFIED_CHECKIN.red; }
+.dcae-dashboard-card-avatar.red + .dcae-dashboard-card-edit.NOT_CERTIFIED_CHECKOUT    { .dcae-sprite; .dcae-s-sdc-state.NOT_CERTIFIED_CHECKOUT.red; }
+.dcae-dashboard-card-avatar.red + .dcae-dashboard-card-edit.CERTIFIED                 { .dcae-sprite; .dcae-s-sdc-state.CERTIFIED.red; }
+.dcae-dashboard-card-avatar.red + .dcae-dashboard-card-edit.READY_FOR_CERTIFICATION   { .dcae-sprite; .dcae-s-sdc-state.READY_FOR_CERTIFICATION.red; }
+.dcae-dashboard-card-avatar.red + .dcae-dashboard-card-edit.CERTIFICATION_IN_PROGRESS { .dcae-sprite; .dcae-s-sdc-state.CERTIFICATION_IN_PROGRESS.red; }
+.dcae-dashboard-card-avatar.red + .dcae-dashboard-card-edit.DISTRIBUTED               { .dcae-sprite; .dcae-s-sdc-state.DISTRIBUTED.red; }
+
+.w-sdc-main-container{
+        height: 100%;
+}
+.sdc-catalog-container {
+
+    height: 100%;
+    .i-sdc-categories-list-item {
+        font-weight: normal;
+    }
+
+    // Checkboxes
+    .i-sdc-designer-leftbar-section-content-ul {
+        padding: 0;
+        margin: 0;
+
+        .i-sdc-catalog-subcategories-checkbox {
+            padding: 0 0 0 20px;
+            margin: 0;
+
+            .i-sdc-catalog-grouping-checkbox {
+                padding: 0 0 0 20px;
+                margin: 0;
+            }
+
+        }
+
+    }
+
+    .i-sdc-designer-leftbar-section-content-li {
+        &:last-child {
+            .i-sdc-categories-list-item {
+                margin: 0;
+            }
+        }
+    }
+
+    .i-sdc-categories-list-item {
+        display: block;
+        //margin-bottom: 5px;
+        //padding-left: 15px;
+        //text-indent: -24px;
+        vertical-align: top;
+        font-weight: bold;
+    }
+
+    .i-sdc-subcategories-list-item {
+        display: block;
+        //padding-left: 20px;
+        vertical-align: top;
+        font-weight: normal;
+        margin: 0;
+        //text-indent: -10px;
+    }
+
+    /*Added by - Ikram */
+     .i-sdc-product-input,
+    .i-sdc-product-select {
+        border: 1px solid @border_color_f;
+        min-height: 30px;
+        padding: 0;
+        width: 100%;
+        margin: 1px 0;
+        background-color: #F2F2F2;
+        outline: none;
+
+        &:disabled {
+            .disabled;
+        }
+        optgroup{
+            color: @color_u;
+            option{
+                color: @color_b;
+            }
+        }
+    }
+
+    .i-sdc-categories-list-item-icon {
+        display: inline-block;
+        float: right;
+        position: relative;
+        right: -8px;
+        top: 6px;
+    }
+
+    .i-sdc-categories-list-item {
+        margin-top: 7px;
+        &.NOT_CERTIFIED_CHECKOUT,
+        &.NOT_CERTIFIED_CHECKIN {
+            .i-sdc-categories-list-item-icon {
+                background: url('images/sprites/sprite-global-old.png') no-repeat -53px -2889px;
+                width: 14px;
+                height: 14px;
+
+            }
+        }
+
+        &.CERTIFIED {
+            .i-sdc-categories-list-item-icon {
+                background: url('images/sprites/sprite-global-old.png') no-repeat -53px -3034px;
+                width: 14px;
+                height: 16px;
+            }
+        }
+
+        &.READY_FOR_CERTIFICATION {
+            .i-sdc-categories-list-item-icon {
+                background: url('images/sprites/sprite-global-old.png') no-repeat -53px -2985px;
+                width: 14px;
+                height: 16px;
+            }
+        }
+
+        &.CERTIFICATION_IN_PROGRESS {
+            .i-sdc-categories-list-item-icon {
+                background: url('images/sprites/sprite-global-old.png') no-repeat -53px -2934px;
+                width: 14px;
+                height: 16px;
+            }
+        }
+
+        &.DISTRIBUTED,
+        &.TBD {
+            .i-sdc-categories-list-item-icon {
+                background: url('images/sprites/sprite-global-old.png') no-repeat -43px -3087px;
+                width: 24px;
+                height: 14px;
+
+            }
+        }
+    }
+
+    .i-sdc-categories-list-input {
+        margin: 8px;
+
+    }
+
+    .i-sdc-subcategories-list-input {
+
+        margin: 8px;
+    }
+    .i-sdc-subcategories-list-input-container {
+        margin: 0px 0px 0px 20px;
+        padding: 2px;
+    }
+
+    .dcae-header-catalog-search-container {
+        display: table;
+        padding: 21px 0;
+        position: relative;
+
+        .dcae-designer-leftbar-search-input {
+            color: #000;
+            width: 300px;
+        }
+
+       // .magnification {
+      //      .dcae-sprite;
+      //      .dcae-sprite.magnification-glass;
+      //      .hand;
+      //      position: absolute;
+      //      top: 40px;
+     //       right: 42px;
+      //  }
+    }
+
+    .dcae-catalog-main {
+        padding: 10px 12px;
+    }
+    .dcae-dashboard-catalog-header {
+        .b_9;
+        display: inline-block;
+        font-style: italic;
+        font-weight: bold;
+        padding-left: 10px;
+    }
+
+    .dcae-dashboard-catalog-header-order {
+        .b_9;
+        font-weight: 800;
+    }
+
+    .dcae-dashboard-catalog-sort {
+        .b_9;
+        font-weight: bold;
+        white-space:pre;
+        &:hover{
+            .hand;
+            text-decoration: none;
+            .a_9;
+        }
+        &.blue {
+            .a_9;
+        }
+    }
+
+    .dcae-catalog-sort-arrow{
+        display: inline-block;
+        &.up{
+            .b_9;
+            width: 0;
+            height: 0;
+            border-left: 5px solid transparent;
+            border-right: 5px solid transparent;
+            border-bottom: 5px solid ;
+        }
+        &.down{
+            .b_9;
+            width: 0;
+            height: 0;
+            border-left: 5px solid transparent;
+            border-right: 5px solid transparent;
+            border-top: 5px solid;
+        }
+    }
+
+
+
+
+    .dcae-dashboard-catalog-header-right{
+        float: right;
+        display: inline-block;
+        padding-right:34px;
+    }
+
+    .dcae-dashboard-catalog-header-right-vf {
+        top:0px;
+        overflow:scroll;
+    }
+
+    .dcae-header-catalog-search-input {
+        width: 420px;
+        display: table-cell;
+        padding: 0 25px 1px 10px;
+        border: 1px solid #bcbcbc;
+        .border-radius(10px);
+        height: 30px;
+        margin: 10px 30px;
+        outline: none;
+    }
+
+    .sdc-catalog-type-filter-container {
+        margin-top: -1px;
+    }
+
+    .i-sdc-designer-leftbar-section-title {
+        text-transform: uppercase;
+        .l_14_m;
+        line-height: 30px;
+    }
+
+    .i-sdc-designer-leftbar-section-title-icon {
+        .hand;
+        .tlv-sprite;
+        .footer-close;
+        transition: .3s all;
+        margin-top: -4px;
+    }
+
+    .i-sdc-designer-leftbar-section-title-text {
+        margin-left: 20px;
+    }
+
+    .seperator-left,
+    .seperator-right {
+        border-right: solid 1px @color_m;
+        display: table-cell;
+        width: 2px;
+    }
+
+    // Rotate catalog left side arrows
+    .i-sdc-designer-leftbar-section-title.expanded .i-sdc-designer-leftbar-section-title-icon {
+        transform: rotate(180deg);
+    }
+
+    // Transform catalog left side sections
+    .i-sdc-designer-leftbar-section-title + .i-sdc-designer-leftbar-section-content {
+        max-height: 0px;
+        margin: 0 auto;
+        transition: all .3s;
+        overflow: hidden;
+        padding: 0 10px 0 18px;
+    }
+
+    .i-sdc-designer-leftbar-section-title.expanded + .i-sdc-designer-leftbar-section-content {
+        max-height: 9999px;
+        margin: 0 auto 1px;
+        transition: all .3s;
+        padding: 10px 18px 10px 18px;
+        overflow: hidden;
+    }
+
+}
+
+.dcae-search-icon{
+    position: absolute;
+    right: 40px;
+    top: 40px;
+    &.leftbar{
+        top: 19px;
+        right: 18px;
+    }
+    &.magnification {
+        .dcae-sprite;
+        .dcae-sprite.magnification-glass;
+        .hand;
+    }
+
+    &.cancel {
+        .dcae-sprite;
+        .dcae-sprite.clear-text;
+        .hand;
+    }
+}
+
+.dcae-main-container {
+  background-color: #ECEFF3;
+  position: absolute;
+  /*top: 0px;*/
+  left: 0;
+  right: 0;
+  /*bottom: 0px;*/
+  height: 100%;
+  overflow: auto;
+}
+.dcae-input-text:read-only{
+    background-color: #eaeaea;
+}
+.dcae-image-text-btn{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+.dcae-round-btn{
+    border-radius: 50%;
+    position: relative;
+    z-index: 2;
+    padding: 0;
+    display: inline-block;
+    color: #fff;
+    overflow: hidden;
+    z-index: 1;
+    width: 75px;
+    height: 75px;
+    line-height: 40px;
+    padding: 0;
+    background-color: #009fdb;
+    border-radius: 50%;
+    transition: .3s;
+    cursor: pointer;
+    vertical-align: middle;
+    border:0;
+}
+.dcae-round-btn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed !important;
+}
+.dcae-main-container .dcae-main-right-container {
+  background-color: #ffffff;
+  bottom: 0;
+  padding: 22px 12px;
+  position: absolute;
+  left: 240px;
+  right: 0;
+  top: 0px;
+  overflow: scroll;
+}
+.dcae-main-container .dcae-main-right-container > div:first-child {
+  /* scroll fix */
+  padding-bottom: 53px;
+}
+.sdc-loading-page {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  position: absolute;
+  height: 100%;
+  width: 100%;
+}
+.sdc-loading-page .caption1 {
+  color: #ffffff;
+  font-family: omnes-light, sans-serif;
+  font-size: 24px;
+  text-align: center;
+}
+.sdc-loading-page .caption2 {
+  color: #ffffff;
+  font-family: omnes-medium, sans-serif;
+  font-size: 16px;
+  display: block;
+}
+
+.dcae-dashboard-card-new {
+  border: 2px dashed #a8b3b9;
+  -webkit-border-radius: 2px;
+  -moz-border-radius: 2px;
+  border-radius: 2px;
+  cursor: pointer;
+  display: inline-block;
+  margin: 9px;
+  position: relative;
+  vertical-align: middle;
+  height: 190px;
+  width: 190px;
+}
+.dcae-dashboard-card-new-content {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  height: 100%;
+}
+.dcae-import-icon{
+    background: url('images/import.svg')  no-repeat center;
+    display: inline-block;
+    width: 23px;
+    height: 23px;
+    position: relative;
+}
+.dcae-dashboard-card-new-content-plus {
+//   background-image: url('images/sprites/sprite-global.png');
+  background: url('images/Add.png')  no-repeat center;
+  display: inline-block;
+//   background-position: -50px -77px;
+  width: 45px;
+  height: 45px;
+  position: relative;
+//   margin-bottom: 20px;
+}
+.dcae-dashboard-card-new-content-plus:after {
+  color: #009fdb;
+  font-family: omnes-medium, sans-serif;
+  font-size: 14px;
+  content: 'Create New Asset';
+  position: absolute;
+  top: 50px;
+  left: -36px;
+  vertical-align: -50%;
+  width:120px;
+}
+.dcae-dashboard-card-import-content-plus {
+  background-image: url('images/sprites/sprite-global.png');
+  display: inline-block;
+  background-position: -100px -81px;
+  width: 23px;
+  height: 23px;
+  position: relative;
+  margin-bottom: 20px;
+}
+.dcae-dashboard-card-import-content-plus:after {
+  color: #959595;
+  font-family: omnes-medium, sans-serif;
+  font-size: 14px;
+  content: 'IMPORT';
+  position: absolute;
+  top: 25px;
+  left: -16px;
+  vertical-align: -50%;
+}
+.sdc-dashboard-create-element-container,
+.sdc-dashboard-import-element-container {
+  width: 140px;
+}
+.sdc-dashboard-create-element-container .tlv-btn.import-dcae,
+.sdc-dashboard-import-element-container .tlv-btn.import-dcae {
+  padding: 0;
+}
+.sdc-dashboard-create-element-container .tlv-btn,
+.sdc-dashboard-import-element-container .tlv-btn {
+  position: relative;
+  width: 100%;
+  margin-bottom: 10px;
+}
+.sdc-dashboard-create-element-container .tlv-btn:last-child,
+.sdc-dashboard-import-element-container .tlv-btn:last-child {
+  margin-bottom: 0;
+}
+.sdc-dashboard-create-element-container input[type="file"],
+.sdc-dashboard-import-element-container input[type="file"] {
+  cursor: inherit;
+  filter: alpha(opacity=0);
+  opacity: 0;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 138px;
+  height: 30px;
+}
+
+.dcae-dashboard-card:hover {
+  border: solid 1px #d2d2d2;
+  -webkit-box-shadow: 3px 3px 2px 0px rgba(24, 24, 25, 0.05);
+  -moz-box-shadow: 3px 3px 2px 0px rgba(24, 24, 25, 0.05);
+  box-shadow: 3px 3px 2px 0px rgba(24, 24, 25, 0.05);
+}
+.dcae-dashboard-card:active {
+  border: solid 1px #71c5eb;
+  -webkit-box-shadow: 3px 3px 2px 0px rgba(24, 24, 25, 0.05);
+  -moz-box-shadow: 3px 3px 2px 0px rgba(24, 24, 25, 0.05);
+  box-shadow: 3px 3px 2px 0px rgba(24, 24, 25, 0.05);
+}
+
+.dcae-dashboard-card-description {
+  color: #ffffff;
+  font-family: omnes-regular, sans-serif;
+  font-size: 12px;
+  cursor: pointer;
+  background-color: rgba(57, 73, 84, 0.9);
+  border-radius: 4px 4px 0 0;
+  bottom: 0;
+  left: 0;
+  opacity: 0;
+  padding: 10px;
+  position: absolute;
+  right: 0;
+  text-align: left;
+  top: 0;
+  word-wrap: break-word;
+  z-index: 4;
+  min-height: 100px;
+  overflow: hidden;
+}
+.dcae-dashboard-card-schema {
+  margin-top: 30px;
+}
+.dcae-dashboard-card-edit {
+  cursor: pointer;
+  position: absolute;
+  right: 13px;
+  top: 15px;
+  z-index: 2;
+}
+.dcae-dashboard-card-footer {
+  padding: 0 5px;
+//   padding: 3px 12px 10px 12px;
+  position: relative;
+}
+.dcae-dashboard-card-avatar {
+  text-transform: uppercase;
+  border-radius: 50%;
+  display: inline-block;
+  position: absolute;
+  left: -6px;
+  text-align: center;
+  top: -6px;
+}
+.dcae-dashboard-card-avatar span {
+  background-color: #ffffff;
+  -webkit-border-radius: 15px;
+  -moz-border-radius: 15px;
+  border-radius: 15px;
+  color: #ffffff;
+  content: '';
+  height: 30px;
+  text-align: center;
+  display: block;
+  border: solid 2px #ECEFF3;
+  padding: 3px 10px 2px 10px;
+}
+.dcae-dashboard-card-avatar span.VF {
+  color: #9063cd;
+  font-family: omnes-medium, sans-serif;
+  font-size: 14px;
+}
+.dcae-dashboard-card-avatar span.VF::before {
+  content: 'VF';
+}
+.dcae-dashboard-card-avatar span.VFC {
+  color: #9063cd;
+  font-family: omnes-medium, sans-serif;
+  font-size: 14px;
+}
+.dcae-dashboard-card-avatar span.VFC::before {
+  content: 'VFC';
+}
+.dcae-dashboard-card-avatar span.VFCMT {
+  color: #9063cd;
+  font-family: omnes-medium, sans-serif;
+  font-size: 14px;
+}
+.dcae-dashboard-card-avatar span.VFCMT::before {
+  content: 'VFCMT';
+}
+.dcae-dashboard-card-avatar span.CP {
+  color: #9063cd;
+  font-family: omnes-medium, sans-serif;
+  font-size: 14px;
+}
+.dcae-dashboard-card-avatar span.CP::before {
+  content: 'CP';
+}
+.dcae-dashboard-card-avatar span.VL {
+  color: #9063cd;
+  font-family: omnes-medium, sans-serif;
+  font-size: 14px;
+}
+.dcae-dashboard-card-avatar span.VL::before {
+  content: 'VL';
+}
+.dcae-dashboard-card-avatar span.SERVICE {
+  color: #71c5eb;
+  font-family: omnes-medium, sans-serif;
+  font-size: 14px;
+}
+.dcae-dashboard-card-avatar span.SERVICE::before {
+  content: 'S';
+}
+.dcae-dashboard-card-avatar span.PRODUCT {
+  color: #056bae;
+  font-family: omnes-medium, sans-serif;
+  font-size: 14px;
+}
+.dcae-dashboard-card-avatar span.PRODUCT::before {
+  content: 'P';
+}
+.dcae-dashboard-card-avatar span.green {
+  color: #1d9a95;
+  font-family: omnes-medium, sans-serif;
+  font-size: 17px;
+}
+.dcae-dashboard-card-avatar span.green::before {
+  content: 'R';
+}
+.dcae-dashboard-card-avatar span.red {
+  color: #e85858;
+  font-family: omnes-medium, sans-serif;
+  font-size: 17px;
+}
+.dcae-dashboard-card-avatar span.red::before {
+  content: 'S';
+}
+.dcae-dashboard-card-avatar span.dblack {
+  color: #000000;
+  font-family: omnes-medium, sans-serif;
+  font-size: 17px;
+}
+.dcae-dashboard-card-avatar span.dblack::before {
+  content: 'P';
+}
+.dcae-dashboard-card-info {
+  display: inline-block;
+  vertical-align: middle;
+  max-width: 165px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.dcae-dashboard-card-info-name-container {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  margin: 0 0 2px 10px;
+}
+.dcae-dashboard-card-info-name {
+  color: #5a5a5a;
+  font-family: omnes-medium, sans-serif;
+  font-size: 14px;
+  display: inline-block;
+  vertical-align: middle;
+  max-width: 165px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.dcae-dashboard-card-info-lifecycleState {
+  color: #5a5a5a;
+  font-family: omnes-medium, sans-serif;
+  font-size: 13px;
+  display: inline-block;
+  vertical-align: middle;
+  max-width: 165px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.dcae-dashboard-card-info-user {
+  color: #959595;
+  font-family: omnes-regular, sans-serif;
+  font-size: 13px;
+  line-height: 18px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  width: 100%;
+}
+.dcae-dashboard-card-menu-button {
+  display: inline-block;
+  padding: 12px 0 0 10px;
+  position: absolute;
+  right: 12px;
+  top: 8px;
+  border-left: solid 1px #e1e7ec;
+  height: 42px;
+}
+.dcae-dashboard-card-menu-button:hover .dcae-dashboard-card-menu {
+  display: block;
+}
+.dcae-dashboard-card-menu {
+  background-color: #ffffff;
+  border-radius: 0 0 4px 4px;
+  border-top: 3px solid #3b7b9b;
+  box-shadow: 0 2px 2px 0px rgba(0, 0, 0, 0.2);
+  color: #000000;
+  display: none;
+  min-height: 30px;
+  padding: 9px 0;
+  position: absolute;
+  right: -27px;
+  width: 208px;
+  z-index: 9;
+  max-height: 164px;
+}
+.dcae-dashboard-card-menu::before {
+  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAFCAYAAAB4ka1VAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDE0IDc5LjE1Njc5NywgMjAxNC8wOC8yMC0wOTo1MzowMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkE1OTIzNDI1MENFQjExRTU4ODRERTI1MDM2REZCOUYzIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkE1OTIzNDI2MENFQjExRTU4ODRERTI1MDM2REZCOUYzIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QTU5MjM0MjMwQ0VCMTFFNTg4NERFMjUwMzZERkI5RjMiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QTU5MjM0MjQwQ0VCMTFFNTg4NERFMjUwMzZERkI5RjMiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4gBXTlAAAAOElEQVR42mK0rp7NgASMgZgFiE/CBJjQJPcA8U4gNkdXAJMUAGJ+ZEVMaJIwAFfEhEUSRRFAgAEAVtgJyiLAPWAAAAAASUVORK5CYII=');
+  content: '';
+  display: block;
+  height: 21px;
+  position: absolute;
+  right: 24px;
+  top: -24px;
+  width: 184px;
+  background-repeat: no-repeat;
+  background-position: 175px 16px;
+}
+
+.perfect-scrollbar {
+  position: relative;
+  overflow: hidden;
+}
+
+.scroller {
+    white-space: pre-line;
+    height: 500px;
+    overflow-y: hidden;
+    position: relative;
+}
+
+.ps-container > .ps-scrollbar-y-rail > .ps-scrollbar-y {
+  background-color: #666666;
+  -webkit-border-radius: 0px;
+  -moz-border-radius: 0px;
+  border-radius: 0px;
+  opacity: 1;
+  width: 6px;
+  margin: 0 2px;
+}
+.ps-container > .ps-scrollbar-y-rail {
+  -webkit-border-radius: 0px;
+  -moz-border-radius: 0px;
+  border-radius: 0px;
+  width: 10px ;
+  background-color: rgba(255, 255, 255, 0.5);
+  z-index: 1000;
+}
+
+/* dashboard card statuses icons */
+.dcae-s-sdc-state.NOT_CERTIFIED_CHECKIN              { background-position: -47px -2839px; width: 20px; height: 19px;}
+.dcae-s-sdc-state.NOT_CERTIFIED_CHECKIN.green        { background-position: -70px -2839px;}
+.dcae-s-sdc-state.NOT_CERTIFIED_CHECKIN.red          { background-position: -93px -2839px;}
+
+.dcae-s-sdc-state.NOT_CERTIFIED_CHECKOUT             { background-position: -53px -2889px; width: 14px; height: 14px;}
+.dcae-s-sdc-state.NOT_CERTIFIED_CHECKOUT.green       { background-position: -76px -2889px;}
+.dcae-s-sdc-state.NOT_CERTIFIED_CHECKOUT.red         { background-position: -99px -2889px;}
+
+.dcae-s-sdc-state.CERTIFIED                          { background-position: -53px -3034px; width: 14px; height: 16px;}
+.dcae-s-sdc-state.CERTIFIED.green                    { background-position: -76px -3034px;}
+.dcae-s-sdc-state.CERTIFIED.red                      { background-position: -99px -3034px;}
+
+.dcae-s-sdc-state.READY_FOR_CERTIFICATION            { background-position: -53px -2985px; width: 14px; height: 16px;}
+.dcae-s-sdc-state.READY_FOR_CERTIFICATION.green      { background-position: -76px -2985px;}
+.dcae-s-sdc-state.READY_FOR_CERTIFICATION.red        { background-position: -99px -2985px;}
+
+.dcae-s-sdc-state.CERTIFICATION_IN_PROGRESS          { background-position: -53px -2934px; width: 14px; height: 16px;}
+.dcae-s-sdc-state.CERTIFICATION_IN_PROGRESS.green    { background-position: -76px -2934px;}
+.dcae-s-sdc-state.CERTIFICATION_IN_PROGRESS.red      { background-position: -99px -2934px; }
+
+.dcae-s-sdc-state.DISTRIBUTED                        { background-position: -43px -3087px; width: 24px; height: 14px;}
+.dcae-s-sdc-state.DISTRIBUTED.green                  { background-position: -76px -3087px;}
+.dcae-s-sdc-state.DISTRIBUTED.red                    { background-position: -113px -3087px;}
+
diff --git a/app/main/dashboard/dcaedt/dcaedt.controller.js b/app/main/dashboard/dcaedt/dcaedt.controller.js
new file mode 100644
index 0000000..499a523
--- /dev/null
+++ b/app/main/dashboard/dcaedt/dcaedt.controller.js
@@ -0,0 +1,519 @@
+(function () {
+
+    'use strict';
+
+    var CHECKOUT = 'NOT_CERTIFIED_CHECKOUT';
+
+    var DashboardDCAEController = function ($rootScope, $scope, $log, $location, dcaeFactory, $stateParams, $state, appSettings, $http, $templateCache) {
+        $scope.appSettings = appSettings;
+
+        function init() {
+            if ($rootScope.VNFs === undefined) {
+                dcaeFactory
+                    .getVNFList()
+                    .then(function (response) {
+                        $rootScope.VNFs = response.data;
+                        $rootScope.VNFsRef = $rootScope.VNFs;
+                        $scope.title = appSettings.title;
+                        //var vm = this; vm.test = appSettings.title;
+                    }, function (res, status, headers, config) {
+                        errorHanlder(res);
+                        $rootScope.VNFs = [];
+                    });
+            }
+            $rootScope.$state = $state;
+            $rootScope.$stateParams = $stateParams;
+        }
+
+        init();
+
+        $scope.sortingVfcmts = function () {
+            $rootScope.VNFs = $rootScope.VNFsRef;
+            switch (value) {
+                case 'New':
+                    return $rootScope
+                        .VNFs
+                        .reverse()
+                    case 'Abc':
+                    return $rootScope.VNFs = _.sortBy($rootScope.VNFs, function (s) {
+                        return s
+                            .name
+                            .charCodeAt() * -1;
+                    }).reverse();
+                default:
+                    return $rootScope.VNFs;
+            }
+        }
+
+        $scope.goGeneral = function (component, createMode, typeFlag) {
+            // typeFlag: true when VNF, false when Service Assurance
+            $rootScope.component = component;
+            $rootScope.readOnlyComponent = false;
+            $rootScope.resultInformation = "";
+            if (component != null) {
+                if (component.lastUpdaterUserId !== $rootScope.userId && component.lifecycleState === CHECKOUT) {
+                    console.log('readOnlyComponent');
+                    $rootScope.readOnlyComponent = true;
+                }
+                $rootScope.componentUser = component.lastUpdaterUserId;
+            }
+
+            $rootScope.createMode = createMode;
+            $rootScope.typeFlag = typeFlag;
+            $rootScope.s = '';
+
+            console.log(createMode);
+            console.log(component);
+            console.log(typeFlag);
+
+            //description
+            if (component && component.uuid) {
+                $http({
+                    method: 'GET',
+                    url: window.host + 'resource/' + component.uuid,
+                    headers: {
+                        'Content-Type': 'application/x-www-form-urlencoded'
+                    } // set the headers so angular passing info as form data (not request payload)
+                    })
+                    .then(function (response) {
+                        if (response && response.data && response.data.description)
+                            $rootScope.component.description = response.data.description;
+                            //console.log(response);
+                        }
+                    );
+            }
+
+            if (typeFlag == null) {
+                $scope.pullArtifacts(component);
+            } else {
+                if (!typeFlag) {
+                    //$scope.Services();
+                }
+                $scope.page = "general";
+                $state.go('dcae.app.general');
+
+            }
+        }
+
+        $scope.saveOnSdcExit = function (params) {
+            if (params === 'ok') {
+                document
+                    .getElementById("savebtn")
+                    .click();
+            } else {
+                window
+                    .sdc
+                    .notify('ACTION_COMPLETED');
+            }
+        }
+
+        $scope.goSelfServe = function (component, createMode) {
+            //$location.url('/general'); if(component) {
+            $scope.page = "self_serve";
+            $state.go('dcae.app.self_serve');
+            $rootScope.component = component;
+            $rootScope.createMode = createMode;
+            console.log(component);
+            /*} else {
+               $scope.page="general";
+               $state.go('dcae.app.general');
+               $rootScope.createMode = true;
+               $rootScope.component={};
+            }*/
+
+        }
+
+        $scope.goImport = function (component, createMode) {
+            //$location.url('/general'); if(component) {
+            $scope.page = "import";
+            $state.go('dcae.app.import');
+            $rootScope.component = component;
+            $rootScope.createMode = createMode;
+            console.log(component);
+            /*} else {
+               $scope.page="general";
+               $state.go('dcae.app.general');
+               $rootScope.createMode = true;
+               $rootScope.component={};
+            }*/
+        }
+
+        $scope.goToBreadcrumbHome = function () {
+            $scope.page = "home";
+            $state.go('dcae.app.home');
+        }
+
+        $scope.goServices = function (component) {
+            $scope.Services();
+        }
+
+        $scope.goComposition = function (component, typeFlag) {
+            //$location.url('/general'); $scope.uuid = "";
+            $scope.page = "composition";
+            $rootScope.component = component;
+            $state.go('dcae.app.composition');
+            $rootScope.componentUrl = 'comp-fe/icecat.html';
+            $rootScope.typeFlag = typeFlag;
+            $rootScope.updateTime = Date.now();
+
+            $rootScope.importVNFs = $rootScope
+                .VNFs
+                .filter(function (item) {
+                    return item.uuid !== $rootScope.component.uuid;
+                });
+
+            $http
+                .get(window.host + '/conf/composition')
+                .then(function (response) {
+                    // success callback console.log(response);
+                    window.flowTypes = response.data.flowTypes;
+                    window.isRuleEditorActive = response.data.isRuleEditorActive;
+                }, function (response) {
+                    // failure call back console.log(response);
+                    $rootScope.dataTypes = "No Data Type";
+                });
+            console.log('userId: ', $rootScope.userId);
+            console.log('lastUpdaterUserId: ', $rootScope.component.lastUpdaterUserId);
+            $rootScope.disableImport = true;
+            document.addEventListener('noComposition', function () {
+                $rootScope
+                    .$apply(function () {
+                        $rootScope.disableImport = false;
+                    });
+            }, {once: true});
+            // console.log($templateCache('comp-fe/icecat.html')); $rootScope.componentUrl =
+            // "comp-fe/icecat.html#"+component.uuid;
+
+        }
+
+        $scope.selectVfcmtRow = function (importComponent, currentComponent, row) {
+            $scope.importComponent = importComponent;
+            $scope.currentComponent = currentComponent;
+            $scope.selectedRow = row;
+        }
+
+        $scope.importVfcmt = function () {
+            $scope.clone($scope.importComponent, $scope.currentComponent);
+        }
+
+        $scope.clone = function (x, y) {
+            var popup = confirm('Are you sure you want to import? this action will replace the current compositio' +
+                    'n!');
+            if (popup == true) {
+                $http({
+                    method: 'GET',
+                    url: window.host + 'utils/clone/resource/' + x.uuid + '/' + y.uuid,
+                    headers: {
+                        'Content-Type': 'application/x-www-form-urlencoded'
+                    } // set the headers so angular passing info as form data (not request payload)
+                    })
+                    .then(function (response) {
+                        console.log("Clone response:", response);
+                        $rootScope.updateTime = Date.now();
+                    })
+                    .catch(function (res) {
+                        $rootScope.errorMsg = errorHanlder(res);
+                    });
+
+                // $rootScope.component = x; $rootScope.updateTime = Date.now();
+                // $scope.goComposition(y);
+            }
+        };
+
+        $scope.openImport = function () {
+            // debugger; jQuery.noConflict();
+            jQuery('#import').modal("show");
+        }
+
+        $scope.goArtifact = function () {
+            //$location.url('/general');
+            $scope.page = "artifact";
+            $state.go('dcae.app.artifact');
+        }
+
+        $scope.showAttach = function () {
+            if (typeof $rootScope.service !== 'undefined' && typeof $rootScope.vnfi !== 'undefined' && !jQuery.isEmptyObject($rootScope.service) && !jQuery.isEmptyObject($rootScope.vnfi)) {
+                return false;
+            } else {
+                return true;
+            }
+        }
+
+        $scope.saveServiceSelection = function (x, y, z) {
+            $scope.loader = true;
+
+            $rootScope.service = y;
+            $rootScope.vnfi = z;
+            $rootScope.resultInformation2 = false;
+            $http({
+                method: 'POST',
+                url: window.host + x.uuid + '/attachment',
+                // / ' + x.uuid + ' / ' + y.uuid + ' / ' + z.name,
+                data: {
+                    'serviceUuid': y.uuid,
+                    'instanceName': z.name
+                },
+
+                    headers: {
+                        'Content-Type': 'application/json'
+                    }
+                })
+                .then(function (response) {
+                    $scope.loader = false;
+                    console.log(response.data);
+                    $rootScope.resultInformation2 = true;
+                })
+                .catch(function (res) {
+                    $rootScope.errorMsg = errorHanlder(res);
+                });
+        }
+
+        $scope.save = function () {
+            var generalUserInput = {};
+            $scope.createMode = true;
+            $scope.loader = true;
+            generalUserInput.name = this.component.name;
+            generalUserInput.description = this.component.description;
+            console.log(JSON.stringify(generalUserInput, null, 4));
+            var config = {
+                headers: {
+                    'Content-Type': 'application/json'
+                }
+            };
+
+            $rootScope.resultInformation = "";
+
+            dcaeFactory
+                .postData(window.host + 'createVFCMT', generalUserInput, config)
+                .then(function (res) {
+                    $scope.PostDataResponse = res.data;
+                    console.log(res.data);
+                    $rootScope.component = $scope.component = res.data;
+                    $rootScope
+                        .VNFs
+                        .push($rootScope.component);
+                    $rootScope.service = {};
+                    $rootScope.vnfi = {};
+                    showResultInfo("VFCMT Created/Saved.", 5000);
+                })
+                .catch(function (res) {
+                    console.log("Error: ", res.data.notes);
+                    showResultInfo(res.data, 5000);
+                    $rootScope.resultInformation = errorHanlder(res);
+                })
+                . finally(function () {
+                    $scope.loader = false;
+                });
+
+            function showResultInfo(msg, msDuration) {
+                $rootScope.resultInformation = msg;
+                setTimeout(function () {
+                    $rootScope.resultInformation = "";
+                }, msDuration);
+            }
+        }
+
+        $scope.add = function () {
+            var f = document
+                    .getElementById('file')
+                    .files[0],
+                r = new FileReader();
+            r.onloadend = function (e) {
+                var binary = "";
+                var bytes = new Uint8Array(e.target.result);
+                var length = bytes.byteLength;
+
+                for (var i = 0; i < length; i++) {
+                    binary += String.fromCharCode(bytes[i]);
+                }
+
+                $scope.data = (binary).toString();
+                alert($scope.data);
+            }
+            r.readAsArrayBuffer(f);
+        }
+
+        $scope.showTypeFilter = function (type) {
+            if ($rootScope.component == null) {
+                return true;
+            } else {
+                return !(type.invariantUUID).includes($rootScope.component.invariantUUID);
+            }
+        }
+
+        $scope.pullArtifacts = function (x) {
+            console.log('pull artifacts commenced');
+            $http({
+                method: 'GET',
+                url: window.host + x.uuid + '/attachment',
+                headers: {
+                    'Content-Type': 'application/json'
+                } // set the headers so angular passing info as form data (not request payload)
+                })
+                .then(function (response) {
+
+                    $rootScope.typeFlag = true;
+                    var res = response.data.successResponse;
+
+                    if (res != "No Artifacts") {
+                        $rootScope.typeFlag = false;
+                        var uuid = res.substring(0, res.indexOf("/"));
+                        var name = res.substring(res.indexOf("resources/") + 10);
+                        //$scope.Services(); $scope.VNFIs(uuid);
+                        $rootScope.s = uuid + ' / ' + name;
+                        $rootScope.service = {
+                            uuid: uuid
+                        };
+                        $rootScope.vnfi = {
+                            name: name
+                        };
+                    } else {
+                        var uuid = null;
+                        var name = null;
+                    }
+                    $rootScope.typeFlag = true;
+                    console.log($rootScope.s);
+                    // final navigation
+                    $scope.page = "general";
+                    $state.go('dcae.app.general');
+                })
+                .catch(function (res) {
+                    $rootScope.errorMsg = errorHanlder(res);
+                });
+        };
+
+        $scope.Services = function () {
+            // clear dropDown
+            $scope.loader = true;
+            if (jQuery.isEmptyObject($rootScope.service) && jQuery.isEmptyObject($rootScope.vnfi)) {
+                $rootScope.resultInformation2 = false;
+                $rootScope.vnfis = [];
+            } else {
+                $rootScope.resultInformation2 = true;
+                $scope.VNFIs($rootScope.service.uuid);
+            }
+            $http({
+                method: 'GET',
+                url: window.host + 'services/' + $rootScope.component.uuid,
+                headers: {
+                    'Content-Type': 'application/x-www-form-urlencoded'
+                } // set the headers so angular passing info as form data (not request payload)
+                })
+                .then(function (response) {
+                    $rootScope.services = response.data;
+                    console.log($rootScope.services);
+                    $rootScope.services = $rootScope
+                        .services
+                        .map(function (service) {
+                            if (!(service.lifeCycleState === CHECKOUT && service.lastUpdaterUserId !== $rootScope.userId)) {
+                                return service;
+                            } else {
+                                console.log("remove form dropDown:" + service.name + " " + service.lifeCycleState + " " + service.lastUpdaterUserId);
+                            }
+                        })
+                        .filter(function (item) {
+                            return item !== undefined;
+                        });
+
+                    $scope.loader = false;
+                    $rootScope.vnfiTouch = false;
+                    $scope.page = "services";
+                    $state.go('dcae.app.services');
+                })
+                .catch(function (res) {
+                    $rootScope.errorMsg = errorHanlder(res);
+                })
+                . finally(function () {
+                    $scope.loader = false;
+                });
+        };
+
+        $scope.vnfiChange = function (y) {
+            $rootScope.vnfi = {};
+            if (y) {
+                $rootScope.vnfi.name = y;
+            }
+        }
+
+        $scope.VNFIs = function (x) {
+            $http({
+                method: 'GET',
+                url: window.host + 'service/' + x,
+                headers: {
+                    'Content-Type': 'application/x-www-form-urlencoded'
+                } // set the headers so angular passing info as form data (not request payload)
+                })
+                .then(function (response) {
+                    $rootScope.service = {};
+                    $rootScope.service.uuid = x;
+                    $rootScope.vnfis = [];
+                    $rootScope.vnfiTouch = true;
+                    if (response.data.resources) {
+                        response
+                            .data
+                            .resources
+                            .forEach(function (x) {
+                                var v = {
+                                    'name': x.resourceInstanceName,
+                                    'uuid': x.resourceInvariantUUID
+                                };
+                                $rootScope
+                                    .vnfis
+                                    .push(v);
+                            });
+                    }
+                    console.log($rootScope.vnfis);
+                    return response.data;
+                })
+                .catch(function (res) {
+                    $rootScope.errorMsg = errorHanlder(res);
+                })
+                . finally(function () {
+                    $scope.loader = false;
+                });
+        }
+    };
+
+    DashboardDCAEController.$inject = [
+        '$rootScope',
+        '$scope',
+        '$log',
+        '$location',
+        'dcaeFactory',
+        '$stateParams',
+        '$state',
+        'appSettings',
+        '$http',
+        '$templateCache'
+    ];
+
+    angular
+        .module('dcaeApp.dashboard.dcae')
+        .controller('DashboardDCAEController', DashboardDCAEController);
+
+    angular
+        .module('dcaeApp.dashboard.dcae')
+        .directive('leftMenu', function ($state) {
+            return {
+                templateUrl: 'main/dashboard/dcaedt/leftMenu.html',
+                controller: function ($scope, $state) {
+                    $scope.page = $state
+                        .current
+                        .url
+                        .substring(1, $state.current.url.length);
+                    console.log("page: " + $scope.page);
+                }
+            }
+        });
+
+})();
+
+function errorHanlder(res) {
+    console.log("Error: ", res.data.notes);
+    var tempError = Object
+        .keys(res.data.requestError)
+        .map(function (key) {
+            return res.data.requestError[key];
+        });
+    return tempError[0].formattedErrorMessage;
+}
diff --git a/app/main/dashboard/dcaedt/dcaedt.factory.js b/app/main/dashboard/dcaedt/dcaedt.factory.js
new file mode 100644
index 0000000..934ed76
--- /dev/null
+++ b/app/main/dashboard/dcaedt/dcaedt.factory.js
@@ -0,0 +1,27 @@
+(function () {
+
+    'use strict';
+
+    var dcaeFactory = function ($http, appSettings) {
+
+        var factory = {};
+
+        factory.getVNFList = function () {
+            return $http.get(window.host + 'getResourcesByCategory');
+        };
+
+        factory.postData = function (url, data, config) {
+            return $http.post(url, data, config);
+        };
+
+        return factory;
+    };
+
+    dcaeFactory.$inject = ['$http', 'appSettings'];
+
+    angular
+        .module('dcaeApp.dashboard.dcae')
+        .factory('dcaeFactory', dcaeFactory);
+
+
+})();
diff --git a/app/main/dashboard/dcaedt/dcaedt.html b/app/main/dashboard/dcaedt/dcaedt.html
new file mode 100644
index 0000000..7084cf0
--- /dev/null
+++ b/app/main/dashboard/dcaedt/dcaedt.html
@@ -0,0 +1,69 @@
+<div ng-controller="AppController as vm" class="{{state.current.bodyClass || ''}} dcaeApp dcae-module">
+    <loader data-display="isLoading"></loader>
+
+    <div class="dcae-main-container" style="padding: 1rem;">
+
+        <div style="display: flex; justify-content: space-between; margin:10px 0;">
+            <span style="padding-left: 10px; display: flex; align-items: center;">
+                <span ng-if="!VNFs" style="padding-right:3px;">0</span> {{ VNFs.length }} VFCMTS
+            </span>
+
+            <div style="position: relative; margin-right:9px;">
+                <input type='text' ng-model='searchVfc' placeholder="Search" class="form-control" style="border-radius: 2px;width: 400px; height: 32px;line-height: 32px;border: 1px solid #d2d2d2;outline: none;text-indent: 10px; background: white;"
+                />
+                <span class="glyphicon glyphicon-search form-control-feedback" aria-hidden="true"></span>
+            </div>
+        </div>
+        <!-- <br />
+        <br />
+        <footer>Version: {{ appSettings.version }} </footer> -->
+        <div style="display: flex; flex-wrap: wrap; justify-content: flex-start;">
+            <div class="dcae-dashboard-card">
+                <div class="dcae-dashboard-card-new-content" data-tests-id="AddButtonsArea" data-ng-click="goGeneral(null, true, true)">
+                    <div class="dcae-dashboard-card-new-content-plus" data-ng-show="!displayActions"></div>
+                    <div class="sdc-dashboard-create-element-container" data-ng-show="displayActions">
+                        <!-- <button data-tests-id="createResourceButton" class="tlv-btn-svc_assu outline blue" data-ng-click="goGeneral(null, true, true)">Add VNF
+                            Assurance Template</button>
+                        <button data-tests-id="createResourceButton" class="tlv-btn-svc_assu outline blue" data-ng-click="goGeneral(null, true, false)">Add Service
+                            Assurance Template</button> -->
+                    </div>
+                </div>
+            </div>
+
+            <div class="tlv-loader large" ng-if="!VNFs"></div>
+
+            <div data-ng-class="{'sdc-hide-popover': hidePopover}" data-ng-init="component.filterTerm = component.name +  ' '  + component.description + ' ' + component.tags.toString() + ' ' + component.version"
+                class="dcae-dashboard-card ng-scope" data-ng-repeat="component in VNFs | filter:searchVfc" data-ng-class="{'resource' : component.resourceType === 'VFC', 'service' : component.isService(), 'product' : component.isProduct()}">
+
+
+                <div class="dcae-dashboard-card-body" data-ng-click="gui.isLoading || goGeneral(component, false, null)">
+                    <!-- <div class="dcae-dashboard-card-avatar">
+                        <span data-tests-id="asset-type" class="{{component.resourceType}}"></span>
+                    </div> -->
+                    <div class="dcae-vfcmt-title">
+                        <span>{{component.resourceType}}</span>
+                    </div>
+
+                    <!-- <div class="dcae-dashboard-card-edit " data-ng-class="component.lifecycleState" data-tests-id="assetlifecycleState {{getStatus()}}"></div> -->
+                    <div class="dcae-dashboard-card-schema-image sprite-resource-icons defaulticon" style="background-image: url(/sdc1/scripts/images/sprite-resource-icons.e1bcf178b7b79fd5c93f.png);display: inline-block;"
+                        data-tests-id="{{component.categories[0].subcategories[0].uniqueId}}"></div>
+
+                    <div class="dcae-dashboard-card-description">{{component.description}}</div>
+                    <div class="dcae-dashboard-card-info-name-container" style="text-align: left">
+                        <span class="dcae-dashboard-card-info-name" tooltips tooltip-content="{{component.name}}r"> {{component.name}}</span>
+                        <div class="dcae-dashboard-card-info-user">V {{component.version}}
+                        </div>
+                    </div>
+                </div>
+
+                <div class="dcae-dashboard-card-footer">
+                    <div class="dcae-dashboard-card-info">
+                        <div class="dcae-dashboard-card-info-user" style="font-size: 10px;">
+                            {{component.lifecycleState}}
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
diff --git a/app/main/dashboard/dcaedt/dcaedt.module.js b/app/main/dashboard/dcaedt/dcaedt.module.js
new file mode 100644
index 0000000..d5c6a64
--- /dev/null
+++ b/app/main/dashboard/dcaedt/dcaedt.module.js
@@ -0,0 +1,148 @@
+(function () {
+
+    'use strict';
+
+    angular
+        .module('dcaeApp.dashboard.dcae', [])
+        .config(config);
+
+    function config($stateProvider) {
+
+        $stateProvider.state('dcae.app.home', {
+            url: '/home',
+            views: {
+                'content@dcae.app': {
+                    templateUrl: 'main/dashboard/dcaedt/dcaedt.html',
+                    controller: 'DashboardDCAEController as vm'
+                }
+            },
+            bodyClass: 'about'
+        })
+
+            .state('dcae.app.general', {
+                url: '/general',
+                views: {
+                    'content@dcae.app': {
+                        templateUrl: 'main/dashboard/dcaedt/dcaedt_general.html',
+                        controller: 'DashboardDCAEController as vm'
+                    },
+                    'leftMenu': {
+                        templateUrl: 'main/dashboard/dcaedt/leftMenu.html',
+                        controller: 'DashboardDCAEController as vm'
+                    }
+                },
+                bodyClass: 'about'
+            })
+
+            .state('dcae.app.services', {
+                url: '/services',
+                views: {
+                    'content@dcae.app': {
+                        templateUrl: 'main/dashboard/dcaedt/dcaedt_services.html',
+                        controller: 'DashboardDCAEController as vm'
+                    }
+                },
+                bodyClass: 'about'
+            })
+            /*
+            .state('dcae.app.general_vnf', {
+                url: '/general_vnf',
+                views: {
+                    'content@dcae.app': {
+                        templateUrl: 'main/dashboard/dcaedt/dcaedt_general_vnf.html',
+                        controller: 'DashboardDCAEController as vm'
+                    }
+                },
+
+                /*onEnter: function () {
+                        //i hide header tabs, you can add your code here
+                        openNav();
+                    },
+                onExit: function () {
+                        //i hide header tabs, you can add your code here
+                        closeNav();
+                    }, //////////
+                bodyClass: 'about'
+            })
+            .state('dcae.app.general_service', {
+                url: '/general_service',
+                views: {
+                    'content@dcae.app': {
+                        templateUrl: 'main/dashboard/dcaedt/dcaedt_general_service.html',
+                        controller: 'DashboardDCAEController as vm'
+                    }
+                },
+
+                /*onEnter: function () {
+                        //i hide header tabs, you can add your code here
+                        openNav();
+                    },
+                onExit: function () {
+                        //i hide header tabs, you can add your code here
+                        closeNav();
+                    }, //////////
+                bodyClass: 'about'
+            })*/
+            .state('dcae.app.import', {
+                url: '/import',
+                views: {
+                    'content@dcae.app': {
+                        templateUrl: 'main/dashboard/dcaedt/dcaedt_import.html',
+                        controller: 'DashboardDCAEController as vm'
+                    }
+                },
+                bodyClass: 'about'
+            })
+            .state('dcae.app.self_serve', {
+                url: '/self_serve',
+                views: {
+                    'content@dcae.app': {
+                        templateUrl: 'main/dashboard/dcaedt/dcaedt_self_serve.html',
+                        controller: 'DashboardDCAEController as vm'
+                    }
+                },
+                bodyClass: 'about'
+            })
+            .state('dcae.app.artifact', {
+                url: '/artifact',
+                views: {
+                    'content@dcae.app': {
+                        templateUrl: 'main/dashboard/dcaedt/dcaedt_artifact.html',
+                        controller: 'DashboardDCAEController as vm'
+                    }
+                },
+                bodyClass: 'about'
+            })
+            .state('dcae.app.comp-fe', {
+                url: '/comp-fe',
+                views: {
+                    'content@dcae.app': {
+                        templateUrl: 'comp-fe/icecat.html',
+                        controller: ''
+                    }
+                },
+                bodyClass: 'about'
+            })
+            .state('dcae.app.composition', {
+                url: '/composition',
+                views: {
+                    'content@dcae.app': {
+                        templateUrl: 'main/dashboard/dcaedt/dcaedt_composition.html',
+                        controller: 'DashboardDCAEController as vm'
+                    }
+                },
+                bodyClass: 'about'
+            });
+
+    }
+
+    function openNav() {
+        document.getElementById("dcaeSidenav").style.width = "150px";
+        document.getElementById("content-container").style.marginLeft = "150px";
+    }
+
+    function closeNav() {
+        document.getElementById("dcaeSidenav").style.width = "0";
+    }
+
+})();
diff --git a/app/main/dashboard/dcaedt/dcaedt.values.js b/app/main/dashboard/dcaedt/dcaedt.values.js
new file mode 100644
index 0000000..9285ca8
--- /dev/null
+++ b/app/main/dashboard/dcaedt/dcaedt.values.js
@@ -0,0 +1,6 @@
+angular.module('dcaeApp.dashboard.dcae').value('appSettings', {
+    title: 'DCAE Application',
+    version: '1.0',
+
+    backend_url: window.host
+});
diff --git a/app/main/dashboard/dcaedt/dcaedt_artifact.html b/app/main/dashboard/dcaedt/dcaedt_artifact.html
new file mode 100644
index 0000000..b2f9751
--- /dev/null
+++ b/app/main/dashboard/dcaedt/dcaedt_artifact.html
@@ -0,0 +1,18 @@
+ <div class="dcae-main-container">
+	<div class="dcae-left-sidebar" >
+        <div class="dcae-menu-item" ng-class="{selected:page==='general'}" ui-sref="dcae.app.home">Home</div>
+        <div class="dcae-menu-item" ng-class="{selected:page==='general'}" ng-click="goGeneral(component, false)">General</div>
+	    <div class="dcae-menu-item" ng-class="{selected:page==='import'}" ng-click="goImport(component, false)">Import</div>
+        <div class="dcae-menu-item" ng-class="{selected:page==='composition'}" ng-click="goComposition()" data-tests-id="dcae-menu-item-Composition">Composition</div>
+        <div class="dcae-menu-item selected" ng-class="{selected:page==='artifact'}" ng-click="goArtifact()">Artifact</div>
+	</div>
+	
+	<div class="dcae-main-right-container">
+		<ul class="navigation-top-menu">
+		    <li><a ui-sref="dcae.app.home">Home</a></li>
+		    <li><a ui-sref="dcae.app.general">General</a></li>
+		    <li><a ui-sref="dcae.app.artifact">Artifact</a></li>
+		</ul>
+		<h1>This is Artifact</h1>
+	</div>
+</div>
diff --git a/app/main/dashboard/dcaedt/dcaedt_composition.html b/app/main/dashboard/dcaedt/dcaedt_composition.html
new file mode 100644
index 0000000..8801a79
--- /dev/null
+++ b/app/main/dashboard/dcaedt/dcaedt_composition.html
@@ -0,0 +1,158 @@
+<div class="dcae-main-container">
+    <div class="dcae-left-sidebar" left-menu></div>
+
+    <div class="dcae-main-right-container" style="overflow:hidden; margin-top:0px; padding:0">
+
+        <div id="composition-loader" class="tlv-loader large"></div>
+
+        <div style="display: flex; justify-content: space-between; padding-bottom: 20px;
+align-items: center; padding: 1rem;">
+            <!-- <div ng-if="!readOnlyComponent">
+                <button class="dcae-round-btn" ng-disabled="disableImport" ng-click="openImport()" style="position: absolute; left:7%">
+                    <div class="dcae-image-text-btn">
+                        <span class="dcae-import-icon"></span>
+                        <span style="line-height: 25px;">import</span>
+                    </div>
+                </button>
+            </div> -->
+            <div style="display: flex; justify-content: flex-end; padding: 9px 0;">
+                <button class="tlv-btn blue" ng-if="!component.uuid" ng-disabled="!createMode" ng-click="save()" style="margin-right: 10px;">
+                    save
+                </button>
+                <button class="tlv-btn outline blue" ng-click="goToBreadcrumbHome()">
+                    cancel
+                </button>
+            </div>
+        </div>
+
+        <div id="icecat" class="embed-responsive embed-responsive-16by9" style="background-color:white;box-shadow: 0 0 10px #AAA;">
+
+            <div ng-include="catalogImport+'/icecat.html?updated=' + updateTime" onload="loadComposition()" componentid={{component.uuid}}
+                serviceuuid={{service.uuid}} vnfiname={{vnfi.name}} user_id={{userId}} typeFlag={{typeFlag}} componentUser={{componentUser}}
+                id="iframe" class="embed-responsive-item" readOnlyComponent={{readOnlyComponent}}></div>
+
+        </div>
+    </div>
+</div>
+
+<!-- Modal -->
+<div class="modal fade" id="import" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
+    <div class="modal-dialog" role="document">
+        <div class="modal-content">
+            <div class="modal-header" style="border-bottom: 3px solid #009fdb; margin: 0 10px;">
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+                <h4 class="modal-title" id="myModalLabel">Import Composition</h4>
+            </div>
+            <div class="modal-body" style="height:600px; overflow:scroll;">
+
+                <div style="display: flex; justify-content: space-between; margin:10px 0;">
+                    <span style="padding-left: 10px; display: flex; align-items: center;">{{ VNFs.length }} VFCMTS </span>
+                    <div style="position: relative;">
+                        <input type='text' ng-model='searchVfc' placeholder="Search" style="border-radius: 2px;width: 300px; height: 32px;line-height: 32px;border: 1px solid #d2d2d2;outline: none;text-indent: 10px; background: white;"
+                        />
+                        <span class="glyphicon glyphicon-search form-control-feedback" aria-hidden="true"></span>
+                    </div>
+                </div>
+
+                <div class="tlv-loader large" ng-if="!VNFs"></div>
+
+                <table class="table table-bordered">
+                    <thead style="background: #eaeaea;">
+                        <tr>
+                            <th>name</th>
+                            <th>version</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr data-ng-init="componentx.filterTerm = componentx.name +  ' '  + componentx.description + ' ' + componentx.tags.toString() + ' ' + componentx.version"
+                            ng-repeat="componentx in importVNFs | filter:searchVfc" ng-click="selectVfcmtRow(componentx,component, $index)"
+                            ng-class="{info: $index == selectedRow}">
+                            <td>
+                                {{componentx.name}}
+                            </td>
+                            <td>
+                                {{componentx.version}}
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+            <div class="modal-footer" style="background: #eaeaea;">
+                <button type="button" class="tlv-btn blue" ng-click="importVfcmt()" data-dismiss="modal">
+                    import
+                </button>
+                <button type="button" class="tlv-btn outline blue" data-dismiss="modal">
+                    cancel
+                </button>
+            </div>
+        </div>
+    </div>
+</div>
+
+
+<!-- Modal Rule-Editor -->
+<div class="modal fade rule-editor-modal" id="rule-editor-modal" tabindex="-1" role="dialog">
+    <div class="modal-dialog" role="document" style="width: 90vw;">
+        <div class="modal-content">
+            <div class="modal-header">
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+            </div>
+            <div class="tlv-loader large" id="modal-loader"></div>
+            <div width="100%" style="height: 90vh; width: 100%;">
+                <iframe frameborder="0" width="100%" height="100%"></iframe>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- confirm modal -->
+<div class="modal fade" id="confirm-modal" tabindex="-1" role="dialog">
+    <div class="modal-dialog" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+                <h4 class="modal-title">Save composition</h4>
+            </div>
+            <div class="modal-body">
+                Do you want to save composition?
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-primary" data-dismiss="modal" id="btn-confirm-save" ng-click="saveOnSdcExit('ok')">Ok</button>
+                <button type="button" class="btn btn-default" data-dismiss="modal" ng-click="saveOnSdcExit('cancel')">Cancel</button>
+            </div>
+        </div>
+        <!-- /.modal-content -->
+    </div>
+    <!-- /.modal-dialog -->
+</div>
+<!-- /.modal -->
+
+<!-- alert modal -->
+<div class="modal fade" id="alert-modal" tabindex="-1" role="dialog">
+    <div class="modal-dialog" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+                <h4 class="modal-title">Error</h4>
+                <hr class="modal-header-error" />
+            </div>
+            <div class="modal-body">
+                <!-- message is inserted via JS -->
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-primary" data-dismiss="modal" id="btn-confirm-save">Ok</button>
+            </div>
+        </div>
+        <!-- /.modal-content -->
+    </div>
+    <!-- /.modal-dialog -->
+</div>
+<!-- /.modal -->
diff --git a/app/main/dashboard/dcaedt/dcaedt_general.html b/app/main/dashboard/dcaedt/dcaedt_general.html
new file mode 100644
index 0000000..3cd3b7f
--- /dev/null
+++ b/app/main/dashboard/dcaedt/dcaedt_general.html
@@ -0,0 +1,202 @@
+<meta http-equiv="cache-control" content="no-cache" />
+<div class="dcae-main-container">
+    <div class="dcae-left-sidebar" left-menu></div>
+    
+    <div class="dcae-main-right-container">
+
+        <div class="sdc-workspace-top-bar-buttons" style="display: flex; justify-content: flex-end; border-bottom: 1px solid #cdcdcd; padding: 9px 0;">
+            <button class="tlv-btn blue" ng-if="!component.uuid" ng-disabled="$parent.editForm.$valid == false" ng-click="save()" style="margin-right: 10px;"
+                data-tests-id="Save-General">
+                save
+            </button>
+            <button class="tlv-btn outline blue" ng-click="goToBreadcrumbHome()" data-tests-id="Cancel-General">
+                cancel
+            </button>
+        </div>
+
+        <!-- <div class="dcae-workspace-top-bar">
+            <div ng-hide="createMode" class="version-container ">
+                <span class="lifecycle-state-text ng-binding ng-scope" data-tests-id="formlifecyclestate">V{{component.version}}</span>
+            </div>
+
+            <div ng-hide="createMode" class="lifecycle-state">
+                <div data-ng-hide="showLifecycleIcon()" class="lifecycle-state-icon" data-ng-class="{'in-design-status-icon': createMode, '': !createMode}"></div>
+                <span class="lifecycle-state-text ng-binding ng-scope" data-tests-id="formlifecyclestate">{{component.lifecycleState}}</span>
+            </div>
+
+
+            <div ng-if="!createMode" class="progress-container">
+                <div class="general-view-top-progress top-progress ng-isolate-scope" progress-value="progressService.getProgressValue(component.uniqueId)"
+                    progress-message="progressMessage"></div>
+            </div>
+
+            <div class="sdc-workspace-top-bar-buttons">
+
+                <span data-ng-if="isDesigner()" data-ng-class="{'disabled' :isDisableMode() || isViewMode()}" ng-click="revert()" class="dcae-sprite-new revert-btn ng-scope disabled"
+                    data-tests-id="revert" data-ng-show="showFullIcons()" sdc-smart-tooltip="" style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis;">Revert</span>
+                <span class="delimiter"></span> <span class="dcae-sprite-new x-btn" data-ng-click="goToBreadcrumbHome()"
+                    sdc-smart-tooltip="" style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis;">Close</span>
+
+            </div>
+
+
+        </div>  -->
+        <div class="tlv-loader large" ng-if="loader"></div>
+
+        <div class="dcae-asset-creation-info" ng-if="component.uuid">
+            <div>
+                <b>UUID:</b>&nbsp;{{component.uuid}}
+                <b style="padding-left: 15px;">&nbsp;Invariant UUID:</b>&nbsp; {{component.invariantUUID}}
+            </div>
+            <div>
+                <b>last updater:</b>
+                {{component.lastUpdaterUserId}}
+                <b style="padding-left: 15px;">lifecycle state:</b>
+                {{component.lifecycleState}}
+            </div>
+        </div>
+
+        <div include-padding="true" class="sdc-workspace-general-step ng-scope">
+
+            <form novalidate="" class="w-sdc-form ng-pristine ng-valid-name-exist ng-invalid ng-invalid-required ng-valid-pattern ng-valid-minlength ng-valid-maxlength"
+                name="editForm">
+
+                <div class="w-sdc-form-section-container">
+
+                    <div class="i-sdc-form-item">
+                        <div class="general-view-top-progress top-progress ng-isolate-scope" progress-value="progressValue" progress-message="progressMessage">
+
+                            <!--======================= Top progress var =======================-->
+                            <!-- ngIf: progressValue>0 && progressValue<100 -->
+
+                            <!-- ngIf: progressValue===100 -->
+
+                            <!-- ngIf: progressValue===-1 -->
+                            <!--======================= Top progress var =======================-->
+
+                        </div>
+                    </div>
+
+
+                    <div class="w-sdc-form-columns-wrapper">
+
+                        <div class="w-sdc-form-column">
+
+                            <!--------------------- NAME -------------------->
+                            <div class="i-sdc-form-item" data-ng-class="{'error': validateField(editForm.componentName)}">
+                                <label class="i-sdc-form-label required">Name</label>
+                                <input type="text" class="i-sdc-form-input dcae-input-text" ng-readonly="component.uuid" data-ng-class="{'view-mode': isViewMode()}"
+                                    name="componentName" data-ng-init="isCreateMode() &amp;&amp; validateName(true)" data-ng-model="component.name"
+                                    data-ng-disabled="component.isAlreadyCertified()" data-tests-id="name" autofocus="" placeholder="Name"
+                                    ng-readonly="isViewMode()" data-ng-maxlength="50" maxlength="50" data-ng-minlength="0" minlength="0"
+                                    data-required="" data-ng-model-options="{ debounce: 500 }" data-ng-pattern="/^[\s\w\&amp;_.:-]{1,1024}$/">
+                                <!--<input
+                                class="i-sdc-form-input ng-pristine ng-valid-name-exist ng-empty ng-invalid ng-invalid-required ng-valid-pattern ng-valid-minlength ng-valid-maxlength ng-touched"
+                                data-ng-class="{'view-mode': isViewMode()}"
+                                name="componentName"
+                                data-ng-init="isCreateMode() &amp;&amp; validateName(true)"
+                                data-ng-maxlength="50" maxlength="50" data-ng-minlength="0"
+                                minlength="0" data-ng-model="component.name" type="text"
+                                data-required="" data-ng-model-options="{ debounce: 500 }"
+                                data-ng-pattern="/^[\s\w\&amp;_.:-]{1,1024}$/"
+                                data-ng-disabled="component.isAlreadyCertified()"
+                                data-tests-id="name" autofocus="" ng-readonly="isViewMode()">-->
+
+                                <div class="input-error ng-hide" data-ng-show="validateField(editForm.componentName)">
+                                    <span ng-show="editForm.componentName.$error.required" translate="NEW_SERVICE_RESOURCE_ERROR_RESOURCE_NAME_REQUIRED" class="ng-scope">
+                                        Name is required.
+                                    </span>
+                                    <span ng-show="editForm.componentName.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '50' }"
+                                        class="ng-scope ng-hide">
+                                        Max length 50 characters.
+                                    </span>
+                                    <span ng-show="editForm.componentName.$error.minlength" translate="VALIDATION_ERROR_MIN_LENGTH" translate-values="{'min': '4' }"
+                                        class="ng-scope ng-hide">Min length 4 characters.</span>
+                                    <span ng-show="editForm.componentName.$error.nameExist" translate="NEW_SERVICE_RESOURCE_ERROR_NAME_EXISTS" class="ng-scope ng-hide">Name already exists.</span>
+                                    <span ng-show="editForm.componentName.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED" class="ng-scope ng-hide">Special characters not allowed.
+                                    </span>
+                                </div>
+                            </div>
+                            <!--------------------- NAME -------------------->
+
+                            <!--------------------- FULL NAME -------------------->
+                            <!-- ngIf: component.isProduct() -->
+                            <!--------------------- NAME -------------------->
+
+                            <!--------------------- DESCRIPTION -------------------->
+                            <div class="i-sdc-form-item" data-ng-class="{'error': validateField(editForm.description)}">
+                                <label class="i-sdc-form-label required">Description</label>
+                                <textarea class="description dcae-input-text" ng-readonly="component.uuid" name="description" data-ng-class="{'view-mode': isViewMode()}"
+                                    data-ng-maxlength="1024" placeholder="Description" data-required="" data-ng-model="component.description"
+                                    data-ng-model-options="{ debounce: 500 }" data-ng-pattern="/^[\u0000-\u00BF]*$/" maxlength="1024"
+                                    data-tests-id="description"></textarea>
+                                <!-- placeholder="Description here..." -->
+
+                                <div class="input-error" ng-if="editForm.description.$dirty">
+                                    <span ng-if="editForm.description.$error.required" translate="NEW_SERVICE_RESOURCE_ERROR_RESOURCE_DESCRIPTION_REQUIRED" class="ng-scope">Description is required.</span>
+                                    <span ng-if="editForm.description.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '1024' }"
+                                        class="ng-scope ng-hide">Max length 1024 characters.</span>
+                                    <span ng-if="editForm.description.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED">Special characters not allowed.
+                                    </span>
+                                </div>
+                            </div>
+                            <!--------------------- DESCRIPTION -------------------->
+
+                            <!--------------------- CATEGORIES -------------------->
+                            <!-- ngIf: !component.isProduct() -->
+                            <!-- end ngIf: !component.isProduct() -->
+                            <!--------------------- CATEGORIES -------------------->
+                            <br>
+                            <!-- <button ng-if="!component.uuid" ng-disabled="!createMode" ng-click="save()" class="tlv-btn outline green ng-scope">Create
+                            </button> -->
+
+                            <!--{{PostDataResponse}}-->
+
+                            {{resultInformation}}
+
+                        </div>
+                        <!-- Close w-sdc-form-column -->
+
+                    </div>
+
+                </div>
+                <!-- Close w-sdc-form-section-container -->
+
+            </form>
+
+        </div>
+
+        <!-- <div ng-hide="typeFlag" class="dcae-main-container-body-content ng-scope" data-ng-class="{'third-party':thirdParty}" data-ui-view="">
+            <div class="row">
+                <div class="col-sm-4">
+                    <select class="form-control" ng-model="service.uuid" ng-change="VNFIs(service.uuid)" data-ng-options="service.uuid as service.name for service in services">
+                        <option value="">Select Service</option>
+                    </select>
+                </div>
+            </div>
+            <br>
+            <div class="row">
+                <div class="col-sm-4">
+                    <select class="form-control" ng-model="vnfi.name" ng-change="" data-ng-options="vnfi.name as vnfi.name for vnfi in vnfis">
+                        <option value="">Select VNFI</option>
+                    </select>
+                </div>
+            </div>
+            <br>
+
+            <div class="row">
+                <div class="col-sm-2">
+                    <div class="btn">
+                        <button class="btn btn-default" type="button" ng-click="saveServiceSelection(component,service,vnfi)">Save Service Selection
+                        </button>
+                    </div>
+                </div>
+            </div>
+
+            {{resultInformation2}}
+
+        </div> -->
+
+
+    </div>
+</div>
diff --git a/app/main/dashboard/dcaedt/dcaedt_general_service.html b/app/main/dashboard/dcaedt/dcaedt_general_service.html
new file mode 100644
index 0000000..ffefaae
--- /dev/null
+++ b/app/main/dashboard/dcaedt/dcaedt_general_service.html
@@ -0,0 +1,274 @@
+<div class="dcae-main-container">
+    <div class="dcae-left-sidebar">
+        <div class="dcae-menu-item" ng-class="{selected:page==='general'}" ui-sref="dcae.app.home">Home</div>
+        <div class="dcae-menu-item selected" ng-class="{selected:page==='general'}"
+             ng-click="goGeneral(component, component==null)">General
+        </div>
+        <div class="dcae-menu-item" ng-class="{selected:page==='import'}"
+             ng-click="goImport(component,component==null)">Import
+        </div>
+        <div class="dcae-menu-item" ng-class="{selected:page==='composition'}" ng-click="goComposition(component, selfAssurance)" data-tests-id="dcae-menu-item-Composition">
+            Composition
+        </div>
+        <!--<div class="dcae-menu-item" ng-class="{selected:page==='artifact'}" ng-click="goArtifact()">Artifact</div>-->
+    </div>
+    <!-- BOOTSTRAP COMPONENTS -->
+    <!-- Latest compiled and minified CSS -->
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
+    <!-- Latest compiled and minified JavaScript -->
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
+
+    <div class="dcae-main-right-container">
+
+        <div class="dcae-workspace-top-bar">
+            <div ng-show="!createMode" class="version-container">
+                <!-- ngIf: !isCreateMode() && !component.isLatestVersion() -->
+                <!-- ngIf: !isCreateMode() -->
+				<span class="lifecycle-state-text ng-binding"
+                      data-tests-id="formlifecyclestate">V{{component.version}}</span>
+                <!-- end ngIf: !isCreateMode() -->
+            </div>
+
+            <div ng-show="!createMode" class="lifecycle-state">
+                <div data-ng-show="showLifecycleIcon()" class="lifecycle-state-icon"
+                     data-ng-class="{'in-design-status-icon': createMode, '': !createMode}"></div>
+				<span class="lifecycle-state-text ng-binding"
+                      data-tests-id="formlifecyclestate">{{component.lifecycleState}}</span>
+            </div>
+
+
+            <div ng-if="!createMode" class="progress-container">
+                <div class="general-view-top-progress top-progress ng-isolate-scope"
+                     progress-value="progressService.getProgressValue(component.uniqueId)"
+                     progress-message="progressMessage"></div>
+            </div>
+
+            <div class="sdc-workspace-top-bar-buttons">
+
+                <!-- ngIf: !isCreateMode() && !component.isLatestVersion() && !showChangeStateButton() -->
+
+                <!-- ngIf: isDesigner() && !isCreateMode() -->
+                <!-- isDesigner() &amp;&amp; !isCreateMode() -->
+                <!--<button class="btn btn-default" ng-show="!createMode" ng-click="save()"
+                        class="tlv-btn blue ng-scope" data-tests-id="create/save"
+                        sdc-smart-tooltip=""
+                        style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis;">Update
+                </button>-->
+                <!-- end ngIf: isDesigner() && !isCreateMode() -->
+
+                <!-- ngRepeat: (key,button) in changeLifecycleStateButtons -->
+
+                <!-- ngIf: !isViewMode() && isCreateMode() -->
+
+                <!-- ngIf: (isDesigner() || isProductManager()) && !isCreateMode() && component.lifecycleState === 'NOT_CERTIFIED_CHECKOUT' -->
+
+                <!-- ngIf: isDesigner() -->
+				<span data-ng-if="isDesigner()"
+                      data-ng-class="{'disabled' :isDisableMode() || isViewMode()}"
+                      ng-click="revert()"
+                      class="dcae-sprite-new revert-btn ng-scope disabled"
+                      data-tests-id="revert" data-ng-show="showFullIcons()"
+                      sdc-smart-tooltip=""
+                      style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis;">Revert</span>
+                <!-- end ngIf: isDesigner() -->
+
+                <!-- ngIf: isComposition && !component.isProduct() -->
+                <span class="delimiter"></span> <span class="dcae-sprite-new x-btn"
+                                                      data-ng-click="goToBreadcrumbHome()" sdc-smart-tooltip=""
+                                                      style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis;">Close</span>
+
+            </div>
+
+
+        </div>
+
+
+        <div data-ng-show="!createMode"
+             class="dcae-asset-creation-info ng-binding ng-scope">
+            <b>UUID:</b>&nbsp;{{component.uuid}}<b>&nbsp;Invariant UUID:</b>&nbsp;{{component.invariantUUID}}
+        </div>
+
+        <br>
+        {{s}}
+        <br>
+        <br>
+        
+        <div include-padding="true"
+             class="sdc-workspace-general-step ng-scope">
+
+            <form novalidate=""
+                  class="w-sdc-form ng-pristine ng-valid-name-exist ng-invalid ng-invalid-required ng-valid-pattern ng-valid-minlength ng-valid-maxlength"
+                  name="editForm">
+
+                <div class="w-sdc-form-section-container">
+
+                    <div class="i-sdc-form-item">
+                        <div
+                            class="general-view-top-progress top-progress ng-isolate-scope"
+                            progress-value="progressValue"
+                            progress-message="progressMessage">
+
+                            <!--======================= Top progress var =======================-->
+                            <!-- ngIf: progressValue>0 && progressValue<100 -->
+
+                            <!-- ngIf: progressValue===100 -->
+
+                            <!-- ngIf: progressValue===-1 -->
+                            <!--======================= Top progress var =======================-->
+
+                        </div>
+                    </div>
+
+
+                    <div class="w-sdc-form-columns-wrapper">
+
+                        <div class="w-sdc-form-column">
+
+                            <!--------------------- NAME -------------------->
+                            <div class="i-sdc-form-item"
+                                 data-ng-class="{'error': validateField(editForm.componentName)}">
+                                <label class="i-sdc-form-label required">Name</label> <input
+                                class="i-sdc-form-input ng-pristine ng-valid-name-exist ng-empty ng-invalid ng-invalid-required ng-valid-pattern ng-valid-minlength ng-valid-maxlength ng-touched"
+                                data-ng-class="{'view-mode': isViewMode()}"
+                                name="componentName"
+                                data-ng-init="isCreateMode() &amp;&amp; validateName(true)"
+                                data-ng-maxlength="50" maxlength="50" data-ng-minlength="0"
+                                minlength="0" data-ng-model="component.name" type="text"
+                                data-required="" data-ng-model-options="{ debounce: 500 }"
+                                data-ng-pattern="/^[\s\w\&amp;_.:-]{1,1024}$/"
+                                data-ng-disabled="component.isAlreadyCertified()"
+                                data-tests-id="name" autofocus="" ng-readonly="isViewMode()">
+
+                                <div class="input-error ng-hide"
+                                     data-ng-show="validateField(editForm.componentName)">
+										<span ng-show="editForm.componentName.$error.required"
+                                              translate="NEW_SERVICE_RESOURCE_ERROR_RESOURCE_NAME_REQUIRED"
+                                              class="ng-scope">Name is required.</span> <span
+                                    ng-show="editForm.componentName.$error.maxlength"
+                                    translate="VALIDATION_ERROR_MAX_LENGTH"
+                                    translate-values="{'max': '50' }" class="ng-scope ng-hide">Max
+											length 50 characters.</span> <span
+                                    ng-show="editForm.componentName.$error.minlength"
+                                    translate="VALIDATION_ERROR_MIN_LENGTH"
+                                    translate-values="{'min': '4' }" class="ng-scope ng-hide">Min
+											length 4 characters.</span> <span
+                                    ng-show="editForm.componentName.$error.nameExist"
+                                    translate="NEW_SERVICE_RESOURCE_ERROR_NAME_EXISTS"
+                                    class="ng-scope ng-hide">Name already exists.</span> <span
+                                    ng-show="editForm.componentName.$error.pattern"
+                                    translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"
+                                    class="ng-scope ng-hide">Special characters not
+											allowed.</span>
+                                </div>
+                            </div>
+                            <!--------------------- NAME -------------------->
+
+                            <!--------------------- FULL NAME -------------------->
+                            <!-- ngIf: component.isProduct() -->
+                            <!--------------------- NAME -------------------->
+
+                            <!--------------------- DESCRIPTION -------------------->
+                            <div class="i-sdc-form-item"
+                                 data-ng-class="{'error': validateField(editForm.description)}">
+                                <label class="i-sdc-form-label required">Description</label>
+									<textarea
+                                        class="description ng-pristine ng-untouched ng-empty ng-invalid ng-invalid-required ng-valid-pattern ng-valid-maxlength"
+                                        name="description" data-ng-class="{'view-mode': isViewMode()}"
+                                        data-ng-maxlength="1024" data-required=""
+                                        data-ng-model="component.description"
+                                        data-ng-model-options="{ debounce: 500 }"
+                                        data-ng-pattern="/^[\u0000-\u00BF]*$/" maxlength="1024"
+                                        data-tests-id="description"></textarea>
+                                <!-- placeholder="Description here..." -->
+
+                                <div class="input-error ng-hide" data-ng-show="true">
+										<span ng-show="editForm.description.$error.required"
+                                              translate="NEW_SERVICE_RESOURCE_ERROR_RESOURCE_DESCRIPTION_REQUIRED"
+                                              class="ng-scope">Description is required.</span> <span
+                                    ng-show="editForm.description.$error.maxlength"
+                                    translate="VALIDATION_ERROR_MAX_LENGTH"
+                                    translate-values="{'max': '1024' }" class="ng-scope ng-hide">Max
+											length 1024 characters.</span> <span
+                                    ng-show="editForm.description.$error.pattern"
+                                    translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"
+                                    class="ng-scope ng-hide">Special characters not
+											allowed.</span>
+                                </div>
+                            </div>
+                            <!--------------------- DESCRIPTION -------------------->
+
+                            <!--------------------- CATEGORIES -------------------->
+                            <!-- ngIf: !component.isProduct() -->
+                            <!-- end ngIf: !component.isProduct() -->
+                            <!--------------------- CATEGORIES -------------------->
+                            <br>
+                            <button ng-show="createMode" ng-click="save()"
+                                    class="tlv-btn outline green ng-scope">Create
+                            </button>
+
+                            <!--{{PostDataResponse}}-->
+                            
+                            {{resultInformation}}
+
+                        </div>
+                        <!-- Close w-sdc-form-column -->
+
+                    </div>
+
+                </div>
+                <!-- Close w-sdc-form-section-container -->
+
+            </form>
+
+        </div>
+        <br><br>
+        
+        <br><br>
+
+        <div ng-hide="hideDropDowns" class="dcae-main-container-body-content ng-scope"
+             data-ng-class="{'third-party':thirdParty}" data-ui-view="">
+            <div class="row">
+                <div class="col-sm-4">
+                    <select class="form-control" ng-model="service.uuid" ng-change="VNFIs(service.uuid)"
+                            data-ng-options="service.uuid as service.name for service in services">
+                        <option value="">Select Service</option>
+                    </select>
+                </div>
+            </div>
+            <br>
+            <div class="row">
+                <div class="col-sm-4">
+                    <select class="form-control" ng-model="vnfi.name" ng-change=""
+                            data-ng-options="vnfi.name as vnfi.name for vnfi in vnfis">
+                        <option value="">Select VNFI</option>
+                    </select>
+                </div>
+            </div>
+            <br>
+
+            <div class="row">
+                <div class="col-sm-2">
+                    <div class="btn">
+                        <button class="btn btn-default" type="button"
+                                ng-click="saveServiceSelection(component,service,vnfi)">Save Service Selection
+                        </button>
+                    </div>
+                </div>
+            </div>
+            <!--
+                <div class="row">
+                <div class="col-sm-2">
+                    <div class="btn">
+                        <button class="btn btn-default" type="button" ng-click="">Upload Blue Print</button>
+                    </div>
+                </div>
+            </div>
+            -->
+            {{resultInformation2}}
+
+        </div>
+
+
+    </div>
+</div>
diff --git a/app/main/dashboard/dcaedt/dcaedt_general_vnf.html b/app/main/dashboard/dcaedt/dcaedt_general_vnf.html
new file mode 100644
index 0000000..00e3d63
--- /dev/null
+++ b/app/main/dashboard/dcaedt/dcaedt_general_vnf.html
@@ -0,0 +1,228 @@
+<div class="dcae-main-container">
+    <div class="dcae-left-sidebar">
+        <div class="dcae-menu-item" ng-class="{selected:page==='general'}" ui-sref="dcae.app.home">Home</div>
+        <div class="dcae-menu-item selected" ng-class="{selected:page==='general'}"
+             ng-click="goGeneral(component, component==null)">General
+        </div>
+        <div class="dcae-menu-item" ng-class="{selected:page==='import'}"
+             ng-click="goImport(component,component==null)">Import
+        </div>
+        <div class="dcae-menu-item" ng-class="{selected:page==='composition'}" ng-click="goComposition(component, selfAssurance)" data-tests-id="dcae-menu-item-Composition">
+            Composition
+        </div>
+        <!--<div class="dcae-menu-item" ng-class="{selected:page==='artifact'}" ng-click="goArtifact()">Artifact</div>-->
+    </div>
+    <!-- BOOTSTRAP COMPONENTS -->
+    <!-- Latest compiled and minified CSS -->
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
+    <!-- Latest compiled and minified JavaScript -->
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
+
+    <div class="dcae-main-right-container">
+
+        <div class="dcae-workspace-top-bar">
+            <div ng-show="!createMode" class="version-container">
+                <!-- ngIf: !isCreateMode() && !component.isLatestVersion() -->
+                <!-- ngIf: !isCreateMode() -->
+				<span class="lifecycle-state-text ng-binding"
+                      data-tests-id="formlifecyclestate">V{{component.version}}</span>
+                <!-- end ngIf: !isCreateMode() -->
+            </div>
+
+            <div ng-show="!createMode" class="lifecycle-state">
+                <div data-ng-show="showLifecycleIcon()" class="lifecycle-state-icon"
+                     data-ng-class="{'in-design-status-icon': createMode, '': !createMode}"></div>
+				<span class="lifecycle-state-text ng-binding"
+                      data-tests-id="formlifecyclestate">{{component.lifecycleState}}</span>
+            </div>
+
+
+            <div ng-show="!createMode" class="progress-container">
+                <div class="general-view-top-progress top-progress ng-isolate-scope"
+                     progress-value="progressService.getProgressValue(component.uniqueId)"
+                     progress-message="progressMessage"></div>
+            </div>
+
+            <div class="sdc-workspace-top-bar-buttons">
+
+                <!-- ngIf: !isCreateMode() && !component.isLatestVersion() && !showChangeStateButton() -->
+
+                <!-- ngIf: isDesigner() && !isCreateMode() -->
+                <!-- isDesigner() &amp;&amp; !isCreateMode() -->
+                <!--<button class="btn btn-default" ng-show="!createMode" ng-click="save()"
+                        class="tlv-btn blue ng-scope" data-tests-id="create/save"
+                        sdc-smart-tooltip=""
+                        style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis;">Update
+                </button>-->
+                <!-- end ngIf: isDesigner() && !isCreateMode() -->
+
+                <!-- ngRepeat: (key,button) in changeLifecycleStateButtons -->
+
+                <!-- ngIf: !isViewMode() && isCreateMode() -->
+
+                <!-- ngIf: (isDesigner() || isProductManager()) && !isCreateMode() && component.lifecycleState === 'NOT_CERTIFIED_CHECKOUT' -->
+
+                <!-- ngIf: isDesigner() -->
+				<span data-ng-if="isDesigner()"
+                      data-ng-class="{'disabled' :isDisableMode() || isViewMode()}"
+                      ng-click="revert()"
+                      class="dcae-sprite-new revert-btn ng-scope disabled"
+                      data-tests-id="revert" data-ng-show="showFullIcons()"
+                      sdc-smart-tooltip=""
+                      style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis;">Revert</span>
+                <!-- end ngIf: isDesigner() -->
+
+                <!-- ngIf: isComposition && !component.isProduct() -->
+                <span class="delimiter"></span> <span class="dcae-sprite-new x-btn"
+                                                      data-ng-click="goToBreadcrumbHome()" sdc-smart-tooltip=""
+                                                      style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis;">Close</span>
+
+            </div>
+
+
+        </div>
+
+
+        <div data-ng-show="!createMode"
+             class="dcae-asset-creation-info ng-binding ng-scope">
+            <b>UUID:</b>&nbsp;{{component.uuid}}<b>&nbsp;Invariant UUID:</b>&nbsp;{{component.invariantUUID}}
+        </div>
+
+        <br>
+        {{s}}
+        <br>
+        <br>
+        <div class="dcae-main-container-body-content ng-scope"
+             data-ng-class="{'third-party':thirdParty}" data-ui-view="">
+
+            <div include-padding="true"
+                 class="sdc-workspace-general-step ng-scope">
+
+                <form novalidate=""
+                      class="w-sdc-form ng-pristine ng-valid-name-exist ng-invalid ng-invalid-required ng-valid-pattern ng-valid-minlength ng-valid-maxlength"
+                      name="editForm">
+
+                    <div class="w-sdc-form-section-container">
+
+                        <div class="i-sdc-form-item">
+                            <div
+                                class="general-view-top-progress top-progress ng-isolate-scope"
+                                progress-value="progressValue"
+                                progress-message="progressMessage">
+
+                                <!--======================= Top progress var =======================-->
+                                <!-- ngIf: progressValue>0 && progressValue<100 -->
+
+                                <!-- ngIf: progressValue===100 -->
+
+                                <!-- ngIf: progressValue===-1 -->
+                                <!--======================= Top progress var =======================-->
+
+
+                            </div>
+                        </div>
+
+
+                        <div class="w-sdc-form-columns-wrapper">
+
+                            <div class="w-sdc-form-column">
+
+
+                                <!--------------------- NAME -------------------->
+                                <div class="i-sdc-form-item"
+                                     data-ng-class="{'error': validateField(editForm.componentName)}">
+                                    <label class="i-sdc-form-label required">Name</label> <input
+                                    class="i-sdc-form-input ng-pristine ng-valid-name-exist ng-empty ng-invalid ng-invalid-required ng-valid-pattern ng-valid-minlength ng-valid-maxlength ng-touched"
+                                    data-ng-class="{'view-mode': isViewMode()}"
+                                    name="name"
+                                    data-ng-init="isCreateMode() &amp;&amp; validateName(true)"
+                                    data-ng-maxlength="50" maxlength="50" data-ng-minlength="0"
+                                    minlength="0" data-ng-model="component.name" type="text"
+                                    data-required="" data-ng-model-options="{ debounce: 500 }"
+                                    data-ng-pattern="/^[\s\w\&amp;_.:-]{1,1024}$/"
+                                    data-ng-disabled="component.isAlreadyCertified()"
+                                    data-tests-id="name" autofocus="" ng-readonly="isViewMode()">
+
+                                    <div class="input-error ng-hide"
+                                         data-ng-show="validateField(editForm.componentName)">
+										<span ng-show="editForm.componentName.$error.required"
+                                              translate="NEW_SERVICE_RESOURCE_ERROR_RESOURCE_NAME_REQUIRED"
+                                              class="ng-scope">Name is required.</span> <span
+                                        ng-show="editForm.componentName.$error.maxlength"
+                                        translate="VALIDATION_ERROR_MAX_LENGTH"
+                                        translate-values="{'max': '50' }" class="ng-scope ng-hide">Max
+											length 50 characters.</span> <span
+                                        ng-show="editForm.componentName.$error.minlength"
+                                        translate="VALIDATION_ERROR_MIN_LENGTH"
+                                        translate-values="{'min': '4' }" class="ng-scope ng-hide">Min
+											length 4 characters.</span> <span
+                                        ng-show="editForm.componentName.$error.nameExist"
+                                        translate="NEW_SERVICE_RESOURCE_ERROR_NAME_EXISTS"
+                                        class="ng-scope ng-hide">Name already exists.</span> <span
+                                        ng-show="editForm.componentName.$error.pattern"
+                                        translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"
+                                        class="ng-scope ng-hide">Special characters not
+											allowed.</span>
+                                    </div>
+                                </div>
+                                <!--------------------- NAME -------------------->
+
+                                <!--------------------- FULL NAME -------------------->
+                                <!-- ngIf: component.isProduct() -->
+                                <!--------------------- NAME -------------------->
+
+                                <!--------------------- DESCRIPTION -------------------->
+                                <div class="i-sdc-form-item"
+                                     data-ng-class="{'error': validateField(editForm.description)}">
+                                    <label class="i-sdc-form-label required">Description</label>
+									<textarea
+                                        class="description ng-pristine ng-untouched ng-empty ng-invalid ng-invalid-required ng-valid-pattern ng-valid-maxlength"
+                                        name="description" data-ng-class="{'view-mode': isViewMode()}"
+                                        data-ng-maxlength="1024" data-required=""
+                                        data-ng-model="component.description"
+                                        data-ng-model-options="{ debounce: 500 }"
+                                        data-ng-pattern="/^[\u0000-\u00BF]*$/" maxlength="1024"
+                                        data-tests-id="description"></textarea>
+                                    <!-- placeholder="Description here..." -->
+
+                                    <div class="input-error ng-hide" data-ng-show="true">
+										<span ng-show="editForm.description.$error.required"
+                                              translate="NEW_SERVICE_RESOURCE_ERROR_RESOURCE_DESCRIPTION_REQUIRED"
+                                              class="ng-scope">Description is required.</span> <span
+                                        ng-show="editForm.description.$error.maxlength"
+                                        translate="VALIDATION_ERROR_MAX_LENGTH"
+                                        translate-values="{'max': '1024' }" class="ng-scope ng-hide">Max
+											length 1024 characters.</span> <span
+                                        ng-show="editForm.description.$error.pattern"
+                                        translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"
+                                        class="ng-scope ng-hide">Special characters not
+											allowed.</span>
+                                    </div>
+                                </div>
+                                <!--------------------- DESCRIPTION -------------------->
+
+                                <!--------------------- CATEGORIES -------------------->
+                                <!-- ngIf: !component.isProduct() -->
+                                <!-- end ngIf: !component.isProduct() -->
+                                <!--------------------- CATEGORIES -------------------->
+                                <button ng-show="createMode" ng-click="save()"
+                                        class="tlv-btn outline green ng-scope">Create
+                                </button>
+
+                                
+
+                            </div>
+                            <!-- Close w-sdc-form-column -->
+
+                        </div>
+
+                    </div>
+                    <!-- Close w-sdc-form-section-container -->
+
+                </form>
+
+            </div>
+        </div>
+    </div>
+</div>
diff --git a/app/main/dashboard/dcaedt/dcaedt_import.html b/app/main/dashboard/dcaedt/dcaedt_import.html
new file mode 100644
index 0000000..05e8bb5
--- /dev/null
+++ b/app/main/dashboard/dcaedt/dcaedt_import.html
@@ -0,0 +1,61 @@
+<div class="dcae-main-container">
+    <div class="dcae-left-sidebar">
+        <div class="dcae-menu-item" ng-class="{selected:page==='general'}" ui-sref="dcae.app.home">Home</div>
+        <div class="dcae-menu-item" ng-class="{selected:page==='general'}" ng-click="goGeneral(component, component==null)">General
+        </div>
+        <div class="dcae-menu-item selected" ng-class="{selected:page==='import'}" ng-click="goImport(component, component==null)">Import
+        </div>
+        <div class="dcae-menu-item" ng-class="{selected:page==='composition'}" ng-click="goComposition(component, typeFlag)" data-tests-id="dcae-menu-item-Composition">
+            Composition
+        </div>
+        <!--<div class="dcae-menu-item" ng-class="{selected:page==='artifact'}" ng-click="goArtifact()">Artifact</div>-->
+    </div>
+
+    <div class="dcae-main-right-container">
+
+        <div style="display: flex; justify-content: space-between; padding-bottom:0;">
+            <span>{{ VNFs.length }} VFCMTS </span>
+            <div>
+                <input type='text' ng-model='searchVfc' placeholder="Search" style="border-radius: 2px;width: 245px;height: 32px;line-height: 32px;border: 1px solid #d2d2d2;outline: none;text-indent: 10px; background: white;"
+                />
+            </div>
+        </div>
+        <br/>
+        <br/>
+        <footer>Version: {{ appSettings.version }}</footer>
+
+
+        <div data-ng-class="{'sdc-hide-popover': hidePopover}" data-ng-init="componentx.filterTerm = componentx.name +  ' '  + componentx.description + ' ' + componentx.tags.toString() + ' ' + componentx.version"
+            class="dcae-dashboard-card ng-scope" data-ng-repeat="componentx in VNFs |filter:showTypeFilter |filter:searchVfc"
+            data-ng-class="{'resource' : componentx.resourceType === 'VFC', 'service' : componentx.isService(), 'product' : componentx.isProduct()}">
+
+
+            <div class="dcae-dashboard-card-body" data-ng-click="gui.isLoading || clone(componentx,component)">
+                <div class="dcae-dashboard-card-avatar">
+                    <span data-tests-id="asset-type" class="{{componentx.resourceType}}"></span>
+                </div>
+                <div class="dcae-dashboard-card-edit " data-ng-class="componentx.lifecycleState" data-tests-id="assetlifecycleState {{getStatus()}}"></div>
+                <div class="dcae-dashboard-card-schema-image sprite-resource-icons defaulticon" style="background-image: url(dcae/79291b5162b83fdab4bc9c42d2a6f4db.png);display: inline-block;"
+                    data-tests-id="{{componentx.categories[0].subcategories[0].uniqueId}}"></div>
+                <!--<div class="dcae-dashboard-card-schema-image {{componentx.icon}}" data-tests-id="{{componentx.categories[0].subcategories[0].uniqueId}}"
+                    data-ng-class="{'sprite-resource-icons':componentx.componentType === 'RESOURCE', 'sprite-services-icons':componentx.componentType === 'SERVICE', 'sprite-product-icons':componentx.componentType === 'PRODUCT'}"></div>-->
+                <div class="dcae-dashboard-card-description">{{componentx.description}}</div>
+                <div class="dcae-dashboard-card-info-name-container">
+                    <span class="dcae-dashboard-card-info-name" tooltips tooltip-content="{{componentx.name}}"> {{componentx.name}}</span>
+                </div>
+            </div>
+
+            <div class="dcae-dashboard-card-footer">
+                <div class="dcae-dashboard-card-info">
+                    <div class="dcae-dashboard-card-info-lifecycleState">
+                        <span class="dcae-dashboard-card-info-lifecycleState">
+							{{componentx.getStatus(sdcMenu)}}</span>
+                    </div>
+                    <div class="dcae-dashboard-card-info-user">V {{componentx.version}}
+                    </div>
+                </div>
+                <!--<div class="dcae-dashboard-card-info-lifecycleState-icon sprite-new {{sdcMenu.LifeCycleStatuses[componentx.lifecycleState].icon}}"></div>-->
+            </div>
+        </div>
+    </div>
+</div>
diff --git a/app/main/dashboard/dcaedt/dcaedt_self_serve.html b/app/main/dashboard/dcaedt/dcaedt_self_serve.html
new file mode 100644
index 0000000..499358d
--- /dev/null
+++ b/app/main/dashboard/dcaedt/dcaedt_self_serve.html
@@ -0,0 +1,74 @@
+<div class="dcae-main-container">
+    <div class="dcae-left-sidebar">
+        <div class="dcae-menu-item selected"
+             ng-class="{selected:page==='general'}"
+             ng-click="goGeneral(component, false)">General
+        </div>
+        
+    </div>
+
+    <div class="dcae-main-right-container">
+
+        <div class="dcae-main-container-body-content ng-scope"
+             data-ng-class="{'third-party':thirdParty}" data-ui-view="">
+
+            <div include-padding="true"
+                 class="sdc-workspace-general-step ng-scope">
+
+                <form novalidate=""
+                      class="w-sdc-form ng-pristine ng-valid-name-exist ng-invalid ng-invalid-required ng-valid-pattern ng-valid-minlength ng-valid-maxlength"
+                      name="editForm">
+
+                    <div class="w-sdc-form-section-container">
+
+
+                        <div class="w-sdc-form-columns-wrapper">
+
+                            <div class="w-sdc-form-column">
+
+                                <!--------------------- NAME -------------------->
+                                <div class="i-sdc-form-item">
+                                    <label class="i-sdc-form-label required">Service</label>
+                                    <select class="i-sdc-form-select">
+                                        <option id="XXX">XXX</option>
+                                        <option id="YYY">YYY</option>
+                                        <option id="ZZZ">ZZZ</option>
+                                    </select>
+                                </div>
+
+                                <div class="i-sdc-form-item">
+                                    <label class="i-sdc-form-label required">VNFi</label>
+                                    <select class="i-sdc-form-select">
+                                        <option id="XXX">XXX</option>
+                                        <option id="YYY">YYY</option>
+                                        <option id="ZZZ">ZZZ</option>
+                                    </select>
+                                </div>
+                                <div class="i-sdc-form-item">
+                                    <label class="i-sdc-form-label required">Location</label>
+                                    <select class="i-sdc-form-select">
+                                        <option id="XXX">XXX</option>
+                                        <option id="YYY">YYY</option>
+                                        <option id="ZZZ">ZZZ</option>
+                                    </select>
+                                </div>
+                                <div class="i-sdc-form-item">
+                                    <label class="i-sdc-form-label required">Upload Blue Print</label>
+                                </div>
+                                <input type="file" id="file" name="file"/>
+                                <button class="tlv-btn outline green" ng-click="add()">Add</button>
+                                <p>{{data}}</p>
+                                <button ng-show="createMode" ng-click="save()"
+                                        class="tlv-btn outline green ng-scope">Create
+                                </button>
+
+                                {{PostDataResponse}}
+                            </div>
+                        </div>
+                    </div>
+                </form>
+            </div>
+        </div>
+    </div>
+</div>
+
diff --git a/app/main/dashboard/dcaedt/dcaedt_services.html b/app/main/dashboard/dcaedt/dcaedt_services.html
new file mode 100644
index 0000000..c879427
--- /dev/null
+++ b/app/main/dashboard/dcaedt/dcaedt_services.html
@@ -0,0 +1,79 @@
+<meta http-equiv="cache-control" content="no-cache" />
+
+<div class="dcae-main-container">
+    <!-- <div class="dcae-left-sidebar">
+
+        <div class="dcae-menu-item" ui-sref="dcae.app.home">Home</div>
+        <div class="dcae-menu-item" ng-click="goGeneral(component, component==null)">General
+        </div>
+        <div class="dcae-menu-item selected" ng-click="goServices(component)" data-tests-id="dcae-menu-item-Services">
+            Services
+        </div>
+        <div class="dcae-menu-item" ng-click="goComposition(component, typeFlag)" data-tests-id="dcae-menu-item-Composition">
+            Composition
+        </div>
+    </div> -->
+    <div class="dcae-left-sidebar" left-menu></div>
+
+    <div class="dcae-main-right-container" style="display: flex; justify-content: space-around;">
+
+        <div class="dcae-main-container-body-content" data-ng-class="{'third-party':thirdParty}" data-ui-view="">
+
+            <div class="tlv-loader large" ng-if="loader"></div>
+
+            <div class="left-content">
+                <h2 style="padding-bottom:30px;">
+                    Attach new services
+                </h2>
+                <div class="row">
+                    <div class="col-sm-12">
+                        <label for="service">Service Name</label>
+                        <select class="form-control" ng-model="service.uuid" ng-change="VNFIs(service.uuid)" data-ng-options="service.uuid as service.name for service in services"
+                            data-tests-id="Service Name SelectList">
+                            <option value="">Select Service</option>
+                        </select>
+                    </div>
+                </div>
+                <br>
+                <div class="row">
+                    <div class="col-sm-12" ng-if="vnfis.length > 0">
+                        <label for="vnfi">VNFI Name</label>
+                        
+                        <select class="form-control" ng-model="vnfi.name" ng-change="vnfiChange(vnfi.name)" data-ng-options="vnfi.name as vnfi.name for vnfi in vnfis"
+                            data-tests-id="VNFI Name SelectList">
+                            <option value="">Select VNFI</option>
+                        </select>
+                    </div>
+                    <div class="col-sm-12" ng-if="vnfis.length == 0 && vnfiTouch" style="color:red">
+                        The selected service has no resource of type VF, please select a different service
+                    </div>
+                </div>
+                <br>
+
+                <div class="row">
+                    <div class="col-sm-offset-7 col-sm-2">
+                        <button class="tlv-btn blue" type="button" ng-disabled="showAttach()" ng-click="saveServiceSelection(component,service,vnfi)"
+                            data-tests-id="Attach Button">
+                            Attach
+                        </button>
+                    </div>
+                </div>
+
+                <!-- {{resultInformation2}} -->
+
+            </div>
+        </div>
+
+        <div class="right-content">
+            <h2 style="padding-bottom: 30px;">Service attached</h2>
+            <div style="border: 1px solid #cdcdcd; padding: 1rem;" ng-if="resultInformation2">
+                <span style="padding-right:5px; border-right: 1px solid #cdcdcd;">
+                    {{service.uuid}}
+                </span>
+                <span style="padding-left:5px;" data-tests-id={{vnfi.name}}>
+                    {{vnfi.name}}
+                </span>
+            </div>
+        </div>
+    </div>
+</div>
diff --git a/app/main/dashboard/dcaedt/leftMenu.html b/app/main/dashboard/dcaedt/leftMenu.html
new file mode 100644
index 0000000..700c9c8
--- /dev/null
+++ b/app/main/dashboard/dcaedt/leftMenu.html
@@ -0,0 +1,22 @@
+<div class="dcae-left-sidebar">
+
+    <div class="dcae-menu-item" ng-class="{selected:page==='home'}" ui-sref="dcae.app.home">
+        Home
+    </div>
+
+    <div class="dcae-menu-item" ng-class="{selected:page==='general'}" ng-click="goGeneral(component, component==null)">
+        General
+    </div>
+
+    <!-- <div class="dcae-menu-item" ng-class="{selected:page==='services'}" ng-style="readOnlyComponent && {'opacity': '0.5','pointer-events':'none' }"
+        ng-click="goServices(component)" data-tests-id="dcae-menu-item-Services">
+        Services
+    </div> -->
+
+
+    <div class="dcae-menu-item" ng-if="component.uuid" ng-class="{selected:page==='composition'}" ng-click="goComposition(component, typeFlag)"
+        ng-style="readOnlyComponent && {'opacity': '0.5','pointer-events':'none' }" data-tests-id="dcae-menu-item-Composition">
+        Composition
+    </div>
+
+</div>
diff --git a/app/main/dashboard/home/home.controller.js b/app/main/dashboard/home/home.controller.js
new file mode 100644
index 0000000..3604530
--- /dev/null
+++ b/app/main/dashboard/home/home.controller.js
@@ -0,0 +1,16 @@
+(function () {
+
+    'use strict';
+
+    angular
+        .module('dcaeApp.dashboard.home')
+        .controller('DashboardHomeController', dashboardHomeController);
+
+    function dashboardHomeController($state) {
+
+        var vm = this;
+
+
+    }
+
+})();
diff --git a/app/main/dashboard/home/home.html b/app/main/dashboard/home/home.html
new file mode 100644
index 0000000..ae27a0b
--- /dev/null
+++ b/app/main/dashboard/home/home.html
@@ -0,0 +1 @@
+<h1>This is home</h1>
diff --git a/app/main/dashboard/home/home.less b/app/main/dashboard/home/home.less
new file mode 100644
index 0000000..fb5647d
--- /dev/null
+++ b/app/main/dashboard/home/home.less
@@ -0,0 +1,5 @@
+.home {
+    h1 {
+        font-size: 160px;
+    }
+}
diff --git a/app/main/dashboard/home/home.module.js b/app/main/dashboard/home/home.module.js
new file mode 100644
index 0000000..e496791
--- /dev/null
+++ b/app/main/dashboard/home/home.module.js
@@ -0,0 +1,25 @@
+(function () {
+
+    'use strict';
+
+    angular
+        .module('dcaeApp.dashboard.home', [])
+        .config(config);
+
+    function config($stateProvider) {
+
+        $stateProvider
+            .state('dcae1.app.home', {
+                url: '/home',
+                views: {
+                    'content@dcae.app': {
+                        templateUrl: 'main/dashboard/home/home.html',
+                        controller: 'DashboardHomeController as vm'
+                    }
+                },
+                bodyClass: 'home'
+            });
+
+    }
+
+})();