From c5cb980e6193d6021fb568378ef51572294cd1a2 Mon Sep 17 00:00:00 2001
From: Marcelo Fukumoto <marcelo.fukumoto@suse.com>
Date: Mon, 18 May 2026 23:07:55 +0200
Subject: [PATCH 01/28] Added workload-dashboard

---
 .../Resource/Detail/Card/StatusCard/index.vue |  27 +-
 .../components/Resource/Detail/Card/index.vue |  29 +-
 .../components/Resource/Detail/StatusRow.vue  |  21 +-
 shell/config/product/explorer.js              |  19 +-
 shell/config/router/routes.js                 |   4 +
 .../_cluster/explorer/workload-dashboard.vue  | 513 ++++++++++++++++++
 6 files changed, 593 insertions(+), 20 deletions(-)
 create mode 100644 shell/pages/c/_cluster/explorer/workload-dashboard.vue

diff --git a/shell/components/Resource/Detail/Card/StatusCard/index.vue b/shell/components/Resource/Detail/Card/StatusCard/index.vue
index c5b8cda97ba..4d1a3bd8645 100644
--- a/shell/components/Resource/Detail/Card/StatusCard/index.vue
+++ b/shell/components/Resource/Detail/Card/StatusCard/index.vue
@@ -8,12 +8,16 @@ import { useI18n } from '@shell/composables/useI18n';
 import { StateColor } from '@shell/utils/style';
 import { computed } from 'vue';
 import { useStore } from 'vuex';
+import type { RouteLocationRaw } from 'vue-router';
 
 export interface Props {
   title: string;
   resources?: any[];
   showScaling?: boolean;
+  showPercent?: boolean;
   noResourcesMessage?: string;
+  to?: RouteLocationRaw;
+  rowTo?: RouteLocationRaw | string;
 }
 </script>
 
@@ -24,7 +28,10 @@ const i18n = useI18n(store);
 const props = withDefaults(defineProps<Props>(), {
   resources:          undefined,
   showScaling:        false,
-  noResourcesMessage: undefined
+  showPercent:        true,
+  noResourcesMessage: undefined,
+  to:                 undefined,
+  rowTo:              undefined
 });
 const emit = defineEmits(['decrease', 'increase']);
 
@@ -85,6 +92,14 @@ const rows = computed(() => {
   }));
 });
 
+function rowRoute(label: string): RouteLocationRaw | undefined {
+  if (!props.rowTo || typeof props.rowTo === 'string') {
+    return undefined;
+  }
+
+  return { ...props.rowTo, query: { q: label } };
+}
+
 </script>
 
 <template>
@@ -92,6 +107,14 @@ const rows = computed(() => {
     :title="title"
     data-testid="resource-detail-status-card"
   >
+    <template
+      v-if="props.to"
+      #title
+    >
+      <router-link :to="props.to">
+        {{ title }}
+      </router-link>
+    </template>
     <template
       v-if="props.showScaling"
       #heading-action
@@ -120,6 +143,8 @@ const rows = computed(() => {
         :label="row.label"
         :count="row.count"
         :percent="row.percent"
+        :showPercent="props.showPercent"
+        :to="rowRoute(row.label)"
       />
     </div>
     <div
diff --git a/shell/components/Resource/Detail/Card/index.vue b/shell/components/Resource/Detail/Card/index.vue
index 1a41573298b..a55490ba76d 100644
--- a/shell/components/Resource/Detail/Card/index.vue
+++ b/shell/components/Resource/Detail/Card/index.vue
@@ -1,27 +1,32 @@
 <script setup lang="ts">
+import { computed } from 'vue';
 import VerticalGap from '@shell/components/Resource/Detail/Card/VerticalGap.vue';
 
 export interface CardProps {
     title?: string;
+    headless?: boolean;
 }
 
-const { title } = defineProps<CardProps>();
+const { title, headless = false } = defineProps<CardProps>();
 
+const hideHeading = computed(() => headless || !title);
 </script>
 
 <template>
   <div class="detail-card">
-    <div class="heading">
-      <slot name="heading">
-        <div class="title">
-          <slot name="title">
-            {{ title }}
-          </slot>
-        </div>
-      </slot>
-      <slot name="heading-action" />
-    </div>
-    <VerticalGap />
+    <template v-if="!hideHeading">
+      <div class="heading">
+        <slot name="heading">
+          <div class="title">
+            <slot name="title">
+              {{ title }}
+            </slot>
+          </div>
+        </slot>
+        <slot name="heading-action" />
+      </div>
+      <VerticalGap />
+    </template>
     <div class="body">
       <slot name="default" />
     </div>
diff --git a/shell/components/Resource/Detail/StatusRow.vue b/shell/components/Resource/Detail/StatusRow.vue
index a0e34ee633d..e36a778da36 100644
--- a/shell/components/Resource/Detail/StatusRow.vue
+++ b/shell/components/Resource/Detail/StatusRow.vue
@@ -1,16 +1,20 @@
 <script setup lang="ts">
 import { RcCounterBadge } from '@components/Pill';
+import SubtleLink from '@shell/components/SubtleLink.vue';
 import { StateColor, stateColorCssVar } from '@shell/utils/style';
+import type { RouteLocationRaw } from 'vue-router';
 
 export interface Props {
         color: StateColor;
         label: string;
         count: number;
         percent: number;
+        showPercent?: boolean;
+        to?: RouteLocationRaw;
 }
 
 const {
-  color, label, count, percent
+  color, label, count, percent, showPercent = true, to
 } = defineProps<Props>();
 </script>
 
@@ -21,7 +25,15 @@ const {
       :style="{backgroundColor: stateColorCssVar(color)}"
     />
     <div class="label">
-      {{ label }}
+      <SubtleLink
+        v-if="to"
+        :to="to"
+      >
+        {{ label }}
+      </SubtleLink>
+      <template v-else>
+        {{ label }}
+      </template>
     </div>
     <div class="count">
       <RcCounterBadge
@@ -29,7 +41,10 @@ const {
         type="inactive"
       />
     </div>
-    <div class="percent text-muted">
+    <div
+      v-if="showPercent"
+      class="percent text-muted"
+    >
       {{ percent.toFixed(1) }}%
     </div>
   </div>
diff --git a/shell/config/product/explorer.js b/shell/config/product/explorer.js
index 11157114bb2..776bebe6ac3 100644
--- a/shell/config/product/explorer.js
+++ b/shell/config/product/explorer.js
@@ -103,6 +103,7 @@ export function init(store) {
     CONFIG_MAP
   ], 'storage');
   basicType([
+    'workload-dashboard',
     WORKLOAD,
     WORKLOAD_TYPES.DEPLOYMENT,
     WORKLOAD_TYPES.DAEMON_SET,
@@ -112,10 +113,6 @@ export function init(store) {
     POD,
   ], 'workload');
 
-  setGroupDefaultType('workload', () => {
-    return store.getters['features/get'](STEVE_CACHE) ? WORKLOAD_TYPES.DEPLOYMENT : undefined;
-  });
-
   weightGroup('cluster', 99, true);
   weightGroup('workload', 98, true);
   weightGroup('serviceDiscovery', 96, true);
@@ -586,6 +583,20 @@ export function init(store) {
     overview:   true,
   });
 
+  // Workload Dashboard - overview page using the Resource Summary API
+  virtualType({
+    label:          store.getters['i18n/t'](`typeLabel.${ WORKLOAD }`, { count: 2 }),
+    group:          'Root',
+    namespaced:     true,
+    name:           'workload-dashboard',
+    weight:         100,
+    icon:           'folder',
+    ifHaveSubTypes: Object.values(WORKLOAD_TYPES),
+    route:          { name: 'c-cluster-explorer-workload-dashboard' },
+    exact:          true,
+    overview:       true,
+  });
+
   virtualType({
     labelKey:     'members.clusterAndProject',
     group:        'cluster',
diff --git a/shell/config/router/routes.js b/shell/config/router/routes.js
index 7ee35ee5e97..0ea0280bf45 100644
--- a/shell/config/router/routes.js
+++ b/shell/config/router/routes.js
@@ -349,6 +349,10 @@ export default [
         path:      '/c/:cluster/explorer/explorer-utils',
         component: () => interopDefault(import('@shell/pages/c/_cluster/explorer/explorer-utils.js')),
         name:      'c-cluster-explorer-explorer-utils'
+      }, {
+        path:      '/c/:cluster/explorer/workload-dashboard',
+        component: () => interopDefault(import('@shell/pages/c/_cluster/explorer/workload-dashboard.vue')),
+        name:      'c-cluster-explorer-workload-dashboard'
       }, {
         path:      '/c/:cluster/explorer/tools',
         component: () => interopDefault(import('@shell/pages/c/_cluster/explorer/tools/index.vue')),
diff --git a/shell/pages/c/_cluster/explorer/workload-dashboard.vue b/shell/pages/c/_cluster/explorer/workload-dashboard.vue
new file mode 100644
index 00000000000..130bbf97ed4
--- /dev/null
+++ b/shell/pages/c/_cluster/explorer/workload-dashboard.vue
@@ -0,0 +1,513 @@
+<script>
+import { WORKLOAD_TYPES, POD } from '@shell/config/types';
+import { Banner } from '@components/Banner';
+import { STATES } from '@shell/plugins/dashboard-store/resource-class';
+import Card from '@shell/components/Resource/Detail/Card/index.vue';
+import ResourceRow from '@shell/components/Resource/Detail/ResourceRow.vue';
+import StatusCard from '@shell/components/Resource/Detail/Card/StatusCard/index.vue';
+
+const WORKLOAD_RESOURCE_TYPES = {
+  [WORKLOAD_TYPES.DEPLOYMENT]:   { label: 'Deployments' },
+  [WORKLOAD_TYPES.DAEMON_SET]:   { label: 'DaemonSets' },
+  [WORKLOAD_TYPES.STATEFUL_SET]: { label: 'StatefulSets' },
+  [WORKLOAD_TYPES.JOB]:          { label: 'Jobs' },
+  [WORKLOAD_TYPES.CRON_JOB]:     { label: 'CronJobs' },
+  [POD]:                         { label: 'Pods' },
+};
+
+const DATA_SOURCE_OPTIONS = [
+  { label: 'Real (API)', value: 'real' },
+  { label: '1 State', value: '1-state' },
+  { label: '2 States', value: '2-states' },
+  { label: '3 States', value: '3-states' },
+  { label: '4 States', value: '4-states' },
+  { label: '5 States', value: '5-states' },
+];
+
+// States that the Steve server marks as transitioning (metadata.state.transitioning = true).
+// For these, the real colorForState returns 'info' regardless of STATES[key].color.
+const TRANSITIONING_STATES = new Set([
+  'unknown', 'containerstatusunknown', 'imagepullbackoff',
+  'crashloopbackoff',
+]);
+
+// States that the Steve server marks as error (metadata.state.error = true).
+// For these, the real colorForState returns 'error' regardless of STATES[key].color.
+const ERROR_STATES = new Set([
+  'init:error', 'init:crashloopbackoff',
+]);
+
+function toStateColor(state) {
+  const key = (state || '').toLowerCase();
+
+  if (ERROR_STATES.has(key)) {
+    return 'error';
+  }
+
+  if (TRANSITIONING_STATES.has(key)) {
+    return 'info';
+  }
+
+  const config = STATES[key];
+  const color = config?.color || 'info';
+
+  return color === 'darker' ? 'disabled' : color;
+}
+
+export default {
+  name:       'WorkloadDashboard',
+  components: {
+    Banner, Card, ResourceRow, StatusCard,
+  },
+
+  async fetch() {
+    await this.fetchSummaries();
+  },
+
+  data() {
+    return {
+      summaries:         [],
+      fetchError:        null,
+      dataSource:        'real',
+      dataSourceOptions: DATA_SOURCE_OPTIONS,
+      pollTimer:         null,
+    };
+  },
+
+  watch: {
+    activeNamespaces() {
+      if (this.dataSource === 'real') {
+        this.fetchSummaries();
+      }
+    },
+    dataSource() {
+      this.applyDataSource();
+    },
+  },
+
+  mounted() {
+    this.pollTimer = setInterval(() => {
+      if (this.dataSource === 'real') {
+        this.fetchSummaries();
+      }
+    }, 5000);
+  },
+
+  beforeUnmount() {
+    clearInterval(this.pollTimer);
+  },
+
+  methods: {
+    resourceRoute(type) {
+      return {
+        name:   'c-cluster-product-resource',
+        params: {
+          cluster:  this.$route.params.cluster,
+          product:  'explorer',
+          resource: type,
+        },
+      };
+    },
+
+    applyDataSource() {
+      if (this.dataSource === 'real') {
+        this.fetchSummaries();
+      } else {
+        this.summaries = [];
+        this.fetchError = null;
+      }
+    },
+
+    async fetchSummaries() {
+      try {
+        const workloadPromises = Object.keys(WORKLOAD_RESOURCE_TYPES).map(async(type) => {
+          const schema = this.$store.getters['cluster/schemaFor'](type);
+
+          if (!schema) {
+            return {
+              type, summary: null, error: `No access to ${ type }`
+            };
+          }
+
+          try {
+            let url = `/v1/${ type }?summary=metadata.state.name`;
+
+            if (!this.isAllNamespaces) {
+              const namespaces = Object.keys(this.activeNamespaces);
+
+              if (namespaces.length) {
+                url += `&projectsornamespaces=${ namespaces.join(',') }`;
+              }
+            }
+
+            const res = await this.$store.dispatch('cluster/request', { url });
+
+            return {
+              type, summary: res.summary || [], error: null
+            };
+          } catch (e) {
+            return {
+              type, summary: null, error: e.message || `Failed to fetch ${ type }`
+            };
+          }
+        });
+
+        this.summaries = await Promise.all(workloadPromises);
+      } catch (e) {
+        this.fetchError = e.message || 'Failed to fetch workload summaries';
+      }
+    },
+  },
+
+  computed: {
+    activeNamespaces() {
+      return this.$store.getters['activeNamespaceCache'];
+    },
+
+    isAllNamespaces() {
+      return this.$store.getters['isAllNamespaces'];
+    },
+
+    workloadData() {
+      return this.summaries.map((entry) => {
+        const config = WORKLOAD_RESOURCE_TYPES[entry.type] || { label: entry.type };
+        const stateCounts = {};
+        let total = 0;
+
+        if (entry.summary) {
+          for (const s of entry.summary) {
+            if (s.property === 'metadata.state.name') {
+              Object.assign(stateCounts, s.counts);
+              total = Object.values(s.counts).reduce((sum, c) => sum + c, 0);
+            }
+          }
+        }
+
+        return {
+          type:  entry.type,
+          label: config.label,
+          total,
+          stateCounts,
+          error: entry.error,
+        };
+      });
+    },
+
+    /**
+     * "By State": decompose each workload type's state counts into severity groups.
+     * Aggregates counts per type within each severity card.
+     */
+    byStateCards() {
+      const colorGroups = {
+        error:    {},
+        warning:  {},
+        info:     {},
+        success:  {},
+        disabled: {},
+      };
+
+      for (const w of this.workloadData) {
+        if (w.error || w.total === 0) {
+          continue;
+        }
+
+        for (const [state, count] of Object.entries(w.stateCounts)) {
+          const color = toStateColor(state);
+
+          if (!colorGroups[color][w.label]) {
+            colorGroups[color][w.label] = { count: 0, type: w.type };
+          }
+          colorGroups[color][w.label].count += count;
+        }
+      }
+
+      return Object.entries(colorGroups)
+        .filter(([, typeMap]) => Object.keys(typeMap).length > 0)
+        .map(([color, typeMap]) => ({
+          color,
+          rows: Object.entries(typeMap).map(([label, { count, type }]) => ({
+            label,
+            color,
+            type,
+            counts: [{ label: '', count }],
+          })),
+        }));
+    },
+
+    /**
+     * Bento-box layout: hero (success) card on the right spanning full height,
+     * remaining cards fill a 2-column left grid.
+     */
+    byStateLayout() {
+      const cards = this.byStateCards;
+      const hero = cards.find((c) => c.color === 'success') || null;
+      const others = cards.filter((c) => c !== hero);
+
+      let heroMode = 'default';
+
+      if (cards.length === 1) {
+        heroMode = 'full';
+      } else if (others.length === 1) {
+        heroMode = 'wide';
+      }
+
+      const subHero = (hero && others.length >= 3) ? others.find((c) => c.color === 'info') || null : null;
+
+      const regularCards = subHero ? others.filter((c) => c !== subHero) : others;
+      const gridRows = subHero ? Math.max(1, regularCards.length) : Math.max(1, Math.ceil(regularCards.length / 2));
+
+      return {
+        hero,
+        subHero,
+        cards: regularCards,
+        heroMode,
+        gridRows,
+      };
+    },
+
+    /**
+     * "By Type": one StatusCard per workload type with fake resource objects.
+     */
+    byTypeCards() {
+      const colorOrder = {
+        error: 0, warning: 1, disabled: 2, info: 3, success: 4
+      };
+
+      return this.workloadData.filter((w) => !w.error && w.total > 0).map((w) => {
+        const resources = [];
+
+        const sortedStates = Object.entries(w.stateCounts)
+          .sort(([a], [b]) => (colorOrder[toStateColor(a)] ?? 5) - (colorOrder[toStateColor(b)] ?? 5));
+
+        for (const [state, count] of sortedStates) {
+          for (let i = 0; i < count; i++) {
+            resources.push({
+              stateDisplay:     state?.charAt(0).toUpperCase() + state?.slice(1),
+              stateSimpleColor: toStateColor(state),
+            });
+          }
+        }
+
+        return {
+          title: w.label,
+          type:  w.type,
+          resources,
+        };
+      });
+    },
+
+  },
+};
+</script>
+
+<template>
+  <Loading v-if="$fetchState.pending" />
+
+  <div
+    v-else
+    class="workload-dashboard"
+  >
+    <header class="row">
+      <div class="col span-12 title">
+        <h1 class="m-0">
+          Workloads Overview
+        </h1>
+        <div class="sub-title text-muted">
+          For all namespaces
+        </div>
+      </div>
+    </header>
+
+    <Banner
+      v-if="fetchError"
+      color="error"
+    >
+      {{ fetchError }}
+    </Banner>
+
+    <!-- ━━━ By State ━━━ -->
+    <div class="section">
+      <h4 class="m-0 text-muted">
+        By State
+      </h4>
+      <div
+        class="bento-grid"
+        :class="{ 'bento-grid--has-sub-hero': !!byStateLayout.subHero }"
+        :style="{ 'grid-template-rows': 'repeat(' + byStateLayout.gridRows + ', ' + (byStateLayout.subHero ? '1fr' : 'auto') + ')' }"
+      >
+        <Card
+          v-for="card in byStateLayout.cards"
+          :key="card.color"
+          class="state-card"
+          :class="'state-card--' + card.color"
+          headless
+        >
+          <ResourceRow
+            v-for="(row, idx) in card.rows"
+            :key="idx"
+            :label="row.label"
+            :to="resourceRoute(row.type)"
+            :color="row.color"
+            :counts="row.counts"
+          />
+        </Card>
+        <Card
+          v-if="byStateLayout.subHero"
+          class="state-card bento-sub-hero"
+          :class="'state-card--' + byStateLayout.subHero.color"
+          headless
+        >
+          <ResourceRow
+            v-for="(row, idx) in byStateLayout.subHero.rows"
+            :key="idx"
+            :label="row.label"
+            :to="resourceRoute(row.type)"
+            :color="row.color"
+            :counts="row.counts"
+          />
+        </Card>
+        <Card
+          v-if="byStateLayout.hero"
+          class="state-card bento-hero"
+          :class="['state-card--' + byStateLayout.hero.color, 'bento-hero--' + byStateLayout.heroMode]"
+          headless
+        >
+          <ResourceRow
+            v-for="(row, idx) in byStateLayout.hero.rows"
+            :key="idx"
+            :label="row.label"
+            :to="resourceRoute(row.type)"
+            :color="row.color"
+            :counts="row.counts"
+          />
+        </Card>
+      </div>
+    </div>
+
+    <!-- ━━━ By Type ━━━ -->
+    <div class="section">
+      <h4 class="m-0 text-muted">
+        By Type
+      </h4>
+      <div class="card-grid">
+        <StatusCard
+          v-for="card in byTypeCards"
+          :key="card.title"
+          :title="card.title"
+          :row-to="resourceRoute(card.type)"
+          :resources="card.resources"
+          :showPercent="false"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.workload-dashboard {
+  gap: 24px;
+
+  .section {
+    h4 {
+      line-height: 21px;
+    }
+    gap: 16px;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .title {
+    gap: 4px;
+
+    h1 {
+      line-height: 32px;
+    }
+
+    .sub-title {
+      line-height: 21px;
+    }
+  }
+
+  .card-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 15px;
+  }
+
+  .bento-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-auto-flow: dense;
+    gap: 15px;
+  }
+
+  .bento-hero {
+    grid-column: 3;
+    grid-row: 1 / -1;
+
+    &--full {
+      grid-column: 1 / -1;
+
+      ::v-deep .body {
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        gap: 4px 48px;
+      }
+    }
+
+    &--wide {
+      grid-column: 2 / -1;
+
+      ::v-deep .body {
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+        gap: 4px 48px;
+      }
+    }
+  }
+
+  .bento-sub-hero {
+    grid-column: 2;
+    grid-row: 1 / -1;
+  }
+
+  .bento-grid--has-sub-hero {
+    .state-card:not(.bento-hero):not(.bento-sub-hero) {
+      grid-column: 1;
+    }
+  }
+
+  .state-card {
+    ::v-deep .resource-row {
+      position: relative;
+      padding-left: 20px;
+      line-height: 20px;
+      height: 24px;
+
+      .left {
+        flex-grow: 1;
+      }
+
+      .right .counts .state-dot {
+        position: absolute;
+        left: 0;
+        top: 50%;
+        transform: translateY(-50%);
+      }
+    }
+
+    &--error {
+      background: var(--error-banner-bg, rgba(var(--error-rgb), 0.1));
+    }
+    &--warning {
+      background: var(--warning-banner-bg, rgba(var(--warning-rgb), 0.1));
+    }
+    &--info {
+      background: var(--info-banner-bg, rgba(var(--info-rgb), 0.1));
+    }
+    &--success {
+      background: var(--success-banner-bg, rgba(var(--success-rgb), 0.1));
+    }
+  }
+}
+</style>

From 7c1a8a474a5b1b5df8e73ad6a75e3030823f92b0 Mon Sep 17 00:00:00 2001
From: Marcelo Fukumoto <marcelo.fukumoto@suse.com>
Date: Tue, 19 May 2026 14:14:32 +0200
Subject: [PATCH 02/28] Removed the TO added on STATUS CARD

---
 .../Resource/Detail/Card/StatusCard/index.vue          | 10 ----------
 1 file changed, 10 deletions(-)

diff --git a/shell/components/Resource/Detail/Card/StatusCard/index.vue b/shell/components/Resource/Detail/Card/StatusCard/index.vue
index 4d1a3bd8645..8fbd136524f 100644
--- a/shell/components/Resource/Detail/Card/StatusCard/index.vue
+++ b/shell/components/Resource/Detail/Card/StatusCard/index.vue
@@ -16,7 +16,6 @@ export interface Props {
   showScaling?: boolean;
   showPercent?: boolean;
   noResourcesMessage?: string;
-  to?: RouteLocationRaw;
   rowTo?: RouteLocationRaw | string;
 }
 </script>
@@ -30,7 +29,6 @@ const props = withDefaults(defineProps<Props>(), {
   showScaling:        false,
   showPercent:        true,
   noResourcesMessage: undefined,
-  to:                 undefined,
   rowTo:              undefined
 });
 const emit = defineEmits(['decrease', 'increase']);
@@ -107,14 +105,6 @@ function rowRoute(label: string): RouteLocationRaw | undefined {
     :title="title"
     data-testid="resource-detail-status-card"
   >
-    <template
-      v-if="props.to"
-      #title
-    >
-      <router-link :to="props.to">
-        {{ title }}
-      </router-link>
-    </template>
     <template
       v-if="props.showScaling"
       #heading-action

From 4091873025b5ecc33291ba857188e4b4f8ae3627 Mon Sep 17 00:00:00 2001
From: Marcelo Fukumoto <marcelo.fukumoto@suse.com>
Date: Tue, 19 May 2026 14:28:40 +0200
Subject: [PATCH 03/28] Remove headless option and make the title only

---
 shell/components/Resource/Detail/Card/index.vue        | 6 ++----
 shell/pages/c/_cluster/explorer/workload-dashboard.vue | 3 ---
 2 files changed, 2 insertions(+), 7 deletions(-)

diff --git a/shell/components/Resource/Detail/Card/index.vue b/shell/components/Resource/Detail/Card/index.vue
index a55490ba76d..283b37a34ac 100644
--- a/shell/components/Resource/Detail/Card/index.vue
+++ b/shell/components/Resource/Detail/Card/index.vue
@@ -4,17 +4,15 @@ import VerticalGap from '@shell/components/Resource/Detail/Card/VerticalGap.vue'
 
 export interface CardProps {
     title?: string;
-    headless?: boolean;
 }
 
-const { title, headless = false } = defineProps<CardProps>();
+const { title } = defineProps<CardProps>();
 
-const hideHeading = computed(() => headless || !title);
 </script>
 
 <template>
   <div class="detail-card">
-    <template v-if="!hideHeading">
+    <template v-if="title">
       <div class="heading">
         <slot name="heading">
           <div class="title">
diff --git a/shell/pages/c/_cluster/explorer/workload-dashboard.vue b/shell/pages/c/_cluster/explorer/workload-dashboard.vue
index 130bbf97ed4..70cc7f423fe 100644
--- a/shell/pages/c/_cluster/explorer/workload-dashboard.vue
+++ b/shell/pages/c/_cluster/explorer/workload-dashboard.vue
@@ -340,7 +340,6 @@ export default {
           :key="card.color"
           class="state-card"
           :class="'state-card--' + card.color"
-          headless
         >
           <ResourceRow
             v-for="(row, idx) in card.rows"
@@ -355,7 +354,6 @@ export default {
           v-if="byStateLayout.subHero"
           class="state-card bento-sub-hero"
           :class="'state-card--' + byStateLayout.subHero.color"
-          headless
         >
           <ResourceRow
             v-for="(row, idx) in byStateLayout.subHero.rows"
@@ -370,7 +368,6 @@ export default {
           v-if="byStateLayout.hero"
           class="state-card bento-hero"
           :class="['state-card--' + byStateLayout.hero.color, 'bento-hero--' + byStateLayout.heroMode]"
-          headless
         >
           <ResourceRow
             v-for="(row, idx) in byStateLayout.hero.rows"

From 17992fe5534bed9368b43873633f5af52b17f571 Mon Sep 17 00:00:00 2001
From: Marcelo Fukumoto <marcelo.fukumoto@suse.com>
Date: Tue, 19 May 2026 14:32:46 +0200
Subject: [PATCH 04/28] Fix lint

---
 shell/components/Resource/Detail/Card/index.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/shell/components/Resource/Detail/Card/index.vue b/shell/components/Resource/Detail/Card/index.vue
index 283b37a34ac..fa76cc907a6 100644
--- a/shell/components/Resource/Detail/Card/index.vue
+++ b/shell/components/Resource/Detail/Card/index.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { computed } from 'vue';
 import VerticalGap from '@shell/components/Resource/Detail/Card/VerticalGap.vue';
 
 export interface CardProps {

From ecdfeef941e37f0f926dea7642277154c1768375 Mon Sep 17 00:00:00 2001
From: Marcelo Fukumoto <marcelo.fukumoto@suse.com>
Date: Tue, 19 May 2026 15:23:26 +0200
Subject: [PATCH 05/28] Added the workload-dashboard type.

---
 shell/config/product/explorer.js | 5 +++--
 shell/config/types.js            | 1 +
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/shell/config/product/explorer.js b/shell/config/product/explorer.js
index 776bebe6ac3..668623dfbf5 100644
--- a/shell/config/product/explorer.js
+++ b/shell/config/product/explorer.js
@@ -10,6 +10,7 @@ import {
   SNAPSHOT,
   VIRTUAL_TYPES,
   CAPI,
+  WORKLOAD_DASHBOARD,
 } from '@shell/config/types';
 
 import {
@@ -103,7 +104,7 @@ export function init(store) {
     CONFIG_MAP
   ], 'storage');
   basicType([
-    'workload-dashboard',
+    WORKLOAD_DASHBOARD,
     WORKLOAD,
     WORKLOAD_TYPES.DEPLOYMENT,
     WORKLOAD_TYPES.DAEMON_SET,
@@ -588,7 +589,7 @@ export function init(store) {
     label:          store.getters['i18n/t'](`typeLabel.${ WORKLOAD }`, { count: 2 }),
     group:          'Root',
     namespaced:     true,
-    name:           'workload-dashboard',
+    name:           WORKLOAD_DASHBOARD,
     weight:         100,
     icon:           'folder',
     ifHaveSubTypes: Object.values(WORKLOAD_TYPES),
diff --git a/shell/config/types.js b/shell/config/types.js
index 03e99d31949..e14f68dc919 100644
--- a/shell/config/types.js
+++ b/shell/config/types.js
@@ -81,6 +81,7 @@ export const RBAC = {
 };
 
 export const WORKLOAD = 'workload';
+export const WORKLOAD_DASHBOARD = 'workload-dashboard';
 
 /**
  * Rancher Workload types

From 27fff42a8bab1bd3bc8908c4398180fc5d211103 Mon Sep 17 00:00:00 2001
From: Marcelo Fukumoto <marcelo.fukumoto@suse.com>
Date: Tue, 19 May 2026 16:33:10 +0200
Subject: [PATCH 06/28] Upgrades to the code and translation file

---
 shell/assets/translations/en-us.yaml          | 10 ++
 .../_cluster/explorer/workload-dashboard.vue  | 99 ++++++++-----------
 2 files changed, 51 insertions(+), 58 deletions(-)

diff --git a/shell/assets/translations/en-us.yaml b/shell/assets/translations/en-us.yaml
index f1f20218918..4aebf11a686 100644
--- a/shell/assets/translations/en-us.yaml
+++ b/shell/assets/translations/en-us.yaml
@@ -7425,6 +7425,16 @@ wm:
   kubectlShell:
     title: "Kubectl: {name}"
 
+workloadDashboard:
+  title: Workloads Overview
+  subtitle:
+    allNamespaces: For all namespaces
+    filtered: "For namespace: {namespace}"
+    filteredMultiple: "For {count} namespaces"
+  sections:
+    byState: By State
+    byType: By Type
+
 workload:
   scaleWorkloads: Scale workloads
   healthWorkloads: Jobs/Pods health status
diff --git a/shell/pages/c/_cluster/explorer/workload-dashboard.vue b/shell/pages/c/_cluster/explorer/workload-dashboard.vue
index 70cc7f423fe..d93823d66a0 100644
--- a/shell/pages/c/_cluster/explorer/workload-dashboard.vue
+++ b/shell/pages/c/_cluster/explorer/workload-dashboard.vue
@@ -1,27 +1,19 @@
 <script>
 import { WORKLOAD_TYPES, POD } from '@shell/config/types';
 import { Banner } from '@components/Banner';
+import Loading from '@shell/components/Loading';
 import { STATES } from '@shell/plugins/dashboard-store/resource-class';
 import Card from '@shell/components/Resource/Detail/Card/index.vue';
 import ResourceRow from '@shell/components/Resource/Detail/ResourceRow.vue';
 import StatusCard from '@shell/components/Resource/Detail/Card/StatusCard/index.vue';
 
-const WORKLOAD_RESOURCE_TYPES = {
-  [WORKLOAD_TYPES.DEPLOYMENT]:   { label: 'Deployments' },
-  [WORKLOAD_TYPES.DAEMON_SET]:   { label: 'DaemonSets' },
-  [WORKLOAD_TYPES.STATEFUL_SET]: { label: 'StatefulSets' },
-  [WORKLOAD_TYPES.JOB]:          { label: 'Jobs' },
-  [WORKLOAD_TYPES.CRON_JOB]:     { label: 'CronJobs' },
-  [POD]:                         { label: 'Pods' },
-};
-
-const DATA_SOURCE_OPTIONS = [
-  { label: 'Real (API)', value: 'real' },
-  { label: '1 State', value: '1-state' },
-  { label: '2 States', value: '2-states' },
-  { label: '3 States', value: '3-states' },
-  { label: '4 States', value: '4-states' },
-  { label: '5 States', value: '5-states' },
+const WORKLOAD_RESOURCE_TYPES = [
+  WORKLOAD_TYPES.DEPLOYMENT,
+  WORKLOAD_TYPES.DAEMON_SET,
+  WORKLOAD_TYPES.STATEFUL_SET,
+  WORKLOAD_TYPES.JOB,
+  WORKLOAD_TYPES.CRON_JOB,
+  POD,
 ];
 
 // States that the Steve server marks as transitioning (metadata.state.transitioning = true).
@@ -57,7 +49,7 @@ function toStateColor(state) {
 export default {
   name:       'WorkloadDashboard',
   components: {
-    Banner, Card, ResourceRow, StatusCard,
+    Banner, Card, Loading, ResourceRow, StatusCard,
   },
 
   async fetch() {
@@ -66,30 +58,21 @@ export default {
 
   data() {
     return {
-      summaries:         [],
-      fetchError:        null,
-      dataSource:        'real',
-      dataSourceOptions: DATA_SOURCE_OPTIONS,
-      pollTimer:         null,
+      summaries:  [],
+      fetchError: null,
+      pollTimer:  null,
     };
   },
 
   watch: {
     activeNamespaces() {
-      if (this.dataSource === 'real') {
-        this.fetchSummaries();
-      }
-    },
-    dataSource() {
-      this.applyDataSource();
+      this.fetchSummaries();
     },
   },
 
   mounted() {
     this.pollTimer = setInterval(() => {
-      if (this.dataSource === 'real') {
-        this.fetchSummaries();
-      }
+      this.fetchSummaries();
     }, 5000);
   },
 
@@ -109,18 +92,9 @@ export default {
       };
     },
 
-    applyDataSource() {
-      if (this.dataSource === 'real') {
-        this.fetchSummaries();
-      } else {
-        this.summaries = [];
-        this.fetchError = null;
-      }
-    },
-
     async fetchSummaries() {
       try {
-        const workloadPromises = Object.keys(WORKLOAD_RESOURCE_TYPES).map(async(type) => {
+        const workloadPromises = WORKLOAD_RESOURCE_TYPES.map(async(type) => {
           const schema = this.$store.getters['cluster/schemaFor'](type);
 
           if (!schema) {
@@ -168,9 +142,23 @@ export default {
       return this.$store.getters['isAllNamespaces'];
     },
 
+    namespaceSubtitle() {
+      if (this.isAllNamespaces) {
+        return this.t('workloadDashboard.subtitle.allNamespaces');
+      }
+
+      const namespaces = Object.keys(this.activeNamespaces);
+
+      if (namespaces.length === 1) {
+        return this.t('workloadDashboard.subtitle.filtered', { namespace: namespaces[0] });
+      }
+
+      return this.t('workloadDashboard.subtitle.filteredMultiple', { count: namespaces.length });
+    },
+
     workloadData() {
       return this.summaries.map((entry) => {
-        const config = WORKLOAD_RESOURCE_TYPES[entry.type] || { label: entry.type };
+        const label = this.t(`typeLabel."${ entry.type }"`, { count: 2 })?.trim() || entry.type;
         const stateCounts = {};
         let total = 0;
 
@@ -185,7 +173,7 @@ export default {
 
         return {
           type:  entry.type,
-          label: config.label,
+          label,
           total,
           stateCounts,
           error: entry.error,
@@ -310,10 +298,10 @@ export default {
     <header class="row">
       <div class="col span-12 title">
         <h1 class="m-0">
-          Workloads Overview
+          {{ t('workloadDashboard.title') }}
         </h1>
         <div class="sub-title text-muted">
-          For all namespaces
+          {{ namespaceSubtitle }}
         </div>
       </div>
     </header>
@@ -328,7 +316,7 @@ export default {
     <!-- ━━━ By State ━━━ -->
     <div class="section">
       <h4 class="m-0 text-muted">
-        By State
+        {{ t('workloadDashboard.sections.byState') }}
       </h4>
       <div
         class="bento-grid"
@@ -384,7 +372,7 @@ export default {
     <!-- ━━━ By Type ━━━ -->
     <div class="section">
       <h4 class="m-0 text-muted">
-        By Type
+        {{ t('workloadDashboard.sections.byType') }}
       </h4>
       <div class="card-grid">
         <StatusCard
@@ -402,6 +390,8 @@ export default {
 
 <style lang="scss" scoped>
 .workload-dashboard {
+  display: flex;
+  flex-direction: column;
   gap: 24px;
 
   .section {
@@ -493,17 +483,10 @@ export default {
       }
     }
 
-    &--error {
-      background: var(--error-banner-bg, rgba(var(--error-rgb), 0.1));
-    }
-    &--warning {
-      background: var(--warning-banner-bg, rgba(var(--warning-rgb), 0.1));
-    }
-    &--info {
-      background: var(--info-banner-bg, rgba(var(--info-rgb), 0.1));
-    }
-    &--success {
-      background: var(--success-banner-bg, rgba(var(--success-rgb), 0.1));
+    @each $color in (error, warning, info, success) {
+      &--#{$color} {
+        background: var(--#{$color}-banner-bg, rgba(var(--#{$color}-rgb), 0.1));
+      }
     }
   }
 }

From 37bab373d0f7f442e32196130c9127ceea4d8d36 Mon Sep 17 00:00:00 2001
From: Marcelo Fukumoto <marcelo.fukumoto@suse.com>
Date: Tue, 19 May 2026 17:11:03 +0200
Subject: [PATCH 07/28] Added fetch error and empty state

---
 shell/assets/translations/en-us.yaml          |   4 +
 .../_cluster/explorer/workload-dashboard.vue  | 226 ++++++++++++------
 2 files changed, 151 insertions(+), 79 deletions(-)

diff --git a/shell/assets/translations/en-us.yaml b/shell/assets/translations/en-us.yaml
index 4aebf11a686..3bb2b730aca 100644
--- a/shell/assets/translations/en-us.yaml
+++ b/shell/assets/translations/en-us.yaml
@@ -7434,6 +7434,10 @@ workloadDashboard:
   sections:
     byState: By State
     byType: By Type
+  empty:
+    title: No workloads to show
+    message: "Tips: undo the last namespace filter you applied or <resetLink>reset the namespaces filter</resetLink>."
+    docsMessage: "Want to learn more about Workloads? Read our <docsLink>documentation</docsLink>."
 
 workload:
   scaleWorkloads: Scale workloads
diff --git a/shell/pages/c/_cluster/explorer/workload-dashboard.vue b/shell/pages/c/_cluster/explorer/workload-dashboard.vue
index d93823d66a0..5e883dba864 100644
--- a/shell/pages/c/_cluster/explorer/workload-dashboard.vue
+++ b/shell/pages/c/_cluster/explorer/workload-dashboard.vue
@@ -2,7 +2,9 @@
 import { WORKLOAD_TYPES, POD } from '@shell/config/types';
 import { Banner } from '@components/Banner';
 import Loading from '@shell/components/Loading';
+import RichTranslation from '@shell/components/RichTranslation.vue';
 import { STATES } from '@shell/plugins/dashboard-store/resource-class';
+import { DOCS_BASE } from '@shell/config/private-label';
 import Card from '@shell/components/Resource/Detail/Card/index.vue';
 import ResourceRow from '@shell/components/Resource/Detail/ResourceRow.vue';
 import StatusCard from '@shell/components/Resource/Detail/Card/StatusCard/index.vue';
@@ -49,7 +51,7 @@ function toStateColor(state) {
 export default {
   name:       'WorkloadDashboard',
   components: {
-    Banner, Card, Loading, ResourceRow, StatusCard,
+    Banner, Card, Loading, RichTranslation, ResourceRow, StatusCard,
   },
 
   async fetch() {
@@ -58,6 +60,7 @@ export default {
 
   data() {
     return {
+      DOCS_BASE,
       summaries:  [],
       fetchError: null,
       pollTimer:  null,
@@ -81,6 +84,13 @@ export default {
   },
 
   methods: {
+    resetNamespaceFilter() {
+      this.$store.dispatch('switchNamespaces', {
+        ids: [],
+        key: this.$store.getters['clusterId'],
+      });
+    },
+
     resourceRoute(type) {
       return {
         name:   'c-cluster-product-resource',
@@ -156,6 +166,10 @@ export default {
       return this.t('workloadDashboard.subtitle.filteredMultiple', { count: namespaces.length });
     },
 
+    hasWorkloads() {
+      return this.workloadData.some((w) => !w.error && w.total > 0);
+    },
+
     workloadData() {
       return this.summaries.map((entry) => {
         const label = this.t(`typeLabel."${ entry.type }"`, { count: 2 })?.trim() || entry.type;
@@ -295,17 +309,6 @@ export default {
     v-else
     class="workload-dashboard"
   >
-    <header class="row">
-      <div class="col span-12 title">
-        <h1 class="m-0">
-          {{ t('workloadDashboard.title') }}
-        </h1>
-        <div class="sub-title text-muted">
-          {{ namespaceSubtitle }}
-        </div>
-      </div>
-    </header>
-
     <Banner
       v-if="fetchError"
       color="error"
@@ -313,78 +316,127 @@ export default {
       {{ fetchError }}
     </Banner>
 
-    <!-- ━━━ By State ━━━ -->
-    <div class="section">
-      <h4 class="m-0 text-muted">
-        {{ t('workloadDashboard.sections.byState') }}
-      </h4>
-      <div
-        class="bento-grid"
-        :class="{ 'bento-grid--has-sub-hero': !!byStateLayout.subHero }"
-        :style="{ 'grid-template-rows': 'repeat(' + byStateLayout.gridRows + ', ' + (byStateLayout.subHero ? '1fr' : 'auto') + ')' }"
-      >
-        <Card
-          v-for="card in byStateLayout.cards"
-          :key="card.color"
-          class="state-card"
-          :class="'state-card--' + card.color"
-        >
-          <ResourceRow
-            v-for="(row, idx) in card.rows"
-            :key="idx"
-            :label="row.label"
-            :to="resourceRoute(row.type)"
-            :color="row.color"
-            :counts="row.counts"
-          />
-        </Card>
-        <Card
-          v-if="byStateLayout.subHero"
-          class="state-card bento-sub-hero"
-          :class="'state-card--' + byStateLayout.subHero.color"
-        >
-          <ResourceRow
-            v-for="(row, idx) in byStateLayout.subHero.rows"
-            :key="idx"
-            :label="row.label"
-            :to="resourceRoute(row.type)"
-            :color="row.color"
-            :counts="row.counts"
-          />
-        </Card>
-        <Card
-          v-if="byStateLayout.hero"
-          class="state-card bento-hero"
-          :class="['state-card--' + byStateLayout.hero.color, 'bento-hero--' + byStateLayout.heroMode]"
+    <!-- ━━━ Empty state ━━━ -->
+    <div
+      v-if="!hasWorkloads"
+      class="empty-state"
+    >
+      <h1 class="m-0">
+        {{ t('workloadDashboard.empty.title') }}
+      </h1>
+      <div class="empty-state-tips">
+        <RichTranslation k="workloadDashboard.empty.message">
+          <template #resetLink="{ content }">
+            <a
+              role="button"
+              class="link"
+              @click="resetNamespaceFilter"
+              @keyup.enter="resetNamespaceFilter"
+            >{{ content }}</a>
+          </template>
+        </RichTranslation>
+        <RichTranslation
+          k="workloadDashboard.empty.docsMessage"
+          tag="div"
         >
-          <ResourceRow
-            v-for="(row, idx) in byStateLayout.hero.rows"
-            :key="idx"
-            :label="row.label"
-            :to="resourceRoute(row.type)"
-            :color="row.color"
-            :counts="row.counts"
-          />
-        </Card>
+          <template #docsLink="{ content }">
+            <a
+              :href="`${DOCS_BASE}/how-to-guides/new-user-guides/kubernetes-resources-setup/workloads-and-pods`"
+              target="_blank"
+              rel="noopener noreferrer nofollow"
+              class="secondary-text-link"
+            >
+              {{ content }} <i class="icon icon-external-link" />
+            </a>
+          </template>
+        </RichTranslation>
       </div>
     </div>
 
-    <!-- ━━━ By Type ━━━ -->
-    <div class="section">
-      <h4 class="m-0 text-muted">
-        {{ t('workloadDashboard.sections.byType') }}
-      </h4>
-      <div class="card-grid">
-        <StatusCard
-          v-for="card in byTypeCards"
-          :key="card.title"
-          :title="card.title"
-          :row-to="resourceRoute(card.type)"
-          :resources="card.resources"
-          :showPercent="false"
-        />
+    <template v-else>
+      <header class="row">
+        <div class="col span-12 title">
+          <h1 class="m-0">
+            {{ t('workloadDashboard.title') }}
+          </h1>
+          <div class="sub-title text-muted">
+            {{ namespaceSubtitle }}
+          </div>
+        </div>
+      </header>
+      <!-- ━━━ By State ━━━ -->
+      <div class="section">
+        <h4 class="m-0 text-muted">
+          {{ t('workloadDashboard.sections.byState') }}
+        </h4>
+        <div
+          class="bento-grid"
+          :class="{ 'bento-grid--has-sub-hero': !!byStateLayout.subHero }"
+          :style="{ 'grid-template-rows': 'repeat(' + byStateLayout.gridRows + ', ' + (byStateLayout.subHero ? '1fr' : 'auto') + ')' }"
+        >
+          <Card
+            v-for="card in byStateLayout.cards"
+            :key="card.color"
+            class="state-card"
+            :class="'state-card--' + card.color"
+          >
+            <ResourceRow
+              v-for="(row, idx) in card.rows"
+              :key="idx"
+              :label="row.label"
+              :to="resourceRoute(row.type)"
+              :color="row.color"
+              :counts="row.counts"
+            />
+          </Card>
+          <Card
+            v-if="byStateLayout.subHero"
+            class="state-card bento-sub-hero"
+            :class="'state-card--' + byStateLayout.subHero.color"
+          >
+            <ResourceRow
+              v-for="(row, idx) in byStateLayout.subHero.rows"
+              :key="idx"
+              :label="row.label"
+              :to="resourceRoute(row.type)"
+              :color="row.color"
+              :counts="row.counts"
+            />
+          </Card>
+          <Card
+            v-if="byStateLayout.hero"
+            class="state-card bento-hero"
+            :class="['state-card--' + byStateLayout.hero.color, 'bento-hero--' + byStateLayout.heroMode]"
+          >
+            <ResourceRow
+              v-for="(row, idx) in byStateLayout.hero.rows"
+              :key="idx"
+              :label="row.label"
+              :to="resourceRoute(row.type)"
+              :color="row.color"
+              :counts="row.counts"
+            />
+          </Card>
+        </div>
       </div>
-    </div>
+
+      <!-- ━━━ By Type ━━━ -->
+      <div class="section">
+        <h4 class="m-0 text-muted">
+          {{ t('workloadDashboard.sections.byType') }}
+        </h4>
+        <div class="card-grid">
+          <StatusCard
+            v-for="card in byTypeCards"
+            :key="card.title"
+            :title="card.title"
+            :row-to="resourceRoute(card.type)"
+            :resources="card.resources"
+            :showPercent="false"
+          />
+        </div>
+      </div>
+    </template>
   </div>
 </template>
 
@@ -415,6 +467,22 @@ export default {
     }
   }
 
+  .empty-state {
+    text-align: center;
+    padding: 72px;
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+
+    h1 {
+      line-height: 38px;
+    }
+    .empty-state-tips {
+      font-size: 16px;
+      line-height: 29px;
+    }
+  }
+
   .card-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);

From 42bbb2302e03524465bcda1c064ddb90cdf41d6e Mon Sep 17 00:00:00 2001
From: Marcelo Fukumoto <marcelo.fukumoto@suse.com>
Date: Wed, 20 May 2026 10:52:26 +0200
Subject: [PATCH 08/28] Added some errors and changed to ts and composition

---
 shell/assets/translations/en-us.yaml          |   4 +
 .../Detail/Card/__tests__/PodsCard.test.ts    |  10 +-
 .../components/Resource/Detail/Card/index.vue |   5 +-
 .../_cluster/explorer/workload-dashboard.vue  | 456 +++++++++---------
 4 files changed, 245 insertions(+), 230 deletions(-)

diff --git a/shell/assets/translations/en-us.yaml b/shell/assets/translations/en-us.yaml
index 3bb2b730aca..5251c507645 100644
--- a/shell/assets/translations/en-us.yaml
+++ b/shell/assets/translations/en-us.yaml
@@ -7434,6 +7434,10 @@ workloadDashboard:
   sections:
     byState: By State
     byType: By Type
+  errors:
+    noAccess: "No access to {type}"
+    fetchType: "Failed to fetch {type}"
+    fetchAll: Failed to fetch workload summaries
   empty:
     title: No workloads to show
     message: "Tips: undo the last namespace filter you applied or <resetLink>reset the namespaces filter</resetLink>."
diff --git a/shell/components/Resource/Detail/Card/__tests__/PodsCard.test.ts b/shell/components/Resource/Detail/Card/__tests__/PodsCard.test.ts
index 1597fe8ad8a..4e8b405583a 100644
--- a/shell/components/Resource/Detail/Card/__tests__/PodsCard.test.ts
+++ b/shell/components/Resource/Detail/Card/__tests__/PodsCard.test.ts
@@ -74,10 +74,12 @@ describe('component: PodsCard', () => {
     const rows = wrapper.findComponent(StatusRow);
 
     expect(rows.props()).toStrictEqual({
-      color:   'success',
-      count:   1,
-      label:   'Completed',
-      percent: 50
+      color:       'success',
+      count:       1,
+      label:       'Completed',
+      percent:     50,
+      showPercent: true,
+      to:          undefined,
     });
   });
 });
diff --git a/shell/components/Resource/Detail/Card/index.vue b/shell/components/Resource/Detail/Card/index.vue
index fa76cc907a6..b074078100e 100644
--- a/shell/components/Resource/Detail/Card/index.vue
+++ b/shell/components/Resource/Detail/Card/index.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { computed, useSlots } from 'vue';
 import VerticalGap from '@shell/components/Resource/Detail/Card/VerticalGap.vue';
 
 export interface CardProps {
@@ -6,12 +7,14 @@ export interface CardProps {
 }
 
 const { title } = defineProps<CardProps>();
+const slots = useSlots();
 
+const showHeading = computed(() => !!title || !!slots.title || !!slots['heading-action']);
 </script>
 
 <template>
   <div class="detail-card">
-    <template v-if="title">
+    <template v-if="showHeading">
       <div class="heading">
         <slot name="heading">
           <div class="title">
diff --git a/shell/pages/c/_cluster/explorer/workload-dashboard.vue b/shell/pages/c/_cluster/explorer/workload-dashboard.vue
index 5e883dba864..7fd31f16657 100644
--- a/shell/pages/c/_cluster/explorer/workload-dashboard.vue
+++ b/shell/pages/c/_cluster/explorer/workload-dashboard.vue
@@ -1,15 +1,49 @@
-<script>
+<script setup lang="ts">
+import {
+  ref, computed, watch, onMounted, onBeforeUnmount
+} from 'vue';
+import { useStore } from 'vuex';
+import { useRoute } from 'vue-router';
+import type { RouteLocationRaw } from 'vue-router';
 import { WORKLOAD_TYPES, POD } from '@shell/config/types';
 import { Banner } from '@components/Banner';
 import Loading from '@shell/components/Loading';
 import RichTranslation from '@shell/components/RichTranslation.vue';
 import { STATES } from '@shell/plugins/dashboard-store/resource-class';
 import { DOCS_BASE } from '@shell/config/private-label';
+import { StateColor } from '@shell/utils/style';
 import Card from '@shell/components/Resource/Detail/Card/index.vue';
 import ResourceRow from '@shell/components/Resource/Detail/ResourceRow.vue';
 import StatusCard from '@shell/components/Resource/Detail/Card/StatusCard/index.vue';
+import { useI18n } from '@shell/composables/useI18n';
 
-const WORKLOAD_RESOURCE_TYPES = [
+interface SummaryEntry {
+  type: string;
+  summary: { property: string; counts: Record<string, number> }[] | null;
+  error: string | null;
+}
+
+interface WorkloadEntry {
+  type: string;
+  label: string;
+  total: number;
+  stateCounts: Record<string, number>;
+  error: string | null;
+}
+
+interface StateCardRow {
+  label: string;
+  color: StateColor;
+  type: string;
+  counts: { label: string; count: number }[];
+}
+
+interface StateCard {
+  color: StateColor;
+  rows: StateCardRow[];
+}
+
+const WORKLOAD_RESOURCE_TYPES: string[] = [
   WORKLOAD_TYPES.DEPLOYMENT,
   WORKLOAD_TYPES.DAEMON_SET,
   WORKLOAD_TYPES.STATEFUL_SET,
@@ -18,20 +52,20 @@ const WORKLOAD_RESOURCE_TYPES = [
   POD,
 ];
 
-// States that the Steve server marks as transitioning (metadata.state.transitioning = true).
-// For these, the real colorForState returns 'info' regardless of STATES[key].color.
 const TRANSITIONING_STATES = new Set([
   'unknown', 'containerstatusunknown', 'imagepullbackoff',
   'crashloopbackoff',
 ]);
 
-// States that the Steve server marks as error (metadata.state.error = true).
-// For these, the real colorForState returns 'error' regardless of STATES[key].color.
 const ERROR_STATES = new Set([
   'init:error', 'init:crashloopbackoff',
 ]);
 
-function toStateColor(state) {
+const COLOR_ORDER: Record<string, number> = {
+  error: 0, warning: 1, disabled: 2, info: 3, success: 4
+};
+
+function toStateColor(state: string): StateColor {
   const key = (state || '').toLowerCase();
 
   if (ERROR_STATES.has(key)) {
@@ -45,265 +79,237 @@ function toStateColor(state) {
   const config = STATES[key];
   const color = config?.color || 'info';
 
-  return color === 'darker' ? 'disabled' : color;
+  return (color === 'darker' ? 'disabled' : color) as StateColor;
 }
 
-export default {
-  name:       'WorkloadDashboard',
-  components: {
-    Banner, Card, Loading, RichTranslation, ResourceRow, StatusCard,
-  },
+const store = useStore();
+const route = useRoute();
+const { t } = useI18n(store);
 
-  async fetch() {
-    await this.fetchSummaries();
-  },
+const summaries = ref<SummaryEntry[]>([]);
+const fetchError = ref<string | null>(null);
+const loading = ref(true);
+let pollTimer: ReturnType<typeof setInterval> | null = null;
 
-  data() {
-    return {
-      DOCS_BASE,
-      summaries:  [],
-      fetchError: null,
-      pollTimer:  null,
-    };
-  },
+const activeNamespaces = computed<Record<string, boolean>>(() => {
+  return store.getters['activeNamespaceCache'];
+});
 
-  watch: {
-    activeNamespaces() {
-      this.fetchSummaries();
-    },
-  },
-
-  mounted() {
-    this.pollTimer = setInterval(() => {
-      this.fetchSummaries();
-    }, 5000);
-  },
-
-  beforeUnmount() {
-    clearInterval(this.pollTimer);
-  },
-
-  methods: {
-    resetNamespaceFilter() {
-      this.$store.dispatch('switchNamespaces', {
-        ids: [],
-        key: this.$store.getters['clusterId'],
-      });
-    },
+const isAllNamespaces = computed<boolean>(() => {
+  return store.getters['isAllNamespaces'];
+});
 
-    resourceRoute(type) {
-      return {
-        name:   'c-cluster-product-resource',
-        params: {
-          cluster:  this.$route.params.cluster,
-          product:  'explorer',
-          resource: type,
-        },
-      };
-    },
+const namespaceSubtitle = computed<string>(() => {
+  if (isAllNamespaces.value) {
+    return t('workloadDashboard.subtitle.allNamespaces');
+  }
 
-    async fetchSummaries() {
-      try {
-        const workloadPromises = WORKLOAD_RESOURCE_TYPES.map(async(type) => {
-          const schema = this.$store.getters['cluster/schemaFor'](type);
+  const namespaces = Object.keys(activeNamespaces.value);
 
-          if (!schema) {
-            return {
-              type, summary: null, error: `No access to ${ type }`
-            };
-          }
+  if (namespaces.length === 1) {
+    return t('workloadDashboard.subtitle.filtered', { namespace: namespaces[0] });
+  }
 
-          try {
-            let url = `/v1/${ type }?summary=metadata.state.name`;
+  return t('workloadDashboard.subtitle.filteredMultiple', { count: namespaces.length });
+});
 
-            if (!this.isAllNamespaces) {
-              const namespaces = Object.keys(this.activeNamespaces);
+const workloadData = computed<WorkloadEntry[]>(() => {
+  return summaries.value.map((entry) => {
+    const label = t(`typeLabel."${ entry.type }"`, { count: 2 })?.trim() || entry.type;
+    const stateCounts: Record<string, number> = {};
+    let total = 0;
 
-              if (namespaces.length) {
-                url += `&projectsornamespaces=${ namespaces.join(',') }`;
-              }
-            }
+    if (entry.summary) {
+      for (const s of entry.summary) {
+        if (s.property === 'metadata.state.name') {
+          Object.assign(stateCounts, s.counts);
+          total = Object.values(s.counts).reduce((sum, c) => sum + c, 0);
+        }
+      }
+    }
 
-            const res = await this.$store.dispatch('cluster/request', { url });
+    return {
+      type:  entry.type,
+      label,
+      total,
+      stateCounts,
+      error: entry.error,
+    };
+  });
+});
+
+const hasWorkloads = computed<boolean>(() => {
+  return workloadData.value.some((w) => !w.error && w.total > 0);
+});
+
+const byStateCards = computed<StateCard[]>(() => {
+  const colorGroups: Record<string, Record<string, { count: number; type: string }>> = {
+    error:    {},
+    warning:  {},
+    info:     {},
+    success:  {},
+    disabled: {},
+  };
+
+  for (const w of workloadData.value) {
+    if (w.error || w.total === 0) {
+      continue;
+    }
 
-            return {
-              type, summary: res.summary || [], error: null
-            };
-          } catch (e) {
-            return {
-              type, summary: null, error: e.message || `Failed to fetch ${ type }`
-            };
-          }
-        });
+    for (const [state, count] of Object.entries(w.stateCounts)) {
+      const color = toStateColor(state);
 
-        this.summaries = await Promise.all(workloadPromises);
-      } catch (e) {
-        this.fetchError = e.message || 'Failed to fetch workload summaries';
+      if (!colorGroups[color][w.label]) {
+        colorGroups[color][w.label] = { count: 0, type: w.type };
       }
-    },
-  },
+      colorGroups[color][w.label].count += count;
+    }
+  }
 
-  computed: {
-    activeNamespaces() {
-      return this.$store.getters['activeNamespaceCache'];
-    },
+  return Object.entries(colorGroups)
+    .filter(([, typeMap]) => Object.keys(typeMap).length > 0)
+    .map(([color, typeMap]) => ({
+      color: color as StateColor,
+      rows:  Object.entries(typeMap).map(([label, { count, type }]) => ({
+        label,
+        color:  color as StateColor,
+        type,
+        counts: [{ label: '', count }],
+      })),
+    }));
+});
+
+const byStateLayout = computed(() => {
+  const cards = byStateCards.value;
+  const hero = cards.find((c) => c.color === 'success') || null;
+  const others = cards.filter((c) => c !== hero);
+
+  let heroMode = 'default';
+
+  if (cards.length === 1) {
+    heroMode = 'full';
+  } else if (others.length === 1) {
+    heroMode = 'wide';
+  }
 
-    isAllNamespaces() {
-      return this.$store.getters['isAllNamespaces'];
-    },
+  const subHero = (hero && others.length >= 3) ? others.find((c) => c.color === 'info') || null : null;
 
-    namespaceSubtitle() {
-      if (this.isAllNamespaces) {
-        return this.t('workloadDashboard.subtitle.allNamespaces');
-      }
+  const regularCards = subHero ? others.filter((c) => c !== subHero) : others;
+  const gridRows = subHero ? Math.max(1, regularCards.length) : Math.max(1, Math.ceil(regularCards.length / 2));
+
+  return {
+    hero,
+    subHero,
+    cards: regularCards,
+    heroMode,
+    gridRows,
+  };
+});
+
+const byTypeCards = computed(() => {
+  return workloadData.value.filter((w) => !w.error && w.total > 0).map((w) => {
+    const resources: { stateDisplay: string; stateSimpleColor: string }[] = [];
 
-      const namespaces = Object.keys(this.activeNamespaces);
+    const sortedStates = Object.entries(w.stateCounts)
+      .sort(([a], [b]) => (COLOR_ORDER[toStateColor(a)] ?? 5) - (COLOR_ORDER[toStateColor(b)] ?? 5));
 
-      if (namespaces.length === 1) {
-        return this.t('workloadDashboard.subtitle.filtered', { namespace: namespaces[0] });
+    for (const [state, count] of sortedStates) {
+      for (let i = 0; i < count; i++) {
+        resources.push({
+          stateDisplay:     state?.charAt(0).toUpperCase() + state?.slice(1),
+          stateSimpleColor: toStateColor(state),
+        });
       }
+    }
 
-      return this.t('workloadDashboard.subtitle.filteredMultiple', { count: namespaces.length });
-    },
+    return {
+      title: w.label,
+      type:  w.type,
+      resources,
+    };
+  });
+});
+
+function resetNamespaceFilter(): void {
+  store.dispatch('switchNamespaces', {
+    ids: [],
+    key: store.getters['clusterId'],
+  });
+}
 
-    hasWorkloads() {
-      return this.workloadData.some((w) => !w.error && w.total > 0);
+function resourceRoute(type: string): RouteLocationRaw {
+  return {
+    name:   'c-cluster-product-resource',
+    params: {
+      cluster:  route.params.cluster as string,
+      product:  'explorer',
+      resource: type,
     },
+  };
+}
 
-    workloadData() {
-      return this.summaries.map((entry) => {
-        const label = this.t(`typeLabel."${ entry.type }"`, { count: 2 })?.trim() || entry.type;
-        const stateCounts = {};
-        let total = 0;
-
-        if (entry.summary) {
-          for (const s of entry.summary) {
-            if (s.property === 'metadata.state.name') {
-              Object.assign(stateCounts, s.counts);
-              total = Object.values(s.counts).reduce((sum, c) => sum + c, 0);
-            }
-          }
-        }
+async function fetchSummaries(): Promise<void> {
+  try {
+    const workloadPromises = WORKLOAD_RESOURCE_TYPES.map(async(type): Promise<SummaryEntry> => {
+      const schema = store.getters['cluster/schemaFor'](type);
 
+      if (!schema) {
         return {
-          type:  entry.type,
-          label,
-          total,
-          stateCounts,
-          error: entry.error,
+          type, summary: null, error: t('workloadDashboard.errors.noAccess', { type })
         };
-      });
-    },
+      }
 
-    /**
-     * "By State": decompose each workload type's state counts into severity groups.
-     * Aggregates counts per type within each severity card.
-     */
-    byStateCards() {
-      const colorGroups = {
-        error:    {},
-        warning:  {},
-        info:     {},
-        success:  {},
-        disabled: {},
-      };
-
-      for (const w of this.workloadData) {
-        if (w.error || w.total === 0) {
-          continue;
-        }
+      try {
+        let url = `/v1/${ type }?summary=metadata.state.name`;
 
-        for (const [state, count] of Object.entries(w.stateCounts)) {
-          const color = toStateColor(state);
+        if (!isAllNamespaces.value) {
+          const namespaces = Object.keys(activeNamespaces.value);
 
-          if (!colorGroups[color][w.label]) {
-            colorGroups[color][w.label] = { count: 0, type: w.type };
+          if (namespaces.length) {
+            url += `&projectsornamespaces=${ namespaces.join(',') }`;
           }
-          colorGroups[color][w.label].count += count;
         }
-      }
 
-      return Object.entries(colorGroups)
-        .filter(([, typeMap]) => Object.keys(typeMap).length > 0)
-        .map(([color, typeMap]) => ({
-          color,
-          rows: Object.entries(typeMap).map(([label, { count, type }]) => ({
-            label,
-            color,
-            type,
-            counts: [{ label: '', count }],
-          })),
-        }));
-    },
+        const res = await store.dispatch('cluster/request', { url });
 
-    /**
-     * Bento-box layout: hero (success) card on the right spanning full height,
-     * remaining cards fill a 2-column left grid.
-     */
-    byStateLayout() {
-      const cards = this.byStateCards;
-      const hero = cards.find((c) => c.color === 'success') || null;
-      const others = cards.filter((c) => c !== hero);
-
-      let heroMode = 'default';
-
-      if (cards.length === 1) {
-        heroMode = 'full';
-      } else if (others.length === 1) {
-        heroMode = 'wide';
+        return {
+          type, summary: res.summary || [], error: null
+        };
+      } catch (e: any) {
+        return {
+          type, summary: null, error: e.message || t('workloadDashboard.errors.fetchType', { type })
+        };
       }
+    });
 
-      const subHero = (hero && others.length >= 3) ? others.find((c) => c.color === 'info') || null : null;
-
-      const regularCards = subHero ? others.filter((c) => c !== subHero) : others;
-      const gridRows = subHero ? Math.max(1, regularCards.length) : Math.max(1, Math.ceil(regularCards.length / 2));
+    summaries.value = await Promise.all(workloadPromises);
+  } catch (e: any) {
+    fetchError.value = e.message || t('workloadDashboard.errors.fetchAll');
+  }
+}
 
-      return {
-        hero,
-        subHero,
-        cards: regularCards,
-        heroMode,
-        gridRows,
-      };
-    },
+watch(activeNamespaces, () => {
+  fetchSummaries();
+});
 
-    /**
-     * "By Type": one StatusCard per workload type with fake resource objects.
-     */
-    byTypeCards() {
-      const colorOrder = {
-        error: 0, warning: 1, disabled: 2, info: 3, success: 4
-      };
-
-      return this.workloadData.filter((w) => !w.error && w.total > 0).map((w) => {
-        const resources = [];
-
-        const sortedStates = Object.entries(w.stateCounts)
-          .sort(([a], [b]) => (colorOrder[toStateColor(a)] ?? 5) - (colorOrder[toStateColor(b)] ?? 5));
-
-        for (const [state, count] of sortedStates) {
-          for (let i = 0; i < count; i++) {
-            resources.push({
-              stateDisplay:     state?.charAt(0).toUpperCase() + state?.slice(1),
-              stateSimpleColor: toStateColor(state),
-            });
-          }
-        }
+onMounted(async() => {
+  await fetchSummaries();
+  loading.value = false;
 
-        return {
-          title: w.label,
-          type:  w.type,
-          resources,
-        };
-      });
-    },
+  pollTimer = setInterval(() => {
+    fetchSummaries();
+  }, 5000);
+});
 
-  },
-};
+onBeforeUnmount(() => {
+  if (pollTimer) {
+    clearInterval(pollTimer);
+  }
+});
 </script>
 
 <template>
-  <Loading v-if="$fetchState.pending" />
+  <Loading v-if="loading" />
 
   <div
     v-else
@@ -503,7 +509,7 @@ export default {
     &--full {
       grid-column: 1 / -1;
 
-      ::v-deep .body {
+      :deep(.body) {
         display: grid;
         grid-template-columns: repeat(3, 1fr);
         gap: 4px 48px;
@@ -513,7 +519,7 @@ export default {
     &--wide {
       grid-column: 2 / -1;
 
-      ::v-deep .body {
+      :deep(.body) {
         display: grid;
         grid-template-columns: repeat(2, 1fr);
         gap: 4px 48px;
@@ -533,7 +539,7 @@ export default {
   }
 
   .state-card {
-    ::v-deep .resource-row {
+    :deep(.resource-row) {
       position: relative;
       padding-left: 20px;
       line-height: 20px;

From 2f82e5f21bf90e8e8174441471c16763e9d6a12e Mon Sep 17 00:00:00 2001
From: Marcelo Fukumoto <marcelo.fukumoto@suse.com>
Date: Wed, 20 May 2026 12:14:20 +0200
Subject: [PATCH 09/28] Added STORE cache for the state colors.

---
 .../_cluster/explorer/workload-dashboard.vue  | 115 ++++++++++++++----
 shell/store/prefs.js                          |   1 +
 2 files changed, 90 insertions(+), 26 deletions(-)

diff --git a/shell/pages/c/_cluster/explorer/workload-dashboard.vue b/shell/pages/c/_cluster/explorer/workload-dashboard.vue
index 7fd31f16657..3d7ea2c1b84 100644
--- a/shell/pages/c/_cluster/explorer/workload-dashboard.vue
+++ b/shell/pages/c/_cluster/explorer/workload-dashboard.vue
@@ -9,13 +9,14 @@ import { WORKLOAD_TYPES, POD } from '@shell/config/types';
 import { Banner } from '@components/Banner';
 import Loading from '@shell/components/Loading';
 import RichTranslation from '@shell/components/RichTranslation.vue';
-import { STATES } from '@shell/plugins/dashboard-store/resource-class';
+import { STATES, colorForState } from '@shell/plugins/dashboard-store/resource-class';
 import { DOCS_BASE } from '@shell/config/private-label';
 import { StateColor } from '@shell/utils/style';
 import Card from '@shell/components/Resource/Detail/Card/index.vue';
 import ResourceRow from '@shell/components/Resource/Detail/ResourceRow.vue';
 import StatusCard from '@shell/components/Resource/Detail/Card/StatusCard/index.vue';
 import { useI18n } from '@shell/composables/useI18n';
+import { STATE_COLOR_MAP } from '@shell/store/prefs';
 
 interface SummaryEntry {
   type: string;
@@ -52,28 +53,43 @@ const WORKLOAD_RESOURCE_TYPES: string[] = [
   POD,
 ];
 
-const TRANSITIONING_STATES = new Set([
-  'unknown', 'containerstatusunknown', 'imagepullbackoff',
-  'crashloopbackoff',
-]);
-
-const ERROR_STATES = new Set([
-  'init:error', 'init:crashloopbackoff',
-]);
-
 const COLOR_ORDER: Record<string, number> = {
   error: 0, warning: 1, disabled: 2, info: 3, success: 4
 };
 
+const store = useStore();
+const route = useRoute();
+const { t } = useI18n(store);
+
+const summaries = ref<SummaryEntry[]>([]);
+const fetchError = ref<string | null>(null);
+const loading = ref(true);
+let pollTimer: ReturnType<typeof setInterval> | null = null;
+
+const clusterId = computed<string>(() => store.getters['clusterId']);
+
+const stateColorMap = computed<Record<string, StateColor>>(() => {
+  const all = store.getters['prefs/get'](STATE_COLOR_MAP) || {};
+
+  return all[clusterId.value] || {};
+});
+
+function saveStateColorMap(updates: Record<string, StateColor>): void {
+  const all = store.getters['prefs/get'](STATE_COLOR_MAP) || {};
+  const current = all[clusterId.value] || {};
+
+  store.dispatch('prefs/set', {
+    key:   STATE_COLOR_MAP,
+    value: { ...all, [clusterId.value]: { ...current, ...updates } },
+  });
+}
+
 function toStateColor(state: string): StateColor {
   const key = (state || '').toLowerCase();
+  const cached = stateColorMap.value[key];
 
-  if (ERROR_STATES.has(key)) {
-    return 'error';
-  }
-
-  if (TRANSITIONING_STATES.has(key)) {
-    return 'info';
+  if (cached) {
+    return cached;
   }
 
   const config = STATES[key];
@@ -82,15 +98,6 @@ function toStateColor(state: string): StateColor {
   return (color === 'darker' ? 'disabled' : color) as StateColor;
 }
 
-const store = useStore();
-const route = useRoute();
-const { t } = useI18n(store);
-
-const summaries = ref<SummaryEntry[]>([]);
-const fetchError = ref<string | null>(null);
-const loading = ref(true);
-let pollTimer: ReturnType<typeof setInterval> | null = null;
-
 const activeNamespaces = computed<Record<string, boolean>>(() => {
   return store.getters['activeNamespaceCache'];
 });
@@ -248,6 +255,59 @@ function resourceRoute(type: string): RouteLocationRaw {
   };
 }
 
+async function resolveStateColors(entries: SummaryEntry[]): Promise<void> {
+  const unresolvedStates = new Map<string, { originalName: string; type: string }>();
+
+  for (const entry of entries) {
+    if (!entry.summary) {
+      continue;
+    }
+
+    for (const s of entry.summary) {
+      if (s.property === 'metadata.state.name') {
+        for (const stateName of Object.keys(s.counts)) {
+          const key = stateName.toLowerCase();
+
+          if (!stateColorMap.value[key] && !unresolvedStates.has(key)) {
+            unresolvedStates.set(key, { originalName: stateName, type: entry.type });
+          }
+        }
+      }
+    }
+  }
+
+  if (unresolvedStates.size === 0) {
+    return;
+  }
+
+  const newColors: Record<string, StateColor> = {};
+
+  const colorPromises = Array.from(unresolvedStates.entries()).map(async([stateKey, { originalName, type }]) => {
+    try {
+      const url = `/v1/${ type }?limit=1&filter=metadata.state.name=${ originalName }`;
+      const res = await store.dispatch('cluster/request', { url });
+      const resource = res?.data?.[0];
+
+      if (!resource?.metadata?.state) {
+        return;
+      }
+
+      const { error: isError, transitioning, name } = resource.metadata.state;
+      const rawColor = colorForState(name, isError, transitioning).replace('text-', '');
+
+      newColors[stateKey] = (rawColor === 'darker' ? 'disabled' : rawColor) as StateColor;
+    } catch {
+      // Fallback handled by toStateColor via STATES lookup
+    }
+  });
+
+  await Promise.all(colorPromises);
+
+  if (Object.keys(newColors).length > 0) {
+    saveStateColorMap(newColors);
+  }
+}
+
 async function fetchSummaries(): Promise<void> {
   try {
     const workloadPromises = WORKLOAD_RESOURCE_TYPES.map(async(type): Promise<SummaryEntry> => {
@@ -282,7 +342,10 @@ async function fetchSummaries(): Promise<void> {
       }
     });
 
-    summaries.value = await Promise.all(workloadPromises);
+    const results = await Promise.all(workloadPromises);
+
+    await resolveStateColors(results);
+    summaries.value = results;
   } catch (e: any) {
     fetchError.value = e.message || t('workloadDashboard.errors.fetchAll');
   }
diff --git a/shell/store/prefs.js b/shell/store/prefs.js
index fc10c9b4139..b2bc9db47ec 100644
--- a/shell/store/prefs.js
+++ b/shell/store/prefs.js
@@ -51,6 +51,7 @@ const asCookie = true; // Store as a cookie so that it's available before auth +
 export const CLUSTER = create('cluster', '');
 export const LAST_NAMESPACE = create('last-namespace', '');
 export const NAMESPACE_FILTERS = create('ns-by-cluster', {}, { parseJSON });
+export const STATE_COLOR_MAP = create('state-color-map', {}, { parseJSON, asUserPreference: false });
 export const WORKSPACE = create('workspace', '');
 export const EXPANDED_GROUPS = create('open-groups', ['cluster', 'policy', 'rbac', 'serviceDiscovery', 'storage', 'workload'], { parseJSON });
 export const FAVORITE_TYPES = create('fav-type', [], { parseJSON });

From 37c8f3d732db98adc780ef7b43c25ad61622c441 Mon Sep 17 00:00:00 2001
From: Marcelo Fukumoto <marcelo.fukumoto@suse.com>
Date: Wed, 20 May 2026 13:47:40 +0200
Subject: [PATCH 10/28] Fixed the filter, used the same logic as the other
 pages.

---
 .../_cluster/explorer/workload-dashboard.vue  | 49 +++++++++++++++----
 1 file changed, 40 insertions(+), 9 deletions(-)

diff --git a/shell/pages/c/_cluster/explorer/workload-dashboard.vue b/shell/pages/c/_cluster/explorer/workload-dashboard.vue
index 3d7ea2c1b84..d8e6d8de899 100644
--- a/shell/pages/c/_cluster/explorer/workload-dashboard.vue
+++ b/shell/pages/c/_cluster/explorer/workload-dashboard.vue
@@ -5,7 +5,7 @@ import {
 import { useStore } from 'vuex';
 import { useRoute } from 'vue-router';
 import type { RouteLocationRaw } from 'vue-router';
-import { WORKLOAD_TYPES, POD } from '@shell/config/types';
+import { WORKLOAD_TYPES, POD, NAMESPACE } from '@shell/config/types';
 import { Banner } from '@components/Banner';
 import Loading from '@shell/components/Loading';
 import RichTranslation from '@shell/components/RichTranslation.vue';
@@ -16,7 +16,10 @@ import Card from '@shell/components/Resource/Detail/Card/index.vue';
 import ResourceRow from '@shell/components/Resource/Detail/ResourceRow.vue';
 import StatusCard from '@shell/components/Resource/Detail/Card/StatusCard/index.vue';
 import { useI18n } from '@shell/composables/useI18n';
-import { STATE_COLOR_MAP } from '@shell/store/prefs';
+import { STATE_COLOR_MAP, ALL_NAMESPACES } from '@shell/store/prefs';
+import pAndNFiltering from '@shell/plugins/steve/projectAndNamespaceFiltering.utils';
+import stevePaginationUtils from '@shell/plugins/steve/steve-pagination-utils';
+import { PaginationFilterEquality } from '@shell/types/store/pagination.types';
 
 interface SummaryEntry {
   type: string;
@@ -106,6 +109,38 @@ const isAllNamespaces = computed<boolean>(() => {
   return store.getters['isAllNamespaces'];
 });
 
+const namespaceFilterParam = computed<string>(() => {
+  const selection: string[] = store.getters['namespaceFilters'];
+  const { projectsOrNamespaces, filters } = stevePaginationUtils.createParamsFromNsFilter({
+    allNamespaces:                 store.getters['cluster/all'](NAMESPACE),
+    selection,
+    isAllNamespaces:               isAllNamespaces.value,
+    isLocalCluster:                store.getters['currentCluster']?.isLocal,
+    showReservedRancherNamespaces: store.getters['prefs/get'](ALL_NAMESPACES),
+    productHidesSystemNamespaces:  store.getters['currentProduct']?.hideSystemResources,
+  });
+
+  const parts: string[] = [];
+
+  const nsValues = projectsOrNamespaces.flatMap((p) => p.fields.map((f) => f.value || ''));
+  const pAndN = pAndNFiltering.createParam(nsValues);
+
+  if (pAndN) {
+    parts.push(pAndN);
+  }
+
+  for (const f of filters) {
+    for (const field of f.fields) {
+      const equality = field.equality || '=';
+      const val = [PaginationFilterEquality.IN, PaginationFilterEquality.NOT_IN].includes(equality as PaginationFilterEquality) ? `(${ field.value })` : field.value;
+
+      parts.push(`filter=${ field.field }${ equality }${ val }`);
+    }
+  }
+
+  return parts.join('&');
+});
+
 const namespaceSubtitle = computed<string>(() => {
   if (isAllNamespaces.value) {
     return t('workloadDashboard.subtitle.allNamespaces');
@@ -322,12 +357,8 @@ async function fetchSummaries(): Promise<void> {
       try {
         let url = `/v1/${ type }?summary=metadata.state.name`;
 
-        if (!isAllNamespaces.value) {
-          const namespaces = Object.keys(activeNamespaces.value);
-
-          if (namespaces.length) {
-            url += `&projectsornamespaces=${ namespaces.join(',') }`;
-          }
+        if (namespaceFilterParam.value) {
+          url += `&${ namespaceFilterParam.value }`;
         }
 
         const res = await store.dispatch('cluster/request', { url });
@@ -351,7 +382,7 @@ async function fetchSummaries(): Promise<void> {
   }
 }
 
-watch(activeNamespaces, () => {
+watch(namespaceFilterParam, () => {
   fetchSummaries();
 });
 

From 100cf2de79bfefdde6b7ff1787221588d9b8dab8 Mon Sep 17 00:00:00 2001
From: Marcelo Fukumoto <marcelo.fukumoto@suse.com>
Date: Wed, 20 May 2026 19:10:15 +0200
Subject: [PATCH 11/28] Update the subtitle, fixed api request,

---
 shell/assets/translations/en-us.yaml          |   8 +-
 .../Resource/Detail/Card/StatusCard/index.vue |   5 +-
 .../components/Resource/Detail/Card/index.vue |  28 +++-
 .../_cluster/explorer/workload-dashboard.vue  | 149 +++++++++++-------
 4 files changed, 127 insertions(+), 63 deletions(-)

diff --git a/shell/assets/translations/en-us.yaml b/shell/assets/translations/en-us.yaml
index 5251c507645..0f7fe745996 100644
--- a/shell/assets/translations/en-us.yaml
+++ b/shell/assets/translations/en-us.yaml
@@ -7428,9 +7428,11 @@ wm:
 workloadDashboard:
   title: Workloads Overview
   subtitle:
-    allNamespaces: For all namespaces
-    filtered: "For namespace: {namespace}"
-    filteredMultiple: "For {count} namespaces"
+    allNamespaces: "For all namespaces ({count})"
+    userNamespaces: "Only for user namespaces ({count})"
+    project: "For the namespaces of Project {name} ({count})"
+    namespace: "For the namespace {name} ({count})"
+    multipleSelected: "For {selected} items selected ({count})"
   sections:
     byState: By State
     byType: By Type
diff --git a/shell/components/Resource/Detail/Card/StatusCard/index.vue b/shell/components/Resource/Detail/Card/StatusCard/index.vue
index 8fbd136524f..6f3b8006d4a 100644
--- a/shell/components/Resource/Detail/Card/StatusCard/index.vue
+++ b/shell/components/Resource/Detail/Card/StatusCard/index.vue
@@ -16,6 +16,7 @@ export interface Props {
   showScaling?: boolean;
   showPercent?: boolean;
   noResourcesMessage?: string;
+  to?: RouteLocationRaw;
   rowTo?: RouteLocationRaw | string;
 }
 </script>
@@ -29,7 +30,8 @@ const props = withDefaults(defineProps<Props>(), {
   showScaling:        false,
   showPercent:        true,
   noResourcesMessage: undefined,
-  rowTo:              undefined
+  to:                 undefined,
+  rowTo:              undefined,
 });
 const emit = defineEmits(['decrease', 'increase']);
 
@@ -104,6 +106,7 @@ function rowRoute(label: string): RouteLocationRaw | undefined {
   <Card
     :title="title"
     data-testid="resource-detail-status-card"
+    :to="props.to"
   >
     <template
       v-if="props.showScaling"
diff --git a/shell/components/Resource/Detail/Card/index.vue b/shell/components/Resource/Detail/Card/index.vue
index b074078100e..6daa9b4bff1 100644
--- a/shell/components/Resource/Detail/Card/index.vue
+++ b/shell/components/Resource/Detail/Card/index.vue
@@ -1,19 +1,38 @@
 <script setup lang="ts">
 import { computed, useSlots } from 'vue';
+import { useRouter } from 'vue-router';
+import type { RouteLocationRaw } from 'vue-router';
 import VerticalGap from '@shell/components/Resource/Detail/Card/VerticalGap.vue';
 
 export interface CardProps {
     title?: string;
+    to?: RouteLocationRaw;
 }
 
-const { title } = defineProps<CardProps>();
+const { title, to } = defineProps<CardProps>();
 const slots = useSlots();
+const router = useRouter();
 
+const clickable = computed(() => !!to);
+const cursorValue = computed(() => clickable.value ? 'pointer' : 'auto');
 const showHeading = computed(() => !!title || !!slots.title || !!slots['heading-action']);
+
+function handleClick(): void {
+  if (to) {
+    router.push(to);
+  }
+}
 </script>
 
 <template>
-  <div class="detail-card">
+  <div
+    class="detail-card"
+    :class="{ clickable: clickable }"
+    :role="clickable ? 'link' : undefined"
+    :tabindex="clickable ? 0 : undefined"
+    @click="handleClick"
+    @keyup.enter="handleClick"
+  >
     <template v-if="showHeading">
       <div class="heading">
         <slot name="heading">
@@ -38,6 +57,11 @@ const showHeading = computed(() => !!title || !!slots.title || !!slots['heading-
     padding: 16px;
     border-radius: var(--border-radius-md);
     border: 1px solid var(--border);
+    cursor: v-bind(cursorValue);
+
+    &.clickable:hover {
+      border-color: var(--primary);
+    }
 
     .heading {
       display: flex;
diff --git a/shell/pages/c/_cluster/explorer/workload-dashboard.vue b/shell/pages/c/_cluster/explorer/workload-dashboard.vue
index d8e6d8de899..d6368e66757 100644
--- a/shell/pages/c/_cluster/explorer/workload-dashboard.vue
+++ b/shell/pages/c/_cluster/explorer/workload-dashboard.vue
@@ -18,6 +18,12 @@ import StatusCard from '@shell/components/Resource/Detail/Card/StatusCard/index.
 import { useI18n } from '@shell/composables/useI18n';
 import { STATE_COLOR_MAP, ALL_NAMESPACES } from '@shell/store/prefs';
 import pAndNFiltering from '@shell/plugins/steve/projectAndNamespaceFiltering.utils';
+import {
+  NAMESPACE_FILTER_ALL_USER,
+  NAMESPACE_FILTER_ALL_SYSTEM,
+  NAMESPACE_FILTER_P_FULL_PREFIX,
+  NAMESPACE_FILTER_NS_FULL_PREFIX,
+} from '@shell/utils/namespace-filter';
 import stevePaginationUtils from '@shell/plugins/steve/steve-pagination-utils';
 import { PaginationFilterEquality } from '@shell/types/store/pagination.types';
 
@@ -48,11 +54,11 @@ interface StateCard {
 }
 
 const WORKLOAD_RESOURCE_TYPES: string[] = [
-  WORKLOAD_TYPES.DEPLOYMENT,
+  WORKLOAD_TYPES.CRON_JOB,
   WORKLOAD_TYPES.DAEMON_SET,
-  WORKLOAD_TYPES.STATEFUL_SET,
+  WORKLOAD_TYPES.DEPLOYMENT,
   WORKLOAD_TYPES.JOB,
-  WORKLOAD_TYPES.CRON_JOB,
+  WORKLOAD_TYPES.STATEFUL_SET,
   POD,
 ];
 
@@ -101,10 +107,6 @@ function toStateColor(state: string): StateColor {
   return (color === 'darker' ? 'disabled' : color) as StateColor;
 }
 
-const activeNamespaces = computed<Record<string, boolean>>(() => {
-  return store.getters['activeNamespaceCache'];
-});
-
 const isAllNamespaces = computed<boolean>(() => {
   return store.getters['isAllNamespaces'];
 });
@@ -141,18 +143,41 @@ const namespaceFilterParam = computed<string>(() => {
   return parts.join('&');
 });
 
+const totalWorkloads = computed<number>(() => {
+  return workloadData.value.reduce((sum, w) => sum + (w.error ? 0 : w.total), 0);
+});
+
 const namespaceSubtitle = computed<string>(() => {
+  const count = totalWorkloads.value;
+  const filters: string[] = store.getters['namespaceFilters'];
+
   if (isAllNamespaces.value) {
-    return t('workloadDashboard.subtitle.allNamespaces');
+    return t('workloadDashboard.subtitle.allNamespaces', { count });
   }
 
-  const namespaces = Object.keys(activeNamespaces.value);
+  if (filters.length === 1) {
+    const filter = filters[0];
+
+    if (filter === NAMESPACE_FILTER_ALL_USER || filter === NAMESPACE_FILTER_ALL_SYSTEM) {
+      return t('workloadDashboard.subtitle.userNamespaces', { count });
+    }
+
+    if (filter.startsWith(NAMESPACE_FILTER_P_FULL_PREFIX)) {
+      const projectId = filter.replace(NAMESPACE_FILTER_P_FULL_PREFIX, '');
+      const projects = store.getters['management/all']('management.cattle.io.project');
+      const project = projects.find((p: any) => p.id?.endsWith(`/${ projectId }`) || p.metadata?.name === projectId);
+
+      return t('workloadDashboard.subtitle.project', { name: project?.nameDisplay || projectId, count });
+    }
+
+    if (filter.startsWith(NAMESPACE_FILTER_NS_FULL_PREFIX)) {
+      const name = filter.replace(NAMESPACE_FILTER_NS_FULL_PREFIX, '');
 
-  if (namespaces.length === 1) {
-    return t('workloadDashboard.subtitle.filtered', { namespace: namespaces[0] });
+      return t('workloadDashboard.subtitle.namespace', { name, count });
+    }
   }
 
-  return t('workloadDashboard.subtitle.filteredMultiple', { count: namespaces.length });
+  return t('workloadDashboard.subtitle.multipleSelected', { selected: filters.length, count });
 });
 
 const workloadData = computed<WorkloadEntry[]>(() => {
@@ -355,7 +380,7 @@ async function fetchSummaries(): Promise<void> {
       }
 
       try {
-        let url = `/v1/${ type }?summary=metadata.state.name`;
+        let url = `${ schema.links.collection }?summary=metadata.state.name`;
 
         if (namespaceFilterParam.value) {
           url += `&${ namespaceFilterParam.value }`;
@@ -530,6 +555,7 @@ onBeforeUnmount(() => {
             v-for="card in byTypeCards"
             :key="card.title"
             :title="card.title"
+            :to="resourceRoute(card.type)"
             :row-to="resourceRoute(card.type)"
             :resources="card.resources"
             :showPercent="false"
@@ -589,71 +615,80 @@ onBeforeUnmount(() => {
     gap: 15px;
   }
 
+  :deep(.state-card) {
+    .body {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+    }
+  }
+
   .bento-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     grid-auto-flow: dense;
     gap: 15px;
-  }
 
-  .bento-hero {
-    grid-column: 3;
-    grid-row: 1 / -1;
+    .bento-hero {
+      grid-column: 3;
+      grid-row: 1 / -1;
 
-    &--full {
-      grid-column: 1 / -1;
+      &--full {
+        grid-column: 1 / -1;
 
-      :deep(.body) {
-        display: grid;
-        grid-template-columns: repeat(3, 1fr);
-        gap: 4px 48px;
+        :deep(.body) {
+          display: grid;
+          grid-template-columns: repeat(3, 1fr);
+          gap: 4px 48px;
+        }
       }
-    }
 
-    &--wide {
-      grid-column: 2 / -1;
+      &--wide {
+        grid-column: 2 / -1;
 
-      :deep(.body) {
-        display: grid;
-        grid-template-columns: repeat(2, 1fr);
-        gap: 4px 48px;
+        :deep(.body) {
+          display: grid;
+          grid-template-columns: repeat(2, 1fr);
+          gap: 4px 48px;
+        }
       }
     }
-  }
 
-  .bento-sub-hero {
-    grid-column: 2;
-    grid-row: 1 / -1;
-  }
+    .bento-sub-hero {
+      grid-column: 2;
+      grid-row: 1 / -1;
+    }
 
-  .bento-grid--has-sub-hero {
-    .state-card:not(.bento-hero):not(.bento-sub-hero) {
-      grid-column: 1;
+    .bento-grid--has-sub-hero {
+      .state-card:not(.bento-hero):not(.bento-sub-hero) {
+        grid-column: 1;
+      }
     }
-  }
 
-  .state-card {
-    :deep(.resource-row) {
-      position: relative;
-      padding-left: 20px;
-      line-height: 20px;
-      height: 24px;
+    .state-card {
+      border: 0;
+      :deep(.resource-row) {
+        position: relative;
+        padding-left: 20px;
+        line-height: 21px;
+        height: 24px;
 
-      .left {
-        flex-grow: 1;
-      }
+        .left {
+          flex-grow: 1;
+        }
 
-      .right .counts .state-dot {
-        position: absolute;
-        left: 0;
-        top: 50%;
-        transform: translateY(-50%);
+        .right .counts .state-dot {
+          position: absolute;
+          left: 0;
+          top: 50%;
+          transform: translateY(-50%);
+        }
       }
-    }
 
-    @each $color in (error, warning, info, success) {
-      &--#{$color} {
-        background: var(--#{$color}-banner-bg, rgba(var(--#{$color}-rgb), 0.1));
+      @each $color in (error, warning, info, success, disabled) {
+        &--#{$color} {
+          background: var(--#{$color}-banner-bg, rgba(var(--#{$color}-rgb), 0.1));
+        }
       }
     }
   }

From 35451b736774e78dc5a32ecf7c5d3f6f19621c79 Mon Sep 17 00:00:00 2001
From: Marcelo Fukumoto <marcelo.fukumoto@suse.com>
Date: Thu, 21 May 2026 21:26:52 +0200
Subject: [PATCH 12/28] Fixed some UIs Added the filter

---
 shell/assets/translations/en-us.yaml          |   3 +
 .../Resource/Detail/Card/StatusCard/index.vue |  22 ++-
 .../components/Resource/Detail/Card/index.vue |  14 +-
 shell/components/SubtleLink.vue               |  43 +++++-
 shell/mixins/resource-fetch-api-pagination.js |  42 +++++-
 shell/pages/c/_cluster/apps/charts/index.vue  |  15 +-
 .../_cluster/explorer/workload-dashboard.vue  | 134 +++++++++++-------
 7 files changed, 195 insertions(+), 78 deletions(-)

diff --git a/shell/assets/translations/en-us.yaml b/shell/assets/translations/en-us.yaml
index 0f7fe745996..02f940f4638 100644
--- a/shell/assets/translations/en-us.yaml
+++ b/shell/assets/translations/en-us.yaml
@@ -7430,6 +7430,9 @@ workloadDashboard:
   subtitle:
     allNamespaces: "For all namespaces ({count})"
     userNamespaces: "Only for user namespaces ({count})"
+    systemNamespaces: "Only for system namespaces ({count})"
+    namespacedOnly: "Only for namespaced resources ({count})"
+    clusterOnly: "Only for cluster resources ({count})"
     project: "For the namespaces of Project {name} ({count})"
     namespace: "For the namespace {name} ({count})"
     multipleSelected: "For {selected} items selected ({count})"
diff --git a/shell/components/Resource/Detail/Card/StatusCard/index.vue b/shell/components/Resource/Detail/Card/StatusCard/index.vue
index 6f3b8006d4a..8145ba15262 100644
--- a/shell/components/Resource/Detail/Card/StatusCard/index.vue
+++ b/shell/components/Resource/Detail/Card/StatusCard/index.vue
@@ -45,7 +45,7 @@ const segmentAccumulator = computed(() => {
     const color: StateColor = resource.stateSimpleColor;
 
     accumulator[color] = accumulator[color] || { count: 0 };
-    accumulator[color].count++;
+    accumulator[color].count += resource.count || 1;
   });
 
   return accumulator;
@@ -55,12 +55,13 @@ const rowAccumulator = computed(() => {
   interface Value {
     count: number;
     color: StateColor;
+    stateId: string;
   }
   const accumulator: {[key in string]: Value} = {};
 
   props.resources?.forEach((resource: any) => {
-    accumulator[resource.stateDisplay] = accumulator[resource.stateDisplay] || { count: 0 };
-    accumulator[resource.stateDisplay].count++;
+    accumulator[resource.stateDisplay] = accumulator[resource.stateDisplay] || { count: 0, stateId: resource.stateId || resource.stateDisplay };
+    accumulator[resource.stateDisplay].count += resource.count || 1;
     accumulator[resource.stateDisplay].color = resource.stateSimpleColor.replace('text-', '') as StateColor;
   });
 
@@ -71,7 +72,13 @@ const percent = (count: number, total: number) => {
   return count / total * 100;
 };
 
-const count = computed(() => props.resources?.length || 0);
+const count = computed(() => {
+  if (!props.resources?.length) {
+    return 0;
+  }
+
+  return props.resources.reduce((sum: number, r: any) => sum + (r.count || 1), 0);
+});
 
 const segmentColors = computed(() => Object.keys(segmentAccumulator.value) as StateColor[]);
 const segments = computed(() => segmentColors.value.map((color: StateColor) => ({
@@ -87,17 +94,18 @@ const rows = computed(() => {
   return rowStates.value.map((state) => ({
     color:   rowAccumulator.value[state].color,
     label:   state,
+    stateId: rowAccumulator.value[state].stateId,
     count:   rowAccumulator.value[state].count,
     percent: percent(rowAccumulator.value[state].count, count.value)
   }));
 });
 
-function rowRoute(label: string): RouteLocationRaw | undefined {
+function rowRoute(stateId: string): RouteLocationRaw | undefined {
   if (!props.rowTo || typeof props.rowTo === 'string') {
     return undefined;
   }
 
-  return { ...props.rowTo, query: { q: label } };
+  return { ...props.rowTo, query: { q: `"metadata.state.name":"${ stateId }"` } };
 }
 
 </script>
@@ -137,7 +145,7 @@ function rowRoute(label: string): RouteLocationRaw | undefined {
         :count="row.count"
         :percent="row.percent"
         :showPercent="props.showPercent"
-        :to="rowRoute(row.label)"
+        :to="rowRoute(row.stateId)"
       />
     </div>
     <div
diff --git a/shell/components/Resource/Detail/Card/index.vue b/shell/components/Resource/Detail/Card/index.vue
index 6daa9b4bff1..0ae45c9e0e8 100644
--- a/shell/components/Resource/Detail/Card/index.vue
+++ b/shell/components/Resource/Detail/Card/index.vue
@@ -17,10 +17,18 @@ const clickable = computed(() => !!to);
 const cursorValue = computed(() => clickable.value ? 'pointer' : 'auto');
 const showHeading = computed(() => !!title || !!slots.title || !!slots['heading-action']);
 
-function handleClick(): void {
-  if (to) {
-    router.push(to);
+function handleClick(e: MouseEvent | KeyboardEvent): void {
+  if (!to) {
+    return;
   }
+
+  const target = e.target as HTMLElement;
+
+  if (target.closest('a, button')) {
+    return;
+  }
+
+  router.push(to);
 }
 </script>
 
diff --git a/shell/components/SubtleLink.vue b/shell/components/SubtleLink.vue
index e9023211f05..a4b2f1e6d0f 100644
--- a/shell/components/SubtleLink.vue
+++ b/shell/components/SubtleLink.vue
@@ -1,25 +1,54 @@
 <script setup lang="ts">
+import { computed } from 'vue';
+import { useStore } from 'vuex';
 import { RouterLink, RouteLocationRaw } from 'vue-router';
+import { useI18n } from '@shell/composables/useI18n';
 
 export interface Props {
-  to: RouteLocationRaw;
+  to?: RouteLocationRaw;
+  href?: string;
+  target?: string;
+  openInNewTab?: boolean;
 }
 
-const { to } = defineProps<Props>();
+const store = useStore();
+const { t } = useI18n(store);
+const props = defineProps<Props>();
+
+const isExternal = computed(() => !!props.href);
 </script>
 
 <template>
-  <RouterLink
-    class="subtle-link"
-    :to="to"
+  <component
+    :is="isExternal ? 'a' : RouterLink"
+    class="subtle-link link-main secondary-text-link"
+    v-bind="isExternal
+      ? { href, target, rel: target === '_blank' ? 'noopener noreferrer nofollow' : undefined }
+      : { to }"
   >
-    <slot name="default" />
-  </RouterLink>
+    <span
+      v-if="openInNewTab"
+      class="sr-only"
+    >{{ t('generic.opensInNewTab') }}</span>
+    <slot name="default" /><span v-if="openInNewTab">&nbsp;</span><i
+      v-if="openInNewTab"
+      class="link-icon icon icon-external-link"
+    />
+  </component>
 </template>
 
 <style lang="scss" scoped>
 .subtle-link {
     text-decoration: underline;
     color: var(--body-text);
+
+    &:hover,
+    &:active {
+      text-decoration: none;
+    }
+}
+
+.link-icon {
+  display: inline;
 }
 </style>
diff --git a/shell/mixins/resource-fetch-api-pagination.js b/shell/mixins/resource-fetch-api-pagination.js
index 92d6b2228fa..166c6c17328 100644
--- a/shell/mixins/resource-fetch-api-pagination.js
+++ b/shell/mixins/resource-fetch-api-pagination.js
@@ -5,10 +5,45 @@ import { mapGetters } from 'vuex';
 import { ResourceListComponentName } from '../components/ResourceList/resource-list.config';
 import paginationUtils from '@shell/utils/pagination-utils';
 import debounce from 'lodash/debounce';
-import { PaginationParamFilter, PaginationFilterField, PaginationArgs } from '@shell/types/store/pagination.types';
+import { PaginationParamFilter, PaginationFilterField, PaginationFilterEquality, PaginationArgs } from '@shell/types/store/pagination.types';
 import stevePaginationUtils from '@shell/plugins/steve/steve-pagination-utils';
 import { STEVE_WATCH_MODE } from '@shell/types/store/subscribe.types';
 
+const STRUCTURED_QUERY_REGEX = /^"([^"]+)":"([^"]*)"(?:,"([^"]+)":"([^"]*)")*$/;
+
+function parseStructuredQuery(query) {
+  if (!query || !STRUCTURED_QUERY_REGEX.test(query)) {
+    return null;
+  }
+
+  const pairs = [];
+  const pairRegex = /"([^"]+)":"([^"]*)"/g;
+  let match;
+
+  while ((match = pairRegex.exec(query)) !== null) {
+    pairs.push({ field: match[1], value: match[2] });
+  }
+
+  if (!pairs.length) {
+    return null;
+  }
+
+  const grouped = {};
+
+  for (const { field, value } of pairs) {
+    if (!grouped[field]) {
+      grouped[field] = [];
+    }
+    grouped[field].push(value);
+  }
+
+  return Object.entries(grouped).map(([field, values]) => new PaginationFilterField({
+    field,
+    value:    values.join(','),
+    equality: PaginationFilterEquality.IN,
+  }));
+}
+
 /**
  * Companion mixin used with `resource-fetch` for `ResourceList` to determine if the user needs to filter the list by a single namespace
  */
@@ -75,11 +110,12 @@ export default {
       const {
         page, perPage, filter, sort, descending
       } = event;
-      const searchFilters = filter.searchQuery ? filter.searchFields.map((field) => new PaginationFilterField({
+      const structuredFilters = filter.searchQuery ? parseStructuredQuery(filter.searchQuery) : null;
+      const searchFilters = structuredFilters || (filter.searchQuery ? filter.searchFields.map((field) => new PaginationFilterField({
         field,
         value: filter.searchQuery,
         exact: false,
-      })) : [];
+      })) : []);
 
       const pagination = new PaginationArgs({
         page,
diff --git a/shell/pages/c/_cluster/apps/charts/index.vue b/shell/pages/c/_cluster/apps/charts/index.vue
index c8a9a0e4b29..3aca36afe60 100644
--- a/shell/pages/c/_cluster/apps/charts/index.vue
+++ b/shell/pages/c/_cluster/apps/charts/index.vue
@@ -25,6 +25,7 @@ import AppChartCardFooter from '@shell/pages/c/_cluster/apps/charts/AppChartCard
 import AddRepoLink from '@shell/pages/c/_cluster/apps/charts/AddRepoLink';
 import StatusLabel from '@shell/pages/c/_cluster/apps/charts/StatusLabel';
 import RichTranslation from '@shell/components/RichTranslation.vue';
+import SubtleLink from '@shell/components/SubtleLink.vue';
 import { getLatestCompatibleVersion } from '@shell/utils/chart';
 import Select from '@shell/components/form/Select';
 import { getVersionData } from '@shell/config/version';
@@ -47,7 +48,8 @@ export default {
     AppChartCardSubHeader,
     AppChartCardFooter,
     Select,
-    RichTranslation
+    RichTranslation,
+    SubtleLink,
   },
 
   async fetch() {
@@ -683,16 +685,13 @@ export default {
             tag="span"
           >
             <template #docsUrl="{ content }">
-              <a
+              <SubtleLink
                 :href="`${DOCS_BASE}/how-to-guides/new-user-guides/helm-charts-in-rancher`"
-                class="secondary-text-link"
-                tabindex="0"
                 target="_blank"
-                rel="noopener noreferrer nofollow"
+                :open-in-new-tab="true"
               >
-                <span class="sr-only">{{ t('generic.opensInNewTab') }}</span>
-                {{ content }} <i class="icon icon-external-link" />
-              </a>
+                {{ content }}
+              </SubtleLink>
             </template>
           </RichTranslation>
         </div>
diff --git a/shell/pages/c/_cluster/explorer/workload-dashboard.vue b/shell/pages/c/_cluster/explorer/workload-dashboard.vue
index d6368e66757..9d7d9d53022 100644
--- a/shell/pages/c/_cluster/explorer/workload-dashboard.vue
+++ b/shell/pages/c/_cluster/explorer/workload-dashboard.vue
@@ -15,6 +15,7 @@ import { StateColor } from '@shell/utils/style';
 import Card from '@shell/components/Resource/Detail/Card/index.vue';
 import ResourceRow from '@shell/components/Resource/Detail/ResourceRow.vue';
 import StatusCard from '@shell/components/Resource/Detail/Card/StatusCard/index.vue';
+import SubtleLink from '@shell/components/SubtleLink.vue';
 import { useI18n } from '@shell/composables/useI18n';
 import { STATE_COLOR_MAP, ALL_NAMESPACES } from '@shell/store/prefs';
 import pAndNFiltering from '@shell/plugins/steve/projectAndNamespaceFiltering.utils';
@@ -45,6 +46,7 @@ interface StateCardRow {
   label: string;
   color: StateColor;
   type: string;
+  stateNames: string[];
   counts: { label: string; count: number }[];
 }
 
@@ -147,10 +149,20 @@ const totalWorkloads = computed<number>(() => {
   return workloadData.value.reduce((sum, w) => sum + (w.error ? 0 : w.total), 0);
 });
 
+const namespaceMode = computed<string>(() => store.getters['namespaceMode']);
+
 const namespaceSubtitle = computed<string>(() => {
   const count = totalWorkloads.value;
   const filters: string[] = store.getters['namespaceFilters'];
 
+  if (namespaceMode.value === 'namespaced') {
+    return t('workloadDashboard.subtitle.namespacedOnly', { count });
+  }
+
+  if (namespaceMode.value === 'cluster') {
+    return t('workloadDashboard.subtitle.clusterOnly', { count });
+  }
+
   if (isAllNamespaces.value) {
     return t('workloadDashboard.subtitle.allNamespaces', { count });
   }
@@ -158,10 +170,14 @@ const namespaceSubtitle = computed<string>(() => {
   if (filters.length === 1) {
     const filter = filters[0];
 
-    if (filter === NAMESPACE_FILTER_ALL_USER || filter === NAMESPACE_FILTER_ALL_SYSTEM) {
+    if (filter === NAMESPACE_FILTER_ALL_USER) {
       return t('workloadDashboard.subtitle.userNamespaces', { count });
     }
 
+    if (filter === NAMESPACE_FILTER_ALL_SYSTEM) {
+      return t('workloadDashboard.subtitle.systemNamespaces', { count });
+    }
+
     if (filter.startsWith(NAMESPACE_FILTER_P_FULL_PREFIX)) {
       const projectId = filter.replace(NAMESPACE_FILTER_P_FULL_PREFIX, '');
       const projects = store.getters['management/all']('management.cattle.io.project');
@@ -210,7 +226,7 @@ const hasWorkloads = computed<boolean>(() => {
 });
 
 const byStateCards = computed<StateCard[]>(() => {
-  const colorGroups: Record<string, Record<string, { count: number; type: string }>> = {
+  const colorGroups: Record<string, Record<string, { count: number; type: string; stateNames: Set<string> }>> = {
     error:    {},
     warning:  {},
     info:     {},
@@ -227,9 +243,12 @@ const byStateCards = computed<StateCard[]>(() => {
       const color = toStateColor(state);
 
       if (!colorGroups[color][w.label]) {
-        colorGroups[color][w.label] = { count: 0, type: w.type };
+        colorGroups[color][w.label] = {
+          count: 0, type: w.type, stateNames: new Set()
+        };
       }
       colorGroups[color][w.label].count += count;
+      colorGroups[color][w.label].stateNames.add(state);
     }
   }
 
@@ -237,11 +256,12 @@ const byStateCards = computed<StateCard[]>(() => {
     .filter(([, typeMap]) => Object.keys(typeMap).length > 0)
     .map(([color, typeMap]) => ({
       color: color as StateColor,
-      rows:  Object.entries(typeMap).map(([label, { count, type }]) => ({
+      rows:  Object.entries(typeMap).map(([label, { count, type, stateNames }]) => ({
         label,
-        color:  color as StateColor,
+        color:      color as StateColor,
         type,
-        counts: [{ label: '', count }],
+        stateNames: Array.from(stateNames),
+        counts:     [{ label: '', count }],
       })),
     }));
 });
@@ -275,19 +295,14 @@ const byStateLayout = computed(() => {
 
 const byTypeCards = computed(() => {
   return workloadData.value.filter((w) => !w.error && w.total > 0).map((w) => {
-    const resources: { stateDisplay: string; stateSimpleColor: string }[] = [];
-
-    const sortedStates = Object.entries(w.stateCounts)
-      .sort(([a], [b]) => (COLOR_ORDER[toStateColor(a)] ?? 5) - (COLOR_ORDER[toStateColor(b)] ?? 5));
-
-    for (const [state, count] of sortedStates) {
-      for (let i = 0; i < count; i++) {
-        resources.push({
-          stateDisplay:     state?.charAt(0).toUpperCase() + state?.slice(1),
-          stateSimpleColor: toStateColor(state),
-        });
-      }
-    }
+    const resources = Object.entries(w.stateCounts)
+      .sort(([a], [b]) => (COLOR_ORDER[toStateColor(a)] ?? 5) - (COLOR_ORDER[toStateColor(b)] ?? 5))
+      .map(([state, count]) => ({
+        stateDisplay:     state?.charAt(0).toUpperCase() + state?.slice(1),
+        stateId:          state,
+        stateSimpleColor: toStateColor(state),
+        count,
+      }));
 
     return {
       title: w.label,
@@ -304,8 +319,8 @@ function resetNamespaceFilter(): void {
   });
 }
 
-function resourceRoute(type: string): RouteLocationRaw {
-  return {
+function resourceRoute(type: string, stateNames?: string[]): RouteLocationRaw {
+  const loc: RouteLocationRaw = {
     name:   'c-cluster-product-resource',
     params: {
       cluster:  route.params.cluster as string,
@@ -313,6 +328,14 @@ function resourceRoute(type: string): RouteLocationRaw {
       resource: type,
     },
   };
+
+  if (stateNames?.length) {
+    const q = stateNames.map((s) => `"metadata.state.name":"${ s }"`).join(',');
+
+    (loc as any).query = { q };
+  }
+
+  return loc;
 }
 
 async function resolveStateColors(entries: SummaryEntry[]): Promise<void> {
@@ -341,27 +364,31 @@ async function resolveStateColors(entries: SummaryEntry[]): Promise<void> {
   }
 
   const newColors: Record<string, StateColor> = {};
+  const pending = Array.from(unresolvedStates.entries());
+  const concurrency = 10;
 
-  const colorPromises = Array.from(unresolvedStates.entries()).map(async([stateKey, { originalName, type }]) => {
-    try {
-      const url = `/v1/${ type }?limit=1&filter=metadata.state.name=${ originalName }`;
-      const res = await store.dispatch('cluster/request', { url });
-      const resource = res?.data?.[0];
+  for (let i = 0; i < pending.length; i += concurrency) {
+    const batch = pending.slice(i, i + concurrency);
 
-      if (!resource?.metadata?.state) {
-        return;
-      }
+    await Promise.all(batch.map(async([stateKey, { originalName, type }]) => {
+      try {
+        const url = `/v1/${ type }?limit=1&filter=metadata.state.name=${ originalName }`;
+        const res = await store.dispatch('cluster/request', { url });
+        const resource = res?.data?.[0];
 
-      const { error: isError, transitioning, name } = resource.metadata.state;
-      const rawColor = colorForState(name, isError, transitioning).replace('text-', '');
+        if (!resource?.metadata?.state) {
+          return;
+        }
 
-      newColors[stateKey] = (rawColor === 'darker' ? 'disabled' : rawColor) as StateColor;
-    } catch {
-      // Fallback handled by toStateColor via STATES lookup
-    }
-  });
+        const { error: isError, transitioning, name } = resource.metadata.state;
+        const rawColor = colorForState(name, isError, transitioning).replace('text-', '');
 
-  await Promise.all(colorPromises);
+        newColors[stateKey] = (rawColor === 'darker' ? 'disabled' : rawColor) as StateColor;
+      } catch {
+        // Fallback handled by toStateColor via STATES lookup
+      }
+    }));
+  }
 
   if (Object.keys(newColors).length > 0) {
     saveStateColorMap(newColors);
@@ -407,17 +434,25 @@ async function fetchSummaries(): Promise<void> {
   }
 }
 
+function resetPollTimer(): void {
+  if (pollTimer) {
+    clearInterval(pollTimer);
+  }
+
+  pollTimer = setInterval(() => {
+    fetchSummaries();
+  }, 5000);
+}
+
 watch(namespaceFilterParam, () => {
   fetchSummaries();
+  resetPollTimer();
 });
 
 onMounted(async() => {
   await fetchSummaries();
   loading.value = false;
-
-  pollTimer = setInterval(() => {
-    fetchSummaries();
-  }, 5000);
+  resetPollTimer();
 });
 
 onBeforeUnmount(() => {
@@ -465,14 +500,13 @@ onBeforeUnmount(() => {
           tag="div"
         >
           <template #docsLink="{ content }">
-            <a
+            <SubtleLink
               :href="`${DOCS_BASE}/how-to-guides/new-user-guides/kubernetes-resources-setup/workloads-and-pods`"
               target="_blank"
-              rel="noopener noreferrer nofollow"
-              class="secondary-text-link"
+              :open-in-new-tab="true"
             >
-              {{ content }} <i class="icon icon-external-link" />
-            </a>
+              {{ content }}
+            </SubtleLink>
           </template>
         </RichTranslation>
       </div>
@@ -509,7 +543,7 @@ onBeforeUnmount(() => {
               v-for="(row, idx) in card.rows"
               :key="idx"
               :label="row.label"
-              :to="resourceRoute(row.type)"
+              :to="resourceRoute(row.type, row.stateNames)"
               :color="row.color"
               :counts="row.counts"
             />
@@ -523,7 +557,7 @@ onBeforeUnmount(() => {
               v-for="(row, idx) in byStateLayout.subHero.rows"
               :key="idx"
               :label="row.label"
-              :to="resourceRoute(row.type)"
+              :to="resourceRoute(row.type, row.stateNames)"
               :color="row.color"
               :counts="row.counts"
             />
@@ -537,7 +571,7 @@ onBeforeUnmount(() => {
               v-for="(row, idx) in byStateLayout.hero.rows"
               :key="idx"
               :label="row.label"
-              :to="resourceRoute(row.type)"
+              :to="resourceRoute(row.type, row.stateNames)"
               :color="row.color"
               :counts="row.counts"
             />
@@ -558,7 +592,7 @@ onBeforeUnmount(() => {
             :to="resourceRoute(card.type)"
             :row-to="resourceRoute(card.type)"
             :resources="card.resources"
-            :showPercent="false"
+            :show-percent="false"
           />
         </div>
       </div>

From 15e0278236a928d81ca4511f732b6cfcb8531045 Mon Sep 17 00:00:00 2001
From: Marcelo Fukumoto <marcelo.fukumoto@suse.com>
Date: Thu, 21 May 2026 21:35:58 +0200
Subject: [PATCH 13/28] Remove the route, not useful

---
 shell/pages/c/_cluster/explorer/workload-dashboard.vue | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/shell/pages/c/_cluster/explorer/workload-dashboard.vue b/shell/pages/c/_cluster/explorer/workload-dashboard.vue
index 9d7d9d53022..269620abf14 100644
--- a/shell/pages/c/_cluster/explorer/workload-dashboard.vue
+++ b/shell/pages/c/_cluster/explorer/workload-dashboard.vue
@@ -3,7 +3,6 @@ import {
   ref, computed, watch, onMounted, onBeforeUnmount
 } from 'vue';
 import { useStore } from 'vuex';
-import { useRoute } from 'vue-router';
 import type { RouteLocationRaw } from 'vue-router';
 import { WORKLOAD_TYPES, POD, NAMESPACE } from '@shell/config/types';
 import { Banner } from '@components/Banner';
@@ -69,7 +68,6 @@ const COLOR_ORDER: Record<string, number> = {
 };
 
 const store = useStore();
-const route = useRoute();
 const { t } = useI18n(store);
 
 const summaries = ref<SummaryEntry[]>([]);
@@ -323,7 +321,7 @@ function resourceRoute(type: string, stateNames?: string[]): RouteLocationRaw {
   const loc: RouteLocationRaw = {
     name:   'c-cluster-product-resource',
     params: {
-      cluster:  route.params.cluster as string,
+      cluster:  clusterId.value,
       product:  'explorer',
       resource: type,
     },
@@ -429,6 +427,7 @@ async function fetchSummaries(): Promise<void> {
 
     await resolveStateColors(results);
     summaries.value = results;
+    fetchError.value = null;
   } catch (e: any) {
     fetchError.value = e.message || t('workloadDashboard.errors.fetchAll');
   }

From 9d93cec8c68080a87dfecf5d6da4431af9eb15c6 Mon Sep 17 00:00:00 2001
From: Marcelo Fukumoto <marcelo.fukumoto@suse.com>
Date: Thu, 21 May 2026 21:44:18 +0200
Subject: [PATCH 14/28] Broke into composables and 2 components. Separate
 type.ts as well.

---
 .../_cluster/explorer/workload-dashboard.vue  | 611 +-----------------
 .../workload-dashboard/ByStateSection.vue     | 134 ++++
 .../workload-dashboard/ByTypeSection.vue      |  31 +
 .../explorer/workload-dashboard/composable.ts | 445 +++++++++++++
 .../explorer/workload-dashboard/types.ts      |  64 ++
 5 files changed, 698 insertions(+), 587 deletions(-)
 create mode 100644 shell/pages/c/_cluster/explorer/workload-dashboard/ByStateSection.vue
 create mode 100644 shell/pages/c/_cluster/explorer/workload-dashboard/ByTypeSection.vue
 create mode 100644 shell/pages/c/_cluster/explorer/workload-dashboard/composable.ts
 create mode 100644 shell/pages/c/_cluster/explorer/workload-dashboard/types.ts

diff --git a/shell/pages/c/_cluster/explorer/workload-dashboard.vue b/shell/pages/c/_cluster/explorer/workload-dashboard.vue
index 269620abf14..f38e86897e8 100644
--- a/shell/pages/c/_cluster/explorer/workload-dashboard.vue
+++ b/shell/pages/c/_cluster/explorer/workload-dashboard.vue
@@ -1,464 +1,28 @@
 <script setup lang="ts">
-import {
-  ref, computed, watch, onMounted, onBeforeUnmount
-} from 'vue';
-import { useStore } from 'vuex';
-import type { RouteLocationRaw } from 'vue-router';
-import { WORKLOAD_TYPES, POD, NAMESPACE } from '@shell/config/types';
 import { Banner } from '@components/Banner';
 import Loading from '@shell/components/Loading';
 import RichTranslation from '@shell/components/RichTranslation.vue';
-import { STATES, colorForState } from '@shell/plugins/dashboard-store/resource-class';
-import { DOCS_BASE } from '@shell/config/private-label';
-import { StateColor } from '@shell/utils/style';
-import Card from '@shell/components/Resource/Detail/Card/index.vue';
-import ResourceRow from '@shell/components/Resource/Detail/ResourceRow.vue';
-import StatusCard from '@shell/components/Resource/Detail/Card/StatusCard/index.vue';
 import SubtleLink from '@shell/components/SubtleLink.vue';
+import { DOCS_BASE } from '@shell/config/private-label';
 import { useI18n } from '@shell/composables/useI18n';
-import { STATE_COLOR_MAP, ALL_NAMESPACES } from '@shell/store/prefs';
-import pAndNFiltering from '@shell/plugins/steve/projectAndNamespaceFiltering.utils';
-import {
-  NAMESPACE_FILTER_ALL_USER,
-  NAMESPACE_FILTER_ALL_SYSTEM,
-  NAMESPACE_FILTER_P_FULL_PREFIX,
-  NAMESPACE_FILTER_NS_FULL_PREFIX,
-} from '@shell/utils/namespace-filter';
-import stevePaginationUtils from '@shell/plugins/steve/steve-pagination-utils';
-import { PaginationFilterEquality } from '@shell/types/store/pagination.types';
-
-interface SummaryEntry {
-  type: string;
-  summary: { property: string; counts: Record<string, number> }[] | null;
-  error: string | null;
-}
-
-interface WorkloadEntry {
-  type: string;
-  label: string;
-  total: number;
-  stateCounts: Record<string, number>;
-  error: string | null;
-}
-
-interface StateCardRow {
-  label: string;
-  color: StateColor;
-  type: string;
-  stateNames: string[];
-  counts: { label: string; count: number }[];
-}
-
-interface StateCard {
-  color: StateColor;
-  rows: StateCardRow[];
-}
-
-const WORKLOAD_RESOURCE_TYPES: string[] = [
-  WORKLOAD_TYPES.CRON_JOB,
-  WORKLOAD_TYPES.DAEMON_SET,
-  WORKLOAD_TYPES.DEPLOYMENT,
-  WORKLOAD_TYPES.JOB,
-  WORKLOAD_TYPES.STATEFUL_SET,
-  POD,
-];
-
-const COLOR_ORDER: Record<string, number> = {
-  error: 0, warning: 1, disabled: 2, info: 3, success: 4
-};
+import { useStore } from 'vuex';
+import { useWorkloadDashboard } from './workload-dashboard/composable';
+import ByStateSection from './workload-dashboard/ByStateSection.vue';
+import ByTypeSection from './workload-dashboard/ByTypeSection.vue';
 
 const store = useStore();
 const { t } = useI18n(store);
 
-const summaries = ref<SummaryEntry[]>([]);
-const fetchError = ref<string | null>(null);
-const loading = ref(true);
-let pollTimer: ReturnType<typeof setInterval> | null = null;
-
-const clusterId = computed<string>(() => store.getters['clusterId']);
-
-const stateColorMap = computed<Record<string, StateColor>>(() => {
-  const all = store.getters['prefs/get'](STATE_COLOR_MAP) || {};
-
-  return all[clusterId.value] || {};
-});
-
-function saveStateColorMap(updates: Record<string, StateColor>): void {
-  const all = store.getters['prefs/get'](STATE_COLOR_MAP) || {};
-  const current = all[clusterId.value] || {};
-
-  store.dispatch('prefs/set', {
-    key:   STATE_COLOR_MAP,
-    value: { ...all, [clusterId.value]: { ...current, ...updates } },
-  });
-}
-
-function toStateColor(state: string): StateColor {
-  const key = (state || '').toLowerCase();
-  const cached = stateColorMap.value[key];
-
-  if (cached) {
-    return cached;
-  }
-
-  const config = STATES[key];
-  const color = config?.color || 'info';
-
-  return (color === 'darker' ? 'disabled' : color) as StateColor;
-}
-
-const isAllNamespaces = computed<boolean>(() => {
-  return store.getters['isAllNamespaces'];
-});
-
-const namespaceFilterParam = computed<string>(() => {
-  const selection: string[] = store.getters['namespaceFilters'];
-  const { projectsOrNamespaces, filters } = stevePaginationUtils.createParamsFromNsFilter({
-    allNamespaces:                 store.getters['cluster/all'](NAMESPACE),
-    selection,
-    isAllNamespaces:               isAllNamespaces.value,
-    isLocalCluster:                store.getters['currentCluster']?.isLocal,
-    showReservedRancherNamespaces: store.getters['prefs/get'](ALL_NAMESPACES),
-    productHidesSystemNamespaces:  store.getters['currentProduct']?.hideSystemResources,
-  });
-
-  const parts: string[] = [];
-
-  const nsValues = projectsOrNamespaces.flatMap((p) => p.fields.map((f) => f.value || ''));
-  const pAndN = pAndNFiltering.createParam(nsValues);
-
-  if (pAndN) {
-    parts.push(pAndN);
-  }
-
-  for (const f of filters) {
-    for (const field of f.fields) {
-      const equality = field.equality || '=';
-      const val = [PaginationFilterEquality.IN, PaginationFilterEquality.NOT_IN].includes(equality as PaginationFilterEquality) ? `(${ field.value })` : field.value;
-
-      parts.push(`filter=${ field.field }${ equality }${ val }`);
-    }
-  }
-
-  return parts.join('&');
-});
-
-const totalWorkloads = computed<number>(() => {
-  return workloadData.value.reduce((sum, w) => sum + (w.error ? 0 : w.total), 0);
-});
-
-const namespaceMode = computed<string>(() => store.getters['namespaceMode']);
-
-const namespaceSubtitle = computed<string>(() => {
-  const count = totalWorkloads.value;
-  const filters: string[] = store.getters['namespaceFilters'];
-
-  if (namespaceMode.value === 'namespaced') {
-    return t('workloadDashboard.subtitle.namespacedOnly', { count });
-  }
-
-  if (namespaceMode.value === 'cluster') {
-    return t('workloadDashboard.subtitle.clusterOnly', { count });
-  }
-
-  if (isAllNamespaces.value) {
-    return t('workloadDashboard.subtitle.allNamespaces', { count });
-  }
-
-  if (filters.length === 1) {
-    const filter = filters[0];
-
-    if (filter === NAMESPACE_FILTER_ALL_USER) {
-      return t('workloadDashboard.subtitle.userNamespaces', { count });
-    }
-
-    if (filter === NAMESPACE_FILTER_ALL_SYSTEM) {
-      return t('workloadDashboard.subtitle.systemNamespaces', { count });
-    }
-
-    if (filter.startsWith(NAMESPACE_FILTER_P_FULL_PREFIX)) {
-      const projectId = filter.replace(NAMESPACE_FILTER_P_FULL_PREFIX, '');
-      const projects = store.getters['management/all']('management.cattle.io.project');
-      const project = projects.find((p: any) => p.id?.endsWith(`/${ projectId }`) || p.metadata?.name === projectId);
-
-      return t('workloadDashboard.subtitle.project', { name: project?.nameDisplay || projectId, count });
-    }
-
-    if (filter.startsWith(NAMESPACE_FILTER_NS_FULL_PREFIX)) {
-      const name = filter.replace(NAMESPACE_FILTER_NS_FULL_PREFIX, '');
-
-      return t('workloadDashboard.subtitle.namespace', { name, count });
-    }
-  }
-
-  return t('workloadDashboard.subtitle.multipleSelected', { selected: filters.length, count });
-});
-
-const workloadData = computed<WorkloadEntry[]>(() => {
-  return summaries.value.map((entry) => {
-    const label = t(`typeLabel."${ entry.type }"`, { count: 2 })?.trim() || entry.type;
-    const stateCounts: Record<string, number> = {};
-    let total = 0;
-
-    if (entry.summary) {
-      for (const s of entry.summary) {
-        if (s.property === 'metadata.state.name') {
-          Object.assign(stateCounts, s.counts);
-          total = Object.values(s.counts).reduce((sum, c) => sum + c, 0);
-        }
-      }
-    }
-
-    return {
-      type:  entry.type,
-      label,
-      total,
-      stateCounts,
-      error: entry.error,
-    };
-  });
-});
-
-const hasWorkloads = computed<boolean>(() => {
-  return workloadData.value.some((w) => !w.error && w.total > 0);
-});
-
-const byStateCards = computed<StateCard[]>(() => {
-  const colorGroups: Record<string, Record<string, { count: number; type: string; stateNames: Set<string> }>> = {
-    error:    {},
-    warning:  {},
-    info:     {},
-    success:  {},
-    disabled: {},
-  };
-
-  for (const w of workloadData.value) {
-    if (w.error || w.total === 0) {
-      continue;
-    }
-
-    for (const [state, count] of Object.entries(w.stateCounts)) {
-      const color = toStateColor(state);
-
-      if (!colorGroups[color][w.label]) {
-        colorGroups[color][w.label] = {
-          count: 0, type: w.type, stateNames: new Set()
-        };
-      }
-      colorGroups[color][w.label].count += count;
-      colorGroups[color][w.label].stateNames.add(state);
-    }
-  }
-
-  return Object.entries(colorGroups)
-    .filter(([, typeMap]) => Object.keys(typeMap).length > 0)
-    .map(([color, typeMap]) => ({
-      color: color as StateColor,
-      rows:  Object.entries(typeMap).map(([label, { count, type, stateNames }]) => ({
-        label,
-        color:      color as StateColor,
-        type,
-        stateNames: Array.from(stateNames),
-        counts:     [{ label: '', count }],
-      })),
-    }));
-});
-
-const byStateLayout = computed(() => {
-  const cards = byStateCards.value;
-  const hero = cards.find((c) => c.color === 'success') || null;
-  const others = cards.filter((c) => c !== hero);
-
-  let heroMode = 'default';
-
-  if (cards.length === 1) {
-    heroMode = 'full';
-  } else if (others.length === 1) {
-    heroMode = 'wide';
-  }
-
-  const subHero = (hero && others.length >= 3) ? others.find((c) => c.color === 'info') || null : null;
-
-  const regularCards = subHero ? others.filter((c) => c !== subHero) : others;
-  const gridRows = subHero ? Math.max(1, regularCards.length) : Math.max(1, Math.ceil(regularCards.length / 2));
-
-  return {
-    hero,
-    subHero,
-    cards: regularCards,
-    heroMode,
-    gridRows,
-  };
-});
-
-const byTypeCards = computed(() => {
-  return workloadData.value.filter((w) => !w.error && w.total > 0).map((w) => {
-    const resources = Object.entries(w.stateCounts)
-      .sort(([a], [b]) => (COLOR_ORDER[toStateColor(a)] ?? 5) - (COLOR_ORDER[toStateColor(b)] ?? 5))
-      .map(([state, count]) => ({
-        stateDisplay:     state?.charAt(0).toUpperCase() + state?.slice(1),
-        stateId:          state,
-        stateSimpleColor: toStateColor(state),
-        count,
-      }));
-
-    return {
-      title: w.label,
-      type:  w.type,
-      resources,
-    };
-  });
-});
-
-function resetNamespaceFilter(): void {
-  store.dispatch('switchNamespaces', {
-    ids: [],
-    key: store.getters['clusterId'],
-  });
-}
-
-function resourceRoute(type: string, stateNames?: string[]): RouteLocationRaw {
-  const loc: RouteLocationRaw = {
-    name:   'c-cluster-product-resource',
-    params: {
-      cluster:  clusterId.value,
-      product:  'explorer',
-      resource: type,
-    },
-  };
-
-  if (stateNames?.length) {
-    const q = stateNames.map((s) => `"metadata.state.name":"${ s }"`).join(',');
-
-    (loc as any).query = { q };
-  }
-
-  return loc;
-}
-
-async function resolveStateColors(entries: SummaryEntry[]): Promise<void> {
-  const unresolvedStates = new Map<string, { originalName: string; type: string }>();
-
-  for (const entry of entries) {
-    if (!entry.summary) {
-      continue;
-    }
-
-    for (const s of entry.summary) {
-      if (s.property === 'metadata.state.name') {
-        for (const stateName of Object.keys(s.counts)) {
-          const key = stateName.toLowerCase();
-
-          if (!stateColorMap.value[key] && !unresolvedStates.has(key)) {
-            unresolvedStates.set(key, { originalName: stateName, type: entry.type });
-          }
-        }
-      }
-    }
-  }
-
-  if (unresolvedStates.size === 0) {
-    return;
-  }
-
-  const newColors: Record<string, StateColor> = {};
-  const pending = Array.from(unresolvedStates.entries());
-  const concurrency = 10;
-
-  for (let i = 0; i < pending.length; i += concurrency) {
-    const batch = pending.slice(i, i + concurrency);
-
-    await Promise.all(batch.map(async([stateKey, { originalName, type }]) => {
-      try {
-        const url = `/v1/${ type }?limit=1&filter=metadata.state.name=${ originalName }`;
-        const res = await store.dispatch('cluster/request', { url });
-        const resource = res?.data?.[0];
-
-        if (!resource?.metadata?.state) {
-          return;
-        }
-
-        const { error: isError, transitioning, name } = resource.metadata.state;
-        const rawColor = colorForState(name, isError, transitioning).replace('text-', '');
-
-        newColors[stateKey] = (rawColor === 'darker' ? 'disabled' : rawColor) as StateColor;
-      } catch {
-        // Fallback handled by toStateColor via STATES lookup
-      }
-    }));
-  }
-
-  if (Object.keys(newColors).length > 0) {
-    saveStateColorMap(newColors);
-  }
-}
-
-async function fetchSummaries(): Promise<void> {
-  try {
-    const workloadPromises = WORKLOAD_RESOURCE_TYPES.map(async(type): Promise<SummaryEntry> => {
-      const schema = store.getters['cluster/schemaFor'](type);
-
-      if (!schema) {
-        return {
-          type, summary: null, error: t('workloadDashboard.errors.noAccess', { type })
-        };
-      }
-
-      try {
-        let url = `${ schema.links.collection }?summary=metadata.state.name`;
-
-        if (namespaceFilterParam.value) {
-          url += `&${ namespaceFilterParam.value }`;
-        }
-
-        const res = await store.dispatch('cluster/request', { url });
-
-        return {
-          type, summary: res.summary || [], error: null
-        };
-      } catch (e: any) {
-        return {
-          type, summary: null, error: e.message || t('workloadDashboard.errors.fetchType', { type })
-        };
-      }
-    });
-
-    const results = await Promise.all(workloadPromises);
-
-    await resolveStateColors(results);
-    summaries.value = results;
-    fetchError.value = null;
-  } catch (e: any) {
-    fetchError.value = e.message || t('workloadDashboard.errors.fetchAll');
-  }
-}
-
-function resetPollTimer(): void {
-  if (pollTimer) {
-    clearInterval(pollTimer);
-  }
-
-  pollTimer = setInterval(() => {
-    fetchSummaries();
-  }, 5000);
-}
-
-watch(namespaceFilterParam, () => {
-  fetchSummaries();
-  resetPollTimer();
-});
-
-onMounted(async() => {
-  await fetchSummaries();
-  loading.value = false;
-  resetPollTimer();
-});
-
-onBeforeUnmount(() => {
-  if (pollTimer) {
-    clearInterval(pollTimer);
-  }
-});
+const {
+  loading,
+  fetchError,
+  hasWorkloads,
+  namespaceSubtitle,
+  byStateLayout,
+  byTypeCards,
+  resetNamespaceFilter,
+  resourceRoute,
+} = useWorkloadDashboard();
 </script>
 
 <template>
@@ -522,60 +86,16 @@ onBeforeUnmount(() => {
           </div>
         </div>
       </header>
+
       <!-- ━━━ By State ━━━ -->
       <div class="section">
         <h4 class="m-0 text-muted">
           {{ t('workloadDashboard.sections.byState') }}
         </h4>
-        <div
-          class="bento-grid"
-          :class="{ 'bento-grid--has-sub-hero': !!byStateLayout.subHero }"
-          :style="{ 'grid-template-rows': 'repeat(' + byStateLayout.gridRows + ', ' + (byStateLayout.subHero ? '1fr' : 'auto') + ')' }"
-        >
-          <Card
-            v-for="card in byStateLayout.cards"
-            :key="card.color"
-            class="state-card"
-            :class="'state-card--' + card.color"
-          >
-            <ResourceRow
-              v-for="(row, idx) in card.rows"
-              :key="idx"
-              :label="row.label"
-              :to="resourceRoute(row.type, row.stateNames)"
-              :color="row.color"
-              :counts="row.counts"
-            />
-          </Card>
-          <Card
-            v-if="byStateLayout.subHero"
-            class="state-card bento-sub-hero"
-            :class="'state-card--' + byStateLayout.subHero.color"
-          >
-            <ResourceRow
-              v-for="(row, idx) in byStateLayout.subHero.rows"
-              :key="idx"
-              :label="row.label"
-              :to="resourceRoute(row.type, row.stateNames)"
-              :color="row.color"
-              :counts="row.counts"
-            />
-          </Card>
-          <Card
-            v-if="byStateLayout.hero"
-            class="state-card bento-hero"
-            :class="['state-card--' + byStateLayout.hero.color, 'bento-hero--' + byStateLayout.heroMode]"
-          >
-            <ResourceRow
-              v-for="(row, idx) in byStateLayout.hero.rows"
-              :key="idx"
-              :label="row.label"
-              :to="resourceRoute(row.type, row.stateNames)"
-              :color="row.color"
-              :counts="row.counts"
-            />
-          </Card>
-        </div>
+        <ByStateSection
+          :layout="byStateLayout"
+          :resource-route="resourceRoute"
+        />
       </div>
 
       <!-- ━━━ By Type ━━━ -->
@@ -583,17 +103,10 @@ onBeforeUnmount(() => {
         <h4 class="m-0 text-muted">
           {{ t('workloadDashboard.sections.byType') }}
         </h4>
-        <div class="card-grid">
-          <StatusCard
-            v-for="card in byTypeCards"
-            :key="card.title"
-            :title="card.title"
-            :to="resourceRoute(card.type)"
-            :row-to="resourceRoute(card.type)"
-            :resources="card.resources"
-            :show-percent="false"
-          />
-        </div>
+        <ByTypeSection
+          :cards="byTypeCards"
+          :resource-route="resourceRoute"
+        />
       </div>
     </template>
   </div>
@@ -642,12 +155,6 @@ onBeforeUnmount(() => {
     }
   }
 
-  .card-grid {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    gap: 15px;
-  }
-
   :deep(.state-card) {
     .body {
       display: flex;
@@ -655,75 +162,5 @@ onBeforeUnmount(() => {
       gap: 4px;
     }
   }
-
-  .bento-grid {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    grid-auto-flow: dense;
-    gap: 15px;
-
-    .bento-hero {
-      grid-column: 3;
-      grid-row: 1 / -1;
-
-      &--full {
-        grid-column: 1 / -1;
-
-        :deep(.body) {
-          display: grid;
-          grid-template-columns: repeat(3, 1fr);
-          gap: 4px 48px;
-        }
-      }
-
-      &--wide {
-        grid-column: 2 / -1;
-
-        :deep(.body) {
-          display: grid;
-          grid-template-columns: repeat(2, 1fr);
-          gap: 4px 48px;
-        }
-      }
-    }
-
-    .bento-sub-hero {
-      grid-column: 2;
-      grid-row: 1 / -1;
-    }
-
-    .bento-grid--has-sub-hero {
-      .state-card:not(.bento-hero):not(.bento-sub-hero) {
-        grid-column: 1;
-      }
-    }
-
-    .state-card {
-      border: 0;
-      :deep(.resource-row) {
-        position: relative;
-        padding-left: 20px;
-        line-height: 21px;
-        height: 24px;
-
-        .left {
-          flex-grow: 1;
-        }
-
-        .right .counts .state-dot {
-          position: absolute;
-          left: 0;
-          top: 50%;
-          transform: translateY(-50%);
-        }
-      }
-
-      @each $color in (error, warning, info, success, disabled) {
-        &--#{$color} {
-          background: var(--#{$color}-banner-bg, rgba(var(--#{$color}-rgb), 0.1));
-        }
-      }
-    }
-  }
 }
 </style>
diff --git a/shell/pages/c/_cluster/explorer/workload-dashboard/ByStateSection.vue b/shell/pages/c/_cluster/explorer/workload-dashboard/ByStateSection.vue
new file mode 100644
index 00000000000..7f7bf0bce58
--- /dev/null
+++ b/shell/pages/c/_cluster/explorer/workload-dashboard/ByStateSection.vue
@@ -0,0 +1,134 @@
+<script setup lang="ts">
+import Card from '@shell/components/Resource/Detail/Card/index.vue';
+import ResourceRow from '@shell/components/Resource/Detail/ResourceRow.vue';
+import type { ByStateLayout, ResourceRouteFn } from './types';
+
+defineProps<{
+  layout: ByStateLayout;
+  resourceRoute: ResourceRouteFn;
+}>();
+</script>
+
+<template>
+  <div
+    class="bento-grid"
+    :class="{ 'bento-grid--has-sub-hero': !!layout.subHero }"
+    :style="{ 'grid-template-rows': 'repeat(' + layout.gridRows + ', ' + (layout.subHero ? '1fr' : 'auto') + ')' }"
+  >
+    <Card
+      v-for="card in layout.cards"
+      :key="card.color"
+      class="state-card"
+      :class="'state-card--' + card.color"
+    >
+      <ResourceRow
+        v-for="(row, idx) in card.rows"
+        :key="idx"
+        :label="row.label"
+        :to="resourceRoute(row.type, row.stateNames)"
+        :color="row.color"
+        :counts="row.counts"
+      />
+    </Card>
+    <Card
+      v-if="layout.subHero"
+      class="state-card bento-sub-hero"
+      :class="'state-card--' + layout.subHero.color"
+    >
+      <ResourceRow
+        v-for="(row, idx) in layout.subHero.rows"
+        :key="idx"
+        :label="row.label"
+        :to="resourceRoute(row.type, row.stateNames)"
+        :color="row.color"
+        :counts="row.counts"
+      />
+    </Card>
+    <Card
+      v-if="layout.hero"
+      class="state-card bento-hero"
+      :class="['state-card--' + layout.hero.color, 'bento-hero--' + layout.heroMode]"
+    >
+      <ResourceRow
+        v-for="(row, idx) in layout.hero.rows"
+        :key="idx"
+        :label="row.label"
+        :to="resourceRoute(row.type, row.stateNames)"
+        :color="row.color"
+        :counts="row.counts"
+      />
+    </Card>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.bento-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-flow: dense;
+  gap: 15px;
+
+  .bento-hero {
+    grid-column: 3;
+    grid-row: 1 / -1;
+
+    &--full {
+      grid-column: 1 / -1;
+
+      :deep(.body) {
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        gap: 4px 48px;
+      }
+    }
+
+    &--wide {
+      grid-column: 2 / -1;
+
+      :deep(.body) {
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+        gap: 4px 48px;
+      }
+    }
+  }
+
+  .bento-sub-hero {
+    grid-column: 2;
+    grid-row: 1 / -1;
+  }
+
+  .bento-grid--has-sub-hero {
+    .state-card:not(.bento-hero):not(.bento-sub-hero) {
+      grid-column: 1;
+    }
+  }
+
+  .state-card {
+    border: 0;
+    :deep(.resource-row) {
+      position: relative;
+      padding-left: 20px;
+      line-height: 21px;
+      height: 24px;
+
+      .left {
+        flex-grow: 1;
+      }
+
+      .right .counts .state-dot {
+        position: absolute;
+        left: 0;
+        top: 50%;
+        transform: translateY(-50%);
+      }
+    }
+
+    @each $color in (error, warning, info, success, disabled) {
+      &--#{$color} {
+        background: var(--#{$color}-banner-bg, rgba(var(--#{$color}-rgb), 0.1));
+      }
+    }
+  }
+}
+</style>
diff --git a/shell/pages/c/_cluster/explorer/workload-dashboard/ByTypeSection.vue b/shell/pages/c/_cluster/explorer/workload-dashboard/ByTypeSection.vue
new file mode 100644
index 00000000000..ddf25d53c4d
--- /dev/null
+++ b/shell/pages/c/_cluster/explorer/workload-dashboard/ByTypeSection.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import StatusCard from '@shell/components/Resource/Detail/Card/StatusCard/index.vue';
+import type { ByTypeCard, ResourceRouteFn } from './types';
+
+defineProps<{
+  cards: ByTypeCard[];
+  resourceRoute: ResourceRouteFn;
+}>();
+</script>
+
+<template>
+  <div class="card-grid">
+    <StatusCard
+      v-for="card in cards"
+      :key="card.title"
+      :title="card.title"
+      :to="resourceRoute(card.type)"
+      :row-to="resourceRoute(card.type)"
+      :resources="card.resources"
+      :show-percent="false"
+    />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.card-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 15px;
+}
+</style>
diff --git a/shell/pages/c/_cluster/explorer/workload-dashboard/composable.ts b/shell/pages/c/_cluster/explorer/workload-dashboard/composable.ts
new file mode 100644
index 00000000000..70c6b3e864f
--- /dev/null
+++ b/shell/pages/c/_cluster/explorer/workload-dashboard/composable.ts
@@ -0,0 +1,445 @@
+import {
+  ref, computed, watch, onMounted, onBeforeUnmount
+} from 'vue';
+import { useStore } from 'vuex';
+import type { RouteLocationRaw } from 'vue-router';
+import { NAMESPACE } from '@shell/config/types';
+import { STATES, colorForState } from '@shell/plugins/dashboard-store/resource-class';
+import { StateColor } from '@shell/utils/style';
+import { useI18n } from '@shell/composables/useI18n';
+import { STATE_COLOR_MAP, ALL_NAMESPACES } from '@shell/store/prefs';
+import pAndNFiltering from '@shell/plugins/steve/projectAndNamespaceFiltering.utils';
+import {
+  NAMESPACE_FILTER_ALL_USER,
+  NAMESPACE_FILTER_ALL_SYSTEM,
+  NAMESPACE_FILTER_P_FULL_PREFIX,
+  NAMESPACE_FILTER_NS_FULL_PREFIX,
+} from '@shell/utils/namespace-filter';
+import stevePaginationUtils from '@shell/plugins/steve/steve-pagination-utils';
+import { PaginationFilterEquality } from '@shell/types/store/pagination.types';
+import {
+  WORKLOAD_RESOURCE_TYPES, COLOR_ORDER,
+  type SummaryEntry, type WorkloadEntry, type StateCard, type ByStateLayout, type ByTypeCard,
+} from './types';
+
+export function useWorkloadDashboard() {
+  const store = useStore();
+  const { t } = useI18n(store);
+
+  const summaries = ref<SummaryEntry[]>([]);
+  const fetchError = ref<string | null>(null);
+  const loading = ref(true);
+  let pollTimer: ReturnType<typeof setInterval> | null = null;
+
+  const clusterId = computed<string>(() => store.getters['clusterId']);
+
+  // ── State color cache ──
+
+  const stateColorMap = computed<Record<string, StateColor>>(() => {
+    const all = store.getters['prefs/get'](STATE_COLOR_MAP) || {};
+
+    return all[clusterId.value] || {};
+  });
+
+  function saveStateColorMap(updates: Record<string, StateColor>): void {
+    const all = store.getters['prefs/get'](STATE_COLOR_MAP) || {};
+    const current = all[clusterId.value] || {};
+
+    store.dispatch('prefs/set', {
+      key:   STATE_COLOR_MAP,
+      value: { ...all, [clusterId.value]: { ...current, ...updates } },
+    });
+  }
+
+  function toStateColor(state: string): StateColor {
+    const key = (state || '').toLowerCase();
+    const cached = stateColorMap.value[key];
+
+    if (cached) {
+      return cached;
+    }
+
+    const config = STATES[key];
+    const color = config?.color || 'info';
+
+    return (color === 'darker' ? 'disabled' : color) as StateColor;
+  }
+
+  // ── Namespace filtering ──
+
+  const isAllNamespaces = computed<boolean>(() => store.getters['isAllNamespaces']);
+
+  const namespaceFilterParam = computed<string>(() => {
+    const selection: string[] = store.getters['namespaceFilters'];
+    const { projectsOrNamespaces, filters } = stevePaginationUtils.createParamsFromNsFilter({
+      allNamespaces:                 store.getters['cluster/all'](NAMESPACE),
+      selection,
+      isAllNamespaces:               isAllNamespaces.value,
+      isLocalCluster:                store.getters['currentCluster']?.isLocal,
+      showReservedRancherNamespaces: store.getters['prefs/get'](ALL_NAMESPACES),
+      productHidesSystemNamespaces:  store.getters['currentProduct']?.hideSystemResources,
+    });
+
+    const parts: string[] = [];
+
+    const nsValues = projectsOrNamespaces.flatMap((p) => p.fields.map((f) => f.value || ''));
+    const pAndN = pAndNFiltering.createParam(nsValues);
+
+    if (pAndN) {
+      parts.push(pAndN);
+    }
+
+    for (const f of filters) {
+      for (const field of f.fields) {
+        const equality = field.equality || '=';
+        const val = [PaginationFilterEquality.IN, PaginationFilterEquality.NOT_IN].includes(equality as PaginationFilterEquality) ? `(${ field.value })` : field.value;
+
+        parts.push(`filter=${ field.field }${ equality }${ val }`);
+      }
+    }
+
+    return parts.join('&');
+  });
+
+  // ── Subtitle ──
+
+  const namespaceMode = computed<string>(() => store.getters['namespaceMode']);
+
+  const totalWorkloads = computed<number>(() => {
+    return workloadData.value.reduce((sum, w) => sum + (w.error ? 0 : w.total), 0);
+  });
+
+  const namespaceSubtitle = computed<string>(() => {
+    const count = totalWorkloads.value;
+    const filters: string[] = store.getters['namespaceFilters'];
+
+    if (namespaceMode.value === 'namespaced') {
+      return t('workloadDashboard.subtitle.namespacedOnly', { count });
+    }
+
+    if (namespaceMode.value === 'cluster') {
+      return t('workloadDashboard.subtitle.clusterOnly', { count });
+    }
+
+    if (isAllNamespaces.value) {
+      return t('workloadDashboard.subtitle.allNamespaces', { count });
+    }
+
+    if (filters.length === 1) {
+      const filter = filters[0];
+
+      if (filter === NAMESPACE_FILTER_ALL_USER) {
+        return t('workloadDashboard.subtitle.userNamespaces', { count });
+      }
+
+      if (filter === NAMESPACE_FILTER_ALL_SYSTEM) {
+        return t('workloadDashboard.subtitle.systemNamespaces', { count });
+      }
+
+      if (filter.startsWith(NAMESPACE_FILTER_P_FULL_PREFIX)) {
+        const projectId = filter.replace(NAMESPACE_FILTER_P_FULL_PREFIX, '');
+        const projects = store.getters['management/all']('management.cattle.io.project');
+        const project = projects.find((p: any) => p.id?.endsWith(`/${ projectId }`) || p.metadata?.name === projectId);
+
+        return t('workloadDashboard.subtitle.project', { name: project?.nameDisplay || projectId, count });
+      }
+
+      if (filter.startsWith(NAMESPACE_FILTER_NS_FULL_PREFIX)) {
+        const name = filter.replace(NAMESPACE_FILTER_NS_FULL_PREFIX, '');
+
+        return t('workloadDashboard.subtitle.namespace', { name, count });
+      }
+    }
+
+    return t('workloadDashboard.subtitle.multipleSelected', { selected: filters.length, count });
+  });
+
+  // ── Workload data ──
+
+  const workloadData = computed<WorkloadEntry[]>(() => {
+    return summaries.value.map((entry) => {
+      const label = t(`typeLabel."${ entry.type }"`, { count: 2 })?.trim() || entry.type;
+      const stateCounts: Record<string, number> = {};
+      let total = 0;
+
+      if (entry.summary) {
+        for (const s of entry.summary) {
+          if (s.property === 'metadata.state.name') {
+            Object.assign(stateCounts, s.counts);
+            total = Object.values(s.counts).reduce((sum, c) => sum + c, 0);
+          }
+        }
+      }
+
+      return {
+        type:  entry.type,
+        label,
+        total,
+        stateCounts,
+        error: entry.error,
+      };
+    });
+  });
+
+  const hasWorkloads = computed<boolean>(() => {
+    return workloadData.value.some((w) => !w.error && w.total > 0);
+  });
+
+  // ── By State cards ──
+
+  const byStateCards = computed<StateCard[]>(() => {
+    const colorGroups: Record<string, Record<string, { count: number; type: string; stateNames: Set<string> }>> = {
+      error:    {},
+      warning:  {},
+      info:     {},
+      success:  {},
+      disabled: {},
+    };
+
+    for (const w of workloadData.value) {
+      if (w.error || w.total === 0) {
+        continue;
+      }
+
+      for (const [state, count] of Object.entries(w.stateCounts)) {
+        const color = toStateColor(state);
+
+        if (!colorGroups[color][w.label]) {
+          colorGroups[color][w.label] = {
+            count: 0, type: w.type, stateNames: new Set()
+          };
+        }
+        colorGroups[color][w.label].count += count;
+        colorGroups[color][w.label].stateNames.add(state);
+      }
+    }
+
+    return Object.entries(colorGroups)
+      .filter(([, typeMap]) => Object.keys(typeMap).length > 0)
+      .map(([color, typeMap]) => ({
+        color: color as StateColor,
+        rows:  Object.entries(typeMap).map(([label, { count, type, stateNames }]) => ({
+          label,
+          color:      color as StateColor,
+          type,
+          stateNames: Array.from(stateNames),
+          counts:     [{ label: '', count }],
+        })),
+      }));
+  });
+
+  const byStateLayout = computed<ByStateLayout>(() => {
+    const cards = byStateCards.value;
+    const hero = cards.find((c) => c.color === 'success') || null;
+    const others = cards.filter((c) => c !== hero);
+
+    let heroMode = 'default';
+
+    if (cards.length === 1) {
+      heroMode = 'full';
+    } else if (others.length === 1) {
+      heroMode = 'wide';
+    }
+
+    const subHero = (hero && others.length >= 3) ? others.find((c) => c.color === 'info') || null : null;
+
+    const regularCards = subHero ? others.filter((c) => c !== subHero) : others;
+    const gridRows = subHero ? Math.max(1, regularCards.length) : Math.max(1, Math.ceil(regularCards.length / 2));
+
+    return {
+      hero,
+      subHero,
+      cards: regularCards,
+      heroMode,
+      gridRows,
+    };
+  });
+
+  // ── By Type cards ──
+
+  const byTypeCards = computed<ByTypeCard[]>(() => {
+    return workloadData.value.filter((w) => !w.error && w.total > 0).map((w) => {
+      const resources = Object.entries(w.stateCounts)
+        .sort(([a], [b]) => (COLOR_ORDER[toStateColor(a)] ?? 5) - (COLOR_ORDER[toStateColor(b)] ?? 5))
+        .map(([state, count]) => ({
+          stateDisplay:     state?.charAt(0).toUpperCase() + state?.slice(1),
+          stateId:          state,
+          stateSimpleColor: toStateColor(state),
+          count,
+        }));
+
+      return {
+        title: w.label,
+        type:  w.type,
+        resources,
+      };
+    });
+  });
+
+  // ── Actions ──
+
+  function resetNamespaceFilter(): void {
+    store.dispatch('switchNamespaces', {
+      ids: [],
+      key: store.getters['clusterId'],
+    });
+  }
+
+  function resourceRoute(type: string, stateNames?: string[]): RouteLocationRaw {
+    const loc: RouteLocationRaw = {
+      name:   'c-cluster-product-resource',
+      params: {
+        cluster:  clusterId.value,
+        product:  'explorer',
+        resource: type,
+      },
+    };
+
+    if (stateNames?.length) {
+      const q = stateNames.map((s) => `"metadata.state.name":"${ s }"`).join(',');
+
+      (loc as any).query = { q };
+    }
+
+    return loc;
+  }
+
+  // ── State color resolution ──
+
+  async function resolveStateColors(entries: SummaryEntry[]): Promise<void> {
+    const unresolvedStates = new Map<string, { originalName: string; type: string }>();
+
+    for (const entry of entries) {
+      if (!entry.summary) {
+        continue;
+      }
+
+      for (const s of entry.summary) {
+        if (s.property === 'metadata.state.name') {
+          for (const stateName of Object.keys(s.counts)) {
+            const key = stateName.toLowerCase();
+
+            if (!stateColorMap.value[key] && !unresolvedStates.has(key)) {
+              unresolvedStates.set(key, { originalName: stateName, type: entry.type });
+            }
+          }
+        }
+      }
+    }
+
+    if (unresolvedStates.size === 0) {
+      return;
+    }
+
+    const newColors: Record<string, StateColor> = {};
+    const pending = Array.from(unresolvedStates.entries());
+    const concurrency = 10;
+
+    for (let i = 0; i < pending.length; i += concurrency) {
+      const batch = pending.slice(i, i + concurrency);
+
+      await Promise.all(batch.map(async([stateKey, { originalName, type }]) => {
+        try {
+          const url = `/v1/${ type }?limit=1&filter=metadata.state.name=${ originalName }`;
+          const res = await store.dispatch('cluster/request', { url });
+          const resource = res?.data?.[0];
+
+          if (!resource?.metadata?.state) {
+            return;
+          }
+
+          const { error: isError, transitioning, name } = resource.metadata.state;
+          const rawColor = colorForState(name, isError, transitioning).replace('text-', '');
+
+          newColors[stateKey] = (rawColor === 'darker' ? 'disabled' : rawColor) as StateColor;
+        } catch {
+          // Fallback handled by toStateColor via STATES lookup
+        }
+      }));
+    }
+
+    if (Object.keys(newColors).length > 0) {
+      saveStateColorMap(newColors);
+    }
+  }
+
+  // ── Fetching & polling ──
+
+  async function fetchSummaries(): Promise<void> {
+    try {
+      const workloadPromises = WORKLOAD_RESOURCE_TYPES.map(async(type): Promise<SummaryEntry> => {
+        const schema = store.getters['cluster/schemaFor'](type);
+
+        if (!schema) {
+          return {
+            type, summary: null, error: t('workloadDashboard.errors.noAccess', { type })
+          };
+        }
+
+        try {
+          let url = `${ schema.links.collection }?summary=metadata.state.name`;
+
+          if (namespaceFilterParam.value) {
+            url += `&${ namespaceFilterParam.value }`;
+          }
+
+          const res = await store.dispatch('cluster/request', { url });
+
+          return {
+            type, summary: res.summary || [], error: null
+          };
+        } catch (e: any) {
+          return {
+            type, summary: null, error: e.message || t('workloadDashboard.errors.fetchType', { type })
+          };
+        }
+      });
+
+      const results = await Promise.all(workloadPromises);
+
+      await resolveStateColors(results);
+      summaries.value = results;
+      fetchError.value = null;
+    } catch (e: any) {
+      fetchError.value = e.message || t('workloadDashboard.errors.fetchAll');
+    }
+  }
+
+  function resetPollTimer(): void {
+    if (pollTimer) {
+      clearInterval(pollTimer);
+    }
+
+    pollTimer = setInterval(() => {
+      fetchSummaries();
+    }, 5000);
+  }
+
+  watch(namespaceFilterParam, () => {
+    fetchSummaries();
+    resetPollTimer();
+  });
+
+  onMounted(async() => {
+    await fetchSummaries();
+    loading.value = false;
+    resetPollTimer();
+  });
+
+  onBeforeUnmount(() => {
+    if (pollTimer) {
+      clearInterval(pollTimer);
+    }
+  });
+
+  return {
+    loading,
+    fetchError,
+    hasWorkloads,
+    namespaceSubtitle,
+    byStateLayout,
+    byTypeCards,
+    resetNamespaceFilter,
+    resourceRoute,
+  };
+}
diff --git a/shell/pages/c/_cluster/explorer/workload-dashboard/types.ts b/shell/pages/c/_cluster/explorer/workload-dashboard/types.ts
new file mode 100644
index 00000000000..b07edf83584
--- /dev/null
+++ b/shell/pages/c/_cluster/explorer/workload-dashboard/types.ts
@@ -0,0 +1,64 @@
+import { WORKLOAD_TYPES, POD } from '@shell/config/types';
+import { StateColor } from '@shell/utils/style';
+import type { RouteLocationRaw } from 'vue-router';
+
+export interface SummaryEntry {
+  type: string;
+  summary: { property: string; counts: Record<string, number> }[] | null;
+  error: string | null;
+}
+
+export interface WorkloadEntry {
+  type: string;
+  label: string;
+  total: number;
+  stateCounts: Record<string, number>;
+  error: string | null;
+}
+
+export interface StateCardRow {
+  label: string;
+  color: StateColor;
+  type: string;
+  stateNames: string[];
+  counts: { label: string; count: number }[];
+}
+
+export interface StateCard {
+  color: StateColor;
+  rows: StateCardRow[];
+}
+
+export interface ByStateLayout {
+  hero: StateCard | null;
+  subHero: StateCard | null;
+  cards: StateCard[];
+  heroMode: string;
+  gridRows: number;
+}
+
+export interface ByTypeCard {
+  title: string;
+  type: string;
+  resources: {
+    stateDisplay: string;
+    stateId: string;
+    stateSimpleColor: StateColor;
+    count: number;
+  }[];
+}
+
+export type ResourceRouteFn = (type: string, stateNames?: string[]) => RouteLocationRaw;
+
+export const WORKLOAD_RESOURCE_TYPES: string[] = [
+  WORKLOAD_TYPES.CRON_JOB,
+  WORKLOAD_TYPES.DAEMON_SET,
+  WORKLOAD_TYPES.DEPLOYMENT,
+  WORKLOAD_TYPES.JOB,
+  WORKLOAD_TYPES.STATEFUL_SET,
+  POD,
+];
+
+export const COLOR_ORDER: Record<string, number> = {
+  error: 0, warning: 1, disabled: 2, info: 3, success: 4
+};

From f1f339cc62524e596575266ebfdcdedfcb9b8242 Mon Sep 17 00:00:00 2001
From: Marcelo Fukumoto <marcelo.fukumoto@suse.com>
Date: Thu, 21 May 2026 23:43:57 +0200
Subject: [PATCH 15/28] Added unit tests

---
 .../Detail/Card/__tests__/Card.test.ts        |  92 +++-
 .../Detail/Card/__tests__/PodsCard.test.ts    | 110 ++++-
 .../resource-fetch-api-pagination.test.ts     |  67 +++
 shell/mixins/resource-fetch-api-pagination.js |   2 +-
 .../__tests__/composable.test.ts              | 401 ++++++++++++++++++
 5 files changed, 649 insertions(+), 23 deletions(-)
 create mode 100644 shell/mixins/__tests__/resource-fetch-api-pagination.test.ts
 create mode 100644 shell/pages/c/_cluster/explorer/workload-dashboard/__tests__/composable.test.ts

diff --git a/shell/components/Resource/Detail/Card/__tests__/Card.test.ts b/shell/components/Resource/Detail/Card/__tests__/Card.test.ts
index f1d40f384f0..ef3d4efeb32 100644
--- a/shell/components/Resource/Detail/Card/__tests__/Card.test.ts
+++ b/shell/components/Resource/Detail/Card/__tests__/Card.test.ts
@@ -1,36 +1,104 @@
-import { mount } from '@vue/test-utils';
+import { shallowMount } from '@vue/test-utils';
 import Card from '@shell/components/Resource/Detail/Card/index.vue';
 
+const mockPush = jest.fn();
+
+jest.mock('vue-router', () => ({ useRouter: () => ({ push: mockPush }) }));
+
 describe('component: Card/index', () => {
-  it('should render title and default slot', async() => {
+  it('should render title and default slot', () => {
     const title = 'title';
     const content = 'content';
-    const wrapper = mount(Card, { props: { title }, slots: { default: content } });
+    const wrapper = shallowMount(Card, { props: { title }, slots: { default: content } });
 
-    expect(wrapper.find('.title').element.innerHTML).toStrictEqual(title);
+    expect(wrapper.find('.title').text()).toStrictEqual(title);
   });
 
-  it('should allow you to override the heading with slot', async() => {
+  it('should allow you to override the heading with slot', () => {
     const title = 'title';
     const content = 'content';
-    const wrapper = mount(Card, { props: { title }, slots: { heading: content } });
+    const wrapper = shallowMount(Card, { props: { title }, slots: { heading: content } });
 
     expect(wrapper.find('.title').exists()).toBeFalsy();
-    expect(wrapper.find('.heading').element.innerHTML).toStrictEqual(content);
+    expect(wrapper.find('.heading').text()).toStrictEqual(content);
   });
 
-  it('should allow you to override the title with slot', async() => {
+  it('should allow you to override the title with slot', () => {
     const title = 'title';
     const content = 'content';
-    const wrapper = mount(Card, { props: { title }, slots: { title: content } });
+    const wrapper = shallowMount(Card, { props: { title }, slots: { title: content } });
 
-    expect(wrapper.find('.title').element.innerHTML).toStrictEqual(content);
+    expect(wrapper.find('.title').text()).toStrictEqual(content);
   });
 
-  it('should allow you to insert heading-action with slot', async() => {
+  it('should allow you to insert heading-action with slot', () => {
     const content = '<div id="test">content</div>';
-    const wrapper = mount(Card, { slots: { 'heading-action': content } });
+    const wrapper = shallowMount(Card, { slots: { 'heading-action': content } });
 
     expect(wrapper.find('.heading #test').exists()).toBeTruthy();
   });
+
+  it('should hide heading when no title or heading slots are provided', () => {
+    const wrapper = shallowMount(Card, { slots: { default: 'body' } });
+
+    expect(wrapper.find('.heading').exists()).toBeFalsy();
+  });
+
+  describe('click navigation', () => {
+    const to = { name: 'test-route', params: { id: '1' } };
+
+    beforeEach(() => {
+      mockPush.mockClear();
+    });
+
+    it('should navigate when card body is clicked and to prop is set', async() => {
+      const wrapper = shallowMount(Card, { props: { to }, slots: { default: '<span>content</span>' } });
+
+      await wrapper.find('.body span').trigger('click');
+
+      expect(mockPush).toHaveBeenCalledWith(to);
+    });
+
+    it('should not navigate when no to prop is set', async() => {
+      const wrapper = shallowMount(Card, { props: { title: 'test' }, slots: { default: '<span>content</span>' } });
+
+      await wrapper.find('.body span').trigger('click');
+
+      expect(mockPush).not.toHaveBeenCalled();
+    });
+
+    it('should not navigate when clicking on a child anchor element', async() => {
+      const wrapper = shallowMount(Card, {
+        props: { to },
+        slots: { default: '<a href="#" class="inner-link">link</a>' },
+      });
+
+      await wrapper.find('.inner-link').trigger('click');
+
+      expect(mockPush).not.toHaveBeenCalled();
+    });
+
+    it('should not navigate when clicking on a child button element', async() => {
+      const wrapper = shallowMount(Card, {
+        props: { to },
+        slots: { default: '<button class="inner-btn">btn</button>' },
+      });
+
+      await wrapper.find('.inner-btn').trigger('click');
+
+      expect(mockPush).not.toHaveBeenCalled();
+    });
+
+    it('should add clickable class when to prop is set', () => {
+      const wrapper = shallowMount(Card, { props: { to }, slots: { default: 'body' } });
+
+      expect(wrapper.find('.detail-card').classes()).toContain('clickable');
+    });
+
+    it('should not add clickable class when to prop is not set', () => {
+      const wrapper = shallowMount(Card, { slots: { default: 'body' } });
+
+      expect(wrapper.find('.detail-card').classes()).not.toContain('clickable');
+    });
+  });
 });
diff --git a/shell/components/Resource/Detail/Card/__tests__/PodsCard.test.ts b/shell/components/Resource/Detail/Card/__tests__/PodsCard.test.ts
index 4e8b405583a..3a369304da0 100644
--- a/shell/components/Resource/Detail/Card/__tests__/PodsCard.test.ts
+++ b/shell/components/Resource/Detail/Card/__tests__/PodsCard.test.ts
@@ -12,7 +12,7 @@ describe('component: PodsCard', () => {
   const podSuccess = { stateSimpleColor: 'success', stateDisplay: 'Completed' };
   const podFail = { stateSimpleColor: 'error', stateDisplay: 'Error' };
 
-  it('should pass title to Card prop correctly', async() => {
+  it('should pass title to Card prop correctly', () => {
     const title = 'component.resource.detail.card.podsCard.title';
     const wrapper = mount(PodsCard, { props: { title, showScaling: true }, global: { provide: { store } } });
 
@@ -21,19 +21,19 @@ describe('component: PodsCard', () => {
     expect(card.props('title')).toStrictEqual(title);
   });
 
-  it('should show Scaler when showScaling is true', async() => {
-    const wrapper = mount(PodsCard, { props: { showScaling: true }, global: { provide: { store } } });
+  it('should show Scaler when showScaling is true', () => {
+    const wrapper = mount(PodsCard, { props: { title: 'Test', showScaling: true }, global: { provide: { store } } });
 
-    expect(wrapper.find('.scaler').exists()).toBeTruthy();
+    expect(wrapper.findComponent(Scaler).exists()).toBeTruthy();
   });
 
-  it('should hide scaler when showScaling is false', async() => {
-    const wrapper = mount(PodsCard, { props: { showScaling: false }, global: { provide: { store } } });
+  it('should hide scaler when showScaling is false', () => {
+    const wrapper = mount(PodsCard, { props: { title: 'Test', showScaling: false }, global: { provide: { store } } });
 
-    expect(wrapper.find('.scaler').exists()).toBeFalsy();
+    expect(wrapper.findComponent(Scaler).exists()).toBeFalsy();
   });
 
-  it('should pass the appropriate props to the Scaler component', async() => {
+  it('should pass the appropriate props to the Scaler component', () => {
     const wrapper = mount(PodsCard, {
       props: {
         title: 'Test', showScaling: true, resources: [podSuccess]
@@ -46,7 +46,7 @@ describe('component: PodsCard', () => {
     expect(scaler.props('min')).toStrictEqual(0);
   });
 
-  it('should pass the appropriate props to the StatusBar component based on the resources input', async() => {
+  it('should pass the appropriate props to the StatusBar component based on the resources input', () => {
     const wrapper = mount(PodsCard, {
       props: {
         title: 'Test', showScaling: true, resources: [podSuccess, podFail]
@@ -64,7 +64,7 @@ describe('component: PodsCard', () => {
     expect(segments[1].percent).toStrictEqual(50);
   });
 
-  it('should pass the appropriate props to the StatusRow component based on the resources input', async() => {
+  it('should pass the appropriate props to the StatusRow component based on the resources input', () => {
     const wrapper = mount(PodsCard, {
       props: {
         title: 'Test', showScaling: true, resources: [podSuccess, podFail]
@@ -82,4 +82,94 @@ describe('component: PodsCard', () => {
       to:          undefined,
     });
   });
+
+  it('should not render StatusBar or StatusRow when resources is empty', () => {
+    const wrapper = mount(PodsCard, {
+      props:  { title: 'Test', resources: [] },
+      global: { provide: { store } }
+    });
+
+    expect(wrapper.findComponent(StatusBar).exists()).toBeFalsy();
+    expect(wrapper.findComponent(StatusRow).exists()).toBeFalsy();
+  });
+
+  describe('pre-aggregated count support', () => {
+    it('should use resource.count when provided instead of counting array length', () => {
+      const resources = [
+        {
+          stateSimpleColor: 'success', stateDisplay: 'Running', stateId: 'running', count: 50
+        },
+        {
+          stateSimpleColor: 'error', stateDisplay: 'Error', stateId: 'error', count: 3
+        },
+      ];
+      const wrapper = mount(PodsCard, {
+        props:  { title: 'Test', resources },
+        global: { provide: { store } }
+      });
+      const rows = wrapper.findAllComponents(StatusRow);
+
+      expect(rows[0].props('count')).toStrictEqual(50);
+      expect(rows[0].props('label')).toStrictEqual('Running');
+      expect(rows[1].props('count')).toStrictEqual(3);
+      expect(rows[1].props('label')).toStrictEqual('Error');
+    });
+
+    it('should calculate correct percentages with pre-aggregated counts', () => {
+      const resources = [
+        {
+          stateSimpleColor: 'success', stateDisplay: 'Running', stateId: 'running', count: 75
+        },
+        {
+          stateSimpleColor: 'error', stateDisplay: 'Error', stateId: 'error', count: 25
+        },
+      ];
+      const wrapper = mount(PodsCard, {
+        props:  { title: 'Test', resources },
+        global: { provide: { store } }
+      });
+      const rows = wrapper.findAllComponents(StatusRow);
+
+      expect(rows[0].props('percent')).toStrictEqual(75);
+      expect(rows[1].props('percent')).toStrictEqual(25);
+    });
+
+    it('should calculate correct status bar segments with pre-aggregated counts', () => {
+      const resources = [
+        {
+          stateSimpleColor: 'success', stateDisplay: 'Running', stateId: 'running', count: 80
+        },
+        {
+          stateSimpleColor: 'error', stateDisplay: 'Error', stateId: 'error', count: 20
+        },
+      ];
+      const wrapper = mount(PodsCard, {
+        props:  { title: 'Test', resources },
+        global: { provide: { store } }
+      });
+      const statusBar = wrapper.findComponent(StatusBar);
+      const segments = statusBar.props('segments');
+
+      expect(segments[0].color).toStrictEqual('success');
+      expect(segments[0].percent).toStrictEqual(80);
+      expect(segments[1].color).toStrictEqual('error');
+      expect(segments[1].percent).toStrictEqual(20);
+    });
+
+    it('should default to count of 1 when resource.count is not provided', () => {
+      const resources = [
+        { stateSimpleColor: 'success', stateDisplay: 'Running' },
+        { stateSimpleColor: 'success', stateDisplay: 'Running' },
+        { stateSimpleColor: 'error', stateDisplay: 'Error' },
+      ];
+      const wrapper = mount(PodsCard, {
+        props:  { title: 'Test', resources },
+        global: { provide: { store } }
+      });
+      const rows = wrapper.findAllComponents(StatusRow);
+
+      expect(rows[0].props('count')).toStrictEqual(2);
+      expect(rows[1].props('count')).toStrictEqual(1);
+    });
+  });
 });
diff --git a/shell/mixins/__tests__/resource-fetch-api-pagination.test.ts b/shell/mixins/__tests__/resource-fetch-api-pagination.test.ts
new file mode 100644
index 00000000000..788c5261cfd
--- /dev/null
+++ b/shell/mixins/__tests__/resource-fetch-api-pagination.test.ts
@@ -0,0 +1,67 @@
+import { parseStructuredQuery } from '@shell/mixins/resource-fetch-api-pagination';
+import { PaginationFilterEquality } from '@shell/types/store/pagination.types';
+
+describe('parseStructuredQuery', () => {
+  it('should return null for null input', () => {
+    expect(parseStructuredQuery(null)).toBeNull();
+  });
+
+  it('should return null for undefined input', () => {
+    expect(parseStructuredQuery(undefined)).toBeNull();
+  });
+
+  it('should return null for empty string', () => {
+    expect(parseStructuredQuery('')).toBeNull();
+  });
+
+  it('should return null for plain text search query', () => {
+    expect(parseStructuredQuery('nginx')).toBeNull();
+  });
+
+  it('should return null for malformed structured query', () => {
+    expect(parseStructuredQuery('"field"')).toBeNull();
+  });
+
+  it('should parse a single key-value pair', () => {
+    const result = parseStructuredQuery('"metadata.state.name":"running"');
+
+    expect(result).toHaveLength(1);
+    expect(result?.[0].field).toStrictEqual('metadata.state.name');
+    expect(result?.[0].value).toStrictEqual('running');
+    expect(result?.[0].equality).toStrictEqual(PaginationFilterEquality.IN);
+  });
+
+  it('should parse multiple key-value pairs with the same field into a single IN filter', () => {
+    const result = parseStructuredQuery('"metadata.state.name":"running","metadata.state.name":"active"');
+
+    expect(result).toHaveLength(1);
+    expect(result?.[0].field).toStrictEqual('metadata.state.name');
+    expect(result?.[0].value).toStrictEqual('running,active');
+    expect(result?.[0].equality).toStrictEqual(PaginationFilterEquality.IN);
+  });
+
+  it('should parse pairs with different fields into separate filters', () => {
+    const result = parseStructuredQuery('"metadata.state.name":"running","metadata.namespace":"default"');
+
+    expect(result).toHaveLength(2);
+    expect(result?.[0].field).toStrictEqual('metadata.state.name');
+    expect(result?.[0].value).toStrictEqual('running');
+    expect(result?.[1].field).toStrictEqual('metadata.namespace');
+    expect(result?.[1].value).toStrictEqual('default');
+  });
+
+  it('should handle empty value in a pair', () => {
+    const result = parseStructuredQuery('"metadata.state.name":""');
+
+    expect(result).toHaveLength(1);
+    expect(result?.[0].field).toStrictEqual('metadata.state.name');
+    expect(result?.[0].value).toStrictEqual('');
+  });
+
+  it('should group multiple values for the same field from three pairs', () => {
+    const result = parseStructuredQuery('"metadata.state.name":"running","metadata.state.name":"active","metadata.state.name":"waiting"');
+
+    expect(result).toHaveLength(1);
+    expect(result?.[0].value).toStrictEqual('running,active,waiting');
+  });
+});
diff --git a/shell/mixins/resource-fetch-api-pagination.js b/shell/mixins/resource-fetch-api-pagination.js
index 166c6c17328..9649dab5074 100644
--- a/shell/mixins/resource-fetch-api-pagination.js
+++ b/shell/mixins/resource-fetch-api-pagination.js
@@ -11,7 +11,7 @@ import { STEVE_WATCH_MODE } from '@shell/types/store/subscribe.types';
 
 const STRUCTURED_QUERY_REGEX = /^"([^"]+)":"([^"]*)"(?:,"([^"]+)":"([^"]*)")*$/;
 
-function parseStructuredQuery(query) {
+export function parseStructuredQuery(query) {
   if (!query || !STRUCTURED_QUERY_REGEX.test(query)) {
     return null;
   }
diff --git a/shell/pages/c/_cluster/explorer/workload-dashboard/__tests__/composable.test.ts b/shell/pages/c/_cluster/explorer/workload-dashboard/__tests__/composable.test.ts
new file mode 100644
index 00000000000..e944f824405
--- /dev/null
+++ b/shell/pages/c/_cluster/explorer/workload-dashboard/__tests__/composable.test.ts
@@ -0,0 +1,401 @@
+import { useWorkloadDashboard } from '@shell/pages/c/_cluster/explorer/workload-dashboard/composable';
+import { WORKLOAD_RESOURCE_TYPES } from '@shell/pages/c/_cluster/explorer/workload-dashboard/types';
+import { defineComponent, effectScope, h } from 'vue';
+import { shallowMount, flushPromises } from '@vue/test-utils';
+
+const mockGetters: Record<string, any> = {};
+const mockDispatch = jest.fn();
+
+jest.mock('vuex', () => ({
+  useStore: () => ({
+    getters: new Proxy(mockGetters, {
+      get(target, prop: string) {
+        return target[prop];
+      },
+    }),
+    dispatch: mockDispatch,
+  }),
+}));
+
+jest.mock('@shell/composables/useI18n', () => ({ useI18n: () => ({ t: (key: string, args?: Record<string, any>) => `%${ key }%${ args ? JSON.stringify(args) : '' }` }) }));
+
+jest.mock('@shell/plugins/steve/steve-pagination-utils', () => ({
+  __esModule: true,
+  default:    { createParamsFromNsFilter: jest.fn(() => ({ projectsOrNamespaces: [], filters: [] })) },
+}));
+
+jest.mock('@shell/plugins/steve/projectAndNamespaceFiltering.utils', () => ({
+  __esModule: true,
+  default:    { createParam: jest.fn(() => '') },
+}));
+
+const defaultGetters: Record<string, any> = {
+  clusterId:           'local',
+  isAllNamespaces:     true,
+  namespaceFilters:    [],
+  namespaceMode:       'both',
+  'prefs/get':         () => ({}),
+  'cluster/all':       () => [],
+  'cluster/schemaFor': () => null,
+  currentCluster:      { isLocal: true },
+  currentProduct:      { hideSystemResources: false },
+  'management/all':    () => [],
+};
+
+Object.assign(mockGetters, defaultGetters);
+
+function setupGetters(overrides: Record<string, any> = {}) {
+  Object.keys(mockGetters).forEach((key) => delete mockGetters[key]);
+  Object.assign(mockGetters, defaultGetters, overrides);
+}
+
+function withScope(fn: () => void): void {
+  const scope = effectScope();
+
+  scope.run(fn);
+  scope.stop();
+}
+
+const summaryResponse = {
+  summary: [{ property: 'metadata.state.name', counts: { running: 5, error: 2 } }],
+  data:    [],
+};
+
+function mountComposable(getterOverrides: Record<string, any> = {}) {
+  setupGetters({
+    'cluster/schemaFor': () => ({ links: { collection: '/v1/test' } }),
+    ...getterOverrides,
+  });
+
+  mockDispatch.mockImplementation((action: string) => {
+    if (action === 'cluster/request') {
+      return Promise.resolve(summaryResponse);
+    }
+
+    return Promise.resolve();
+  });
+
+  let result: ReturnType<typeof useWorkloadDashboard>;
+
+  const wrapper = shallowMount(defineComponent({
+    setup() {
+      result = useWorkloadDashboard();
+
+      return {};
+    },
+    render: () => h('div'),
+  }));
+
+  return {
+    wrapper,
+    get result() {
+      return result!;
+    },
+  };
+}
+
+describe('composable: useWorkloadDashboard', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    setupGetters();
+  });
+
+  describe('namespaceSubtitle', () => {
+    it('should return namespacedOnly subtitle when namespaceMode is namespaced', () => {
+      setupGetters({ namespaceMode: 'namespaced' });
+
+      withScope(() => {
+        const { namespaceSubtitle } = useWorkloadDashboard();
+
+        expect(namespaceSubtitle.value).toStrictEqual('%workloadDashboard.subtitle.namespacedOnly%{"count":0}');
+      });
+    });
+
+    it('should return clusterOnly subtitle when namespaceMode is cluster', () => {
+      setupGetters({ namespaceMode: 'cluster' });
+
+      withScope(() => {
+        const { namespaceSubtitle } = useWorkloadDashboard();
+
+        expect(namespaceSubtitle.value).toStrictEqual('%workloadDashboard.subtitle.clusterOnly%{"count":0}');
+      });
+    });
+
+    it('should return allNamespaces subtitle when isAllNamespaces is true', () => {
+      setupGetters({ isAllNamespaces: true, namespaceMode: 'both' });
+
+      withScope(() => {
+        const { namespaceSubtitle } = useWorkloadDashboard();
+
+        expect(namespaceSubtitle.value).toStrictEqual('%workloadDashboard.subtitle.allNamespaces%{"count":0}');
+      });
+    });
+
+    it('should return userNamespaces subtitle for ALL_USER filter', () => {
+      setupGetters({
+        isAllNamespaces:  false,
+        namespaceMode:    'both',
+        namespaceFilters: ['all://user'],
+      });
+
+      withScope(() => {
+        const { namespaceSubtitle } = useWorkloadDashboard();
+
+        expect(namespaceSubtitle.value).toStrictEqual('%workloadDashboard.subtitle.userNamespaces%{"count":0}');
+      });
+    });
+
+    it('should return systemNamespaces subtitle for ALL_SYSTEM filter', () => {
+      setupGetters({
+        isAllNamespaces:  false,
+        namespaceMode:    'both',
+        namespaceFilters: ['all://system'],
+      });
+
+      withScope(() => {
+        const { namespaceSubtitle } = useWorkloadDashboard();
+
+        expect(namespaceSubtitle.value).toStrictEqual('%workloadDashboard.subtitle.systemNamespaces%{"count":0}');
+      });
+    });
+
+    it('should return project subtitle for project filter', () => {
+      const projectId = 'p-12345';
+
+      setupGetters({
+        isAllNamespaces:  false,
+        namespaceMode:    'both',
+        namespaceFilters: [`project://${ projectId }`],
+        'management/all': () => [{
+          id: `local/${ projectId }`, nameDisplay: 'My Project', metadata: { name: projectId }
+        }],
+      });
+
+      withScope(() => {
+        const { namespaceSubtitle } = useWorkloadDashboard();
+
+        expect(namespaceSubtitle.value).toStrictEqual(`%workloadDashboard.subtitle.project%{"name":"My Project","count":0}`);
+      });
+    });
+
+    it('should return namespace subtitle for namespace filter', () => {
+      setupGetters({
+        isAllNamespaces:  false,
+        namespaceMode:    'both',
+        namespaceFilters: ['ns://cattle-system'],
+      });
+
+      withScope(() => {
+        const { namespaceSubtitle } = useWorkloadDashboard();
+
+        expect(namespaceSubtitle.value).toStrictEqual('%workloadDashboard.subtitle.namespace%{"name":"cattle-system","count":0}');
+      });
+    });
+
+    it('should return multipleSelected subtitle for multiple filters', () => {
+      setupGetters({
+        isAllNamespaces:  false,
+        namespaceMode:    'both',
+        namespaceFilters: ['ns://default', 'ns://kube-system'],
+      });
+
+      withScope(() => {
+        const { namespaceSubtitle } = useWorkloadDashboard();
+
+        expect(namespaceSubtitle.value).toStrictEqual('%workloadDashboard.subtitle.multipleSelected%{"selected":2,"count":0}');
+      });
+    });
+
+    it('should check namespaceMode before isAllNamespaces', () => {
+      setupGetters({
+        isAllNamespaces: true,
+        namespaceMode:   'namespaced',
+      });
+
+      withScope(() => {
+        const { namespaceSubtitle } = useWorkloadDashboard();
+
+        expect(namespaceSubtitle.value).toStrictEqual('%workloadDashboard.subtitle.namespacedOnly%{"count":0}');
+      });
+    });
+  });
+
+  describe('hasWorkloads', () => {
+    it('should return false when there are no summaries', () => {
+      withScope(() => {
+        const { hasWorkloads } = useWorkloadDashboard();
+
+        expect(hasWorkloads.value).toStrictEqual(false);
+      });
+    });
+
+    it('should return true when summaries contain workloads', async() => {
+      const { wrapper, result } = mountComposable();
+
+      await flushPromises();
+
+      expect(result.hasWorkloads.value).toStrictEqual(true);
+      wrapper.unmount();
+    });
+  });
+
+  describe('resourceRoute', () => {
+    it('should return route without query when no stateNames provided', () => {
+      withScope(() => {
+        const { resourceRoute } = useWorkloadDashboard();
+        const route = resourceRoute('apps.deployment');
+
+        expect(route).toStrictEqual({
+          name:   'c-cluster-product-resource',
+          params: {
+            cluster:  'local',
+            product:  'explorer',
+            resource: 'apps.deployment',
+          },
+        });
+      });
+    });
+
+    it('should include state filter query when stateNames are provided', () => {
+      withScope(() => {
+        const { resourceRoute } = useWorkloadDashboard();
+        const route = resourceRoute('apps.deployment', ['running', 'active']);
+
+        expect((route as any).query).toStrictEqual({ q: '"metadata.state.name":"running","metadata.state.name":"active"' });
+      });
+    });
+
+    it('should not include query for empty stateNames array', () => {
+      withScope(() => {
+        const { resourceRoute } = useWorkloadDashboard();
+        const route = resourceRoute('apps.deployment', []);
+
+        expect((route as any).query).toBeUndefined();
+      });
+    });
+  });
+
+  describe('resetNamespaceFilter', () => {
+    it('should dispatch switchNamespaces with empty ids', () => {
+      withScope(() => {
+        const { resetNamespaceFilter } = useWorkloadDashboard();
+
+        resetNamespaceFilter();
+
+        expect(mockDispatch).toHaveBeenCalledWith('switchNamespaces', { ids: [], key: 'local' });
+      });
+    });
+  });
+
+  describe('byTypeCards', () => {
+    it('should return a card for each workload type with data', async() => {
+      const { wrapper, result } = mountComposable();
+
+      await flushPromises();
+
+      expect(result.byTypeCards.value).toHaveLength(WORKLOAD_RESOURCE_TYPES.length);
+      wrapper.unmount();
+    });
+
+    it('should include type and title on each card', async() => {
+      const { wrapper, result } = mountComposable();
+
+      await flushPromises();
+
+      const card = result.byTypeCards.value[0];
+
+      expect(card.type).toStrictEqual(WORKLOAD_RESOURCE_TYPES[0]);
+      expect(card.title).toBeTruthy();
+      wrapper.unmount();
+    });
+
+    it('should map resource states with correct colors', async() => {
+      const { wrapper, result } = mountComposable();
+
+      await flushPromises();
+
+      const card = result.byTypeCards.value[0];
+      const colors = card.resources.map((r) => r.stateSimpleColor);
+
+      expect(colors).toContain('success');
+      expect(colors).toContain('error');
+      wrapper.unmount();
+    });
+
+    it('should capitalize stateDisplay for each resource', async() => {
+      const { wrapper, result } = mountComposable();
+
+      await flushPromises();
+
+      const card = result.byTypeCards.value[0];
+      const runningResource = card.resources.find((r) => r.stateId === 'running');
+
+      expect(runningResource?.stateDisplay).toStrictEqual('Running');
+      wrapper.unmount();
+    });
+
+    it('should preserve counts from the summary response', async() => {
+      const { wrapper, result } = mountComposable();
+
+      await flushPromises();
+
+      const card = result.byTypeCards.value[0];
+      const runningResource = card.resources.find((r) => r.stateId === 'running');
+      const errorResource = card.resources.find((r) => r.stateId === 'error');
+
+      expect(runningResource?.count).toStrictEqual(5);
+      expect(errorResource?.count).toStrictEqual(2);
+      wrapper.unmount();
+    });
+  });
+
+  describe('byStateLayout', () => {
+    it('should assign the success card as hero', async() => {
+      const { wrapper, result } = mountComposable();
+
+      await flushPromises();
+
+      expect(result.byStateLayout.value.hero?.color).toStrictEqual('success');
+      wrapper.unmount();
+    });
+
+    it('should place non-hero cards in the cards array', async() => {
+      const { wrapper, result } = mountComposable();
+
+      await flushPromises();
+
+      const { cards } = result.byStateLayout.value;
+
+      expect(cards.length).toBeGreaterThan(0);
+      expect(cards.every((c) => c.color !== 'success')).toStrictEqual(true);
+      wrapper.unmount();
+    });
+
+    it('should set heroMode to wide when there is exactly one other card', async() => {
+      const { wrapper, result } = mountComposable();
+
+      await flushPromises();
+
+      expect(result.byStateLayout.value.heroMode).toStrictEqual('wide');
+      wrapper.unmount();
+    });
+
+    it('should set subHero to null when there are fewer than 3 other cards', async() => {
+      const { wrapper, result } = mountComposable();
+
+      await flushPromises();
+
+      expect(result.byStateLayout.value.subHero).toBeNull();
+      wrapper.unmount();
+    });
+
+    it('should set gridRows to 1 when there is one non-hero card', async() => {
+      const { wrapper, result } = mountComposable();
+
+      await flushPromises();
+
+      expect(result.byStateLayout.value.gridRows).toStrictEqual(1);
+      wrapper.unmount();
+    });
+  });
+});

From 1d5116e092c9e94b8994cb3fa1a02a1b3125e245 Mon Sep 17 00:00:00 2001
From: Marcelo Fukumoto <marcelo.fukumoto@suse.com>
Date: Fri, 22 May 2026 19:21:48 +0200
Subject: [PATCH 16/28] Added e2e test

---
 .../pages/explorer/workload-dashboard.po.ts   | 58 +++++++++++++++++++
 .../pages/explorer/workload-dashboard.spec.ts | 56 ++++++++++++++++++
 2 files changed, 114 insertions(+)
 create mode 100644 cypress/e2e/po/pages/explorer/workload-dashboard.po.ts
 create mode 100644 cypress/e2e/tests/pages/explorer/workload-dashboard.spec.ts

diff --git a/cypress/e2e/po/pages/explorer/workload-dashboard.po.ts b/cypress/e2e/po/pages/explorer/workload-dashboard.po.ts
new file mode 100644
index 00000000000..708abff025c
--- /dev/null
+++ b/cypress/e2e/po/pages/explorer/workload-dashboard.po.ts
@@ -0,0 +1,58 @@
+import PagePo from '@/cypress/e2e/po/pages/page.po';
+import BurgerMenuPo from '@/cypress/e2e/po/side-bars/burger-side-menu.po';
+import ProductNavPo from '@/cypress/e2e/po/side-bars/product-side-nav.po';
+
+export default class WorkloadDashboardPagePo extends PagePo {
+  private static createPath(clusterId: string) {
+    return `/c/${ clusterId }/explorer/workload-dashboard`;
+  }
+
+  static goTo(clusterId: string): Cypress.Chainable<Cypress.AUTWindow> {
+    return super.goTo(WorkloadDashboardPagePo.createPath(clusterId));
+  }
+
+  constructor(clusterId = 'local') {
+    super(WorkloadDashboardPagePo.createPath(clusterId));
+  }
+
+  static navTo(clusterId = 'local') {
+    const burgerMenu = new BurgerMenuPo();
+    const sideNav = new ProductNavPo();
+
+    burgerMenu.goToCluster(clusterId);
+    sideNav.navToSideMenuGroupByLabel('Workloads');
+    sideNav.navToSideMenuEntryByLabel('Workloads');
+  }
+
+  title() {
+    return cy.get('.workload-dashboard h1');
+  }
+
+  subtitle() {
+    return cy.get('.workload-dashboard .sub-title');
+  }
+
+  byStateSection() {
+    return cy.get('.bento-grid');
+  }
+
+  stateCards() {
+    return cy.get('.state-card');
+  }
+
+  byTypeSection() {
+    return cy.get('.card-grid');
+  }
+
+  byTypeCards() {
+    return cy.get('[data-testid="resource-detail-status-card"]');
+  }
+
+  emptyState() {
+    return cy.get('.empty-state');
+  }
+
+  errorBanner() {
+    return cy.get('.banner.error');
+  }
+}
diff --git a/cypress/e2e/tests/pages/explorer/workload-dashboard.spec.ts b/cypress/e2e/tests/pages/explorer/workload-dashboard.spec.ts
new file mode 100644
index 00000000000..4a530975cf8
--- /dev/null
+++ b/cypress/e2e/tests/pages/explorer/workload-dashboard.spec.ts
@@ -0,0 +1,56 @@
+import WorkloadDashboardPagePo from '@/cypress/e2e/po/pages/explorer/workload-dashboard.po';
+
+const workloadDashboard = new WorkloadDashboardPagePo('local');
+
+describe('Workload Dashboard', { testIsolation: 'off', tags: ['@explorer', '@adminUser'] }, () => {
+  before(() => {
+    cy.login();
+  });
+
+  it('should navigate to the workload dashboard and display the title', () => {
+    workloadDashboard.goTo();
+    workloadDashboard.waitForPage();
+
+    workloadDashboard.title().should('contain.text', 'Workload Dashboard');
+  });
+
+  it('should display a namespace subtitle with workload count', () => {
+    workloadDashboard.subtitle().should('be.visible');
+    workloadDashboard.subtitle().invoke('text').should('match', /workload/i);
+  });
+
+  it('should display the By State section with state cards', () => {
+    cy.contains('h4', 'By State').should('be.visible');
+    workloadDashboard.byStateSection().should('be.visible');
+    workloadDashboard.stateCards().should('have.length.gte', 1);
+  });
+
+  it('should display the By Type section with type cards', () => {
+    cy.contains('h4', 'By Type').should('be.visible');
+    workloadDashboard.byTypeSection().should('be.visible');
+    workloadDashboard.byTypeCards().should('have.length.gte', 1);
+  });
+
+  it('should navigate to the resource list when clicking a By Type card', () => {
+    workloadDashboard.goTo();
+    workloadDashboard.waitForPage();
+
+    workloadDashboard.byTypeCards().first().click();
+
+    cy.url().should('match', /\/c\/local\/explorer\/(apps\.|batch\.)?[a-z]+/);
+  });
+
+  it('should show empty state when namespace filter matches no workloads', () => {
+    cy.updateNamespaceFilter('local', 'none', '{"local":["ns://e2e-nonexistent-ns"]}');
+
+    workloadDashboard.goTo();
+    workloadDashboard.waitForPage();
+
+    workloadDashboard.emptyState().should('be.visible');
+  });
+
+  after(() => {
+    cy.login();
+    cy.updateNamespaceFilter('local', 'none', '{"local":["all://user"]}');
+  });
+});

From c9b94cca444632bd1d7f1dc886d43d0e39aa84c8 Mon Sep 17 00:00:00 2001
From: Marcelo Fukumoto <marcelo.fukumoto@suse.com>
Date: Fri, 22 May 2026 21:39:02 +0200
Subject: [PATCH 17/28] Fixed e2e test

---
 cypress/e2e/tests/pages/explorer/workload-dashboard.spec.ts | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/cypress/e2e/tests/pages/explorer/workload-dashboard.spec.ts b/cypress/e2e/tests/pages/explorer/workload-dashboard.spec.ts
index 4a530975cf8..c2f61802294 100644
--- a/cypress/e2e/tests/pages/explorer/workload-dashboard.spec.ts
+++ b/cypress/e2e/tests/pages/explorer/workload-dashboard.spec.ts
@@ -5,18 +5,19 @@ const workloadDashboard = new WorkloadDashboardPagePo('local');
 describe('Workload Dashboard', { testIsolation: 'off', tags: ['@explorer', '@adminUser'] }, () => {
   before(() => {
     cy.login();
+    cy.updateNamespaceFilter('local', 'none', '{"local":[]}');
   });
 
   it('should navigate to the workload dashboard and display the title', () => {
     workloadDashboard.goTo();
     workloadDashboard.waitForPage();
 
-    workloadDashboard.title().should('contain.text', 'Workload Dashboard');
+    workloadDashboard.title().should('contain.text', 'Workloads Overview');
   });
 
   it('should display a namespace subtitle with workload count', () => {
     workloadDashboard.subtitle().should('be.visible');
-    workloadDashboard.subtitle().invoke('text').should('match', /workload/i);
+    workloadDashboard.subtitle().invoke('text').should('match', /\(\d+\)/);
   });
 
   it('should display the By State section with state cards', () => {

From 16dd1c50cd78c7c59d95ef3bbd92893f29655cdf Mon Sep 17 00:00:00 2001
From: Marcelo Fukumoto <marcelo.fukumoto@suse.com>
Date: Tue, 26 May 2026 12:04:52 +0200
Subject: [PATCH 18/28] Changed to reduce specificity

---
 shell/pages/c/_cluster/explorer/workload-dashboard.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/shell/pages/c/_cluster/explorer/workload-dashboard.vue b/shell/pages/c/_cluster/explorer/workload-dashboard.vue
index f38e86897e8..bef8a2f1ab1 100644
--- a/shell/pages/c/_cluster/explorer/workload-dashboard.vue
+++ b/shell/pages/c/_cluster/explorer/workload-dashboard.vue
@@ -155,8 +155,8 @@ const {
     }
   }
 
-  :deep(.state-card) {
-    .body {
+  .state-card {
+    :deep(.body) {
       display: flex;
       flex-direction: column;
       gap: 4px;

From 0d9ee46dd14a09a59fd375bf9f2fc019c9a767b2 Mon Sep 17 00:00:00 2001
From: Marcelo Fukumoto <marcelo.fukumoto@suse.com>
Date: Tue, 26 May 2026 20:45:25 +0200
Subject: [PATCH 19/28] Applied code review improvements

---
 .../pages/explorer/workload-dashboard.po.ts   |  20 +-
 .../pages/explorer/workload-dashboard.spec.ts |  13 +-
 .../Detail/Card/__tests__/StateCard.test.ts   |   7 +-
 .../components/Resource/Detail/Card/index.vue |  23 ++-
 .../Resource/Detail/ResourceRow.types.ts      |   1 +
 .../Resource/Detail/ResourceRow.vue           |  25 ++-
 shell/components/SubtleLink.vue               |  14 +-
 shell/mixins/resource-fetch-api-pagination.js |   1 +
 shell/pages/c/_cluster/apps/charts/index.vue  |   2 +-
 .../_cluster/explorer/workload-dashboard.vue  |  35 ++--
 .../workload-dashboard/ByStateSection.vue     |  53 ++---
 .../workload-dashboard/ByTypeSection.vue      |   6 +-
 .../__tests__/composable.test.ts              | 190 +++++++-----------
 .../explorer/workload-dashboard/composable.ts | 170 ++++++++--------
 .../explorer/workload-dashboard/types.ts      |  22 +-
 15 files changed, 293 insertions(+), 289 deletions(-)

diff --git a/cypress/e2e/po/pages/explorer/workload-dashboard.po.ts b/cypress/e2e/po/pages/explorer/workload-dashboard.po.ts
index 708abff025c..6257938b42d 100644
--- a/cypress/e2e/po/pages/explorer/workload-dashboard.po.ts
+++ b/cypress/e2e/po/pages/explorer/workload-dashboard.po.ts
@@ -1,6 +1,8 @@
 import PagePo from '@/cypress/e2e/po/pages/page.po';
 import BurgerMenuPo from '@/cypress/e2e/po/side-bars/burger-side-menu.po';
 import ProductNavPo from '@/cypress/e2e/po/side-bars/product-side-nav.po';
+import CardPo from '@/cypress/e2e/po/components/Resource/Detail/Card/statusCard.po';
+import BannersPo from '@/cypress/e2e/po/components/banners.po';
 
 export default class WorkloadDashboardPagePo extends PagePo {
   private static createPath(clusterId: string) {
@@ -25,23 +27,27 @@ export default class WorkloadDashboardPagePo extends PagePo {
   }
 
   title() {
-    return cy.get('.workload-dashboard h1');
+    return cy.get('[data-testid="workload-dashboard-title"]');
   }
 
   subtitle() {
-    return cy.get('.workload-dashboard .sub-title');
+    return cy.get('[data-testid="workload-dashboard-subtitle"]');
   }
 
   byStateSection() {
-    return cy.get('.bento-grid');
+    return cy.get('[data-testid="workload-dashboard-by-state"]');
   }
 
   stateCards() {
-    return cy.get('.state-card');
+    return cy.get('[data-testid="workload-dashboard-state-card"]');
   }
 
   byTypeSection() {
-    return cy.get('.card-grid');
+    return cy.get('[data-testid="workload-dashboard-by-type"]');
+  }
+
+  byTypeCard(index = 0) {
+    return new CardPo(`[data-testid="resource-detail-status-card"]:eq(${ index })`);
   }
 
   byTypeCards() {
@@ -49,10 +55,10 @@ export default class WorkloadDashboardPagePo extends PagePo {
   }
 
   emptyState() {
-    return cy.get('.empty-state');
+    return cy.get('[data-testid="workload-dashboard-empty"]');
   }
 
   errorBanner() {
-    return cy.get('.banner.error');
+    return new BannersPo('.banner.error');
   }
 }
diff --git a/cypress/e2e/tests/pages/explorer/workload-dashboard.spec.ts b/cypress/e2e/tests/pages/explorer/workload-dashboard.spec.ts
index c2f61802294..bb9cdeef812 100644
--- a/cypress/e2e/tests/pages/explorer/workload-dashboard.spec.ts
+++ b/cypress/e2e/tests/pages/explorer/workload-dashboard.spec.ts
@@ -6,12 +6,11 @@ describe('Workload Dashboard', { testIsolation: 'off', tags: ['@explorer', '@adm
   before(() => {
     cy.login();
     cy.updateNamespaceFilter('local', 'none', '{"local":[]}');
-  });
-
-  it('should navigate to the workload dashboard and display the title', () => {
-    workloadDashboard.goTo();
+    WorkloadDashboardPagePo.navTo();
     workloadDashboard.waitForPage();
+  });
 
+  it('should display the title', () => {
     workloadDashboard.title().should('contain.text', 'Workloads Overview');
   });
 
@@ -21,19 +20,17 @@ describe('Workload Dashboard', { testIsolation: 'off', tags: ['@explorer', '@adm
   });
 
   it('should display the By State section with state cards', () => {
-    cy.contains('h4', 'By State').should('be.visible');
     workloadDashboard.byStateSection().should('be.visible');
     workloadDashboard.stateCards().should('have.length.gte', 1);
   });
 
   it('should display the By Type section with type cards', () => {
-    cy.contains('h4', 'By Type').should('be.visible');
     workloadDashboard.byTypeSection().should('be.visible');
     workloadDashboard.byTypeCards().should('have.length.gte', 1);
   });
 
   it('should navigate to the resource list when clicking a By Type card', () => {
-    workloadDashboard.goTo();
+    WorkloadDashboardPagePo.navTo();
     workloadDashboard.waitForPage();
 
     workloadDashboard.byTypeCards().first().click();
@@ -44,7 +41,7 @@ describe('Workload Dashboard', { testIsolation: 'off', tags: ['@explorer', '@adm
   it('should show empty state when namespace filter matches no workloads', () => {
     cy.updateNamespaceFilter('local', 'none', '{"local":["ns://e2e-nonexistent-ns"]}');
 
-    workloadDashboard.goTo();
+    WorkloadDashboardPagePo.navTo();
     workloadDashboard.waitForPage();
 
     workloadDashboard.emptyState().should('be.visible');
diff --git a/shell/components/Resource/Detail/Card/__tests__/StateCard.test.ts b/shell/components/Resource/Detail/Card/__tests__/StateCard.test.ts
index 065f7375696..90cb82fd584 100644
--- a/shell/components/Resource/Detail/Card/__tests__/StateCard.test.ts
+++ b/shell/components/Resource/Detail/Card/__tests__/StateCard.test.ts
@@ -8,9 +8,10 @@ describe('component: StateCard', () => {
   const title = 'TITLE';
   const counts = [{ label: 'label2', count: 3 }];
   const row: any = {
-    label: 'label',
-    to:    'to',
-    color: 'success',
+    label:   'label',
+    to:      'to',
+    color:   'success',
+    compact: false,
     counts,
   };
 
diff --git a/shell/components/Resource/Detail/Card/index.vue b/shell/components/Resource/Detail/Card/index.vue
index 0ae45c9e0e8..a3ded060e62 100644
--- a/shell/components/Resource/Detail/Card/index.vue
+++ b/shell/components/Resource/Detail/Card/index.vue
@@ -7,15 +7,17 @@ import VerticalGap from '@shell/components/Resource/Detail/Card/VerticalGap.vue'
 export interface CardProps {
     title?: string;
     to?: RouteLocationRaw;
+    bodyColumns?: number;
 }
 
-const { title, to } = defineProps<CardProps>();
+const { title, to, bodyColumns } = defineProps<CardProps>();
 const slots = useSlots();
 const router = useRouter();
 
 const clickable = computed(() => !!to);
 const cursorValue = computed(() => clickable.value ? 'pointer' : 'auto');
 const showHeading = computed(() => !!title || !!slots.title || !!slots['heading-action']);
+const gridColumns = computed(() => bodyColumns ? `repeat(${ bodyColumns }, 1fr)` : 'none');
 
 function handleClick(e: MouseEvent | KeyboardEvent): void {
   if (!to) {
@@ -36,7 +38,7 @@ function handleClick(e: MouseEvent | KeyboardEvent): void {
   <div
     class="detail-card"
     :class="{ clickable: clickable }"
-    :role="clickable ? 'link' : undefined"
+    :role="clickable ? 'button' : undefined"
     :tabindex="clickable ? 0 : undefined"
     @click="handleClick"
     @keyup.enter="handleClick"
@@ -54,7 +56,10 @@ function handleClick(e: MouseEvent | KeyboardEvent): void {
       </div>
       <VerticalGap />
     </template>
-    <div class="body">
+    <div
+      class="body"
+      :class="{ 'body--grid': bodyColumns, 'body--grid-0': bodyColumns === 0 }"
+    >
       <slot name="default" />
     </div>
   </div>
@@ -88,6 +93,18 @@ function handleClick(e: MouseEvent | KeyboardEvent): void {
       display: flex;
       flex-direction: column;
       justify-content: flex-start;
+
+      &--grid-0 {
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+      }
+
+      &--grid {
+        display: grid;
+        grid-template-columns: v-bind(gridColumns);
+        gap: 4px 48px;
+      }
     }
 }
 </style>
diff --git a/shell/components/Resource/Detail/ResourceRow.types.ts b/shell/components/Resource/Detail/ResourceRow.types.ts
index 348af7b5038..dbe92590d7a 100644
--- a/shell/components/Resource/Detail/ResourceRow.types.ts
+++ b/shell/components/Resource/Detail/ResourceRow.types.ts
@@ -11,4 +11,5 @@ export interface Props {
   to?: RouteLocationRaw;
   color?: StateColor;
   counts?: Count[];
+  compact?: boolean;
 }
diff --git a/shell/components/Resource/Detail/ResourceRow.vue b/shell/components/Resource/Detail/ResourceRow.vue
index 4525a314237..b2bf8166031 100644
--- a/shell/components/Resource/Detail/ResourceRow.vue
+++ b/shell/components/Resource/Detail/ResourceRow.vue
@@ -7,7 +7,7 @@ import { useI18n } from '@shell/composables/useI18n';
 import { useStore } from 'vuex';
 import { Props } from './ResourceRow.types';
 const {
-  label, to, counts, color
+  label, to, counts, color, compact
 } = defineProps<Props>();
 
 const store = useStore();
@@ -37,7 +37,10 @@ const displayCounts = computed(() => {
 </script>
 
 <template>
-  <div class="resource-row">
+  <div
+    class="resource-row"
+    :class="{ 'compact': compact }"
+  >
     <div class="left">
       <SubtleLink
         v-if="to && (counts && counts.length > 0)"
@@ -85,6 +88,24 @@ const displayCounts = computed(() => {
     flex-direction: row;
     align-items: center;
 
+    &.compact {
+      position: relative;
+      padding-left: 20px;
+      line-height: 21px;
+      height: 24px;
+
+      .left {
+        flex-grow: 1;
+      }
+
+      .right .counts .state-dot {
+        position: absolute;
+        left: 0;
+        top: 50%;
+        transform: translateY(-50%);
+      }
+    }
+
     .right {
       flex-grow: 1;
       text-align: right;
diff --git a/shell/components/SubtleLink.vue b/shell/components/SubtleLink.vue
index a4b2f1e6d0f..447f4655151 100644
--- a/shell/components/SubtleLink.vue
+++ b/shell/components/SubtleLink.vue
@@ -1,18 +1,14 @@
 <script setup lang="ts">
 import { computed } from 'vue';
-import { useStore } from 'vuex';
 import { RouterLink, RouteLocationRaw } from 'vue-router';
-import { useI18n } from '@shell/composables/useI18n';
 
 export interface Props {
   to?: RouteLocationRaw;
   href?: string;
   target?: string;
-  openInNewTab?: boolean;
+  openInNewTabLabel?: string;
 }
 
-const store = useStore();
-const { t } = useI18n(store);
 const props = defineProps<Props>();
 
 const isExternal = computed(() => !!props.href);
@@ -27,11 +23,11 @@ const isExternal = computed(() => !!props.href);
       : { to }"
   >
     <span
-      v-if="openInNewTab"
+      v-if="openInNewTabLabel"
       class="sr-only"
-    >{{ t('generic.opensInNewTab') }}</span>
-    <slot name="default" /><span v-if="openInNewTab">&nbsp;</span><i
-      v-if="openInNewTab"
+    >{{ openInNewTabLabel }}</span>
+    <slot name="default" /><span v-if="openInNewTabLabel">&nbsp;</span><i
+      v-if="openInNewTabLabel"
       class="link-icon icon icon-external-link"
     />
   </component>
diff --git a/shell/mixins/resource-fetch-api-pagination.js b/shell/mixins/resource-fetch-api-pagination.js
index 9649dab5074..a1e021e9515 100644
--- a/shell/mixins/resource-fetch-api-pagination.js
+++ b/shell/mixins/resource-fetch-api-pagination.js
@@ -9,6 +9,7 @@ import { PaginationParamFilter, PaginationFilterField, PaginationFilterEquality,
 import stevePaginationUtils from '@shell/plugins/steve/steve-pagination-utils';
 import { STEVE_WATCH_MODE } from '@shell/types/store/subscribe.types';
 
+// Validates overall shape only; capture groups beyond the first pair are discarded — actual extraction uses pairRegex in parseStructuredQuery
 const STRUCTURED_QUERY_REGEX = /^"([^"]+)":"([^"]*)"(?:,"([^"]+)":"([^"]*)")*$/;
 
 export function parseStructuredQuery(query) {
diff --git a/shell/pages/c/_cluster/apps/charts/index.vue b/shell/pages/c/_cluster/apps/charts/index.vue
index 3aca36afe60..b9b77082b11 100644
--- a/shell/pages/c/_cluster/apps/charts/index.vue
+++ b/shell/pages/c/_cluster/apps/charts/index.vue
@@ -688,7 +688,7 @@ export default {
               <SubtleLink
                 :href="`${DOCS_BASE}/how-to-guides/new-user-guides/helm-charts-in-rancher`"
                 target="_blank"
-                :open-in-new-tab="true"
+                :open-in-new-tab-label="t('generic.opensInNewTab')"
               >
                 {{ content }}
               </SubtleLink>
diff --git a/shell/pages/c/_cluster/explorer/workload-dashboard.vue b/shell/pages/c/_cluster/explorer/workload-dashboard.vue
index bef8a2f1ab1..c68f480726d 100644
--- a/shell/pages/c/_cluster/explorer/workload-dashboard.vue
+++ b/shell/pages/c/_cluster/explorer/workload-dashboard.vue
@@ -43,6 +43,7 @@ const {
     <div
       v-if="!hasWorkloads"
       class="empty-state"
+      data-testid="workload-dashboard-empty"
     >
       <h1 class="m-0">
         {{ t('workloadDashboard.empty.title') }}
@@ -52,6 +53,7 @@ const {
           <template #resetLink="{ content }">
             <a
               role="button"
+              tabindex="0"
               class="link"
               @click="resetNamespaceFilter"
               @keyup.enter="resetNamespaceFilter"
@@ -66,7 +68,7 @@ const {
             <SubtleLink
               :href="`${DOCS_BASE}/how-to-guides/new-user-guides/kubernetes-resources-setup/workloads-and-pods`"
               target="_blank"
-              :open-in-new-tab="true"
+              :open-in-new-tab-label="t('generic.opensInNewTab')"
             >
               {{ content }}
             </SubtleLink>
@@ -78,18 +80,27 @@ const {
     <template v-else>
       <header class="row">
         <div class="col span-12 title">
-          <h1 class="m-0">
+          <h1
+            class="m-0"
+            data-testid="workload-dashboard-title"
+          >
             {{ t('workloadDashboard.title') }}
           </h1>
-          <div class="sub-title text-muted">
+          <div
+            class="sub-title text-muted"
+            data-testid="workload-dashboard-subtitle"
+          >
             {{ namespaceSubtitle }}
           </div>
         </div>
       </header>
 
       <!-- ━━━ By State ━━━ -->
-      <div class="section">
-        <h4 class="m-0 text-muted">
+      <div
+        class="section"
+        data-testid="workload-dashboard-by-state"
+      >
+        <h4 class="m-0 text-deemphasized">
           {{ t('workloadDashboard.sections.byState') }}
         </h4>
         <ByStateSection
@@ -99,8 +110,11 @@ const {
       </div>
 
       <!-- ━━━ By Type ━━━ -->
-      <div class="section">
-        <h4 class="m-0 text-muted">
+      <div
+        class="section"
+        data-testid="workload-dashboard-by-type"
+      >
+        <h4 class="m-0 text-deemphasized">
           {{ t('workloadDashboard.sections.byType') }}
         </h4>
         <ByTypeSection
@@ -155,12 +169,5 @@ const {
     }
   }
 
-  .state-card {
-    :deep(.body) {
-      display: flex;
-      flex-direction: column;
-      gap: 4px;
-    }
-  }
 }
 </style>
diff --git a/shell/pages/c/_cluster/explorer/workload-dashboard/ByStateSection.vue b/shell/pages/c/_cluster/explorer/workload-dashboard/ByStateSection.vue
index 7f7bf0bce58..6031449b5c3 100644
--- a/shell/pages/c/_cluster/explorer/workload-dashboard/ByStateSection.vue
+++ b/shell/pages/c/_cluster/explorer/workload-dashboard/ByStateSection.vue
@@ -1,24 +1,31 @@
 <script setup lang="ts">
+import { computed } from 'vue';
 import Card from '@shell/components/Resource/Detail/Card/index.vue';
 import ResourceRow from '@shell/components/Resource/Detail/ResourceRow.vue';
-import type { ByStateLayout, ResourceRouteFn } from './types';
+import type { WorkloadDashboardByStateLayout, WorkloadDashboardResourceRouteFn } from './types';
 
-defineProps<{
-  layout: ByStateLayout;
-  resourceRoute: ResourceRouteFn;
+const props = defineProps<{
+  layout: WorkloadDashboardByStateLayout;
+  resourceRoute: WorkloadDashboardResourceRouteFn;
 }>();
+
+const gridTemplateRows = computed(() => {
+  const unit = props.layout.subHero ? '1fr' : 'auto';
+
+  return `repeat(${ props.layout.gridRows }, ${ unit })`;
+});
 </script>
 
 <template>
   <div
     class="bento-grid"
     :class="{ 'bento-grid--has-sub-hero': !!layout.subHero }"
-    :style="{ 'grid-template-rows': 'repeat(' + layout.gridRows + ', ' + (layout.subHero ? '1fr' : 'auto') + ')' }"
   >
     <Card
       v-for="card in layout.cards"
       :key="card.color"
       class="state-card"
+      data-testid="workload-dashboard-state-card"
       :class="'state-card--' + card.color"
     >
       <ResourceRow
@@ -28,6 +35,7 @@ defineProps<{
         :to="resourceRoute(row.type, row.stateNames)"
         :color="row.color"
         :counts="row.counts"
+        compact
       />
     </Card>
     <Card
@@ -42,12 +50,14 @@ defineProps<{
         :to="resourceRoute(row.type, row.stateNames)"
         :color="row.color"
         :counts="row.counts"
+        compact
       />
     </Card>
     <Card
       v-if="layout.hero"
       class="state-card bento-hero"
       :class="['state-card--' + layout.hero.color, 'bento-hero--' + layout.heroMode]"
+      :body-columns="layout.heroMode === 'full' ? 3 : layout.heroMode === 'wide' ? 2 : undefined"
     >
       <ResourceRow
         v-for="(row, idx) in layout.hero.rows"
@@ -56,6 +66,7 @@ defineProps<{
         :to="resourceRoute(row.type, row.stateNames)"
         :color="row.color"
         :counts="row.counts"
+        compact
       />
     </Card>
   </div>
@@ -65,6 +76,7 @@ defineProps<{
 .bento-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: v-bind(gridTemplateRows);
   grid-auto-flow: dense;
   gap: 15px;
 
@@ -74,22 +86,10 @@ defineProps<{
 
     &--full {
       grid-column: 1 / -1;
-
-      :deep(.body) {
-        display: grid;
-        grid-template-columns: repeat(3, 1fr);
-        gap: 4px 48px;
-      }
     }
 
     &--wide {
       grid-column: 2 / -1;
-
-      :deep(.body) {
-        display: grid;
-        grid-template-columns: repeat(2, 1fr);
-        gap: 4px 48px;
-      }
     }
   }
 
@@ -98,7 +98,7 @@ defineProps<{
     grid-row: 1 / -1;
   }
 
-  .bento-grid--has-sub-hero {
+  &.bento-grid--has-sub-hero {
     .state-card:not(.bento-hero):not(.bento-sub-hero) {
       grid-column: 1;
     }
@@ -106,23 +106,6 @@ defineProps<{
 
   .state-card {
     border: 0;
-    :deep(.resource-row) {
-      position: relative;
-      padding-left: 20px;
-      line-height: 21px;
-      height: 24px;
-
-      .left {
-        flex-grow: 1;
-      }
-
-      .right .counts .state-dot {
-        position: absolute;
-        left: 0;
-        top: 50%;
-        transform: translateY(-50%);
-      }
-    }
 
     @each $color in (error, warning, info, success, disabled) {
       &--#{$color} {
diff --git a/shell/pages/c/_cluster/explorer/workload-dashboard/ByTypeSection.vue b/shell/pages/c/_cluster/explorer/workload-dashboard/ByTypeSection.vue
index ddf25d53c4d..01dd4cad7e2 100644
--- a/shell/pages/c/_cluster/explorer/workload-dashboard/ByTypeSection.vue
+++ b/shell/pages/c/_cluster/explorer/workload-dashboard/ByTypeSection.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import StatusCard from '@shell/components/Resource/Detail/Card/StatusCard/index.vue';
-import type { ByTypeCard, ResourceRouteFn } from './types';
+import type { WorkloadDashboardByTypeCard, WorkloadDashboardResourceRouteFn } from './types';
 
 defineProps<{
-  cards: ByTypeCard[];
-  resourceRoute: ResourceRouteFn;
+  cards: WorkloadDashboardByTypeCard[];
+  resourceRoute: WorkloadDashboardResourceRouteFn;
 }>();
 </script>
 
diff --git a/shell/pages/c/_cluster/explorer/workload-dashboard/__tests__/composable.test.ts b/shell/pages/c/_cluster/explorer/workload-dashboard/__tests__/composable.test.ts
index e944f824405..27facbdbc72 100644
--- a/shell/pages/c/_cluster/explorer/workload-dashboard/__tests__/composable.test.ts
+++ b/shell/pages/c/_cluster/explorer/workload-dashboard/__tests__/composable.test.ts
@@ -1,6 +1,6 @@
 import { useWorkloadDashboard } from '@shell/pages/c/_cluster/explorer/workload-dashboard/composable';
 import { WORKLOAD_RESOURCE_TYPES } from '@shell/pages/c/_cluster/explorer/workload-dashboard/types';
-import { defineComponent, effectScope, h } from 'vue';
+import { defineComponent, h } from 'vue';
 import { shallowMount, flushPromises } from '@vue/test-utils';
 
 const mockGetters: Record<string, any> = {};
@@ -21,7 +21,10 @@ jest.mock('@shell/composables/useI18n', () => ({ useI18n: () => ({ t: (key: stri
 
 jest.mock('@shell/plugins/steve/steve-pagination-utils', () => ({
   __esModule: true,
-  default:    { createParamsFromNsFilter: jest.fn(() => ({ projectsOrNamespaces: [], filters: [] })) },
+  default:    {
+    createParamsFromNsFilter:  jest.fn(() => ({ projectsOrNamespaces: [], filters: [] })),
+    createParamsForPagination: jest.fn(() => ''),
+  },
 }));
 
 jest.mock('@shell/plugins/steve/projectAndNamespaceFiltering.utils', () => ({
@@ -49,13 +52,6 @@ function setupGetters(overrides: Record<string, any> = {}) {
   Object.assign(mockGetters, defaultGetters, overrides);
 }
 
-function withScope(fn: () => void): void {
-  const scope = effectScope();
-
-  scope.run(fn);
-  scope.stop();
-}
-
 const summaryResponse = {
   summary: [{ property: 'metadata.state.name', counts: { running: 5, error: 2 } }],
   data:    [],
@@ -64,6 +60,7 @@ const summaryResponse = {
 function mountComposable(getterOverrides: Record<string, any> = {}) {
   setupGetters({
     'cluster/schemaFor': () => ({ links: { collection: '/v1/test' } }),
+    'cluster/canList':   () => true,
     ...getterOverrides,
   });
 
@@ -101,68 +98,45 @@ describe('composable: useWorkloadDashboard', () => {
   });
 
   describe('namespaceSubtitle', () => {
-    it('should return namespacedOnly subtitle when namespaceMode is namespaced', () => {
-      setupGetters({ namespaceMode: 'namespaced' });
-
-      withScope(() => {
-        const { namespaceSubtitle } = useWorkloadDashboard();
-
-        expect(namespaceSubtitle.value).toStrictEqual('%workloadDashboard.subtitle.namespacedOnly%{"count":0}');
-      });
-    });
-
-    it('should return clusterOnly subtitle when namespaceMode is cluster', () => {
-      setupGetters({ namespaceMode: 'cluster' });
+    it('should return allNamespaces subtitle when isAllNamespaces is true', async() => {
+      const { wrapper, result } = mountComposable({ isAllNamespaces: true, namespaceMode: 'both' });
 
-      withScope(() => {
-        const { namespaceSubtitle } = useWorkloadDashboard();
-
-        expect(namespaceSubtitle.value).toStrictEqual('%workloadDashboard.subtitle.clusterOnly%{"count":0}');
-      });
-    });
-
-    it('should return allNamespaces subtitle when isAllNamespaces is true', () => {
-      setupGetters({ isAllNamespaces: true, namespaceMode: 'both' });
-
-      withScope(() => {
-        const { namespaceSubtitle } = useWorkloadDashboard();
+      await flushPromises();
 
-        expect(namespaceSubtitle.value).toStrictEqual('%workloadDashboard.subtitle.allNamespaces%{"count":0}');
-      });
+      expect(result.namespaceSubtitle.value).toStrictEqual('%workloadDashboard.subtitle.allNamespaces%{"count":42}');
+      wrapper.unmount();
     });
 
-    it('should return userNamespaces subtitle for ALL_USER filter', () => {
-      setupGetters({
+    it('should return userNamespaces subtitle for ALL_USER filter', async() => {
+      const { wrapper, result } = mountComposable({
         isAllNamespaces:  false,
         namespaceMode:    'both',
         namespaceFilters: ['all://user'],
       });
 
-      withScope(() => {
-        const { namespaceSubtitle } = useWorkloadDashboard();
+      await flushPromises();
 
-        expect(namespaceSubtitle.value).toStrictEqual('%workloadDashboard.subtitle.userNamespaces%{"count":0}');
-      });
+      expect(result.namespaceSubtitle.value).toStrictEqual('%workloadDashboard.subtitle.userNamespaces%{"count":42}');
+      wrapper.unmount();
     });
 
-    it('should return systemNamespaces subtitle for ALL_SYSTEM filter', () => {
-      setupGetters({
+    it('should return systemNamespaces subtitle for ALL_SYSTEM filter', async() => {
+      const { wrapper, result } = mountComposable({
         isAllNamespaces:  false,
         namespaceMode:    'both',
         namespaceFilters: ['all://system'],
       });
 
-      withScope(() => {
-        const { namespaceSubtitle } = useWorkloadDashboard();
+      await flushPromises();
 
-        expect(namespaceSubtitle.value).toStrictEqual('%workloadDashboard.subtitle.systemNamespaces%{"count":0}');
-      });
+      expect(result.namespaceSubtitle.value).toStrictEqual('%workloadDashboard.subtitle.systemNamespaces%{"count":42}');
+      wrapper.unmount();
     });
 
-    it('should return project subtitle for project filter', () => {
+    it('should return project subtitle for project filter', async() => {
       const projectId = 'p-12345';
 
-      setupGetters({
+      const { wrapper, result } = mountComposable({
         isAllNamespaces:  false,
         namespaceMode:    'both',
         namespaceFilters: [`project://${ projectId }`],
@@ -171,62 +145,47 @@ describe('composable: useWorkloadDashboard', () => {
         }],
       });
 
-      withScope(() => {
-        const { namespaceSubtitle } = useWorkloadDashboard();
+      await flushPromises();
 
-        expect(namespaceSubtitle.value).toStrictEqual(`%workloadDashboard.subtitle.project%{"name":"My Project","count":0}`);
-      });
+      expect(result.namespaceSubtitle.value).toStrictEqual(`%workloadDashboard.subtitle.project%{"name":"My Project","count":42}`);
+      wrapper.unmount();
     });
 
-    it('should return namespace subtitle for namespace filter', () => {
-      setupGetters({
+    it('should return namespace subtitle for namespace filter', async() => {
+      const { wrapper, result } = mountComposable({
         isAllNamespaces:  false,
         namespaceMode:    'both',
         namespaceFilters: ['ns://cattle-system'],
       });
 
-      withScope(() => {
-        const { namespaceSubtitle } = useWorkloadDashboard();
+      await flushPromises();
 
-        expect(namespaceSubtitle.value).toStrictEqual('%workloadDashboard.subtitle.namespace%{"name":"cattle-system","count":0}');
-      });
+      expect(result.namespaceSubtitle.value).toStrictEqual('%workloadDashboard.subtitle.namespace%{"name":"cattle-system","count":42}');
+      wrapper.unmount();
     });
 
-    it('should return multipleSelected subtitle for multiple filters', () => {
-      setupGetters({
+    it('should return multipleSelected subtitle for multiple filters', async() => {
+      const { wrapper, result } = mountComposable({
         isAllNamespaces:  false,
         namespaceMode:    'both',
         namespaceFilters: ['ns://default', 'ns://kube-system'],
       });
 
-      withScope(() => {
-        const { namespaceSubtitle } = useWorkloadDashboard();
-
-        expect(namespaceSubtitle.value).toStrictEqual('%workloadDashboard.subtitle.multipleSelected%{"selected":2,"count":0}');
-      });
-    });
-
-    it('should check namespaceMode before isAllNamespaces', () => {
-      setupGetters({
-        isAllNamespaces: true,
-        namespaceMode:   'namespaced',
-      });
-
-      withScope(() => {
-        const { namespaceSubtitle } = useWorkloadDashboard();
+      await flushPromises();
 
-        expect(namespaceSubtitle.value).toStrictEqual('%workloadDashboard.subtitle.namespacedOnly%{"count":0}');
-      });
+      expect(result.namespaceSubtitle.value).toStrictEqual('%workloadDashboard.subtitle.multipleSelected%{"selected":2,"count":42}');
+      wrapper.unmount();
     });
   });
 
   describe('hasWorkloads', () => {
-    it('should return false when there are no summaries', () => {
-      withScope(() => {
-        const { hasWorkloads } = useWorkloadDashboard();
+    it('should return false when there are no summaries', async() => {
+      const { wrapper, result } = mountComposable({ 'cluster/canList': () => false });
 
-        expect(hasWorkloads.value).toStrictEqual(false);
-      });
+      await flushPromises();
+
+      expect(result.hasWorkloads.value).toStrictEqual(false);
+      wrapper.unmount();
     });
 
     it('should return true when summaries contain workloads', async() => {
@@ -240,50 +199,53 @@ describe('composable: useWorkloadDashboard', () => {
   });
 
   describe('resourceRoute', () => {
-    it('should return route without query when no stateNames provided', () => {
-      withScope(() => {
-        const { resourceRoute } = useWorkloadDashboard();
-        const route = resourceRoute('apps.deployment');
-
-        expect(route).toStrictEqual({
-          name:   'c-cluster-product-resource',
-          params: {
-            cluster:  'local',
-            product:  'explorer',
-            resource: 'apps.deployment',
-          },
-        });
+    it('should return route without query when no stateNames provided', async() => {
+      const { wrapper, result } = mountComposable();
+
+      await flushPromises();
+      const route = result.resourceRoute('apps.deployment');
+
+      expect(route).toStrictEqual({
+        name:   'c-cluster-product-resource',
+        params: {
+          cluster:  'local',
+          product:  'explorer',
+          resource: 'apps.deployment',
+        },
       });
+      wrapper.unmount();
     });
 
-    it('should include state filter query when stateNames are provided', () => {
-      withScope(() => {
-        const { resourceRoute } = useWorkloadDashboard();
-        const route = resourceRoute('apps.deployment', ['running', 'active']);
+    it('should include state filter query when stateNames are provided', async() => {
+      const { wrapper, result } = mountComposable();
 
-        expect((route as any).query).toStrictEqual({ q: '"metadata.state.name":"running","metadata.state.name":"active"' });
-      });
+      await flushPromises();
+      const route = result.resourceRoute('apps.deployment', ['running', 'active']);
+
+      expect((route as any).query).toStrictEqual({ q: '"metadata.state.name":"running","metadata.state.name":"active"' });
+      wrapper.unmount();
     });
 
-    it('should not include query for empty stateNames array', () => {
-      withScope(() => {
-        const { resourceRoute } = useWorkloadDashboard();
-        const route = resourceRoute('apps.deployment', []);
+    it('should not include query for empty stateNames array', async() => {
+      const { wrapper, result } = mountComposable();
 
-        expect((route as any).query).toBeUndefined();
-      });
+      await flushPromises();
+      const route = result.resourceRoute('apps.deployment', []);
+
+      expect((route as any).query).toBeUndefined();
+      wrapper.unmount();
     });
   });
 
   describe('resetNamespaceFilter', () => {
-    it('should dispatch switchNamespaces with empty ids', () => {
-      withScope(() => {
-        const { resetNamespaceFilter } = useWorkloadDashboard();
+    it('should dispatch switchNamespaces with empty ids', async() => {
+      const { wrapper, result } = mountComposable();
 
-        resetNamespaceFilter();
+      await flushPromises();
+      result.resetNamespaceFilter();
 
-        expect(mockDispatch).toHaveBeenCalledWith('switchNamespaces', { ids: [], key: 'local' });
-      });
+      expect(mockDispatch).toHaveBeenCalledWith('switchNamespaces', { ids: [], key: 'local' });
+      wrapper.unmount();
     });
   });
 
diff --git a/shell/pages/c/_cluster/explorer/workload-dashboard/composable.ts b/shell/pages/c/_cluster/explorer/workload-dashboard/composable.ts
index 70c6b3e864f..7d6e9b4adc7 100644
--- a/shell/pages/c/_cluster/explorer/workload-dashboard/composable.ts
+++ b/shell/pages/c/_cluster/explorer/workload-dashboard/composable.ts
@@ -1,5 +1,5 @@
 import {
-  ref, computed, watch, onMounted, onBeforeUnmount
+  reactive, ref, computed, watch, onMounted, onBeforeUnmount
 } from 'vue';
 import { useStore } from 'vuex';
 import type { RouteLocationRaw } from 'vue-router';
@@ -7,8 +7,7 @@ import { NAMESPACE } from '@shell/config/types';
 import { STATES, colorForState } from '@shell/plugins/dashboard-store/resource-class';
 import { StateColor } from '@shell/utils/style';
 import { useI18n } from '@shell/composables/useI18n';
-import { STATE_COLOR_MAP, ALL_NAMESPACES } from '@shell/store/prefs';
-import pAndNFiltering from '@shell/plugins/steve/projectAndNamespaceFiltering.utils';
+import { ALL_NAMESPACES } from '@shell/store/prefs';
 import {
   NAMESPACE_FILTER_ALL_USER,
   NAMESPACE_FILTER_ALL_SYSTEM,
@@ -16,17 +15,23 @@ import {
   NAMESPACE_FILTER_NS_FULL_PREFIX,
 } from '@shell/utils/namespace-filter';
 import stevePaginationUtils from '@shell/plugins/steve/steve-pagination-utils';
-import { PaginationFilterEquality } from '@shell/types/store/pagination.types';
+import { PaginationParamFilter } from '@shell/types/store/pagination.types';
 import {
   WORKLOAD_RESOURCE_TYPES, COLOR_ORDER,
-  type SummaryEntry, type WorkloadEntry, type StateCard, type ByStateLayout, type ByTypeCard,
+  type WorkloadDashboardSummaryEntry,
+  type WorkloadDashboardEntry,
+  type WorkloadDashboardStateCard,
+  type WorkloadDashboardByStateLayout,
+  type WorkloadDashboardByTypeCard,
 } from './types';
 
+const stateColorCache = reactive<Record<string, StateColor>>({});
+
 export function useWorkloadDashboard() {
   const store = useStore();
   const { t } = useI18n(store);
 
-  const summaries = ref<SummaryEntry[]>([]);
+  const summaries = ref<WorkloadDashboardSummaryEntry[]>([]);
   const fetchError = ref<string | null>(null);
   const loading = ref(true);
   let pollTimer: ReturnType<typeof setInterval> | null = null;
@@ -35,41 +40,29 @@ export function useWorkloadDashboard() {
 
   // ── State color cache ──
 
-  const stateColorMap = computed<Record<string, StateColor>>(() => {
-    const all = store.getters['prefs/get'](STATE_COLOR_MAP) || {};
-
-    return all[clusterId.value] || {};
-  });
-
-  function saveStateColorMap(updates: Record<string, StateColor>): void {
-    const all = store.getters['prefs/get'](STATE_COLOR_MAP) || {};
-    const current = all[clusterId.value] || {};
-
-    store.dispatch('prefs/set', {
-      key:   STATE_COLOR_MAP,
-      value: { ...all, [clusterId.value]: { ...current, ...updates } },
-    });
-  }
-
   function toStateColor(state: string): StateColor {
     const key = (state || '').toLowerCase();
-    const cached = stateColorMap.value[key];
 
-    if (cached) {
-      return cached;
+    if (stateColorCache[key]) {
+      return stateColorCache[key];
     }
 
     const config = STATES[key];
     const color = config?.color || 'info';
+    const resolved = (color === 'darker' ? 'disabled' : color) as StateColor;
 
-    return (color === 'darker' ? 'disabled' : color) as StateColor;
+    stateColorCache[key] = resolved;
+
+    return resolved;
   }
 
   // ── Namespace filtering ──
 
   const isAllNamespaces = computed<boolean>(() => store.getters['isAllNamespaces']);
 
-  const namespaceFilterParam = computed<string>(() => {
+  const namespaceFilterParam = ref('');
+
+  function buildNamespaceFilterParam(): string {
     const selection: string[] = store.getters['namespaceFilters'];
     const { projectsOrNamespaces, filters } = stevePaginationUtils.createParamsFromNsFilter({
       allNamespaces:                 store.getters['cluster/all'](NAMESPACE),
@@ -80,30 +73,32 @@ export function useWorkloadDashboard() {
       productHidesSystemNamespaces:  store.getters['currentProduct']?.hideSystemResources,
     });
 
-    const parts: string[] = [];
-
-    const nsValues = projectsOrNamespaces.flatMap((p) => p.fields.map((f) => f.value || ''));
-    const pAndN = pAndNFiltering.createParam(nsValues);
-
-    if (pAndN) {
-      parts.push(pAndN);
-    }
-
-    for (const f of filters) {
-      for (const field of f.fields) {
-        const equality = field.equality || '=';
-        const val = [PaginationFilterEquality.IN, PaginationFilterEquality.NOT_IN].includes(equality as PaginationFilterEquality) ? `(${ field.value })` : field.value;
-
-        parts.push(`filter=${ field.field }${ equality }${ val }`);
+    // Getting the first schema is sufficient since the namespace filter param structure is the same across all resource types
+    const schema = WORKLOAD_RESOURCE_TYPES
+      .map((type) => store.getters['cluster/schemaFor'](type))
+      .find((s) => !!s);
+
+    // To generate proper params path to be used
+    const path = stevePaginationUtils.createParamsForPagination({
+      schema,
+      opt: {
+        pagination: {
+          filters,
+          projectsOrNamespaces,
+          page: 1,
+          sort: [],
+        }
       }
-    }
+    }) || '';
 
-    return parts.join('&');
-  });
+    return path.replace(/page=\d+&?/g, '').replace(/pagesize=\d+&?/g, '').replace(/&$/, '');
+  }
 
-  // ── Subtitle ──
+  watch(() => store.getters['namespaceFilters'], () => {
+    namespaceFilterParam.value = buildNamespaceFilterParam();
+  }, { immediate: true });
 
-  const namespaceMode = computed<string>(() => store.getters['namespaceMode']);
+  // ── Subtitle ──
 
   const totalWorkloads = computed<number>(() => {
     return workloadData.value.reduce((sum, w) => sum + (w.error ? 0 : w.total), 0);
@@ -113,14 +108,6 @@ export function useWorkloadDashboard() {
     const count = totalWorkloads.value;
     const filters: string[] = store.getters['namespaceFilters'];
 
-    if (namespaceMode.value === 'namespaced') {
-      return t('workloadDashboard.subtitle.namespacedOnly', { count });
-    }
-
-    if (namespaceMode.value === 'cluster') {
-      return t('workloadDashboard.subtitle.clusterOnly', { count });
-    }
-
     if (isAllNamespaces.value) {
       return t('workloadDashboard.subtitle.allNamespaces', { count });
     }
@@ -156,7 +143,7 @@ export function useWorkloadDashboard() {
 
   // ── Workload data ──
 
-  const workloadData = computed<WorkloadEntry[]>(() => {
+  const workloadData = computed<WorkloadDashboardEntry[]>(() => {
     return summaries.value.map((entry) => {
       const label = t(`typeLabel."${ entry.type }"`, { count: 2 })?.trim() || entry.type;
       const stateCounts: Record<string, number> = {};
@@ -187,7 +174,7 @@ export function useWorkloadDashboard() {
 
   // ── By State cards ──
 
-  const byStateCards = computed<StateCard[]>(() => {
+  const byStateCards = computed<WorkloadDashboardStateCard[]>(() => {
     const colorGroups: Record<string, Record<string, { count: number; type: string; stateNames: Set<string> }>> = {
       error:    {},
       warning:  {},
@@ -228,7 +215,7 @@ export function useWorkloadDashboard() {
       }));
   });
 
-  const byStateLayout = computed<ByStateLayout>(() => {
+  const byStateLayout = computed<WorkloadDashboardByStateLayout>(() => {
     const cards = byStateCards.value;
     const hero = cards.find((c) => c.color === 'success') || null;
     const others = cards.filter((c) => c !== hero);
@@ -257,12 +244,12 @@ export function useWorkloadDashboard() {
 
   // ── By Type cards ──
 
-  const byTypeCards = computed<ByTypeCard[]>(() => {
+  const byTypeCards = computed<WorkloadDashboardByTypeCard[]>(() => {
     return workloadData.value.filter((w) => !w.error && w.total > 0).map((w) => {
       const resources = Object.entries(w.stateCounts)
         .sort(([a], [b]) => (COLOR_ORDER[toStateColor(a)] ?? 5) - (COLOR_ORDER[toStateColor(b)] ?? 5))
         .map(([state, count]) => ({
-          stateDisplay:     state?.charAt(0).toUpperCase() + state?.slice(1),
+          stateDisplay:     state ? state.charAt(0).toUpperCase() + state.slice(1) : '',
           stateId:          state,
           stateSimpleColor: toStateColor(state),
           count,
@@ -286,7 +273,7 @@ export function useWorkloadDashboard() {
   }
 
   function resourceRoute(type: string, stateNames?: string[]): RouteLocationRaw {
-    const loc: RouteLocationRaw = {
+    const loc: { name: string; params: Record<string, string>; query?: Record<string, string> } = {
       name:   'c-cluster-product-resource',
       params: {
         cluster:  clusterId.value,
@@ -298,7 +285,7 @@ export function useWorkloadDashboard() {
     if (stateNames?.length) {
       const q = stateNames.map((s) => `"metadata.state.name":"${ s }"`).join(',');
 
-      (loc as any).query = { q };
+      loc.query = { q };
     }
 
     return loc;
@@ -306,7 +293,7 @@ export function useWorkloadDashboard() {
 
   // ── State color resolution ──
 
-  async function resolveStateColors(entries: SummaryEntry[]): Promise<void> {
+  async function resolveStateColors(entries: WorkloadDashboardSummaryEntry[]): Promise<void> {
     const unresolvedStates = new Map<string, { originalName: string; type: string }>();
 
     for (const entry of entries) {
@@ -319,7 +306,7 @@ export function useWorkloadDashboard() {
           for (const stateName of Object.keys(s.counts)) {
             const key = stateName.toLowerCase();
 
-            if (!stateColorMap.value[key] && !unresolvedStates.has(key)) {
+            if (!stateColorCache[key] && !unresolvedStates.has(key)) {
               unresolvedStates.set(key, { originalName: stateName, type: entry.type });
             }
           }
@@ -340,7 +327,20 @@ export function useWorkloadDashboard() {
 
       await Promise.all(batch.map(async([stateKey, { originalName, type }]) => {
         try {
-          const url = `/v1/${ type }?limit=1&filter=metadata.state.name=${ originalName }`;
+          const schema = store.getters['cluster/schemaFor'](type);
+          const params = stevePaginationUtils.createParamsForPagination({
+            schema,
+            opt: {
+              pagination: {
+                page:                 1,
+                pageSize:             1,
+                sort:                 [],
+                filters:              [PaginationParamFilter.createSingleField({ field: 'metadata.state.name', value: originalName })],
+                projectsOrNamespaces: [],
+              }
+            }
+          });
+          const url = `/v1/${ type }?${ params }`;
           const res = await store.dispatch('cluster/request', { url });
           const resource = res?.data?.[0];
 
@@ -359,7 +359,7 @@ export function useWorkloadDashboard() {
     }
 
     if (Object.keys(newColors).length > 0) {
-      saveStateColorMap(newColors);
+      Object.assign(stateColorCache, newColors);
     }
   }
 
@@ -367,14 +367,12 @@ export function useWorkloadDashboard() {
 
   async function fetchSummaries(): Promise<void> {
     try {
-      const workloadPromises = WORKLOAD_RESOURCE_TYPES.map(async(type): Promise<SummaryEntry> => {
-        const schema = store.getters['cluster/schemaFor'](type);
+      const accessibleTypes = WORKLOAD_RESOURCE_TYPES.filter(
+        (type) => store.getters['cluster/canList'](type)
+      );
 
-        if (!schema) {
-          return {
-            type, summary: null, error: t('workloadDashboard.errors.noAccess', { type })
-          };
-        }
+      const workloadPromises = accessibleTypes.map(async(type): Promise<WorkloadDashboardSummaryEntry> => {
+        const schema = store.getters['cluster/schemaFor'](type);
 
         try {
           let url = `${ schema.links.collection }?summary=metadata.state.name`;
@@ -405,31 +403,45 @@ export function useWorkloadDashboard() {
     }
   }
 
-  function resetPollTimer(): void {
+  function stopPollTimer(): void {
     if (pollTimer) {
       clearInterval(pollTimer);
+      pollTimer = null;
     }
+  }
+
+  function startPollTimer(): void {
+    stopPollTimer();
 
     pollTimer = setInterval(() => {
       fetchSummaries();
     }, 5000);
   }
 
+  function handleVisibilityChange(): void {
+    if (document.hidden) {
+      stopPollTimer();
+    } else {
+      fetchSummaries();
+      startPollTimer();
+    }
+  }
+
   watch(namespaceFilterParam, () => {
     fetchSummaries();
-    resetPollTimer();
+    startPollTimer();
   });
 
   onMounted(async() => {
     await fetchSummaries();
     loading.value = false;
-    resetPollTimer();
+    startPollTimer();
+    document.addEventListener('visibilitychange', handleVisibilityChange);
   });
 
   onBeforeUnmount(() => {
-    if (pollTimer) {
-      clearInterval(pollTimer);
-    }
+    stopPollTimer();
+    document.removeEventListener('visibilitychange', handleVisibilityChange);
   });
 
   return {
diff --git a/shell/pages/c/_cluster/explorer/workload-dashboard/types.ts b/shell/pages/c/_cluster/explorer/workload-dashboard/types.ts
index b07edf83584..bea4ccca8db 100644
--- a/shell/pages/c/_cluster/explorer/workload-dashboard/types.ts
+++ b/shell/pages/c/_cluster/explorer/workload-dashboard/types.ts
@@ -2,13 +2,13 @@ import { WORKLOAD_TYPES, POD } from '@shell/config/types';
 import { StateColor } from '@shell/utils/style';
 import type { RouteLocationRaw } from 'vue-router';
 
-export interface SummaryEntry {
+export interface WorkloadDashboardSummaryEntry {
   type: string;
   summary: { property: string; counts: Record<string, number> }[] | null;
   error: string | null;
 }
 
-export interface WorkloadEntry {
+export interface WorkloadDashboardEntry {
   type: string;
   label: string;
   total: number;
@@ -16,7 +16,7 @@ export interface WorkloadEntry {
   error: string | null;
 }
 
-export interface StateCardRow {
+export interface WorkloadDashboardStateCardRow {
   label: string;
   color: StateColor;
   type: string;
@@ -24,20 +24,20 @@ export interface StateCardRow {
   counts: { label: string; count: number }[];
 }
 
-export interface StateCard {
+export interface WorkloadDashboardStateCard {
   color: StateColor;
-  rows: StateCardRow[];
+  rows: WorkloadDashboardStateCardRow[];
 }
 
-export interface ByStateLayout {
-  hero: StateCard | null;
-  subHero: StateCard | null;
-  cards: StateCard[];
+export interface WorkloadDashboardByStateLayout {
+  hero: WorkloadDashboardStateCard | null;
+  subHero: WorkloadDashboardStateCard | null;
+  cards: WorkloadDashboardStateCard[];
   heroMode: string;
   gridRows: number;
 }
 
-export interface ByTypeCard {
+export interface WorkloadDashboardByTypeCard {
   title: string;
   type: string;
   resources: {
@@ -48,7 +48,7 @@ export interface ByTypeCard {
   }[];
 }
 
-export type ResourceRouteFn = (type: string, stateNames?: string[]) => RouteLocationRaw;
+export type WorkloadDashboardResourceRouteFn = (type: string, stateNames?: string[]) => RouteLocationRaw;
 
 export const WORKLOAD_RESOURCE_TYPES: string[] = [
   WORKLOAD_TYPES.CRON_JOB,

From 36431d649241150234cfd3decf914be485273f75 Mon Sep 17 00:00:00 2001
From: Marcelo Fukumoto <marcelo.fukumoto@suse.com>
Date: Tue, 26 May 2026 21:20:37 +0200
Subject: [PATCH 20/28] Removed prefs STATE_COLOR and fixed bug on state color
 request by cluster

---
 .../pages/c/_cluster/explorer/workload-dashboard/composable.ts  | 2 +-
 shell/store/prefs.js                                            | 1 -
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/shell/pages/c/_cluster/explorer/workload-dashboard/composable.ts b/shell/pages/c/_cluster/explorer/workload-dashboard/composable.ts
index 7d6e9b4adc7..8c4c1101f23 100644
--- a/shell/pages/c/_cluster/explorer/workload-dashboard/composable.ts
+++ b/shell/pages/c/_cluster/explorer/workload-dashboard/composable.ts
@@ -340,7 +340,7 @@ export function useWorkloadDashboard() {
               }
             }
           });
-          const url = `/v1/${ type }?${ params }`;
+          const url = `${ schema.links.collection }?${ params }`;
           const res = await store.dispatch('cluster/request', { url });
           const resource = res?.data?.[0];
 
diff --git a/shell/store/prefs.js b/shell/store/prefs.js
index b2bc9db47ec..fc10c9b4139 100644
--- a/shell/store/prefs.js
+++ b/shell/store/prefs.js
@@ -51,7 +51,6 @@ const asCookie = true; // Store as a cookie so that it's available before auth +
 export const CLUSTER = create('cluster', '');
 export const LAST_NAMESPACE = create('last-namespace', '');
 export const NAMESPACE_FILTERS = create('ns-by-cluster', {}, { parseJSON });
-export const STATE_COLOR_MAP = create('state-color-map', {}, { parseJSON, asUserPreference: false });
 export const WORKSPACE = create('workspace', '');
 export const EXPANDED_GROUPS = create('open-groups', ['cluster', 'policy', 'rbac', 'serviceDiscovery', 'storage', 'workload'], { parseJSON });
 export const FAVORITE_TYPES = create('fav-type', [], { parseJSON });

From 201d7bd65f4a4f1b444fdba86fc3ef502f712473 Mon Sep 17 00:00:00 2001
From: Marcelo Fukumoto <marcelo.fukumoto@suse.com>
Date: Tue, 26 May 2026 21:53:57 +0200
Subject: [PATCH 21/28] Move the stateColor to a composable

---
 shell/composables/useStateColor.test.ts       | 306 ++++++++++++++++++
 shell/composables/useStateColor.ts            | 108 +++++++
 .../explorer/workload-dashboard/composable.ts | 100 +-----
 3 files changed, 418 insertions(+), 96 deletions(-)
 create mode 100644 shell/composables/useStateColor.test.ts
 create mode 100644 shell/composables/useStateColor.ts

diff --git a/shell/composables/useStateColor.test.ts b/shell/composables/useStateColor.test.ts
new file mode 100644
index 00000000000..8635ff454c8
--- /dev/null
+++ b/shell/composables/useStateColor.test.ts
@@ -0,0 +1,306 @@
+import { useStateColor } from '@shell/composables/useStateColor';
+import type { StateSummaryEntry } from '@shell/composables/useStateColor';
+
+const mockGetters: Record<string, any> = {};
+const mockDispatch = jest.fn();
+
+jest.mock('vuex', () => ({
+  useStore: () => ({
+    getters: new Proxy(mockGetters, {
+      get(target, prop: string) {
+        return target[prop];
+      },
+    }),
+    dispatch: mockDispatch,
+  }),
+}));
+
+jest.mock('@shell/plugins/steve/steve-pagination-utils', () => ({
+  __esModule: true,
+  default:    { createParamsForPagination: jest.fn(() => 'page=1&pagesize=1') },
+}));
+
+jest.mock('@shell/plugins/steve/projectAndNamespaceFiltering.utils', () => ({
+  __esModule: true,
+  default:    { createParam: jest.fn(() => '') },
+}));
+
+describe('composable: useStateColor', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    Object.keys(mockGetters).forEach((key) => delete mockGetters[key]);
+  });
+
+  describe('toStateColor', () => {
+    it.each([
+      ['running', 'success'],
+      ['active', 'success'],
+      ['completed', 'success'],
+      ['error', 'error'],
+      ['failed', 'error'],
+      ['stopped', 'error'],
+      ['warning', 'warning'],
+      ['initializing', 'warning'],
+      ['pending', 'info'],
+      ['waiting', 'info'],
+      ['creating', 'info'],
+    ])('should return %s color for known state "%s"', (state, expectedColor) => {
+      const { toStateColor } = useStateColor();
+
+      expect(toStateColor(state)).toStrictEqual(expectedColor);
+    });
+
+    it('should return "disabled" for state with "darker" color', () => {
+      const { toStateColor } = useStateColor();
+
+      expect(toStateColor('off')).toStrictEqual('disabled');
+    });
+
+    it('should return "info" for unknown states', () => {
+      const { toStateColor } = useStateColor();
+
+      expect(toStateColor('unknown-state')).toStrictEqual('info');
+    });
+
+    it('should be case-insensitive', () => {
+      const { toStateColor } = useStateColor();
+
+      expect(toStateColor('Running')).toStrictEqual(toStateColor('running'));
+      expect(toStateColor('ERROR')).toStrictEqual(toStateColor('error'));
+    });
+
+    it('should handle empty string', () => {
+      const { toStateColor } = useStateColor();
+
+      expect(toStateColor('')).toStrictEqual('info');
+    });
+
+    it('should cache results across calls', () => {
+      const { toStateColor } = useStateColor();
+
+      const first = toStateColor('running');
+      const second = toStateColor('running');
+
+      expect(first).toStrictEqual(second);
+      expect(first).toStrictEqual('success');
+    });
+  });
+
+  describe('resolveStateColors', () => {
+    const schema = { links: { collection: '/k8s/clusters/local/v1/pods' } };
+
+    beforeEach(() => {
+      mockGetters['cluster/schemaFor'] = () => schema;
+    });
+
+    it('should not make requests when all states are already known', async() => {
+      const { resolveStateColors } = useStateColor();
+
+      const entries: StateSummaryEntry[] = [{
+        type:    'pod',
+        summary: [{ property: 'metadata.state.name', counts: { running: 5 } }],
+      }];
+
+      await resolveStateColors(entries);
+
+      expect(mockDispatch).not.toHaveBeenCalled();
+    });
+
+    it('should fetch a resource to resolve unknown state colors', async() => {
+      const { resolveStateColors } = useStateColor();
+
+      mockDispatch.mockResolvedValueOnce({
+        data: [{
+          metadata: {
+            state: {
+              name: 'customState', error: true, transitioning: false
+            }
+          }
+        }],
+      });
+
+      const entries: StateSummaryEntry[] = [{
+        type:    'pod',
+        summary: [{ property: 'metadata.state.name', counts: { customState: 3 } }],
+      }];
+
+      await resolveStateColors(entries);
+
+      expect(mockDispatch).toHaveBeenCalledWith('cluster/request', { url: `${ schema.links.collection }?page=1&pagesize=1` });
+    });
+
+    it('should resolve error states from resource metadata', async() => {
+      const { toStateColor, resolveStateColors } = useStateColor();
+
+      mockDispatch.mockResolvedValueOnce({
+        data: [{
+          metadata: {
+            state: {
+              name: 'init:Error', error: true, transitioning: false
+            }
+          }
+        }],
+      });
+
+      const entries: StateSummaryEntry[] = [{
+        type:    'pod',
+        summary: [{ property: 'metadata.state.name', counts: { 'init:Error': 1 } }],
+      }];
+
+      await resolveStateColors(entries);
+
+      expect(toStateColor('init:Error')).toStrictEqual('error');
+    });
+
+    it('should resolve transitioning states as info', async() => {
+      const { toStateColor, resolveStateColors } = useStateColor();
+
+      mockDispatch.mockResolvedValueOnce({
+        data: [{
+          metadata: {
+            state: {
+              name: 'init:0/1', error: false, transitioning: true
+            }
+          }
+        }],
+      });
+
+      const entries: StateSummaryEntry[] = [{
+        type:    'pod',
+        summary: [{ property: 'metadata.state.name', counts: { 'init:0/1': 2 } }],
+      }];
+
+      await resolveStateColors(entries);
+
+      expect(toStateColor('init:0/1')).toStrictEqual('info');
+    });
+
+    it('should skip entries with null summary', async() => {
+      const { resolveStateColors } = useStateColor();
+
+      const entries: StateSummaryEntry[] = [{
+        type:    'pod',
+        summary: null,
+      }];
+
+      await resolveStateColors(entries);
+
+      expect(mockDispatch).not.toHaveBeenCalled();
+    });
+
+    it('should skip summary properties that are not metadata.state.name', async() => {
+      const { resolveStateColors } = useStateColor();
+
+      const entries: StateSummaryEntry[] = [{
+        type:    'pod',
+        summary: [{ property: 'metadata.namespace', counts: { default: 5 } }],
+      }];
+
+      await resolveStateColors(entries);
+
+      expect(mockDispatch).not.toHaveBeenCalled();
+    });
+
+    it('should handle API errors gracefully and fall back to default color', async() => {
+      const { toStateColor, resolveStateColors } = useStateColor();
+
+      mockDispatch.mockRejectedValueOnce(new Error('network error'));
+
+      const entries: StateSummaryEntry[] = [{
+        type:    'pod',
+        summary: [{ property: 'metadata.state.name', counts: { networkFailState: 1 } }],
+      }];
+
+      await resolveStateColors(entries);
+
+      expect(toStateColor('networkFailState')).toStrictEqual('info');
+    });
+
+    it('should handle response with no resource data', async() => {
+      const { toStateColor, resolveStateColors } = useStateColor();
+
+      mockDispatch.mockResolvedValueOnce({ data: [] });
+
+      const entries: StateSummaryEntry[] = [{
+        type:    'pod',
+        summary: [{ property: 'metadata.state.name', counts: { emptyResult: 1 } }],
+      }];
+
+      await resolveStateColors(entries);
+
+      expect(toStateColor('emptyResult')).toStrictEqual('info');
+    });
+
+    it('should handle resource without metadata.state', async() => {
+      const { toStateColor, resolveStateColors } = useStateColor();
+
+      mockDispatch.mockResolvedValueOnce({ data: [{ metadata: {} }] });
+
+      const entries: StateSummaryEntry[] = [{
+        type:    'pod',
+        summary: [{ property: 'metadata.state.name', counts: { noStateField: 1 } }],
+      }];
+
+      await resolveStateColors(entries);
+
+      expect(toStateColor('noStateField')).toStrictEqual('info');
+    });
+
+    it('should use schema.links.collection for the request URL', async() => {
+      const { resolveStateColors } = useStateColor();
+      const customSchema = { links: { collection: '/k8s/clusters/c-m-abc123/v1/apps.deployments' } };
+
+      mockGetters['cluster/schemaFor'] = () => customSchema;
+      mockDispatch.mockResolvedValueOnce({ data: [] });
+
+      const entries: StateSummaryEntry[] = [{
+        type:    'apps.deployments',
+        summary: [{ property: 'metadata.state.name', counts: { urlTestState: 1 } }],
+      }];
+
+      await resolveStateColors(entries);
+
+      expect(mockDispatch).toHaveBeenCalledWith('cluster/request', { url: `${ customSchema.links.collection }?page=1&pagesize=1` });
+    });
+
+    it('should resolve multiple unknown states across entries', async() => {
+      const { toStateColor, resolveStateColors } = useStateColor();
+
+      mockDispatch
+        .mockResolvedValueOnce({
+          data: [{
+            metadata: {
+              state: {
+                name: 'stateA', error: true, transitioning: false
+              }
+            }
+          }],
+        })
+        .mockResolvedValueOnce({
+          data: [{
+            metadata: {
+              state: {
+                name: 'stateB', error: false, transitioning: false
+              }
+            }
+          }],
+        });
+
+      const entries: StateSummaryEntry[] = [
+        {
+          type:    'pod',
+          summary: [{ property: 'metadata.state.name', counts: { stateA: 1 } }],
+        },
+        {
+          type:    'apps.deployments',
+          summary: [{ property: 'metadata.state.name', counts: { stateB: 2 } }],
+        },
+      ];
+
+      await resolveStateColors(entries);
+
+      expect(toStateColor('stateA')).toStrictEqual('error');
+      expect(toStateColor('stateB')).toStrictEqual('warning');
+    });
+  });
+});
diff --git a/shell/composables/useStateColor.ts b/shell/composables/useStateColor.ts
new file mode 100644
index 00000000000..02889402b49
--- /dev/null
+++ b/shell/composables/useStateColor.ts
@@ -0,0 +1,108 @@
+import { reactive } from 'vue';
+import { useStore } from 'vuex';
+import { STATES, colorForState } from '@shell/plugins/dashboard-store/resource-class';
+import type { StateColor } from '@shell/utils/style';
+import stevePaginationUtils from '@shell/plugins/steve/steve-pagination-utils';
+import { PaginationParamFilter } from '@shell/types/store/pagination.types';
+
+export interface StateSummaryEntry {
+  type: string;
+  summary: { property: string; counts: Record<string, number> }[] | null;
+}
+
+const stateColorCache = reactive<Record<string, StateColor>>({});
+
+export function useStateColor() {
+  const store = useStore();
+
+  function toStateColor(state: string): StateColor {
+    const key = (state || '').toLowerCase();
+
+    if (stateColorCache[key]) {
+      return stateColorCache[key];
+    }
+
+    const config = STATES[key];
+    const color = config?.color || 'info';
+    const resolved = (color === 'darker' ? 'disabled' : color) as StateColor;
+
+    stateColorCache[key] = resolved;
+
+    return resolved;
+  }
+
+  async function resolveStateColors(entries: StateSummaryEntry[]): Promise<void> {
+    const unresolvedStates = new Map<string, { originalName: string; type: string }>();
+
+    for (const entry of entries) {
+      if (!entry.summary) {
+        continue;
+      }
+
+      for (const s of entry.summary) {
+        if (s.property === 'metadata.state.name') {
+          for (const stateName of Object.keys(s.counts)) {
+            const key = stateName.toLowerCase();
+
+            if (!stateColorCache[key] && !unresolvedStates.has(key)) {
+              unresolvedStates.set(key, { originalName: stateName, type: entry.type });
+            }
+          }
+        }
+      }
+    }
+
+    if (unresolvedStates.size === 0) {
+      return;
+    }
+
+    const newColors: Record<string, StateColor> = {};
+    const pending = Array.from(unresolvedStates.entries());
+    const concurrency = 10;
+
+    for (let i = 0; i < pending.length; i += concurrency) {
+      const batch = pending.slice(i, i + concurrency);
+
+      await Promise.all(batch.map(async([stateKey, { originalName, type }]) => {
+        try {
+          const schema = store.getters['cluster/schemaFor'](type);
+          const params = stevePaginationUtils.createParamsForPagination({
+            schema,
+            opt: {
+              pagination: {
+                page:                 1,
+                pageSize:             1,
+                sort:                 [],
+                filters:              [PaginationParamFilter.createSingleField({ field: 'metadata.state.name', value: originalName })],
+                projectsOrNamespaces: [],
+              }
+            }
+          });
+          const url = `${ schema.links.collection }?${ params }`;
+          const res = await store.dispatch('cluster/request', { url });
+          const resource = res?.data?.[0];
+
+          if (!resource?.metadata?.state) {
+            return;
+          }
+
+          const { error: isError, transitioning, name } = resource.metadata.state;
+          const rawColor = colorForState(name, isError, transitioning).replace('text-', '');
+
+          newColors[stateKey] = (rawColor === 'darker' ? 'disabled' : rawColor) as StateColor;
+        } catch {
+          // Fallback handled by toStateColor via STATES lookup
+        }
+      }));
+    }
+
+    if (Object.keys(newColors).length > 0) {
+      Object.assign(stateColorCache, newColors);
+    }
+  }
+
+  return {
+    toStateColor,
+    resolveStateColors,
+  };
+}
diff --git a/shell/pages/c/_cluster/explorer/workload-dashboard/composable.ts b/shell/pages/c/_cluster/explorer/workload-dashboard/composable.ts
index 8c4c1101f23..99db632ea16 100644
--- a/shell/pages/c/_cluster/explorer/workload-dashboard/composable.ts
+++ b/shell/pages/c/_cluster/explorer/workload-dashboard/composable.ts
@@ -1,12 +1,12 @@
 import {
-  reactive, ref, computed, watch, onMounted, onBeforeUnmount
+  ref, computed, watch, onMounted, onBeforeUnmount
 } from 'vue';
 import { useStore } from 'vuex';
 import type { RouteLocationRaw } from 'vue-router';
 import { NAMESPACE } from '@shell/config/types';
-import { STATES, colorForState } from '@shell/plugins/dashboard-store/resource-class';
-import { StateColor } from '@shell/utils/style';
+import type { StateColor } from '@shell/utils/style';
 import { useI18n } from '@shell/composables/useI18n';
+import { useStateColor } from '@shell/composables/useStateColor';
 import { ALL_NAMESPACES } from '@shell/store/prefs';
 import {
   NAMESPACE_FILTER_ALL_USER,
@@ -15,7 +15,6 @@ import {
   NAMESPACE_FILTER_NS_FULL_PREFIX,
 } from '@shell/utils/namespace-filter';
 import stevePaginationUtils from '@shell/plugins/steve/steve-pagination-utils';
-import { PaginationParamFilter } from '@shell/types/store/pagination.types';
 import {
   WORKLOAD_RESOURCE_TYPES, COLOR_ORDER,
   type WorkloadDashboardSummaryEntry,
@@ -25,11 +24,10 @@ import {
   type WorkloadDashboardByTypeCard,
 } from './types';
 
-const stateColorCache = reactive<Record<string, StateColor>>({});
-
 export function useWorkloadDashboard() {
   const store = useStore();
   const { t } = useI18n(store);
+  const { toStateColor, resolveStateColors } = useStateColor();
 
   const summaries = ref<WorkloadDashboardSummaryEntry[]>([]);
   const fetchError = ref<string | null>(null);
@@ -38,24 +36,6 @@ export function useWorkloadDashboard() {
 
   const clusterId = computed<string>(() => store.getters['clusterId']);
 
-  // ── State color cache ──
-
-  function toStateColor(state: string): StateColor {
-    const key = (state || '').toLowerCase();
-
-    if (stateColorCache[key]) {
-      return stateColorCache[key];
-    }
-
-    const config = STATES[key];
-    const color = config?.color || 'info';
-    const resolved = (color === 'darker' ? 'disabled' : color) as StateColor;
-
-    stateColorCache[key] = resolved;
-
-    return resolved;
-  }
-
   // ── Namespace filtering ──
 
   const isAllNamespaces = computed<boolean>(() => store.getters['isAllNamespaces']);
@@ -291,78 +271,6 @@ export function useWorkloadDashboard() {
     return loc;
   }
 
-  // ── State color resolution ──
-
-  async function resolveStateColors(entries: WorkloadDashboardSummaryEntry[]): Promise<void> {
-    const unresolvedStates = new Map<string, { originalName: string; type: string }>();
-
-    for (const entry of entries) {
-      if (!entry.summary) {
-        continue;
-      }
-
-      for (const s of entry.summary) {
-        if (s.property === 'metadata.state.name') {
-          for (const stateName of Object.keys(s.counts)) {
-            const key = stateName.toLowerCase();
-
-            if (!stateColorCache[key] && !unresolvedStates.has(key)) {
-              unresolvedStates.set(key, { originalName: stateName, type: entry.type });
-            }
-          }
-        }
-      }
-    }
-
-    if (unresolvedStates.size === 0) {
-      return;
-    }
-
-    const newColors: Record<string, StateColor> = {};
-    const pending = Array.from(unresolvedStates.entries());
-    const concurrency = 10;
-
-    for (let i = 0; i < pending.length; i += concurrency) {
-      const batch = pending.slice(i, i + concurrency);
-
-      await Promise.all(batch.map(async([stateKey, { originalName, type }]) => {
-        try {
-          const schema = store.getters['cluster/schemaFor'](type);
-          const params = stevePaginationUtils.createParamsForPagination({
-            schema,
-            opt: {
-              pagination: {
-                page:                 1,
-                pageSize:             1,
-                sort:                 [],
-                filters:              [PaginationParamFilter.createSingleField({ field: 'metadata.state.name', value: originalName })],
-                projectsOrNamespaces: [],
-              }
-            }
-          });
-          const url = `${ schema.links.collection }?${ params }`;
-          const res = await store.dispatch('cluster/request', { url });
-          const resource = res?.data?.[0];
-
-          if (!resource?.metadata?.state) {
-            return;
-          }
-
-          const { error: isError, transitioning, name } = resource.metadata.state;
-          const rawColor = colorForState(name, isError, transitioning).replace('text-', '');
-
-          newColors[stateKey] = (rawColor === 'darker' ? 'disabled' : rawColor) as StateColor;
-        } catch {
-          // Fallback handled by toStateColor via STATES lookup
-        }
-      }));
-    }
-
-    if (Object.keys(newColors).length > 0) {
-      Object.assign(stateColorCache, newColors);
-    }
-  }
-
   // ── Fetching & polling ──
 
   async function fetchSummaries(): Promise<void> {

From e6187843af93ae6c4afccbf692f0221689acc0fb Mon Sep 17 00:00:00 2001
From: Marcelo Fukumoto <marcelo.fukumoto@suse.com>
Date: Tue, 26 May 2026 23:06:38 +0200
Subject: [PATCH 22/28] e2e test fixes

---
 cypress/e2e/po/pages/explorer/workload-dashboard.po.ts | 3 +--
 cypress/e2e/po/side-bars/product-side-nav.po.ts        | 9 +++++++++
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/cypress/e2e/po/pages/explorer/workload-dashboard.po.ts b/cypress/e2e/po/pages/explorer/workload-dashboard.po.ts
index 6257938b42d..24d9194dcec 100644
--- a/cypress/e2e/po/pages/explorer/workload-dashboard.po.ts
+++ b/cypress/e2e/po/pages/explorer/workload-dashboard.po.ts
@@ -22,8 +22,7 @@ export default class WorkloadDashboardPagePo extends PagePo {
     const sideNav = new ProductNavPo();
 
     burgerMenu.goToCluster(clusterId);
-    sideNav.navToSideMenuGroupByLabel('Workloads');
-    sideNav.navToSideMenuEntryByLabel('Workloads');
+    sideNav.navToSideMenuGroupOverviewByLabel('Workloads');
   }
 
   title() {
diff --git a/cypress/e2e/po/side-bars/product-side-nav.po.ts b/cypress/e2e/po/side-bars/product-side-nav.po.ts
index d09463f3d4a..10d571f12a8 100644
--- a/cypress/e2e/po/side-bars/product-side-nav.po.ts
+++ b/cypress/e2e/po/side-bars/product-side-nav.po.ts
@@ -45,6 +45,15 @@ export default class ProductNavPo extends ComponentPo {
     return cy.get('.side-nav', LONG_TIMEOUT_OPT).should('exist').contains('.accordion.has-children', label, LONG_TIMEOUT_OPT).click();
   }
 
+  /**
+   * Navigate to a group's overview page by clicking its header link
+   */
+  navToSideMenuGroupOverviewByLabel(label: string): Cypress.Chainable {
+    return this.self().should('exist', LONG_TIMEOUT_OPT)
+      .contains('.accordion.has-children .header a', label, LONG_TIMEOUT_OPT)
+      .click();
+  }
+
   sideMenuEntryByLabelCount(label: string): Cypress.Chainable {
     return this.sideMenuEntryByLabel(label).parent().find('.count').should('exist')
       .invoke('text');

From 4ba249b479ecec29952f733a729210a9936aacc4 Mon Sep 17 00:00:00 2001
From: Marcelo Fukumoto <marcelo.fukumoto@suse.com>
Date: Wed, 27 May 2026 01:20:24 +0200
Subject: [PATCH 23/28] Fix e2e test

---
 .../e2e/po/pages/explorer/workload-dashboard.po.ts   | 12 +++++++++++-
 cypress/e2e/po/side-bars/product-side-nav.po.ts      |  9 ---------
 .../tests/pages/explorer/workload-dashboard.spec.ts  |  3 ++-
 3 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/cypress/e2e/po/pages/explorer/workload-dashboard.po.ts b/cypress/e2e/po/pages/explorer/workload-dashboard.po.ts
index 24d9194dcec..d44184cf1ea 100644
--- a/cypress/e2e/po/pages/explorer/workload-dashboard.po.ts
+++ b/cypress/e2e/po/pages/explorer/workload-dashboard.po.ts
@@ -22,7 +22,7 @@ export default class WorkloadDashboardPagePo extends PagePo {
     const sideNav = new ProductNavPo();
 
     burgerMenu.goToCluster(clusterId);
-    sideNav.navToSideMenuGroupOverviewByLabel('Workloads');
+    sideNav.navToSideMenuGroupByLabel('Workloads');
   }
 
   title() {
@@ -53,6 +53,16 @@ export default class WorkloadDashboardPagePo extends PagePo {
     return cy.get('[data-testid="resource-detail-status-card"]');
   }
 
+  interceptSummariesAsEmpty() {
+    return cy.intercept('GET', '/v1/*?summary=*', {
+      summary: [], count: 0, data: []
+    }).as('emptySummary');
+  }
+
+  waitForEmptySummaries() {
+    return cy.wait('@emptySummary');
+  }
+
   emptyState() {
     return cy.get('[data-testid="workload-dashboard-empty"]');
   }
diff --git a/cypress/e2e/po/side-bars/product-side-nav.po.ts b/cypress/e2e/po/side-bars/product-side-nav.po.ts
index 10d571f12a8..d09463f3d4a 100644
--- a/cypress/e2e/po/side-bars/product-side-nav.po.ts
+++ b/cypress/e2e/po/side-bars/product-side-nav.po.ts
@@ -45,15 +45,6 @@ export default class ProductNavPo extends ComponentPo {
     return cy.get('.side-nav', LONG_TIMEOUT_OPT).should('exist').contains('.accordion.has-children', label, LONG_TIMEOUT_OPT).click();
   }
 
-  /**
-   * Navigate to a group's overview page by clicking its header link
-   */
-  navToSideMenuGroupOverviewByLabel(label: string): Cypress.Chainable {
-    return this.self().should('exist', LONG_TIMEOUT_OPT)
-      .contains('.accordion.has-children .header a', label, LONG_TIMEOUT_OPT)
-      .click();
-  }
-
   sideMenuEntryByLabelCount(label: string): Cypress.Chainable {
     return this.sideMenuEntryByLabel(label).parent().find('.count').should('exist')
       .invoke('text');
diff --git a/cypress/e2e/tests/pages/explorer/workload-dashboard.spec.ts b/cypress/e2e/tests/pages/explorer/workload-dashboard.spec.ts
index bb9cdeef812..9ce2c30e0d9 100644
--- a/cypress/e2e/tests/pages/explorer/workload-dashboard.spec.ts
+++ b/cypress/e2e/tests/pages/explorer/workload-dashboard.spec.ts
@@ -39,10 +39,11 @@ describe('Workload Dashboard', { testIsolation: 'off', tags: ['@explorer', '@adm
   });
 
   it('should show empty state when namespace filter matches no workloads', () => {
-    cy.updateNamespaceFilter('local', 'none', '{"local":["ns://e2e-nonexistent-ns"]}');
+    workloadDashboard.interceptSummariesAsEmpty();
 
     WorkloadDashboardPagePo.navTo();
     workloadDashboard.waitForPage();
+    workloadDashboard.waitForEmptySummaries();
 
     workloadDashboard.emptyState().should('be.visible');
   });

From e10e265a778989bae6b1835fd95908c08610d751 Mon Sep 17 00:00:00 2001
From: Marcelo Fukumoto <marcelo.fukumoto@suse.com>
Date: Wed, 27 May 2026 01:49:19 +0200
Subject: [PATCH 24/28] Stopped reusing the components

---
 .../Resource/Detail/Card/StatusCard/index.vue |  36 +---
 .../Detail/Card/__tests__/Card.test.ts        |  92 ++--------
 .../Detail/Card/__tests__/PodsCard.test.ts    | 120 ++-----------
 .../Detail/Card/__tests__/StateCard.test.ts   |   7 +-
 .../components/Resource/Detail/Card/index.vue |  82 ++-------
 .../Resource/Detail/ResourceRow.types.ts      |   1 -
 .../Resource/Detail/ResourceRow.vue           |  25 +--
 .../components/Resource/Detail/StatusRow.vue  |  21 +--
 .../workload-dashboard/ByStateSection.vue     |  57 +++----
 .../workload-dashboard/ByTypeSection.vue      |   6 +-
 .../workload-dashboard/WorkloadCard.vue       | 155 +++++++++++++++++
 .../workload-dashboard/WorkloadTypeCard.vue   | 158 ++++++++++++++++++
 12 files changed, 387 insertions(+), 373 deletions(-)
 create mode 100644 shell/pages/c/_cluster/explorer/workload-dashboard/WorkloadCard.vue
 create mode 100644 shell/pages/c/_cluster/explorer/workload-dashboard/WorkloadTypeCard.vue

diff --git a/shell/components/Resource/Detail/Card/StatusCard/index.vue b/shell/components/Resource/Detail/Card/StatusCard/index.vue
index 8145ba15262..c5b8cda97ba 100644
--- a/shell/components/Resource/Detail/Card/StatusCard/index.vue
+++ b/shell/components/Resource/Detail/Card/StatusCard/index.vue
@@ -8,16 +8,12 @@ import { useI18n } from '@shell/composables/useI18n';
 import { StateColor } from '@shell/utils/style';
 import { computed } from 'vue';
 import { useStore } from 'vuex';
-import type { RouteLocationRaw } from 'vue-router';
 
 export interface Props {
   title: string;
   resources?: any[];
   showScaling?: boolean;
-  showPercent?: boolean;
   noResourcesMessage?: string;
-  to?: RouteLocationRaw;
-  rowTo?: RouteLocationRaw | string;
 }
 </script>
 
@@ -28,10 +24,7 @@ const i18n = useI18n(store);
 const props = withDefaults(defineProps<Props>(), {
   resources:          undefined,
   showScaling:        false,
-  showPercent:        true,
-  noResourcesMessage: undefined,
-  to:                 undefined,
-  rowTo:              undefined,
+  noResourcesMessage: undefined
 });
 const emit = defineEmits(['decrease', 'increase']);
 
@@ -45,7 +38,7 @@ const segmentAccumulator = computed(() => {
     const color: StateColor = resource.stateSimpleColor;
 
     accumulator[color] = accumulator[color] || { count: 0 };
-    accumulator[color].count += resource.count || 1;
+    accumulator[color].count++;
   });
 
   return accumulator;
@@ -55,13 +48,12 @@ const rowAccumulator = computed(() => {
   interface Value {
     count: number;
     color: StateColor;
-    stateId: string;
   }
   const accumulator: {[key in string]: Value} = {};
 
   props.resources?.forEach((resource: any) => {
-    accumulator[resource.stateDisplay] = accumulator[resource.stateDisplay] || { count: 0, stateId: resource.stateId || resource.stateDisplay };
-    accumulator[resource.stateDisplay].count += resource.count || 1;
+    accumulator[resource.stateDisplay] = accumulator[resource.stateDisplay] || { count: 0 };
+    accumulator[resource.stateDisplay].count++;
     accumulator[resource.stateDisplay].color = resource.stateSimpleColor.replace('text-', '') as StateColor;
   });
 
@@ -72,13 +64,7 @@ const percent = (count: number, total: number) => {
   return count / total * 100;
 };
 
-const count = computed(() => {
-  if (!props.resources?.length) {
-    return 0;
-  }
-
-  return props.resources.reduce((sum: number, r: any) => sum + (r.count || 1), 0);
-});
+const count = computed(() => props.resources?.length || 0);
 
 const segmentColors = computed(() => Object.keys(segmentAccumulator.value) as StateColor[]);
 const segments = computed(() => segmentColors.value.map((color: StateColor) => ({
@@ -94,27 +80,17 @@ const rows = computed(() => {
   return rowStates.value.map((state) => ({
     color:   rowAccumulator.value[state].color,
     label:   state,
-    stateId: rowAccumulator.value[state].stateId,
     count:   rowAccumulator.value[state].count,
     percent: percent(rowAccumulator.value[state].count, count.value)
   }));
 });
 
-function rowRoute(stateId: string): RouteLocationRaw | undefined {
-  if (!props.rowTo || typeof props.rowTo === 'string') {
-    return undefined;
-  }
-
-  return { ...props.rowTo, query: { q: `"metadata.state.name":"${ stateId }"` } };
-}
-
 </script>
 
 <template>
   <Card
     :title="title"
     data-testid="resource-detail-status-card"
-    :to="props.to"
   >
     <template
       v-if="props.showScaling"
@@ -144,8 +120,6 @@ function rowRoute(stateId: string): RouteLocationRaw | undefined {
         :label="row.label"
         :count="row.count"
         :percent="row.percent"
-        :showPercent="props.showPercent"
-        :to="rowRoute(row.stateId)"
       />
     </div>
     <div
diff --git a/shell/components/Resource/Detail/Card/__tests__/Card.test.ts b/shell/components/Resource/Detail/Card/__tests__/Card.test.ts
index ef3d4efeb32..f1d40f384f0 100644
--- a/shell/components/Resource/Detail/Card/__tests__/Card.test.ts
+++ b/shell/components/Resource/Detail/Card/__tests__/Card.test.ts
@@ -1,104 +1,36 @@
-import { shallowMount } from '@vue/test-utils';
+import { mount } from '@vue/test-utils';
 import Card from '@shell/components/Resource/Detail/Card/index.vue';
 
-const mockPush = jest.fn();
-
-jest.mock('vue-router', () => ({ useRouter: () => ({ push: mockPush }) }));
-
 describe('component: Card/index', () => {
-  it('should render title and default slot', () => {
+  it('should render title and default slot', async() => {
     const title = 'title';
     const content = 'content';
-    const wrapper = shallowMount(Card, { props: { title }, slots: { default: content } });
+    const wrapper = mount(Card, { props: { title }, slots: { default: content } });
 
-    expect(wrapper.find('.title').text()).toStrictEqual(title);
+    expect(wrapper.find('.title').element.innerHTML).toStrictEqual(title);
   });
 
-  it('should allow you to override the heading with slot', () => {
+  it('should allow you to override the heading with slot', async() => {
     const title = 'title';
     const content = 'content';
-    const wrapper = shallowMount(Card, { props: { title }, slots: { heading: content } });
+    const wrapper = mount(Card, { props: { title }, slots: { heading: content } });
 
     expect(wrapper.find('.title').exists()).toBeFalsy();
-    expect(wrapper.find('.heading').text()).toStrictEqual(content);
+    expect(wrapper.find('.heading').element.innerHTML).toStrictEqual(content);
   });
 
-  it('should allow you to override the title with slot', () => {
+  it('should allow you to override the title with slot', async() => {
     const title = 'title';
     const content = 'content';
-    const wrapper = shallowMount(Card, { props: { title }, slots: { title: content } });
+    const wrapper = mount(Card, { props: { title }, slots: { title: content } });
 
-    expect(wrapper.find('.title').text()).toStrictEqual(content);
+    expect(wrapper.find('.title').element.innerHTML).toStrictEqual(content);
   });
 
-  it('should allow you to insert heading-action with slot', () => {
+  it('should allow you to insert heading-action with slot', async() => {
     const content = '<div id="test">content</div>';
-    const wrapper = shallowMount(Card, { slots: { 'heading-action': content } });
+    const wrapper = mount(Card, { slots: { 'heading-action': content } });
 
     expect(wrapper.find('.heading #test').exists()).toBeTruthy();
   });
-
-  it('should hide heading when no title or heading slots are provided', () => {
-    const wrapper = shallowMount(Card, { slots: { default: 'body' } });
-
-    expect(wrapper.find('.heading').exists()).toBeFalsy();
-  });
-
-  describe('click navigation', () => {
-    const to = { name: 'test-route', params: { id: '1' } };
-
-    beforeEach(() => {
-      mockPush.mockClear();
-    });
-
-    it('should navigate when card body is clicked and to prop is set', async() => {
-      const wrapper = shallowMount(Card, { props: { to }, slots: { default: '<span>content</span>' } });
-
-      await wrapper.find('.body span').trigger('click');
-
-      expect(mockPush).toHaveBeenCalledWith(to);
-    });
-
-    it('should not navigate when no to prop is set', async() => {
-      const wrapper = shallowMount(Card, { props: { title: 'test' }, slots: { default: '<span>content</span>' } });
-
-      await wrapper.find('.body span').trigger('click');
-
-      expect(mockPush).not.toHaveBeenCalled();
-    });
-
-    it('should not navigate when clicking on a child anchor element', async() => {
-      const wrapper = shallowMount(Card, {
-        props: { to },
-        slots: { default: '<a href="#" class="inner-link">link</a>' },
-      });
-
-      await wrapper.find('.inner-link').trigger('click');
-
-      expect(mockPush).not.toHaveBeenCalled();
-    });
-
-    it('should not navigate when clicking on a child button element', async() => {
-      const wrapper = shallowMount(Card, {
-        props: { to },
-        slots: { default: '<button class="inner-btn">btn</button>' },
-      });
-
-      await wrapper.find('.inner-btn').trigger('click');
-
-      expect(mockPush).not.toHaveBeenCalled();
-    });
-
-    it('should add clickable class when to prop is set', () => {
-      const wrapper = shallowMount(Card, { props: { to }, slots: { default: 'body' } });
-
-      expect(wrapper.find('.detail-card').classes()).toContain('clickable');
-    });
-
-    it('should not add clickable class when to prop is not set', () => {
-      const wrapper = shallowMount(Card, { slots: { default: 'body' } });
-
-      expect(wrapper.find('.detail-card').classes()).not.toContain('clickable');
-    });
-  });
 });
diff --git a/shell/components/Resource/Detail/Card/__tests__/PodsCard.test.ts b/shell/components/Resource/Detail/Card/__tests__/PodsCard.test.ts
index 3a369304da0..1597fe8ad8a 100644
--- a/shell/components/Resource/Detail/Card/__tests__/PodsCard.test.ts
+++ b/shell/components/Resource/Detail/Card/__tests__/PodsCard.test.ts
@@ -12,7 +12,7 @@ describe('component: PodsCard', () => {
   const podSuccess = { stateSimpleColor: 'success', stateDisplay: 'Completed' };
   const podFail = { stateSimpleColor: 'error', stateDisplay: 'Error' };
 
-  it('should pass title to Card prop correctly', () => {
+  it('should pass title to Card prop correctly', async() => {
     const title = 'component.resource.detail.card.podsCard.title';
     const wrapper = mount(PodsCard, { props: { title, showScaling: true }, global: { provide: { store } } });
 
@@ -21,19 +21,19 @@ describe('component: PodsCard', () => {
     expect(card.props('title')).toStrictEqual(title);
   });
 
-  it('should show Scaler when showScaling is true', () => {
-    const wrapper = mount(PodsCard, { props: { title: 'Test', showScaling: true }, global: { provide: { store } } });
+  it('should show Scaler when showScaling is true', async() => {
+    const wrapper = mount(PodsCard, { props: { showScaling: true }, global: { provide: { store } } });
 
-    expect(wrapper.findComponent(Scaler).exists()).toBeTruthy();
+    expect(wrapper.find('.scaler').exists()).toBeTruthy();
   });
 
-  it('should hide scaler when showScaling is false', () => {
-    const wrapper = mount(PodsCard, { props: { title: 'Test', showScaling: false }, global: { provide: { store } } });
+  it('should hide scaler when showScaling is false', async() => {
+    const wrapper = mount(PodsCard, { props: { showScaling: false }, global: { provide: { store } } });
 
-    expect(wrapper.findComponent(Scaler).exists()).toBeFalsy();
+    expect(wrapper.find('.scaler').exists()).toBeFalsy();
   });
 
-  it('should pass the appropriate props to the Scaler component', () => {
+  it('should pass the appropriate props to the Scaler component', async() => {
     const wrapper = mount(PodsCard, {
       props: {
         title: 'Test', showScaling: true, resources: [podSuccess]
@@ -46,7 +46,7 @@ describe('component: PodsCard', () => {
     expect(scaler.props('min')).toStrictEqual(0);
   });
 
-  it('should pass the appropriate props to the StatusBar component based on the resources input', () => {
+  it('should pass the appropriate props to the StatusBar component based on the resources input', async() => {
     const wrapper = mount(PodsCard, {
       props: {
         title: 'Test', showScaling: true, resources: [podSuccess, podFail]
@@ -64,7 +64,7 @@ describe('component: PodsCard', () => {
     expect(segments[1].percent).toStrictEqual(50);
   });
 
-  it('should pass the appropriate props to the StatusRow component based on the resources input', () => {
+  it('should pass the appropriate props to the StatusRow component based on the resources input', async() => {
     const wrapper = mount(PodsCard, {
       props: {
         title: 'Test', showScaling: true, resources: [podSuccess, podFail]
@@ -74,102 +74,10 @@ describe('component: PodsCard', () => {
     const rows = wrapper.findComponent(StatusRow);
 
     expect(rows.props()).toStrictEqual({
-      color:       'success',
-      count:       1,
-      label:       'Completed',
-      percent:     50,
-      showPercent: true,
-      to:          undefined,
-    });
-  });
-
-  it('should not render StatusBar or StatusRow when resources is empty', () => {
-    const wrapper = mount(PodsCard, {
-      props:  { title: 'Test', resources: [] },
-      global: { provide: { store } }
-    });
-
-    expect(wrapper.findComponent(StatusBar).exists()).toBeFalsy();
-    expect(wrapper.findComponent(StatusRow).exists()).toBeFalsy();
-  });
-
-  describe('pre-aggregated count support', () => {
-    it('should use resource.count when provided instead of counting array length', () => {
-      const resources = [
-        {
-          stateSimpleColor: 'success', stateDisplay: 'Running', stateId: 'running', count: 50
-        },
-        {
-          stateSimpleColor: 'error', stateDisplay: 'Error', stateId: 'error', count: 3
-        },
-      ];
-      const wrapper = mount(PodsCard, {
-        props:  { title: 'Test', resources },
-        global: { provide: { store } }
-      });
-      const rows = wrapper.findAllComponents(StatusRow);
-
-      expect(rows[0].props('count')).toStrictEqual(50);
-      expect(rows[0].props('label')).toStrictEqual('Running');
-      expect(rows[1].props('count')).toStrictEqual(3);
-      expect(rows[1].props('label')).toStrictEqual('Error');
-    });
-
-    it('should calculate correct percentages with pre-aggregated counts', () => {
-      const resources = [
-        {
-          stateSimpleColor: 'success', stateDisplay: 'Running', stateId: 'running', count: 75
-        },
-        {
-          stateSimpleColor: 'error', stateDisplay: 'Error', stateId: 'error', count: 25
-        },
-      ];
-      const wrapper = mount(PodsCard, {
-        props:  { title: 'Test', resources },
-        global: { provide: { store } }
-      });
-      const rows = wrapper.findAllComponents(StatusRow);
-
-      expect(rows[0].props('percent')).toStrictEqual(75);
-      expect(rows[1].props('percent')).toStrictEqual(25);
-    });
-
-    it('should calculate correct status bar segments with pre-aggregated counts', () => {
-      const resources = [
-        {
-          stateSimpleColor: 'success', stateDisplay: 'Running', stateId: 'running', count: 80
-        },
-        {
-          stateSimpleColor: 'error', stateDisplay: 'Error', stateId: 'error', count: 20
-        },
-      ];
-      const wrapper = mount(PodsCard, {
-        props:  { title: 'Test', resources },
-        global: { provide: { store } }
-      });
-      const statusBar = wrapper.findComponent(StatusBar);
-      const segments = statusBar.props('segments');
-
-      expect(segments[0].color).toStrictEqual('success');
-      expect(segments[0].percent).toStrictEqual(80);
-      expect(segments[1].color).toStrictEqual('error');
-      expect(segments[1].percent).toStrictEqual(20);
-    });
-
-    it('should default to count of 1 when resource.count is not provided', () => {
-      const resources = [
-        { stateSimpleColor: 'success', stateDisplay: 'Running' },
-        { stateSimpleColor: 'success', stateDisplay: 'Running' },
-        { stateSimpleColor: 'error', stateDisplay: 'Error' },
-      ];
-      const wrapper = mount(PodsCard, {
-        props:  { title: 'Test', resources },
-        global: { provide: { store } }
-      });
-      const rows = wrapper.findAllComponents(StatusRow);
-
-      expect(rows[0].props('count')).toStrictEqual(2);
-      expect(rows[1].props('count')).toStrictEqual(1);
+      color:   'success',
+      count:   1,
+      label:   'Completed',
+      percent: 50
     });
   });
 });
diff --git a/shell/components/Resource/Detail/Card/__tests__/StateCard.test.ts b/shell/components/Resource/Detail/Card/__tests__/StateCard.test.ts
index 90cb82fd584..065f7375696 100644
--- a/shell/components/Resource/Detail/Card/__tests__/StateCard.test.ts
+++ b/shell/components/Resource/Detail/Card/__tests__/StateCard.test.ts
@@ -8,10 +8,9 @@ describe('component: StateCard', () => {
   const title = 'TITLE';
   const counts = [{ label: 'label2', count: 3 }];
   const row: any = {
-    label:   'label',
-    to:      'to',
-    color:   'success',
-    compact: false,
+    label: 'label',
+    to:    'to',
+    color: 'success',
     counts,
   };
 
diff --git a/shell/components/Resource/Detail/Card/index.vue b/shell/components/Resource/Detail/Card/index.vue
index a3ded060e62..1a41573298b 100644
--- a/shell/components/Resource/Detail/Card/index.vue
+++ b/shell/components/Resource/Detail/Card/index.vue
@@ -1,65 +1,28 @@
 <script setup lang="ts">
-import { computed, useSlots } from 'vue';
-import { useRouter } from 'vue-router';
-import type { RouteLocationRaw } from 'vue-router';
 import VerticalGap from '@shell/components/Resource/Detail/Card/VerticalGap.vue';
 
 export interface CardProps {
     title?: string;
-    to?: RouteLocationRaw;
-    bodyColumns?: number;
 }
 
-const { title, to, bodyColumns } = defineProps<CardProps>();
-const slots = useSlots();
-const router = useRouter();
+const { title } = defineProps<CardProps>();
 
-const clickable = computed(() => !!to);
-const cursorValue = computed(() => clickable.value ? 'pointer' : 'auto');
-const showHeading = computed(() => !!title || !!slots.title || !!slots['heading-action']);
-const gridColumns = computed(() => bodyColumns ? `repeat(${ bodyColumns }, 1fr)` : 'none');
-
-function handleClick(e: MouseEvent | KeyboardEvent): void {
-  if (!to) {
-    return;
-  }
-
-  const target = e.target as HTMLElement;
-
-  if (target.closest('a, button')) {
-    return;
-  }
-
-  router.push(to);
-}
 </script>
 
 <template>
-  <div
-    class="detail-card"
-    :class="{ clickable: clickable }"
-    :role="clickable ? 'button' : undefined"
-    :tabindex="clickable ? 0 : undefined"
-    @click="handleClick"
-    @keyup.enter="handleClick"
-  >
-    <template v-if="showHeading">
-      <div class="heading">
-        <slot name="heading">
-          <div class="title">
-            <slot name="title">
-              {{ title }}
-            </slot>
-          </div>
-        </slot>
-        <slot name="heading-action" />
-      </div>
-      <VerticalGap />
-    </template>
-    <div
-      class="body"
-      :class="{ 'body--grid': bodyColumns, 'body--grid-0': bodyColumns === 0 }"
-    >
+  <div class="detail-card">
+    <div class="heading">
+      <slot name="heading">
+        <div class="title">
+          <slot name="title">
+            {{ title }}
+          </slot>
+        </div>
+      </slot>
+      <slot name="heading-action" />
+    </div>
+    <VerticalGap />
+    <div class="body">
       <slot name="default" />
     </div>
   </div>
@@ -70,11 +33,6 @@ function handleClick(e: MouseEvent | KeyboardEvent): void {
     padding: 16px;
     border-radius: var(--border-radius-md);
     border: 1px solid var(--border);
-    cursor: v-bind(cursorValue);
-
-    &.clickable:hover {
-      border-color: var(--primary);
-    }
 
     .heading {
       display: flex;
@@ -93,18 +51,6 @@ function handleClick(e: MouseEvent | KeyboardEvent): void {
       display: flex;
       flex-direction: column;
       justify-content: flex-start;
-
-      &--grid-0 {
-        display: flex;
-        flex-direction: column;
-        gap: 4px;
-      }
-
-      &--grid {
-        display: grid;
-        grid-template-columns: v-bind(gridColumns);
-        gap: 4px 48px;
-      }
     }
 }
 </style>
diff --git a/shell/components/Resource/Detail/ResourceRow.types.ts b/shell/components/Resource/Detail/ResourceRow.types.ts
index dbe92590d7a..348af7b5038 100644
--- a/shell/components/Resource/Detail/ResourceRow.types.ts
+++ b/shell/components/Resource/Detail/ResourceRow.types.ts
@@ -11,5 +11,4 @@ export interface Props {
   to?: RouteLocationRaw;
   color?: StateColor;
   counts?: Count[];
-  compact?: boolean;
 }
diff --git a/shell/components/Resource/Detail/ResourceRow.vue b/shell/components/Resource/Detail/ResourceRow.vue
index b2bf8166031..4525a314237 100644
--- a/shell/components/Resource/Detail/ResourceRow.vue
+++ b/shell/components/Resource/Detail/ResourceRow.vue
@@ -7,7 +7,7 @@ import { useI18n } from '@shell/composables/useI18n';
 import { useStore } from 'vuex';
 import { Props } from './ResourceRow.types';
 const {
-  label, to, counts, color, compact
+  label, to, counts, color
 } = defineProps<Props>();
 
 const store = useStore();
@@ -37,10 +37,7 @@ const displayCounts = computed(() => {
 </script>
 
 <template>
-  <div
-    class="resource-row"
-    :class="{ 'compact': compact }"
-  >
+  <div class="resource-row">
     <div class="left">
       <SubtleLink
         v-if="to && (counts && counts.length > 0)"
@@ -88,24 +85,6 @@ const displayCounts = computed(() => {
     flex-direction: row;
     align-items: center;
 
-    &.compact {
-      position: relative;
-      padding-left: 20px;
-      line-height: 21px;
-      height: 24px;
-
-      .left {
-        flex-grow: 1;
-      }
-
-      .right .counts .state-dot {
-        position: absolute;
-        left: 0;
-        top: 50%;
-        transform: translateY(-50%);
-      }
-    }
-
     .right {
       flex-grow: 1;
       text-align: right;
diff --git a/shell/components/Resource/Detail/StatusRow.vue b/shell/components/Resource/Detail/StatusRow.vue
index e36a778da36..a0e34ee633d 100644
--- a/shell/components/Resource/Detail/StatusRow.vue
+++ b/shell/components/Resource/Detail/StatusRow.vue
@@ -1,20 +1,16 @@
 <script setup lang="ts">
 import { RcCounterBadge } from '@components/Pill';
-import SubtleLink from '@shell/components/SubtleLink.vue';
 import { StateColor, stateColorCssVar } from '@shell/utils/style';
-import type { RouteLocationRaw } from 'vue-router';
 
 export interface Props {
         color: StateColor;
         label: string;
         count: number;
         percent: number;
-        showPercent?: boolean;
-        to?: RouteLocationRaw;
 }
 
 const {
-  color, label, count, percent, showPercent = true, to
+  color, label, count, percent
 } = defineProps<Props>();
 </script>
 
@@ -25,15 +21,7 @@ const {
       :style="{backgroundColor: stateColorCssVar(color)}"
     />
     <div class="label">
-      <SubtleLink
-        v-if="to"
-        :to="to"
-      >
-        {{ label }}
-      </SubtleLink>
-      <template v-else>
-        {{ label }}
-      </template>
+      {{ label }}
     </div>
     <div class="count">
       <RcCounterBadge
@@ -41,10 +29,7 @@ const {
         type="inactive"
       />
     </div>
-    <div
-      v-if="showPercent"
-      class="percent text-muted"
-    >
+    <div class="percent text-muted">
       {{ percent.toFixed(1) }}%
     </div>
   </div>
diff --git a/shell/pages/c/_cluster/explorer/workload-dashboard/ByStateSection.vue b/shell/pages/c/_cluster/explorer/workload-dashboard/ByStateSection.vue
index 6031449b5c3..ecd896dacd8 100644
--- a/shell/pages/c/_cluster/explorer/workload-dashboard/ByStateSection.vue
+++ b/shell/pages/c/_cluster/explorer/workload-dashboard/ByStateSection.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue';
-import Card from '@shell/components/Resource/Detail/Card/index.vue';
-import ResourceRow from '@shell/components/Resource/Detail/ResourceRow.vue';
+import WorkloadCard from './WorkloadCard.vue';
 import type { WorkloadDashboardByStateLayout, WorkloadDashboardResourceRouteFn } from './types';
 
 const props = defineProps<{
@@ -14,6 +13,15 @@ const gridTemplateRows = computed(() => {
 
   return `repeat(${ props.layout.gridRows }, ${ unit })`;
 });
+
+function toCardRows(rows: typeof props.layout.cards[0]['rows']) {
+  return rows.map((row) => ({
+    label:  row.label,
+    to:     props.resourceRoute(row.type, row.stateNames),
+    color:  row.color,
+    counts: row.counts,
+  }));
+}
 </script>
 
 <template>
@@ -21,54 +29,27 @@ const gridTemplateRows = computed(() => {
     class="bento-grid"
     :class="{ 'bento-grid--has-sub-hero': !!layout.subHero }"
   >
-    <Card
+    <WorkloadCard
       v-for="card in layout.cards"
       :key="card.color"
       class="state-card"
       data-testid="workload-dashboard-state-card"
       :class="'state-card--' + card.color"
-    >
-      <ResourceRow
-        v-for="(row, idx) in card.rows"
-        :key="idx"
-        :label="row.label"
-        :to="resourceRoute(row.type, row.stateNames)"
-        :color="row.color"
-        :counts="row.counts"
-        compact
-      />
-    </Card>
-    <Card
+      :rows="toCardRows(card.rows)"
+    />
+    <WorkloadCard
       v-if="layout.subHero"
       class="state-card bento-sub-hero"
       :class="'state-card--' + layout.subHero.color"
-    >
-      <ResourceRow
-        v-for="(row, idx) in layout.subHero.rows"
-        :key="idx"
-        :label="row.label"
-        :to="resourceRoute(row.type, row.stateNames)"
-        :color="row.color"
-        :counts="row.counts"
-        compact
-      />
-    </Card>
-    <Card
+      :rows="toCardRows(layout.subHero.rows)"
+    />
+    <WorkloadCard
       v-if="layout.hero"
       class="state-card bento-hero"
       :class="['state-card--' + layout.hero.color, 'bento-hero--' + layout.heroMode]"
       :body-columns="layout.heroMode === 'full' ? 3 : layout.heroMode === 'wide' ? 2 : undefined"
-    >
-      <ResourceRow
-        v-for="(row, idx) in layout.hero.rows"
-        :key="idx"
-        :label="row.label"
-        :to="resourceRoute(row.type, row.stateNames)"
-        :color="row.color"
-        :counts="row.counts"
-        compact
-      />
-    </Card>
+      :rows="toCardRows(layout.hero.rows)"
+    />
   </div>
 </template>
 
diff --git a/shell/pages/c/_cluster/explorer/workload-dashboard/ByTypeSection.vue b/shell/pages/c/_cluster/explorer/workload-dashboard/ByTypeSection.vue
index 01dd4cad7e2..f7b92a98288 100644
--- a/shell/pages/c/_cluster/explorer/workload-dashboard/ByTypeSection.vue
+++ b/shell/pages/c/_cluster/explorer/workload-dashboard/ByTypeSection.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import StatusCard from '@shell/components/Resource/Detail/Card/StatusCard/index.vue';
+import WorkloadTypeCard from './WorkloadTypeCard.vue';
 import type { WorkloadDashboardByTypeCard, WorkloadDashboardResourceRouteFn } from './types';
 
 defineProps<{
@@ -10,14 +10,12 @@ defineProps<{
 
 <template>
   <div class="card-grid">
-    <StatusCard
+    <WorkloadTypeCard
       v-for="card in cards"
       :key="card.title"
       :title="card.title"
       :to="resourceRoute(card.type)"
-      :row-to="resourceRoute(card.type)"
       :resources="card.resources"
-      :show-percent="false"
     />
   </div>
 </template>
diff --git a/shell/pages/c/_cluster/explorer/workload-dashboard/WorkloadCard.vue b/shell/pages/c/_cluster/explorer/workload-dashboard/WorkloadCard.vue
new file mode 100644
index 00000000000..7b76504c179
--- /dev/null
+++ b/shell/pages/c/_cluster/explorer/workload-dashboard/WorkloadCard.vue
@@ -0,0 +1,155 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import type { RouteLocationRaw } from 'vue-router';
+import SubtleLink from '@shell/components/SubtleLink.vue';
+import { stateColorCssVar, type StateColor } from '@shell/utils/style';
+
+export interface WorkloadCardRow {
+  label: string;
+  to?: RouteLocationRaw;
+  color?: StateColor;
+  counts?: { label: string; count: number }[];
+}
+
+const { bodyColumns } = defineProps<{
+  bodyColumns?: number;
+  rows: WorkloadCardRow[];
+}>();
+
+const gridColumns = computed(() => bodyColumns ? `repeat(${ bodyColumns }, 1fr)` : 'none');
+</script>
+
+<template>
+  <div
+    class="workload-card"
+    role="group"
+  >
+    <ul
+      class="body"
+      :class="{ 'body--grid': bodyColumns }"
+    >
+      <li
+        v-for="(row, idx) in rows"
+        :key="idx"
+        class="resource-row"
+      >
+        <span
+          class="state-dot"
+          :style="{ backgroundColor: row.color ? stateColorCssVar(row.color) : undefined }"
+          aria-hidden="true"
+        />
+        <span class="left">
+          <SubtleLink
+            v-if="row.to && row.counts?.length"
+            :to="row.to"
+          >
+            {{ row.label }}
+          </SubtleLink>
+          <span
+            v-else
+            class="text-deemphasized"
+          >
+            {{ row.label }}
+          </span>
+        </span>
+        <span class="right">
+          <span
+            v-if="!row.counts?.length"
+            class="text-deemphasized"
+          >
+            0
+          </span>
+          <span
+            v-else
+            class="counts"
+          >
+            <span
+              v-for="(c, i) in row.counts"
+              :key="c.label"
+              class="count"
+            >
+              <span class="count-value">{{ c.count }}</span>&nbsp;<span class="count-label">{{ c.label }}</span><span
+                v-if="i < row.counts.length - 1"
+                aria-hidden="true"
+              >&nbsp;+&nbsp;</span>
+            </span>
+          </span>
+        </span>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.workload-card {
+  padding: 16px;
+  border-radius: var(--border-radius-md);
+
+  .body {
+    display: flex;
+    flex-direction: column;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+
+    &--grid {
+      display: grid;
+      grid-template-columns: v-bind(gridColumns);
+      gap: 4px 48px;
+    }
+  }
+
+  .resource-row {
+    display: flex;
+    align-items: center;
+    position: relative;
+    padding-left: 20px;
+    line-height: 21px;
+    height: 24px;
+
+    .left {
+      flex-grow: 1;
+    }
+
+    .right {
+      flex-grow: 1;
+      text-align: right;
+      overflow: hidden;
+    }
+
+    .counts {
+      display: flex;
+      justify-content: flex-end;
+      align-items: center;
+      max-width: 100%;
+      overflow: hidden;
+
+      .count {
+        display: flex;
+        justify-content: flex-end;
+        min-width: 0;
+      }
+
+      .count:first-child {
+        max-width: calc(100% - 90px);
+
+        .count-label {
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+      }
+    }
+
+    .state-dot {
+      position: absolute;
+      left: 0;
+      top: 50%;
+      transform: translateY(-50%);
+      display: inline-block;
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+    }
+  }
+}
+</style>
diff --git a/shell/pages/c/_cluster/explorer/workload-dashboard/WorkloadTypeCard.vue b/shell/pages/c/_cluster/explorer/workload-dashboard/WorkloadTypeCard.vue
new file mode 100644
index 00000000000..650d47118fc
--- /dev/null
+++ b/shell/pages/c/_cluster/explorer/workload-dashboard/WorkloadTypeCard.vue
@@ -0,0 +1,158 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useRouter } from 'vue-router';
+import type { RouteLocationRaw } from 'vue-router';
+import StatusBar from '@shell/components/Resource/Detail/StatusBar.vue';
+import SubtleLink from '@shell/components/SubtleLink.vue';
+import { stateColorCssVar, type StateColor } from '@shell/utils/style';
+
+interface Resource {
+  stateDisplay: string;
+  stateId: string;
+  stateSimpleColor: StateColor;
+  count: number;
+}
+
+const props = defineProps<{
+  title: string;
+  to: RouteLocationRaw;
+  resources: Resource[];
+}>();
+
+const router = useRouter();
+
+const total = computed(() => props.resources.reduce((sum, r) => sum + r.count, 0));
+
+const segments = computed(() => {
+  const byColor: Record<string, number> = {};
+
+  for (const r of props.resources) {
+    byColor[r.stateSimpleColor] = (byColor[r.stateSimpleColor] || 0) + r.count;
+  }
+
+  return Object.entries(byColor).map(([color, count]) => ({
+    color:   color as StateColor,
+    percent: (count / total.value) * 100,
+  }));
+});
+
+function rowRoute(stateId: string): RouteLocationRaw {
+  return {
+    ...(props.to as object),
+    query: { q: `"metadata.state.name":"${ stateId }"` },
+  };
+}
+
+function handleClick(e: MouseEvent | KeyboardEvent): void {
+  const target = e.target as HTMLElement;
+
+  if (target.closest('a, button')) {
+    return;
+  }
+
+  if (window.getSelection()?.toString()) {
+    return;
+  }
+
+  router.push(props.to);
+}
+</script>
+
+<template>
+  <div
+    class="workload-type-card"
+    data-testid="resource-detail-status-card"
+    role="button"
+    tabindex="0"
+    :aria-label="`${ title }: ${ total } total`"
+    @click="handleClick"
+    @keyup.enter="handleClick"
+  >
+    <h5 class="heading">
+      {{ title }}
+    </h5>
+    <StatusBar
+      v-if="resources.length > 0"
+      :segments="segments"
+      aria-hidden="true"
+    />
+    <ul
+      v-if="resources.length > 0"
+      class="rows"
+    >
+      <li
+        v-for="r in resources"
+        :key="r.stateId"
+        class="status-row"
+      >
+        <span
+          class="indicator"
+          :style="{ backgroundColor: stateColorCssVar(r.stateSimpleColor) }"
+          aria-hidden="true"
+        />
+        <span class="label">
+          <SubtleLink :to="rowRoute(r.stateId)">
+            {{ r.stateDisplay }}
+          </SubtleLink>
+        </span>
+        <span
+          class="count"
+          :aria-label="`${ r.count } ${ r.stateDisplay }`"
+        >
+          {{ r.count }}
+        </span>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.workload-type-card {
+  padding: 16px;
+  border-radius: var(--border-radius-md);
+  border: 1px solid var(--border);
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+
+  &:hover {
+    border-color: var(--primary);
+  }
+
+  .heading {
+    font-size: 18px;
+    font-weight: 600;
+    line-height: 21px;
+    height: 32px;
+    margin: 0;
+  }
+
+  .rows {
+    display: flex;
+    flex-direction: column;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  .status-row {
+    display: flex;
+    align-items: center;
+
+    &:not(:first-of-type) {
+      margin-top: 8px;
+    }
+
+    .indicator {
+      height: 4px;
+      border-radius: 4px;
+      width: 20px;
+      margin-right: 10px;
+    }
+
+    .label {
+      flex-grow: 1;
+    }
+  }
+}
+</style>

From 5d89ac0bac96da4ab4cbcd677e568bb571469dda Mon Sep 17 00:00:00 2001
From: Marcelo Fukumoto <marcelo.fukumoto@suse.com>
Date: Wed, 27 May 2026 01:55:12 +0200
Subject: [PATCH 25/28] Added some aria labels and focus

---
 .../_cluster/explorer/workload-dashboard/ByStateSection.vue  | 3 +++
 .../c/_cluster/explorer/workload-dashboard/WorkloadCard.vue  | 2 ++
 .../explorer/workload-dashboard/WorkloadTypeCard.vue         | 5 +++++
 3 files changed, 10 insertions(+)

diff --git a/shell/pages/c/_cluster/explorer/workload-dashboard/ByStateSection.vue b/shell/pages/c/_cluster/explorer/workload-dashboard/ByStateSection.vue
index ecd896dacd8..2fcb901d4d3 100644
--- a/shell/pages/c/_cluster/explorer/workload-dashboard/ByStateSection.vue
+++ b/shell/pages/c/_cluster/explorer/workload-dashboard/ByStateSection.vue
@@ -36,12 +36,14 @@ function toCardRows(rows: typeof props.layout.cards[0]['rows']) {
       data-testid="workload-dashboard-state-card"
       :class="'state-card--' + card.color"
       :rows="toCardRows(card.rows)"
+      :aria-label="card.color + ' workloads'"
     />
     <WorkloadCard
       v-if="layout.subHero"
       class="state-card bento-sub-hero"
       :class="'state-card--' + layout.subHero.color"
       :rows="toCardRows(layout.subHero.rows)"
+      :aria-label="layout.subHero.color + ' workloads'"
     />
     <WorkloadCard
       v-if="layout.hero"
@@ -49,6 +51,7 @@ function toCardRows(rows: typeof props.layout.cards[0]['rows']) {
       :class="['state-card--' + layout.hero.color, 'bento-hero--' + layout.heroMode]"
       :body-columns="layout.heroMode === 'full' ? 3 : layout.heroMode === 'wide' ? 2 : undefined"
       :rows="toCardRows(layout.hero.rows)"
+      :aria-label="layout.hero.color + ' workloads'"
     />
   </div>
 </template>
diff --git a/shell/pages/c/_cluster/explorer/workload-dashboard/WorkloadCard.vue b/shell/pages/c/_cluster/explorer/workload-dashboard/WorkloadCard.vue
index 7b76504c179..de10dab54e4 100644
--- a/shell/pages/c/_cluster/explorer/workload-dashboard/WorkloadCard.vue
+++ b/shell/pages/c/_cluster/explorer/workload-dashboard/WorkloadCard.vue
@@ -14,6 +14,7 @@ export interface WorkloadCardRow {
 const { bodyColumns } = defineProps<{
   bodyColumns?: number;
   rows: WorkloadCardRow[];
+  ariaLabel?: string;
 }>();
 
 const gridColumns = computed(() => bodyColumns ? `repeat(${ bodyColumns }, 1fr)` : 'none');
@@ -23,6 +24,7 @@ const gridColumns = computed(() => bodyColumns ? `repeat(${ bodyColumns }, 1fr)`
   <div
     class="workload-card"
     role="group"
+    :aria-label="ariaLabel"
   >
     <ul
       class="body"
diff --git a/shell/pages/c/_cluster/explorer/workload-dashboard/WorkloadTypeCard.vue b/shell/pages/c/_cluster/explorer/workload-dashboard/WorkloadTypeCard.vue
index 650d47118fc..729f787a647 100644
--- a/shell/pages/c/_cluster/explorer/workload-dashboard/WorkloadTypeCard.vue
+++ b/shell/pages/c/_cluster/explorer/workload-dashboard/WorkloadTypeCard.vue
@@ -119,6 +119,11 @@ function handleClick(e: MouseEvent | KeyboardEvent): void {
     border-color: var(--primary);
   }
 
+  &:focus-visible {
+    outline: 2px solid var(--primary);
+    outline-offset: -2px;
+  }
+
   .heading {
     font-size: 18px;
     font-weight: 600;

From c518a45e62f151a9d8b4837d046902425f53ace0 Mon Sep 17 00:00:00 2001
From: Marcelo Fukumoto <marcelo.fukumoto@suse.com>
Date: Wed, 27 May 2026 01:58:45 +0200
Subject: [PATCH 26/28] Added missing testid

---
 .../c/_cluster/explorer/workload-dashboard/ByStateSection.vue   | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/shell/pages/c/_cluster/explorer/workload-dashboard/ByStateSection.vue b/shell/pages/c/_cluster/explorer/workload-dashboard/ByStateSection.vue
index 2fcb901d4d3..053e7b0e5f1 100644
--- a/shell/pages/c/_cluster/explorer/workload-dashboard/ByStateSection.vue
+++ b/shell/pages/c/_cluster/explorer/workload-dashboard/ByStateSection.vue
@@ -41,6 +41,7 @@ function toCardRows(rows: typeof props.layout.cards[0]['rows']) {
     <WorkloadCard
       v-if="layout.subHero"
       class="state-card bento-sub-hero"
+      data-testid="workload-dashboard-state-card"
       :class="'state-card--' + layout.subHero.color"
       :rows="toCardRows(layout.subHero.rows)"
       :aria-label="layout.subHero.color + ' workloads'"
@@ -48,6 +49,7 @@ function toCardRows(rows: typeof props.layout.cards[0]['rows']) {
     <WorkloadCard
       v-if="layout.hero"
       class="state-card bento-hero"
+      data-testid="workload-dashboard-state-card"
       :class="['state-card--' + layout.hero.color, 'bento-hero--' + layout.heroMode]"
       :body-columns="layout.heroMode === 'full' ? 3 : layout.heroMode === 'wide' ? 2 : undefined"
       :rows="toCardRows(layout.hero.rows)"

From 2f193b67df7440b57524e071e1f4944d3294c231 Mon Sep 17 00:00:00 2001
From: Marcelo Fukumoto <marcelo.fukumoto@suse.com>
Date: Wed, 27 May 2026 02:10:58 +0200
Subject: [PATCH 27/28] Removed unnecesary changes on SubtleLink  Fixed any
 cases

---
 shell/components/SubtleLink.vue                    |  2 +-
 .../explorer/workload-dashboard/composable.ts      | 14 ++++++++------
 .../_cluster/explorer/workload-dashboard/types.ts  |  4 ++--
 3 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/shell/components/SubtleLink.vue b/shell/components/SubtleLink.vue
index 447f4655151..f72b58cc706 100644
--- a/shell/components/SubtleLink.vue
+++ b/shell/components/SubtleLink.vue
@@ -17,7 +17,7 @@ const isExternal = computed(() => !!props.href);
 <template>
   <component
     :is="isExternal ? 'a' : RouterLink"
-    class="subtle-link link-main secondary-text-link"
+    class="subtle-link"
     v-bind="isExternal
       ? { href, target, rel: target === '_blank' ? 'noopener noreferrer nofollow' : undefined }
       : { to }"
diff --git a/shell/pages/c/_cluster/explorer/workload-dashboard/composable.ts b/shell/pages/c/_cluster/explorer/workload-dashboard/composable.ts
index 99db632ea16..92c38e09c5d 100644
--- a/shell/pages/c/_cluster/explorer/workload-dashboard/composable.ts
+++ b/shell/pages/c/_cluster/explorer/workload-dashboard/composable.ts
@@ -106,7 +106,7 @@ export function useWorkloadDashboard() {
       if (filter.startsWith(NAMESPACE_FILTER_P_FULL_PREFIX)) {
         const projectId = filter.replace(NAMESPACE_FILTER_P_FULL_PREFIX, '');
         const projects = store.getters['management/all']('management.cattle.io.project');
-        const project = projects.find((p: any) => p.id?.endsWith(`/${ projectId }`) || p.metadata?.name === projectId);
+        const project = projects.find((p: { id?: string; nameDisplay?: string; metadata?: { name: string } }) => p.id?.endsWith(`/${ projectId }`) || p.metadata?.name === projectId);
 
         return t('workloadDashboard.subtitle.project', { name: project?.nameDisplay || projectId, count });
       }
@@ -200,7 +200,7 @@ export function useWorkloadDashboard() {
     const hero = cards.find((c) => c.color === 'success') || null;
     const others = cards.filter((c) => c !== hero);
 
-    let heroMode = 'default';
+    let heroMode: 'default' | 'full' | 'wide' = 'default';
 
     if (cards.length === 1) {
       heroMode = 'full';
@@ -294,9 +294,11 @@ export function useWorkloadDashboard() {
           return {
             type, summary: res.summary || [], error: null
           };
-        } catch (e: any) {
+        } catch (e: unknown) {
+          const message = e instanceof Error ? e.message : t('workloadDashboard.errors.fetchType', { type });
+
           return {
-            type, summary: null, error: e.message || t('workloadDashboard.errors.fetchType', { type })
+            type, summary: null, error: message
           };
         }
       });
@@ -306,8 +308,8 @@ export function useWorkloadDashboard() {
       await resolveStateColors(results);
       summaries.value = results;
       fetchError.value = null;
-    } catch (e: any) {
-      fetchError.value = e.message || t('workloadDashboard.errors.fetchAll');
+    } catch (e: unknown) {
+      fetchError.value = e instanceof Error ? e.message : t('workloadDashboard.errors.fetchAll');
     }
   }
 
diff --git a/shell/pages/c/_cluster/explorer/workload-dashboard/types.ts b/shell/pages/c/_cluster/explorer/workload-dashboard/types.ts
index bea4ccca8db..9e6b0bff6fe 100644
--- a/shell/pages/c/_cluster/explorer/workload-dashboard/types.ts
+++ b/shell/pages/c/_cluster/explorer/workload-dashboard/types.ts
@@ -1,5 +1,5 @@
 import { WORKLOAD_TYPES, POD } from '@shell/config/types';
-import { StateColor } from '@shell/utils/style';
+import type { StateColor } from '@shell/utils/style';
 import type { RouteLocationRaw } from 'vue-router';
 
 export interface WorkloadDashboardSummaryEntry {
@@ -33,7 +33,7 @@ export interface WorkloadDashboardByStateLayout {
   hero: WorkloadDashboardStateCard | null;
   subHero: WorkloadDashboardStateCard | null;
   cards: WorkloadDashboardStateCard[];
-  heroMode: string;
+  heroMode: 'default' | 'full' | 'wide';
   gridRows: number;
 }
 

From 6a9058b9a6723b0bfd3cd8a20cffd7ea5dee229b Mon Sep 17 00:00:00 2001
From: Marcelo Fukumoto <marcelo.fukumoto@suse.com>
Date: Wed, 27 May 2026 02:21:42 +0200
Subject: [PATCH 28/28] Reposition files

---
 .../pages/explorer/{ => workloads}/workload-dashboard.po.ts | 0
 .../workloads}/workload-dashboard.spec.ts                   | 4 ++--
 shell/config/router/routes.js                               | 2 +-
 .../index.vue}                                              | 6 +++---
 4 files changed, 6 insertions(+), 6 deletions(-)
 rename cypress/e2e/po/pages/explorer/{ => workloads}/workload-dashboard.po.ts (100%)
 rename cypress/e2e/tests/pages/{explorer => explorer2/workloads}/workload-dashboard.spec.ts (96%)
 rename shell/pages/c/_cluster/explorer/{workload-dashboard.vue => workload-dashboard/index.vue} (94%)

diff --git a/cypress/e2e/po/pages/explorer/workload-dashboard.po.ts b/cypress/e2e/po/pages/explorer/workloads/workload-dashboard.po.ts
similarity index 100%
rename from cypress/e2e/po/pages/explorer/workload-dashboard.po.ts
rename to cypress/e2e/po/pages/explorer/workloads/workload-dashboard.po.ts
diff --git a/cypress/e2e/tests/pages/explorer/workload-dashboard.spec.ts b/cypress/e2e/tests/pages/explorer2/workloads/workload-dashboard.spec.ts
similarity index 96%
rename from cypress/e2e/tests/pages/explorer/workload-dashboard.spec.ts
rename to cypress/e2e/tests/pages/explorer2/workloads/workload-dashboard.spec.ts
index 9ce2c30e0d9..dbe35d7367f 100644
--- a/cypress/e2e/tests/pages/explorer/workload-dashboard.spec.ts
+++ b/cypress/e2e/tests/pages/explorer2/workloads/workload-dashboard.spec.ts
@@ -1,8 +1,8 @@
-import WorkloadDashboardPagePo from '@/cypress/e2e/po/pages/explorer/workload-dashboard.po';
+import WorkloadDashboardPagePo from '@/cypress/e2e/po/pages/explorer/workloads/workload-dashboard.po';
 
 const workloadDashboard = new WorkloadDashboardPagePo('local');
 
-describe('Workload Dashboard', { testIsolation: 'off', tags: ['@explorer', '@adminUser'] }, () => {
+describe('Workload Dashboard', { testIsolation: 'off', tags: ['@explorer2', '@adminUser'] }, () => {
   before(() => {
     cy.login();
     cy.updateNamespaceFilter('local', 'none', '{"local":[]}');
diff --git a/shell/config/router/routes.js b/shell/config/router/routes.js
index 0ea0280bf45..5b5b2e2fa47 100644
--- a/shell/config/router/routes.js
+++ b/shell/config/router/routes.js
@@ -351,7 +351,7 @@ export default [
         name:      'c-cluster-explorer-explorer-utils'
       }, {
         path:      '/c/:cluster/explorer/workload-dashboard',
-        component: () => interopDefault(import('@shell/pages/c/_cluster/explorer/workload-dashboard.vue')),
+        component: () => interopDefault(import('@shell/pages/c/_cluster/explorer/workload-dashboard/index.vue')),
         name:      'c-cluster-explorer-workload-dashboard'
       }, {
         path:      '/c/:cluster/explorer/tools',
diff --git a/shell/pages/c/_cluster/explorer/workload-dashboard.vue b/shell/pages/c/_cluster/explorer/workload-dashboard/index.vue
similarity index 94%
rename from shell/pages/c/_cluster/explorer/workload-dashboard.vue
rename to shell/pages/c/_cluster/explorer/workload-dashboard/index.vue
index c68f480726d..f8695112426 100644
--- a/shell/pages/c/_cluster/explorer/workload-dashboard.vue
+++ b/shell/pages/c/_cluster/explorer/workload-dashboard/index.vue
@@ -6,9 +6,9 @@ import SubtleLink from '@shell/components/SubtleLink.vue';
 import { DOCS_BASE } from '@shell/config/private-label';
 import { useI18n } from '@shell/composables/useI18n';
 import { useStore } from 'vuex';
-import { useWorkloadDashboard } from './workload-dashboard/composable';
-import ByStateSection from './workload-dashboard/ByStateSection.vue';
-import ByTypeSection from './workload-dashboard/ByTypeSection.vue';
+import { useWorkloadDashboard } from './composable';
+import ByStateSection from './ByStateSection.vue';
+import ByTypeSection from './ByTypeSection.vue';
 
 const store = useStore();
 const { t } = useI18n(store);