Implement management dashboard navigation cards and enhance user permissions filtering

- Created a new `NavCardGrid` component for displaying management dashboard quick-link cards, aligning with the Podverse pattern.
- Updated the dashboard page to utilize the new `NavCardGrid`, filtering links based on user permissions for super-admin and limited-admin roles.
- Added internationalization support for card descriptions in both English and Spanish.
- Enhanced end-to-end tests to verify visibility of dashboard links according to user roles.
- Introduced new styles for the navigation card grid to improve layout and user experience.

Author: mitchdowney

.llm/history/active/management-dashboard-nav-cards/management-dashboard-nav-cards-part-01.md

@@ -0,0 +1,31 @@
+# Management Dashboard Nav Cards - History
+
+Started: 2026-04-23
+Author: GitHub Copilot (GPT-5.3-Codex)
+Context: Align Metaboost management dashboard quick-link card layout and behavior with Podverse pattern.
+
+### Session 1 - 2026-04-23
+#### Prompt (Developer)
+the metaboost management dashboard should follow the same pattern as the podverse management dashboard. create a metaboost ui component if needed. display the linked pages available in a clickable button type of format (reuse podverse layout and styles for this)
+
+#### Prompt (Developer)
+Start implementation
+
+#### Key Decisions
+- Build a reusable @metaboost/ui navigation card grid component (Podverse-style structure) instead of page-local dashboard markup.
+- Show only links the current management user can access by reusing existing main-nav permission filtering.
+- Use title + description cards and add dashboard description i18n keys in en-US and es.
+
+#### Files Created/Modified
+- .llm/history/active/management-dashboard-nav-cards/management-dashboard-nav-cards-part-01.md
+- apps/management-web/src/app/(main)/dashboard/page.tsx
+- apps/management-web/src/lib/main-nav.ts
+- apps/management-web/i18n/originals/en-US.json
+- apps/management-web/i18n/originals/es.json
+- apps/management-web/e2e/dashboard-super-admin-full-crud.spec.ts
+- apps/management-web/e2e/dashboard-limited-admin.spec.ts
+- packages/ui/src/components/navigation/NavCardGrid/NavCardGrid.tsx
+- packages/ui/src/components/navigation/NavCardGrid/NavCardGrid.module.scss
+- packages/ui/src/components/navigation/NavCardGrid/NavCardGrid.stories.tsx
+- packages/ui/src/components/navigation/NavCardGrid/index.ts
+- packages/ui/src/index.ts

apps/management-web/e2e/dashboard-limited-admin.spec.ts

@@ -25,5 +25,19 @@ test.describe('Management dashboard-page for the admin (admins users events:own)
       testInfo,
       'The dashboard-page is visible for admin (admins users events:own).'
     );
+
+    await actionAndCapture(
+      page,
+      testInfo,
+      'Dashboard quick-link cards are filtered to only pages available for admin (admins users events:own).',
+      async () => {
+        await expect(page.getByRole('link', { name: 'Events' })).toBeVisible();
+        await expect(page.getByRole('link', { name: 'Admins' })).toHaveCount(0);
+        await expect(page.getByRole('link', { name: 'Global blocked apps' })).toHaveCount(0);
+        await expect(page.getByRole('link', { name: 'Terms versions' })).toHaveCount(0);
+        await expect(page.getByRole('link', { name: 'Users' })).toHaveCount(0);
+        await expect(page.getByRole('link', { name: 'Buckets' })).toHaveCount(0);
+      }
+    );
   });
 });

apps/management-web/e2e/dashboard-super-admin-full-crud.spec.ts

@@ -23,5 +23,19 @@ test.describe('Management dashboard-page for the super-admin user', () => {
       testInfo,
       'The management dashboard-page is visible with the primary heading after successful login.'
     );
+
+    await actionAndCapture(
+      page,
+      testInfo,
+      'Dashboard quick-link cards for all management pages are visible to the super-admin user.',
+      async () => {
+        await expect(page.getByRole('link', { name: 'Admins' })).toBeVisible();
+        await expect(page.getByRole('link', { name: 'Global blocked apps' })).toBeVisible();
+        await expect(page.getByRole('link', { name: 'Events' })).toBeVisible();
+        await expect(page.getByRole('link', { name: 'Terms versions' })).toBeVisible();
+        await expect(page.getByRole('link', { name: 'Users' })).toBeVisible();
+        await expect(page.getByRole('link', { name: 'Buckets' })).toBeVisible();
+      }
+    );
   });
 });

apps/management-web/i18n/originals/en-US.json

@@ -472,7 +472,27 @@
   "dashboard": {
     "title": "Dashboard",
     "hello": "Hello, {name}.",
-    "signedInAs": "Signed in as {email}"
+    "signedInAs": "Signed in as {email}",
+    "links": {
+      "admins": {
+        "description": "Manage management admins and permissions."
+      },
+      "globalBlockedApps": {
+        "description": "Review and manage globally blocked app IDs."
+      },
+      "events": {
+        "description": "Review management activity and event logs."
+      },
+      "termsVersions": {
+        "description": "Manage published terms and version history."
+      },
+      "users": {
+        "description": "Browse users and inspect account details."
+      },
+      "buckets": {
+        "description": "Manage buckets, admins, roles, and messages."
+      }
+    }
   },
   "profile": {
     "title": "Profile",

apps/management-web/i18n/originals/es.json

@@ -472,7 +472,27 @@
   "dashboard": {
     "title": "Panel",
     "hello": "Hola, {name}.",
-    "signedInAs": "Conectado como {email}"
+    "signedInAs": "Conectado como {email}",
+    "links": {
+      "admins": {
+        "description": "Administra los administradores de gestión y sus permisos."
+      },
+      "globalBlockedApps": {
+        "description": "Revisa y administra los IDs de apps bloqueadas globalmente."
+      },
+      "events": {
+        "description": "Revisa la actividad de gestión y los registros de eventos."
+      },
+      "termsVersions": {
+        "description": "Administra los términos publicados y su historial de versiones."
+      },
+      "users": {
+        "description": "Explora usuarios e inspecciona los detalles de sus cuentas."
+      },
+      "buckets": {
+        "description": "Administra buckets, administradores, roles y mensajes."
+      }
+    }
   },
   "profile": {
     "title": "Perfil",

apps/management-web/i18n/overrides/es.json

@@ -472,7 +472,27 @@
   "dashboard": {
     "title": "",
     "hello": "",
-    "signedInAs": ""
+    "signedInAs": "",
+    "links": {
+      "admins": {
+        "description": ""
+      },
+      "globalBlockedApps": {
+        "description": ""
+      },
+      "events": {
+        "description": ""
+      },
+      "termsVersions": {
+        "description": ""
+      },
+      "users": {
+        "description": ""
+      },
+      "buckets": {
+        "description": ""
+      }
+    }
   },
   "profile": {
     "title": "",

apps/management-web/src/app/(main)/dashboard/page.tsx

@@ -1,8 +1,10 @@
 import { getTranslations } from 'next-intl/server';
+import Link from 'next/link';
 import { redirect } from 'next/navigation';
 
-import { Container, SectionWithHeading, Text } from '@metaboost/ui';
+import { Container, NavCardGrid, Text } from '@metaboost/ui';
 
+import { getVisibleNavEntries } from '../../../lib/main-nav';
 import { ROUTES } from '../../../lib/routes';
 import { getServerUser } from '../../../lib/server-auth';
 
@@ -13,14 +15,33 @@ export default async function DashboardPage() {
     redirect(ROUTES.LOGIN);
   }
 
-  const t = await getTranslations('dashboard');
+  const tDashboard = await getTranslations('dashboard');
+  const tCommon = await getTranslations('common');
   const displayName = user.displayName ?? user.username;
 
+  const getDescriptionByLabelKey = (labelKey: string) => {
+    if (labelKey === 'admins') return tDashboard('links.admins.description');
+    if (labelKey === 'globalBlockedApps') return tDashboard('links.globalBlockedApps.description');
+    if (labelKey === 'events') return tDashboard('links.events.description');
+    if (labelKey === 'termsVersions') return tDashboard('links.termsVersions.description');
+    if (labelKey === 'users') return tDashboard('links.users.description');
+    if (labelKey === 'buckets') return tDashboard('links.buckets.description');
+    return '';
+  };
+
+  const cards = getVisibleNavEntries(user.isSuperAdmin, user.permissions)
+    .filter((entry) => entry.href !== ROUTES.DASHBOARD)
+    .map((entry) => ({
+      href: entry.href,
+      title: tCommon(entry.labelKey),
+      description: getDescriptionByLabelKey(entry.labelKey),
+    }));
+
   return (
     <Container>
-      <SectionWithHeading title={t('title')}>
-        <Text>{t('hello', { name: displayName })}</Text>
-      </SectionWithHeading>
+      <h1>{tDashboard('title')}</h1>
+      <Text>{tDashboard('hello', { name: displayName })}</Text>
+      <NavCardGrid cards={cards} LinkComponent={Link} />
     </Container>
   );
 }

apps/management-web/src/lib/main-nav.ts

@@ -79,6 +79,22 @@ export type VisibleNavItem = {
   label: string;
 };
 
+/**
+ * Returns nav entries that the user is allowed to see (read permission or no permission required).
+ * Keeps labelKey so callers can resolve labels/descriptions from i18n namespaces.
+ */
+export function getVisibleNavEntries(
+  isSuperAdmin: boolean,
+  permissions: ManagementUserPermissions | null | undefined
+): MainNavEntry[] {
+  return MAIN_NAV_ENTRIES.filter((entry) => {
+    if (entry.superAdminOnly === true) return isSuperAdmin;
+    if (entry.readPermission === undefined) return true;
+    if (isSuperAdmin) return true;
+    return hasReadPermission(permissions, entry.readPermission);
+  });
+}
+
 /**
  * Returns nav items that the user is allowed to see (read permission or no permission required).
  * Labels are translated using the provided t function (e.g. getTranslations('common')).
@@ -88,12 +104,7 @@ export function getVisibleNavItems(
   permissions: ManagementUserPermissions | null | undefined,
   t: (key: string) => string
 ): VisibleNavItem[] {
-  return MAIN_NAV_ENTRIES.filter((entry) => {
-    if (entry.superAdminOnly === true) return isSuperAdmin;
-    if (entry.readPermission === undefined) return true;
-    if (isSuperAdmin) return true;
-    return hasReadPermission(permissions, entry.readPermission);
-  }).map((entry) => ({
+  return getVisibleNavEntries(isSuperAdmin, permissions).map((entry) => ({
     href: entry.href,
     label: t(entry.labelKey),
   }));