From aa9436160182b0465b81ad3c40e563a9811eb7a6 Mon Sep 17 00:00:00 2001
From: MauserBitfly <125363940+MauserBitfly@users.noreply.github.com>
Date: Thu, 7 Mar 2024 13:02:30 +0100
Subject: [PATCH] Bids 2821/dashboard validator management - group selection,
 dashboard loading (#78)

* dropdown styles

* group selection

* load dashboard group

---------

Co-authored-by: D13ce <stefan.benker@bitfly.at>
---
 frontend/assets/css/colors.scss               | 16 +++-
 frontend/assets/css/main.scss                 |  7 +-
 frontend/assets/css/prime.scss                | 86 +++++++++++++++++++
 frontend/assets/css/utils.scss                |  9 ++
 frontend/components/bc/BcDropdown.vue         | 19 ++++
 .../dashboard/ValidatorOverview.vue           |  6 +-
 .../dashboard/chart/SummaryChart.vue          |  7 +-
 .../components/dashboard/group/GroupLabel.vue | 26 ++++++
 .../dashboard/group/GroupSelection.vue        | 47 ++++++++++
 .../table/DashboardTableEfficiency.vue        |  4 +-
 .../dashboard/table/DashboardTableSummary.vue |  6 +-
 .../table/DashboardTableValidators.vue        |  6 +-
 .../DashboardValidatorManageValidators.vue    | 36 ++++++++
 .../playground/DashboardValidatorSummary.vue  |  3 +-
 .../playground/PlaygroundStyling.vue          | 36 +++++++-
 frontend/composables/useCustomFetch.ts        |  5 ++
 frontend/i18n/en.json                         |  8 ++
 frontend/pages/playground.vue                 |  3 +
 .../stores/dashboard/useUserDashboardStore.ts | 14 +++
 .../useValidatorDashboardOverviewStore.ts     |  2 +-
 frontend/stores/useUserStore.ts               | 11 ++-
 frontend/types/dashboard/index.ts             |  4 +
 22 files changed, 335 insertions(+), 26 deletions(-)
 create mode 100644 frontend/assets/css/utils.scss
 create mode 100644 frontend/components/bc/BcDropdown.vue
 create mode 100644 frontend/components/dashboard/group/GroupLabel.vue
 create mode 100644 frontend/components/dashboard/group/GroupSelection.vue
 create mode 100644 frontend/components/playground/DashboardValidatorManageValidators.vue
 create mode 100644 frontend/stores/dashboard/useUserDashboardStore.ts

diff --git a/frontend/assets/css/colors.scss b/frontend/assets/css/colors.scss
index c7ef22b75..d623a5c47 100644
--- a/frontend/assets/css/colors.scss
+++ b/frontend/assets/css/colors.scss
@@ -7,6 +7,8 @@
   --light-grey: #f0f0f0;
   --light-grey-2: #dfdfdf;
   --light-grey-3: #d3d3d3;
+  --light-grey-5: #eaeaea;
+  --light-grey-6: #a8a8a8;
   --dark-grey: #5c4e4e;
   --very-dark-grey: #362f32;
   --asphalt: #484f56;
@@ -29,12 +31,13 @@
   --primary-orange-pressed: #ffb346;
 
   --primary-contrast-color: var(--grey-4);
+  --primary-contrast-color-discreet: var(--light-grey-5);
 
   --background-color: var(--grey-1);
   --text-color: var(--light-black);
   --text-color-inverted: var(--light-grey);
   --text-color-disabled: var(--grey);
-  --text-color-discreet: var(--grey);
+  --text-color-discreet: var(--dark-grey);
 
   --button-color-active: var(--primary-orange);
   --button-color-hover: var(--primary-orange-hover);
@@ -65,15 +68,22 @@
   --megamenu-text-color: var(--grey);
   --megamenu-hover-color: var(--light-grey-3);
 
+  --list-highlight-background: var(--primary-orange-hover);
+  --list-hover-background: var(--light-grey-6);
+  --list-hover-color: var(--light-grey);
+  --list-hover-descrete-color: var(--light-grey-5);
+
   &.dark-mode {
     --primary-color: var(--primary-orange);
     --primary-contrast-color: var(--light-black);
+    --primary-contrast-color-discreet: var(--dark-grey);
 
     --background-color: var(--almost-black);
 
     --text-color: var(--light-grey);
     --text-color-inverted: var(--light-black);
     --text-color-disabled: var(--grey);
+    --text-color-discreet: var(--grey);
 
     --button-color-active: var(--primary-orange);
     --button-color-hover: var(--primary-orange-hover);
@@ -103,5 +113,9 @@
     --megamenu-panel-color: var(--graphite);
     --megamenu-text-color: var(--grey);
     --megamenu-hover-color: var(--asphalt);
+
+    --list-highlight-background: var(--primary-orange);
+    --list-hover-background: var(--dark-grey);
+    --list-hover-descrete-color: var(--grey);
   }
 }
diff --git a/frontend/assets/css/main.scss b/frontend/assets/css/main.scss
index ed3d0b72b..4698c63a9 100644
--- a/frontend/assets/css/main.scss
+++ b/frontend/assets/css/main.scss
@@ -1,6 +1,7 @@
 @import "~/assets/css/colors.scss";
 @import "~/assets/css/variables.scss";
 @import "~/assets/css/fonts.scss";
+@import "~/assets/css/utils.scss";
 
 html {
   margin: 0;
@@ -40,12 +41,6 @@ a {
   @include container;
 }
 
-@mixin truncate-text() {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
 .text-positive{
   color: var(--positive-color)
 }
diff --git a/frontend/assets/css/prime.scss b/frontend/assets/css/prime.scss
index aa228d6b4..920f3ea34 100644
--- a/frontend/assets/css/prime.scss
+++ b/frontend/assets/css/prime.scss
@@ -1,4 +1,5 @@
 @use "~/assets/css/fonts.scss";
+@use "~/assets/css/utils.scss";
 @import "~/assets/css/prime_datatable.scss";
 @import "~/assets/css/prime_megamenu.scss";
 
@@ -204,3 +205,88 @@
 .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close {
   color: #ff5757;
 }
+
+/***
+*  Dropdown
+* https://primevue.org/dropdown/
+* different Dropdown variant's:
+* - 'default' (=default) : default style for dropdown
+* - 'table' : dropdown style within a data table
+***/
+
+.p-dropdown {
+  background: var(--input-background);
+  border: 1px solid var(--input-border-color);
+  color: var(--input-active-text-color);
+  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
+  border-radius: var(--border-radius);
+  padding: var(--padding);
+
+  &.table {
+    background: var(--background-color);
+  }
+
+  &:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+  }
+  &.p-overlay-open {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+  .p-dropdown-label {
+    background: transparent;
+    border: 0 none;
+    padding: 0;
+    &.p-placeholder {
+      color: var(--input-placeholder-text-color);
+    }
+    &:focus,
+    &:enabled:focus {
+      outline: 0 none;
+      box-shadow: none;
+    }
+  }
+  .p-dropdown-trigger {
+    margin-left: var(--padding);
+    background: transparent;
+    border-top-right-radius: var(--border-radius);
+    border-bottom-right-radius: var(--border-radius);
+  }
+}
+
+.p-dropdown-panel {
+  background: var(--input-background);
+  border: 1px solid var(--input-border-color);
+  color: var(--input-active-text-color);
+  border-radius: 0 0 var(--border-radius) var(--border-radius);
+  transform: translateY(-1px);
+  &.table {
+    background: var(--background-color);
+  }
+  .p-dropdown-items {
+    padding: var(--padding-small);
+    .p-dropdown-item {
+      @include utils.truncate-text;
+      padding: var(--padding-small) 4px;
+      border-radius: var(--border-radius);
+      .discreet {
+        color: var(--text-color-discreet);
+      }
+      &.p-highlight:not(:hover) {
+        background: var(--list-highlight-background);
+        color: var(--primary-contrast-color);
+        .discreet {
+          color: var(--primary-contrast-color-discreet);
+        }
+      }
+      &:hover {
+        background: var(--list-hover-background);
+        color: var(--list-hover-color);
+        .discreet {
+          color: var(--list-hover-descrete-color);
+        }
+      }
+    }
+  }
+}
diff --git a/frontend/assets/css/utils.scss b/frontend/assets/css/utils.scss
new file mode 100644
index 000000000..b6b23ee35
--- /dev/null
+++ b/frontend/assets/css/utils.scss
@@ -0,0 +1,9 @@
+@mixin truncate-text() {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.truncate-text{
+  @include truncate-text;
+}
\ No newline at end of file
diff --git a/frontend/components/bc/BcDropdown.vue b/frontend/components/bc/BcDropdown.vue
new file mode 100644
index 000000000..58c3b89bc
--- /dev/null
+++ b/frontend/components/bc/BcDropdown.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+
+interface Props {
+  variant?: 'default' | 'table'
+}
+
+defineProps<Props>()
+</script>
+
+<template>
+  <Dropdown :class="variant" :panel-class="variant">
+    <template #value="slotProps">
+      <slot name="value" v-bind="slotProps" />
+    </template>
+    <template #option="slotProps">
+      <slot name="option" v-bind="slotProps.option" />
+    </template>
+  </Dropdown>
+</template>
diff --git a/frontend/components/dashboard/ValidatorOverview.vue b/frontend/components/dashboard/ValidatorOverview.vue
index 0c2d26dbe..bf6cfe5ff 100644
--- a/frontend/components/dashboard/ValidatorOverview.vue
+++ b/frontend/components/dashboard/ValidatorOverview.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 
-import { useValidatorDashboardOverview } from '~/stores/dashboard/useValidatorDashboardOverviewStore'
+import { useValidatorDashboardOverviewStore } from '~/stores/dashboard/useValidatorDashboardOverviewStore'
 import { type OverviewTableData } from '~/types/dashboard/overview'
 import { totalElClNumbers } from '~/utils/bigMath'
 
@@ -10,10 +10,10 @@ const { converter } = useValue()
 const tPath = 'dashboard.validator.overview.'
 
 // TODO: implement dashboard switching
-const { getOverview } = useValidatorDashboardOverview()
+const { getOverview } = useValidatorDashboardOverviewStore()
 await useAsyncData('validator_dashboard_overview', () => getOverview())
 
-const { overview } = storeToRefs(useValidatorDashboardOverview())
+const { overview } = storeToRefs(useValidatorDashboardOverviewStore())
 
 const dataList = computed(() => {
   const v = overview.value
diff --git a/frontend/components/dashboard/chart/SummaryChart.vue b/frontend/components/dashboard/chart/SummaryChart.vue
index c56f2d1e7..4dd3a3d4a 100644
--- a/frontend/components/dashboard/chart/SummaryChart.vue
+++ b/frontend/components/dashboard/chart/SummaryChart.vue
@@ -13,9 +13,10 @@ import {
 import VChart from 'vue-echarts'
 import SummaryChartTooltip from './SummaryChartTooltip.vue'
 import { formatEpochToDate } from '~/utils/format'
-import { useValidatorDashboardOverview } from '~/stores/dashboard/useValidatorDashboardOverviewStore'
+import { useValidatorDashboardOverviewStore } from '~/stores/dashboard/useValidatorDashboardOverviewStore'
 import { getSummaryChartGroupColors, getSummaryChartTextColor, getSummaryChartTooltipBackgroundColor } from '~/utils/colors'
 import type { DashboardKey } from '~/types/dashboard'
+import { DAHSHBOARDS_ALL_GROUPS_ID } from '~/types/dashboard'
 
 use([
   CanvasRenderer,
@@ -39,7 +40,7 @@ watch(props, () => {
   getDashboardSummaryChart(props.dashboardKey)
 }, { immediate: true })
 
-const { overview } = storeToRefs(useValidatorDashboardOverview())
+const { overview } = storeToRefs(useValidatorDashboardOverviewStore())
 
 const { t: $t } = useI18n()
 const colorMode = useColorMode()
@@ -70,7 +71,7 @@ const option = computed(() => {
     const allGroups = $t('dashboard.validator.summary.chart.all_groups')
     chartData.value.series.forEach((element) => {
       let name = allGroups
-      if (element.id !== -1) {
+      if (element.id !== DAHSHBOARDS_ALL_GROUPS_ID) {
         const group = overview.value?.groups.find(group => group.id === element.id)
         name = group?.name || element.id.toString()
       }
diff --git a/frontend/components/dashboard/group/GroupLabel.vue b/frontend/components/dashboard/group/GroupLabel.vue
new file mode 100644
index 000000000..34cb97fc6
--- /dev/null
+++ b/frontend/components/dashboard/group/GroupLabel.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { VDBOverviewGroup } from '~/types/api/validator_dashboard'
+import { DAHSHBOARDS_ALL_GROUPS_ID } from '~/types/dashboard'
+
+interface Props {
+  group: VDBOverviewGroup,
+}
+
+const props = defineProps<Props>()
+
+const { t: $t } = useI18n()
+
+const name = computed(() => {
+  if (props.group.id === DAHSHBOARDS_ALL_GROUPS_ID) {
+    return $t('dashboard.group.selection.all')
+  } else if (props.group.id === 0) {
+    return props.group.name && props.group.name !== 'default' ? props.group.name : $t('dashboard.group.selection.default')
+  }
+
+  return props.group.name
+})
+</script>
+
+<template>
+  <span><span>{{ name }}</span> <span v-if="group.id >= 0" class="discreet">(ID: {{ group.id }})</span></span>
+</template>
diff --git a/frontend/components/dashboard/group/GroupSelection.vue b/frontend/components/dashboard/group/GroupSelection.vue
new file mode 100644
index 000000000..5d7097dee
--- /dev/null
+++ b/frontend/components/dashboard/group/GroupSelection.vue
@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { DAHSHBOARDS_ALL_GROUPS_ID } from '~/types/dashboard'
+
+interface Props {
+  includeAll?: boolean,
+}
+const props = defineProps<Props>()
+
+const { overview } = storeToRefs(useValidatorDashboardOverviewStore())
+
+const list = computed(() => {
+  const groups = overview.value?.groups ?? []
+  if (props.includeAll) {
+    return [{ id: DAHSHBOARDS_ALL_GROUPS_ID, name: '' }].concat(groups)
+  }
+  return groups
+})
+
+const selected = defineModel<number>({ required: true })
+
+const selectedGroup = computed(() => {
+  return list.value.find(item => item.id === selected.value)
+})
+
+</script>
+
+<template>
+  <BcDropdown
+    v-model="selected"
+    :options="list"
+    option-value="id"
+    option-label="name"
+    :placeholder="$t('dashboard.group.selection.placeholder')"
+  >
+    <template v-if="selectedGroup" #value>
+      <span>{{ $t('dashboard.group.selection.group') }}:
+        <DashboardGroupLabel :group="selectedGroup" />
+      </span>
+    </template>
+
+    <template #option="slotProps">
+      <DashboardGroupLabel :group="slotProps" />
+    </template>
+  </BcDropdown>
+</template>
+
+<style lang="scss" scoped></style>
diff --git a/frontend/components/dashboard/table/DashboardTableEfficiency.vue b/frontend/components/dashboard/table/DashboardTableEfficiency.vue
index ad3ec3dd3..3b1e80b2b 100644
--- a/frontend/components/dashboard/table/DashboardTableEfficiency.vue
+++ b/frontend/components/dashboard/table/DashboardTableEfficiency.vue
@@ -33,10 +33,10 @@ const data = computed(() => {
 </template>
 
 <style lang="scss" scoped>
-@use '~/assets/css/main.scss';
+@use '~/assets/css/utils.scss';
 
 .efficiency {
-  @include main.truncate-text;
+  @include utils.truncate-text;
   display: block;
 
   .positive {
diff --git a/frontend/components/dashboard/table/DashboardTableSummary.vue b/frontend/components/dashboard/table/DashboardTableSummary.vue
index 8c882abf0..509a39c76 100644
--- a/frontend/components/dashboard/table/DashboardTableSummary.vue
+++ b/frontend/components/dashboard/table/DashboardTableSummary.vue
@@ -4,6 +4,8 @@ import SummaryChart from '../chart/SummaryChart.vue'
 import type { InternalGetValidatorDashboardSummaryResponse, VDBSummaryTableRow } from '~/types/api/validator_dashboard'
 import type { DashboardKey } from '~/types/dashboard'
 import type { Cursor, TableQueryParams } from '~/types/datatable'
+import { useValidatorDashboardOverviewStore } from '~/stores/dashboard/useValidatorDashboardOverviewStore'
+import { DAHSHBOARDS_ALL_GROUPS_ID } from '~/types/dashboard'
 
 interface Props {
   dashboardKey: DashboardKey
@@ -19,7 +21,7 @@ const { getSummary } = store
 const { summaryMap, queryMap } = storeToRefs(store)
 const { value: query, bounce: setQuery } = useDebounceValue<TableQueryParams | undefined>(undefined, 500)
 
-const { overview } = storeToRefs(useValidatorDashboardOverview())
+const { overview } = storeToRefs(useValidatorDashboardOverviewStore())
 
 const { width, isMobile } = useWindowSize()
 const colsVisible = computed(() => {
@@ -91,7 +93,7 @@ const setSearch = (value?: string) => {
 }
 
 const getRowClass = (row: VDBSummaryTableRow) => {
-  if (row.group_id === -1) {
+  if (row.group_id === DAHSHBOARDS_ALL_GROUPS_ID) {
     return 'total-row'
   }
 }
diff --git a/frontend/components/dashboard/table/DashboardTableValidators.vue b/frontend/components/dashboard/table/DashboardTableValidators.vue
index 3ce80de2c..be7db831f 100644
--- a/frontend/components/dashboard/table/DashboardTableValidators.vue
+++ b/frontend/components/dashboard/table/DashboardTableValidators.vue
@@ -16,7 +16,7 @@ const props = defineProps<Props>()
 const modalVisibility = ref(false)
 
 const { t: $t } = useI18n()
-const { overview } = storeToRefs(useValidatorDashboardOverview())
+const { overview } = storeToRefs(useValidatorDashboardOverviewStore())
 
 const openValidatorModal = () => {
   modalVisibility.value = true
@@ -61,7 +61,7 @@ const groupName = computed(() => {
 </template>
 
 <style lang="scss" scoped>
-@use '~/assets/css/main.scss';
+@use '~/assets/css/utils.scss';
 
 .validator_column {
   display: flex;
@@ -69,7 +69,7 @@ const groupName = computed(() => {
   align-items: center;
 
   .validators {
-    @include main.truncate-text;
+    @include utils.truncate-text;
 
     span:last-child {
       display: none;
diff --git a/frontend/components/playground/DashboardValidatorManageValidators.vue b/frontend/components/playground/DashboardValidatorManageValidators.vue
new file mode 100644
index 000000000..ab1674659
--- /dev/null
+++ b/frontend/components/playground/DashboardValidatorManageValidators.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { useUserDashboardStore } from '~/stores/dashboard/useUserDashboardStore'
+import { useValidatorDashboardOverviewStore } from '~/stores/dashboard/useValidatorDashboardOverviewStore'
+import { DAHSHBOARDS_ALL_GROUPS_ID } from '~/types/dashboard'
+
+const { getOverview } = useValidatorDashboardOverviewStore()
+await useAsyncData('validator_dashboard_overview', () => getOverview())
+
+const store = useUserDashboardStore()
+const { getDashboards } = store
+
+const { dashboards } = storeToRefs(store)
+await useAsyncData('validator_dashboards', () => getDashboards())
+
+const selectedGroupId = ref<number>(DAHSHBOARDS_ALL_GROUPS_ID)
+
+</script>
+<template>
+  <div class="icon_holder">
+    <DashboardGroupSelection v-model="selectedGroupId" class="group_selection" />
+    <DashboardGroupSelection v-model="selectedGroupId" class="group_selection" :include-all="true" />
+    <div>{{ dashboards }}</div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.group_selection{
+  width: 200px;
+}
+.icon_holder {
+  margin: 10px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+</style>
diff --git a/frontend/components/playground/DashboardValidatorSummary.vue b/frontend/components/playground/DashboardValidatorSummary.vue
index d526896f2..557470bc6 100644
--- a/frontend/components/playground/DashboardValidatorSummary.vue
+++ b/frontend/components/playground/DashboardValidatorSummary.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
+import { useValidatorDashboardOverviewStore } from '~/stores/dashboard/useValidatorDashboardOverviewStore'
 
-const { getOverview } = useValidatorDashboardOverview()
+const { getOverview } = useValidatorDashboardOverviewStore()
 await useAsyncData('validator_dashboard_overview', () => getOverview())
 
 </script>
diff --git a/frontend/components/playground/PlaygroundStyling.vue b/frontend/components/playground/PlaygroundStyling.vue
index f2ea02248..e9d6a8d5b 100644
--- a/frontend/components/playground/PlaygroundStyling.vue
+++ b/frontend/components/playground/PlaygroundStyling.vue
@@ -5,7 +5,7 @@ import {
 import {
   faChartColumn
 } from '@fortawesome/pro-regular-svg-icons'
-import { BcToggleMultiBar, IconSlotBlockProposal } from '#components'
+import { IconSlotBlockProposal } from '#components'
 
 const emptyModalVisibility = ref(false)
 const headerPropModalVisibility = ref(false)
@@ -24,6 +24,9 @@ const selected = ref(true)
 const completeList = ref([{ value: 'attestation' }, { value: 'proposal', component: IconSlotBlockProposal }, { value: 'sync' }, { value: 'chart', icon: faChartColumn }])
 const selectedList = ref<string[]>(['attestation', 'proposal'])
 
+const dropodownSelection = ref<string | undefined>()
+const dropdownList = [{ value: 'yes', label: 'Yes' }, { value: 'no', label: 'No' }, { value: 'maybe', label: 'Maybe we need a bigger label' }]
+
 </script>
 
 <template>
@@ -46,6 +49,7 @@ const selectedList = ref<string[]>(['attestation', 'proposal'])
       <br>
       <Button label="Close" @click="slotModalVisibility = false" />
     </div>
+
     <template #footer>
       Utilizing the footer slot for custom content
     </template>
@@ -92,6 +96,7 @@ const selectedList = ref<string[]>(['attestation', 'proposal'])
             <template #trueIcon>
               <IconSlotAttestation />
             </template>
+
             <template #falseIcon>
               <IconSlotBlockProposal />
             </template>
@@ -100,13 +105,14 @@ const selectedList = ref<string[]>(['attestation', 'proposal'])
 
         <div>
           Selected: {{ selected }}
-          <BcToggleButton v-model="selected" :icon="faTable" />
+          <BcToggleMultibarButton v-model="selected" :icon="faTable" />
         </div>
         <div>
           <BcToggleMultiBar v-model="selectedList" :icons="completeList" style="margin-right: 10px;">
             <template #attestation>
               <IconSlotAttestation />
             </template>
+
             <template #sync>
               <IconSlotSync />
             </template>
@@ -115,6 +121,29 @@ const selectedList = ref<string[]>(['attestation', 'proposal'])
         </div>
       </div>
     </TabPanel>
+    <TabPanel header="Dropdown">
+      <div class="element_container" style="background-color: darkred; padding: 5px;">
+        <BcDropdown
+          v-model="dropodownSelection"
+          :options="dropdownList"
+          option-value="value"
+          option-label="label"
+          placeholder="for rock wtf this is a long placeholder"
+          panel-style="max-width: 100px"
+          style="max-width: 100px;"
+        />
+        <BcDropdown
+          v-model="dropodownSelection"
+          :options="dropdownList"
+          option-value="value"
+          option-label="label"
+          variant="table"
+          placeholder="and roll"
+          style="width: 200px;"
+        />
+        Selected: {{ dropodownSelection }}
+      </div>
+    </TabPanel>
     <TabPanel header="Spinner">
       <Button @click="toggleLoading">
         Toggle loading
@@ -147,4 +176,5 @@ const selectedList = ref<string[]>(['attestation', 'proposal'])
   width: 200px;
   height: 200px;
   background-color: antiquewhite;
-}</style>
+}
+</style>
diff --git a/frontend/composables/useCustomFetch.ts b/frontend/composables/useCustomFetch.ts
index ad09f71bd..362b80a22 100644
--- a/frontend/composables/useCustomFetch.ts
+++ b/frontend/composables/useCustomFetch.ts
@@ -4,6 +4,7 @@ import type { LoginResponse } from '~/types/user'
 
 export enum API_PATH {
   AD_CONFIGURATIONs = '/adConfigurations',
+  USER_DASHBOARDS = '/user/dashboards',
   DASHBOARD_SUMMARY = '/dashboard/validatorSummary',
   DASHBOARD_SUMMARY_DETAILS = '/dashboard/validatorSummaryDetails',
   DASHBOARD_SUMMARY_CHART = '/dashboard/validatorSummaryChart',
@@ -42,6 +43,10 @@ const mapping: Record<string, MappingData> = {
     getPath: values => `/ad-configurations?keys=${values?.keys}`,
     mock: true
   },
+  [API_PATH.USER_DASHBOARDS]: {
+    path: '/users/me/dashboards',
+    mock: false
+  },
   [API_PATH.DASHBOARD_SUMMARY_DETAILS]: {
     path: '/validator-dashboards/{dashboardKey}/groups/{group_id}/summary',
     getPath: values => `/validator-dashboards/${values?.dashboardKey}/groups/${values?.groupId}/summary`,
diff --git a/frontend/i18n/en.json b/frontend/i18n/en.json
index c5b5196db..e9f997cf8 100644
--- a/frontend/i18n/en.json
+++ b/frontend/i18n/en.json
@@ -98,6 +98,14 @@
   },
   "dashboard": {
     "title": "Dashboard",
+    "group": {
+      "selection": {
+        "group": "Group",
+        "all": "All groups",
+        "default": "Default",
+        "placeholder": "Select group"
+      }
+    },
     "validator": {
       "overview": {
         "your_online_validators": "Your Online Validators",
diff --git a/frontend/pages/playground.vue b/frontend/pages/playground.vue
index 2dc6361db..b60732d4f 100644
--- a/frontend/pages/playground.vue
+++ b/frontend/pages/playground.vue
@@ -71,6 +71,9 @@ onMounted(async () => {
       <TabPanel header="Summary">
         <PlaygroundDashboardValidatorSummary />
       </TabPanel>
+      <TabPanel header="Manage Validators">
+        <PlaygroundDashboardValidatorManageValidators />
+      </TabPanel>
     </TabView>
 
     <BcFooterMainFooter />
diff --git a/frontend/stores/dashboard/useUserDashboardStore.ts b/frontend/stores/dashboard/useUserDashboardStore.ts
new file mode 100644
index 000000000..8378feba5
--- /dev/null
+++ b/frontend/stores/dashboard/useUserDashboardStore.ts
@@ -0,0 +1,14 @@
+import { defineStore } from 'pinia'
+import { useCustomFetch } from '~/composables/useCustomFetch'
+import type { GetUserDashboardsResponse, UserDashboardsData } from '~/types/api/dashboard'
+
+export const useUserDashboardStore = defineStore('user_dashboards', () => {
+  const dashboards = ref<UserDashboardsData | undefined | null>()
+  async function getDashboards () {
+    const res = await useCustomFetch<GetUserDashboardsResponse>(API_PATH.USER_DASHBOARDS)
+    dashboards.value = res.data
+    return dashboards.value
+  }
+
+  return { dashboards, getDashboards }
+})
diff --git a/frontend/stores/dashboard/useValidatorDashboardOverviewStore.ts b/frontend/stores/dashboard/useValidatorDashboardOverviewStore.ts
index e83f616c4..0d0245e2d 100644
--- a/frontend/stores/dashboard/useValidatorDashboardOverviewStore.ts
+++ b/frontend/stores/dashboard/useValidatorDashboardOverviewStore.ts
@@ -2,7 +2,7 @@ import { defineStore } from 'pinia'
 import { useCustomFetch } from '~/composables/useCustomFetch'
 import type { VDBOverviewData, InternalGetValidatorDashboardResponse } from '~/types/api/validator_dashboard'
 
-export const useValidatorDashboardOverview = defineStore('validator_overview', () => {
+export const useValidatorDashboardOverviewStore = defineStore('validator_overview', () => {
   const overview = ref<VDBOverviewData | undefined | null>()
   async function getOverview () {
     const res = await useCustomFetch<InternalGetValidatorDashboardResponse>(API_PATH.DASHBOARD_OVERVIEW)
diff --git a/frontend/stores/useUserStore.ts b/frontend/stores/useUserStore.ts
index d6628d4af..1f3be793a 100644
--- a/frontend/stores/useUserStore.ts
+++ b/frontend/stores/useUserStore.ts
@@ -3,6 +3,8 @@ import type { LoginResponse } from '~/types/user'
 import { useCustomFetch } from '~/composables/useCustomFetch'
 
 export const useUserStore = defineStore('user-store', () => {
+  const { public: { xUserId } } = useRuntimeConfig()
+
   async function doLogin (email: string, password: string) {
     await useCustomFetch<LoginResponse>(API_PATH.LOGIN, {
       body: {
@@ -12,5 +14,12 @@ export const useUserStore = defineStore('user-store', () => {
     })
   }
 
-  return { doLogin }
+  // TODO: Faking logged in User for now, if xUserId is set
+  const user = computed(() => {
+    return xUserId ? { user_id: xUserId, user_name: `Test User [${xUserId}]` } : undefined
+  })
+
+  const isLoggedIn = computed(() => !!user.value)
+
+  return { doLogin, user, isLoggedIn }
 })
diff --git a/frontend/types/dashboard/index.ts b/frontend/types/dashboard/index.ts
index 30d6bd8ab..83771b88c 100644
--- a/frontend/types/dashboard/index.ts
+++ b/frontend/types/dashboard/index.ts
@@ -1,2 +1,6 @@
 // can be ether a dashboard id or a list of validators
 export type DashboardKey = number | string
+
+export type DashboardType = 'validator' | 'account'
+
+export const DAHSHBOARDS_ALL_GROUPS_ID = -1