@7365admin1/layer-common 3.2.2-staging.91 → 3.2.2-staging.92

package/assets/css/primitives.css

@@ -408,6 +408,139 @@ select.app-field__input {
   }
 }
 
+/* ------------------------------------------------------------------ */
+/* SegmentedControl - Today | Week | Month.                            */
+/* ------------------------------------------------------------------ */
+
+/**
+ * The handoff draws this as a 3px-padded bordered tray holding 8px-radius
+ * segments; the SELECTED one is an ACCENT FILL, not a grey one. Vuetify's
+ * `v-btn-toggle` cannot be talked into that shape (its own height scale, its
+ * dividers, its overlay layer), so the tray is written as markup.
+ *
+ * The fill is `--accent-strong`, not `--accent`: white on `--accent` measures
+ * 3.23:1, the same Phase-1 rule every other filled label follows.
+ */
+.app-seg {
+  display: flex;
+  gap: 2px;
+  padding: 3px;
+  border: 1px solid var(--border);
+  border-radius: var(--r-inner);
+  background: var(--card);
+}
+
+.app-seg__item {
+  padding: 6px 12px;
+  border: none;
+  border-radius: 8px;
+  background: transparent;
+  color: var(--muted);
+  font-family: inherit;
+  font-size: 12.5px;
+  font-weight: 700;
+  line-height: 1.2;
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+.app-seg__item:hover {
+  background: var(--hover);
+}
+
+.app-seg__item--on,
+.app-seg__item--on:hover {
+  background: var(--accent-strong);
+  color: var(--on-accent-strong);
+}
+
+/* ------------------------------------------------------------------ */
+/* KpiTile - the dashboard's headline figure.                          */
+/* ------------------------------------------------------------------ */
+
+/**
+ * Three rows, in this order, straight from the handoff:
+ *   1. a 34px soft icon square and the uppercase label, side by side
+ *   2. the 30px tabular number with its percentage pill BESIDE it
+ *   3. the sub-line
+ * The product had the icon alone on row 1 and the pill stranded at the
+ * bottom, which is why the tile read as a different component.
+ */
+.app-kpi {
+  padding: 18px;
+}
+
+.app-kpi__head {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 14px;
+}
+
+.app-kpi__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 34px;
+  height: 34px;
+  flex: 0 0 34px;
+  border-radius: var(--r-inner);
+}
+
+.app-kpi__label {
+  font-size: var(--fs-table-head);
+  font-weight: var(--fw-table-head);
+  letter-spacing: var(--ls-table-head);
+  text-transform: uppercase;
+  color: var(--muted);
+  min-width: 0;
+}
+
+.app-kpi__action {
+  margin-left: auto;
+  flex: 0 0 auto;
+}
+
+.app-kpi__figure {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+.app-kpi__value {
+  font-size: var(--fs-kpi);
+  font-weight: var(--fw-kpi);
+  letter-spacing: var(--ls-kpi);
+  line-height: 1.1;
+  color: var(--text);
+  font-variant-numeric: tabular-nums;
+}
+
+.app-kpi__chip {
+  display: inline-flex;
+  align-items: center;
+  padding: 3px 8px;
+  border-radius: 999px;
+  font-size: 11.5px;
+  font-weight: 800;
+  line-height: 1.2;
+  background: var(--ok-bg);
+  color: var(--ok);
+}
+
+.app-kpi__chip--down {
+  background: var(--err-bg);
+  color: var(--err);
+}
+
+.app-kpi__sub {
+  margin-top: 6px;
+  font-size: 12.5px;
+  font-weight: 600;
+  color: var(--muted);
+}
+
 /* ------------------------------------------------------------------ */
 /* Responsive - the prototype has no reference, this follows Phase 1.  */
 /* ------------------------------------------------------------------ */

package/components/AppKpiTile.vue

@@ -0,0 +1,65 @@
+<!--
+  THE KPI TILE.
+
+  The handoff's tile is three rows: the soft icon square AND the uppercase
+  label together on the first, the big tabular number with its percentage pill
+  BESIDE it on the second, the sub-line on the third. The product had the icon
+  alone on a row of its own, the label under it, and the pill stranded at the
+  bottom next to the sub-line - the same figures in a different shape.
+
+  It draws what it is given and nothing else: no fetch, no formatting, no
+  threshold logic. `#action` is the far end of the first row (a filter menu, a
+  "View All"); `#default`, when given, replaces the figure rows entirely for
+  the tiles that list items instead of counting them.
+-->
+<template>
+  <AppCard class="app-kpi d-flex flex-column flex-grow-1">
+    <div class="app-kpi__head">
+      <span
+        v-if="icon"
+        class="app-kpi__icon"
+        :style="tint ? { backgroundColor: tint } : undefined"
+      >
+        <v-icon :icon="icon" :color="color || undefined" size="19" />
+      </span>
+
+      <span class="app-kpi__label">{{ label }}</span>
+
+      <span v-if="$slots.action" class="app-kpi__action">
+        <slot name="action" />
+      </span>
+    </div>
+
+    <slot>
+      <div class="app-kpi__figure">
+        <span class="app-kpi__value">{{ value }}</span>
+
+        <span
+          v-if="chip"
+          class="app-kpi__chip"
+          :class="{ 'app-kpi__chip--down': down }"
+        >
+          {{ chip }}
+        </span>
+      </div>
+
+      <div v-if="sub" class="app-kpi__sub">{{ sub }}</div>
+    </slot>
+  </AppCard>
+</template>
+
+<script setup lang="ts">
+defineProps({
+  icon: { type: String, default: "" },
+  /** The icon square's soft fill - a token-derived colour from the caller. */
+  tint: { type: String, default: "" },
+  color: { type: String, default: "" },
+  label: { type: String, default: "" },
+  value: { type: [String, Number], default: "" },
+  /** The percentage pill's text, already formatted by the caller. */
+  chip: { type: String, default: "" },
+  /** Draws the pill in the error tone rather than the success one. */
+  down: { type: Boolean, default: false },
+  sub: { type: String, default: "" },
+});
+</script>

package/components/AppSegmented.vue

@@ -0,0 +1,38 @@
+<!--
+  THE SEGMENTED CONTROL - `Today | Week | Month`.
+
+  A tray of plain `<button>`s, not a `v-btn-toggle`. The toggle brings its own
+  height scale, dividers, ripple and overlay layer, and its selected state is
+  drawn from `on-surface` - which is why the product's selected segment reads
+  grey where the design fills it with the accent.
+
+  Selection only: it writes the same `v-model` the toggle wrote, and the value
+  set is whatever the caller passes. No behaviour is added here.
+-->
+<template>
+  <div class="app-seg" role="group">
+    <button
+      v-for="option in options"
+      :key="String(option.value)"
+      type="button"
+      class="app-seg__item"
+      :class="{ 'app-seg__item--on': model === option.value }"
+      :aria-pressed="model === option.value"
+      @click="model = option.value"
+    >
+      {{ option.label }}
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps({
+  /** `{ label, value }` - the same option list the toggle was given. */
+  options: {
+    type: Array as PropType<Array<{ label: string; value: any }>>,
+    default: () => [],
+  },
+});
+
+const model = defineModel<any>({ default: "" });
+</script>

package/components/Avatar/Main.vue

@@ -1,6 +1,18 @@
 <template>
     <v-avatar :color="getColor(name || id)" :size="size">
-        <v-img v-if="imageSrc" alt="John" :src="imageUrl" />
+        <!--
+          A stored profile photo that 404s left the circle EMPTY - `v-img`
+          draws nothing when the source fails, and there was no fallback under
+          it. The initials the avatar already computes stand in, so the circle
+          is never blank.
+        -->
+        <v-img v-if="imageSrc" :alt="name" :src="imageUrl">
+            <template #error>
+                <div class="d-flex align-center justify-center fill-height">
+                    <span :style="{ fontSize: `${fontSize}px` }">{{ initials }}</span>
+                </div>
+            </template>
+        </v-img>
         <span v-else :style="{
             fontSize: `${fontSize}px`,
             lineHeight: `${size}px`

package/components/DashboardMain.vue

@@ -203,44 +203,36 @@
 
   <section v-else class="unified-dashboard pb-8">
     <!-- ── Header ──────────────────────────────────────────────────────────── -->
-    <div
-      class="d-flex flex-column flex-md-row align-md-start justify-space-between ga-5 mb-6"
+    <PageHeader
+      :title="dashboardTitle"
+      :subtitle="currentSiteName || 'Selected site'"
+      subtitle-icon="mdi-map-marker"
     >
-      <div>
-        <h1 class="dashboard-title mb-0">
-          {{ dashboardTitle }}
-        </h1>
-        <div class="d-flex align-center text-medium-emphasis ga-1 mt-2 text-caption">
-          <v-icon icon="mdi-map-marker" size="16" />
-          <span>{{ currentSiteName || "Selected site" }}</span>
-        </div>
-      </div>
-
-      <div
-        v-if="showHeaderActions"
-        class="d-flex flex-wrap align-center justify-md-end ga-3"
-      >
-        <v-btn
-          variant="outlined"
-          class="text-none font-weight-bold"
-          prepend-icon="mdi-tune-variant"
+      <!--
+        The design's three actions: two 38px ghost buttons and the accent
+        segmented control. Same dialog, same export menu, same range model -
+        `Customize Dashboard` and `Export` shorten to the labels the prototype
+        prints, and the export menu keeps both of its formats.
+      -->
+      <template v-if="showHeaderActions" #actions>
+        <AppButton
+          variant="ghost"
+          icon="mdi-tune-variant"
           @click="openCustomizeDialog"
         >
-          Customize Dashboard
-        </v-btn>
+          Customize
+        </AppButton>
 
         <v-menu>
           <template #activator="{ props: menuProps }">
-            <v-btn
+            <AppButton
               v-bind="menuProps"
-              variant="outlined"
-              class="text-none font-weight-bold"
-              append-icon="mdi-chevron-down"
-              :loading="isExporting"
+              variant="ghost"
+              icon="mdi-download-outline"
               :disabled="isExporting"
             >
               Export
-            </v-btn>
+            </AppButton>
           </template>
 
           <v-list density="compact" border rounded="lg" elevation="3">
@@ -249,36 +241,9 @@
           </v-list>
         </v-menu>
 
-        <v-btn-toggle
-          v-model="selectedRange"
-          mandatory
-          density="comfortable"
-          divided
-          variant="outlined"
-          class="bg-surface"
-          style="border-radius: 8px"
-        >
-          <v-btn
-            v-for="range in rangeOptions"
-            :key="range.value"
-            :value="range.value"
-            class="text-none"
-            size="small"
-            :style="
-              selectedRange === range.value
-                ? {
-                    backgroundColor: 'rgba(var(--v-theme-on-surface), 0.12)',
-                    color: 'rgb(var(--v-theme-on-surface))',
-                    fontWeight: '600',
-                  }
-                : { backgroundColor: 'transparent', color: 'rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity))' }
-            "
-          >
-            {{ range.label }}
-          </v-btn>
-        </v-btn-toggle>
-      </div>
-    </div>
+        <AppSegmented v-model="selectedRange" :options="rangeOptions" />
+      </template>
+    </PageHeader>
 
     <v-progress-linear
       v-if="finalLoading"
@@ -298,20 +263,24 @@
         lg="3"
         class="d-flex"
       >
-        <v-card
-          flat
-          class="dashboard-card dashboard-kpi-card pa-4 flex-grow-1"
-          style="min-height: 158px"
+        <!--
+          The same figures the tile has always shown, in the arrangement the
+          handoff draws them: icon and label on one row, the number with its
+          percentage pill beside it, the sub-line under both. The filter menu
+          and the facility "View All" keep their place at the end of the first
+          row and do exactly what they did.
+        -->
+        <AppKpiTile
+          :icon="card.icon"
+          :tint="card.tint"
+          :color="card.color"
+          :label="card.title"
+          :value="card.value"
+          :chip="kpiChipText(card)"
+          :down="Number(card.percentage) < 0"
+          :sub="card.meta"
         >
-          <div class="d-flex align-start justify-space-between">
-            <div
-              class="d-inline-flex align-center justify-center rounded-lg"
-              style="height: 28px; width: 28px; flex-shrink: 0"
-              :style="{ backgroundColor: card.tint }"
-            >
-              <v-icon :icon="card.icon" :color="card.color" size="15" />
-            </div>
-
+          <template v-if="card.filter || card.key === 'facilityBookings'" #action>
             <v-menu v-if="card.filter" v-model="filterMenus[card.key]">
               <template #activator="{ props: menuProps }">
                 <v-btn
@@ -355,59 +324,24 @@
             >
               View All
             </button>
-          </div>
+          </template>
 
-          <div class="mt-6 w-100">
-            <p class="dashboard-kpi-label mb-3">
-              {{ card.title }}
-            </p>
-            <template
-              v-if="
-                card.key === 'supplyAlert' && Array.isArray(card.raw?.items)
-              "
-            >
-              <div class="d-flex flex-column ga-2 mt-2">
-                <div
-                  v-for="item in card.raw.items"
-                  :key="item._id || item.name"
-                  class="d-flex justify-space-between text-body-2 text-high-emphasis font-weight-medium"
-                >
-                  <span>{{ item.name }}</span>
-                  <span class="text-medium-emphasis">Balance: {{ item.qty }}</span>
-                </div>
-              </div>
-            </template>
-            <template v-else>
-              <div class="d-flex align-center mb-3" style="min-height: 31px">
-                <span class="dashboard-kpi-value">
-                  {{ card.value }}
-                </span>
-              </div>
-              <div class="d-flex align-center flex-wrap ga-2">
-                <span v-if="card.meta" class="text-caption text-medium-emphasis">{{
-                  card.meta
-                }}</span>
-                <v-chip
-                  :color="card.percentage >= 0 ? 'success' : 'error'"
-                  size="x-small"
-                  variant="flat"
-                  class="font-weight-bold"
-                >
-                  <v-icon
-                    :icon="
-                      card.percentage >= 0
-                        ? 'mdi-arrow-up-right'
-                        : 'mdi-arrow-down-right'
-                    "
-                    size="13"
-                    start
-                  />
-                  {{ Math.abs(card.percentage) }}%
-                </v-chip>
+          <!-- The supply tile lists items instead of counting one figure. -->
+          <template
+            v-if="card.key === 'supplyAlert' && Array.isArray(card.raw?.items)"
+          >
+            <div class="d-flex flex-column ga-2">
+              <div
+                v-for="item in card.raw.items"
+                :key="item._id || item.name"
+                class="d-flex justify-space-between text-body-2 text-high-emphasis font-weight-medium"
+              >
+                <span>{{ item.name }}</span>
+                <span class="text-medium-emphasis">Balance: {{ item.qty }}</span>
               </div>
-            </template>
-          </div>
-        </v-card>
+            </div>
+          </template>
+        </AppKpiTile>
       </v-col>
     </v-row>
 
@@ -2491,6 +2425,17 @@ const visibleKpiCards = computed(() =>
   kpiCards.value.filter((card) => isWidgetVisible(card.key))
 );
 
+/**
+ * The percentage pill's label. Same number the chip has always shown, written
+ * the way the handoff prints it - `+0%` / `-6.4%`, the sign carrying what the
+ * arrow icon used to. A card without a percentage gets no pill.
+ */
+function kpiChipText(card: Record<string, any>): string {
+  const value = Number(card?.percentage);
+  if (!Number.isFinite(value)) return "";
+  return `${value < 0 ? "-" : "+"}${Math.abs(value)}%`;
+}
+
 // ─── Dashboard Title ──────────────────────────────────────────────────────────
 
 const dashboardTitle = computed(() => {

package/components/Layout/Header.vue

@@ -126,7 +126,18 @@ const { currentUser } = useLocalAuth();
  */
 const { site } = useSite();
 
-const siteName = computed(() => String(site.value?.name ?? "").trim());
+/**
+ * The shared `site` state is only populated by the screens that load a site
+ * document, so on most screens - the dashboard included - the bar had no name
+ * to print. `SwitchContext` mirrors the label it is ALREADY showing in the
+ * rail into this state, so the bar falls back to the very name the user can
+ * see two inches to the left. Still no request from this component.
+ */
+const shellSiteName = useState<string>("shell-context-site-name", () => "");
+
+const siteName = computed(() =>
+  String(site.value?.name || shellSiteName.value || "").trim()
+);
 
 const route = useRoute();
 
@@ -188,8 +199,11 @@ const name = computed(() => {
 
   if(full) return full;
 
+  /* A member invited by email has no name stored yet, which left the avatar's
+     initials empty and the circle blank. The address is what the product shows
+     that member everywhere else, so it stands in here too. */
   const alternative = user?.name?.trim();
-  return alternative || ""
+  return alternative || user?.email?.trim() || ""
 
 })
 

package/components/SwitchContext.vue

@@ -100,6 +100,24 @@ const name = computed(() => {
   return prop.items.find((item) => item.value === selected.value)?.text ?? "";
 });
 
+/**
+ * THE BREADCRUMB'S SITE HALF.
+ *
+ * The top bar draws `Site name / Page`, but the site's NAME is only ever
+ * resolved here - each application loads its own site list and hands it to
+ * this selector, so the bar had nothing to print and showed the page alone.
+ * The label already on screen is mirrored into shared state for the bar to
+ * read. It is a label: no request is made, and what the selector selects is
+ * untouched.
+ */
+const shellSiteName = useState<string>("shell-context-site-name", () => "");
+
+watchEffect(() => {
+  if (prop.title?.toLowerCase() === "site" && name.value) {
+    shellSiteName.value = name.value;
+  }
+});
+
 const selectItem = (value: string) => {
   selected.value = value;
   menu.value = false;

package/package.json

@@ -2,7 +2,7 @@
   "name": "@7365admin1/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "3.2.2-staging.91",
+  "version": "3.2.2-staging.92",
   "author": "7365admin1",
   "main": "./nuxt.config.ts",
   "publishConfig": {