@7365admin1/layer-common 3.2.2-staging.182 → 3.2.2-staging.188

package/components/DashboardMain.vue

@@ -21,7 +21,7 @@
         <template
           v-if="card.key === 'supplyAlert' && Array.isArray(card.raw?.items)"
         >
-          <div class="d-flex flex-column ga-2 mt-2">
+          <div v-if="card.raw.items.length" class="d-flex flex-column ga-2 mt-2">
             <div
               v-for="item in card.raw.items"
               :key="item._id || item.name"
@@ -31,6 +31,7 @@
               <span class="text-blue-grey">Balance: {{ item.qty }}</span>
             </div>
           </div>
+          <div v-else class="print-kpi-meta mt-2">No supplies recorded</div>
         </template>
         <template v-else>
           <div class="print-kpi-value">{{ card.value }}</div>
@@ -254,6 +255,27 @@
       class="mb-4"
     />
 
+    <!--
+      SAY IT ONCE AT THE TOP, THEN AGAIN WHERE IT HAPPENED. A failed request
+      used to be invisible: zeros in the tiles, "No data to display" in the
+      lists, nothing else. This names what did not load; each tile and panel
+      below carries its own failure too, so nobody has to guess which zero is
+      real. `variant="tonal"` on purpose - Vuetify derives a WHITE label for a
+      filled error alert, which measures 3.60:1 in these themes.
+    -->
+    <v-alert
+      v-if="failedWidgetLabels.length"
+      type="error"
+      variant="tonal"
+      density="compact"
+      icon="mdi-cloud-alert-outline"
+      class="mb-4"
+    >
+      Some of this dashboard could not be loaded ({{
+        failedWidgetLabels.join(", ")
+      }}). The figures for it are missing, not zero — refresh to try again.
+    </v-alert>
+
     <!-- ── KPI Cards ───────────────────────────────────────────────────────── -->
     <v-row dense class="mb-1 align-stretch">
       <v-col
@@ -332,7 +354,11 @@
           <template
             v-if="card.key === 'supplyAlert' && Array.isArray(card.raw?.items)"
           >
-            <div class="d-flex flex-column ga-2">
+            <!--
+              An empty list used to render a title and a blank card - no number,
+              no words, nothing to read. The tile now says what it found.
+            -->
+            <div v-if="card.raw.items.length" class="d-flex flex-column ga-2">
               <div
                 v-for="item in card.raw.items"
                 :key="item._id || item.name"
@@ -342,6 +368,7 @@
                 <span class="text-medium-emphasis">Balance: {{ item.qty }}</span>
               </div>
             </div>
+            <DashboardEmptyState v-else compact />
           </template>
         </AppKpiTile>
       </v-col>
@@ -488,7 +515,7 @@
         </div>
       </div>
 
-      <DashboardEmptyState v-else />
+      <DashboardEmptyState v-else :error="chartFailed" />
     </v-card>
 
     <!-- ── Hygiene / M&E / Landscape / Pest / Pool — task + attendance ────── -->
@@ -533,7 +560,7 @@
               </button>
             </div>
           </div>
-          <DashboardEmptyState v-else />
+          <DashboardEmptyState v-else :error="taskScheduleFailed" />
         </DashboardPanel>
       </v-col>
 
@@ -565,7 +592,7 @@
               <span class="figma-row-figure">{{ item.totalHours || 0 }} hrs</span>
             </div>
           </div>
-          <DashboardEmptyState v-else />
+          <DashboardEmptyState v-else :error="attendanceFailed" />
         </DashboardPanel>
       </v-col>
 
@@ -599,7 +626,7 @@
               </button>
             </div>
           </div>
-          <DashboardEmptyState v-else />
+          <DashboardEmptyState v-else :error="feedbacksFailed" />
         </DashboardPanel>
       </v-col>
     </v-row>
@@ -644,7 +671,7 @@
                 </button>
               </div>
             </div>
-            <DashboardEmptyState v-else />
+            <DashboardEmptyState v-else :error="metricsFailed" />
           </div>
         </div>
       </v-col>
@@ -689,7 +716,7 @@
                 </button>
               </div>
             </div>
-            <DashboardEmptyState v-else />
+            <DashboardEmptyState v-else :error="metricsFailed" />
           </div>
         </div>
       </v-col>
@@ -738,7 +765,7 @@
                 </button>
               </div>
             </div>
-            <DashboardEmptyState v-else />
+            <DashboardEmptyState v-else :error="metricsFailed" />
           </div>
         </div>
       </v-col>
@@ -774,7 +801,7 @@
                 </div>
               </div>
             </div>
-            <DashboardEmptyState v-else />
+            <DashboardEmptyState v-else :error="metricsFailed" />
           </div>
         </div>
       </v-col>
@@ -822,7 +849,7 @@
               </button>
             </div>
           </div>
-          <DashboardEmptyState v-else />
+          <DashboardEmptyState v-else :error="feedbacksFailed" />
         </DashboardPanel>
       </v-col>
     </v-row>
@@ -899,7 +926,7 @@
                 </div>
               </div>
             </div>
-            <DashboardEmptyState v-else />
+            <DashboardEmptyState v-else :error="metricsFailed" />
           </div>
         </div>
       </v-col>
@@ -941,7 +968,7 @@
                 <StatusChip :status="item.status || 'On duty'" pill />
               </div>
             </div>
-            <DashboardEmptyState v-else />
+            <DashboardEmptyState v-else :error="attendanceFailed" />
           </div>
         </div>
       </v-col>
@@ -977,7 +1004,7 @@
               </button>
             </div>
           </div>
-          <DashboardEmptyState v-else />
+          <DashboardEmptyState v-else :error="feedbacksFailed" />
         </DashboardPanel>
       </v-col>
     </v-row>
@@ -1158,6 +1185,15 @@
 </template>
 
 <script setup lang="ts">
+// The one non-auto-imported thing this file needs: the cookie options type, so
+// `runtimeConfig.public.cookieConfig` (typed `unknown`) can be narrowed once
+// rather than at the call site. Same import `useThemePreference.ts` uses.
+import type { CookieOptions } from "#app";
+// Explicitly, not by auto-import: every other component in this layer reaches
+// its utils by relative path (`StatusChip.vue`, `CameraWall.vue`,
+// `plugins/vuetify.ts`), and a bare call resolved to nothing when driven.
+import { buildWorkOrderStatus } from "../utils/dashboard";
+
 // ─── Types ────────────────────────────────────────────────────────────────────
 
 type DashboardMetric = {
@@ -1455,8 +1491,11 @@ const currentVisitorTypeParam = computed(
 // ─── Data Fetching ────────────────────────────────────────────────────────────
 
 // Hygiene / M&E / Landscape / Pest / Pool main metrics
-const { data: getDashboardReq, pending: loadingMetrics } =
-  await useLazyAsyncData(
+const {
+  data: getDashboardReq,
+  pending: loadingMetrics,
+  error: metricsError,
+} = await useLazyAsyncData(
     `get-dashboard-${props.site}-${props.serviceType}`,
     () =>
       props.serviceType && isHygieneMode.value
@@ -1472,8 +1511,11 @@ const { data: getDashboardReq, pending: loadingMetrics } =
   );
 
 // Property / Security main metrics (uses generic getDashboard with visitor type)
-const { data: getDashboardAltReq, pending: loadingAltMetrics } =
-  await useLazyAsyncData(
+const {
+  data: getDashboardAltReq,
+  pending: loadingAltMetrics,
+  error: altMetricsError,
+} = await useLazyAsyncData(
     `get-dashboard-alt-${props.site}-${props.serviceType}`,
     () =>
       props.site && (isPropertyMode.value || isSecurityMode.value)
@@ -1497,8 +1539,11 @@ const { data: getDashboardAltReq, pending: loadingAltMetrics } =
   );
 
 // Weekly activity (all modes)
-const { data: weeklyActivityReq, pending: loadingWeeklyActivity } =
-  await useLazyAsyncData(
+const {
+  data: weeklyActivityReq,
+  pending: loadingWeeklyActivity,
+  error: weeklyActivityError,
+} = await useLazyAsyncData(
     `get-dashboard-weekly-activity-${props.site}-${props.serviceType}`,
     () =>
       props.serviceType
@@ -1514,8 +1559,11 @@ const { data: weeklyActivityReq, pending: loadingWeeklyActivity } =
   );
 
 // Task schedule (hygiene mode only)
-const { data: taskScheduleReq, pending: loadingTaskSchedule } =
-  await useLazyAsyncData(
+const {
+  data: taskScheduleReq,
+  pending: loadingTaskSchedule,
+  error: taskScheduleError,
+} = await useLazyAsyncData(
     `get-dashboard-task-schedule-${props.site}-${props.serviceType}`,
     () =>
       props.serviceType && isHygieneMode.value
@@ -1531,8 +1579,11 @@ const { data: taskScheduleReq, pending: loadingTaskSchedule } =
   );
 
 // Attendance (hygiene + security modes)
-const { data: attendanceReq, pending: loadingAttendance } =
-  await useLazyAsyncData(
+const {
+  data: attendanceReq,
+  pending: loadingAttendance,
+  error: attendanceError,
+} = await useLazyAsyncData(
     `get-dashboard-attendance-${props.site}-${props.serviceType}`,
     () =>
       props.serviceType && !isPropertyMode.value
@@ -1548,8 +1599,11 @@ const { data: attendanceReq, pending: loadingAttendance } =
   );
 
 // Feedbacks (all modes)
-const { data: feedbacksReq, pending: loadingFeedbacks } =
-  await useLazyAsyncData(
+const {
+  data: feedbacksReq,
+  pending: loadingFeedbacks,
+  error: feedbacksError,
+} = await useLazyAsyncData(
     `get-dashboard-feedbacks-${props.site}-${props.serviceType}`,
     () =>
       props.serviceType
@@ -1593,35 +1647,64 @@ const finalLoading = computed(() => {
   );
 });
 
+// ─── Request Failures ─────────────────────────────────────────────────────────
+
+/**
+ * A DEAD API USED TO LOOK EXACTLY LIKE A QUIET DAY.
+ *
+ * Every request's result was read as `x.value ?? <zero>`, so a rejected call
+ * produced the same screen as a site with nothing on it: every tile 0, every
+ * trend +0%, every list "No data to display", and not one word to say the data
+ * never arrived. That ambiguity has cost this estate days before now.
+ *
+ * `useLazyAsyncData` already hands back an `error` ref; these carry it to the
+ * widgets that asked for the data, so a zero on this page is a measurement and
+ * a failure says so.
+ */
+const metricsFailed = computed(() =>
+  Boolean(isHygieneMode.value ? metricsError.value : altMetricsError.value)
+);
+const chartFailed = computed(() => Boolean(weeklyActivityError.value));
+const taskScheduleFailed = computed(() => Boolean(taskScheduleError.value));
+const attendanceFailed = computed(() => Boolean(attendanceError.value));
+const feedbacksFailed = computed(() => Boolean(feedbacksError.value));
+
+/** The header banner - one line, whatever combination failed. */
+const failedWidgetLabels = computed(() => {
+  const labels: string[] = [];
+  if (metricsFailed.value) labels.push("the summary tiles");
+  if (chartFailed.value) labels.push("the activity chart");
+  if (taskScheduleFailed.value && isHygieneMode.value)
+    labels.push(primaryListConfig.value.title.toLowerCase());
+  if (attendanceFailed.value && !isPropertyMode.value) labels.push("staff");
+  if (feedbacksFailed.value) labels.push("feedbacks");
+  return labels;
+});
+
+/** The text a tile or panel shows in place of a figure it does not have. */
+const LOAD_FAILED_TEXT = "Couldn't load";
+
 // ─── Merged Dashboard Data ────────────────────────────────────────────────────
 
 const finalDashboardData = computed<Record<string, any>>(() => {
   if (!props.serviceType) return props.dashboardData || {};
 
-  let weeklyActivity = weeklyActivityReq.value ?? [];
-  const hasNoActivity =
-    !weeklyActivity.length ||
-    weeklyActivity.every(
-      (item: any) =>
-        !item.workOrder &&
-        !item.taskCompleted &&
-        !item.openWorkOrder &&
-        !item.closedWorkOrder &&
-        !item.incidents &&
-        !item.visitors
-    );
-
-  if (hasNoActivity && currentPeriod.value === "thisWeek") {
-    weeklyActivity = [
-      { day: "Mon", workOrder: 800, taskCompleted: 1400 },
-      { day: "Tue", workOrder: 450, taskCompleted: 900 },
-      { day: "Wed", workOrder: 950, taskCompleted: 1640 },
-      { day: "Thu", workOrder: 2000, taskCompleted: 2100 },
-      { day: "Fri", workOrder: 2000, taskCompleted: 2700 },
-      { day: "Sat", workOrder: 2200, taskCompleted: 3100 },
-      { day: "Sun", workOrder: 2800, taskCompleted: 3200 },
-    ];
-  }
+  /**
+   * A QUIET WEEK IS NOT A BUSY ONE.
+   *
+   * This used to substitute a hard-coded seven-day curve - Mon 800/1400 through
+   * Sun 2800/3200 - whenever the week's activity came back with nothing in it,
+   * and draw it as real, y-axis to 3,200. The backend zero-fills one row per
+   * day and never returns an empty array, so "nothing in it" is exactly what a
+   * genuinely quiet site looks like; `?? []` made it exactly what a FAILED
+   * request looks like too. And it left the screen: Export -> Word wrote those
+   * invented figures into a document a manager can hand to a client.
+   *
+   * Deleted outright. An empty week now falls through to `hasChartData` and
+   * renders the empty state, a failed one renders the error state, and the Word
+   * export's chart table is already gated on the same `hasChartData`.
+   */
+  const weeklyActivity = weeklyActivityReq.value ?? [];
 
   // `weekly-activity` returns each interval twice over: `openWorkOrder` and
   // `workOrder` are the same not-yet-completed count, `closedWorkOrder` and
@@ -1760,9 +1843,21 @@ const defaultCardValues: TDashboardCardValue[] = [
   {
     key: "supplyAlert",
     periodKey: "period",
-    title: "Supply Alert",
-    icon: "mdi-alert",
-    color: KPI_TONES.err.color,
+    /**
+     * IT IS NOT AN ALERT, SO IT NO LONGER SAYS ALERT.
+     *
+     * The server returns the three lowest-quantity active supplies and NO
+     * threshold of any kind (new-dashboard.repo.ts) - so 900 gloves appeared
+     * under a red "SUPPLY ALERT" heading with a warning triangle, next to
+     * items that genuinely were low, and nothing distinguished them. The title,
+     * the icon and the tone now describe what the data is.
+     *
+     * A real low-stock alert needs a per-supply reorder level the server does
+     * not hold. That is backend work and is deliberately NOT invented here.
+     */
+    title: "Lowest Stock",
+    icon: "mdi-package-variant",
+    color: KPI_TONES.info.color,
   },
 ];
 
@@ -1837,12 +1932,16 @@ const resolvedCardValues = computed(() => {
 
 // ─── Widget Keys by Mode ──────────────────────────────────────────────────────
 
+// "recentActivity" was in this list and in the Customize dialog, and NOTHING
+// renders it - `isWidgetVisible("recentActivity")` appears nowhere in the
+// template. Five apps offered a switch that did nothing whichever way it was
+// set. Removed rather than built: there is no Recent Activity panel anywhere in
+// the estate to connect it to, and inventing one is a new feature, not a fix.
 const defaultExtraWidgetKeys = [
   "activity",
   "taskSchedule",
   "staffStatus",
   "feedbacks",
-  "recentActivity",
 ];
 
 const propertyDefaultWidgetKeys = [
@@ -1869,6 +1968,36 @@ const securityDefaultWidgetKeys = [
   "feedbacks",
 ];
 
+/**
+ * THE CUSTOMISE CHOICE, REMEMBERED.
+ *
+ * Hiding a widget worked and then forgot: nothing was written anywhere, so a
+ * reload brought every panel back and the dialog was decoration.
+ *
+ * A COOKIE, and specifically the layer's own `cookieConfig` - the same
+ * mechanism `sid`, `user`, `landing-page` and the light/dark preference already
+ * travel on (see `composables/useThemePreference.ts` for the full reasoning).
+ * localStorage would be per-origin, and this is one component shipped into
+ * seven applications on seven hostnames. No new storage mechanism, and no
+ * invented endpoint - there is no save API on the server for this.
+ *
+ * One cookie per dashboard MODE, because the three modes have different widget
+ * sets and a security member's choice must not decide what a hygiene member
+ * sees.
+ */
+const widgetPrefsCookie = useCookie<string[] | null>(
+  `dashboard-widgets-${
+    isPropertyMode.value
+      ? "property"
+      : isSecurityMode.value
+      ? "security"
+      : "service"
+  }`,
+  runtimeConfig.public.cookieConfig as CookieOptions<string[] | null> & {
+    readonly?: false;
+  }
+);
+
 const defaultVisibleWidgetKeys = computed(() => {
   if (props.extraWidgetKeys && props.extraWidgetKeys.length > 0) {
     return [
@@ -1889,8 +2018,16 @@ watch(
   (keys) => {
     const nextKeys = [...keys];
     if (!visibleWidgetKeys.value.length) {
-      visibleWidgetKeys.value = nextKeys;
-      draftVisibleWidgetKeys.value = nextKeys;
+      // A remembered choice wins on first paint, filtered against the keys this
+      // mode actually has so a stale cookie cannot resurrect a removed widget.
+      // `Array.isArray` rather than a length check: "the user hid everything"
+      // and "there is no cookie" are different answers.
+      const remembered = Array.isArray(widgetPrefsCookie.value)
+        ? widgetPrefsCookie.value.filter((k) => nextKeys.includes(k))
+        : null;
+      const initial = remembered ?? nextKeys;
+      visibleWidgetKeys.value = initial;
+      draftVisibleWidgetKeys.value = [...initial];
       return;
     }
     visibleWidgetKeys.value = visibleWidgetKeys.value.filter((k) =>
@@ -2037,11 +2174,6 @@ const customizeWidgets = computed(() => {
       title: "Feedbacks",
       description: "Show recent feedback and resolution state.",
     },
-    {
-      key: "recentActivity",
-      title: "Recent Activity",
-      description: "Latest updates across the service.",
-    },
   ];
 });
 
@@ -2285,7 +2417,7 @@ function getSecurityKpiCards() {
   ];
 }
 
-const kpiCards = computed(() => {
+const rawKpiCards = computed(() => {
   if (isPropertyMode.value) return getPropertyKpiCards();
   if (isSecurityMode.value) return getSecurityKpiCards();
 
@@ -2312,6 +2444,22 @@ const kpiCards = computed(() => {
   });
 });
 
+/**
+ * A tile whose request failed shows an em dash and says so, never a zero.
+ * `percentage: NaN` is what suppresses the pill - `kpiChipText()` returns ""
+ * for anything non-finite - and `raw: {}` empties the supply list with it.
+ */
+const kpiCards = computed(() => {
+  if (!metricsFailed.value) return rawKpiCards.value;
+  return rawKpiCards.value.map((card) => ({
+    ...card,
+    value: "—",
+    percentage: NaN,
+    meta: LOAD_FAILED_TEXT,
+    raw: {} as any,
+  }));
+});
+
 const visibleKpiCards = computed(() =>
   kpiCards.value.filter((card) => isWidgetVisible(card.key))
 );
@@ -2534,42 +2682,15 @@ const todayAttentions = computed(() =>
  * is shared by every chip in the estate - or ruling that a chart series is not
  * a status chip. Both are design decisions, so neither is taken here.
  */
-const workOrderStatus = computed(() => {
-  const summary = finalDashboardData.value?.workOrderStatusSummary;
-  const metric = getMetric(["openWorkOrder", "workOrders", "workOrder"]);
-
-  const src = summary || metric;
-  if (!src) return [];
-
-  const completed = Number(src.completed ?? 0);
-  const inProgress = Number(src.inProgress ?? 0);
-  const pending =
-    src.pending !== undefined
-      ? Number(src.pending)
-      : Math.max(0, Number(src.count ?? 0) - inProgress);
-  const max = Math.max(completed, inProgress, pending, 1);
-
-  return [
-    {
-      label: "Completed",
-      value: completed,
-      percent: (completed / max) * 100,
-      color: "var(--ok)",
-    },
-    {
-      label: "In Progress",
-      value: inProgress,
-      percent: (inProgress / max) * 100,
-      color: "var(--err)",
-    },
-    {
-      label: "Pending",
-      value: pending,
-      percent: (pending / max) * 100,
-      color: "var(--warn)",
-    },
-  ];
-});
+const workOrderStatus = computed(() =>
+  // The arithmetic and the "no breakdown, no bars" rule live in
+  // `utils/dashboard.ts` so they have a test; the tone -> token mapping stays
+  // here because it is this template's colour question, not the server's.
+  buildWorkOrderStatus(finalDashboardData.value?.workOrderStatus).map((row) => ({
+    ...row,
+    color: `var(--${row.tone})`,
+  }))
+);
 
 // Security-mode lists
 const activePatrolItems = computed<any[]>(
@@ -2762,7 +2883,21 @@ onUnmounted(() => {
 watch(selectedRange, (period) => {
   if (props.serviceType) {
     const apiPeriod = periodValue[period];
-    if (apiPeriod) currentPeriod.value = apiPeriod;
+    if (apiPeriod) {
+      currentPeriod.value = apiPeriod;
+      /**
+       * The component already READ `?period=` on mount and never wrote it
+       * back, so a refresh - or a link sent to a colleague - silently returned
+       * to Today while the button still said This Month. Writing it closes
+       * both. `replace`, not `push`: changing the range is not a navigation
+       * step the Back button should have to walk through.
+       *
+       * What each range MEANS is untouched here.
+       */
+      if (route.query.period !== apiPeriod) {
+        router.replace({ query: { ...route.query, period: apiPeriod } });
+      }
+    }
   }
   emit("updatePeriod", { key: "__all__", period });
 });
@@ -3341,6 +3476,9 @@ function resetCustomizeDraft() {
 
 function submitCustomize() {
   visibleWidgetKeys.value = [...draftVisibleWidgetKeys.value];
+  // The write is the whole point - see `widgetPrefsCookie`. Saving on Submit
+  // rather than on every switch keeps Cancel meaning cancel.
+  widgetPrefsCookie.value = [...draftVisibleWidgetKeys.value];
   widgetSearch.value = "";
   customizeDialog.value = false;
 }
@@ -3440,6 +3578,13 @@ async function exportDashboard(format: "PDF" | "Word") {
 <body>
   <h1>${props.title || dashboardTitle.value}</h1>
   <div class="subtitle">Site: ${siteName} | Period: ${periodLabel}</div>
+  ${
+    failedWidgetLabels.value.length
+      ? `<div class="subtitle" style="color:#b73535;">Incomplete report: ${failedWidgetLabels.value.join(
+          ", "
+        )} could not be loaded. Any figure shown as — is missing, not zero.</div>`
+      : ""
+  }
       `;
 
       if (visibleKpiCards.value && visibleKpiCards.value.length > 0) {
@@ -3452,6 +3597,9 @@ async function exportDashboard(format: "PDF" | "Word") {
           let kpiValueHtml = `<div class="kpi-value">${card.value}</div>`;
           if (card.key === "supplyAlert" && Array.isArray(card.raw?.items)) {
             kpiValueHtml = '<div style="font-size: 9pt; margin-top: 4px;">';
+            if (!card.raw.items.length) {
+              kpiValueHtml += "<div>No supplies recorded</div>";
+            }
             card.raw.items.forEach((item: any) => {
               kpiValueHtml += `<div><strong>${item.name}</strong>: Balance ${item.qty}</div>`;
             });

package/components/Layout/Header.vue

@@ -89,6 +89,8 @@
 </template>
 
 <script setup lang="ts">
+import { moduleNameFromRoute } from "../../utils/breadcrumb";
+
 const props = defineProps({
   hideNavIcon: {
     type: Boolean,
@@ -142,39 +144,12 @@ const siteName = computed(() =>
 const route = useRoute();
 
 /**
- * The module's name comes off the route name, which the applications build
- * from their own folder structure: `org-site-work-orders` is Work Orders.
- * Leading parameter segments (`org`, `site`) are skipped and the name stops at
- * the first one that follows, so a detail route (`...-feedbacks-id`) and a
- * status route (`...-members-status`) both name their module rather than their
- * argument.
+ * The page's name comes off the route name, which the applications build from
+ * their own folder structure: `org-site-work-orders` is Work Orders. The rule
+ * itself lives in `utils/breadcrumb.ts`, where it is unit-tested against every
+ * route shape the eleven applications actually have.
  */
-const ACRONYMS: Record<string, string> = {
-  cctv: "CCTV",
-  hid: "HID",
-  dob: "DOB",
-  anpr: "ANPR",
-  nfc: "NFC",
-  qr: "QR",
-  soa: "SOA",
-  sp: "SP",
-  id: "ID",
-};
-
-const moduleName = computed(() => {
-  const segments = String(route.name ?? "").split("-").filter(Boolean);
-  const params = new Set(Object.keys(route.params ?? {}));
-
-  let i = 0;
-  while (i < segments.length && params.has(segments[i])) i++;
-
-  const words: string[] = [];
-  while (i < segments.length && !params.has(segments[i])) words.push(segments[i++]);
-
-  return words
-    .map((w) => ACRONYMS[w] ?? w.charAt(0).toUpperCase() + w.slice(1))
-    .join(" ");
-});
+const moduleName = computed(() => moduleNameFromRoute(route));
 
 const profile = computed(() => {
   return `/api/public/${currentUser.value?.profile}`;