@7365admin1/layer-common 3.2.2-staging.93 → 3.2.2-staging.95

package/assets/css/screens.css

@@ -361,6 +361,20 @@
   border-bottom: 1px solid var(--border);
 }
 
+/**
+ * The callers' filter row (`#extension`). It was a `v-toolbar` extension, i.e.
+ * a fixed-height second bar; it is now a plain row under the toolbar with the
+ * same rule under it, so it can size to whatever the caller puts in it.
+ */
+.table-card__extension {
+  border-bottom: 1px solid var(--border);
+}
+
+.table-card__loading {
+  position: absolute;
+  z-index: 1;
+}
+
 .table-card__range {
   font-size: 12px;
   font-weight: 600;

package/components/Avatar/Main.vue

@@ -55,6 +55,39 @@ const initials = computed(() => {
 
 const fontSize = computed(() => Math.round(props.size * 0.5))
 
+/**
+ * WHITE INITIALS ON A HASHED COLOUR - THE ESTATE'S WORST CONTRAST DEFECT.
+ *
+ * The circle's fill is derived from the name, and Vuetify then picks a WHITE
+ * label for it. Measured across the whole space this generator can produce
+ * (360 hues x 20 saturations x 15 lightnesses): **70.6% of names fail AA**,
+ * and the worst - a yellow, `hsl(60,79%,59%)` - reads **1.30:1**. The 3.12:1
+ * seen on one screen was a mild sample, not the floor.
+ *
+ * The name's colour is its identity, so the HUE and SATURATION are kept
+ * exactly; only the lightness is walked down until white clears 4.5:1 on it.
+ * A yellow therefore darkens a long way and a blue barely moves, which is what
+ * makes a single fixed lightness impossible here.
+ */
+const AA = 4.5
+
+const srgb = (c: number) => {
+    const v = c / 255
+    return v <= 0.04045 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4
+}
+
+/** Relative luminance of an `hsl()` triple, without going through the DOM. */
+function luminance(h: number, s: number, l: number): number {
+    const sat = s / 100
+    const light = l / 100
+    const a = sat * Math.min(light, 1 - light)
+    const f = (n: number) => {
+        const k = (n + h / 30) % 12
+        return light - a * Math.max(-1, Math.min(k - 3, Math.min(9 - k, 1)))
+    }
+    return 0.2126 * srgb(f(0) * 255) + 0.7152 * srgb(f(8) * 255) + 0.0722 * srgb(f(4) * 255)
+}
+
 function getColor(str?: string): string {
     if(!str) return "grey"
 
@@ -66,7 +99,14 @@ function getColor(str?: string): string {
 
     const hue = Math.abs(hash) % 360
     const saturation = 60 + (Math.abs((hash >> 3) % 20)) // 60–80%
-    const lightness = 45 + (Math.abs((hash >> 5) % 15)) // 45–60%
+    let lightness = 45 + (Math.abs((hash >> 5) % 15)) // 45–60%
+
+    // ponytail: linear 1% walk, not a solve - the range is at most 45 steps and
+    // this runs once per avatar. Lightness bottoms out at 0, where every hue is
+    // black and white is 21:1, so the loop always terminates on a pass.
+    while (lightness > 0 && 1.05 / (luminance(hue, saturation, lightness) + 0.05) < AA) {
+        lightness -= 1
+    }
 
     return `hsl(${hue}, ${saturation}%, ${lightness}%)`
 }

package/components/BillingMain.vue

@@ -1,28 +1,27 @@
 <template>
-  <v-row no-gutters>
-    <v-col cols="12">
-      <v-card width="100%" variant="flat" class="table-card" :loading="false">
-        <v-toolbar
-          density="compact"
-          color="transparent"
-          class="table-card__toolbar"
-        >
-          <template #prepend>
-            <v-btn fab icon density="comfortable">
-              <v-icon>mdi-refresh</v-icon>
-            </v-btn>
-          </template>
-          <template #append>
-            <v-row no-gutters justify="end" align="center">
-              <span class="mr-2 table-card__range">
-                {{ pageRange }}
-              </span>
-              <local-pagination v-model="page" :length="pages" />
-            </v-row>
-          </template>
-        </v-toolbar>
+  <div>
+    <!--
+      THE DESIGN'S PAGE SCAFFOLD (same shape as Service Providers).
+
+      Placement only: the same refresh control, the same range text, the same
+      pager bound to the same `page`, and the table, its columns and its cell
+      templates are untouched. The screen simply gains the page title it has
+      never had, and its card + toolbar are the design's rather than Vuetify's.
+    -->
+    <PageHeader title="Billing" />
+
+    <AppCard class="table-card">
+      <CardToolbar :count="pageRange">
+        <template #left>
+          <AppButton variant="icon" icon="mdi-refresh" aria-label="Refresh" />
+        </template>
+
+        <template #right>
+          <local-pagination v-model="page" :length="pages" />
+        </template>
+      </CardToolbar>
 
-        <v-data-table
+      <v-data-table
           :headers="headers"
           :items="items"
           item-value="_id"
@@ -44,10 +43,9 @@
               {{ item.nature }}
             </span>
           </template>
-        </v-data-table>
-      </v-card>
-    </v-col>
-  </v-row>
+      </v-data-table>
+    </AppCard>
+  </div>
 </template>
 
 <script setup lang="ts">

package/components/EntryPassMain.vue

@@ -5,28 +5,41 @@
     :height="'200px'"
     v-if="loading"
   />
-  <v-row no-gutters v-if="!loading">
-    <v-col cols="12" elevation="3" class="screen-card">
-      <v-tabs v-model="activeTab" color="primary" class="px-2 screen-tabs">
-        <v-tab value="general">
-          <v-icon start>mdi-cog-outline</v-icon>
-          General
-        </v-tab>
-        <v-tab value="qrcode">
-          <v-icon start>mdi-qrcode</v-icon>
-          QR Code
-        </v-tab>
-        <v-tab value="printer">
-          <v-icon start>mdi-printer</v-icon>
-          Printer
-        </v-tab>
-        <v-tab value="entrypass">
-          <v-icon start>mdi-link-variant</v-icon>
-          Entrypass
-        </v-tab>
-      </v-tabs>
-
-      <v-divider />
+  <div v-if="!loading">
+    <!--
+      THE DESIGN'S CARD + TAB ROW - AND DELIBERATELY NO `PageHeader`.
+
+      This screen owns no table; it is a settings screen of switches and fields,
+      so it takes `AppCard` + `CardToolbar`'s tabs row and no pager, count or
+      refresh, because it has never had any.
+
+      It gets NO page title, unlike the other screens in this pass: its only
+      caller mounts it INSIDE a `v-expansion-panel` on property-management's
+      Settings page whose panel header already reads "Entry Pass". A
+      `PageHeader` here would print that title twice.
+
+      The same four tabs switch the same `v-window` on the same `activeTab`,
+      keeping their icons; every switch, field, button and save handler is
+      untouched.
+    -->
+    <AppCard class="screen-card">
+      <CardToolbar>
+        <template #tabs>
+          <button
+            v-for="tab in entryPassTabs"
+            :key="tab.value"
+            type="button"
+            role="tab"
+            class="app-tab"
+            :class="{ 'app-tab--active': activeTab === tab.value }"
+            :aria-selected="activeTab === tab.value"
+            @click="activeTab = tab.value"
+          >
+            <v-icon start size="16">{{ tab.icon }}</v-icon>
+            {{ tab.label }}
+          </button>
+        </template>
+      </CardToolbar>
 
       <v-window v-model="activeTab">
         <!-- ─── Tab 1: General ─────────────────────────────────── -->
@@ -379,7 +392,7 @@
           </v-row>
         </v-window-item>
       </v-window>
-    </v-col>
+    </AppCard>
 
     <Snackbar v-model="messageSnackbar" :text="message" :color="messageColor" />
 
@@ -388,7 +401,7 @@
       :header="currentEntryPassSettings.qrCodeTemplateHeader"
       :sub-text="currentEntryPassSettings.qrCodeTemplateHeaderSubText"
     />
-  </v-row>
+  </div>
 </template>
 
 <script lang="ts" setup>
@@ -400,6 +413,15 @@ const prop = defineProps({
 
 const activeTab = ref("general");
 
+/** The same four tabs, in the same order, moved out of the template so the
+    design's tab row can `v-for` them. Values unchanged - they key `v-window`. */
+const entryPassTabs = [
+  { value: "general", label: "General", icon: "mdi-cog-outline" },
+  { value: "qrcode", label: "QR Code", icon: "mdi-qrcode" },
+  { value: "printer", label: "Printer", icon: "mdi-printer" },
+  { value: "entrypass", label: "Entrypass", icon: "mdi-link-variant" },
+];
+
 const currentEntryPassSettings = ref<Record<string, any>>({
   _id: "",
   site: "",

package/components/EquipmentItemMain.vue

@@ -2,7 +2,7 @@
   <v-row no-gutters align="center" justify="center">
     <v-col cols="12" lg="12">
       <TableMain
-        :title="`${siteName} Units`"
+        :title="`${siteName} Equipment Items`"
         :items="items"
         :headers="headers"
         :loading="loading"

package/components/EquipmentManagementMain.vue

@@ -2,7 +2,7 @@
   <v-row no-gutters align="center" justify="center">
     <v-col cols="12" lg="12">
       <TableMain
-        :title="`${siteName} Units`"
+        :title="`${siteName} Equipment`"
         :items="items"
         :headers="headers"
         :loading="loading"

package/components/RolePermissionMain.vue

@@ -1,50 +1,46 @@
 <template>
-  <v-row no-gutters>
-    <v-col cols="12" class="mb-2">
-      <v-row no-gutters>
-        <v-btn
-          class="text-none screen-btn-primary"
-          variant="flat"
-          @click="createDialog = true"
-          v-if="canCreateRole"
-        >
+  <div>
+    <!--
+      THE DESIGN'S PAGE SCAFFOLD (same shape as Service Providers).
+
+      `Create role` moves from a bare row above the card onto the title line,
+      on the right, where the design puts a screen's primary action. It is the
+      same button under the same `canCreateRole` permission opening the same
+      dialog. The refresh, the range, the pager and the table are unchanged.
+    -->
+    <PageHeader title="Roles and Permissions">
+      <template #actions>
+        <AppButton v-if="canCreateRole" @click="createDialog = true">
           Create role
-        </v-btn>
-      </v-row>
-    </v-col>
-    <v-col cols="12">
-      <v-card
-        width="100%"
-        variant="flat"
-        class="table-card"
-        :loading="loading"
-      >
-        <v-toolbar
-          density="compact"
-          color="transparent"
-          class="table-card__toolbar"
-        >
-          <template #prepend>
-            <v-btn fab icon density="comfortable" @click="getRoles()">
-              <v-icon>mdi-refresh</v-icon>
-            </v-btn>
-          </template>
-
-          <template #append>
-            <v-row no-gutters justify="end" align="center">
-              <span class="mr-2 table-card__range">
-                {{ pageRange }}
-              </span>
-              <local-pagination
-                v-model="page"
-                :length="pages"
-                @update:value="getRoles()"
-              />
-            </v-row>
-          </template>
-        </v-toolbar>
-
-        <v-data-table
+        </AppButton>
+      </template>
+    </PageHeader>
+
+    <AppCard class="table-card">
+      <!-- `v-card`'s `:loading` bar, drawn explicitly: a loading screen must
+           still say so now that the card is not a `v-card`. -->
+      <v-progress-linear v-if="loading" indeterminate height="2" />
+
+      <CardToolbar :count="pageRange">
+        <template #left>
+          <AppButton
+            variant="icon"
+            icon="mdi-refresh"
+            aria-label="Refresh"
+            @click="getRoles()"
+          />
+        </template>
+
+        <template #right>
+          <local-pagination
+            v-model="page"
+            :length="pages"
+            @update:value="getRoles()"
+          />
+        </template>
+      </CardToolbar>
+
+      <v-data-table
           :headers="props.headers"
           :items="items"
           item-value="_id"
@@ -78,9 +74,8 @@
               </v-list>
             </v-menu>
           </template>
-        </v-data-table>
-      </v-card>
-    </v-col>
+      </v-data-table>
+    </AppCard>
 
     <!-- dialogs -->
     <v-dialog v-model="createDialog" width="500" persistent>
@@ -196,7 +191,7 @@
     </v-dialog>
 
     <Snackbar v-model="messageSnackbar" :text="message" :color="messageColor" />
-  </v-row>
+  </div>
 </template>
 
 <script setup lang="ts">

package/components/ScheduleTastTicketMain.vue

@@ -32,13 +32,18 @@
         </template>
 
         <template #item.createdBy="{ item }">
-          <v-avatar
-            size="32"
-            class="mr-2"
-            :color="getAvatarColor(item.createdBy)"
-          >
-            <span class="white--text">{{ getInitials(item.createdBy) }}</span>
-          </v-avatar>
+          <!--
+            THE 3.12:1 `HS` CHIP.
+
+            This was a hand-rolled copy of `AvatarMain` with two problems: its
+            fill was Vuetify's MATERIAL `blue`/`purple`/`grey` (not a theme
+            token, so no `on-*` pair applied to it) and its `white--text` is
+            Vuetify 2 syntax that does nothing in Vuetify 3 - leaving Vuetify to
+            derive WHITE, which reads 3.12:1 on that blue in BOTH themes.
+            `AvatarMain` draws the same circle with the same initials and now
+            guarantees its label clears 4.5:1.
+          -->
+          <AvatarMain :name="item.createdBy" :size="32" class="mr-2" />
           {{ item.createdBy || "N/A" }}
         </template>
 
@@ -131,19 +136,6 @@ const headers = [
 
 const { formatDate } = useUtils();
 
-function getInitials(name: string) {
-  if (!name) return "";
-  return name
-    .split(" ")
-    .map((n) => n[0])
-    .join("")
-    .toUpperCase();
-}
-function getAvatarColor(name: string) {
-  if (name === "Demo Smith") return "purple";
-  if (name === "Hygiene SP") return "blue";
-  return "grey";
-}
 function acceptTask(item: any) {
   selectedTask.value = item;
   showAcceptDialog.value = true;

package/components/TableMain.vue

@@ -15,6 +15,24 @@
 -->
 <template>
   <v-row no-gutters>
+    <!--
+      THE DESIGN'S PAGE TITLE (Phase 9).
+
+      The design opens every screen with a 22px/800 heading. This shared table
+      card is mounted by 17 module screens, and none of them had one - four of
+      them (Units, Areas, Equipment Item, Equipment Management) were already
+      PASSING `:title` to this component, which had no `title` prop, so the
+      string was landing on the root element as a plain HTML `title` attribute:
+      a browser tooltip nobody asked for. It now draws the heading it was
+      always meant to draw.
+
+      Placement only. No caller changes, no slot moves, no behaviour: a screen
+      that passes no title renders exactly what it rendered before.
+    -->
+    <v-col cols="12" v-if="title">
+      <PageHeader :title="title" />
+    </v-col>
+
     <!-- Top Actions -->
     <v-col cols="12" class="mb-2" v-if="canCreate || $slots.actions">
       <v-row no-gutters>
@@ -62,43 +80,56 @@
 
     <!-- Table Card -->
     <v-col cols="12">
-      <v-card
-        width="100%"
-        variant="flat"
-        class="table-card"
-        :loading="loading"
-      >
+      <!--
+        THE DESIGN'S CARD AND ITS IN-CARD TOP ROW (Phase 9).
+
+        Was a `v-card` + `v-toolbar`. `v-card` brings its own radius, elevation
+        and surface at a specificity a class has to fight, and `v-toolbar` puts
+        its `extension` on a SECOND stacked row. `AppCard` + `CardToolbar` are
+        the primitives the design is drawn with, already proven on
+        `ServiceProviderMain` / `MemberMain`.
+
+        Placement only. The refresh button, the `prepend-additional` slot, the
+        page range, the pager, the `extension` slot and the `footer` slot are
+        the same controls, emitting the same events, in the same order. The
+        `loading` bar `v-card` used to draw is drawn explicitly so a loading
+        screen still says so.
+      -->
+      <AppCard class="table-card">
+        <v-progress-linear
+          v-if="loading"
+          indeterminate
+          height="2"
+          class="table-card__loading"
+        />
+
         <!-- Toolbar -->
-        <v-toolbar
-          density="compact"
-          color="transparent"
-          class="table-card__toolbar"
-          :extension-height="extensionHeight"
-        >
-          <template #prepend>
+        <CardToolbar :count="pageRange">
+          <template #left>
             <v-btn fab icon density="comfortable" variant="text" @click="emits('refresh')">
               <v-icon>mdi-refresh</v-icon>
             </v-btn>
             <slot name="prepend-additional" />
           </template>
 
-          <template #append>
-            <v-row no-gutters justify="end" align="center">
-              <span class="mr-2 table-card__range">
-                {{ pageRange }}
-              </span>
-              <local-pagination
-                v-model="internalPage"
-                :length="pages"
-                @update:value="emits('update:page', internalPage)"
-              />
-            </v-row>
+          <template #right>
+            <local-pagination
+              v-model="internalPage"
+              :length="pages"
+              @update:value="emits('update:page', internalPage)"
+            />
           </template>
+        </CardToolbar>
 
-          <template v-if="$slots.extension" #extension>
-            <slot name="extension" />
-          </template>
-        </v-toolbar>
+        <!--
+          The callers' `extension` is a FILTER row (selects, date ranges), not
+          tabs - it is full-width by construction, so it keeps its own line
+          under the toolbar rather than being folded into it, which would push
+          the pager off the end of the row.
+        -->
+        <div v-if="$slots.extension" class="table-card__extension">
+          <slot name="extension" />
+        </div>
 
         <!-- Data Table -->
         <v-data-table
@@ -129,13 +160,18 @@
           </template>
         </v-data-table>
         <slot name="footer" />
-      </v-card>
+      </AppCard>
     </v-col>
   </v-row>
 </template>
 
 <script lang="ts" setup>
 const props = defineProps({
+  // The design's page heading. Empty = no heading, i.e. exactly today's markup.
+  title: {
+    type: String,
+    default: "",
+  },
   headers: {
     type: Array as PropType<Array<Record<string, any>>>,
     required: true,

package/package.json

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