From a916539aeb567a9462e6d237a8c6c4e6ce1d05bb Mon Sep 17 00:00:00 2001
From: marcel-bitfly <174338434+marcel-bitfly@users.noreply.github.com>
Date: Tue, 15 Oct 2024 16:15:00 +0200
Subject: [PATCH] feat(notifications): add `entity dialog`

See: BEDS-565
---
 frontend/components/bc/BcAccordion.vue        | 144 +++++
 frontend/components/bc/BcCard.vue             |  17 +
 frontend/components/bc/BcContentFilter.vue    |  25 +-
 frontend/components/bc/BcText.vue             |  19 +-
 frontend/components/bc/header/HeaderLogo.vue  |   4 +-
 .../NotificationsDashboardDialogEntity.vue    | 554 ++++++++++++++++++
 .../NotificationsDashboardsTable.vue          |  48 +-
 frontend/locales/en.json                      |  20 +
 .../useNotificationsDashboardDetailsStore.ts  |  52 ++
 .../useNotificationsDashboardStore.ts         |   2 +-
 frontend/types/customFetch.ts                 |  14 +
 11 files changed, 861 insertions(+), 38 deletions(-)
 create mode 100644 frontend/components/bc/BcAccordion.vue
 create mode 100644 frontend/components/bc/BcCard.vue
 create mode 100644 frontend/components/notifications/NotificationsDashboardDialogEntity.vue
 create mode 100644 frontend/stores/notifications/useNotificationsDashboardDetailsStore.ts

diff --git a/frontend/components/bc/BcAccordion.vue b/frontend/components/bc/BcAccordion.vue
new file mode 100644
index 000000000..45b1764ab
--- /dev/null
+++ b/frontend/components/bc/BcAccordion.vue
@@ -0,0 +1,144 @@
+<script setup lang="ts" generic="T">
+import { faCopy } from '@fortawesome/pro-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+
+const props = defineProps<{
+  infoCopy?: string,
+  items?: T[],
+  open?: boolean,
+}>()
+const isOpen = ref(props.open ?? false)
+const {
+  copy,
+  isSupported,
+} = useClipboard()
+const idList = useId()
+
+const textToCopy = ref<string>('')
+const detailElement = ref<HTMLElement>()
+onMounted(() => {
+  if (!detailElement.value) return
+  const ulElement = detailElement.value.querySelector(`#${idList}`)
+  const liElements = ulElement?.querySelectorAll('li')
+  if (liElements) {
+    const liTexts = [ ...liElements ].map(liElement => liElement.textContent?.trim())
+    textToCopy.value = liTexts.join(', ')
+  }
+})
+const toast = useBcToast()
+const { t: $t } = useTranslation()
+const copyText = async () => {
+  await copy(textToCopy.value).then(() => {
+    toast.showInfo({
+      detail: $t('clipboard.copied_to_clipboard'),
+      summary: props.infoCopy ?? '',
+    })
+  })
+}
+</script>
+
+<template>
+  <details
+    ref="detailElement"
+    class="bc-accordion"
+    :open
+  >
+    <summary
+      @click="isOpen = !isOpen"
+    >
+      <span class="bc-accordion__heading">
+        <IconChevron
+          :direction="isOpen ? 'bottom' : 'right'"
+        />
+        <slot name="headingIcon" />
+        <slot name="heading" />
+      </span>
+    </summary>
+    <BcCard class="bc-accordion__content">
+      <ul
+        :id="idList"
+        class="bc-accordion-list"
+      >
+        <li
+          v-for="item in items"
+          :key="`${item}`"
+          class="bc-accordion-list__item"
+        >
+          <slot name="item" :item />
+        </li>
+      </ul>
+      <template #floating-action-button>
+        <BcButtonIcon
+          v-if="isSupported"
+          screenreader-text="Copy list to clipboard"
+          class="bc-accordion__button"
+          @click="copyText"
+        >
+          <FontAwesomeIcon
+            :icon="faCopy"
+            class="bc-accordion__button-icon"
+          />
+        </BcButtonIcon>
+      </template>
+    </BcCard>
+  </details>
+</template>
+
+<style scoped lang="scss">
+@use '~/assets/css/breakpoints' as *;
+
+.bc-accordion {
+  position: relative;
+  summary {
+    list-style: none;
+  }
+  summary::-webkit-details-marker{
+    display: none;
+  }
+}
+.bc-accordion__heading {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.625rem;
+}
+.bc-accordion__content {
+  margin-top: 0.625rem;
+  min-height: 2.563rem;
+  max-height: 9.375rem;
+  overflow: auto;
+  width: 100%;
+  @media (min-width: $breakpoint-md) {
+    width: 41.75rem;
+  }
+
+}
+.bc-accordion-list {
+  list-style: none;
+  padding-inline-start: 0;
+  display: inline;
+}
+.bc-accordion-list__item {
+  display: inline;
+}
+.bc-accordion-list__item:not(:last-child)::after {
+content: ', ';
+}
+.bc-accordion__button {
+  --border-width: .0625rem;
+  background-color: var(--input-background);
+  border-radius: var(--corner-radius, 4px);
+  padding: calc(0.3125rem - var(--border-width));
+  border: var(--border-width) solid var(--input-border-color);
+  color: inherit;
+  height: 1.875rem;
+  width: 1.875rem;
+  position: absolute;
+  bottom: 6px;
+  right: 11px;
+}
+.bc-accordion__button-icon {
+  width: .9375rem;
+  font-size: .9375rem;
+  line-height: 100%;
+}
+</style>
diff --git a/frontend/components/bc/BcCard.vue b/frontend/components/bc/BcCard.vue
new file mode 100644
index 000000000..f2eed9a5a
--- /dev/null
+++ b/frontend/components/bc/BcCard.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div class="bc-card">
+    <slot />
+    <slot name="floating-action-button" />
+  </div>
+</template>
+
+<style scoped lang="scss">
+.bc-card {
+  background-color: var(--input-background);
+  border-radius: var(--corner-radius, 4px);
+  padding: 0.625rem;
+  border: 1px solid var(--input-border-color);
+}
+</style>
diff --git a/frontend/components/bc/BcContentFilter.vue b/frontend/components/bc/BcContentFilter.vue
index 53e3a67cb..9443a5b58 100644
--- a/frontend/components/bc/BcContentFilter.vue
+++ b/frontend/components/bc/BcContentFilter.vue
@@ -1,7 +1,6 @@
 <script lang="ts" setup>
 import { faMagnifyingGlass } from '@fortawesome/pro-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-import type InputText from 'primevue/inputtext'
 
 interface Props {
   disabledFilter?: boolean,
@@ -9,7 +8,7 @@ interface Props {
 }
 const props = defineProps<Props>()
 
-defineEmits<{ (e: 'filter-changed', value: string): void }>()
+const emit = defineEmits<{ (e: 'filter-changed', value: string): void }>()
 
 const isFilterVisible = ref(false)
 const filter = ref('')
@@ -36,25 +35,27 @@ const handleClick = () => {
     focusAndSelect(input.value)
   }
 }
+watchDebounced(filter, () => {
+  emit('filter-changed', filter.value)
+})
 </script>
 
 <template>
   <div class="filter_elements_container">
     <InputText
       ref="input"
-      v-model="filter"
+      v-model.trim="filter"
       :placeholder="props.searchPlaceholder"
       :disabled="!isFilterVisible"
       :class="{ visible: isFilterVisible }"
       @keydown.escape.stop="closeFilter"
-      @input="$emit('filter-changed', filter)"
     />
     <Button
       ref="button"
       :disabled="disabledFilter"
       :aria-expanded="isFilterVisible"
       severity="secondary"
-      class="p-button-icon-only"
+      class="p-button-icon-only bc-content-filter__button"
       :class="{ filter_visible: isFilterVisible }"
       @click="handleClick"
     >
@@ -68,21 +69,21 @@ const handleClick = () => {
 
 <style lang="scss">
 .filter_elements_container {
+  --outline-width: 0.125rem;
+  --outline-offset: 0.125rem;
+  padding: .25rem;
   display: flex;
   justify-content: flex-end;
   position: relative;
 
-  > :first-child {
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
+  > .p-inputtext:first-child {
     height: var(--default-button-height);
     width: 0;
     opacity: 0;
     padding: 0;
     position: absolute;
     transition: width 0.2s ease-in-out, opacity 0.01s ease-in-out 0.19s,
-      padding 0.2s ease-in-out;
-
+    padding 0.2s ease-in-out;
     &.visible {
       width: 230px;
       opacity: 100%;
@@ -105,4 +106,8 @@ const handleClick = () => {
     }
   }
 }
+button.bc-content-filter__button:focus-visible {
+  outline: var(--outline-width) solid var(--blue-500);
+  outline-offset: var(--outline-offset);
+}
 </style>
diff --git a/frontend/components/bc/BcText.vue b/frontend/components/bc/BcText.vue
index 57d343cf6..588198ecf 100644
--- a/frontend/components/bc/BcText.vue
+++ b/frontend/components/bc/BcText.vue
@@ -1,8 +1,9 @@
 <script setup lang="ts">
 withDefaults(
   defineProps<{
+    isDimmed?: boolean,
     tag?: 'h2' | 'p' | 'span',
-    variant?: 'base' | 'lg',
+    variant?: 'base' | 'lg' | 'md' | 'sm',
   }>(), {
     tag: 'span',
     variant: 'base',
@@ -15,6 +16,9 @@ withDefaults(
     :is="tag"
     :class="{
       'variant-lg': variant === 'lg',
+      'variant-md': variant === 'md',
+      'variant-sm': variant === 'sm',
+      'is-dimmed': isDimmed,
     }"
   >
     <slot />
@@ -23,6 +27,19 @@ withDefaults(
 
 <style scoped lang="scss">
 @use '~/assets/css/breakpoints' as *;
+.is-dimmed {
+  opacity: 0.7;
+}
+
+.variant-sm {
+  font-size: 0.875rem;
+}
+.variant-md {
+  font-family: "Montserrat";
+  font-size: 1.25rem;
+  font-weight: 500;
+  line-height: 1.2;
+}
 .variant-lg {
   font-family: "Montserrat";
   font-size: 1.25rem;
diff --git a/frontend/components/bc/header/HeaderLogo.vue b/frontend/components/bc/header/HeaderLogo.vue
index e2c506bd3..ce022fa17 100644
--- a/frontend/components/bc/header/HeaderLogo.vue
+++ b/frontend/components/bc/header/HeaderLogo.vue
@@ -5,13 +5,13 @@ defineProps<{
 </script>
 
 <template>
-  <BcLink
+  <NuxtLink
     to="/"
     :class="`${layoutAdaptability}-adaptability`"
   >
     <IconBeaconchainLogo alt="Beaconcha.in logo" />
     <span class="name">beaconcha.in</span>
-  </BcLink>
+  </NuxtLink>
 </template>
 
 <style lang="scss" scoped>
diff --git a/frontend/components/notifications/NotificationsDashboardDialogEntity.vue b/frontend/components/notifications/NotificationsDashboardDialogEntity.vue
new file mode 100644
index 000000000..e9ec504b3
--- /dev/null
+++ b/frontend/components/notifications/NotificationsDashboardDialogEntity.vue
@@ -0,0 +1,554 @@
+<script setup lang="ts">
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+import {
+  faAlarmSnooze,
+  faArrowsRotate,
+  faCube,
+  faFileSignature,
+  faGlobe,
+  faMoneyBill,
+  faPowerOff,
+  faRocket,
+  faUserSlash,
+} from '@fortawesome/pro-solid-svg-icons'
+import type { NotificationDashboardsTableRow } from '~/types/api/notifications'
+
+const { t: $t } = useTranslation()
+
+const {
+  props,
+} = useBcDialog<{ identifier: string } & Pick<NotificationDashboardsTableRow, 'dashboard_id' | 'epoch' | 'group_id' | 'group_name'>>()
+
+const store = useNotificationsDashboardDetailsStore()
+
+const search = ref('')
+const { data: details } = useAsyncData(
+  'notifications-dashboard-details',
+  () => store.getDetails({
+    dashboard_id: props.value?.dashboard_id ?? 0,
+    // dashboard_id: 5426, // 💀 (personal dashboard id) remove after development
+    epoch: props.value?.epoch ?? 0,
+    group_id: props.value?.group_id ?? 0,
+    search: search.value.length ? search.value : undefined,
+  }),
+  {
+    watch: [ search ],
+  })
+
+const validatorsOffline = computed(() => {
+  return details.value?.data?.validator_offline
+})
+const groupsOffline = computed(() => {
+  return details.value?.data?.group_offline
+})
+const validatorsBackOnline = computed(() => {
+  return details.value?.data?.validator_back_online
+})
+const attestationMissed = computed(() => {
+  return details.value?.data?.attestation_missed
+})
+const groupsBackOnline = computed(() => {
+  return details.value?.data?.group_back_online
+})
+const proposalsMissed = computed(() => {
+  return details.value?.data?.proposal_missed
+})
+const proposalsDone = computed(() => {
+  return details.value?.data?.proposal_done
+})
+const slashed = computed(() => {
+  return details.value?.data?.slashed
+})
+const syncCommittee = computed(() => {
+  return details.value?.data?.sync_committee
+})
+const withdrawal = computed(() => {
+  return details.value?.data?.withdrawal
+})
+const validatorsOfflineReminder = computed(() => {
+  return details.value?.data?.validator_offline_reminder
+})
+const groupsOfflineReminder = computed(() => {
+  return details.value?.data?.group_offline_reminder
+})
+const upcomingProposals = computed(() => {
+  return details.value?.data?.upcoming_proposals
+})
+const max_collateral = computed(() => {
+  return details.value?.data?.max_collateral_reached
+})
+const min_collateral = computed(() => {
+  return details.value?.data?.min_collateral_reached
+})
+defineEmits<{ (e: 'filter-changed', value: string): void }>()
+</script>
+
+<template>
+  <div class="notifications-dashboard-dialog-entity">
+    <header class="notifications-dashboard-dialog-entity__header">
+      <h2>
+        <BcText
+          variant="lg"
+        >
+          {{ $t('notifications.dashboards.dialog.entity.title') }}
+        </BcText>
+        <BcText
+          variant="md"
+          is-dimmed
+        >
+          ({{ $t('common.epoch') }} {{ props?.epoch }})
+        </BcText>
+      </h2>
+      <div class="notifications-dashboard-dialog-entity__subheader">
+        <h3>
+          {{ props?.group_name }}
+        </h3>
+        <BcContentFilter
+          :search-placeholder="$t('common.index')"
+          @filter-changed="search = $event"
+        />
+      </div>
+    </header>
+    <main
+      v-if="details?.data"
+      class="notifications-dashboard-dialog-entity__content"
+    >
+      <BcAccordion
+        v-if="validatorsOffline?.length"
+        :items="validatorsOffline"
+        :info-copy="$t('notifications.dashboards.dialog.entity.validator_offline')"
+      >
+        <template #headingIcon>
+          <FontAwesomeIcon :icon="faPowerOff" class="notifications-dashboard-dialog-entity__icon__red" />
+        </template>
+        <template #heading>
+          {{ $t('notifications.dashboards.dialog.entity.validator_offline') }} ({{ validatorsOffline?.length ?? 0 }})
+        </template>
+        <template #item="{ item: validatorIndex }">
+          <BcLink
+            :to="`/validator/${validatorIndex}`"
+            class="link"
+          >
+            {{ validatorIndex }}
+          </BcLink>
+        </template>
+      </BcAccordion>
+      <BcAccordion
+        v-if="groupsOffline?.length"
+        :items="groupsOffline"
+        :info-copy="$t('notifications.dashboards.dialog.entity.group_offline')"
+      >
+        <template #heading>
+          {{ $t('notifications.dashboards.dialog.entity.group_offline') }} ({{ groupsOffline?.length ?? 0 }})
+        </template>
+        <template #headingIcon>
+          <FontAwesomeIcon :icon="faPowerOff" class="notifications-dashboard-dialog-entity__icon__red" />
+        </template>
+        <template #item="{ item: groupOffline }">
+          <span>
+            {{ groupOffline.group_name }}
+          </span>
+
+          <BcLink
+            :to="`/dashboard/${groupOffline.dashboard_id}`"
+            class="link"
+          >
+            ({{ groupOffline.dashboard_id }})
+          </BcLink>
+        </template>
+      </BcAccordion>
+      <BcAccordion
+        v-if="proposalsMissed?.length"
+        :items="proposalsMissed"
+        :info-copy="$t('notifications.dashboards.dialog.entity.proposal_missed')"
+      >
+        <template #headingIcon>
+          <FontAwesomeIcon
+            :icon="faCube"
+            class="notifications-dashboard-dialog-entity__icon__red"
+          />
+        </template>
+        <template #heading>
+          {{ $t('notifications.dashboards.dialog.entity.proposal_missed') }} ({{ proposalsMissed?.length ?? 0 }})
+        </template>
+        <template #item="{ item: proposal }">
+          <BcLink
+            class="link"
+            :to="`/validator/${proposal.index}`"
+          >
+            {{ proposal.index }}
+          </BcLink>
+          <template v-if="proposal.blocks.length">
+            [<BcLink
+              v-for="block in proposal.blocks"
+              :key="block"
+              :to="`/block/${block}`"
+              class="notifications-dashboard-dialog-entity__list-item link"
+            >
+              {{ block }}
+            </BcLink>]
+          </template>
+        </template>
+      </BcAccordion>
+      <BcAccordion
+        v-if="proposalsDone?.length"
+        :items="proposalsDone"
+        :info-copy="$t('notifications.dashboards.dialog.entity.proposal_done')"
+      >
+        <template #headingIcon>
+          <FontAwesomeIcon
+            :icon="faCube"
+            class="notifications-dashboard-dialog-entity__icon__green"
+          />
+        </template>
+        <template #heading>
+          {{ $t('notifications.dashboards.dialog.entity.proposal_done') }} ({{ proposalsDone?.length ?? 0 }})
+        </template>
+        <template #item="{ item: proposalDone }">
+          <BcLink
+            :to="`/validator/${proposalDone.index}`"
+            class="link"
+          >
+            {{ proposalDone.index }}
+          </BcLink>
+          <template v-if="proposalDone.blocks.length">
+            [<BcLink
+              v-for="block in proposalDone.blocks"
+              :key="block"
+              :to="`/block/${block}`"
+              class="notifications-dashboard-dialog-entity__list-item link"
+            >
+              {{ block }}
+            </BcLink>]
+          </template>
+        </template>
+      </BcAccordion>
+      <BcAccordion
+        v-if="slashed?.length"
+        :items="slashed"
+        :info-copy="$t('notifications.dashboards.dialog.entity.slashed')"
+      >
+        <template #headingIcon>
+          <FontAwesomeIcon :icon="faUserSlash" class="notifications-dashboard-dialog-entity__icon__red" />
+        </template>
+        <template #heading>
+          {{ $t('notifications.dashboards.dialog.entity.slashed') }} ({{ slashed?.length ?? 0 }})
+        </template>
+        <template #item="{ item: slashedValidatorIndex }">
+          <BcLink
+            :to="`/validator/${slashedValidatorIndex}`"
+            class="link"
+          >
+            {{ slashedValidatorIndex }}
+          </BcLink>
+        </template>
+      </BcAccordion>
+      <BcAccordion
+        v-if="syncCommittee?.length"
+        :items="syncCommittee"
+        :info-copy="$t('notifications.dashboards.dialog.entity.sync_committee')"
+      >
+        <template #headingIcon>
+          <FontAwesomeIcon :icon="faArrowsRotate" class="notifications-dashboard-dialog-entity__icon__green" />
+        </template>
+        <template #heading>
+          {{ $t('notifications.dashboards.dialog.entity.sync_committee') }} ({{ syncCommittee?.length ?? 0 }})
+        </template>
+        <template #item="{ item: syncCommitteIndex }">
+          <BcLink
+            :to="`/validator/${syncCommitteIndex}`"
+            class="link"
+          >
+            {{ syncCommitteIndex }}
+          </BcLink>
+        </template>
+      </BcAccordion>
+      <BcAccordion
+        v-if="attestationMissed?.length"
+        :items="attestationMissed"
+        :info-copy="$t('notifications.dashboards.dialog.entity.attestation_missed')"
+      >
+        <template #heading>
+          {{ $t('notifications.dashboards.dialog.entity.attestation_missed') }} ({{ attestationMissed?.length ?? 0 }})
+        </template>
+        <template #headingIcon>
+          <FontAwesomeIcon
+            :icon="faFileSignature"
+            class="notifications-dashboard-dialog-entity__icon__red"
+          />
+        </template>
+        <template #item="{ item: attestation }">
+          <BcLink
+            :to="`/validator/${attestation.Index}`"
+            class="link"
+          >
+            {{ attestation.Index }}
+          </BcLink>
+          (<BcLink
+            :to="`/epoch/${attestation.Epoch}`"
+            class="link"
+          >
+            {{ $t('common.epoch') }}
+            {{ attestation.Epoch }}
+          </BcLink>)
+        </template>
+      </BcAccordion>
+      <BcAccordion
+        v-if="withdrawal?.length"
+        :items="withdrawal"
+        :info-copy="$t('notifications.dashboards.dialog.entity.withdrawal')"
+      >
+        <template #headingIcon>
+          <FontAwesomeIcon
+            :icon="faMoneyBill"
+            class="notifications-dashboard-dialog-entity__icon__green"
+          />
+        </template>
+        <template #heading>
+          {{ $t('notifications.dashboards.dialog.entity.withdrawal') }} ({{ withdrawal?.length ?? 0 }})
+        </template>
+        <template #item="{ item: withdrawalItem }">
+          <BcLink
+            :to="`/validator/${withdrawalItem.index}`"
+            class="link"
+          >
+            {{ withdrawalItem.index }}
+          </BcLink>
+          <template v-if="withdrawalItem.blocks.length" />
+        </template>
+      </BcAccordion>
+      <BcAccordion
+        v-if="validatorsBackOnline?.length"
+        :items="validatorsBackOnline"
+        :info-copy="$t('notifications.dashboards.dialog.entity.validator_back_online')"
+      >
+        <template #headingIcon>
+          <FontAwesomeIcon
+            :icon="faGlobe"
+            class="notifications-dashboard-dialog-entity__icon__green"
+          />
+        </template>
+        <template #heading>
+          {{ $t('notifications.dashboards.dialog.entity.validator_back_online') }} ({{ validatorsBackOnline?.length ?? 0 }})
+        </template>
+        <template #item="{ item: validator }">
+          <BcLink
+            :to="`/validator/{{ validator.index }}`"
+            class="link"
+          >
+            {{ validator.index }}
+          </BcLink>
+          ({{ validator.epoch_count }} {{ $t('common.epoch', validator.epoch_count) }})<!--
+            this will remove white space in html
+          -->
+        </template>
+      </BcAccordion>
+      <BcAccordion
+        v-if="groupsBackOnline?.length"
+        :items="groupsBackOnline"
+        :info-copy="$t('notifications.dashboards.dialog.entity.group_back_online')"
+      >
+        <template #heading>
+          {{ $t('notifications.dashboards.dialog.entity.group_back_online') }} ({{ groupsBackOnline?.length ?? 0 }})
+        </template>
+        <template #headingIcon>
+          <FontAwesomeIcon :icon="faGlobe" class="notifications-dashboard-dialog-entity__icon__green" />
+        </template>
+        <template #item="{ item: group }">
+          <span>
+            {{ group.group_name }}
+          </span>
+          <span>
+            [{{ group.epoch_count }}&nbsp;{{ $t('common.epoch', group.epoch_count) }}]
+          </span>
+          (<BcLink
+            class="link"
+            :to="`/dashboard/${group.dashboard_id}`"
+          >
+            <!--
+            this will remove white space in html
+          -->Dashboard {{ group.dashboard_id }}
+          </BcLink>)<!--
+            this will remove white space in html
+          -->
+        </template>
+      </BcAccordion>
+      <BcAccordion
+        v-if="validatorsOfflineReminder?.length"
+        :items="validatorsOfflineReminder"
+        :info-copy="$t('notifications.dashboards.dialog.entity.validator_offline_reminder')"
+      >
+        <template #headingIcon>
+          <FontAwesomeIcon
+            :icon="faAlarmSnooze"
+            class="notifications-dashboard-dialog-entity__icon__red"
+          />
+        </template>
+        <template #heading>
+          {{ $t('notifications.dashboards.dialog.entity.validator_offline_reminder') }} ({{ validatorsOfflineReminder?.length ?? 0 }})
+        </template>
+        <template #item="{ item: validatorOfflineReminderIndex }">
+          <BcLink
+            :to="`/validator/${validatorOfflineReminderIndex}`"
+            class="link"
+          >
+            {{ validatorOfflineReminderIndex }}
+          </BcLink>
+        </template>
+      </BcAccordion>
+      <BcAccordion
+        v-if="groupsOfflineReminder?.length"
+        :items="groupsOfflineReminder"
+        :info-copy="$t('notifications.dashboards.dialog.entity.group_offline_reminder')"
+      >
+        <template #headingIcon>
+          <FontAwesomeIcon
+            :icon="faAlarmSnooze"
+            class="notifications-dashboard-dialog-entity__icon__red"
+          />
+        </template>
+        <template #heading>
+          {{ $t('notifications.dashboards.dialog.entity.group_offline_reminder') }} ({{ groupsOfflineReminder?.length ?? 0 }})
+        </template>
+        <template #item="{ item: groupOfflineReminder }">
+          {{ groupOfflineReminder.group_name }}
+          (<BcLink
+            class="link"
+            :to="`/dashboard/${groupOfflineReminder.dashboard_id}`"
+          >
+            <!--
+          this will remove white space in html
+          -->Dashboard {{ groupOfflineReminder.dashboard_id }}
+          </BcLink>)
+          <!--
+          this will remove white space in html
+          -->
+        </template>
+      </BcAccordion>
+      <BcAccordion
+        v-if="upcomingProposals?.length"
+        :items="upcomingProposals"
+        :info-copy="$t('notifications.dashboards.dialog.entity.upcoming_proposal')"
+      >
+        <template #headingIcon>
+          <FontAwesomeIcon
+            :icon="faCube"
+            class="notifications-dashboard-dialog-entity__icon__green"
+          />
+        </template>
+        <template #heading>
+          {{ $t('notifications.dashboards.dialog.entity.upcoming_proposal') }} ({{ upcomingProposals?.length ?? 0 }})
+        </template>
+        <template #item="{ item: upcomingProposal }">
+          <BcLink
+            class="link"
+            :to="`/validator/${upcomingProposal.index}`"
+          >
+            {{ upcomingProposal.index }}
+          </BcLink>
+          <template v-if="upcomingProposal.blocks.length">
+            [<BcLink
+              v-for="block in upcomingProposal.blocks"
+              :key="block"
+              :to="`/block/${block}`"
+              class="notifications-dashboard-dialog-entity__list-item link"
+            >
+              {{ block }}
+            </BcLink>]
+          </template>
+        </template>
+      </BcAccordion>
+      <BcAccordion
+        v-if="min_collateral?.length"
+        :items="min_collateral"
+        :info-copy="$t('notifications.dashboards.dialog.entity.min_collateral')"
+      >
+        <template #headingIcon>
+          <FontAwesomeIcon
+            :icon="faRocket"
+            class="notifications-dashboard-dialog-entity__icon__red"
+          />
+        </template>
+        <template #heading>
+          {{ $t('notifications.dashboards.dialog.entity.min_collateral') }} ({{ min_collateral?.length ?? 0 }})
+        </template>
+        <template #item="{ item: minCollateral }">
+          <BcFormatHash
+            :ens="minCollateral.ens"
+            :hash="minCollateral.hash"
+            type="public_key"
+            no-copy
+            class="overwrite-block"
+          >
+            {{ minCollateral }}
+          </BcFormatHash>
+        </template>
+      </BcAccordion>
+      <BcAccordion
+        v-if="max_collateral?.length"
+        :items="max_collateral"
+        :info-copy="$t('notifications.dashboards.dialog.entity.max_collateral')"
+      >
+        <template #headingIcon>
+          <FontAwesomeIcon
+            :icon="faRocket"
+            class="notifications-dashboard-dialog-entity__icon__green"
+          />
+        </template>
+        <template #heading>
+          {{ $t('notifications.dashboards.dialog.entity.max_collateral') }} ({{ max_collateral?.length ?? 0 }})
+        </template>
+        <template #item="{ item: maxCollateral }">
+          <BcFormatHash
+            :ens="maxCollateral.ens"
+            :hash="maxCollateral.hash"
+            type="public_key"
+            no-copy
+            class="overwrite-block"
+          >
+            {{ maxCollateral }}
+          </BcFormatHash>
+        </template>
+      </BcAccordion>
+    </main>
+  </div>
+</template>
+
+<style scoped lang="scss">
+@use '~/assets/css/breakpoints' as *;
+
+:deep(div.format-hash.overwrite-block) {
+  display: inline-flex
+}
+.notifications-dashboard-dialog-entity {
+  @media (min-width: $breakpoint-md) {
+    min-width: 42rem;
+  }
+}
+.notifications-dashboard-dialog-entity__header{
+  display: flex;
+  flex-direction: column;
+  gap: 0.938rem;
+}
+.notifications-dashboard-dialog-entity__subheader {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+}
+.notifications-dashboard-dialog-entity__content {
+  margin-top: 1.25rem;
+  display:flex;
+  flex-direction: column;
+  gap: 0.625rem;
+}
+.notifications-dashboard-dialog-entity__icon__green {
+  color: #7DC382;
+}
+.notifications-dashboard-dialog-entity__icon__red {
+  color: #F3454A;
+}
+.notifications-dashboard-dialog-entity__list-item:not(:last-child)::after {
+content: ', ';
+}
+</style>
diff --git a/frontend/components/notifications/NotificationsDashboardsTable.vue b/frontend/components/notifications/NotificationsDashboardsTable.vue
index f221486a7..51510411d 100644
--- a/frontend/components/notifications/NotificationsDashboardsTable.vue
+++ b/frontend/components/notifications/NotificationsDashboardsTable.vue
@@ -8,6 +8,7 @@ import type { DashboardType } from '~/types/dashboard'
 import { useUserDashboardStore } from '~/stores/dashboard/useUserDashboardStore'
 import type { ChainIDs } from '~/types/network'
 import type { NotificationDashboardsTableRow } from '~/types/api/notifications'
+import { NotificationsDashboardDialogEntity } from '#components'
 
 defineEmits<{ (e: 'openDialog'): void }>()
 
@@ -40,11 +41,6 @@ const colsVisible = computed(() => {
   }
 })
 
-const openDialog = () => {
-  // TODO: implement dialog
-  alert('not implemented yet 😪')
-}
-
 const getDashboardType = (isAccount: boolean): DashboardType => isAccount ? 'account' : 'validator'
 const { overview } = useNotificationsDashboardOverviewStore()
 const mapEventtypeToText = (eventType: NotificationDashboardsTableRow['event_types'][number]) => {
@@ -95,6 +91,20 @@ const mapEventtypeToText = (eventType: NotificationDashboardsTableRow['event_typ
 const textDashboardNotifications = (event_types: NotificationDashboardsTableRow['event_types']) => {
   return event_types.map(mapEventtypeToText).join(', ')
 }
+
+const dialog = useDialog()
+
+const showDialog = (row: { identifier: string } & NotificationDashboardsTableRow) => {
+  dialog.open(NotificationsDashboardDialogEntity, {
+    data: {
+      dashboard_id: row.dashboard_id,
+      epoch: row.epoch,
+      group_id: row.group_id,
+      group_name: row.group_name,
+      identifier: row.identifier,
+    },
+  })
+}
 </script>
 
 <template>
@@ -104,9 +114,6 @@ const textDashboardNotifications = (event_types: NotificationDashboardsTableRow[
       :search-placeholder="$t('notifications.dashboards.search_placeholder')"
       @set-search="setSearch"
     >
-      <template #header-left>
-        NETWORK_SWITCHER_COMPONENT
-      </template>
       <template #table>
         <ClientOnly fallback-tag="span">
           <BcTable
@@ -217,11 +224,15 @@ const textDashboardNotifications = (event_types: NotificationDashboardsTableRow[
                       }}
                     </span>
                   </template>
-                  <FontAwesomeIcon
-                    class="link"
-                    :icon="faArrowUpRightFromSquare"
-                    @click="openDialog"
-                  />
+                  <BcButtonIcon
+                    screenreader-text="Open notification details"
+                    @click="showDialog(slotProps.data)"
+                  >
+                    <FontAwesomeIcon
+                      class="link"
+                      :icon="faArrowUpRightFromSquare"
+                    />
+                  </BcButtonIcon>
                 </div>
               </template>
             </Column>
@@ -373,17 +384,6 @@ $breakpoint-lg: 1024px;
   @include utils.truncate-text;
 }
 
-:deep(.bc-table-header) {
-  .h1 {
-    display: none;
-  }
-
-  @media (min-width: $breakpoint-lg) {
-    .h1 {
-      display: block;
-    }
-  }
-}
 :deep(.right-info) {
   flex-direction: column;
   justify-content: center;
diff --git a/frontend/locales/en.json b/frontend/locales/en.json
index be4f6211d..586d44e26 100644
--- a/frontend/locales/en.json
+++ b/frontend/locales/en.json
@@ -16,6 +16,7 @@
   },
   "clipboard": {
     "copied": "Copied!",
+    "copied_to_clipboard": "Copied to clipboard!",
     "copy": "Copy to clipboard"
   },
   "common": {
@@ -613,6 +614,25 @@
           "heading":"Delete all notifications",
           "paragraph": "Do you really want to delete all notifications for this dashboard?"
           },
+        "entity": {
+          "attestation_missed":"Attestation missed",
+          "group_back_online": "Group back online",
+          "group_offline": "Group offline",
+          "group_offline_reminder": "Group offline reminder",
+          "max_collateral":"Maximum collateral reached",
+          "min_collateral":"Minimum collateral reached",
+          "proposal_done": "Proposal done",
+          "proposal_missed": "Proposal missed",
+          "slashed": "Slashed",
+          "sync_committee": "Sync committee",
+          "title": "Notifications",
+          "upcoming_proposal": "Upcoming proposal",
+          "validator_back_online": "Validator back online",
+          "validator_offline": "Validator offline",
+          "validator_offline_reminder": "Validator offline reminder",
+          "withdrawal": "Withdrawal"
+
+        },
         "heading_webhook": "Edit Webhook",
         "info_send_via_discord": {
           "_link": "Discord webhook",
diff --git a/frontend/stores/notifications/useNotificationsDashboardDetailsStore.ts b/frontend/stores/notifications/useNotificationsDashboardDetailsStore.ts
new file mode 100644
index 000000000..06754b995
--- /dev/null
+++ b/frontend/stores/notifications/useNotificationsDashboardDetailsStore.ts
@@ -0,0 +1,52 @@
+import type {
+  InternalGetUserNotificationsValidatorDashboardResponse,
+  NotificationDashboardsTableRow, NotificationValidatorDashboardDetail,
+} from '~/types/api/notifications'
+import { API_PATH } from '~/types/customFetch'
+
+export const useNotificationsDashboardDetailsStore = defineStore('notifications-dashboard-details', () => {
+  const { fetch } = useCustomFetch()
+  const detailsList = ref(new Map())
+
+  const getDetails = async ({
+    dashboard_id,
+    epoch,
+    group_id,
+    search,
+  }:
+    {
+      search?: string,
+    }
+    & Pick<NotificationDashboardsTableRow, 'dashboard_id' | 'epoch' | 'group_id'>,
+  ) => {
+    return fetch<InternalGetUserNotificationsValidatorDashboardResponse>(
+      API_PATH.NOTIFICATIONS_DASHBOARDS_DETAILS_VALIDATOR,
+      {
+        query: {
+          search,
+        },
+      },
+      {
+        dashboard_id,
+        epoch,
+        group_id,
+      },
+    )
+  }
+
+  const addDetails = ({
+    details,
+    identifier,
+  }: {
+    details: NotificationValidatorDashboardDetail,
+    identifier: string,
+  }) => {
+    detailsList.value.set(identifier, details)
+  }
+
+  return {
+    addDetails,
+    detailsList,
+    getDetails,
+  }
+})
diff --git a/frontend/stores/notifications/useNotificationsDashboardStore.ts b/frontend/stores/notifications/useNotificationsDashboardStore.ts
index 41f392627..97963628b 100644
--- a/frontend/stores/notifications/useNotificationsDashboardStore.ts
+++ b/frontend/stores/notifications/useNotificationsDashboardStore.ts
@@ -30,7 +30,7 @@ export function useNotificationsDashboardStore(networkId: globalThis.Ref<ChainID
     setStoredQuery,
   } = useTableQuery({
     limit: 10,
-    sort: 'timestamp:desc',
+    sort: 'epoch:desc',
   }, 10)
   const isLoading = ref(false)
 
diff --git a/frontend/types/customFetch.ts b/frontend/types/customFetch.ts
index 4888a4f97..508a8cb0d 100644
--- a/frontend/types/customFetch.ts
+++ b/frontend/types/customFetch.ts
@@ -41,6 +41,8 @@ export enum API_PATH {
   LOGOUT = '/logout',
   NOTIFICATIONS_CLIENTS = '/notifications/clients',
   NOTIFICATIONS_DASHBOARDS = '/notifications/dashboards',
+  NOTIFICATIONS_DASHBOARDS_DETAILS_ACCOUNT = '/notifications/dashboards/details/account',
+  NOTIFICATIONS_DASHBOARDS_DETAILS_VALIDATOR = '/notifications/dashboards/details/validator',
   NOTIFICATIONS_MACHINE = '/notifications/machines',
   NOTIFICATIONS_MANAGEMENT_CLIENTS_SET_NOTIFICATION = '/notifications/management/clients/set_notifications',
   NOTIFICATIONS_MANAGEMENT_DASHBOARD_ACCOUNT_SET_NOTIFICATION = '/notifications/management/account_dashboard/set_notifications',
@@ -295,6 +297,18 @@ export const mapping: Record<string, MappingData> = {
   [API_PATH.NOTIFICATIONS_DASHBOARDS]: {
     path: '/users/me/notifications/dashboards',
   },
+  [API_PATH.NOTIFICATIONS_DASHBOARDS_DETAILS_ACCOUNT]: {
+    getPath: pathValues =>
+      `/users/me/notifications/account-dashboards/${pathValues?.dashboard_id}`
+      + `/groups/${pathValues?.group_id}/epochs/${pathValues?.epoch}`,
+    path: '/users/me/notifications/account-dashboards/{dashboard_id}/groups/{group_id}/epochs/{epoch}',
+  },
+  [API_PATH.NOTIFICATIONS_DASHBOARDS_DETAILS_VALIDATOR]: {
+    getPath: pathValues =>
+      `/users/me/notifications/validator-dashboards/${pathValues?.dashboard_id}`
+      + `/groups/${pathValues?.group_id}/epochs/${pathValues?.epoch}`,
+    path: '/users/me/notifications/validator-dashboards/{dashboard_id}/groups/{group_id}/epochs/{epoch}',
+  },
   [API_PATH.NOTIFICATIONS_MACHINE]: {
     path: '/users/me/notifications/machines',
   },