@7365admin1/layer-common 3.2.7 → 3.2.8-staging.201

package/components/Layout/NavigationDrawer.vue

@@ -28,45 +28,90 @@
       primary-tinted fill (see `NavigationItem.vue`); 0.12 left the fill at
       1.15:1, 0.18 is 1.44:1 light, 1.33:1 dark.
   -->
+  <!--
+    RESPONSIVE: THE RAIL BECOMES AN OVERLAY BELOW 1024px.
+
+    `permanent` was hardcoded, which is why the prototype's own behaviour - and
+    ours - was a 252px rail still sitting there on a 360px phone with the
+    content squeezed into what was left. Dropping `permanent` and naming the
+    breakpoint hands the whole behaviour to Vuetify: at >= 1024 the drawer is
+    part of the layout exactly as it is today, and below it the same drawer
+    becomes temporary, floats OVER the content with a scrim, and closes on the
+    scrim, on Escape and on a navigation.
+
+    1024 rather than Vuetify's default 1280: at 1024 the rail still leaves a
+    772px content column, which is a usable table. Below that it does not.
+
+    Nothing about the menu changes - same items, same order, same permissions,
+    same routes. Only where the panel is drawn.
+  -->
+  <!--
+    PHASE 2 - THE GROUPED SIDEBAR.
+
+    The rail is 252px as drawn, the brand row is the design's 34px tile plus
+    the product name, and the menu is printed in labelled sections.
+
+    The MENU ITSELF IS UNTOUCHED. Each application still builds its own array,
+    gated item by item on its own permissions, and it is rendered in exactly
+    that order; `utils/nav-sections.ts` only decides which label to print above
+    which item, and an item whose title it does not know keeps its place under
+    the heading it follows. Nothing here can add, hide, move or rename a menu
+    entry, and no route, permission or click handler is involved.
+  -->
   <v-navigation-drawer
     v-model="drawer"
-    permanent
+    :mobile-breakpoint="1024"
+    :width="252"
     class="bg-brand-surface brand-drawer"
   >
-    <v-list>
-      <v-list-item>
-        <v-list-item-title class="text-h6">
-          {{ props.title || APP_NAME }}
-        </v-list-item-title>
-      </v-list-item>
+    <div class="brand-drawer__brand">
+      <div class="brand-drawer__logo">
+        <v-icon :icon="brandIcon" size="19" />
+      </div>
 
-      <slot name="action" />
+      <div class="brand-drawer__names">
+        <div class="brand-drawer__app">{{ props.title || APP_NAME }}</div>
+        <div class="brand-drawer__suite">iService365</div>
+      </div>
+    </div>
+
+    <v-list>
+      <!--
+        The site selector, in the design's bordered card. The slot's CONTENTS
+        are whatever the application puts there, still inside the same
+        `v-list` it has always been inside - this only draws the box around it.
+      -->
+      <div v-if="$slots.action" class="brand-drawer__context">
+        <slot name="action" />
+      </div>
 
       <!-- NAVIGATION ITEMS -->
-      <v-tooltip
-        v-for="(item, index) in navigationItems"
+      <template
+        v-for="({ item, section }, index) in sectionedItems"
         :key="`${item.title}-${index}`"
-        location="right"
-        :disabled="!item.disabled"
       >
-        <template #activator="{ props: tooltipProps }">
-          <div v-bind="tooltipProps">
-            <NavigationItem
-              :title="item.title"
-              :icon="item.icon"
-              :route="item.route"
-              :children="item.children"
-              :link="item.link"
-              :class="{
-                'opacity-50 pointer-events-none': item.disabled,
-              }"
-              @click="() => handleClick(item)"
-            />
-          </div>
-        </template>
-
-        <span>Please complete onboarding first</span>
-      </v-tooltip>
+        <div v-if="section" class="brand-drawer__section">{{ section }}</div>
+
+        <v-tooltip location="right" :disabled="!item.disabled">
+          <template #activator="{ props: tooltipProps }">
+            <div v-bind="tooltipProps">
+              <NavigationItem
+                :title="item.title"
+                :icon="item.icon"
+                :route="item.route"
+                :children="item.children"
+                :link="item.link"
+                :class="{
+                  'opacity-50 pointer-events-none': item.disabled,
+                }"
+                @click="() => handleClick(item)"
+              />
+            </div>
+          </template>
+
+          <span>Please complete onboarding first</span>
+        </v-tooltip>
+      </template>
 
       <!-- SERVICES SLOT -->
       <slot name="services" />
@@ -75,6 +120,10 @@
 </template>
 
 <script setup lang="ts">
+import { useDisplay } from "vuetify";
+
+import { withSections } from "../../utils/nav-sections";
+
 const props = defineProps({
   navigationItems: { type: Array, required: true },
   title: { type: String, default: "" },
@@ -85,6 +134,32 @@ const emit = defineEmits(["navigate"]);
 const { drawer } = useLocal();
 const { APP_NAME } = useRuntimeConfig().public;
 const route = useRoute();
+
+/**
+ * `drawer` is shared application state and it defaults to OPEN, which is right
+ * for a rail and wrong for an overlay - a phone would load with the menu
+ * covering the page behind a scrim. So the default follows the viewport, and a
+ * user who resizes past the breakpoint gets the state that suits where they
+ * landed.
+ *
+ * Only the DEFAULT is managed here. Once the hamburger has been used, the
+ * user's choice stands until the layout itself changes underneath them.
+ */
+const { mobile } = useDisplay({ mobileBreakpoint: 1024 });
+
+watch(mobile, (isOverlay) => (drawer.value = !isOverlay), { immediate: true });
+
+/**
+ * An overlay drawer that survives a navigation leaves the scrim over the page
+ * the user just asked for. A rail must NOT close - that would be a step added
+ * to every desktop navigation.
+ */
+watch(
+  () => route.fullPath,
+  () => {
+    if (mobile.value) drawer.value = false;
+  }
+);
 const orgId = computed(() => String(route.params.org ?? ""));
 const siteId = computed(() => String(route.params.site ?? ""));
 const { useHidFaceReaderMenu } = useHidNavigation();
@@ -118,6 +193,39 @@ const navigationItems = computed(() => {
   return items;
 });
 
+const sectionedItems = computed(() => withSections(navigationItems.value));
+
+/**
+ * The design's brand tile carries the product's own mark. One icon for eleven
+ * applications would be one application's icon on ten of them, so the tile
+ * follows `APP_NAME` - the same value the row already prints - and falls back
+ * to the suite's shield for anything not listed.
+ */
+const BRAND_ICONS: Record<string, string> = {
+  security: "mdi-shield-check",
+  "property-management": "mdi-office-building",
+  hygiene: "mdi-broom",
+  landscape: "mdi-flower",
+  "pest-control": "mdi-bug",
+  "pool-mgmt": "mdi-pool",
+  "mechanical-electrical": "mdi-flash",
+  admin: "mdi-shield-crown",
+  org: "mdi-domain",
+  account: "mdi-account-circle",
+  main: "mdi-view-grid",
+};
+
+const brandIcon = computed(() => {
+  // `APP_NAME` is an environment value and is spelled for people ("Property
+  // Management"), so it is normalised rather than matched literally.
+  const key = String(APP_NAME ?? "")
+    .toLowerCase()
+    .trim()
+    .replace(/[\s_]+/g, "-");
+
+  return BRAND_ICONS[key] ?? "mdi-shield-check";
+});
+
 const handleClick = (item: any) => {
   if (item.disabled) return;
   emit("navigate", item);
@@ -130,5 +238,167 @@ const handleClick = (item: any) => {
   --v-border-opacity: 0.45;
   --v-hover-opacity: 0.08;
   --v-activated-opacity: 0.18;
+
+  /**
+   * Phase 1 loaded Manrope and named it `--font-sans` but deliberately set it
+   * on nothing: switching eleven applications to a new typeface before a
+   * single surface had been rebuilt would have left the product looking
+   * half-migrated. The shell IS the surface Phase 2 rebuilds, so it is the
+   * first thing to wear it.
+   */
+  font-family: var(--font-sans);
+}
+
+/* ---------------------------------------------------------------- */
+/* The brand row: 34px accent tile + product name + suite name.      */
+/* ---------------------------------------------------------------- */
+
+.brand-drawer__brand {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 14px 16px 10px;
+}
+
+.brand-drawer__logo {
+  flex: 0 0 34px;
+  width: 34px;
+  height: 34px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--r-inner);
+  /* A white glyph, so the fill has to be the one accent that carries white:
+     `--accent` is 3.23:1 under it, `--accent-strong` is 4.57:1. */
+  background: var(--accent-strong);
+  color: var(--on-accent-strong);
+}
+
+.brand-drawer__names {
+  min-width: 0;
+}
+
+.brand-drawer__app {
+  font-size: var(--fs-card-title);
+  font-weight: var(--fw-card-title);
+  line-height: 1.2;
+  color: var(--text);
+  /* The design prints the application's name in full ("Property Management").
+     Truncating it to "Property Managem…" in a 252px rail loses the word that
+     tells the user which product they are in, so it wraps instead. */
+  overflow-wrap: anywhere;
+  text-transform: capitalize;
+}
+
+.brand-drawer__suite {
+  font-size: 11.5px;
+  font-weight: 600;
+  line-height: 1.3;
+  color: var(--muted);
+}
+
+/**
+ * The organisation / site selector, drawn as the design's bordered card.
+ *
+ * Two applications have no selector to draw: `web-app-admin` passes no slot at
+ * all (handled by the `v-if`), and `web-app-org`'s super-admin layout passes an
+ * EMPTY one - `<template #action> </template>` - which the `v-if` cannot see.
+ * An empty bordered box on that rail would be a box around nothing, so a card
+ * with no element inside it is not drawn.
+ */
+.brand-drawer__context:not(:has(*)) {
+  display: none;
+}
+
+.brand-drawer__context {
+  margin: 2px 4px 4px;
+  border: 1px solid var(--border);
+  border-radius: var(--r-inner-lg);
+  background: var(--card);
+  overflow: hidden;
+}
+
+/* ---------------------------------------------------------------- */
+/* Section labels and the menu items under them.                     */
+/* ---------------------------------------------------------------- */
+
+.brand-drawer__section {
+  padding: 14px 12px 6px;
+  font-size: var(--fs-section-label);
+  font-weight: var(--fw-section-label);
+  letter-spacing: var(--ls-section-label);
+  line-height: 1.2;
+  text-transform: uppercase;
+  color: var(--muted);
+}
+
+/* The first label sits directly under the site selector, so it does not need
+   the separating space the ones between two menu blocks do. */
+.brand-drawer__section:first-child {
+  padding-top: 4px;
+}
+
+/**
+ * `:deep` because the items are `NavigationItem`s - a child component - and
+ * the design's item shape (10px radius, 8px 12px, 13px label) belongs to the
+ * rail rather than to that component, which is also rendered elsewhere.
+ *
+ * ONLY shape and type. The active state's colour still comes from
+ * `color="primary"` on the item itself, which is `--accent-text`.
+ */
+.brand-drawer :deep(.v-list) {
+  padding: 0 8px 12px;
+}
+
+/**
+ * The two `!important`s are not carelessness: Vuetify puts `rounded-0` and
+ * `text-subtitle-2` ON the item, and both of those are utility classes that
+ * are themselves `!important`. Nothing weaker can reach the design's 10px
+ * radius or its 13px label. Both are confined to `.brand-drawer`.
+ */
+.brand-drawer :deep(.v-list-item) {
+  border-radius: var(--r-inner) !important;
+  min-height: 38px;
+  padding-top: 8px;
+  padding-bottom: 8px;
+  padding-inline: 12px;
+  font-size: var(--fs-nav) !important;
+}
+
+.brand-drawer :deep(.v-list-item__prepend > .v-icon) {
+  font-size: 19px;
+  opacity: 1;
+}
+
+/* The icon-to-label gap USED to be stated here and it never applied: Vuetify's
+   own rule is `.v-list-item__prepend > .v-icon ~ .v-list-item__spacer`, three
+   classes, and `.brand-drawer :deep(.v-list-item__spacer)` is also three once
+   the scope attribute is counted - a tie, decided by load order, and Vuetify
+   loaded last. Measured, the gap was still Vuetify's 32px. The rule now lives
+   in `NavigationItem.vue` in Vuetify's own selector shape, so it wins on
+   specificity; every item in this list is a `NavigationItem`. */
+
+.brand-drawer :deep(.v-list-item--active) {
+  font-weight: var(--fw-section-label);
+}
+
+/**
+ * The design's active item is a 12% accent wash, which is exactly what
+ * `--accent-soft` is. Vuetify paints the same idea with an overlay whose
+ * opacity is theme-wide, so the fill is stated here instead of leaving the
+ * rail's active row to a number tuned for tables and cards.
+ */
+.brand-drawer :deep(.v-list-item--active > .v-list-item__overlay) {
+  opacity: 0;
+}
+
+.brand-drawer :deep(.v-list-item--active) {
+  background: var(--accent-soft);
+}
+
+/* A child row indents by the icon slot it does not have, so the labels of a
+   group line up with the labels of its siblings rather than with their icons. */
+.brand-drawer :deep(.v-list-group__items .v-list-item) {
+  padding-inline-start: 41px !important;
 }
 </style>

package/components/ListItem.vue

@@ -1,18 +1,30 @@
+<!--
+  A label/value row. Both columns were `text-subtitle-2` - Vuetify's 14px/500
+  Roboto - so the label that names a value and the value itself were drawn
+  identically, and the trailing chevron was 30px, larger than any icon the
+  design draws anywhere.
+
+  DESIGN GAP, STATED: the handoff has no list row of this shape. The values
+  below are the design's own, taken from the nearest things it does draw: the
+  table cell type (`--fs-cell` / `--fw-cell`) for both columns, `--muted` for
+  the label exactly as the handoff labels a value at line 659, and 18px for the
+  trailing icon, the size its own row icons use (lines 87 and 90).
+-->
 <template>
   <v-list-item :class="props.divider ? border : defaultBorder">
     <v-row>
-      <v-col cols="4" class="text-subtitle-2">
+      <v-col cols="4" class="app-list-row__label">
         <slot name="title"> List Title </slot>
       </v-col>
 
-      <v-col cols="8" class="text-subtitle-2">
+      <v-col cols="8" class="app-list-row__value">
         <slot name="value"> value </slot>
       </v-col>
     </v-row>
 
     <template #append>
       <slot name="append">
-        <v-icon size="30">{{ props.icon }}</v-icon>
+        <v-icon size="18">{{ props.icon }}</v-icon>
       </slot>
     </template>
   </v-list-item>
@@ -33,3 +45,21 @@ const props = defineProps({
 const defaultBorder = "pa-0 pl-8 pr-6 py-4";
 const border = "border-b-sm" + " " + defaultBorder;
 </script>
+
+<style scoped>
+.app-list-row__label,
+.app-list-row__value {
+  font-family: var(--font-sans);
+  font-size: var(--fs-cell);
+  font-weight: var(--fw-cell);
+  letter-spacing: 0;
+}
+
+.app-list-row__label {
+  color: var(--muted);
+}
+
+.app-list-row__value {
+  color: var(--text);
+}
+</style>

package/components/LocalPagination.vue

@@ -1,8 +1,8 @@
 <template>
     <div class="arrow-navigation">
-        <v-btn icon="mdi-chevron-left" variant="text" density="comfortable" :disabled="page <= 1" @click="decrement" />
+        <v-btn class="pager-arrow" icon="mdi-chevron-left" variant="text" density="comfortable" :disabled="page <= 1" @click="decrement" />
         <v-btn
-icon="mdi-chevron-right" variant="text" density="comfortable" :disabled="page >= props.length"
+class="pager-arrow" icon="mdi-chevron-right" variant="text" density="comfortable" :disabled="page >= props.length"
             @click="increment" />
     </div>
 </template>
@@ -28,4 +28,28 @@ const props = defineProps({
         default: 0
     }
 });
-</script>
+</script>
+
+<style scoped>
+/*
+ * The pager sits in EVERY converted table's toolbar (TableMain's `right`
+ * slot), so it was the last piece of factory Vuetify on an otherwise
+ * on-design card: Vuetify's own `on-surface` ink and its comfortable-density
+ * box. The design draws a toolbar arrow borderless - so this is ink, size and
+ * hover only, no border and no fill invented.
+ */
+.arrow-navigation :deep(.pager-arrow) {
+    width: var(--icon-btn);
+    height: var(--icon-btn);
+    border-radius: var(--r-inner);
+    color: var(--text2);
+}
+
+.arrow-navigation :deep(.pager-arrow:hover) {
+    background: var(--hover);
+}
+
+.arrow-navigation :deep(.pager-arrow.v-btn--disabled) {
+    color: var(--muted);
+}
+</style>