From 54c5287454a2e4730a95e5d023bac3d8f336044a Mon Sep 17 00:00:00 2001
From: Arnau Giralt <arnau.giralt@cloudblue.com>
Date: Fri, 14 Jul 2023 14:53:32 +0200
Subject: [PATCH 1/3] LITE-28090: Port cTabs, cNavBar and cView

---
 ui/src/components/cNavBar.vue | 194 ++++++++++++++++++++
 ui/src/components/cTabs.vue   | 188 +++++++++++++++++++
 ui/src/components/cView.vue   | 152 ++++++++++++++++
 ui/styles/index.css           | 328 +---------------------------------
 4 files changed, 543 insertions(+), 319 deletions(-)
 create mode 100644 ui/src/components/cNavBar.vue
 create mode 100644 ui/src/components/cTabs.vue
 create mode 100644 ui/src/components/cView.vue

diff --git a/ui/src/components/cNavBar.vue b/ui/src/components/cNavBar.vue
new file mode 100644
index 0000000..ab18df2
--- /dev/null
+++ b/ui/src/components/cNavBar.vue
@@ -0,0 +1,194 @@
+<template lang="pug">
+.navigation-bar
+  router-link.navigation-bar__back-button(
+    v-if="backRoute",
+    :to="backRoute",
+  )
+    c-icon(
+      :color="themeGrey1",
+      :icon="icons.googleArrowBackBaseline",
+      size="24",
+    )
+
+  slot(name="logo")
+
+  slot(name="title")
+    .navigation-bar__page-title-holder(v-if="assistiveTitle")
+      .navigation-bar__page-assistive-title.truncate-text {{ assistiveTitle }}
+      h1.navigation-bar__page-title.truncate-text {{ title }}
+
+    h1.navigation-bar__page-title.truncate-text(v-else) {{ title }}
+
+  c-tabs.navigation-bar__tabs(
+    v-if="tabs.length",
+    :current-tab.sync="localCurrentTab",
+    :tabs="tabs",
+    full-height,
+    no-border,
+    no-content,
+  )
+
+  .actions-holder.navigation-bar__actions
+    .actions-slot
+      slot(name="actions")
+
+</template>
+
+<script>
+import {
+  googleArrowBackBaseline,
+} from '@cloudblueconnect/material-svg/baseline';
+
+import cIcon from '~components/cIcon.vue';
+import cTabs from '~components/cTabs.vue';
+
+import {
+  themeGrey1,
+} from '~constants';
+
+import sync from '~mixins/sync';
+
+
+export default {
+  mixins: [
+    sync([{ prop: 'currentTab', local: 'localCurrentTab' }]),
+  ],
+
+  components: {
+    cIcon,
+    cTabs,
+  },
+
+  props: {
+    backRoute: {
+      type: [Object, String],
+      default: null,
+    },
+
+    assistiveTitle: String,
+    title: String,
+
+    tabs: {
+      type: Array,
+      default: () => [],
+    },
+
+    currentTab: Object,
+  },
+
+  data: () => ({
+    icons: { googleArrowBackBaseline },
+    localCurrentTab: null,
+    themeGrey1,
+  }),
+};
+</script>
+
+<style lang="stylus">
+.navigation-bar {
+  box-sizing: content-box;
+  display: flex;
+  align-items: center;
+  flex: 0 0 auto;
+
+  height: 64px;
+  padding-left: 24px;
+  padding-right: 24px;
+  border-bottom: 1px solid #e0e0e0;
+  background: #f5f5f5;
+
+  &__page-title {
+    font-weight: 500;
+    font-size: 20px;
+    line-height: 24px;
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+
+  &__page-assistive-title {
+    color: #707070;
+  }
+
+  &__back-button + &__page-title-holder,
+  &__back-button + &__page-title {
+    margin-left: 32px;
+  }
+
+  &__back-button {
+    margin: 0 -6px;
+    color: #666666;
+    padding: 4px;
+
+    &:hover {
+      background: #e0e0e0;
+    }
+  }
+
+  &__tabs,
+  &__content,
+  &__actions {
+    padding-left: 48px;
+  }
+
+  &__tabs,
+  &__content {
+    display: flex;
+    align-self: stretch;
+  }
+
+  &__tabs {
+    flex: 0 0 auto;
+  }
+
+  &__content {
+    flex: 1 1 auto;
+  }
+
+  &__actions {
+    margin-left: auto;
+    display: flex;
+    align-items: center;
+    flex: 0 0 auto;
+  }
+}
+
+.page-title {
+  display: flex;
+  align-items: center;
+
+  &__link {
+    display: flex;
+    align-items: center;
+    text-decoration: none;
+    color: black;
+    cursor: pointer;
+  }
+}
+
+.actions-holder {
+  .actions-slot {
+    display: flex;
+    align-items: center;
+
+    & > div {
+      padding-left: 16px;
+    }
+  }
+
+  &__button {
+    margin: 0;
+    min-width: 0;
+  }
+}
+
+.actions-menu {
+  &__divider {
+    margin-top: 7px;
+    margin-bottom: 8px;
+  }
+}
+
+._mb_2 {
+  margin-bottom: 2px;
+}
+</style>
diff --git a/ui/src/components/cTabs.vue b/ui/src/components/cTabs.vue
new file mode 100644
index 0000000..96cee1b
--- /dev/null
+++ b/ui/src/components/cTabs.vue
@@ -0,0 +1,188 @@
+<template lang="pug">
+.c-tabs
+  .c-tabs__controls(:class="{ 'c-tabs__controls_border_none': noBorder }")
+    .c-tabs__control-tooltip(
+      v-for="tab in tabs",
+      :key="tab.value",
+      @click="open(tab)",
+    )
+      slot(
+        name="tab",
+        v-bind="tab",
+      )
+        span.c-tabs__control-item(:class="linkClass(tab)")
+          pic._mr_8(
+            v-if="tab.image",
+            :src="tab.image",
+            :width="20",
+            :height="20",
+            size="contain",
+          )
+          span {{ tab.label }}
+          c-icon._ml_4(
+            v-if="tab.icon",
+            :icon="tab.icon.value",
+            :color="tab.icon.color",
+            :class="tab.icon.class",
+            size="14",
+          )
+
+  .c-tabs__content
+    .c-tab__view(
+      v-for="tab in tabs",
+      :key="tab.value",
+    )
+      slot(
+        v-if="localCurrentTab?.value === tab.value"
+        v-bind="tab",
+        :name="tab.value",
+      )
+
+</template>
+
+
+<script>
+import cIcon from '~components/cIcon.vue';
+import Pic from '~components/Pic.vue';
+
+import sync from '~mixins/sync';
+
+
+export default {
+  mixins: [
+    sync([{ prop: 'currentTab', local: 'localCurrentTab' }]),
+  ],
+
+  components: {
+    cIcon,
+    Pic,
+  },
+
+  props: {
+    currentTab: {
+      type: Object,
+      default: null,
+    },
+
+    tabs: {
+      required: true,
+      type: Array,
+    },
+
+    noBorder: Boolean,
+    fullHeight: Boolean,
+  },
+
+  data: () => ({
+    localCurrentTab: null,
+  }),
+
+  methods: {
+    open(tab) {
+      if (tab.disabled || tab.value === this.localCurrentTab?.value) return;
+
+      this.localCurrentTab = tab;
+      this.$emit('open', tab);
+    },
+
+    linkClass(tab) {
+      return {
+        'c-tabs__control-item_active': tab.value === this.localCurrentTab?.value,
+        'c-tabs__control-item_disabled': tab.disabled,
+        'c-tabs__control-item_height_full': this.fullHeight,
+      };
+    },
+  },
+
+  created() {
+    if (!this.localCurrentTab && this.tabs.length) this.localCurrentTab = this.tabs[0];
+  },
+};
+</script>
+
+
+<style lang="stylus">
+.c-tabs {
+  &__controls {
+    display: flex;
+    border-bottom: 1px solid #e0e0e0;
+
+    &_border_none {
+      border-bottom: none;
+    }
+  }
+
+  &__content {
+    margin-top: 32px;
+  }
+
+  &__control-tooltip {
+    position: relative;
+    display: flex;
+    align-items: center;
+    margin-left: 24px;
+    line-height: 48px;
+    white-space: nowrap;
+    cursor: pointer;
+
+    color: #212121;
+
+    &:first-child {
+      margin-left: 0;
+    }
+
+    a& {
+      text-decoration: none;
+    }
+
+    a&:hover {
+      color: var(--theme_accent);
+    }
+  }
+
+  &__control-item {
+    font-weight: 500;
+    text-decoration: none;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    display: flex;
+    align-items: center;
+
+    &:after {
+      content: '';
+      height: 3px;
+      position: absolute;
+      right: 0;
+      bottom: -1px;
+      left: 0;
+
+      transform-origin: bottom;
+      transform: scaleY(0);
+      transition: transform 385ms cubic-bezier(0.4, 0, 0.2, 1);
+
+      background-color: var(--theme_accent);
+    }
+
+    &_active {
+      color: var(--theme_accent);
+
+      &:after {
+        transform: scaleX(1);
+      }
+    }
+
+    &_disabled {
+      color: #bdbdbd !important;
+      cursor: default !important;
+    }
+
+    &_height_full {
+      height: 100%;
+    }
+
+    .pic {
+      border-radius: 2px;
+    }
+  }
+}
+</style>
diff --git a/ui/src/components/cView.vue b/ui/src/components/cView.vue
new file mode 100644
index 0000000..12752db
--- /dev/null
+++ b/ui/src/components/cView.vue
@@ -0,0 +1,152 @@
+<template lang="pug">
+.c-view
+  .c-view__progress-wrapper(v-if="loading")
+    c-icon.primary--text._ma_auto(
+      :icon="icons.connectLoaderAnimated",
+      :size="76",
+      color="accent",
+    )
+
+  template(v-else)
+    c-nav-bar.c-view__navigation(
+      :assistive-title="assistiveTitle",
+      :back-route="backRoute",
+      :current-tab.sync="localCurrentTab",
+      :title="title",
+      :tabs="tabs",
+    )
+      template(#logo="")
+        slot(name="logo")
+
+      template(#title="")
+        slot(name="title")
+
+      template(#actions="")
+        slot(name="actions")
+
+    .c-view__content-holder
+      .c-view__content(:class="{ 'c-view__content_padded': !noPadded }")
+        slot(name="default")
+
+</template>
+
+
+<script>
+import {
+  connectLoaderAnimated,
+} from '@cloudblueconnect/material-svg/animated';
+
+
+import cIcon from '~components/cIcon.vue';
+import cNavBar from '~components/cNavBar.vue';
+
+import sync from '~mixins/sync';
+
+
+export default {
+  mixins: [
+    sync([{ prop: 'currentTab', local: 'localCurrentTab' }]),
+  ],
+
+  components: {
+    cIcon,
+    cNavBar,
+  },
+
+  props: {
+    loading: Boolean,
+    noPadded: Boolean,
+
+    // navigation bar props
+    assistiveTitle: String,
+    backRoute: [Object, String],
+    title: String,
+    currentTab: Object,
+    tabs: {
+      type: Array,
+      default: () => [],
+    },
+  },
+
+  data: () => ({
+    icons: { connectLoaderAnimated },
+    localCurrentTab: null,
+  }),
+
+  watch: {
+    '$route.params.tab': {
+      immediate: true,
+      handler(v) {
+        if (v) {
+          const newTab = this.tabs.find(tab => tab.value === v);
+          if (newTab) this.localCurrentTab = newTab;
+        }
+      },
+    },
+
+    localCurrentTab: {
+      deep: true,
+      immediate: true,
+      handler(v) {
+        if (!v || v.value === this.$route.params?.tab) return;
+
+        this.$router.replace({
+          ...this.$route,
+          params: { ...this.$route.params, tab: v.value },
+        });
+      },
+    },
+  },
+};
+</script>
+
+
+<style lang="stylus">
+.c-view {
+  position: relative;
+  flex: 1 1 100%;
+  display: grid;
+
+  grid-template-rows: auto auto;
+  grid-template-columns: 1fr;
+  grid-template-areas: "n" "c";
+
+  overflow: auto;
+
+  &__progress-wrapper {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    display: flex;
+  }
+
+  &__navigation {
+    grid-area: n;
+  }
+
+  &__content-holder {
+    position: relative;
+    grid-area: c;
+  }
+
+  &__content {
+    position: relative;
+    min-height: 100%;
+    box-sizing: border-box;
+    padding-bottom: 64px;
+
+    &_padded {
+      padding: 24px 24px 40px;
+    }
+  }
+
+  &__content,
+  &__navigation {
+    &:empty {
+      display: none;
+    }
+  }
+}
+</style>
diff --git a/ui/styles/index.css b/ui/styles/index.css
index 7f01c15..9e75f71 100644
--- a/ui/styles/index.css
+++ b/ui/styles/index.css
@@ -2,325 +2,15 @@
 Copyright (c) 2023, Ingram Micro
 All rights reserved.
 */
-body {
-    font-family: "Roboto", sans-serif;
-}
-
-.hidden {
-    display: none !important;
-}
-
-#loader {
-    width: 48px;
-    height: 48px;
-    border: 5px solid white;
-    border-bottom-color: #1565c0;
-    border-radius: 50%;
-    display: block;
-    margin: 0 auto;
-    box-sizing: border-box;
-    animation: rotation 1s linear infinite;
-    }
-
-    @keyframes rotation {
-    0% {
-        transform: rotate(0deg);
-    }
-    100% {
-        transform: rotate(360deg);
-    }
-}
-
-
-h1 {
-    font-weight: 500;
-    font-size: 20px;
-}
-
-
-.switch {
-    z-index: 0;
-    position: relative;
-    display: inline-block;
-    color: rgba(var(--pure-material-onsurface-rgb, 0, 0, 0), 0.87);
-    font-family: var(--pure-material-font, "Roboto", "Segoe UI", BlinkMacSystemFont, system-ui, -apple-system);
-    font-size: 16px;
-    line-height: 1.5;
-}
-
-/* Input */
-.switch>input {
-    appearance: none;
-    -moz-appearance: none;
-    -webkit-appearance: none;
-    z-index: -1;
-    position: absolute;
-    right: 6px;
-    top: -8px;
-    display: block;
-    margin: 0;
-    border-radius: 50%;
-    width: 40px;
-    height: 40px;
-    background-color: rgba(var(--pure-material-onsurface-rgb, 0, 0, 0), 0.38);
-    outline: none;
-    opacity: 0;
-    transform: scale(1);
-    pointer-events: none;
-    transition: opacity 0.3s 0.1s, transform 0.2s 0.1s;
-}
-
-/* Span */
-.switch>span {
-    display: inline-block;
-    width: 100%;
-    cursor: pointer;
-}
-
-/* Track */
-.switch>span::before {
-    content: "";
-    float: right;
-    display: inline-block;
-    margin: 5px 0 5px 10px;
-    border-radius: 7px;
-    width: 36px;
-    height: 14px;
-    background-color: rgba(var(--pure-material-onsurface-rgb, 0, 0, 0), 0.38);
-    vertical-align: top;
-    transition: background-color 0.2s, opacity 0.2s;
-}
-
-/* Thumb */
-.switch>span::after {
-    content: "";
-    position: absolute;
-    top: 2px;
-    right: 16px;
-    border-radius: 50%;
-    width: 20px;
-    height: 20px;
-    background-color: rgb(var(--pure-material-onprimary-rgb, 255, 255, 255));
-    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
-    transition: background-color 0.2s, transform 0.2s;
-}
-
-/* Checked */
-.switch>input:checked {
-    right: -10px;
-    background-color: rgb(var(--pure-material-primary-rgb, 33, 150, 243));
-}
-
-.switch>input:checked+span::before {
-    background-color: rgba(var(--pure-material-primary-rgb, 33, 150, 243), 0.6);
-}
-
-.switch>input:checked+span::after {
-    background-color: rgb(var(--pure-material-primary-rgb, 33, 150, 243));
-    transform: translateX(16px);
-}
-
-/* Hover, Focus */
-.switch:hover>input {
-    opacity: 0.04;
-}
-
-.switch>input:focus {
-    opacity: 0.12;
-}
-
-.switch:hover>input:focus {
-    opacity: 0.16;
-}
-
-/* Active */
-.switch>input:active {
-    opacity: 1;
-    transform: scale(0);
-    transition: transform 0s, opacity 0s;
-}
-
-.switch>input:active+span::before {
-    background-color: rgba(var(--pure-material-primary-rgb, 33, 150, 243), 0.6);
-}
-
-.switch>input:checked:active+span::before {
-    background-color: rgba(var(--pure-material-onsurface-rgb, 0, 0, 0), 0.38);
-}
-
-/* Disabled */
-.switch>input:disabled {
-    opacity: 0;
-}
-
-.switch>input:disabled+span {
-    color: rgb(var(--pure-material-onsurface-rgb, 0, 0, 0));
-    opacity: 0.38;
-    cursor: default;
-}
-
-.switch>input:disabled+span::before {
-    background-color: rgba(var(--pure-material-onsurface-rgb, 0, 0, 0), 0.38);
-}
-
-.switch>input:checked:disabled+span::before {
-    background-color: rgba(var(--pure-material-primary-rgb, 33, 150, 243), 0.6);
+:root {
+  --theme_primary: #1565c0;
+  --theme_primary_rgb: 21,101,192;
+  --theme_accent: #4797f2;
+  --theme_accent_rgb: 71,151,242;
+  --theme_contrast: #ffffff;
+  --theme_contrast_rgb: 255,255,255;
 }
 
-.button-container {
-    display: flex;
-    flex-direction: row-reverse;
-    align-items: flex-end;
-    margin-right: 15px;
-}
-
-.button {
-    position: relative;
-    display: inline-block;
-    box-sizing: border-box;
-    border: none;
-    border-radius: 4px;
-    padding: 0 8px;
-    min-width: 64px;
-    height: 36px;
-    vertical-align: middle;
-    text-align: center;
-    text-overflow: ellipsis;
-    text-transform: uppercase;
-    color: rgb(var(--pure-material-primary-rgb, 33, 150, 243));
-    background-color: transparent;
-    font-family: var(--pure-material-font, "Roboto", "Segoe UI", BlinkMacSystemFont, system-ui, -apple-system);
-    font-size: 14px;
-    font-weight: 500;
-    line-height: 36px;
-    overflow: hidden;
-    outline: none;
-    cursor: pointer;
-}
-
-.button::-moz-focus-inner {
-    border: none;
-}
-
-/* Overlay */
-.button::before {
-    content: "";
-    position: absolute;
-    left: 0;
-    right: 0;
-    top: 0;
-    bottom: 0;
-    background-color: currentColor;
-    opacity: 0;
-    transition: opacity 0.2s;
-}
-
-/* Ripple */
-.button::after {
-    content: "";
-    position: absolute;
-    left: 50%;
-    top: 50%;
-    border-radius: 50%;
-    padding: 50%;
-    width: 32px;
-    height: 32px;
-    background-color: currentColor;
-    opacity: 0;
-    transform: translate(-50%, -50%) scale(1);
-    transition: opacity 1s, transform 0.5s;
-}
-
-/* Hover, Focus */
-.button:hover::before {
-    opacity: 0.04;
-}
-
-.button:focus::before {
-    opacity: 0.12;
-}
-
-.button:hover:focus::before {
-    opacity: 0.16;
-}
-
-/* Active */
-.button:active::after {
-    opacity: 0.16;
-    transform: translate(-50%, -50%) scale(0);
-    transition: transform 0s;
-}
-
-/* Disabled */
-.button:disabled {
-    color: rgba(var(--pure-material-onsurface-rgb, 0, 0, 0), 0.38);
-    background-color: transparent;
-    cursor: initial;
-}
-
-.button:disabled::before {
-    opacity: 0;
-}
-
-.button:disabled::after {
-    opacity: 0;
-}
-
-.list-wrapper {
-    margin: 30px auto;
-}
-
-.list {
-    background-color: #FFF;
-    margin: 0;
-    padding: 15px;
-    border-radius: 2px;
-}
-
-.list .list-item {
-    display: flex;
-    padding: 10px 5px;
-}
-
-.list .list-item .switch {
-    display: flex;
-    align-items: center;
-}
-
-.list .list-item:not(:last-child) {
-    border-bottom: 1px solid #EEE;
-}
-
-.list .image {
-    flex-shrink: 0;
-    height: 80px;
-}
-
-.list .list-item-image img {
-    width: 70px;
-    height: 70px;
-}
-
-.list .list-item-content {
-    width: 90%;
-    padding: 0 20px;
-}
-
-.list .list-item-content h4 {
-    margin: 0;
-    font-size: 18px;
-    margin-top: 15px;
-}
-
-.list .list-item-content p {
-    margin-top: 5px;
-    color: #AAA;
-    margin-bottom: 0;
-}
-
-.main-container {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-evenly;
-    align-items: center;
+body {
+  font-family: "Roboto", sans-serif;
 }

From f6b5367acf9ed3cd648b7a9152a15e1fef1e7159 Mon Sep 17 00:00:00 2001
From: Arnau Giralt <arnau.giralt@cloudblue.com>
Date: Fri, 14 Jul 2023 15:11:32 +0200
Subject: [PATCH 2/3] LITE-28090: Implement tabs in DeploymentDetails - Add API
 call to /deployments/id - Add cView and tabs to DeploymentsTable - Remove
 loader from index.html - Port GridItem component

---
 ui/pages/index.html                    |   4 +-
 ui/src/components/DeploymentsTable.vue |   2 +-
 ui/src/components/GridItem.vue         |  99 ++++++++++++++++
 ui/src/pages/Dashboard.vue             |  33 +++---
 ui/src/pages/DeploymentDetails.vue     | 151 +++++++++++++++++++++++--
 ui/src/utils.js                        |   2 +
 6 files changed, 262 insertions(+), 29 deletions(-)
 create mode 100644 ui/src/components/GridItem.vue

diff --git a/ui/pages/index.html b/ui/pages/index.html
index 2f36ac8..b97007b 100644
--- a/ui/pages/index.html
+++ b/ui/pages/index.html
@@ -14,9 +14,7 @@
 </head>
 
 <body>
-    <div id="loader"></div>
-    <div id="app">
-    </div>
+    <div id="app"></div>
 </body>
 
 </html>
diff --git a/ui/src/components/DeploymentsTable.vue b/ui/src/components/DeploymentsTable.vue
index e9e4f47..96fc4bc 100644
--- a/ui/src/components/DeploymentsTable.vue
+++ b/ui/src/components/DeploymentsTable.vue
@@ -90,7 +90,7 @@ import {
 
 import {
   getDeployments,
-} from '../utils';
+} from '@/utils';
 
 const prepareRow = template({
   id: ['id'],
diff --git a/ui/src/components/GridItem.vue b/ui/src/components/GridItem.vue
new file mode 100644
index 0000000..325ff22
--- /dev/null
+++ b/ui/src/components/GridItem.vue
@@ -0,0 +1,99 @@
+<template lang="pug">
+  .item-row(ref="item-row")
+    .item-label(ref="item-label")
+      span(v-if="!$slots.label") {{ label }}
+
+      slot(name="label")
+
+    .item-value(
+      ref="item-value",
+      :locator="locator",
+    )
+      span(v-if="!$slots.value")
+        span(v-if="value") {{ value }}
+        span.text--disabled(v-else) —
+
+      slot(name="value")
+</template>
+
+<script>
+export default {
+  props: {
+    label: {
+      type: String,
+      required: false,
+    },
+
+    value: {
+      type: [String, Number],
+      required: false,
+    },
+
+    locator: {
+      type: String,
+      required: false,
+      default: 'grid-item',
+    },
+
+    columnWidth: Number,
+    rowOffset: Number,
+
+    truncate: Boolean,
+    truncateLabel: Boolean,
+    truncateValue: Boolean,
+  },
+
+  methods: {
+    setFirstColumnWidth() {
+      this.$refs['item-row'].style.gridTemplateColumns = `var(--grid-item-first-col, ${this.columnWidth}px) 1fr`;
+    },
+
+    setFirstRowOffset() {
+      this.$refs['item-row'].style.marginTop = `var(--grid-item-row-offset, ${this.rowOffset}px)`;
+    },
+
+    addTruncateLabel() {
+      this.$refs['item-label'].classList.add('truncate-text');
+    },
+
+    addTruncateValue() {
+      this.$refs['item-value'].classList.add('truncate-text');
+    },
+  },
+
+  mounted() {
+    if (this.truncateLabel || this.truncate) {
+      this.addTruncateLabel();
+    }
+
+    if (this.truncateValue || this.truncate) {
+      this.addTruncateValue();
+    }
+
+    if (this.columnWidth) this.setFirstColumnWidth();
+    if (this.rowOffset) this.setFirstRowOffset();
+  },
+};
+</script>
+
+<style lang="stylus">
+@import '~styles/common';
+
+.item-row {
+  display: grid;
+  grid-template-columns: var(--grid-item-first-col, 60px) 1fr;
+  grid-column-gap: 16px;
+  align-items: start;
+
+  & + & {
+    margin-top: var(--grid-item-row-offset, 12px); // NOTE: use variable, 12 or 8
+  }
+}
+
+.item-label {
+  font-weight: 500;
+  font-size: 14px;
+  line-height: 20px;
+  color: $base-text-color;
+}
+</style>
diff --git a/ui/src/pages/Dashboard.vue b/ui/src/pages/Dashboard.vue
index 6ae768e..ae67084 100644
--- a/ui/src/pages/Dashboard.vue
+++ b/ui/src/pages/Dashboard.vue
@@ -1,27 +1,34 @@
 <template lang="pug">
-  .dashboard
-    .title XVS Extension
-    ui-tabs
-      ui-tab(default tab="Deployments") Deployments
-      ui-tab(tab="Requests") Requests
-
-      ui-pad(pad="Deployments")
-        deployments-table
-
-      ui-pad(pad="Requests")
-        .subs-criptions-tab Requests
+  c-view.dashboard(
+    title="XVS Extension",
+    :tabs="tabs",
+    :current-tab.sync="currentTab",
+    no-padded,
+  )
+    deployments-table(v-if="currentTab?.value === 'deployments'")
+    .subscriptions-tab(v-else-if="currentTab?.value === 'requests'") Requests
 
 </template>
 
 <script>
+import cView from '~components/cView.vue';
 import DeploymentsTable from '~components/DeploymentsTable.vue';
 
 export default {
   components: {
+    cView,
     DeploymentsTable,
   },
-  data() {
-    return {};
+
+  data: () => ({
+    currentTab: null,
+  }),
+
+  computed: {
+    tabs: () => [
+      { label: 'Deployments', value: 'deployments' },
+      { label: 'Requests', value: 'requests' },
+    ],
   },
 };
 </script>
diff --git a/ui/src/pages/DeploymentDetails.vue b/ui/src/pages/DeploymentDetails.vue
index 81ef1e7..76cccb9 100644
--- a/ui/src/pages/DeploymentDetails.vue
+++ b/ui/src/pages/DeploymentDetails.vue
@@ -1,20 +1,147 @@
 <template lang="pug">
-  .deployment-details
-    .title Deployment Details
-    ui-tabs
-      ui-tab(default tab="Foo") Foo
-      ui-tab(tab="Bar") Bar
-      ui-tab(tab="Baz") Baz
-      ui-pad(pad="Foo")
-        .foo-tab Foo
-      ui-pad(pad="Bar")
-        .bar-tab Bar
-      ui-pad(pad="Baz")
-        .baz-tab Baz
+  c-view.deployment-details(
+    :title="deploymentId",
+    assistive-title="Deployment Details",
+    :back-route="{ name: 'Dashboard', params: { tab: 'deployments' } }",
+    :current-tab.sync="currentTab",
+    :loading="loading"
+  )
+    template(#actions="")
+      c-button(
+        :icon="icons.googleSyncBaseline",
+        label="sync",
+        color="accent",
+        mode="solid",
+      )
+
+    .info-container
+      .info-column
+        grid-item(label="Status")
+          template(#value="")
+            c-status(:status="deployment.status")
+
+        grid-item(label="Product")
+          template(#value="")
+            detail-item(
+              :body-text="deployment.product.name",
+              dense,
+            )
+              template(#image="")
+                pic(
+                  :src="deployment.product.icon",
+                  :width="16",
+                  :height="16",
+                )
+
+        grid-item(label="Vendor")
+          template(#value="")
+            detail-item(
+              :body-text="deployment.owner.name",
+              dense,
+            )
+              template(#image="")
+                pic(
+                  :src="deployment.owner.icon",
+                  :width="16",
+                  :height="16",
+                )
+
+
+      .info-column
+        grid-item(
+          :column-width="78",
+          label="Hub",
+        )
+          template(#value="")
+            span {{ deployment.hub.name }}
+
+        grid-item(
+          :column-width="78",
+          label="Last Sync",
+        )
+          template(#value="")
+            span {{ deployment.last_sync_at | utcToLocal }}
+
+
+    c-tabs(
+      :current-tab.sync="currentTab",
+      :tabs="tabs",
+    )
+      template(#marketplaces="")
+        .marketplaces-tab Marketplaces
+      template(#ppr="")
+        .ppr-tab PPR
+      template(#configuration="")
+        .configuration-tab Configuration
 
 </template>
 
 <script>
+import {
+  googleSyncBaseline,
+} from '@cloudblueconnect/material-svg/baseline';
+
+import cButton from '~components/cButton.vue';
+import cStatus from '~components/cStatus.vue';
+import cTabs from '~components/cTabs.vue';
+import cView from '~components/cView.vue';
+import DetailItem from '~components/DetailItem.vue';
+import GridItem from '~components/GridItem.vue';
+import Pic from '~components/Pic.vue';
+
+import {
+  getDeployment,
+} from '@/utils';
+
+
 export default {
+  components: {
+    cButton,
+    cStatus,
+    cTabs,
+    cView,
+    DetailItem,
+    GridItem,
+    Pic,
+  },
+
+  data: () => ({
+    currentTab: null,
+    loading: true,
+    deployment: null,
+  }),
+
+  computed: {
+    icons: () => ({
+      googleSyncBaseline,
+    }),
+
+    deploymentId: vm => vm.$route.params.id,
+
+    tabs: () => [
+      { label: 'Marketplaces', value: 'marketplaces' },
+      { label: 'PPR', value: 'ppr' },
+      { label: 'Configuration', value: 'configuration' },
+    ],
+  },
+
+  created() {
+    getDeployment(this.deploymentId).then(deployment => {
+      this.deployment = deployment;
+      this.loading = false;
+    });
+  },
 };
 </script>
+
+<style lang="stylus">
+.deployment-details {
+
+  .info-container {
+    display: grid;
+    grid-template-columns: minmax(auto, 376px) minmax(auto, 376px) minmax(auto, 376px);
+    grid-column-gap: 48px;
+    margin-bottom: 32px;
+  }
+}
+</style>
diff --git a/ui/src/utils.js b/ui/src/utils.js
index c64e2be..67c63d8 100644
--- a/ui/src/utils.js
+++ b/ui/src/utils.js
@@ -12,6 +12,8 @@ export const getMarketplaces = () => fetch('/api/marketplaces').then((response)
 
 export const getDeployments = () => fetch('/api/deployments').then((response) => response.json());
 
+export const getDeployment = (id) => fetch(`/api/deployments/${id}`).then((response) => response.json());
+
 export const updateSettings = (settings) => fetch('/api/settings', {
   method: 'POST',
   headers: { 'Content-Type': 'application/json' },

From 2e399bff74be51b217412991ebfa1220fc81665b Mon Sep 17 00:00:00 2001
From: Arnau Giralt <arnau.giralt@cloudblue.com>
Date: Fri, 14 Jul 2023 15:15:37 +0200
Subject: [PATCH 3/3] LITE-28090: Update static files

---
 ...deployment-details.aafa59e785fc54f79178.js | 152 +++++
 ...deployment-details.c49c14732d8dd3ed74a7.js |  62 --
 connect_ext_ppr/static/deployment-details.css |  29 +
 ...aad.css => index.0d3dd9a3b3207aeb0dae.css} | 594 +++++++-----------
 ...88cde.js => index.850f61939486e367d210.js} | 322 +++++++++-
 connect_ext_ppr/static/index.html             |   6 +-
 ...6a.js => settings.4553496e587cf62b3d76.js} |   2 +-
 ....css => settings.464cc3b352ceb58aad51.css} | 328 +---------
 connect_ext_ppr/static/settings.html          |   2 +-
 ...496.js => vendors.7e5afe9e4e5d6999e52c.js} |  22 +
 10 files changed, 772 insertions(+), 747 deletions(-)
 create mode 100644 connect_ext_ppr/static/deployment-details.aafa59e785fc54f79178.js
 delete mode 100644 connect_ext_ppr/static/deployment-details.c49c14732d8dd3ed74a7.js
 create mode 100644 connect_ext_ppr/static/deployment-details.css
 rename connect_ext_ppr/static/{index.93a91c4cd8a19a7bbaad.css => index.0d3dd9a3b3207aeb0dae.css} (92%)
 rename connect_ext_ppr/static/{index.0000a39b9584a3f88cde.js => index.850f61939486e367d210.js} (89%)
 rename connect_ext_ppr/static/{settings.ca8e500f37a67182056a.js => settings.4553496e587cf62b3d76.js} (89%)
 rename connect_ext_ppr/static/{settings.81782caeb514cc6ff58a.css => settings.464cc3b352ceb58aad51.css} (84%)
 rename connect_ext_ppr/static/{vendors.06b6d30eb8d61833c496.js => vendors.7e5afe9e4e5d6999e52c.js} (99%)

diff --git a/connect_ext_ppr/static/deployment-details.aafa59e785fc54f79178.js b/connect_ext_ppr/static/deployment-details.aafa59e785fc54f79178.js
new file mode 100644
index 0000000..c8fb686
--- /dev/null
+++ b/connect_ext_ppr/static/deployment-details.aafa59e785fc54f79178.js
@@ -0,0 +1,152 @@
+"use strict";
+/*
+ * ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development").
+ * This devtool is neither made for production nor for readable output files.
+ * It uses "eval()" calls to create a separate source file in the browser devtools.
+ * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
+ * or disable the default devtool with "devtool: false".
+ * If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
+ */
+(self["webpackChunkconnect_extension_xvs"] = self["webpackChunkconnect_extension_xvs"] || []).push([["deployment-details"],{
+
+/***/ "./node_modules/mini-css-extract-plugin/dist/loader.js!./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js!./node_modules/stylus-loader/dist/cjs.js!./node_modules/vue-loader/lib/index.js??vue-loader-options!./ui/src/components/GridItem.vue?vue&type=style&index=0&id=292fb55a&lang=stylus&":
+/*!*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
+  !*** ./node_modules/mini-css-extract-plugin/dist/loader.js!./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js!./node_modules/stylus-loader/dist/cjs.js!./node_modules/vue-loader/lib/index.js??vue-loader-options!./ui/src/components/GridItem.vue?vue&type=style&index=0&id=292fb55a&lang=stylus& ***!
+  \*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+eval("__webpack_require__.r(__webpack_exports__);\n// extracted by mini-css-extract-plugin\n\n\n//# sourceURL=webpack://connect-extension-xvs/./ui/src/components/GridItem.vue?./node_modules/mini-css-extract-plugin/dist/loader.js!./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js!./node_modules/stylus-loader/dist/cjs.js!./node_modules/vue-loader/lib/index.js??vue-loader-options");
+
+/***/ }),
+
+/***/ "./node_modules/mini-css-extract-plugin/dist/loader.js!./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js!./node_modules/stylus-loader/dist/cjs.js!./node_modules/vue-loader/lib/index.js??vue-loader-options!./ui/src/pages/DeploymentDetails.vue?vue&type=style&index=0&id=2ceadcfa&lang=stylus&":
+/*!***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
+  !*** ./node_modules/mini-css-extract-plugin/dist/loader.js!./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js!./node_modules/stylus-loader/dist/cjs.js!./node_modules/vue-loader/lib/index.js??vue-loader-options!./ui/src/pages/DeploymentDetails.vue?vue&type=style&index=0&id=2ceadcfa&lang=stylus& ***!
+  \***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+eval("__webpack_require__.r(__webpack_exports__);\n// extracted by mini-css-extract-plugin\n\n\n//# sourceURL=webpack://connect-extension-xvs/./ui/src/pages/DeploymentDetails.vue?./node_modules/mini-css-extract-plugin/dist/loader.js!./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js!./node_modules/stylus-loader/dist/cjs.js!./node_modules/vue-loader/lib/index.js??vue-loader-options");
+
+/***/ }),
+
+/***/ "./ui/src/components/GridItem.vue":
+/*!****************************************!*\
+  !*** ./ui/src/components/GridItem.vue ***!
+  \****************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _GridItem_vue_vue_type_template_id_292fb55a_lang_pug___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./GridItem.vue?vue&type=template&id=292fb55a&lang=pug& */ \"./ui/src/components/GridItem.vue?vue&type=template&id=292fb55a&lang=pug&\");\n/* harmony import */ var _GridItem_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./GridItem.vue?vue&type=script&lang=js& */ \"./ui/src/components/GridItem.vue?vue&type=script&lang=js&\");\n/* harmony import */ var _GridItem_vue_vue_type_style_index_0_id_292fb55a_lang_stylus___WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./GridItem.vue?vue&type=style&index=0&id=292fb55a&lang=stylus& */ \"./ui/src/components/GridItem.vue?vue&type=style&index=0&id=292fb55a&lang=stylus&\");\n/* harmony import */ var _node_modules_vue_loader_lib_runtime_componentNormalizer_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! !../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js */ \"./node_modules/vue-loader/lib/runtime/componentNormalizer.js\");\n\n\n\n;\n\n\n/* normalize component */\n\nvar component = (0,_node_modules_vue_loader_lib_runtime_componentNormalizer_js__WEBPACK_IMPORTED_MODULE_3__[\"default\"])(\n  _GridItem_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_1__[\"default\"],\n  _GridItem_vue_vue_type_template_id_292fb55a_lang_pug___WEBPACK_IMPORTED_MODULE_0__.render,\n  _GridItem_vue_vue_type_template_id_292fb55a_lang_pug___WEBPACK_IMPORTED_MODULE_0__.staticRenderFns,\n  false,\n  null,\n  null,\n  null\n  \n)\n\n/* hot reload */\nif (false) { var api; }\ncomponent.options.__file = \"ui/src/components/GridItem.vue\"\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (component.exports);\n\n//# sourceURL=webpack://connect-extension-xvs/./ui/src/components/GridItem.vue?");
+
+/***/ }),
+
+/***/ "./node_modules/vue-loader/lib/index.js??vue-loader-options!./ui/src/components/GridItem.vue?vue&type=script&lang=js&":
+/*!****************************************************************************************************************************!*\
+  !*** ./node_modules/vue-loader/lib/index.js??vue-loader-options!./ui/src/components/GridItem.vue?vue&type=script&lang=js& ***!
+  \****************************************************************************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({\n  props: {\n    label: {\n      type: String,\n      required: false,\n    },\n\n    value: {\n      type: [String, Number],\n      required: false,\n    },\n\n    locator: {\n      type: String,\n      required: false,\n      default: 'grid-item',\n    },\n\n    columnWidth: Number,\n    rowOffset: Number,\n\n    truncate: Boolean,\n    truncateLabel: Boolean,\n    truncateValue: Boolean,\n  },\n\n  methods: {\n    setFirstColumnWidth() {\n      this.$refs['item-row'].style.gridTemplateColumns = `var(--grid-item-first-col, ${this.columnWidth}px) 1fr`;\n    },\n\n    setFirstRowOffset() {\n      this.$refs['item-row'].style.marginTop = `var(--grid-item-row-offset, ${this.rowOffset}px)`;\n    },\n\n    addTruncateLabel() {\n      this.$refs['item-label'].classList.add('truncate-text');\n    },\n\n    addTruncateValue() {\n      this.$refs['item-value'].classList.add('truncate-text');\n    },\n  },\n\n  mounted() {\n    if (this.truncateLabel || this.truncate) {\n      this.addTruncateLabel();\n    }\n\n    if (this.truncateValue || this.truncate) {\n      this.addTruncateValue();\n    }\n\n    if (this.columnWidth) this.setFirstColumnWidth();\n    if (this.rowOffset) this.setFirstRowOffset();\n  },\n});\n\n\n//# sourceURL=webpack://connect-extension-xvs/./ui/src/components/GridItem.vue?./node_modules/vue-loader/lib/index.js??vue-loader-options");
+
+/***/ }),
+
+/***/ "./ui/src/pages/DeploymentDetails.vue":
+/*!********************************************!*\
+  !*** ./ui/src/pages/DeploymentDetails.vue ***!
+  \********************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _DeploymentDetails_vue_vue_type_template_id_2ceadcfa_lang_pug___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./DeploymentDetails.vue?vue&type=template&id=2ceadcfa&lang=pug& */ \"./ui/src/pages/DeploymentDetails.vue?vue&type=template&id=2ceadcfa&lang=pug&\");\n/* harmony import */ var _DeploymentDetails_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./DeploymentDetails.vue?vue&type=script&lang=js& */ \"./ui/src/pages/DeploymentDetails.vue?vue&type=script&lang=js&\");\n/* harmony import */ var _DeploymentDetails_vue_vue_type_style_index_0_id_2ceadcfa_lang_stylus___WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./DeploymentDetails.vue?vue&type=style&index=0&id=2ceadcfa&lang=stylus& */ \"./ui/src/pages/DeploymentDetails.vue?vue&type=style&index=0&id=2ceadcfa&lang=stylus&\");\n/* harmony import */ var _node_modules_vue_loader_lib_runtime_componentNormalizer_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! !../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js */ \"./node_modules/vue-loader/lib/runtime/componentNormalizer.js\");\n\n\n\n;\n\n\n/* normalize component */\n\nvar component = (0,_node_modules_vue_loader_lib_runtime_componentNormalizer_js__WEBPACK_IMPORTED_MODULE_3__[\"default\"])(\n  _DeploymentDetails_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_1__[\"default\"],\n  _DeploymentDetails_vue_vue_type_template_id_2ceadcfa_lang_pug___WEBPACK_IMPORTED_MODULE_0__.render,\n  _DeploymentDetails_vue_vue_type_template_id_2ceadcfa_lang_pug___WEBPACK_IMPORTED_MODULE_0__.staticRenderFns,\n  false,\n  null,\n  null,\n  null\n  \n)\n\n/* hot reload */\nif (false) { var api; }\ncomponent.options.__file = \"ui/src/pages/DeploymentDetails.vue\"\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (component.exports);\n\n//# sourceURL=webpack://connect-extension-xvs/./ui/src/pages/DeploymentDetails.vue?");
+
+/***/ }),
+
+/***/ "./node_modules/vue-loader/lib/index.js??vue-loader-options!./ui/src/pages/DeploymentDetails.vue?vue&type=script&lang=js&":
+/*!********************************************************************************************************************************!*\
+  !*** ./node_modules/vue-loader/lib/index.js??vue-loader-options!./ui/src/pages/DeploymentDetails.vue?vue&type=script&lang=js& ***!
+  \********************************************************************************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _cloudblueconnect_material_svg_baseline__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! @cloudblueconnect/material-svg/baseline */ \"./node_modules/@cloudblueconnect/material-svg/icons/google/sync/baseline.svg\");\n/* harmony import */ var _components_cButton_vue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ~components/cButton.vue */ \"./ui/src/components/cButton.vue\");\n/* harmony import */ var _components_cStatus_vue__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ~components/cStatus.vue */ \"./ui/src/components/cStatus.vue\");\n/* harmony import */ var _components_cTabs_vue__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ~components/cTabs.vue */ \"./ui/src/components/cTabs.vue\");\n/* harmony import */ var _components_cView_vue__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ~components/cView.vue */ \"./ui/src/components/cView.vue\");\n/* harmony import */ var _components_DetailItem_vue__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ~components/DetailItem.vue */ \"./ui/src/components/DetailItem.vue\");\n/* harmony import */ var _components_GridItem_vue__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ~components/GridItem.vue */ \"./ui/src/components/GridItem.vue\");\n/* harmony import */ var _components_Pic_vue__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ~components/Pic.vue */ \"./ui/src/components/Pic.vue\");\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! @/utils */ \"./ui/src/utils.js\");\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({\n  components: {\n    cButton: _components_cButton_vue__WEBPACK_IMPORTED_MODULE_0__[\"default\"],\n    cStatus: _components_cStatus_vue__WEBPACK_IMPORTED_MODULE_1__[\"default\"],\n    cTabs: _components_cTabs_vue__WEBPACK_IMPORTED_MODULE_2__[\"default\"],\n    cView: _components_cView_vue__WEBPACK_IMPORTED_MODULE_3__[\"default\"],\n    DetailItem: _components_DetailItem_vue__WEBPACK_IMPORTED_MODULE_4__[\"default\"],\n    GridItem: _components_GridItem_vue__WEBPACK_IMPORTED_MODULE_5__[\"default\"],\n    Pic: _components_Pic_vue__WEBPACK_IMPORTED_MODULE_6__[\"default\"],\n  },\n\n  data: () => ({\n    currentTab: null,\n    loading: true,\n    deployment: null,\n  }),\n\n  computed: {\n    icons: () => ({\n      googleSyncBaseline: _cloudblueconnect_material_svg_baseline__WEBPACK_IMPORTED_MODULE_8__[\"default\"],\n    }),\n\n    deploymentId: vm => vm.$route.params.id,\n\n    tabs: () => [\n      { label: 'Marketplaces', value: 'marketplaces' },\n      { label: 'PPR', value: 'ppr' },\n      { label: 'Configuration', value: 'configuration' },\n    ],\n  },\n\n  created() {\n    (0,_utils__WEBPACK_IMPORTED_MODULE_7__.getDeployment)(this.deploymentId).then(deployment => {\n      this.deployment = deployment;\n      this.loading = false;\n    });\n  },\n});\n\n\n//# sourceURL=webpack://connect-extension-xvs/./ui/src/pages/DeploymentDetails.vue?./node_modules/vue-loader/lib/index.js??vue-loader-options");
+
+/***/ }),
+
+/***/ "./ui/src/components/GridItem.vue?vue&type=style&index=0&id=292fb55a&lang=stylus&":
+/*!****************************************************************************************!*\
+  !*** ./ui/src/components/GridItem.vue?vue&type=style&index=0&id=292fb55a&lang=stylus& ***!
+  \****************************************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_node_modules_css_loader_dist_cjs_js_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_dist_cjs_js_node_modules_stylus_loader_dist_cjs_js_node_modules_vue_loader_lib_index_js_vue_loader_options_GridItem_vue_vue_type_style_index_0_id_292fb55a_lang_stylus___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!../../../node_modules/mini-css-extract-plugin/dist/loader.js!../../../node_modules/css-loader/dist/cjs.js!../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../node_modules/postcss-loader/dist/cjs.js!../../../node_modules/stylus-loader/dist/cjs.js!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./GridItem.vue?vue&type=style&index=0&id=292fb55a&lang=stylus& */ \"./node_modules/mini-css-extract-plugin/dist/loader.js!./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js!./node_modules/stylus-loader/dist/cjs.js!./node_modules/vue-loader/lib/index.js??vue-loader-options!./ui/src/components/GridItem.vue?vue&type=style&index=0&id=292fb55a&lang=stylus&\");\n\n\n//# sourceURL=webpack://connect-extension-xvs/./ui/src/components/GridItem.vue?");
+
+/***/ }),
+
+/***/ "./ui/src/pages/DeploymentDetails.vue?vue&type=style&index=0&id=2ceadcfa&lang=stylus&":
+/*!********************************************************************************************!*\
+  !*** ./ui/src/pages/DeploymentDetails.vue?vue&type=style&index=0&id=2ceadcfa&lang=stylus& ***!
+  \********************************************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_node_modules_css_loader_dist_cjs_js_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_dist_cjs_js_node_modules_stylus_loader_dist_cjs_js_node_modules_vue_loader_lib_index_js_vue_loader_options_DeploymentDetails_vue_vue_type_style_index_0_id_2ceadcfa_lang_stylus___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!../../../node_modules/mini-css-extract-plugin/dist/loader.js!../../../node_modules/css-loader/dist/cjs.js!../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../node_modules/postcss-loader/dist/cjs.js!../../../node_modules/stylus-loader/dist/cjs.js!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./DeploymentDetails.vue?vue&type=style&index=0&id=2ceadcfa&lang=stylus& */ \"./node_modules/mini-css-extract-plugin/dist/loader.js!./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js!./node_modules/stylus-loader/dist/cjs.js!./node_modules/vue-loader/lib/index.js??vue-loader-options!./ui/src/pages/DeploymentDetails.vue?vue&type=style&index=0&id=2ceadcfa&lang=stylus&\");\n\n\n//# sourceURL=webpack://connect-extension-xvs/./ui/src/pages/DeploymentDetails.vue?");
+
+/***/ }),
+
+/***/ "./ui/src/components/GridItem.vue?vue&type=script&lang=js&":
+/*!*****************************************************************!*\
+  !*** ./ui/src/components/GridItem.vue?vue&type=script&lang=js& ***!
+  \*****************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _node_modules_vue_loader_lib_index_js_vue_loader_options_GridItem_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./GridItem.vue?vue&type=script&lang=js& */ \"./node_modules/vue-loader/lib/index.js??vue-loader-options!./ui/src/components/GridItem.vue?vue&type=script&lang=js&\");\n /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (_node_modules_vue_loader_lib_index_js_vue_loader_options_GridItem_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_0__[\"default\"]); \n\n//# sourceURL=webpack://connect-extension-xvs/./ui/src/components/GridItem.vue?");
+
+/***/ }),
+
+/***/ "./ui/src/pages/DeploymentDetails.vue?vue&type=script&lang=js&":
+/*!*********************************************************************!*\
+  !*** ./ui/src/pages/DeploymentDetails.vue?vue&type=script&lang=js& ***!
+  \*********************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _node_modules_vue_loader_lib_index_js_vue_loader_options_DeploymentDetails_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./DeploymentDetails.vue?vue&type=script&lang=js& */ \"./node_modules/vue-loader/lib/index.js??vue-loader-options!./ui/src/pages/DeploymentDetails.vue?vue&type=script&lang=js&\");\n /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (_node_modules_vue_loader_lib_index_js_vue_loader_options_DeploymentDetails_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_0__[\"default\"]); \n\n//# sourceURL=webpack://connect-extension-xvs/./ui/src/pages/DeploymentDetails.vue?");
+
+/***/ }),
+
+/***/ "./ui/src/components/GridItem.vue?vue&type=template&id=292fb55a&lang=pug&":
+/*!********************************************************************************!*\
+  !*** ./ui/src/components/GridItem.vue?vue&type=template&id=292fb55a&lang=pug& ***!
+  \********************************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   render: () => (/* reexport safe */ _node_modules_vue_loader_lib_loaders_templateLoader_js_ruleSet_1_rules_1_node_modules_pug_plain_loader_index_js_node_modules_vue_loader_lib_index_js_vue_loader_options_GridItem_vue_vue_type_template_id_292fb55a_lang_pug___WEBPACK_IMPORTED_MODULE_0__.render),\n/* harmony export */   staticRenderFns: () => (/* reexport safe */ _node_modules_vue_loader_lib_loaders_templateLoader_js_ruleSet_1_rules_1_node_modules_pug_plain_loader_index_js_node_modules_vue_loader_lib_index_js_vue_loader_options_GridItem_vue_vue_type_template_id_292fb55a_lang_pug___WEBPACK_IMPORTED_MODULE_0__.staticRenderFns)\n/* harmony export */ });\n/* harmony import */ var _node_modules_vue_loader_lib_loaders_templateLoader_js_ruleSet_1_rules_1_node_modules_pug_plain_loader_index_js_node_modules_vue_loader_lib_index_js_vue_loader_options_GridItem_vue_vue_type_template_id_292fb55a_lang_pug___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!../../../node_modules/vue-loader/lib/loaders/templateLoader.js??ruleSet[1].rules[1]!../../../node_modules/pug-plain-loader/index.js!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./GridItem.vue?vue&type=template&id=292fb55a&lang=pug& */ \"./node_modules/vue-loader/lib/loaders/templateLoader.js??ruleSet[1].rules[1]!./node_modules/pug-plain-loader/index.js!./node_modules/vue-loader/lib/index.js??vue-loader-options!./ui/src/components/GridItem.vue?vue&type=template&id=292fb55a&lang=pug&\");\n\n\n//# sourceURL=webpack://connect-extension-xvs/./ui/src/components/GridItem.vue?");
+
+/***/ }),
+
+/***/ "./ui/src/pages/DeploymentDetails.vue?vue&type=template&id=2ceadcfa&lang=pug&":
+/*!************************************************************************************!*\
+  !*** ./ui/src/pages/DeploymentDetails.vue?vue&type=template&id=2ceadcfa&lang=pug& ***!
+  \************************************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   render: () => (/* reexport safe */ _node_modules_vue_loader_lib_loaders_templateLoader_js_ruleSet_1_rules_1_node_modules_pug_plain_loader_index_js_node_modules_vue_loader_lib_index_js_vue_loader_options_DeploymentDetails_vue_vue_type_template_id_2ceadcfa_lang_pug___WEBPACK_IMPORTED_MODULE_0__.render),\n/* harmony export */   staticRenderFns: () => (/* reexport safe */ _node_modules_vue_loader_lib_loaders_templateLoader_js_ruleSet_1_rules_1_node_modules_pug_plain_loader_index_js_node_modules_vue_loader_lib_index_js_vue_loader_options_DeploymentDetails_vue_vue_type_template_id_2ceadcfa_lang_pug___WEBPACK_IMPORTED_MODULE_0__.staticRenderFns)\n/* harmony export */ });\n/* harmony import */ var _node_modules_vue_loader_lib_loaders_templateLoader_js_ruleSet_1_rules_1_node_modules_pug_plain_loader_index_js_node_modules_vue_loader_lib_index_js_vue_loader_options_DeploymentDetails_vue_vue_type_template_id_2ceadcfa_lang_pug___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!../../../node_modules/vue-loader/lib/loaders/templateLoader.js??ruleSet[1].rules[1]!../../../node_modules/pug-plain-loader/index.js!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./DeploymentDetails.vue?vue&type=template&id=2ceadcfa&lang=pug& */ \"./node_modules/vue-loader/lib/loaders/templateLoader.js??ruleSet[1].rules[1]!./node_modules/pug-plain-loader/index.js!./node_modules/vue-loader/lib/index.js??vue-loader-options!./ui/src/pages/DeploymentDetails.vue?vue&type=template&id=2ceadcfa&lang=pug&\");\n\n\n//# sourceURL=webpack://connect-extension-xvs/./ui/src/pages/DeploymentDetails.vue?");
+
+/***/ }),
+
+/***/ "./node_modules/vue-loader/lib/loaders/templateLoader.js??ruleSet[1].rules[1]!./node_modules/pug-plain-loader/index.js!./node_modules/vue-loader/lib/index.js??vue-loader-options!./ui/src/components/GridItem.vue?vue&type=template&id=292fb55a&lang=pug&":
+/*!*****************************************************************************************************************************************************************************************************************************************************************!*\
+  !*** ./node_modules/vue-loader/lib/loaders/templateLoader.js??ruleSet[1].rules[1]!./node_modules/pug-plain-loader/index.js!./node_modules/vue-loader/lib/index.js??vue-loader-options!./ui/src/components/GridItem.vue?vue&type=template&id=292fb55a&lang=pug& ***!
+  \*****************************************************************************************************************************************************************************************************************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   render: () => (/* binding */ render),\n/* harmony export */   staticRenderFns: () => (/* binding */ staticRenderFns)\n/* harmony export */ });\nvar render = function render() {\n  var _vm = this,\n    _c = _vm._self._c\n  return _c(\"div\", { ref: \"item-row\", staticClass: \"item-row\" }, [\n    _c(\n      \"div\",\n      { ref: \"item-label\", staticClass: \"item-label\" },\n      [\n        !_vm.$slots.label ? _c(\"span\", [_vm._v(_vm._s(_vm.label))]) : _vm._e(),\n        _vm._t(\"label\"),\n      ],\n      2\n    ),\n    _c(\n      \"div\",\n      {\n        ref: \"item-value\",\n        staticClass: \"item-value\",\n        attrs: { locator: _vm.locator },\n      },\n      [\n        !_vm.$slots.value\n          ? _c(\"span\", [\n              _vm.value\n                ? _c(\"span\", [_vm._v(_vm._s(_vm.value))])\n                : _c(\"span\", { staticClass: \"text--disabled\" }, [_vm._v(\"—\")]),\n            ])\n          : _vm._e(),\n        _vm._t(\"value\"),\n      ],\n      2\n    ),\n  ])\n}\nvar staticRenderFns = []\nrender._withStripped = true\n\n\n\n//# sourceURL=webpack://connect-extension-xvs/./ui/src/components/GridItem.vue?./node_modules/vue-loader/lib/loaders/templateLoader.js??ruleSet%5B1%5D.rules%5B1%5D!./node_modules/pug-plain-loader/index.js!./node_modules/vue-loader/lib/index.js??vue-loader-options");
+
+/***/ }),
+
+/***/ "./node_modules/vue-loader/lib/loaders/templateLoader.js??ruleSet[1].rules[1]!./node_modules/pug-plain-loader/index.js!./node_modules/vue-loader/lib/index.js??vue-loader-options!./ui/src/pages/DeploymentDetails.vue?vue&type=template&id=2ceadcfa&lang=pug&":
+/*!*********************************************************************************************************************************************************************************************************************************************************************!*\
+  !*** ./node_modules/vue-loader/lib/loaders/templateLoader.js??ruleSet[1].rules[1]!./node_modules/pug-plain-loader/index.js!./node_modules/vue-loader/lib/index.js??vue-loader-options!./ui/src/pages/DeploymentDetails.vue?vue&type=template&id=2ceadcfa&lang=pug& ***!
+  \*********************************************************************************************************************************************************************************************************************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   render: () => (/* binding */ render),\n/* harmony export */   staticRenderFns: () => (/* binding */ staticRenderFns)\n/* harmony export */ });\nvar render = function render() {\n  var _vm = this,\n    _c = _vm._self._c\n  return _c(\n    \"c-view\",\n    {\n      staticClass: \"deployment-details\",\n      attrs: {\n        title: _vm.deploymentId,\n        \"assistive-title\": \"Deployment Details\",\n        \"back-route\": { name: \"Dashboard\", params: { tab: \"deployments\" } },\n        \"current-tab\": _vm.currentTab,\n        loading: _vm.loading,\n      },\n      on: {\n        \"update:currentTab\": function ($event) {\n          _vm.currentTab = $event\n        },\n        \"update:current-tab\": function ($event) {\n          _vm.currentTab = $event\n        },\n      },\n      scopedSlots: _vm._u([\n        {\n          key: \"actions\",\n          fn: function () {\n            return [\n              _c(\"c-button\", {\n                attrs: {\n                  icon: _vm.icons.googleSyncBaseline,\n                  label: \"sync\",\n                  color: \"accent\",\n                  mode: \"solid\",\n                },\n              }),\n            ]\n          },\n          proxy: true,\n        },\n      ]),\n    },\n    [\n      _c(\"div\", { staticClass: \"info-container\" }, [\n        _c(\n          \"div\",\n          { staticClass: \"info-column\" },\n          [\n            _c(\"grid-item\", {\n              attrs: { label: \"Status\" },\n              scopedSlots: _vm._u([\n                {\n                  key: \"value\",\n                  fn: function () {\n                    return [\n                      _c(\"c-status\", {\n                        attrs: { status: _vm.deployment.status },\n                      }),\n                    ]\n                  },\n                  proxy: true,\n                },\n              ]),\n            }),\n            _c(\"grid-item\", {\n              attrs: { label: \"Product\" },\n              scopedSlots: _vm._u([\n                {\n                  key: \"value\",\n                  fn: function () {\n                    return [\n                      _c(\"detail-item\", {\n                        attrs: {\n                          \"body-text\": _vm.deployment.product.name,\n                          dense: \"\",\n                        },\n                        scopedSlots: _vm._u([\n                          {\n                            key: \"image\",\n                            fn: function () {\n                              return [\n                                _c(\"pic\", {\n                                  attrs: {\n                                    src: _vm.deployment.product.icon,\n                                    width: 16,\n                                    height: 16,\n                                  },\n                                }),\n                              ]\n                            },\n                            proxy: true,\n                          },\n                        ]),\n                      }),\n                    ]\n                  },\n                  proxy: true,\n                },\n              ]),\n            }),\n            _c(\"grid-item\", {\n              attrs: { label: \"Vendor\" },\n              scopedSlots: _vm._u([\n                {\n                  key: \"value\",\n                  fn: function () {\n                    return [\n                      _c(\"detail-item\", {\n                        attrs: {\n                          \"body-text\": _vm.deployment.owner.name,\n                          dense: \"\",\n                        },\n                        scopedSlots: _vm._u([\n                          {\n                            key: \"image\",\n                            fn: function () {\n                              return [\n                                _c(\"pic\", {\n                                  attrs: {\n                                    src: _vm.deployment.owner.icon,\n                                    width: 16,\n                                    height: 16,\n                                  },\n                                }),\n                              ]\n                            },\n                            proxy: true,\n                          },\n                        ]),\n                      }),\n                    ]\n                  },\n                  proxy: true,\n                },\n              ]),\n            }),\n          ],\n          1\n        ),\n        _c(\n          \"div\",\n          { staticClass: \"info-column\" },\n          [\n            _c(\"grid-item\", {\n              attrs: { \"column-width\": 78, label: \"Hub\" },\n              scopedSlots: _vm._u([\n                {\n                  key: \"value\",\n                  fn: function () {\n                    return [\n                      _c(\"span\", [_vm._v(_vm._s(_vm.deployment.hub.name))]),\n                    ]\n                  },\n                  proxy: true,\n                },\n              ]),\n            }),\n            _c(\"grid-item\", {\n              attrs: { \"column-width\": 78, label: \"Last Sync\" },\n              scopedSlots: _vm._u([\n                {\n                  key: \"value\",\n                  fn: function () {\n                    return [\n                      _c(\"span\", [\n                        _vm._v(\n                          _vm._s(\n                            _vm._f(\"utcToLocal\")(_vm.deployment.last_sync_at)\n                          )\n                        ),\n                      ]),\n                    ]\n                  },\n                  proxy: true,\n                },\n              ]),\n            }),\n          ],\n          1\n        ),\n      ]),\n      _c(\"c-tabs\", {\n        attrs: { \"current-tab\": _vm.currentTab, tabs: _vm.tabs },\n        on: {\n          \"update:currentTab\": function ($event) {\n            _vm.currentTab = $event\n          },\n          \"update:current-tab\": function ($event) {\n            _vm.currentTab = $event\n          },\n        },\n        scopedSlots: _vm._u([\n          {\n            key: \"marketplaces\",\n            fn: function () {\n              return [\n                _c(\"div\", { staticClass: \"marketplaces-tab\" }, [\n                  _vm._v(\"Marketplaces\"),\n                ]),\n              ]\n            },\n            proxy: true,\n          },\n          {\n            key: \"ppr\",\n            fn: function () {\n              return [_c(\"div\", { staticClass: \"ppr-tab\" }, [_vm._v(\"PPR\")])]\n            },\n            proxy: true,\n          },\n          {\n            key: \"configuration\",\n            fn: function () {\n              return [\n                _c(\"div\", { staticClass: \"configuration-tab\" }, [\n                  _vm._v(\"Configuration\"),\n                ]),\n              ]\n            },\n            proxy: true,\n          },\n        ]),\n      }),\n    ],\n    1\n  )\n}\nvar staticRenderFns = []\nrender._withStripped = true\n\n\n\n//# sourceURL=webpack://connect-extension-xvs/./ui/src/pages/DeploymentDetails.vue?./node_modules/vue-loader/lib/loaders/templateLoader.js??ruleSet%5B1%5D.rules%5B1%5D!./node_modules/pug-plain-loader/index.js!./node_modules/vue-loader/lib/index.js??vue-loader-options");
+
+/***/ })
+
+}]);
\ No newline at end of file
diff --git a/connect_ext_ppr/static/deployment-details.c49c14732d8dd3ed74a7.js b/connect_ext_ppr/static/deployment-details.c49c14732d8dd3ed74a7.js
deleted file mode 100644
index a0ecf51..0000000
--- a/connect_ext_ppr/static/deployment-details.c49c14732d8dd3ed74a7.js
+++ /dev/null
@@ -1,62 +0,0 @@
-"use strict";
-/*
- * ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development").
- * This devtool is neither made for production nor for readable output files.
- * It uses "eval()" calls to create a separate source file in the browser devtools.
- * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
- * or disable the default devtool with "devtool: false".
- * If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
- */
-(self["webpackChunkconnect_extension_xvs"] = self["webpackChunkconnect_extension_xvs"] || []).push([["deployment-details"],{
-
-/***/ "./ui/src/pages/DeploymentDetails.vue":
-/*!********************************************!*\
-  !*** ./ui/src/pages/DeploymentDetails.vue ***!
-  \********************************************/
-/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
-
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _DeploymentDetails_vue_vue_type_template_id_2ceadcfa_lang_pug___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./DeploymentDetails.vue?vue&type=template&id=2ceadcfa&lang=pug& */ \"./ui/src/pages/DeploymentDetails.vue?vue&type=template&id=2ceadcfa&lang=pug&\");\n/* harmony import */ var _DeploymentDetails_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./DeploymentDetails.vue?vue&type=script&lang=js& */ \"./ui/src/pages/DeploymentDetails.vue?vue&type=script&lang=js&\");\n/* harmony import */ var _node_modules_vue_loader_lib_runtime_componentNormalizer_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! !../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js */ \"./node_modules/vue-loader/lib/runtime/componentNormalizer.js\");\n\n\n\n\n\n/* normalize component */\n;\nvar component = (0,_node_modules_vue_loader_lib_runtime_componentNormalizer_js__WEBPACK_IMPORTED_MODULE_2__[\"default\"])(\n  _DeploymentDetails_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_1__[\"default\"],\n  _DeploymentDetails_vue_vue_type_template_id_2ceadcfa_lang_pug___WEBPACK_IMPORTED_MODULE_0__.render,\n  _DeploymentDetails_vue_vue_type_template_id_2ceadcfa_lang_pug___WEBPACK_IMPORTED_MODULE_0__.staticRenderFns,\n  false,\n  null,\n  null,\n  null\n  \n)\n\n/* hot reload */\nif (false) { var api; }\ncomponent.options.__file = \"ui/src/pages/DeploymentDetails.vue\"\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (component.exports);\n\n//# sourceURL=webpack://connect-extension-xvs/./ui/src/pages/DeploymentDetails.vue?");
-
-/***/ }),
-
-/***/ "./node_modules/vue-loader/lib/index.js??vue-loader-options!./ui/src/pages/DeploymentDetails.vue?vue&type=script&lang=js&":
-/*!********************************************************************************************************************************!*\
-  !*** ./node_modules/vue-loader/lib/index.js??vue-loader-options!./ui/src/pages/DeploymentDetails.vue?vue&type=script&lang=js& ***!
-  \********************************************************************************************************************************/
-/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
-
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({\n});\n\n\n//# sourceURL=webpack://connect-extension-xvs/./ui/src/pages/DeploymentDetails.vue?./node_modules/vue-loader/lib/index.js??vue-loader-options");
-
-/***/ }),
-
-/***/ "./ui/src/pages/DeploymentDetails.vue?vue&type=script&lang=js&":
-/*!*********************************************************************!*\
-  !*** ./ui/src/pages/DeploymentDetails.vue?vue&type=script&lang=js& ***!
-  \*********************************************************************/
-/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
-
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _node_modules_vue_loader_lib_index_js_vue_loader_options_DeploymentDetails_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./DeploymentDetails.vue?vue&type=script&lang=js& */ \"./node_modules/vue-loader/lib/index.js??vue-loader-options!./ui/src/pages/DeploymentDetails.vue?vue&type=script&lang=js&\");\n /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (_node_modules_vue_loader_lib_index_js_vue_loader_options_DeploymentDetails_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_0__[\"default\"]); \n\n//# sourceURL=webpack://connect-extension-xvs/./ui/src/pages/DeploymentDetails.vue?");
-
-/***/ }),
-
-/***/ "./ui/src/pages/DeploymentDetails.vue?vue&type=template&id=2ceadcfa&lang=pug&":
-/*!************************************************************************************!*\
-  !*** ./ui/src/pages/DeploymentDetails.vue?vue&type=template&id=2ceadcfa&lang=pug& ***!
-  \************************************************************************************/
-/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
-
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   render: () => (/* reexport safe */ _node_modules_vue_loader_lib_loaders_templateLoader_js_ruleSet_1_rules_1_node_modules_pug_plain_loader_index_js_node_modules_vue_loader_lib_index_js_vue_loader_options_DeploymentDetails_vue_vue_type_template_id_2ceadcfa_lang_pug___WEBPACK_IMPORTED_MODULE_0__.render),\n/* harmony export */   staticRenderFns: () => (/* reexport safe */ _node_modules_vue_loader_lib_loaders_templateLoader_js_ruleSet_1_rules_1_node_modules_pug_plain_loader_index_js_node_modules_vue_loader_lib_index_js_vue_loader_options_DeploymentDetails_vue_vue_type_template_id_2ceadcfa_lang_pug___WEBPACK_IMPORTED_MODULE_0__.staticRenderFns)\n/* harmony export */ });\n/* harmony import */ var _node_modules_vue_loader_lib_loaders_templateLoader_js_ruleSet_1_rules_1_node_modules_pug_plain_loader_index_js_node_modules_vue_loader_lib_index_js_vue_loader_options_DeploymentDetails_vue_vue_type_template_id_2ceadcfa_lang_pug___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!../../../node_modules/vue-loader/lib/loaders/templateLoader.js??ruleSet[1].rules[1]!../../../node_modules/pug-plain-loader/index.js!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./DeploymentDetails.vue?vue&type=template&id=2ceadcfa&lang=pug& */ \"./node_modules/vue-loader/lib/loaders/templateLoader.js??ruleSet[1].rules[1]!./node_modules/pug-plain-loader/index.js!./node_modules/vue-loader/lib/index.js??vue-loader-options!./ui/src/pages/DeploymentDetails.vue?vue&type=template&id=2ceadcfa&lang=pug&\");\n\n\n//# sourceURL=webpack://connect-extension-xvs/./ui/src/pages/DeploymentDetails.vue?");
-
-/***/ }),
-
-/***/ "./node_modules/vue-loader/lib/loaders/templateLoader.js??ruleSet[1].rules[1]!./node_modules/pug-plain-loader/index.js!./node_modules/vue-loader/lib/index.js??vue-loader-options!./ui/src/pages/DeploymentDetails.vue?vue&type=template&id=2ceadcfa&lang=pug&":
-/*!*********************************************************************************************************************************************************************************************************************************************************************!*\
-  !*** ./node_modules/vue-loader/lib/loaders/templateLoader.js??ruleSet[1].rules[1]!./node_modules/pug-plain-loader/index.js!./node_modules/vue-loader/lib/index.js??vue-loader-options!./ui/src/pages/DeploymentDetails.vue?vue&type=template&id=2ceadcfa&lang=pug& ***!
-  \*********************************************************************************************************************************************************************************************************************************************************************/
-/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
-
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   render: () => (/* binding */ render),\n/* harmony export */   staticRenderFns: () => (/* binding */ staticRenderFns)\n/* harmony export */ });\nvar render = function render() {\n  var _vm = this,\n    _c = _vm._self._c\n  return _c(\n    \"div\",\n    { staticClass: \"deployment-details\" },\n    [\n      _c(\"div\", { staticClass: \"title\" }, [_vm._v(\"Deployment Details\")]),\n      _c(\n        \"ui-tabs\",\n        [\n          _c(\"ui-tab\", { attrs: { default: \"\", tab: \"Foo\" } }, [_vm._v(\"Foo\")]),\n          _c(\"ui-tab\", { attrs: { tab: \"Bar\" } }, [_vm._v(\"Bar\")]),\n          _c(\"ui-tab\", { attrs: { tab: \"Baz\" } }, [_vm._v(\"Baz\")]),\n          _c(\"ui-pad\", { attrs: { pad: \"Foo\" } }, [\n            _c(\"div\", { staticClass: \"foo-tab\" }, [_vm._v(\"Foo\")]),\n          ]),\n          _c(\"ui-pad\", { attrs: { pad: \"Bar\" } }, [\n            _c(\"div\", { staticClass: \"bar-tab\" }, [_vm._v(\"Bar\")]),\n          ]),\n          _c(\"ui-pad\", { attrs: { pad: \"Baz\" } }, [\n            _c(\"div\", { staticClass: \"baz-tab\" }, [_vm._v(\"Baz\")]),\n          ]),\n        ],\n        1\n      ),\n    ],\n    1\n  )\n}\nvar staticRenderFns = []\nrender._withStripped = true\n\n\n\n//# sourceURL=webpack://connect-extension-xvs/./ui/src/pages/DeploymentDetails.vue?./node_modules/vue-loader/lib/loaders/templateLoader.js??ruleSet%5B1%5D.rules%5B1%5D!./node_modules/pug-plain-loader/index.js!./node_modules/vue-loader/lib/index.js??vue-loader-options");
-
-/***/ })
-
-}]);
\ No newline at end of file
diff --git a/connect_ext_ppr/static/deployment-details.css b/connect_ext_ppr/static/deployment-details.css
new file mode 100644
index 0000000..525d1da
--- /dev/null
+++ b/connect_ext_ppr/static/deployment-details.css
@@ -0,0 +1,29 @@
+/*!*****************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
+  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js!./node_modules/stylus-loader/dist/cjs.js!./node_modules/vue-loader/lib/index.js??vue-loader-options!./ui/src/components/GridItem.vue?vue&type=style&index=0&id=292fb55a&lang=stylus& ***!
+  \*****************************************************************************************************************************************************************************************************************************************************************************************************************************************/
+.item-row {
+  display: grid;
+  grid-template-columns: var(--grid-item-first-col, 60px) 1fr;
+  grid-column-gap: 16px;
+  align-items: start;
+}
+.item-row + .item-row {
+  margin-top: var(--grid-item-row-offset, 12px);
+}
+.item-label {
+  font-weight: 500;
+  font-size: 14px;
+  line-height: 20px;
+  color: #212121;
+}
+
+/*!*********************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
+  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js!./node_modules/stylus-loader/dist/cjs.js!./node_modules/vue-loader/lib/index.js??vue-loader-options!./ui/src/pages/DeploymentDetails.vue?vue&type=style&index=0&id=2ceadcfa&lang=stylus& ***!
+  \*********************************************************************************************************************************************************************************************************************************************************************************************************************************************/
+.deployment-details .info-container {
+  display: grid;
+  grid-template-columns: minmax(auto, 376px) minmax(auto, 376px) minmax(auto, 376px);
+  grid-column-gap: 48px;
+  margin-bottom: 32px;
+}
+
diff --git a/connect_ext_ppr/static/index.93a91c4cd8a19a7bbaad.css b/connect_ext_ppr/static/index.0d3dd9a3b3207aeb0dae.css
similarity index 92%
rename from connect_ext_ppr/static/index.93a91c4cd8a19a7bbaad.css
rename to connect_ext_ppr/static/index.0d3dd9a3b3207aeb0dae.css
index 588dcc7..386fd82 100644
--- a/connect_ext_ppr/static/index.93a91c4cd8a19a7bbaad.css
+++ b/connect_ext_ppr/static/index.0d3dd9a3b3207aeb0dae.css
@@ -21,6 +21,238 @@ button .c-icon {
   color: inherit;
 }
 
+/*!************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
+  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js!./node_modules/stylus-loader/dist/cjs.js!./node_modules/vue-loader/lib/index.js??vue-loader-options!./ui/src/components/Pic.vue?vue&type=style&index=0&id=7ef515b9&lang=stylus&scoped=true& ***!
+  \************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
+.image[data-v-7ef515b9] {
+  overflow: hidden;
+  box-sizing: content-box;
+  position: relative;
+}
+.image__itself[data-v-7ef515b9] {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-repeat: no-repeat;
+  background-position: center;
+}
+.image__placeholder[data-v-7ef515b9] {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+.loader[data-v-7ef515b9] {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+}
+
+/*!**************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
+  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js!./node_modules/stylus-loader/dist/cjs.js!./node_modules/vue-loader/lib/index.js??vue-loader-options!./ui/src/components/cTabs.vue?vue&type=style&index=0&id=00476590&lang=stylus& ***!
+  \**************************************************************************************************************************************************************************************************************************************************************************************************************************************/
+.c-tabs__controls {
+  display: flex;
+  border-bottom: 1px solid #e0e0e0;
+}
+.c-tabs__controls_border_none {
+  border-bottom: none;
+}
+.c-tabs__content {
+  margin-top: 32px;
+}
+.c-tabs__control-tooltip {
+  position: relative;
+  display: flex;
+  align-items: center;
+  margin-left: 24px;
+  line-height: 48px;
+  white-space: nowrap;
+  cursor: pointer;
+  color: #212121;
+}
+.c-tabs__control-tooltip:first-child {
+  margin-left: 0;
+}
+a.c-tabs__control-tooltip {
+  text-decoration: none;
+}
+a.c-tabs__control-tooltip:hover {
+  color: var(--theme_accent);
+}
+.c-tabs__control-item {
+  font-weight: 500;
+  text-decoration: none;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  display: flex;
+  align-items: center;
+}
+.c-tabs__control-item:after {
+  content: '';
+  height: 3px;
+  position: absolute;
+  right: 0;
+  bottom: -1px;
+  left: 0;
+  transform-origin: bottom;
+  transform: scaleY(0);
+  transition: transform 385ms cubic-bezier(0.4, 0, 0.2, 1);
+  background-color: var(--theme_accent);
+}
+.c-tabs__control-item_active {
+  color: var(--theme_accent);
+}
+.c-tabs__control-item_active:after {
+  transform: scaleX(1);
+}
+.c-tabs__control-item_disabled {
+  color: #bdbdbd !important;
+  cursor: default !important;
+}
+.c-tabs__control-item_height_full {
+  height: 100%;
+}
+.c-tabs__control-item .pic {
+  border-radius: 2px;
+}
+
+/*!****************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
+  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js!./node_modules/stylus-loader/dist/cjs.js!./node_modules/vue-loader/lib/index.js??vue-loader-options!./ui/src/components/cNavBar.vue?vue&type=style&index=0&id=b2fed2fc&lang=stylus& ***!
+  \****************************************************************************************************************************************************************************************************************************************************************************************************************************************/
+.navigation-bar {
+  box-sizing: content-box;
+  display: flex;
+  align-items: center;
+  flex: 0 0 auto;
+  height: 64px;
+  padding-left: 24px;
+  padding-right: 24px;
+  border-bottom: 1px solid #e0e0e0;
+  background: #f5f5f5;
+}
+.navigation-bar__page-title {
+  font-weight: 500;
+  font-size: 20px;
+  line-height: 24px;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+.navigation-bar__page-assistive-title {
+  color: #707070;
+}
+.navigation-bar__back-button + .navigation-bar__page-title-holder,
+.navigation-bar__back-button + .navigation-bar__page-title {
+  margin-left: 32px;
+}
+.navigation-bar__back-button {
+  margin: 0 -6px;
+  color: #666;
+  padding: 4px;
+}
+.navigation-bar__back-button:hover {
+  background: #e0e0e0;
+}
+.navigation-bar__tabs,
+.navigation-bar__content,
+.navigation-bar__actions {
+  padding-left: 48px;
+}
+.navigation-bar__tabs,
+.navigation-bar__content {
+  display: flex;
+  align-self: stretch;
+}
+.navigation-bar__tabs {
+  flex: 0 0 auto;
+}
+.navigation-bar__content {
+  flex: 1 1 auto;
+}
+.navigation-bar__actions {
+  margin-left: auto;
+  display: flex;
+  align-items: center;
+  flex: 0 0 auto;
+}
+.page-title {
+  display: flex;
+  align-items: center;
+}
+.page-title__link {
+  display: flex;
+  align-items: center;
+  text-decoration: none;
+  color: #000;
+  cursor: pointer;
+}
+.actions-holder .actions-slot {
+  display: flex;
+  align-items: center;
+}
+.actions-holder .actions-slot > div {
+  padding-left: 16px;
+}
+.actions-holder__button {
+  margin: 0;
+  min-width: 0;
+}
+.actions-menu__divider {
+  margin-top: 7px;
+  margin-bottom: 8px;
+}
+._mb_2 {
+  margin-bottom: 2px;
+}
+
+/*!**************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
+  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js!./node_modules/stylus-loader/dist/cjs.js!./node_modules/vue-loader/lib/index.js??vue-loader-options!./ui/src/components/cView.vue?vue&type=style&index=0&id=7c928137&lang=stylus& ***!
+  \**************************************************************************************************************************************************************************************************************************************************************************************************************************************/
+.c-view {
+  position: relative;
+  flex: 1 1 100%;
+  display: grid;
+  grid-template-rows: auto auto;
+  grid-template-columns: 1fr;
+  grid-template-areas: "n" "c";
+  overflow: auto;
+}
+.c-view__progress-wrapper {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  display: flex;
+}
+.c-view__navigation {
+  grid-area: n;
+}
+.c-view__content-holder {
+  position: relative;
+  grid-area: c;
+}
+.c-view__content {
+  position: relative;
+  min-height: 100%;
+  box-sizing: border-box;
+  padding-bottom: 64px;
+}
+.c-view__content_padded {
+  padding: 24px 24px 40px;
+}
+.c-view__content:empty,
+.c-view__navigation:empty {
+  display: none;
+}
+
 /*!**************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
   !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js!./node_modules/stylus-loader/dist/cjs.js!./node_modules/vue-loader/lib/index.js??vue-loader-options!./ui/src/components/cMenu.vue?vue&type=style&index=0&id=114e6ef1&lang=stylus& ***!
   \**************************************************************************************************************************************************************************************************************************************************************************************************************************************/
@@ -87,40 +319,6 @@ button .c-icon {
   position: relative;
 }
 
-/*!************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
-  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js!./node_modules/stylus-loader/dist/cjs.js!./node_modules/vue-loader/lib/index.js??vue-loader-options!./ui/src/components/Pic.vue?vue&type=style&index=0&id=7ef515b9&lang=stylus&scoped=true& ***!
-  \************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
-.image[data-v-7ef515b9] {
-  overflow: hidden;
-  box-sizing: content-box;
-  position: relative;
-}
-.image__itself[data-v-7ef515b9] {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-repeat: no-repeat;
-  background-position: center;
-}
-.image__placeholder[data-v-7ef515b9] {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-}
-.loader[data-v-7ef515b9] {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 100%;
-}
-
 /*!****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
   !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js!./node_modules/stylus-loader/dist/cjs.js!./node_modules/vue-loader/lib/index.js??vue-loader-options!./ui/src/components/cTable/cTableHeader.vue?vue&type=style&index=0&id=6bcab16a&lang=stylus&scoped=true& ***!
   \****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
@@ -3264,326 +3462,16 @@ select[materialize]:disabled {
 Copyright (c) 2023, Ingram Micro
 All rights reserved.
 */
-body {
-    font-family: "Roboto", sans-serif;
-}
-
-.hidden {
-    display: none !important;
-}
-
-#loader {
-    width: 48px;
-    height: 48px;
-    border: 5px solid white;
-    border-bottom-color: #1565c0;
-    border-radius: 50%;
-    display: block;
-    margin: 0 auto;
-    box-sizing: border-box;
-    animation: rotation 1s linear infinite;
-    }
-
-    @keyframes rotation {
-    0% {
-        transform: rotate(0deg);
-    }
-    100% {
-        transform: rotate(360deg);
-    }
-}
-
-
-h1 {
-    font-weight: 500;
-    font-size: 20px;
-}
-
-
-.switch {
-    z-index: 0;
-    position: relative;
-    display: inline-block;
-    color: rgba(var(--pure-material-onsurface-rgb, 0, 0, 0), 0.87);
-    font-family: var(--pure-material-font, "Roboto", "Segoe UI", BlinkMacSystemFont, system-ui, -apple-system);
-    font-size: 16px;
-    line-height: 1.5;
-}
-
-/* Input */
-.switch>input {
-    appearance: none;
-    -moz-appearance: none;
-    -webkit-appearance: none;
-    z-index: -1;
-    position: absolute;
-    right: 6px;
-    top: -8px;
-    display: block;
-    margin: 0;
-    border-radius: 50%;
-    width: 40px;
-    height: 40px;
-    background-color: rgba(var(--pure-material-onsurface-rgb, 0, 0, 0), 0.38);
-    outline: none;
-    opacity: 0;
-    transform: scale(1);
-    pointer-events: none;
-    transition: opacity 0.3s 0.1s, transform 0.2s 0.1s;
-}
-
-/* Span */
-.switch>span {
-    display: inline-block;
-    width: 100%;
-    cursor: pointer;
-}
-
-/* Track */
-.switch>span::before {
-    content: "";
-    float: right;
-    display: inline-block;
-    margin: 5px 0 5px 10px;
-    border-radius: 7px;
-    width: 36px;
-    height: 14px;
-    background-color: rgba(var(--pure-material-onsurface-rgb, 0, 0, 0), 0.38);
-    vertical-align: top;
-    transition: background-color 0.2s, opacity 0.2s;
-}
-
-/* Thumb */
-.switch>span::after {
-    content: "";
-    position: absolute;
-    top: 2px;
-    right: 16px;
-    border-radius: 50%;
-    width: 20px;
-    height: 20px;
-    background-color: rgb(var(--pure-material-onprimary-rgb, 255, 255, 255));
-    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
-    transition: background-color 0.2s, transform 0.2s;
-}
-
-/* Checked */
-.switch>input:checked {
-    right: -10px;
-    background-color: rgb(var(--pure-material-primary-rgb, 33, 150, 243));
+:root {
+  --theme_primary: #1565c0;
+  --theme_primary_rgb: 21,101,192;
+  --theme_accent: #4797f2;
+  --theme_accent_rgb: 71,151,242;
+  --theme_contrast: #ffffff;
+  --theme_contrast_rgb: 255,255,255;
 }
 
-.switch>input:checked+span::before {
-    background-color: rgba(var(--pure-material-primary-rgb, 33, 150, 243), 0.6);
-}
-
-.switch>input:checked+span::after {
-    background-color: rgb(var(--pure-material-primary-rgb, 33, 150, 243));
-    transform: translateX(16px);
-}
-
-/* Hover, Focus */
-.switch:hover>input {
-    opacity: 0.04;
-}
-
-.switch>input:focus {
-    opacity: 0.12;
-}
-
-.switch:hover>input:focus {
-    opacity: 0.16;
-}
-
-/* Active */
-.switch>input:active {
-    opacity: 1;
-    transform: scale(0);
-    transition: transform 0s, opacity 0s;
-}
-
-.switch>input:active+span::before {
-    background-color: rgba(var(--pure-material-primary-rgb, 33, 150, 243), 0.6);
-}
-
-.switch>input:checked:active+span::before {
-    background-color: rgba(var(--pure-material-onsurface-rgb, 0, 0, 0), 0.38);
-}
-
-/* Disabled */
-.switch>input:disabled {
-    opacity: 0;
-}
-
-.switch>input:disabled+span {
-    color: rgb(var(--pure-material-onsurface-rgb, 0, 0, 0));
-    opacity: 0.38;
-    cursor: default;
-}
-
-.switch>input:disabled+span::before {
-    background-color: rgba(var(--pure-material-onsurface-rgb, 0, 0, 0), 0.38);
-}
-
-.switch>input:checked:disabled+span::before {
-    background-color: rgba(var(--pure-material-primary-rgb, 33, 150, 243), 0.6);
-}
-
-.button-container {
-    display: flex;
-    flex-direction: row-reverse;
-    align-items: flex-end;
-    margin-right: 15px;
-}
-
-.button {
-    position: relative;
-    display: inline-block;
-    box-sizing: border-box;
-    border: none;
-    border-radius: 4px;
-    padding: 0 8px;
-    min-width: 64px;
-    height: 36px;
-    vertical-align: middle;
-    text-align: center;
-    text-overflow: ellipsis;
-    text-transform: uppercase;
-    color: rgb(var(--pure-material-primary-rgb, 33, 150, 243));
-    background-color: transparent;
-    font-family: var(--pure-material-font, "Roboto", "Segoe UI", BlinkMacSystemFont, system-ui, -apple-system);
-    font-size: 14px;
-    font-weight: 500;
-    line-height: 36px;
-    overflow: hidden;
-    outline: none;
-    cursor: pointer;
-}
-
-.button::-moz-focus-inner {
-    border: none;
-}
-
-/* Overlay */
-.button::before {
-    content: "";
-    position: absolute;
-    left: 0;
-    right: 0;
-    top: 0;
-    bottom: 0;
-    background-color: currentColor;
-    opacity: 0;
-    transition: opacity 0.2s;
-}
-
-/* Ripple */
-.button::after {
-    content: "";
-    position: absolute;
-    left: 50%;
-    top: 50%;
-    border-radius: 50%;
-    padding: 50%;
-    width: 32px;
-    height: 32px;
-    background-color: currentColor;
-    opacity: 0;
-    transform: translate(-50%, -50%) scale(1);
-    transition: opacity 1s, transform 0.5s;
-}
-
-/* Hover, Focus */
-.button:hover::before {
-    opacity: 0.04;
-}
-
-.button:focus::before {
-    opacity: 0.12;
-}
-
-.button:hover:focus::before {
-    opacity: 0.16;
-}
-
-/* Active */
-.button:active::after {
-    opacity: 0.16;
-    transform: translate(-50%, -50%) scale(0);
-    transition: transform 0s;
-}
-
-/* Disabled */
-.button:disabled {
-    color: rgba(var(--pure-material-onsurface-rgb, 0, 0, 0), 0.38);
-    background-color: transparent;
-    cursor: initial;
-}
-
-.button:disabled::before {
-    opacity: 0;
-}
-
-.button:disabled::after {
-    opacity: 0;
-}
-
-.list-wrapper {
-    margin: 30px auto;
-}
-
-.list {
-    background-color: #FFF;
-    margin: 0;
-    padding: 15px;
-    border-radius: 2px;
-}
-
-.list .list-item {
-    display: flex;
-    padding: 10px 5px;
-}
-
-.list .list-item .switch {
-    display: flex;
-    align-items: center;
-}
-
-.list .list-item:not(:last-child) {
-    border-bottom: 1px solid #EEE;
-}
-
-.list .image {
-    flex-shrink: 0;
-    height: 80px;
-}
-
-.list .list-item-image img {
-    width: 70px;
-    height: 70px;
-}
-
-.list .list-item-content {
-    width: 90%;
-    padding: 0 20px;
-}
-
-.list .list-item-content h4 {
-    margin: 0;
-    font-size: 18px;
-    margin-top: 15px;
-}
-
-.list .list-item-content p {
-    margin-top: 5px;
-    color: #AAA;
-    margin-bottom: 0;
-}
-
-.main-container {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-evenly;
-    align-items: center;
+body {
+  font-family: "Roboto", sans-serif;
 }
 
diff --git a/connect_ext_ppr/static/index.0000a39b9584a3f88cde.js b/connect_ext_ppr/static/index.850f61939486e367d210.js
similarity index 89%
rename from connect_ext_ppr/static/index.0000a39b9584a3f88cde.js
rename to connect_ext_ppr/static/index.850f61939486e367d210.js
index d4652ee..ec815a8 100644
--- a/connect_ext_ppr/static/index.0000a39b9584a3f88cde.js
+++ b/connect_ext_ppr/static/index.850f61939486e367d210.js
@@ -86,6 +86,17 @@ eval("__webpack_require__.r(__webpack_exports__);\n// extracted by mini-css-extr
 
 /***/ }),
 
+/***/ "./node_modules/mini-css-extract-plugin/dist/loader.js!./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js!./node_modules/stylus-loader/dist/cjs.js!./node_modules/vue-loader/lib/index.js??vue-loader-options!./ui/src/components/cNavBar.vue?vue&type=style&index=0&id=b2fed2fc&lang=stylus&":
+/*!******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
+  !*** ./node_modules/mini-css-extract-plugin/dist/loader.js!./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js!./node_modules/stylus-loader/dist/cjs.js!./node_modules/vue-loader/lib/index.js??vue-loader-options!./ui/src/components/cNavBar.vue?vue&type=style&index=0&id=b2fed2fc&lang=stylus& ***!
+  \******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+eval("__webpack_require__.r(__webpack_exports__);\n// extracted by mini-css-extract-plugin\n\n\n//# sourceURL=webpack://connect-extension-xvs/./ui/src/components/cNavBar.vue?./node_modules/mini-css-extract-plugin/dist/loader.js!./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js!./node_modules/stylus-loader/dist/cjs.js!./node_modules/vue-loader/lib/index.js??vue-loader-options");
+
+/***/ }),
+
 /***/ "./node_modules/mini-css-extract-plugin/dist/loader.js!./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js!./node_modules/stylus-loader/dist/cjs.js!./node_modules/vue-loader/lib/index.js??vue-loader-options!./ui/src/components/cStatus.vue?vue&type=style&index=0&id=5eb1f184&lang=stylus&":
 /*!******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
   !*** ./node_modules/mini-css-extract-plugin/dist/loader.js!./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js!./node_modules/stylus-loader/dist/cjs.js!./node_modules/vue-loader/lib/index.js??vue-loader-options!./ui/src/components/cStatus.vue?vue&type=style&index=0&id=5eb1f184&lang=stylus& ***!
@@ -152,6 +163,17 @@ eval("__webpack_require__.r(__webpack_exports__);\n// extracted by mini-css-extr
 
 /***/ }),
 
+/***/ "./node_modules/mini-css-extract-plugin/dist/loader.js!./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js!./node_modules/stylus-loader/dist/cjs.js!./node_modules/vue-loader/lib/index.js??vue-loader-options!./ui/src/components/cTabs.vue?vue&type=style&index=0&id=00476590&lang=stylus&":
+/*!****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
+  !*** ./node_modules/mini-css-extract-plugin/dist/loader.js!./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js!./node_modules/stylus-loader/dist/cjs.js!./node_modules/vue-loader/lib/index.js??vue-loader-options!./ui/src/components/cTabs.vue?vue&type=style&index=0&id=00476590&lang=stylus& ***!
+  \****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+eval("__webpack_require__.r(__webpack_exports__);\n// extracted by mini-css-extract-plugin\n\n\n//# sourceURL=webpack://connect-extension-xvs/./ui/src/components/cTabs.vue?./node_modules/mini-css-extract-plugin/dist/loader.js!./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js!./node_modules/stylus-loader/dist/cjs.js!./node_modules/vue-loader/lib/index.js??vue-loader-options");
+
+/***/ }),
+
 /***/ "./node_modules/mini-css-extract-plugin/dist/loader.js!./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js!./node_modules/stylus-loader/dist/cjs.js!./node_modules/vue-loader/lib/index.js??vue-loader-options!./ui/src/components/cTextField.vue?vue&type=style&index=0&id=b5bb9caa&lang=stylus&scoped=true&":
 /*!*********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
   !*** ./node_modules/mini-css-extract-plugin/dist/loader.js!./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js!./node_modules/stylus-loader/dist/cjs.js!./node_modules/vue-loader/lib/index.js??vue-loader-options!./ui/src/components/cTextField.vue?vue&type=style&index=0&id=b5bb9caa&lang=stylus&scoped=true& ***!
@@ -174,6 +196,17 @@ eval("__webpack_require__.r(__webpack_exports__);\n// extracted by mini-css-extr
 
 /***/ }),
 
+/***/ "./node_modules/mini-css-extract-plugin/dist/loader.js!./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js!./node_modules/stylus-loader/dist/cjs.js!./node_modules/vue-loader/lib/index.js??vue-loader-options!./ui/src/components/cView.vue?vue&type=style&index=0&id=7c928137&lang=stylus&":
+/*!****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
+  !*** ./node_modules/mini-css-extract-plugin/dist/loader.js!./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js!./node_modules/stylus-loader/dist/cjs.js!./node_modules/vue-loader/lib/index.js??vue-loader-options!./ui/src/components/cView.vue?vue&type=style&index=0&id=7c928137&lang=stylus& ***!
+  \****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+eval("__webpack_require__.r(__webpack_exports__);\n// extracted by mini-css-extract-plugin\n\n\n//# sourceURL=webpack://connect-extension-xvs/./ui/src/components/cView.vue?./node_modules/mini-css-extract-plugin/dist/loader.js!./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js!./node_modules/stylus-loader/dist/cjs.js!./node_modules/vue-loader/lib/index.js??vue-loader-options");
+
+/***/ }),
+
 /***/ "./ui/styles/index.css":
 /*!*****************************!*\
   !*** ./ui/styles/index.css ***!
@@ -213,7 +246,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _components_cDataTable_vue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ~components/cDataTable.vue */ \"./ui/src/components/cDataTable.vue\");\n/* harmony import */ var _components_DetailItem_vue__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ~components/DetailItem.vue */ \"./ui/src/components/DetailItem.vue\");\n/* harmony import */ var _components_Pic_vue__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ~components/Pic.vue */ \"./ui/src/components/Pic.vue\");\n/* harmony import */ var _components_cStatus_vue__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ~components/cStatus.vue */ \"./ui/src/components/cStatus.vue\");\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ~utils */ \"./ui/src/tools/utils.js\");\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../utils */ \"./ui/src/utils.js\");\n\n\n\n\n\n\n\n\n\n\nconst prepareRow = (0,_utils__WEBPACK_IMPORTED_MODULE_4__.template)({\n  id: ['id'],\n  productId: ['product', 'id'],\n  productIcon: ['product', 'icon'],\n  productName: ['product', 'name'],\n  vendorId: ['owner', 'id'],\n  vendorIcon: ['owner', 'icon'],\n  vendorName: ['owner', 'name'],\n  hubId: ['hub', 'id'],\n  hubName: ['hub', 'name'],\n  lastSync: ['last_sync_at'],\n  status: ['status'],\n});\n\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({\n  components: {\n    cDataTable: _components_cDataTable_vue__WEBPACK_IMPORTED_MODULE_0__[\"default\"],\n    DetailItem: _components_DetailItem_vue__WEBPACK_IMPORTED_MODULE_1__[\"default\"],\n    Pic: _components_Pic_vue__WEBPACK_IMPORTED_MODULE_2__[\"default\"],\n    cStatus: _components_cStatus_vue__WEBPACK_IMPORTED_MODULE_3__[\"default\"],\n  },\n    data() {\n    return {\n      localValue: null,\n      headers: [{\n        text: 'deployment',\n        value: 'deployment',\n        align: 'left',\n      },\n      {\n        text: 'product',\n        value: 'product',\n        align: 'left',\n      },\n      {\n        text: 'vendor',\n        value: 'vendor',\n        align: 'left',\n      },\n      {\n        text: 'hub',\n        value: 'hub',\n        align: 'left',\n      },\n      {\n        text: 'last sync',\n        value: 'lastSync',\n        align: 'left',\n      },\n      {\n        text: 'status',\n        value: 'status',\n        align: 'left',\n      },\n    ],\n    };\n  },\n\n  methods: {\n    prepareRow,\n  },\n\n  async created() {\n    const allDeployments = await (0,_utils__WEBPACK_IMPORTED_MODULE_5__.getDeployments)();\n    this.localValue = allDeployments;\n  },\n});\n\n\n//# sourceURL=webpack://connect-extension-xvs/./ui/src/components/DeploymentsTable.vue?./node_modules/vue-loader/lib/index.js??vue-loader-options");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _components_cDataTable_vue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ~components/cDataTable.vue */ \"./ui/src/components/cDataTable.vue\");\n/* harmony import */ var _components_DetailItem_vue__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ~components/DetailItem.vue */ \"./ui/src/components/DetailItem.vue\");\n/* harmony import */ var _components_Pic_vue__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ~components/Pic.vue */ \"./ui/src/components/Pic.vue\");\n/* harmony import */ var _components_cStatus_vue__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ~components/cStatus.vue */ \"./ui/src/components/cStatus.vue\");\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ~utils */ \"./ui/src/tools/utils.js\");\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @/utils */ \"./ui/src/utils.js\");\n\n\n\n\n\n\n\n\n\n\nconst prepareRow = (0,_utils__WEBPACK_IMPORTED_MODULE_4__.template)({\n  id: ['id'],\n  productId: ['product', 'id'],\n  productIcon: ['product', 'icon'],\n  productName: ['product', 'name'],\n  vendorId: ['owner', 'id'],\n  vendorIcon: ['owner', 'icon'],\n  vendorName: ['owner', 'name'],\n  hubId: ['hub', 'id'],\n  hubName: ['hub', 'name'],\n  lastSync: ['last_sync_at'],\n  status: ['status'],\n});\n\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({\n  components: {\n    cDataTable: _components_cDataTable_vue__WEBPACK_IMPORTED_MODULE_0__[\"default\"],\n    DetailItem: _components_DetailItem_vue__WEBPACK_IMPORTED_MODULE_1__[\"default\"],\n    Pic: _components_Pic_vue__WEBPACK_IMPORTED_MODULE_2__[\"default\"],\n    cStatus: _components_cStatus_vue__WEBPACK_IMPORTED_MODULE_3__[\"default\"],\n  },\n    data() {\n    return {\n      localValue: null,\n      headers: [{\n        text: 'deployment',\n        value: 'deployment',\n        align: 'left',\n      },\n      {\n        text: 'product',\n        value: 'product',\n        align: 'left',\n      },\n      {\n        text: 'vendor',\n        value: 'vendor',\n        align: 'left',\n      },\n      {\n        text: 'hub',\n        value: 'hub',\n        align: 'left',\n      },\n      {\n        text: 'last sync',\n        value: 'lastSync',\n        align: 'left',\n      },\n      {\n        text: 'status',\n        value: 'status',\n        align: 'left',\n      },\n    ],\n    };\n  },\n\n  methods: {\n    prepareRow,\n  },\n\n  async created() {\n    const allDeployments = await (0,_utils__WEBPACK_IMPORTED_MODULE_5__.getDeployments)();\n    this.localValue = allDeployments;\n  },\n});\n\n\n//# sourceURL=webpack://connect-extension-xvs/./ui/src/components/DeploymentsTable.vue?./node_modules/vue-loader/lib/index.js??vue-loader-options");
 
 /***/ }),
 
@@ -371,6 +404,28 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 
 /***/ }),
 
+/***/ "./ui/src/components/cNavBar.vue":
+/*!***************************************!*\
+  !*** ./ui/src/components/cNavBar.vue ***!
+  \***************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _cNavBar_vue_vue_type_template_id_b2fed2fc_lang_pug___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./cNavBar.vue?vue&type=template&id=b2fed2fc&lang=pug& */ \"./ui/src/components/cNavBar.vue?vue&type=template&id=b2fed2fc&lang=pug&\");\n/* harmony import */ var _cNavBar_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./cNavBar.vue?vue&type=script&lang=js& */ \"./ui/src/components/cNavBar.vue?vue&type=script&lang=js&\");\n/* harmony import */ var _cNavBar_vue_vue_type_style_index_0_id_b2fed2fc_lang_stylus___WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./cNavBar.vue?vue&type=style&index=0&id=b2fed2fc&lang=stylus& */ \"./ui/src/components/cNavBar.vue?vue&type=style&index=0&id=b2fed2fc&lang=stylus&\");\n/* harmony import */ var _node_modules_vue_loader_lib_runtime_componentNormalizer_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! !../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js */ \"./node_modules/vue-loader/lib/runtime/componentNormalizer.js\");\n\n\n\n;\n\n\n/* normalize component */\n\nvar component = (0,_node_modules_vue_loader_lib_runtime_componentNormalizer_js__WEBPACK_IMPORTED_MODULE_3__[\"default\"])(\n  _cNavBar_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_1__[\"default\"],\n  _cNavBar_vue_vue_type_template_id_b2fed2fc_lang_pug___WEBPACK_IMPORTED_MODULE_0__.render,\n  _cNavBar_vue_vue_type_template_id_b2fed2fc_lang_pug___WEBPACK_IMPORTED_MODULE_0__.staticRenderFns,\n  false,\n  null,\n  null,\n  null\n  \n)\n\n/* hot reload */\nif (false) { var api; }\ncomponent.options.__file = \"ui/src/components/cNavBar.vue\"\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (component.exports);\n\n//# sourceURL=webpack://connect-extension-xvs/./ui/src/components/cNavBar.vue?");
+
+/***/ }),
+
+/***/ "./node_modules/vue-loader/lib/index.js??vue-loader-options!./ui/src/components/cNavBar.vue?vue&type=script&lang=js&":
+/*!***************************************************************************************************************************!*\
+  !*** ./node_modules/vue-loader/lib/index.js??vue-loader-options!./ui/src/components/cNavBar.vue?vue&type=script&lang=js& ***!
+  \***************************************************************************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _cloudblueconnect_material_svg_baseline__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @cloudblueconnect/material-svg/baseline */ \"./node_modules/@cloudblueconnect/material-svg/icons/google/arrow_back/baseline.svg\");\n/* harmony import */ var _components_cIcon_vue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ~components/cIcon.vue */ \"./ui/src/components/cIcon.vue\");\n/* harmony import */ var _components_cTabs_vue__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ~components/cTabs.vue */ \"./ui/src/components/cTabs.vue\");\n/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ~constants */ \"./ui/src/tools/constants.js\");\n/* harmony import */ var _mixins_sync__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ~mixins/sync */ \"./ui/src/tools/mixins/sync.js\");\n\n\n\n\n\n\n\n\n\n\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({\n  mixins: [\n    (0,_mixins_sync__WEBPACK_IMPORTED_MODULE_3__[\"default\"])([{ prop: 'currentTab', local: 'localCurrentTab' }]),\n  ],\n\n  components: {\n    cIcon: _components_cIcon_vue__WEBPACK_IMPORTED_MODULE_0__[\"default\"],\n    cTabs: _components_cTabs_vue__WEBPACK_IMPORTED_MODULE_1__[\"default\"],\n  },\n\n  props: {\n    backRoute: {\n      type: [Object, String],\n      default: null,\n    },\n\n    assistiveTitle: String,\n    title: String,\n\n    tabs: {\n      type: Array,\n      default: () => [],\n    },\n\n    currentTab: Object,\n  },\n\n  data: () => ({\n    icons: { googleArrowBackBaseline: _cloudblueconnect_material_svg_baseline__WEBPACK_IMPORTED_MODULE_4__[\"default\"] },\n    localCurrentTab: null,\n    themeGrey1: _constants__WEBPACK_IMPORTED_MODULE_2__.themeGrey1,\n  }),\n});\n\n\n//# sourceURL=webpack://connect-extension-xvs/./ui/src/components/cNavBar.vue?./node_modules/vue-loader/lib/index.js??vue-loader-options");
+
+/***/ }),
+
 /***/ "./ui/src/components/cStatus.vue":
 /*!***************************************!*\
   !*** ./ui/src/components/cStatus.vue ***!
@@ -503,6 +558,28 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 
 /***/ }),
 
+/***/ "./ui/src/components/cTabs.vue":
+/*!*************************************!*\
+  !*** ./ui/src/components/cTabs.vue ***!
+  \*************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _cTabs_vue_vue_type_template_id_00476590_lang_pug___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./cTabs.vue?vue&type=template&id=00476590&lang=pug& */ \"./ui/src/components/cTabs.vue?vue&type=template&id=00476590&lang=pug&\");\n/* harmony import */ var _cTabs_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./cTabs.vue?vue&type=script&lang=js& */ \"./ui/src/components/cTabs.vue?vue&type=script&lang=js&\");\n/* harmony import */ var _cTabs_vue_vue_type_style_index_0_id_00476590_lang_stylus___WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./cTabs.vue?vue&type=style&index=0&id=00476590&lang=stylus& */ \"./ui/src/components/cTabs.vue?vue&type=style&index=0&id=00476590&lang=stylus&\");\n/* harmony import */ var _node_modules_vue_loader_lib_runtime_componentNormalizer_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! !../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js */ \"./node_modules/vue-loader/lib/runtime/componentNormalizer.js\");\n\n\n\n;\n\n\n/* normalize component */\n\nvar component = (0,_node_modules_vue_loader_lib_runtime_componentNormalizer_js__WEBPACK_IMPORTED_MODULE_3__[\"default\"])(\n  _cTabs_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_1__[\"default\"],\n  _cTabs_vue_vue_type_template_id_00476590_lang_pug___WEBPACK_IMPORTED_MODULE_0__.render,\n  _cTabs_vue_vue_type_template_id_00476590_lang_pug___WEBPACK_IMPORTED_MODULE_0__.staticRenderFns,\n  false,\n  null,\n  null,\n  null\n  \n)\n\n/* hot reload */\nif (false) { var api; }\ncomponent.options.__file = \"ui/src/components/cTabs.vue\"\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (component.exports);\n\n//# sourceURL=webpack://connect-extension-xvs/./ui/src/components/cTabs.vue?");
+
+/***/ }),
+
+/***/ "./node_modules/vue-loader/lib/index.js??vue-loader-options!./ui/src/components/cTabs.vue?vue&type=script&lang=js&":
+/*!*************************************************************************************************************************!*\
+  !*** ./node_modules/vue-loader/lib/index.js??vue-loader-options!./ui/src/components/cTabs.vue?vue&type=script&lang=js& ***!
+  \*************************************************************************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _components_cIcon_vue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ~components/cIcon.vue */ \"./ui/src/components/cIcon.vue\");\n/* harmony import */ var _components_Pic_vue__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ~components/Pic.vue */ \"./ui/src/components/Pic.vue\");\n/* harmony import */ var _mixins_sync__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ~mixins/sync */ \"./ui/src/tools/mixins/sync.js\");\n\n\n\n\n\n\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({\n  mixins: [\n    (0,_mixins_sync__WEBPACK_IMPORTED_MODULE_2__[\"default\"])([{ prop: 'currentTab', local: 'localCurrentTab' }]),\n  ],\n\n  components: {\n    cIcon: _components_cIcon_vue__WEBPACK_IMPORTED_MODULE_0__[\"default\"],\n    Pic: _components_Pic_vue__WEBPACK_IMPORTED_MODULE_1__[\"default\"],\n  },\n\n  props: {\n    currentTab: {\n      type: Object,\n      default: null,\n    },\n\n    tabs: {\n      required: true,\n      type: Array,\n    },\n\n    noBorder: Boolean,\n    fullHeight: Boolean,\n  },\n\n  data: () => ({\n    localCurrentTab: null,\n  }),\n\n  methods: {\n    open(tab) {\n      if (tab.disabled || tab.value === this.localCurrentTab?.value) return;\n\n      this.localCurrentTab = tab;\n      this.$emit('open', tab);\n    },\n\n    linkClass(tab) {\n      return {\n        'c-tabs__control-item_active': tab.value === this.localCurrentTab?.value,\n        'c-tabs__control-item_disabled': tab.disabled,\n        'c-tabs__control-item_height_full': this.fullHeight,\n      };\n    },\n  },\n\n  created() {\n    if (!this.localCurrentTab && this.tabs.length) this.localCurrentTab = this.tabs[0];\n  },\n});\n\n\n//# sourceURL=webpack://connect-extension-xvs/./ui/src/components/cTabs.vue?./node_modules/vue-loader/lib/index.js??vue-loader-options");
+
+/***/ }),
+
 /***/ "./ui/src/components/cTextField.vue":
 /*!******************************************!*\
   !*** ./ui/src/components/cTextField.vue ***!
@@ -547,6 +624,28 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 
 /***/ }),
 
+/***/ "./ui/src/components/cView.vue":
+/*!*************************************!*\
+  !*** ./ui/src/components/cView.vue ***!
+  \*************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _cView_vue_vue_type_template_id_7c928137_lang_pug___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./cView.vue?vue&type=template&id=7c928137&lang=pug& */ \"./ui/src/components/cView.vue?vue&type=template&id=7c928137&lang=pug&\");\n/* harmony import */ var _cView_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./cView.vue?vue&type=script&lang=js& */ \"./ui/src/components/cView.vue?vue&type=script&lang=js&\");\n/* harmony import */ var _cView_vue_vue_type_style_index_0_id_7c928137_lang_stylus___WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./cView.vue?vue&type=style&index=0&id=7c928137&lang=stylus& */ \"./ui/src/components/cView.vue?vue&type=style&index=0&id=7c928137&lang=stylus&\");\n/* harmony import */ var _node_modules_vue_loader_lib_runtime_componentNormalizer_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! !../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js */ \"./node_modules/vue-loader/lib/runtime/componentNormalizer.js\");\n\n\n\n;\n\n\n/* normalize component */\n\nvar component = (0,_node_modules_vue_loader_lib_runtime_componentNormalizer_js__WEBPACK_IMPORTED_MODULE_3__[\"default\"])(\n  _cView_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_1__[\"default\"],\n  _cView_vue_vue_type_template_id_7c928137_lang_pug___WEBPACK_IMPORTED_MODULE_0__.render,\n  _cView_vue_vue_type_template_id_7c928137_lang_pug___WEBPACK_IMPORTED_MODULE_0__.staticRenderFns,\n  false,\n  null,\n  null,\n  null\n  \n)\n\n/* hot reload */\nif (false) { var api; }\ncomponent.options.__file = \"ui/src/components/cView.vue\"\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (component.exports);\n\n//# sourceURL=webpack://connect-extension-xvs/./ui/src/components/cView.vue?");
+
+/***/ }),
+
+/***/ "./node_modules/vue-loader/lib/index.js??vue-loader-options!./ui/src/components/cView.vue?vue&type=script&lang=js&":
+/*!*************************************************************************************************************************!*\
+  !*** ./node_modules/vue-loader/lib/index.js??vue-loader-options!./ui/src/components/cView.vue?vue&type=script&lang=js& ***!
+  \*************************************************************************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _cloudblueconnect_material_svg_animated__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @cloudblueconnect/material-svg/animated */ \"./node_modules/@cloudblueconnect/material-svg/icons/connect/loader/animated.svg\");\n/* harmony import */ var _components_cIcon_vue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ~components/cIcon.vue */ \"./ui/src/components/cIcon.vue\");\n/* harmony import */ var _components_cNavBar_vue__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ~components/cNavBar.vue */ \"./ui/src/components/cNavBar.vue\");\n/* harmony import */ var _mixins_sync__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ~mixins/sync */ \"./ui/src/tools/mixins/sync.js\");\n\n\n\n\n\n\n\n\n\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({\n  mixins: [\n    (0,_mixins_sync__WEBPACK_IMPORTED_MODULE_2__[\"default\"])([{ prop: 'currentTab', local: 'localCurrentTab' }]),\n  ],\n\n  components: {\n    cIcon: _components_cIcon_vue__WEBPACK_IMPORTED_MODULE_0__[\"default\"],\n    cNavBar: _components_cNavBar_vue__WEBPACK_IMPORTED_MODULE_1__[\"default\"],\n  },\n\n  props: {\n    loading: Boolean,\n    noPadded: Boolean,\n\n    // navigation bar props\n    assistiveTitle: String,\n    backRoute: [Object, String],\n    title: String,\n    currentTab: Object,\n    tabs: {\n      type: Array,\n      default: () => [],\n    },\n  },\n\n  data: () => ({\n    icons: { connectLoaderAnimated: _cloudblueconnect_material_svg_animated__WEBPACK_IMPORTED_MODULE_3__[\"default\"] },\n    localCurrentTab: null,\n  }),\n\n  watch: {\n    '$route.params.tab': {\n      immediate: true,\n      handler(v) {\n        if (v) {\n          const newTab = this.tabs.find(tab => tab.value === v);\n          if (newTab) this.localCurrentTab = newTab;\n        }\n      },\n    },\n\n    localCurrentTab: {\n      deep: true,\n      immediate: true,\n      handler(v) {\n        if (!v || v.value === this.$route.params?.tab) return;\n\n        this.$router.replace({\n          ...this.$route,\n          params: { ...this.$route.params, tab: v.value },\n        });\n      },\n    },\n  },\n});\n\n\n//# sourceURL=webpack://connect-extension-xvs/./ui/src/components/cView.vue?./node_modules/vue-loader/lib/index.js??vue-loader-options");
+
+/***/ }),
+
 /***/ "./ui/src/pages/App.vue":
 /*!******************************!*\
   !*** ./ui/src/pages/App.vue ***!
@@ -587,7 +686,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _components_DeploymentsTable_vue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ~components/DeploymentsTable.vue */ \"./ui/src/components/DeploymentsTable.vue\");\n\n\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({\n  components: {\n    DeploymentsTable: _components_DeploymentsTable_vue__WEBPACK_IMPORTED_MODULE_0__[\"default\"],\n  },\n  data() {\n    return {};\n  },\n});\n\n\n//# sourceURL=webpack://connect-extension-xvs/./ui/src/pages/Dashboard.vue?./node_modules/vue-loader/lib/index.js??vue-loader-options");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _components_cView_vue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ~components/cView.vue */ \"./ui/src/components/cView.vue\");\n/* harmony import */ var _components_DeploymentsTable_vue__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ~components/DeploymentsTable.vue */ \"./ui/src/components/DeploymentsTable.vue\");\n\n\n\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({\n  components: {\n    cView: _components_cView_vue__WEBPACK_IMPORTED_MODULE_0__[\"default\"],\n    DeploymentsTable: _components_DeploymentsTable_vue__WEBPACK_IMPORTED_MODULE_1__[\"default\"],\n  },\n\n  data: () => ({\n    currentTab: null,\n  }),\n\n  computed: {\n    tabs: () => [\n      { label: 'Deployments', value: 'deployments' },\n      { label: 'Requests', value: 'requests' },\n    ],\n  },\n});\n\n\n//# sourceURL=webpack://connect-extension-xvs/./ui/src/pages/Dashboard.vue?./node_modules/vue-loader/lib/index.js??vue-loader-options");
 
 /***/ }),
 
@@ -657,6 +756,17 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _nod
 
 /***/ }),
 
+/***/ "./ui/src/components/cNavBar.vue?vue&type=style&index=0&id=b2fed2fc&lang=stylus&":
+/*!***************************************************************************************!*\
+  !*** ./ui/src/components/cNavBar.vue?vue&type=style&index=0&id=b2fed2fc&lang=stylus& ***!
+  \***************************************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_node_modules_css_loader_dist_cjs_js_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_dist_cjs_js_node_modules_stylus_loader_dist_cjs_js_node_modules_vue_loader_lib_index_js_vue_loader_options_cNavBar_vue_vue_type_style_index_0_id_b2fed2fc_lang_stylus___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!../../../node_modules/mini-css-extract-plugin/dist/loader.js!../../../node_modules/css-loader/dist/cjs.js!../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../node_modules/postcss-loader/dist/cjs.js!../../../node_modules/stylus-loader/dist/cjs.js!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./cNavBar.vue?vue&type=style&index=0&id=b2fed2fc&lang=stylus& */ \"./node_modules/mini-css-extract-plugin/dist/loader.js!./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js!./node_modules/stylus-loader/dist/cjs.js!./node_modules/vue-loader/lib/index.js??vue-loader-options!./ui/src/components/cNavBar.vue?vue&type=style&index=0&id=b2fed2fc&lang=stylus&\");\n\n\n//# sourceURL=webpack://connect-extension-xvs/./ui/src/components/cNavBar.vue?");
+
+/***/ }),
+
 /***/ "./ui/src/components/cStatus.vue?vue&type=style&index=0&id=5eb1f184&lang=stylus&":
 /*!***************************************************************************************!*\
   !*** ./ui/src/components/cStatus.vue?vue&type=style&index=0&id=5eb1f184&lang=stylus& ***!
@@ -723,6 +833,17 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _nod
 
 /***/ }),
 
+/***/ "./ui/src/components/cTabs.vue?vue&type=style&index=0&id=00476590&lang=stylus&":
+/*!*************************************************************************************!*\
+  !*** ./ui/src/components/cTabs.vue?vue&type=style&index=0&id=00476590&lang=stylus& ***!
+  \*************************************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_node_modules_css_loader_dist_cjs_js_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_dist_cjs_js_node_modules_stylus_loader_dist_cjs_js_node_modules_vue_loader_lib_index_js_vue_loader_options_cTabs_vue_vue_type_style_index_0_id_00476590_lang_stylus___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!../../../node_modules/mini-css-extract-plugin/dist/loader.js!../../../node_modules/css-loader/dist/cjs.js!../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../node_modules/postcss-loader/dist/cjs.js!../../../node_modules/stylus-loader/dist/cjs.js!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./cTabs.vue?vue&type=style&index=0&id=00476590&lang=stylus& */ \"./node_modules/mini-css-extract-plugin/dist/loader.js!./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js!./node_modules/stylus-loader/dist/cjs.js!./node_modules/vue-loader/lib/index.js??vue-loader-options!./ui/src/components/cTabs.vue?vue&type=style&index=0&id=00476590&lang=stylus&\");\n\n\n//# sourceURL=webpack://connect-extension-xvs/./ui/src/components/cTabs.vue?");
+
+/***/ }),
+
 /***/ "./ui/src/components/cTextField.vue?vue&type=style&index=0&id=b5bb9caa&lang=stylus&scoped=true&":
 /*!******************************************************************************************************!*\
   !*** ./ui/src/components/cTextField.vue?vue&type=style&index=0&id=b5bb9caa&lang=stylus&scoped=true& ***!
@@ -745,6 +866,17 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _nod
 
 /***/ }),
 
+/***/ "./ui/src/components/cView.vue?vue&type=style&index=0&id=7c928137&lang=stylus&":
+/*!*************************************************************************************!*\
+  !*** ./ui/src/components/cView.vue?vue&type=style&index=0&id=7c928137&lang=stylus& ***!
+  \*************************************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_node_modules_css_loader_dist_cjs_js_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_dist_cjs_js_node_modules_stylus_loader_dist_cjs_js_node_modules_vue_loader_lib_index_js_vue_loader_options_cView_vue_vue_type_style_index_0_id_7c928137_lang_stylus___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!../../../node_modules/mini-css-extract-plugin/dist/loader.js!../../../node_modules/css-loader/dist/cjs.js!../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../node_modules/postcss-loader/dist/cjs.js!../../../node_modules/stylus-loader/dist/cjs.js!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./cView.vue?vue&type=style&index=0&id=7c928137&lang=stylus& */ \"./node_modules/mini-css-extract-plugin/dist/loader.js!./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js!./node_modules/stylus-loader/dist/cjs.js!./node_modules/vue-loader/lib/index.js??vue-loader-options!./ui/src/components/cView.vue?vue&type=style&index=0&id=7c928137&lang=stylus&\");\n\n\n//# sourceURL=webpack://connect-extension-xvs/./ui/src/components/cView.vue?");
+
+/***/ }),
+
 /***/ "./ui/src/components/DeploymentsTable.vue?vue&type=script&lang=js&":
 /*!*************************************************************************!*\
   !*** ./ui/src/components/DeploymentsTable.vue?vue&type=script&lang=js& ***!
@@ -833,6 +965,17 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 
 /***/ }),
 
+/***/ "./ui/src/components/cNavBar.vue?vue&type=script&lang=js&":
+/*!****************************************************************!*\
+  !*** ./ui/src/components/cNavBar.vue?vue&type=script&lang=js& ***!
+  \****************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _node_modules_vue_loader_lib_index_js_vue_loader_options_cNavBar_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./cNavBar.vue?vue&type=script&lang=js& */ \"./node_modules/vue-loader/lib/index.js??vue-loader-options!./ui/src/components/cNavBar.vue?vue&type=script&lang=js&\");\n /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (_node_modules_vue_loader_lib_index_js_vue_loader_options_cNavBar_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_0__[\"default\"]); \n\n//# sourceURL=webpack://connect-extension-xvs/./ui/src/components/cNavBar.vue?");
+
+/***/ }),
+
 /***/ "./ui/src/components/cStatus.vue?vue&type=script&lang=js&":
 /*!****************************************************************!*\
   !*** ./ui/src/components/cStatus.vue?vue&type=script&lang=js& ***!
@@ -899,6 +1042,17 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 
 /***/ }),
 
+/***/ "./ui/src/components/cTabs.vue?vue&type=script&lang=js&":
+/*!**************************************************************!*\
+  !*** ./ui/src/components/cTabs.vue?vue&type=script&lang=js& ***!
+  \**************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _node_modules_vue_loader_lib_index_js_vue_loader_options_cTabs_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./cTabs.vue?vue&type=script&lang=js& */ \"./node_modules/vue-loader/lib/index.js??vue-loader-options!./ui/src/components/cTabs.vue?vue&type=script&lang=js&\");\n /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (_node_modules_vue_loader_lib_index_js_vue_loader_options_cTabs_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_0__[\"default\"]); \n\n//# sourceURL=webpack://connect-extension-xvs/./ui/src/components/cTabs.vue?");
+
+/***/ }),
+
 /***/ "./ui/src/components/cTextField.vue?vue&type=script&lang=js&":
 /*!*******************************************************************!*\
   !*** ./ui/src/components/cTextField.vue?vue&type=script&lang=js& ***!
@@ -921,6 +1075,17 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 
 /***/ }),
 
+/***/ "./ui/src/components/cView.vue?vue&type=script&lang=js&":
+/*!**************************************************************!*\
+  !*** ./ui/src/components/cView.vue?vue&type=script&lang=js& ***!
+  \**************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _node_modules_vue_loader_lib_index_js_vue_loader_options_cView_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./cView.vue?vue&type=script&lang=js& */ \"./node_modules/vue-loader/lib/index.js??vue-loader-options!./ui/src/components/cView.vue?vue&type=script&lang=js&\");\n /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (_node_modules_vue_loader_lib_index_js_vue_loader_options_cView_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_0__[\"default\"]); \n\n//# sourceURL=webpack://connect-extension-xvs/./ui/src/components/cView.vue?");
+
+/***/ }),
+
 /***/ "./ui/src/pages/App.vue?vue&type=script&lang=js&":
 /*!*******************************************************!*\
   !*** ./ui/src/pages/App.vue?vue&type=script&lang=js& ***!
@@ -1031,6 +1196,17 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 
 /***/ }),
 
+/***/ "./ui/src/components/cNavBar.vue?vue&type=template&id=b2fed2fc&lang=pug&":
+/*!*******************************************************************************!*\
+  !*** ./ui/src/components/cNavBar.vue?vue&type=template&id=b2fed2fc&lang=pug& ***!
+  \*******************************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   render: () => (/* reexport safe */ _node_modules_vue_loader_lib_loaders_templateLoader_js_ruleSet_1_rules_1_node_modules_pug_plain_loader_index_js_node_modules_vue_loader_lib_index_js_vue_loader_options_cNavBar_vue_vue_type_template_id_b2fed2fc_lang_pug___WEBPACK_IMPORTED_MODULE_0__.render),\n/* harmony export */   staticRenderFns: () => (/* reexport safe */ _node_modules_vue_loader_lib_loaders_templateLoader_js_ruleSet_1_rules_1_node_modules_pug_plain_loader_index_js_node_modules_vue_loader_lib_index_js_vue_loader_options_cNavBar_vue_vue_type_template_id_b2fed2fc_lang_pug___WEBPACK_IMPORTED_MODULE_0__.staticRenderFns)\n/* harmony export */ });\n/* harmony import */ var _node_modules_vue_loader_lib_loaders_templateLoader_js_ruleSet_1_rules_1_node_modules_pug_plain_loader_index_js_node_modules_vue_loader_lib_index_js_vue_loader_options_cNavBar_vue_vue_type_template_id_b2fed2fc_lang_pug___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!../../../node_modules/vue-loader/lib/loaders/templateLoader.js??ruleSet[1].rules[1]!../../../node_modules/pug-plain-loader/index.js!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./cNavBar.vue?vue&type=template&id=b2fed2fc&lang=pug& */ \"./node_modules/vue-loader/lib/loaders/templateLoader.js??ruleSet[1].rules[1]!./node_modules/pug-plain-loader/index.js!./node_modules/vue-loader/lib/index.js??vue-loader-options!./ui/src/components/cNavBar.vue?vue&type=template&id=b2fed2fc&lang=pug&\");\n\n\n//# sourceURL=webpack://connect-extension-xvs/./ui/src/components/cNavBar.vue?");
+
+/***/ }),
+
 /***/ "./ui/src/components/cStatus.vue?vue&type=template&id=5eb1f184&lang=pug&":
 /*!*******************************************************************************!*\
   !*** ./ui/src/components/cStatus.vue?vue&type=template&id=5eb1f184&lang=pug& ***!
@@ -1097,6 +1273,17 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 
 /***/ }),
 
+/***/ "./ui/src/components/cTabs.vue?vue&type=template&id=00476590&lang=pug&":
+/*!*****************************************************************************!*\
+  !*** ./ui/src/components/cTabs.vue?vue&type=template&id=00476590&lang=pug& ***!
+  \*****************************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   render: () => (/* reexport safe */ _node_modules_vue_loader_lib_loaders_templateLoader_js_ruleSet_1_rules_1_node_modules_pug_plain_loader_index_js_node_modules_vue_loader_lib_index_js_vue_loader_options_cTabs_vue_vue_type_template_id_00476590_lang_pug___WEBPACK_IMPORTED_MODULE_0__.render),\n/* harmony export */   staticRenderFns: () => (/* reexport safe */ _node_modules_vue_loader_lib_loaders_templateLoader_js_ruleSet_1_rules_1_node_modules_pug_plain_loader_index_js_node_modules_vue_loader_lib_index_js_vue_loader_options_cTabs_vue_vue_type_template_id_00476590_lang_pug___WEBPACK_IMPORTED_MODULE_0__.staticRenderFns)\n/* harmony export */ });\n/* harmony import */ var _node_modules_vue_loader_lib_loaders_templateLoader_js_ruleSet_1_rules_1_node_modules_pug_plain_loader_index_js_node_modules_vue_loader_lib_index_js_vue_loader_options_cTabs_vue_vue_type_template_id_00476590_lang_pug___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!../../../node_modules/vue-loader/lib/loaders/templateLoader.js??ruleSet[1].rules[1]!../../../node_modules/pug-plain-loader/index.js!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./cTabs.vue?vue&type=template&id=00476590&lang=pug& */ \"./node_modules/vue-loader/lib/loaders/templateLoader.js??ruleSet[1].rules[1]!./node_modules/pug-plain-loader/index.js!./node_modules/vue-loader/lib/index.js??vue-loader-options!./ui/src/components/cTabs.vue?vue&type=template&id=00476590&lang=pug&\");\n\n\n//# sourceURL=webpack://connect-extension-xvs/./ui/src/components/cTabs.vue?");
+
+/***/ }),
+
 /***/ "./ui/src/components/cTextField.vue?vue&type=template&id=b5bb9caa&scoped=true&lang=pug&":
 /*!**********************************************************************************************!*\
   !*** ./ui/src/components/cTextField.vue?vue&type=template&id=b5bb9caa&scoped=true&lang=pug& ***!
@@ -1119,6 +1306,17 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 
 /***/ }),
 
+/***/ "./ui/src/components/cView.vue?vue&type=template&id=7c928137&lang=pug&":
+/*!*****************************************************************************!*\
+  !*** ./ui/src/components/cView.vue?vue&type=template&id=7c928137&lang=pug& ***!
+  \*****************************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   render: () => (/* reexport safe */ _node_modules_vue_loader_lib_loaders_templateLoader_js_ruleSet_1_rules_1_node_modules_pug_plain_loader_index_js_node_modules_vue_loader_lib_index_js_vue_loader_options_cView_vue_vue_type_template_id_7c928137_lang_pug___WEBPACK_IMPORTED_MODULE_0__.render),\n/* harmony export */   staticRenderFns: () => (/* reexport safe */ _node_modules_vue_loader_lib_loaders_templateLoader_js_ruleSet_1_rules_1_node_modules_pug_plain_loader_index_js_node_modules_vue_loader_lib_index_js_vue_loader_options_cView_vue_vue_type_template_id_7c928137_lang_pug___WEBPACK_IMPORTED_MODULE_0__.staticRenderFns)\n/* harmony export */ });\n/* harmony import */ var _node_modules_vue_loader_lib_loaders_templateLoader_js_ruleSet_1_rules_1_node_modules_pug_plain_loader_index_js_node_modules_vue_loader_lib_index_js_vue_loader_options_cView_vue_vue_type_template_id_7c928137_lang_pug___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!../../../node_modules/vue-loader/lib/loaders/templateLoader.js??ruleSet[1].rules[1]!../../../node_modules/pug-plain-loader/index.js!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./cView.vue?vue&type=template&id=7c928137&lang=pug& */ \"./node_modules/vue-loader/lib/loaders/templateLoader.js??ruleSet[1].rules[1]!./node_modules/pug-plain-loader/index.js!./node_modules/vue-loader/lib/index.js??vue-loader-options!./ui/src/components/cView.vue?vue&type=template&id=7c928137&lang=pug&\");\n\n\n//# sourceURL=webpack://connect-extension-xvs/./ui/src/components/cView.vue?");
+
+/***/ }),
+
 /***/ "./ui/src/pages/App.vue?vue&type=template&id=37f0221e&lang=pug&":
 /*!**********************************************************************!*\
   !*** ./ui/src/pages/App.vue?vue&type=template&id=37f0221e&lang=pug& ***!
@@ -1229,6 +1427,17 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 
 /***/ }),
 
+/***/ "./node_modules/vue-loader/lib/loaders/templateLoader.js??ruleSet[1].rules[1]!./node_modules/pug-plain-loader/index.js!./node_modules/vue-loader/lib/index.js??vue-loader-options!./ui/src/components/cNavBar.vue?vue&type=template&id=b2fed2fc&lang=pug&":
+/*!****************************************************************************************************************************************************************************************************************************************************************!*\
+  !*** ./node_modules/vue-loader/lib/loaders/templateLoader.js??ruleSet[1].rules[1]!./node_modules/pug-plain-loader/index.js!./node_modules/vue-loader/lib/index.js??vue-loader-options!./ui/src/components/cNavBar.vue?vue&type=template&id=b2fed2fc&lang=pug& ***!
+  \****************************************************************************************************************************************************************************************************************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   render: () => (/* binding */ render),\n/* harmony export */   staticRenderFns: () => (/* binding */ staticRenderFns)\n/* harmony export */ });\nvar render = function render() {\n  var _vm = this,\n    _c = _vm._self._c\n  return _c(\n    \"div\",\n    { staticClass: \"navigation-bar\" },\n    [\n      _vm.backRoute\n        ? _c(\n            \"router-link\",\n            {\n              staticClass: \"navigation-bar__back-button\",\n              attrs: { to: _vm.backRoute },\n            },\n            [\n              _c(\"c-icon\", {\n                attrs: {\n                  color: _vm.themeGrey1,\n                  icon: _vm.icons.googleArrowBackBaseline,\n                  size: \"24\",\n                },\n              }),\n            ],\n            1\n          )\n        : _vm._e(),\n      _vm._t(\"logo\"),\n      _vm._t(\"title\", function () {\n        return [\n          _vm.assistiveTitle\n            ? _c(\"div\", { staticClass: \"navigation-bar__page-title-holder\" }, [\n                _c(\n                  \"div\",\n                  {\n                    staticClass:\n                      \"navigation-bar__page-assistive-title truncate-text\",\n                  },\n                  [_vm._v(_vm._s(_vm.assistiveTitle))]\n                ),\n                _c(\n                  \"h1\",\n                  { staticClass: \"navigation-bar__page-title truncate-text\" },\n                  [_vm._v(_vm._s(_vm.title))]\n                ),\n              ])\n            : _c(\n                \"h1\",\n                { staticClass: \"navigation-bar__page-title truncate-text\" },\n                [_vm._v(_vm._s(_vm.title))]\n              ),\n        ]\n      }),\n      _vm.tabs.length\n        ? _c(\"c-tabs\", {\n            staticClass: \"navigation-bar__tabs\",\n            attrs: {\n              \"current-tab\": _vm.localCurrentTab,\n              tabs: _vm.tabs,\n              \"full-height\": \"\",\n              \"no-border\": \"\",\n              \"no-content\": \"\",\n            },\n            on: {\n              \"update:currentTab\": function ($event) {\n                _vm.localCurrentTab = $event\n              },\n              \"update:current-tab\": function ($event) {\n                _vm.localCurrentTab = $event\n              },\n            },\n          })\n        : _vm._e(),\n      _c(\"div\", { staticClass: \"actions-holder navigation-bar__actions\" }, [\n        _c(\"div\", { staticClass: \"actions-slot\" }, [_vm._t(\"actions\")], 2),\n      ]),\n    ],\n    2\n  )\n}\nvar staticRenderFns = []\nrender._withStripped = true\n\n\n\n//# sourceURL=webpack://connect-extension-xvs/./ui/src/components/cNavBar.vue?./node_modules/vue-loader/lib/loaders/templateLoader.js??ruleSet%5B1%5D.rules%5B1%5D!./node_modules/pug-plain-loader/index.js!./node_modules/vue-loader/lib/index.js??vue-loader-options");
+
+/***/ }),
+
 /***/ "./node_modules/vue-loader/lib/loaders/templateLoader.js??ruleSet[1].rules[1]!./node_modules/pug-plain-loader/index.js!./node_modules/vue-loader/lib/index.js??vue-loader-options!./ui/src/components/cStatus.vue?vue&type=template&id=5eb1f184&lang=pug&":
 /*!****************************************************************************************************************************************************************************************************************************************************************!*\
   !*** ./node_modules/vue-loader/lib/loaders/templateLoader.js??ruleSet[1].rules[1]!./node_modules/pug-plain-loader/index.js!./node_modules/vue-loader/lib/index.js??vue-loader-options!./ui/src/components/cStatus.vue?vue&type=template&id=5eb1f184&lang=pug& ***!
@@ -1295,6 +1504,17 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 
 /***/ }),
 
+/***/ "./node_modules/vue-loader/lib/loaders/templateLoader.js??ruleSet[1].rules[1]!./node_modules/pug-plain-loader/index.js!./node_modules/vue-loader/lib/index.js??vue-loader-options!./ui/src/components/cTabs.vue?vue&type=template&id=00476590&lang=pug&":
+/*!**************************************************************************************************************************************************************************************************************************************************************!*\
+  !*** ./node_modules/vue-loader/lib/loaders/templateLoader.js??ruleSet[1].rules[1]!./node_modules/pug-plain-loader/index.js!./node_modules/vue-loader/lib/index.js??vue-loader-options!./ui/src/components/cTabs.vue?vue&type=template&id=00476590&lang=pug& ***!
+  \**************************************************************************************************************************************************************************************************************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   render: () => (/* binding */ render),\n/* harmony export */   staticRenderFns: () => (/* binding */ staticRenderFns)\n/* harmony export */ });\nvar render = function render() {\n  var _vm = this,\n    _c = _vm._self._c\n  return _c(\"div\", { staticClass: \"c-tabs\" }, [\n    _c(\n      \"div\",\n      {\n        staticClass: \"c-tabs__controls\",\n        class: { \"c-tabs__controls_border_none\": _vm.noBorder },\n      },\n      _vm._l(_vm.tabs, function (tab) {\n        return _c(\n          \"div\",\n          {\n            key: tab.value,\n            staticClass: \"c-tabs__control-tooltip\",\n            on: {\n              click: function ($event) {\n                return _vm.open(tab)\n              },\n            },\n          },\n          [\n            _vm._t(\n              \"tab\",\n              function () {\n                return [\n                  _c(\n                    \"span\",\n                    {\n                      staticClass: \"c-tabs__control-item\",\n                      class: _vm.linkClass(tab),\n                    },\n                    [\n                      tab.image\n                        ? _c(\"pic\", {\n                            staticClass: \"_mr_8\",\n                            attrs: {\n                              src: tab.image,\n                              width: 20,\n                              height: 20,\n                              size: \"contain\",\n                            },\n                          })\n                        : _vm._e(),\n                      _c(\"span\", [_vm._v(_vm._s(tab.label))]),\n                      tab.icon\n                        ? _c(\"c-icon\", {\n                            staticClass: \"_ml_4\",\n                            class: tab.icon.class,\n                            attrs: {\n                              icon: tab.icon.value,\n                              color: tab.icon.color,\n                              size: \"14\",\n                            },\n                          })\n                        : _vm._e(),\n                    ],\n                    1\n                  ),\n                ]\n              },\n              null,\n              tab\n            ),\n          ],\n          2\n        )\n      }),\n      0\n    ),\n    _c(\n      \"div\",\n      { staticClass: \"c-tabs__content\" },\n      _vm._l(_vm.tabs, function (tab) {\n        return _c(\n          \"div\",\n          { key: tab.value, staticClass: \"c-tab__view\" },\n          [\n            _vm.localCurrentTab?.value === tab.value\n              ? _vm._t(tab.value, null, null, tab)\n              : _vm._e(),\n          ],\n          2\n        )\n      }),\n      0\n    ),\n  ])\n}\nvar staticRenderFns = []\nrender._withStripped = true\n\n\n\n//# sourceURL=webpack://connect-extension-xvs/./ui/src/components/cTabs.vue?./node_modules/vue-loader/lib/loaders/templateLoader.js??ruleSet%5B1%5D.rules%5B1%5D!./node_modules/pug-plain-loader/index.js!./node_modules/vue-loader/lib/index.js??vue-loader-options");
+
+/***/ }),
+
 /***/ "./node_modules/vue-loader/lib/loaders/templateLoader.js??ruleSet[1].rules[1]!./node_modules/pug-plain-loader/index.js!./node_modules/vue-loader/lib/index.js??vue-loader-options!./ui/src/components/cTextField.vue?vue&type=template&id=b5bb9caa&scoped=true&lang=pug&":
 /*!*******************************************************************************************************************************************************************************************************************************************************************************!*\
   !*** ./node_modules/vue-loader/lib/loaders/templateLoader.js??ruleSet[1].rules[1]!./node_modules/pug-plain-loader/index.js!./node_modules/vue-loader/lib/index.js??vue-loader-options!./ui/src/components/cTextField.vue?vue&type=template&id=b5bb9caa&scoped=true&lang=pug& ***!
@@ -1317,6 +1537,17 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 
 /***/ }),
 
+/***/ "./node_modules/vue-loader/lib/loaders/templateLoader.js??ruleSet[1].rules[1]!./node_modules/pug-plain-loader/index.js!./node_modules/vue-loader/lib/index.js??vue-loader-options!./ui/src/components/cView.vue?vue&type=template&id=7c928137&lang=pug&":
+/*!**************************************************************************************************************************************************************************************************************************************************************!*\
+  !*** ./node_modules/vue-loader/lib/loaders/templateLoader.js??ruleSet[1].rules[1]!./node_modules/pug-plain-loader/index.js!./node_modules/vue-loader/lib/index.js??vue-loader-options!./ui/src/components/cView.vue?vue&type=template&id=7c928137&lang=pug& ***!
+  \**************************************************************************************************************************************************************************************************************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   render: () => (/* binding */ render),\n/* harmony export */   staticRenderFns: () => (/* binding */ staticRenderFns)\n/* harmony export */ });\nvar render = function render() {\n  var _vm = this,\n    _c = _vm._self._c\n  return _c(\n    \"div\",\n    { staticClass: \"c-view\" },\n    [\n      _vm.loading\n        ? _c(\n            \"div\",\n            { staticClass: \"c-view__progress-wrapper\" },\n            [\n              _c(\"c-icon\", {\n                staticClass: \"primary--text _ma_auto\",\n                attrs: {\n                  icon: _vm.icons.connectLoaderAnimated,\n                  size: 76,\n                  color: \"accent\",\n                },\n              }),\n            ],\n            1\n          )\n        : [\n            _c(\"c-nav-bar\", {\n              staticClass: \"c-view__navigation\",\n              attrs: {\n                \"assistive-title\": _vm.assistiveTitle,\n                \"back-route\": _vm.backRoute,\n                \"current-tab\": _vm.localCurrentTab,\n                title: _vm.title,\n                tabs: _vm.tabs,\n              },\n              on: {\n                \"update:currentTab\": function ($event) {\n                  _vm.localCurrentTab = $event\n                },\n                \"update:current-tab\": function ($event) {\n                  _vm.localCurrentTab = $event\n                },\n              },\n              scopedSlots: _vm._u(\n                [\n                  {\n                    key: \"logo\",\n                    fn: function () {\n                      return [_vm._t(\"logo\")]\n                    },\n                    proxy: true,\n                  },\n                  {\n                    key: \"title\",\n                    fn: function () {\n                      return [_vm._t(\"title\")]\n                    },\n                    proxy: true,\n                  },\n                  {\n                    key: \"actions\",\n                    fn: function () {\n                      return [_vm._t(\"actions\")]\n                    },\n                    proxy: true,\n                  },\n                ],\n                null,\n                true\n              ),\n            }),\n            _c(\"div\", { staticClass: \"c-view__content-holder\" }, [\n              _c(\n                \"div\",\n                {\n                  staticClass: \"c-view__content\",\n                  class: { \"c-view__content_padded\": !_vm.noPadded },\n                },\n                [_vm._t(\"default\")],\n                2\n              ),\n            ]),\n          ],\n    ],\n    2\n  )\n}\nvar staticRenderFns = []\nrender._withStripped = true\n\n\n\n//# sourceURL=webpack://connect-extension-xvs/./ui/src/components/cView.vue?./node_modules/vue-loader/lib/loaders/templateLoader.js??ruleSet%5B1%5D.rules%5B1%5D!./node_modules/pug-plain-loader/index.js!./node_modules/vue-loader/lib/index.js??vue-loader-options");
+
+/***/ }),
+
 /***/ "./node_modules/vue-loader/lib/loaders/templateLoader.js??ruleSet[1].rules[1]!./node_modules/pug-plain-loader/index.js!./node_modules/vue-loader/lib/index.js??vue-loader-options!./ui/src/pages/App.vue?vue&type=template&id=37f0221e&lang=pug&":
 /*!*******************************************************************************************************************************************************************************************************************************************************!*\
   !*** ./node_modules/vue-loader/lib/loaders/templateLoader.js??ruleSet[1].rules[1]!./node_modules/pug-plain-loader/index.js!./node_modules/vue-loader/lib/index.js??vue-loader-options!./ui/src/pages/App.vue?vue&type=template&id=37f0221e&lang=pug& ***!
@@ -1335,7 +1566,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   render: () => (/* binding */ render),\n/* harmony export */   staticRenderFns: () => (/* binding */ staticRenderFns)\n/* harmony export */ });\nvar render = function render() {\n  var _vm = this,\n    _c = _vm._self._c\n  return _c(\n    \"div\",\n    { staticClass: \"dashboard\" },\n    [\n      _c(\"div\", { staticClass: \"title\" }, [_vm._v(\"XVS Extension\")]),\n      _c(\n        \"ui-tabs\",\n        [\n          _c(\"ui-tab\", { attrs: { default: \"\", tab: \"Deployments\" } }, [\n            _vm._v(\"Deployments\"),\n          ]),\n          _c(\"ui-tab\", { attrs: { tab: \"Requests\" } }, [_vm._v(\"Requests\")]),\n          _c(\n            \"ui-pad\",\n            { attrs: { pad: \"Deployments\" } },\n            [_c(\"deployments-table\")],\n            1\n          ),\n          _c(\"ui-pad\", { attrs: { pad: \"Requests\" } }, [\n            _c(\"div\", { staticClass: \"subs-criptions-tab\" }, [\n              _vm._v(\"Requests\"),\n            ]),\n          ]),\n        ],\n        1\n      ),\n    ],\n    1\n  )\n}\nvar staticRenderFns = []\nrender._withStripped = true\n\n\n\n//# sourceURL=webpack://connect-extension-xvs/./ui/src/pages/Dashboard.vue?./node_modules/vue-loader/lib/loaders/templateLoader.js??ruleSet%5B1%5D.rules%5B1%5D!./node_modules/pug-plain-loader/index.js!./node_modules/vue-loader/lib/index.js??vue-loader-options");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   render: () => (/* binding */ render),\n/* harmony export */   staticRenderFns: () => (/* binding */ staticRenderFns)\n/* harmony export */ });\nvar render = function render() {\n  var _vm = this,\n    _c = _vm._self._c\n  return _c(\n    \"c-view\",\n    {\n      staticClass: \"dashboard\",\n      attrs: {\n        title: \"XVS Extension\",\n        tabs: _vm.tabs,\n        \"current-tab\": _vm.currentTab,\n        \"no-padded\": \"\",\n      },\n      on: {\n        \"update:currentTab\": function ($event) {\n          _vm.currentTab = $event\n        },\n        \"update:current-tab\": function ($event) {\n          _vm.currentTab = $event\n        },\n      },\n    },\n    [\n      _vm.currentTab?.value === \"deployments\"\n        ? _c(\"deployments-table\")\n        : _vm.currentTab?.value === \"requests\"\n        ? _c(\"div\", { staticClass: \"subscriptions-tab\" }, [_vm._v(\"Requests\")])\n        : _vm._e(),\n    ],\n    1\n  )\n}\nvar staticRenderFns = []\nrender._withStripped = true\n\n\n\n//# sourceURL=webpack://connect-extension-xvs/./ui/src/pages/Dashboard.vue?./node_modules/vue-loader/lib/loaders/templateLoader.js??ruleSet%5B1%5D.rules%5B1%5D!./node_modules/pug-plain-loader/index.js!./node_modules/vue-loader/lib/index.js??vue-loader-options");
 
 /***/ }),
 
@@ -1357,7 +1588,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var vue_
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _pages_Dashboard_vue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @/pages/Dashboard.vue */ \"./ui/src/pages/Dashboard.vue\");\n\n\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ([\n  {\n    path: '/',\n    redirect: { name: 'Dashboard', params: { tab: 'deployments' } },\n  },\n  {\n    name: 'Dashboard',\n    path: '/dashboard/:tab(deployments|requests)?',\n    component: _pages_Dashboard_vue__WEBPACK_IMPORTED_MODULE_0__[\"default\"],\n  },\n  {\n    name: 'DeploymentDetails',\n    path: '/deployments/:id/:tab(marketplaces|ppr|configuration)?',\n    component: () => __webpack_require__.e(/*! import() | deployment-details */ \"deployment-details\").then(__webpack_require__.bind(__webpack_require__, /*! @/pages/DeploymentDetails.vue */ \"./ui/src/pages/DeploymentDetails.vue\")),\n  },\n]);\n\n\n//# sourceURL=webpack://connect-extension-xvs/./ui/src/routes/index.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _pages_Dashboard_vue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @/pages/Dashboard.vue */ \"./ui/src/pages/Dashboard.vue\");\n\n\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ([\n  {\n    path: '/',\n    redirect: { name: 'Dashboard', params: { tab: 'deployments' } },\n  },\n  {\n    name: 'Dashboard',\n    path: '/dashboard/:tab(deployments|requests)?',\n    component: _pages_Dashboard_vue__WEBPACK_IMPORTED_MODULE_0__[\"default\"],\n  },\n  {\n    name: 'DeploymentDetails',\n    path: '/deployments/:id/:tab(marketplaces|ppr|configuration)?',\n    component: () => Promise.all(/*! import() | deployment-details */[__webpack_require__.e(\"vendors\"), __webpack_require__.e(\"deployment-details\")]).then(__webpack_require__.bind(__webpack_require__, /*! @/pages/DeploymentDetails.vue */ \"./ui/src/pages/DeploymentDetails.vue\")),\n  },\n]);\n\n\n//# sourceURL=webpack://connect-extension-xvs/./ui/src/routes/index.js?");
 
 /***/ }),
 
@@ -1489,7 +1720,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   getChart: () => (/* binding */ getChart),\n/* harmony export */   getDeployments: () => (/* binding */ getDeployments),\n/* harmony export */   getMarketplaces: () => (/* binding */ getMarketplaces),\n/* harmony export */   getSettings: () => (/* binding */ getSettings),\n/* harmony export */   processCheckboxes: () => (/* binding */ processCheckboxes),\n/* harmony export */   processMarketplaces: () => (/* binding */ processMarketplaces),\n/* harmony export */   processSelectedMarketplaces: () => (/* binding */ processSelectedMarketplaces),\n/* harmony export */   updateSettings: () => (/* binding */ updateSettings)\n/* harmony export */ });\n\n/*\nCopyright (c) 2023, Ingram Micro\nAll rights reserved.\n*/\n// API calls to the backend\nconst getSettings = () => fetch('/api/settings').then((response) => response.json());\n\nconst getChart = () => fetch('/api/chart').then((response) => response.json());\n\nconst getMarketplaces = () => fetch('/api/marketplaces').then((response) => response.json());\n\nconst getDeployments = () => fetch('/api/deployments').then((response) => response.json());\n\nconst updateSettings = (settings) => fetch('/api/settings', {\n  method: 'POST',\n  headers: { 'Content-Type': 'application/json' },\n  body: JSON.stringify(settings),\n}).then((response) => response.json());\n\n// data processing\nconst processMarketplaces = (\n  allMarketplaces,\n  selectedMarketplaces,\n) => allMarketplaces.map((marketplace) => {\n  const checked = !!selectedMarketplaces.find(\n    (selectedMarketplace) => selectedMarketplace.id === marketplace.id,\n  );\n\n  return { ...marketplace, checked };\n});\n\nconst processSelectedMarketplaces = (\n  allMarketplaces,\n  checkboxes,\n) => checkboxes.map((checkbox) => allMarketplaces.find(\n  (marketplace) => marketplace.id === checkbox.value,\n));\n\nconst processCheckboxes = (\n  checkboxes,\n) => Array.from(checkboxes).filter(checkbox => checkbox.checked);\n\n\n//# sourceURL=webpack://connect-extension-xvs/./ui/src/utils.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   getChart: () => (/* binding */ getChart),\n/* harmony export */   getDeployment: () => (/* binding */ getDeployment),\n/* harmony export */   getDeployments: () => (/* binding */ getDeployments),\n/* harmony export */   getMarketplaces: () => (/* binding */ getMarketplaces),\n/* harmony export */   getSettings: () => (/* binding */ getSettings),\n/* harmony export */   processCheckboxes: () => (/* binding */ processCheckboxes),\n/* harmony export */   processMarketplaces: () => (/* binding */ processMarketplaces),\n/* harmony export */   processSelectedMarketplaces: () => (/* binding */ processSelectedMarketplaces),\n/* harmony export */   updateSettings: () => (/* binding */ updateSettings)\n/* harmony export */ });\n\n/*\nCopyright (c) 2023, Ingram Micro\nAll rights reserved.\n*/\n// API calls to the backend\nconst getSettings = () => fetch('/api/settings').then((response) => response.json());\n\nconst getChart = () => fetch('/api/chart').then((response) => response.json());\n\nconst getMarketplaces = () => fetch('/api/marketplaces').then((response) => response.json());\n\nconst getDeployments = () => fetch('/api/deployments').then((response) => response.json());\n\nconst getDeployment = (id) => fetch(`/api/deployments/${id}`).then((response) => response.json());\n\nconst updateSettings = (settings) => fetch('/api/settings', {\n  method: 'POST',\n  headers: { 'Content-Type': 'application/json' },\n  body: JSON.stringify(settings),\n}).then((response) => response.json());\n\n// data processing\nconst processMarketplaces = (\n  allMarketplaces,\n  selectedMarketplaces,\n) => allMarketplaces.map((marketplace) => {\n  const checked = !!selectedMarketplaces.find(\n    (selectedMarketplace) => selectedMarketplace.id === marketplace.id,\n  );\n\n  return { ...marketplace, checked };\n});\n\nconst processSelectedMarketplaces = (\n  allMarketplaces,\n  checkboxes,\n) => checkboxes.map((checkbox) => allMarketplaces.find(\n  (marketplace) => marketplace.id === checkbox.value,\n));\n\nconst processCheckboxes = (\n  checkboxes,\n) => Array.from(checkboxes).filter(checkbox => checkbox.checked);\n\n\n//# sourceURL=webpack://connect-extension-xvs/./ui/src/utils.js?");
 
 /***/ })
 
@@ -1600,7 +1831,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /******/ 		// This function allow to reference async chunks
 /******/ 		__webpack_require__.u = (chunkId) => {
 /******/ 			// return url for filenames based on template
-/******/ 			return "" + chunkId + "." + "c49c14732d8dd3ed74a7" + ".js";
+/******/ 			return "" + chunkId + "." + "aafa59e785fc54f79178" + ".js";
 /******/ 		};
 /******/ 	})();
 /******/ 	
@@ -1609,7 +1840,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /******/ 		// This function allow to reference async chunks
 /******/ 		__webpack_require__.miniCssF = (chunkId) => {
 /******/ 			// return url for filenames based on template
-/******/ 			return undefined;
+/******/ 			return "" + chunkId + ".css";
 /******/ 		};
 /******/ 	})();
 /******/ 	
@@ -1719,6 +1950,83 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /******/ 		__webpack_require__.p = scriptUrl;
 /******/ 	})();
 /******/ 	
+/******/ 	/* webpack/runtime/css loading */
+/******/ 	(() => {
+/******/ 		if (typeof document === "undefined") return;
+/******/ 		var createStylesheet = (chunkId, fullhref, oldTag, resolve, reject) => {
+/******/ 			var linkTag = document.createElement("link");
+/******/ 		
+/******/ 			linkTag.rel = "stylesheet";
+/******/ 			linkTag.type = "text/css";
+/******/ 			var onLinkComplete = (event) => {
+/******/ 				// avoid mem leaks.
+/******/ 				linkTag.onerror = linkTag.onload = null;
+/******/ 				if (event.type === 'load') {
+/******/ 					resolve();
+/******/ 				} else {
+/******/ 					var errorType = event && (event.type === 'load' ? 'missing' : event.type);
+/******/ 					var realHref = event && event.target && event.target.href || fullhref;
+/******/ 					var err = new Error("Loading CSS chunk " + chunkId + " failed.\n(" + realHref + ")");
+/******/ 					err.code = "CSS_CHUNK_LOAD_FAILED";
+/******/ 					err.type = errorType;
+/******/ 					err.request = realHref;
+/******/ 					if (linkTag.parentNode) linkTag.parentNode.removeChild(linkTag)
+/******/ 					reject(err);
+/******/ 				}
+/******/ 			}
+/******/ 			linkTag.onerror = linkTag.onload = onLinkComplete;
+/******/ 			linkTag.href = fullhref;
+/******/ 		
+/******/ 			if (oldTag) {
+/******/ 				oldTag.parentNode.insertBefore(linkTag, oldTag.nextSibling);
+/******/ 			} else {
+/******/ 				document.head.appendChild(linkTag);
+/******/ 			}
+/******/ 			return linkTag;
+/******/ 		};
+/******/ 		var findStylesheet = (href, fullhref) => {
+/******/ 			var existingLinkTags = document.getElementsByTagName("link");
+/******/ 			for(var i = 0; i < existingLinkTags.length; i++) {
+/******/ 				var tag = existingLinkTags[i];
+/******/ 				var dataHref = tag.getAttribute("data-href") || tag.getAttribute("href");
+/******/ 				if(tag.rel === "stylesheet" && (dataHref === href || dataHref === fullhref)) return tag;
+/******/ 			}
+/******/ 			var existingStyleTags = document.getElementsByTagName("style");
+/******/ 			for(var i = 0; i < existingStyleTags.length; i++) {
+/******/ 				var tag = existingStyleTags[i];
+/******/ 				var dataHref = tag.getAttribute("data-href");
+/******/ 				if(dataHref === href || dataHref === fullhref) return tag;
+/******/ 			}
+/******/ 		};
+/******/ 		var loadStylesheet = (chunkId) => {
+/******/ 			return new Promise((resolve, reject) => {
+/******/ 				var href = __webpack_require__.miniCssF(chunkId);
+/******/ 				var fullhref = __webpack_require__.p + href;
+/******/ 				if(findStylesheet(href, fullhref)) return resolve();
+/******/ 				createStylesheet(chunkId, fullhref, null, resolve, reject);
+/******/ 			});
+/******/ 		}
+/******/ 		// object to store loaded CSS chunks
+/******/ 		var installedCssChunks = {
+/******/ 			"index": 0
+/******/ 		};
+/******/ 		
+/******/ 		__webpack_require__.f.miniCss = (chunkId, promises) => {
+/******/ 			var cssChunks = {"deployment-details":1};
+/******/ 			if(installedCssChunks[chunkId]) promises.push(installedCssChunks[chunkId]);
+/******/ 			else if(installedCssChunks[chunkId] !== 0 && cssChunks[chunkId]) {
+/******/ 				promises.push(installedCssChunks[chunkId] = loadStylesheet(chunkId).then(() => {
+/******/ 					installedCssChunks[chunkId] = 0;
+/******/ 				}, (e) => {
+/******/ 					delete installedCssChunks[chunkId];
+/******/ 					throw e;
+/******/ 				}));
+/******/ 			}
+/******/ 		};
+/******/ 		
+/******/ 		// no hmr
+/******/ 	})();
+/******/ 	
 /******/ 	/* webpack/runtime/jsonp chunk loading */
 /******/ 	(() => {
 /******/ 		// no baseURI
diff --git a/connect_ext_ppr/static/index.html b/connect_ext_ppr/static/index.html
index 2835017..a03971c 100644
--- a/connect_ext_ppr/static/index.html
+++ b/connect_ext_ppr/static/index.html
@@ -11,12 +11,10 @@
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap" rel="stylesheet">
     <title>Index</title>
-<script defer src="vendors.06b6d30eb8d61833c496.js"></script><script defer src="index.0000a39b9584a3f88cde.js"></script><link href="index.93a91c4cd8a19a7bbaad.css" rel="stylesheet"></head>
+<script defer src="vendors.7e5afe9e4e5d6999e52c.js"></script><script defer src="index.850f61939486e367d210.js"></script><link href="index.0d3dd9a3b3207aeb0dae.css" rel="stylesheet"></head>
 
 <body>
-    <div id="loader"></div>
-    <div id="app">
-    </div>
+    <div id="app"></div>
 </body>
 
 </html>
diff --git a/connect_ext_ppr/static/settings.ca8e500f37a67182056a.js b/connect_ext_ppr/static/settings.4553496e587cf62b3d76.js
similarity index 89%
rename from connect_ext_ppr/static/settings.ca8e500f37a67182056a.js
rename to connect_ext_ppr/static/settings.4553496e587cf62b3d76.js
index 9960439..ab51a3f 100644
--- a/connect_ext_ppr/static/settings.ca8e500f37a67182056a.js
+++ b/connect_ext_ppr/static/settings.4553496e587cf62b3d76.js
@@ -66,7 +66,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var vue_
   \*************************/
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   getChart: () => (/* binding */ getChart),\n/* harmony export */   getDeployments: () => (/* binding */ getDeployments),\n/* harmony export */   getMarketplaces: () => (/* binding */ getMarketplaces),\n/* harmony export */   getSettings: () => (/* binding */ getSettings),\n/* harmony export */   processCheckboxes: () => (/* binding */ processCheckboxes),\n/* harmony export */   processMarketplaces: () => (/* binding */ processMarketplaces),\n/* harmony export */   processSelectedMarketplaces: () => (/* binding */ processSelectedMarketplaces),\n/* harmony export */   updateSettings: () => (/* binding */ updateSettings)\n/* harmony export */ });\n\n/*\nCopyright (c) 2023, Ingram Micro\nAll rights reserved.\n*/\n// API calls to the backend\nconst getSettings = () => fetch('/api/settings').then((response) => response.json());\n\nconst getChart = () => fetch('/api/chart').then((response) => response.json());\n\nconst getMarketplaces = () => fetch('/api/marketplaces').then((response) => response.json());\n\nconst getDeployments = () => fetch('/api/deployments').then((response) => response.json());\n\nconst updateSettings = (settings) => fetch('/api/settings', {\n  method: 'POST',\n  headers: { 'Content-Type': 'application/json' },\n  body: JSON.stringify(settings),\n}).then((response) => response.json());\n\n// data processing\nconst processMarketplaces = (\n  allMarketplaces,\n  selectedMarketplaces,\n) => allMarketplaces.map((marketplace) => {\n  const checked = !!selectedMarketplaces.find(\n    (selectedMarketplace) => selectedMarketplace.id === marketplace.id,\n  );\n\n  return { ...marketplace, checked };\n});\n\nconst processSelectedMarketplaces = (\n  allMarketplaces,\n  checkboxes,\n) => checkboxes.map((checkbox) => allMarketplaces.find(\n  (marketplace) => marketplace.id === checkbox.value,\n));\n\nconst processCheckboxes = (\n  checkboxes,\n) => Array.from(checkboxes).filter(checkbox => checkbox.checked);\n\n\n//# sourceURL=webpack://connect-extension-xvs/./ui/src/utils.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   getChart: () => (/* binding */ getChart),\n/* harmony export */   getDeployment: () => (/* binding */ getDeployment),\n/* harmony export */   getDeployments: () => (/* binding */ getDeployments),\n/* harmony export */   getMarketplaces: () => (/* binding */ getMarketplaces),\n/* harmony export */   getSettings: () => (/* binding */ getSettings),\n/* harmony export */   processCheckboxes: () => (/* binding */ processCheckboxes),\n/* harmony export */   processMarketplaces: () => (/* binding */ processMarketplaces),\n/* harmony export */   processSelectedMarketplaces: () => (/* binding */ processSelectedMarketplaces),\n/* harmony export */   updateSettings: () => (/* binding */ updateSettings)\n/* harmony export */ });\n\n/*\nCopyright (c) 2023, Ingram Micro\nAll rights reserved.\n*/\n// API calls to the backend\nconst getSettings = () => fetch('/api/settings').then((response) => response.json());\n\nconst getChart = () => fetch('/api/chart').then((response) => response.json());\n\nconst getMarketplaces = () => fetch('/api/marketplaces').then((response) => response.json());\n\nconst getDeployments = () => fetch('/api/deployments').then((response) => response.json());\n\nconst getDeployment = (id) => fetch(`/api/deployments/${id}`).then((response) => response.json());\n\nconst updateSettings = (settings) => fetch('/api/settings', {\n  method: 'POST',\n  headers: { 'Content-Type': 'application/json' },\n  body: JSON.stringify(settings),\n}).then((response) => response.json());\n\n// data processing\nconst processMarketplaces = (\n  allMarketplaces,\n  selectedMarketplaces,\n) => allMarketplaces.map((marketplace) => {\n  const checked = !!selectedMarketplaces.find(\n    (selectedMarketplace) => selectedMarketplace.id === marketplace.id,\n  );\n\n  return { ...marketplace, checked };\n});\n\nconst processSelectedMarketplaces = (\n  allMarketplaces,\n  checkboxes,\n) => checkboxes.map((checkbox) => allMarketplaces.find(\n  (marketplace) => marketplace.id === checkbox.value,\n));\n\nconst processCheckboxes = (\n  checkboxes,\n) => Array.from(checkboxes).filter(checkbox => checkbox.checked);\n\n\n//# sourceURL=webpack://connect-extension-xvs/./ui/src/utils.js?");
 
 /***/ })
 
diff --git a/connect_ext_ppr/static/settings.81782caeb514cc6ff58a.css b/connect_ext_ppr/static/settings.464cc3b352ceb58aad51.css
similarity index 84%
rename from connect_ext_ppr/static/settings.81782caeb514cc6ff58a.css
rename to connect_ext_ppr/static/settings.464cc3b352ceb58aad51.css
index 82a5846..36f6eba 100644
--- a/connect_ext_ppr/static/settings.81782caeb514cc6ff58a.css
+++ b/connect_ext_ppr/static/settings.464cc3b352ceb58aad51.css
@@ -1958,326 +1958,16 @@ select[materialize]:disabled {
 Copyright (c) 2023, Ingram Micro
 All rights reserved.
 */
-body {
-    font-family: "Roboto", sans-serif;
-}
-
-.hidden {
-    display: none !important;
-}
-
-#loader {
-    width: 48px;
-    height: 48px;
-    border: 5px solid white;
-    border-bottom-color: #1565c0;
-    border-radius: 50%;
-    display: block;
-    margin: 0 auto;
-    box-sizing: border-box;
-    animation: rotation 1s linear infinite;
-    }
-
-    @keyframes rotation {
-    0% {
-        transform: rotate(0deg);
-    }
-    100% {
-        transform: rotate(360deg);
-    }
-}
-
-
-h1 {
-    font-weight: 500;
-    font-size: 20px;
-}
-
-
-.switch {
-    z-index: 0;
-    position: relative;
-    display: inline-block;
-    color: rgba(var(--pure-material-onsurface-rgb, 0, 0, 0), 0.87);
-    font-family: var(--pure-material-font, "Roboto", "Segoe UI", BlinkMacSystemFont, system-ui, -apple-system);
-    font-size: 16px;
-    line-height: 1.5;
-}
-
-/* Input */
-.switch>input {
-    appearance: none;
-    -moz-appearance: none;
-    -webkit-appearance: none;
-    z-index: -1;
-    position: absolute;
-    right: 6px;
-    top: -8px;
-    display: block;
-    margin: 0;
-    border-radius: 50%;
-    width: 40px;
-    height: 40px;
-    background-color: rgba(var(--pure-material-onsurface-rgb, 0, 0, 0), 0.38);
-    outline: none;
-    opacity: 0;
-    transform: scale(1);
-    pointer-events: none;
-    transition: opacity 0.3s 0.1s, transform 0.2s 0.1s;
-}
-
-/* Span */
-.switch>span {
-    display: inline-block;
-    width: 100%;
-    cursor: pointer;
-}
-
-/* Track */
-.switch>span::before {
-    content: "";
-    float: right;
-    display: inline-block;
-    margin: 5px 0 5px 10px;
-    border-radius: 7px;
-    width: 36px;
-    height: 14px;
-    background-color: rgba(var(--pure-material-onsurface-rgb, 0, 0, 0), 0.38);
-    vertical-align: top;
-    transition: background-color 0.2s, opacity 0.2s;
-}
-
-/* Thumb */
-.switch>span::after {
-    content: "";
-    position: absolute;
-    top: 2px;
-    right: 16px;
-    border-radius: 50%;
-    width: 20px;
-    height: 20px;
-    background-color: rgb(var(--pure-material-onprimary-rgb, 255, 255, 255));
-    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
-    transition: background-color 0.2s, transform 0.2s;
-}
-
-/* Checked */
-.switch>input:checked {
-    right: -10px;
-    background-color: rgb(var(--pure-material-primary-rgb, 33, 150, 243));
-}
-
-.switch>input:checked+span::before {
-    background-color: rgba(var(--pure-material-primary-rgb, 33, 150, 243), 0.6);
+:root {
+  --theme_primary: #1565c0;
+  --theme_primary_rgb: 21,101,192;
+  --theme_accent: #4797f2;
+  --theme_accent_rgb: 71,151,242;
+  --theme_contrast: #ffffff;
+  --theme_contrast_rgb: 255,255,255;
 }
 
-.switch>input:checked+span::after {
-    background-color: rgb(var(--pure-material-primary-rgb, 33, 150, 243));
-    transform: translateX(16px);
-}
-
-/* Hover, Focus */
-.switch:hover>input {
-    opacity: 0.04;
-}
-
-.switch>input:focus {
-    opacity: 0.12;
-}
-
-.switch:hover>input:focus {
-    opacity: 0.16;
-}
-
-/* Active */
-.switch>input:active {
-    opacity: 1;
-    transform: scale(0);
-    transition: transform 0s, opacity 0s;
-}
-
-.switch>input:active+span::before {
-    background-color: rgba(var(--pure-material-primary-rgb, 33, 150, 243), 0.6);
-}
-
-.switch>input:checked:active+span::before {
-    background-color: rgba(var(--pure-material-onsurface-rgb, 0, 0, 0), 0.38);
-}
-
-/* Disabled */
-.switch>input:disabled {
-    opacity: 0;
-}
-
-.switch>input:disabled+span {
-    color: rgb(var(--pure-material-onsurface-rgb, 0, 0, 0));
-    opacity: 0.38;
-    cursor: default;
-}
-
-.switch>input:disabled+span::before {
-    background-color: rgba(var(--pure-material-onsurface-rgb, 0, 0, 0), 0.38);
-}
-
-.switch>input:checked:disabled+span::before {
-    background-color: rgba(var(--pure-material-primary-rgb, 33, 150, 243), 0.6);
-}
-
-.button-container {
-    display: flex;
-    flex-direction: row-reverse;
-    align-items: flex-end;
-    margin-right: 15px;
-}
-
-.button {
-    position: relative;
-    display: inline-block;
-    box-sizing: border-box;
-    border: none;
-    border-radius: 4px;
-    padding: 0 8px;
-    min-width: 64px;
-    height: 36px;
-    vertical-align: middle;
-    text-align: center;
-    text-overflow: ellipsis;
-    text-transform: uppercase;
-    color: rgb(var(--pure-material-primary-rgb, 33, 150, 243));
-    background-color: transparent;
-    font-family: var(--pure-material-font, "Roboto", "Segoe UI", BlinkMacSystemFont, system-ui, -apple-system);
-    font-size: 14px;
-    font-weight: 500;
-    line-height: 36px;
-    overflow: hidden;
-    outline: none;
-    cursor: pointer;
-}
-
-.button::-moz-focus-inner {
-    border: none;
-}
-
-/* Overlay */
-.button::before {
-    content: "";
-    position: absolute;
-    left: 0;
-    right: 0;
-    top: 0;
-    bottom: 0;
-    background-color: currentColor;
-    opacity: 0;
-    transition: opacity 0.2s;
-}
-
-/* Ripple */
-.button::after {
-    content: "";
-    position: absolute;
-    left: 50%;
-    top: 50%;
-    border-radius: 50%;
-    padding: 50%;
-    width: 32px;
-    height: 32px;
-    background-color: currentColor;
-    opacity: 0;
-    transform: translate(-50%, -50%) scale(1);
-    transition: opacity 1s, transform 0.5s;
-}
-
-/* Hover, Focus */
-.button:hover::before {
-    opacity: 0.04;
-}
-
-.button:focus::before {
-    opacity: 0.12;
-}
-
-.button:hover:focus::before {
-    opacity: 0.16;
-}
-
-/* Active */
-.button:active::after {
-    opacity: 0.16;
-    transform: translate(-50%, -50%) scale(0);
-    transition: transform 0s;
-}
-
-/* Disabled */
-.button:disabled {
-    color: rgba(var(--pure-material-onsurface-rgb, 0, 0, 0), 0.38);
-    background-color: transparent;
-    cursor: initial;
-}
-
-.button:disabled::before {
-    opacity: 0;
-}
-
-.button:disabled::after {
-    opacity: 0;
-}
-
-.list-wrapper {
-    margin: 30px auto;
-}
-
-.list {
-    background-color: #FFF;
-    margin: 0;
-    padding: 15px;
-    border-radius: 2px;
-}
-
-.list .list-item {
-    display: flex;
-    padding: 10px 5px;
-}
-
-.list .list-item .switch {
-    display: flex;
-    align-items: center;
-}
-
-.list .list-item:not(:last-child) {
-    border-bottom: 1px solid #EEE;
-}
-
-.list .image {
-    flex-shrink: 0;
-    height: 80px;
-}
-
-.list .list-item-image img {
-    width: 70px;
-    height: 70px;
-}
-
-.list .list-item-content {
-    width: 90%;
-    padding: 0 20px;
-}
-
-.list .list-item-content h4 {
-    margin: 0;
-    font-size: 18px;
-    margin-top: 15px;
-}
-
-.list .list-item-content p {
-    margin-top: 5px;
-    color: #AAA;
-    margin-bottom: 0;
-}
-
-.main-container {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-evenly;
-    align-items: center;
+body {
+  font-family: "Roboto", sans-serif;
 }
 
diff --git a/connect_ext_ppr/static/settings.html b/connect_ext_ppr/static/settings.html
index 5fcbde9..bdb1182 100644
--- a/connect_ext_ppr/static/settings.html
+++ b/connect_ext_ppr/static/settings.html
@@ -11,7 +11,7 @@
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap" rel="stylesheet">
     <title>Settings</title>
-<script defer src="vendors.06b6d30eb8d61833c496.js"></script><script defer src="settings.ca8e500f37a67182056a.js"></script><link href="settings.81782caeb514cc6ff58a.css" rel="stylesheet"></head>
+<script defer src="vendors.7e5afe9e4e5d6999e52c.js"></script><script defer src="settings.4553496e587cf62b3d76.js"></script><link href="settings.464cc3b352ceb58aad51.css" rel="stylesheet"></head>
 
 <body>
     <div id="loader"></div>
diff --git a/connect_ext_ppr/static/vendors.06b6d30eb8d61833c496.js b/connect_ext_ppr/static/vendors.7e5afe9e4e5d6999e52c.js
similarity index 99%
rename from connect_ext_ppr/static/vendors.06b6d30eb8d61833c496.js
rename to connect_ext_ppr/static/vendors.7e5afe9e4e5d6999e52c.js
index c8ee793..9137dbb 100644
--- a/connect_ext_ppr/static/vendors.06b6d30eb8d61833c496.js
+++ b/connect_ext_ppr/static/vendors.7e5afe9e4e5d6999e52c.js
@@ -1505,6 +1505,17 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 
 /***/ }),
 
+/***/ "./node_modules/@cloudblueconnect/material-svg/icons/google/arrow_back/baseline.svg":
+/*!******************************************************************************************!*\
+  !*** ./node_modules/@cloudblueconnect/material-svg/icons/google/arrow_back/baseline.svg ***!
+  \******************************************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _svg_baker_runtime_browser_symbol_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../../../../svg-baker-runtime/browser-symbol.js */ \"./node_modules/svg-baker-runtime/browser-symbol.js\");\n/* harmony import */ var _svg_baker_runtime_browser_symbol_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_svg_baker_runtime_browser_symbol_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _svg_sprite_loader_runtime_browser_sprite_build_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../../../svg-sprite-loader/runtime/browser-sprite.build.js */ \"./node_modules/svg-sprite-loader/runtime/browser-sprite.build.js\");\n/* harmony import */ var _svg_sprite_loader_runtime_browser_sprite_build_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_svg_sprite_loader_runtime_browser_sprite_build_js__WEBPACK_IMPORTED_MODULE_1__);\n\n\nvar symbol = new (_svg_baker_runtime_browser_symbol_js__WEBPACK_IMPORTED_MODULE_0___default())({\n  \"id\": \"arrow_back_baseline_3bd6d7\",\n  \"use\": \"arrow_back_baseline_3bd6d7-usage\",\n  \"viewBox\": \"0 0 24 24\",\n  \"content\": \"<symbol xmlns=\\\"http://www.w3.org/2000/svg\\\" viewBox=\\\"0 0 24 24\\\" id=\\\"arrow_back_baseline_3bd6d7\\\"><path d=\\\"M0 0h24v24H0z\\\" fill=\\\"none\\\" /><path d=\\\"M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z\\\" /></symbol>\"\n});\nvar result = _svg_sprite_loader_runtime_browser_sprite_build_js__WEBPACK_IMPORTED_MODULE_1___default().add(symbol);\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (symbol);\n\n//# sourceURL=webpack://connect-extension-xvs/./node_modules/@cloudblueconnect/material-svg/icons/google/arrow_back/baseline.svg?");
+
+/***/ }),
+
 /***/ "./node_modules/@cloudblueconnect/material-svg/icons/google/arrow_downward/baseline.svg":
 /*!**********************************************************************************************!*\
   !*** ./node_modules/@cloudblueconnect/material-svg/icons/google/arrow_downward/baseline.svg ***!
@@ -1747,6 +1758,17 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 
 /***/ }),
 
+/***/ "./node_modules/@cloudblueconnect/material-svg/icons/google/sync/baseline.svg":
+/*!************************************************************************************!*\
+  !*** ./node_modules/@cloudblueconnect/material-svg/icons/google/sync/baseline.svg ***!
+  \************************************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _svg_baker_runtime_browser_symbol_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../../../../svg-baker-runtime/browser-symbol.js */ \"./node_modules/svg-baker-runtime/browser-symbol.js\");\n/* harmony import */ var _svg_baker_runtime_browser_symbol_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_svg_baker_runtime_browser_symbol_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _svg_sprite_loader_runtime_browser_sprite_build_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../../../svg-sprite-loader/runtime/browser-sprite.build.js */ \"./node_modules/svg-sprite-loader/runtime/browser-sprite.build.js\");\n/* harmony import */ var _svg_sprite_loader_runtime_browser_sprite_build_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_svg_sprite_loader_runtime_browser_sprite_build_js__WEBPACK_IMPORTED_MODULE_1__);\n\n\nvar symbol = new (_svg_baker_runtime_browser_symbol_js__WEBPACK_IMPORTED_MODULE_0___default())({\n  \"id\": \"sync_baseline_2598ce\",\n  \"use\": \"sync_baseline_2598ce-usage\",\n  \"viewBox\": \"0 0 24 24\",\n  \"content\": \"<symbol xmlns=\\\"http://www.w3.org/2000/svg\\\" viewBox=\\\"0 0 24 24\\\" id=\\\"sync_baseline_2598ce\\\"><path d=\\\"M0 0h24v24H0z\\\" fill=\\\"none\\\" /><path d=\\\"M12 4V1L8 5l4 4V6c3.31 0 6 2.69 6 6 0 1.01-.25 1.97-.7 2.8l1.46 1.46C19.54 15.03 20 13.57 20 12c0-4.42-3.58-8-8-8zm0 14c-3.31 0-6-2.69-6-6 0-1.01.25-1.97.7-2.8L5.24 7.74C4.46 8.97 4 10.43 4 12c0 4.42 3.58 8 8 8v3l4-4-4-4v3z\\\" /></symbol>\"\n});\nvar result = _svg_sprite_loader_runtime_browser_sprite_build_js__WEBPACK_IMPORTED_MODULE_1___default().add(symbol);\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (symbol);\n\n//# sourceURL=webpack://connect-extension-xvs/./node_modules/@cloudblueconnect/material-svg/icons/google/sync/baseline.svg?");
+
+/***/ }),
+
 /***/ "./node_modules/@cloudblueconnect/material-svg/icons/google/view_column/baseline.svg":
 /*!*******************************************************************************************!*\
   !*** ./node_modules/@cloudblueconnect/material-svg/icons/google/view_column/baseline.svg ***!