npm - @byline/host-tanstack-start - Versions diffs - 4.13.1 → 4.14.1 - Mend

@byline/host-tanstack-start 4.13.1 → 4.14.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (15) hide show

package/dist/admin-shell/chrome/admin-layout_module.css +1 -1
package/dist/admin-shell/chrome/admin-menu-drawer_module.css +6 -5
package/dist/admin-shell/chrome/dashboard.js +96 -68
package/dist/admin-shell/chrome/dashboard.module.js +3 -1
package/dist/admin-shell/chrome/dashboard_module.css +27 -1
package/dist/integrations/abilities.d.ts +1 -0
package/dist/integrations/abilities.js +2 -1
package/dist/routes/create-admin-dashboard-route.js +7 -3
package/package.json +11 -11
package/src/admin-shell/chrome/admin-layout.module.css +6 -1
package/src/admin-shell/chrome/admin-menu-drawer.module.css +12 -5
package/src/admin-shell/chrome/dashboard.module.css +42 -2
package/src/admin-shell/chrome/dashboard.tsx +116 -62
package/src/integrations/abilities.tsx +2 -1
package/src/routes/create-admin-dashboard-route.tsx +18 -3

package/dist/admin-shell/chrome/admin-layout_module.css CHANGED Viewed

@@ -1,7 +1,7 @@
 :is(.main-EeTOie, .byline-admin-layout-main) {
   width: 100%;
   max-width: 100%;
-  height: 100vh;
+  min-height: 100vh;
   padding-top: 45px;
   display: flex;
 }

package/dist/admin-shell/chrome/admin-menu-drawer_module.css CHANGED Viewed

@@ -30,8 +30,10 @@
 :is(.asideDesktop-uFlpwO, .byline-admin-menu-drawer-aside-desktop) {
   flex-shrink: 0;
-  align-self: stretch;
-  position: relative;
+  align-self: flex-start;
+  height: calc(100vh - 45px);
+  position: sticky;
+  top: 45px;
 }
 :is(.asideDesktopOpen-kPyJOg, .byline-admin-menu-drawer-aside-desktop-open) {
@@ -43,10 +45,9 @@
 }
 :is(.nav-dDjqu7, .byline-admin-menu-drawer) {
-  max-height: calc(100vh - 60px);
+  flex: auto;
+  min-height: 0;
   margin: 0;
-  position: sticky;
-  top: 0;
   overflow-y: auto;
 }

package/dist/admin-shell/chrome/dashboard.js CHANGED Viewed

@@ -1,8 +1,9 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { getAdminConfig, getWorkflowStatuses } from "@byline/core";
+import { filterReadableCollections, getAdminConfig, getWorkflowStatuses, groupCollectionsForAdmin } from "@byline/core";
 import { useTranslation } from "@byline/i18n/react";
 import { Card, Container, Section } from "@byline/ui/react";
 import clsx from "clsx";
+import { useAbilities } from "../../integrations/abilities.js";
 import { getAdminRoutePath } from "../../routes/admin-path.js";
 import dashboard_module from "./dashboard.module.js";
 import { Link } from "./loose-router.js";
@@ -50,82 +51,109 @@ function StatTile({ ws, count, collectionPath }) {
         ]
     });
 }
-function AdminDashboard({ statsMap }) {
-    const config = getAdminConfig();
+function CollectionCard({ collection, stats }) {
     const { t } = useTranslation('byline-admin');
-    return /*#__PURE__*/ jsx(Section, {
-        children: /*#__PURE__*/ jsx(Container, {
-            children: /*#__PURE__*/ jsx("div", {
-                className: clsx('byline-dashboard-grid', dashboard_module.grid),
-                children: config.collections.map((collection)=>{
-                    const stats = statsMap[collection.path];
-                    const total = stats?.reduce((sum, s)=>sum + s.count, 0) ?? 0;
-                    const workflowStatuses = getWorkflowStatuses(collection);
-                    return /*#__PURE__*/ jsxs(Card, {
+    const total = void 0 !== stats ? stats.reduce((sum, s)=>sum + s.count, 0) : void 0;
+    const workflowStatuses = getWorkflowStatuses(collection);
+    return /*#__PURE__*/ jsxs(Card, {
+        children: [
+            /*#__PURE__*/ jsx(Link, {
+                to: getAdminRoutePath('collections', '$collection'),
+                params: {
+                    collection: collection.path
+                },
+                className: clsx('byline-dashboard-card-link', dashboard_module.cardLink),
+                children: /*#__PURE__*/ jsx(Card.Header, {
+                    children: /*#__PURE__*/ jsxs("div", {
+                        className: clsx('byline-dashboard-card-header', dashboard_module.cardHeader),
                         children: [
-                            /*#__PURE__*/ jsx(Link, {
-                                to: getAdminRoutePath('collections', '$collection'),
-                                params: {
-                                    collection: collection.path
-                                },
-                                className: clsx('byline-dashboard-card-link', dashboard_module.cardLink),
-                                children: /*#__PURE__*/ jsx(Card.Header, {
-                                    children: /*#__PURE__*/ jsxs("div", {
-                                        className: clsx('byline-dashboard-card-header', dashboard_module.cardHeader),
-                                        children: [
-                                            /*#__PURE__*/ jsxs(Card.Title, {
-                                                className: clsx('byline-dashboard-card-title', dashboard_module.cardTitle),
-                                                children: [
-                                                    /*#__PURE__*/ jsx("span", {
-                                                        className: clsx('byline-dashboard-title-text', dashboard_module.titleText),
-                                                        children: collection.labels.plural
-                                                    }),
-                                                    /*#__PURE__*/ jsx("span", {
-                                                        className: clsx('muted byline-dashboard-title-meta', dashboard_module.titleMeta),
-                                                        children: t('dashboard.totalCount', {
-                                                            count: total
-                                                        })
-                                                    })
-                                                ]
-                                            }),
-                                            /*#__PURE__*/ jsx(Card.Description, {
-                                                className: "muted",
-                                                children: t("dashboard.collectionDescription", {
-                                                    label: collection.labels.plural
-                                                })
-                                            })
-                                        ]
-                                    })
-                                })
-                            }),
-                            /*#__PURE__*/ jsx(Card.Content, {
-                                children: void 0 !== stats ? /*#__PURE__*/ jsx("div", {
-                                    className: clsx('byline-dashboard-stat-grid', dashboard_module.statGrid),
-                                    children: workflowStatuses.map((ws)=>{
-                                        const entry = stats.find((s)=>s.status === ws.name);
-                                        return /*#__PURE__*/ jsx(StatTile, {
-                                            ws: ws,
-                                            count: entry?.count ?? 0,
-                                            collectionPath: collection.path
-                                        }, ws.name);
-                                    })
-                                }) : /*#__PURE__*/ jsx(Link, {
-                                    to: getAdminRoutePath('collections', '$collection'),
-                                    params: {
-                                        collection: collection.path
-                                    },
-                                    className: clsx('byline-dashboard-empty-link', dashboard_module.emptyLink),
-                                    children: /*#__PURE__*/ jsx("p", {
-                                        children: t("dashboard.collectionDescription", {
-                                            label: collection.labels.plural
+                            /*#__PURE__*/ jsxs(Card.Title, {
+                                className: clsx('byline-dashboard-card-title', dashboard_module.cardTitle),
+                                children: [
+                                    /*#__PURE__*/ jsx("span", {
+                                        className: clsx('byline-dashboard-title-text', dashboard_module.titleText),
+                                        children: collection.labels.plural
+                                    }),
+                                    void 0 !== total && /*#__PURE__*/ jsx("span", {
+                                        className: clsx('muted byline-dashboard-title-meta', dashboard_module.titleMeta),
+                                        children: t('dashboard.totalCount', {
+                                            count: total
                                         })
                                     })
+                                ]
+                            }),
+                            /*#__PURE__*/ jsx(Card.Description, {
+                                className: "muted",
+                                children: t("dashboard.collectionDescription", {
+                                    label: collection.labels.plural
                                 })
                             })
                         ]
-                    }, collection.path);
+                    })
+                })
+            }),
+            /*#__PURE__*/ jsx(Card.Content, {
+                children: void 0 !== stats ? /*#__PURE__*/ jsx("div", {
+                    className: clsx('byline-dashboard-stat-grid', dashboard_module.statGrid),
+                    children: workflowStatuses.map((ws)=>{
+                        const entry = stats.find((s)=>s.status === ws.name);
+                        return /*#__PURE__*/ jsx(StatTile, {
+                            ws: ws,
+                            count: entry?.count ?? 0,
+                            collectionPath: collection.path
+                        }, ws.name);
+                    })
+                }) : /*#__PURE__*/ jsx(Link, {
+                    to: getAdminRoutePath('collections', '$collection'),
+                    params: {
+                        collection: collection.path
+                    },
+                    className: clsx('byline-dashboard-empty-link', dashboard_module.emptyLink),
+                    children: /*#__PURE__*/ jsx("p", {
+                        children: t("dashboard.collectionDescription", {
+                            label: collection.labels.plural
+                        })
+                    })
                 })
             })
+        ]
+    });
+}
+function AdminDashboard({ statsMap }) {
+    const config = getAdminConfig();
+    const { t } = useTranslation('byline-admin');
+    const { isSuperAdmin, abilities } = useAbilities();
+    const visible = filterReadableCollections(config.collections, {
+        isSuperAdmin,
+        abilities
+    });
+    const buckets = groupCollectionsForAdmin(visible, config.admin, config.collectionGroups);
+    if (0 === buckets.length) return /*#__PURE__*/ jsx(Section, {
+        children: /*#__PURE__*/ jsx(Container, {
+            children: /*#__PURE__*/ jsx("p", {
+                className: "muted",
+                children: t('dashboard.noCollections')
+            })
+        })
+    });
+    return /*#__PURE__*/ jsx(Section, {
+        children: /*#__PURE__*/ jsx(Container, {
+            children: buckets.map((bucket)=>/*#__PURE__*/ jsxs("section", {
+                    className: clsx('byline-dashboard-group', dashboard_module.group),
+                    children: [
+                        null !== bucket.label && /*#__PURE__*/ jsx("h2", {
+                            className: clsx('byline-dashboard-group-heading', dashboard_module.groupHeading),
+                            children: bucket.label
+                        }),
+                        /*#__PURE__*/ jsx("div", {
+                            className: clsx('byline-dashboard-grid', dashboard_module.grid),
+                            children: bucket.collections.map((collection)=>/*#__PURE__*/ jsx(CollectionCard, {
+                                    collection: collection,
+                                    stats: statsMap[collection.path]
+                                }, collection.path))
+                        })
+                    ]
+                }, bucket.name ?? '__ungrouped__'))
         })
     });
 }

package/dist/admin-shell/chrome/dashboard.module.js CHANGED Viewed

@@ -14,6 +14,8 @@ const dashboard_module = {
     tilePublished: "tilePublished-J3RcRP",
     tileArchived: "tileArchived-xNthEz",
     tileCustom: "tileCustom-cAV1h6",
-    emptyLink: "emptyLink-UVXqHV"
+    emptyLink: "emptyLink-UVXqHV",
+    group: "group-Q8QBu_",
+    groupHeading: "groupHeading-RsImn4"
 };
 export default dashboard_module;

package/dist/admin-shell/chrome/dashboard_module.css CHANGED Viewed

@@ -1,5 +1,5 @@
 :is(.grid-aNPhoI, .byline-dashboard-grid) {
-  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
   gap: 1.5rem;
   display: grid;
 }
@@ -173,3 +173,29 @@
   display: block;
 }
+:is(.group-Q8QBu_, .byline-dashboard-group) {
+  flex-direction: column;
+  gap: 1rem;
+  display: flex;
+}
+:is(.group-Q8QBu_ + .group-Q8QBu_, .byline-dashboard-group + .byline-dashboard-group) {
+  margin-top: 2.5rem;
+}
+:is(.groupHeading-RsImn4, .byline-dashboard-group-heading) {
+  border-bottom: var(--border-width-thin) var(--border-style-solid) var(--gray-200);
+  letter-spacing: .02em;
+  text-transform: uppercase;
+  color: var(--gray-600);
+  margin: 0;
+  padding-bottom: .5rem;
+  font-size: 1.125rem;
+  font-weight: 600;
+}
+:is(:is([data-theme="dark"], .dark) .groupHeading-RsImn4, :is([data-theme="dark"], .dark) .byline-dashboard-group-heading) {
+  border-bottom-color: var(--gray-700);
+  color: var(--gray-400);
+}

package/dist/integrations/abilities.d.ts CHANGED Viewed

@@ -49,6 +49,7 @@ export declare function useAbilities(): {
     has: (ability: string) => boolean;
     hasAny: (abilities: readonly string[]) => boolean;
     isSuperAdmin: boolean;
+    abilities: readonly string[];
 };
 /**
  * JSX wrapper. Renders `children` only when the current admin holds

package/dist/integrations/abilities.js CHANGED Viewed

@@ -17,7 +17,8 @@ function useAbilities() {
     return {
         has,
         hasAny,
-        isSuperAdmin: user.is_super_admin
+        isSuperAdmin: user.is_super_admin,
+        abilities: user.abilities
     };
 }
 function RequireAbility({ ability, children }) {

package/dist/routes/create-admin-dashboard-route.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { createFileRoute } from "@tanstack/react-router";
-import { getAdminConfig } from "@byline/core";
+import { filterReadableCollections, getAdminConfig } from "@byline/core";
 import { useTranslation } from "@byline/i18n/react";
 import { BreadcrumbsClient } from "../admin-shell/chrome/breadcrumbs/breadcrumbs-client.js";
 import { AdminDashboard } from "../admin-shell/chrome/dashboard.js";
@@ -8,10 +8,14 @@ import { getCollectionStats } from "../server-fns/collections/index.js";
 import { getAdminRoutePath } from "./admin-path.js";
 function createAdminDashboardRoute(path) {
     const Route = createFileRoute(path)({
-        loader: async ()=>{
+        loader: async ({ context })=>{
             const { collections } = getAdminConfig();
+            const visible = filterReadableCollections(collections, {
+                isSuperAdmin: context.user.is_super_admin,
+                abilities: context.user.abilities
+            });
             const statsMap = {};
-            await Promise.all(collections.filter((c)=>true === c.showStats).map(async (c)=>{
+            await Promise.all(visible.filter((c)=>true === c.showStats).map(async (c)=>{
                 try {
                     statsMap[c.path] = await getCollectionStats(c.path);
                 } catch  {

package/package.json CHANGED Viewed

@@ -3,7 +3,7 @@
   "private": false,
   "type": "module",
   "license": "MPL-2.0",
-  "version": "4.13.1",
+  "version": "4.14.1",
   "engines": {
     "node": ">=20.9.0"
   },
@@ -117,13 +117,13 @@
     "react-json-view-lite": "^2.5.0",
     "react-swipeable": "^7.0.2",
     "zod": "^4.4.3",
-    "@byline/admin": "4.13.1",
-    "@byline/auth": "4.13.1",
-    "@byline/ai": "4.13.1",
-    "@byline/core": "4.13.1",
-    "@byline/i18n": "4.13.1",
-    "@byline/client": "4.13.1",
-    "@byline/ui": "4.13.1"
+    "@byline/auth": "4.14.1",
+    "@byline/admin": "4.14.1",
+    "@byline/ai": "4.14.1",
+    "@byline/i18n": "4.14.1",
+    "@byline/client": "4.14.1",
+    "@byline/core": "4.14.1",
+    "@byline/ui": "4.14.1"
   },
   "peerDependencies": {
     "@tanstack/react-router": "^1.167.0",
@@ -136,8 +136,8 @@
     "@biomejs/biome": "2.5.9",
     "@rsbuild/plugin-react": "^2.1.0",
     "@rslib/core": "^0.23.2",
-    "@tanstack/react-router": "^1.170.30",
-    "@tanstack/react-start": "^1.168.47",
+    "@tanstack/react-router": "^1.170.31",
+    "@tanstack/react-start": "^1.168.48",
     "@types/node": "^26.2.0",
     "@types/react": "19.2.18",
     "@types/react-dom": "19.2.4",
@@ -148,7 +148,7 @@
     "rimraf": "^6.1.3",
     "typescript": "^7.0.2",
     "typescript-plugin-css-modules": "^5.2.0",
-    "vite": "^8.2.1",
+    "vite": "^8.2.2",
     "vitest": "^4.1.11"
   },
   "publishConfig": {

package/src/admin-shell/chrome/admin-layout.module.css CHANGED Viewed

@@ -6,10 +6,15 @@
  * Override handle: .byline-admin-layout-main
  */
+/* `min-height`, not `height`: the document is the scroll container, so with a
+   fixed 100vh height the flex row ends at the fold and the sticky menu drawer
+   inside it has nothing left to stick to — it scrolls away as soon as the
+   route content runs past one viewport. Growing with the content gives the
+   drawer a containing block tall enough to stay pinned all the way down. */
 .main,
 :global(.byline-admin-layout-main) {
   display: flex;
-  height: 100vh;
+  min-height: 100vh;
   width: 100%;
   max-width: 100%;
   padding-top: 45px;

package/src/admin-shell/chrome/admin-menu-drawer.module.css CHANGED Viewed

@@ -47,10 +47,16 @@
   overflow: hidden;
 }
+/* Pinned under the fixed app bar (45px) for the whole scroll of the page.
+   `align-self: flex-start` keeps the sticky box from being stretched to the
+   full height of the flex row — a stretched sticky item has no room to move
+   and never pins. */
 .asideDesktop,
 :global(.byline-admin-menu-drawer-aside-desktop) {
-  position: relative;
-  align-self: stretch;
+  position: sticky;
+  top: 45px;
+  align-self: flex-start;
+  height: calc(100vh - 45px);
   flex-shrink: 0;
 }
@@ -64,12 +70,13 @@
   width: 60px;
 }
+/* The aside owns the viewport-height box; the nav just fills it and scrolls
+   internally when the menu is longer than the drawer. */
 .nav,
 :global(.byline-admin-menu-drawer) {
-  position: sticky;
-  top: 0;
+  flex: 1 1 auto;
+  min-height: 0;
   margin: 0;
-  max-height: calc(100vh - 60px);
   overflow-y: auto;
 }

package/src/admin-shell/chrome/dashboard.module.css CHANGED Viewed

@@ -2,7 +2,10 @@
  * AdminDashboard — collection-summary cards on /admin.
  *
  * Override handles:
- *   .byline-dashboard-grid             — outer auto-fit card grid
+ *   .byline-dashboard-grid             — auto-fit card grid inside each group
+ *   .byline-dashboard-group            — one section per group (and the
+ *                                        heading-less ungrouped band)
+ *   .byline-dashboard-group-heading    — the group's heading
  *   .byline-dashboard-card-header      — header row of each card
  *   .byline-dashboard-card-title       — flex row inside the header
  *   .byline-dashboard-title-text       — collection plural-name label
@@ -21,7 +24,11 @@
 .grid,
 :global(.byline-dashboard-grid) {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
+  /* `auto-fill` rather than `auto-fit`: each group owns its own grid, so a
+     group holding a single collection would stretch that card across the full
+     row under `auto-fit`. `auto-fill` keeps the empty tracks, so cards are the
+     same width in every group regardless of how many the group holds. */
+  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
   gap: 1.5rem;
 }
@@ -243,3 +250,36 @@
 :global(.byline-dashboard-empty-link) {
   display: block;
 }
+/* Group sections — one per dashboard collection group, plus the leading
+   ungrouped band, which renders with no heading. */
+.group,
+:global(.byline-dashboard-group) {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+.group + .group,
+:global(.byline-dashboard-group) + :global(.byline-dashboard-group) {
+  margin-top: 2.5rem;
+}
+.groupHeading,
+:global(.byline-dashboard-group-heading) {
+  margin: 0;
+  padding-bottom: 0.5rem;
+  border-bottom: var(--border-width-thin) var(--border-style-solid) var(--gray-200);
+  font-size: 1.125rem;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+  color: var(--gray-600);
+}
+:is([data-theme="dark"], :global(.dark)) .groupHeading,
+:is([data-theme="dark"], :global(.dark)) :global(.byline-dashboard-group-heading) {
+  border-bottom-color: var(--gray-700);
+  color: var(--gray-400);
+}

package/src/admin-shell/chrome/dashboard.tsx CHANGED Viewed

@@ -6,12 +6,18 @@
  * Copyright (c) Infonomic Company Limited
  */
-import type { WorkflowStatus } from '@byline/core'
-import { getAdminConfig, getWorkflowStatuses } from '@byline/core'
+import type { CollectionDefinition, WorkflowStatus } from '@byline/core'
+import {
+  filterReadableCollections,
+  getAdminConfig,
+  getWorkflowStatuses,
+  groupCollectionsForAdmin,
+} from '@byline/core'
 import { useTranslation } from '@byline/i18n/react'
 import { Card, Container, Section } from '@byline/ui/react'
 import cx from 'clsx'
+import { useAbilities } from '../../integrations/abilities.jsx'
 import { getAdminRoutePath } from '../../routes/admin-path.js'
 import styles from './dashboard.module.css'
 import { Link } from './loose-router.js'
@@ -58,6 +64,76 @@ function StatTile({
   )
 }
+function CollectionCard({
+  collection,
+  stats,
+}: {
+  collection: CollectionDefinition
+  stats: CollectionStatusCount[] | undefined
+}) {
+  const { t } = useTranslation('byline-admin')
+  // `stats` is undefined when the collection opted out of counts (no
+  // `showStats: true` on the definition) — the dashboard loader only fetches
+  // them for collections that opted in. Falling back to a total of zero there
+  // would read as "this collection is empty", so the count is omitted along
+  // with the status tiles.
+  const total = stats !== undefined ? stats.reduce((sum, s) => sum + s.count, 0) : undefined
+  const workflowStatuses = getWorkflowStatuses(collection)
+  return (
+    <Card>
+      <Link
+        to={getAdminRoutePath('collections', '$collection')}
+        params={{ collection: collection.path }}
+        className={cx('byline-dashboard-card-link', styles.cardLink)}
+      >
+        <Card.Header>
+          <div className={cx('byline-dashboard-card-header', styles.cardHeader)}>
+            <Card.Title className={cx('byline-dashboard-card-title', styles.cardTitle)}>
+              <span className={cx('byline-dashboard-title-text', styles.titleText)}>
+                {collection.labels.plural}
+              </span>
+              {total !== undefined && (
+                <span className={cx('muted byline-dashboard-title-meta', styles.titleMeta)}>
+                  {t('dashboard.totalCount', { count: total })}
+                </span>
+              )}
+            </Card.Title>
+            <Card.Description className="muted">
+              {t('dashboard.collectionDescription', { label: collection.labels.plural })}
+            </Card.Description>
+          </div>
+        </Card.Header>
+      </Link>
+      <Card.Content>
+        {stats !== undefined ? (
+          <div className={cx('byline-dashboard-stat-grid', styles.statGrid)}>
+            {workflowStatuses.map((ws) => {
+              const entry = stats.find((s) => s.status === ws.name)
+              return (
+                <StatTile
+                  key={ws.name}
+                  ws={ws}
+                  count={entry?.count ?? 0}
+                  collectionPath={collection.path}
+                />
+              )
+            })}
+          </div>
+        ) : (
+          <Link
+            to={getAdminRoutePath('collections', '$collection')}
+            params={{ collection: collection.path }}
+            className={cx('byline-dashboard-empty-link', styles.emptyLink)}
+          >
+            <p>{t('dashboard.collectionDescription', { label: collection.labels.plural })}</p>
+          </Link>
+        )}
+      </Card.Content>
+    </Card>
+  )
+}
 interface AdminDashboardProps {
   statsMap: Record<string, CollectionStatusCount[]>
 }
@@ -65,70 +141,48 @@ interface AdminDashboardProps {
 export function AdminDashboard({ statsMap }: AdminDashboardProps) {
   const config = getAdminConfig()
   const { t } = useTranslation('byline-admin')
+  const { isSuperAdmin, abilities } = useAbilities()
+  // Filter before bucketing. A group left with no readable members arrives at
+  // `groupCollectionsForAdmin` empty and is skipped, so its heading disappears
+  // along with it — there is no group-level ability concept anywhere.
+  const visible = filterReadableCollections(config.collections, { isSuperAdmin, abilities })
+  const buckets = groupCollectionsForAdmin(visible, config.admin, config.collectionGroups)
+  if (buckets.length === 0) {
+    return (
+      <Section>
+        <Container>
+          <p className="muted">{t('dashboard.noCollections')}</p>
+        </Container>
+      </Section>
+    )
+  }
   return (
     <Section>
       <Container>
-        <div className={cx('byline-dashboard-grid', styles.grid)}>
-          {config.collections.map((collection) => {
-            const stats = statsMap[collection.path]
-            const total = stats?.reduce((sum, s) => sum + s.count, 0) ?? 0
-            const workflowStatuses = getWorkflowStatuses(collection)
-            return (
-              <Card key={collection.path}>
-                <Link
-                  to={getAdminRoutePath('collections', '$collection')}
-                  params={{ collection: collection.path }}
-                  className={cx('byline-dashboard-card-link', styles.cardLink)}
-                >
-                  <Card.Header>
-                    <div className={cx('byline-dashboard-card-header', styles.cardHeader)}>
-                      <Card.Title className={cx('byline-dashboard-card-title', styles.cardTitle)}>
-                        <span className={cx('byline-dashboard-title-text', styles.titleText)}>
-                          {collection.labels.plural}
-                        </span>
-                        <span className={cx('muted byline-dashboard-title-meta', styles.titleMeta)}>
-                          {t('dashboard.totalCount', { count: total })}
-                        </span>
-                      </Card.Title>
-                      <Card.Description className="muted">
-                        {t('dashboard.collectionDescription', { label: collection.labels.plural })}
-                      </Card.Description>
-                    </div>
-                  </Card.Header>
-                </Link>
-                <Card.Content>
-                  {stats !== undefined ? (
-                    <div className={cx('byline-dashboard-stat-grid', styles.statGrid)}>
-                      {workflowStatuses.map((ws) => {
-                        const entry = stats.find((s) => s.status === ws.name)
-                        return (
-                          <StatTile
-                            key={ws.name}
-                            ws={ws}
-                            count={entry?.count ?? 0}
-                            collectionPath={collection.path}
-                          />
-                        )
-                      })}
-                    </div>
-                  ) : (
-                    <Link
-                      to={getAdminRoutePath('collections', '$collection')}
-                      params={{ collection: collection.path }}
-                      className={cx('byline-dashboard-empty-link', styles.emptyLink)}
-                    >
-                      <p>
-                        {t('dashboard.collectionDescription', { label: collection.labels.plural })}
-                      </p>
-                    </Link>
-                  )}
-                </Card.Content>
-              </Card>
-            )
-          })}
-        </div>
+        {buckets.map((bucket) => (
+          <section
+            key={bucket.name ?? '__ungrouped__'}
+            className={cx('byline-dashboard-group', styles.group)}
+          >
+            {bucket.label !== null && (
+              <h2 className={cx('byline-dashboard-group-heading', styles.groupHeading)}>
+                {bucket.label}
+              </h2>
+            )}
+            <div className={cx('byline-dashboard-grid', styles.grid)}>
+              {bucket.collections.map((collection) => (
+                <CollectionCard
+                  key={collection.path}
+                  collection={collection}
+                  stats={statsMap[collection.path]}
+                />
+              ))}
+            </div>
+          </section>
+        ))}
       </Container>
     </Section>
   )

package/src/integrations/abilities.tsx CHANGED Viewed

@@ -71,12 +71,13 @@ export function useAbilities(): {
   has: (ability: string) => boolean
   hasAny: (abilities: readonly string[]) => boolean
   isSuperAdmin: boolean
+  abilities: readonly string[]
 } {
   const { user } = useAbilityRouteContext()
   const has = (ability: string): boolean => user.is_super_admin || user.abilities.includes(ability)
   const hasAny = (abilities: readonly string[]): boolean =>
     user.is_super_admin || abilities.some((key) => user.abilities.includes(key))
-  return { has, hasAny, isSuperAdmin: user.is_super_admin }
+  return { has, hasAny, isSuperAdmin: user.is_super_admin, abilities: user.abilities }
 }
 /**

package/src/routes/create-admin-dashboard-route.tsx CHANGED Viewed

@@ -8,7 +8,7 @@
 import { createFileRoute } from '@tanstack/react-router'
-import { getAdminConfig } from '@byline/core'
+import { filterReadableCollections, getAdminConfig } from '@byline/core'
 import { useTranslation } from '@byline/i18n/react'
 import { BreadcrumbsClient } from '../admin-shell/chrome/breadcrumbs/breadcrumbs-client.js'
@@ -19,12 +19,27 @@ import { getAdminRoutePath } from './admin-path.js'
 export function createAdminDashboardRoute(path: string) {
   // biome-ignore lint/suspicious/noExplicitAny: dynamic path bypasses route-tree typing
   const Route: any = createFileRoute(path as never)({
-    loader: async () => {
+    loader: async ({
+      context,
+    }: {
+      context: { user: { is_super_admin: boolean; abilities: string[] } }
+    }) => {
       const { collections } = getAdminConfig()
+      // Only fetch counts for collections this administrator can read. Without
+      // the filter, `getCollectionStats` fires for every collection and the
+      // ones it cannot read throw inside `countByStatus`, get swallowed, and
+      // land as an empty array — rendering every status tile as zero, which is
+      // indistinguishable from a genuinely empty collection.
+      const visible = filterReadableCollections(collections, {
+        isSuperAdmin: context.user.is_super_admin,
+        abilities: context.user.abilities,
+      })
       const statsMap: Record<string, CollectionStatusCount[]> = {}
       await Promise.all(
-        collections
+        visible
           .filter((c) => c.showStats === true)
           .map(async (c) => {
             try {