@7365admin1/layer-common 3.2.1 → 3.2.2-staging.100

package/components/Layout/NavigationDrawer.vue

@@ -1,40 +1,117 @@
 <!-- LayoutNavigationDrawer.vue -->
 <template>
-  <v-navigation-drawer v-model="drawer" permanent floating class="bg-primary">
-    <v-list>
-      <v-list-item>
-        <v-list-item-title class="text-h6 text-white">
-          {{ props.title || APP_NAME }}
-        </v-list-item-title>
-      </v-list-item>
+  <!--
+    `bg-brand-surface`, not `bg-primary`: `primary` is a foreground colour on a
+    dark page (it has to carry `class="text-primary"` sentences at 4.5:1), and a
+    fill that carries a label cannot also be that. `brand-surface` is a real
+    surface in each theme - see `utils/theme.ts` - so the drawer belongs to the
+    application it is in rather than being the one panel the theme switch never
+    reached. Its label reads 15.43:1 light, 13.21:1 dark.
+
+    NO HARDCODED LABEL COLOUR ANYWHERE IN HERE. Vuetify paints the drawer with
+    `on-brand-surface` and the list inside it inherits that through
+    `bg-transparent`, which the drawer supplies to every `v-list` it contains.
+    A `text-white` in here (or in an app's `#action` / `#services` slot) is
+    white on a light rail at 1.13:1.
+
+    `floating` dropped so the drawer draws its own edge, and the three
+    opacities below are raised on this element only:
+
+    - `border-opacity` 0.45. A surface is a low-contrast panel by design
+      (1.13:1 light, 1.19:1 dark against the page), so the edge is what carries
+      the boundary: 3.27:1 light, 4.33:1 dark. The theme-wide value stays where
+      it is; raising that would redraw every table and card edge in eleven
+      applications.
+    - `hover-opacity` 0.08. Material's 0.04 is 1.11:1 on this rail, which is
+      not feedback. 0.08 is 1.17:1 light, 1.24:1 dark.
+    - `activated-opacity` 0.18. The active item is `primary` text on a
+      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.
 
-      <slot name="action" />
+    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"
+    :mobile-breakpoint="1024"
+    :width="252"
+    class="bg-brand-surface brand-drawer"
+  >
+    <div class="brand-drawer__brand">
+      <div class="brand-drawer__logo">
+        <v-icon :icon="brandIcon" size="19" />
+      </div>
+
+      <div class="brand-drawer__names">
+        <div class="brand-drawer__app">{{ props.title || APP_NAME }}</div>
+        <div class="brand-drawer__suite">iService 365</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" />
@@ -43,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: "" },
@@ -53,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();
@@ -86,8 +193,211 @@ 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);
 };
 </script>
+
+<style scoped>
+/* Scoped to the drawer: none of these reach the rest of the application. */
+.brand-drawer {
+  --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;
+}
+
+/* Vuetify's own 16px gap between the icon and the label, brought to the 10px
+   the design draws. The spacer element is what holds that distance - a margin
+   on the icon leaves it where it was. */
+.brand-drawer :deep(.v-list-item__spacer) {
+  width: 10px;
+}
+
+.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/ManageChecklistMain.vue

@@ -10,10 +10,10 @@
         </v-col>
         <v-spacer />
         <v-col v-if="isScheduleClosed" cols="auto" class="d-flex align-center">
-          <v-chip color="error" variant="tonal" class="text-capitalize">
-            <v-icon start>mdi-lock</v-icon>
+          <StatusChip status="Closed" class="text-capitalize">
+            <v-icon size="14">mdi-lock</v-icon>
             Closed – View Only
-          </v-chip>
+          </StatusChip>
         </v-col>
       </v-row>
       <TableHygiene
@@ -85,7 +85,7 @@
               <v-sheet
                 border
                 rounded="lg"
-                class="d-inline-flex flex-column pa-3 bg-grey-lighten-5"
+                class="d-inline-flex flex-column pa-3"
                 style="max-width: 420px"
               >
                 <div class="d-flex align-center ga-2 mb-2">
@@ -93,9 +93,7 @@
                   <span class="text-caption font-weight-bold">
                     Rejection details
                   </span>
-                  <v-chip size="x-small" color="error" variant="tonal">
-                    Rejected
-                  </v-chip>
+                  <StatusChip status="Rejected" :dot="false" />
                 </div>
                 <div
                   v-if="item.remarks"
@@ -173,22 +171,24 @@
         <template #group-header-append="{ group }">
           <v-row no-gutters align="center" class="ga-2">
             <v-col v-if="isGroupAnyApproved(group)" cols="auto">
-              <v-chip
-                size="x-small"
-                :color="isGroupComplete(group) ? 'success' : 'warning'"
-                variant="tonal"
-                :prepend-icon="
-                  isGroupComplete(group)
-                    ? 'mdi-check-circle-outline'
-                    : 'mdi-progress-clock'
-                "
+              <StatusChip
+                :status="isGroupComplete(group) ? 'Completed' : 'Ongoing'"
+                :tone="isGroupComplete(group) ? 'ok' : 'warn'"
+                :dot="false"
                 class="text-none"
               >
+                <v-icon size="12">
+                  {{
+                    isGroupComplete(group)
+                      ? "mdi-check-circle-outline"
+                      : "mdi-progress-clock"
+                  }}
+                </v-icon>
                 {{ isGroupComplete(group) ? "Completed" : "Ongoing" }}
                 <template v-if="getGroupCompletedByName(group)">
                   · {{ getGroupCompletedByName(group) }}
                 </template>
-              </v-chip>
+              </StatusChip>
             </v-col>
             <v-col
               v-if="group.attachments && group.attachments.length > 0"

package/components/MemberMain.vue

@@ -1,65 +1,65 @@
 <template>
-  <v-row no-gutters>
-    <v-col cols="12" class="mb-2">
-      <v-row no-gutters>
-        <v-btn
-          v-if="props.seatManagement !== 'index'"
-          class="text-none"
-          rounded="pill"
-          variant="tonal"
+  <div>
+    <!--
+      THE DESIGN'S PAGE SCAFFOLD.
+
+      The handoff opens Members with a 22px title row and puts the tabs INSIDE
+      the card's first row, with the pagination on the far end of that same
+      line. Before this the screen had no title at all - the page name existed
+      only in the rail and the browser tab - and the tabs sat in a toolbar
+      extension, i.e. a second stacked bar below a mostly empty one.
+
+      Nothing here changes what the screen does: the same two tabs route the
+      same way, the same refresh and pager call the same `getAll()`, the same
+      `headers` prop drives the same columns, and the same menu carries the
+      same four actions behind the same permission conditions.
+    -->
+    <PageHeader :title="props.title">
+      <template v-if="props.seatManagement !== 'index'" #actions>
+        <AppButton
           :to="{
             name: props.seatManagement,
             params: { organization: props.orgId },
           }"
-          size="large"
         >
           Manage seats
-        </v-btn>
-      </v-row>
-    </v-col>
-
-    <v-col cols="12">
-      <v-card width="100%" variant="outlined" border="thin" rounded="lg">
-        <v-toolbar density="compact" color="grey-lighten-4">
-          <template #prepend>
-            <v-btn fab icon density="comfortable" @click="getAll()">
-              <v-icon>mdi-refresh</v-icon>
-            </v-btn>
-          </template>
-
-          <template #append>
-            <v-row no-gutters justify="end" align="center">
-              <span class="mr-2 text-caption text-font gray">
-                {{ pageRange }}
-              </span>
-              <local-pagination
-                v-model="page"
-                :length="pages"
-                @update:value="getAll()"
-              />
-            </v-row>
-          </template>
-
-          <template #extension>
-            <v-tabs
-              v-model="selectedStatus"
-              color="primary"
-              :height="40"
-              @update:model-value="toRoute"
-              class="w-100"
-            >
-              <v-tab
-                v-for="(tab, i) in tabOptions"
-                :value="tab.status"
-                :key="i"
-                class="text-capitalize"
-              >
-                {{ tab.name }}
-              </v-tab>
-            </v-tabs>
-          </template>
-        </v-toolbar>
-
+        </AppButton>
+      </template>
+    </PageHeader>
+
+    <AppCard class="table-card">
+      <CardToolbar :count="pageRange">
+        <template #tabs>
+          <button
+            v-for="(tab, i) in tabOptions"
+            :key="i"
+            type="button"
+            role="tab"
+            class="app-tab"
+            :class="{ 'app-tab--active': selectedStatus === tab.status }"
+            :aria-selected="selectedStatus === tab.status"
+            @click="toRoute(tab.status)"
+          >
+            {{ tab.name }}
+          </button>
+        </template>
+
+        <template #right>
+          <AppButton
+            variant="icon"
+            icon="mdi-refresh"
+            aria-label="Refresh"
+            @click="getAll()"
+          />
+          <local-pagination
+            v-model="page"
+            :length="pages"
+            @update:value="getAll()"
+          />
+        </template>
+      </CardToolbar>
+
+      <div class="app-table-scroll">
         <v-data-table
           :headers="props.headers"
           :items="items"
@@ -73,6 +73,13 @@
           <template #item.nature="{ item }">
             {{ replaceMatch(item.nature, "_", " ") }}
           </template>
+          <!-- The role is a soft pill in the design, not a plain word. Same
+               text, same column, same source field. -->
+          <template #item.roleName="{ item }">
+            <StatusChip v-if="item.roleName" :dot="false" pill tone="info">
+              {{ item.roleName }}
+            </StatusChip>
+          </template>
           <template #item.dateInvited="{ item }">
             {{ formatDateInvited(item.dateInvited) }}
           </template>
@@ -89,8 +96,13 @@
               offset-y
               width="150"
             >
-              <template v-slot:activator="{ props }">
-                <v-icon v-bind="props">mdi-dots-vertical</v-icon>
+              <template v-slot:activator="{ props: menuProps }">
+                <AppButton
+                  v-bind="menuProps"
+                  variant="row"
+                  icon="mdi-dots-vertical"
+                  aria-label="Member actions"
+                />
               </template>
               <v-list>
                 <v-list-item
@@ -128,8 +140,9 @@
             </v-menu>
           </template>
         </v-data-table>
-      </v-card>
-    </v-col>
+      </div>
+    </AppCard>
+
     <ConfirmDialog
       v-model="confirmDialog"
       :loading="updateLoading"
@@ -232,11 +245,17 @@
         </v-card-text>
       </v-card>
     </v-dialog>
-  </v-row>
+  </div>
 </template>
 
 <script setup lang="ts">
 const props = defineProps({
+  /** The design's page title. Every app that mounts this screen calls it
+      Members; a caller that names it otherwise passes its own. */
+  title: {
+    type: String,
+    default: "Members",
+  },
   orgId: {
     type: String,
     default: "",

package/components/MyAttendanceMain.vue

@@ -17,10 +17,8 @@
           <v-row no-gutters align="center" class="w-100">
             <v-col cols="auto" v-if="canCheckInOut">
               <v-btn
-                class="text-none"
-                rounded="pill"
-                variant="tonal"
-                size="large"
+                class="text-none screen-btn-primary"
+                variant="flat"
                 @click="onCreateItem"
               >
                 {{ hasCheckedInToday ? "Check Out" : "Check In" }}
@@ -28,7 +26,7 @@
             </v-col>
             <v-spacer />
 
-            <v-col cols="auto">
+            <v-col cols="auto" class="filter-field">
               <v-text-field
                 v-model="searchInput"
                 density="compact"