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

package/components/SiteSettings.vue

@@ -1,8 +1,13 @@
 <template>
   <v-row no-gutters>
-    <v-expansion-panels multiple v-model="openPanels">
+    <!--
+      The design draws settings as a stack of bordered sections with one open
+      at a time. `multiple` is BEHAVIOUR - which sections a user may have open
+      together - so it is left exactly as it was and only the drawing changes.
+    -->
+    <v-expansion-panels multiple v-model="openPanels" class="screen-accordion">
       <!-- SITE SETTINGS -->
-      <v-expansion-panel v-if="canManageSiteInformation" color="primary">
+      <v-expansion-panel v-if="canManageSiteInformation">
         <v-expansion-panel-title>
           <v-icon class="mr-2">mdi-cog</v-icon>
           Site Information
@@ -22,7 +27,7 @@
                   <v-img v-if="coverPhotoUrl" :src="coverPhotoUrl" aspect-ratio="16/9" cover rounded="lg"
                     class="w-100 border" />
                   <div v-else
-                    class="w-100 d-flex align-center justify-center rounded-lg bg-grey-lighten-4 border border-dashed"
+                    class="w-100 d-flex align-center justify-center rounded-lg border border-dashed site-settings__placeholder"
                     style="aspect-ratio: 16/9">
                     <span class="text-caption text-medium-emphasis">No cover photo uploaded</span>
                   </div>
@@ -76,7 +81,7 @@
       </v-expansion-panel>
 
       <!-- ANPR CAMERA -->
-      <v-expansion-panel v-if="showAnprCamera && canManageANPRCamera" color="primary">
+      <v-expansion-panel v-if="showAnprCamera && canManageANPRCamera">
         <v-expansion-panel-title>
           <v-icon class="mr-2">mdi-camera</v-icon>
           ANPR Camera
@@ -118,7 +123,7 @@
       </v-expansion-panel>
 
       <!-- CCTV CAMERA -->
-      <v-expansion-panel v-if="showCctvCamera && canManageCCTVCamera" color="primary">
+      <v-expansion-panel v-if="showCctvCamera && canManageCCTVCamera">
         <v-expansion-panel-title>
           <v-icon class="mr-2">mdi-cctv</v-icon>
           CCTV Camera
@@ -129,7 +134,7 @@
         </v-expansion-panel-text>
       </v-expansion-panel>
 
-      <v-expansion-panel v-if="showDeliveryCompanies && canManageDeliveryCompanies" color="primary">
+      <v-expansion-panel v-if="showDeliveryCompanies && canManageDeliveryCompanies">
         <v-expansion-panel-title>
           <v-icon class="mr-2">mdi-truck</v-icon>
           Delivery Companies
@@ -140,7 +145,7 @@
         </v-expansion-panel-text>
       </v-expansion-panel>
 
-      <v-expansion-panel v-if="showResidentVisitors && canManageResidentVisitors" color="primary">
+      <v-expansion-panel v-if="showResidentVisitors && canManageResidentVisitors">
         <v-expansion-panel-title>
           <v-icon class="mr-2">mdi-car</v-icon>
           Resident Visitors
@@ -150,7 +155,7 @@
         </v-expansion-panel-text>
       </v-expansion-panel>
 
-      <v-expansion-panel color="primary">
+      <v-expansion-panel>
         <v-expansion-panel-title>
           <v-icon class="mr-2">mdi-face-recognition</v-icon>
           HID Face Reader
@@ -163,7 +168,7 @@
             @refresh="refreshSiteData"
           />
           <v-divider class="my-4" />
-          <HidQrCodeConfiguration :site="siteId" />
+          <HidQrCodeConfiguration :site="siteId" :org="orgId" />
         </v-expansion-panel-text>
       </v-expansion-panel>
 
@@ -266,7 +271,9 @@ const { data: siteData, refresh: refreshSiteData } = await useLazyAsyncData(
   `site-${props.siteId}`,
   () => getSiteById(props.siteId)
 );
-const orgId = computed(() => props.orgId || String((siteData.value as any)?.orgId ?? ""));
+const orgId = computed(
+  () => props.orgId || String((siteData.value as TSite | null)?.orgId ?? "")
+);
 
 watch(
   siteData,
@@ -419,3 +426,11 @@ const saveANPRSettings = async () => {
   }
 };
 </script>
+
+<style scoped>
+/* Was `bg-grey-lighten-4`: a literal light grey, so the empty cover-photo tile
+   stayed a white slab on the dark page. */
+.site-settings__placeholder {
+  background: var(--thead);
+}
+</style>

package/components/SiteSettingsWorkOrder.vue

@@ -1,33 +1,53 @@
 <template>
-    <v-row no-gutters>
-        <v-expansion-panels multiple v-model="openPanels" >
-
-            <!-- Work Order Settings -->
-            <v-expansion-panel color="primary">
-                <v-expansion-panel-title>
-                    <v-icon class="mr-2">mdi-format-list-numbered</v-icon>
-                    Work Order Settings
-                </v-expansion-panel-title>
-
-                <v-expansion-panel-text>
-                    <v-text-field v-model="prefix" label="Prefix" :disabled="isLoading || !canManageSiteSettings"
-                        @input="handleInput" />
-
-                    <v-select v-model="noOfDigits" :items="[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]" label="No. of Digits"
-                        :disabled="isLoading || !canManageSiteSettings" />
-
-                    <v-text-field v-model="orderNumberPreview" label="Preview" readonly />
-
-                    <v-btn v-if="canManageSiteSettings" class="mt-2" :loading="isLoading" @click="save">
-                        Save
-                    </v-btn>
-                </v-expansion-panel-text>
-            </v-expansion-panel>
-
-        </v-expansion-panels>
-
-        <Snackbar v-model="toast.show" :text="toast.message" :color="toast.color" />
-    </v-row>
+    <div>
+        <!-- The page had no heading of its own: the five service apps mount this
+             component bare on `[org]/[site]/settings`, so the name only ever
+             appeared in the navigation rail. "Settings" is that rail's own label. -->
+        <PageHeader title="Settings" />
+
+        <v-row no-gutters>
+            <!--
+              `multiple` and which panel opens first are BEHAVIOUR, so they are
+              left exactly as they were - `.screen-accordion` only changes the
+              drawing, the same way `SiteSettings` already does it.
+            -->
+            <v-expansion-panels multiple v-model="openPanels" class="screen-accordion">
+
+                <!-- Work Order Settings -->
+                <v-expansion-panel>
+                    <v-expansion-panel-title>
+                        <v-icon class="mr-2">mdi-format-list-numbered</v-icon>
+                        Work Order Settings
+                    </v-expansion-panel-title>
+
+                    <v-expansion-panel-text>
+                        <div class="wo-settings__fields">
+                            <AppField v-model="prefix" label="Prefix"
+                                :disabled="isLoading || !canManageSiteSettings" @input="handleInput" />
+
+                            <!-- `return-object` keeps the emitted value a NUMBER, which is
+                                 what `createWorkOrderSettings` puts on the wire today. -->
+                            <AppSelect v-model="noOfDigits" return-object
+                                :items="[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]" label="No. of Digits"
+                                :disabled="isLoading || !canManageSiteSettings" />
+
+                            <AppField :model-value="orderNumberPreview" label="Preview" readonly />
+                        </div>
+
+                        <!-- Still a `v-btn`: `AppButton` has no loading state, and the
+                             spinner on save is feedback, not decoration. -->
+                        <v-btn v-if="canManageSiteSettings" class="screen-btn-primary text-none mt-4"
+                            variant="flat" :loading="isLoading" @click="save">
+                            Save
+                        </v-btn>
+                    </v-expansion-panel-text>
+                </v-expansion-panel>
+
+            </v-expansion-panels>
+
+            <Snackbar v-model="toast.show" :text="toast.message" :color="toast.color" />
+        </v-row>
+    </div>
 </template>
 
 <script setup lang="ts">
@@ -173,4 +193,15 @@ function show(message: string, color: string) {
     toast.message = message
     toast.color = color
 }
-</script>
+</script>
+
+<style scoped>
+/* The design stacks a settings form's fields on one gap, rather than leaning on
+   each Vuetify field's own 22px of hint space. */
+.wo-settings__fields {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    max-width: 420px;
+}
+</style>

package/components/SpecificAttr.vue

@@ -10,11 +10,19 @@
             Back
           </span>
         </v-col>
+        <!--
+          THE PAGE TITLE ROW. This wrapper is the whole scaffold for every
+          single-attribute form page in the estate (18 callers across 10 apps),
+          and its title was a `text-h5` span - Vuetify's 24px/400 Roboto, not
+          the design's 22px/800. `PageHeader` is placement only: same string,
+          same position, same Back link above it, no card added around content
+          that already brings its own.
+        -->
         <v-col cols="12">
-          <span class="text-h5">{{ props.title }}</span>
+          <PageHeader :title="props.title" />
         </v-col>
 
-        <v-col cols="12" class="mt-4">
+        <v-col cols="12">
           <slot name="default"> </slot>
         </v-col>
 

package/components/StatusChip.vue

@@ -0,0 +1,93 @@
+<!--
+  THE STATUS CHIP.
+
+  A pill in the tone the design assigns to the status WORD, with the 6px
+  leading dot. The word -> tone mapping is `utils/status.ts` and is shared, so
+  "Open" is the same green on a work order and on a Daily Occurrence Book, and
+  a status the design never named comes out neutral rather than guessed.
+
+  Colour only. The chip prints the label it is given; it does not decide, map,
+  translate or shorten a status.
+-->
+<template>
+  <span
+    class="status-chip"
+    :class="[toneClass, { 'status-chip--plain': !dot && !pill, 'status-chip--pill': pill }]"
+  >
+    <span v-if="dot" class="status-chip__dot" />
+    <!-- The slot is for the chips that already carried an icon next to their
+         word - a padlock on "Closed - View Only" - so adopting the design's
+         pill does not quietly drop it. -->
+    <slot>{{ label ?? status }}</slot>
+  </span>
+</template>
+
+<script setup lang="ts">
+import { statusToneClass } from "../utils/status";
+
+const props = defineProps({
+  /** The status word - what decides the colour. */
+  status: { type: String, default: "" },
+  /** What to PRINT, when that differs from the word being matched on. */
+  label: { type: String, default: undefined },
+  /** The design's tag chips (pass IDs, counts) carry no leading dot. */
+  dot: { type: Boolean, default: true },
+  /**
+   * The handoff draws TWO dotless chips, and they are not the same shape: the
+   * 7px-radius 11px tag on a pass, and the 999px 11.5px pill a role name sits
+   * in on the Members screen. `pill` picks the second.
+   */
+  pill: { type: Boolean, default: false },
+  /**
+   * For the chips that are not a status WORD at all - a countdown, a rating, a
+   * count - where the screen has already worked out the meaning and only needs
+   * the design's tone. Given, it wins over the word mapping.
+   */
+  tone: {
+    type: String as PropType<"ok" | "warn" | "err" | "info" | "neutral" | "">,
+    default: "",
+  },
+});
+
+const toneClass = computed(() =>
+  props.tone ? `tone-${props.tone}` : statusToneClass(props.status)
+);
+</script>
+
+<style scoped>
+.status-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 10px;
+  border-radius: var(--r-pill);
+  font-family: var(--font-sans);
+  font-size: var(--fs-chip-lg);
+  font-weight: var(--fw-chip);
+  line-height: 1.4;
+  white-space: nowrap;
+  /* `--tone-bg` is set alongside the colour by the `.tone-*` class - see
+     assets/css/tokens.css - so one class carries both halves of the pair the
+     contrast was measured on. */
+  background: var(--tone-bg);
+}
+
+.status-chip--plain {
+  border-radius: var(--r-tag);
+  font-size: var(--fs-chip);
+}
+
+/* The role tag: `padding:3px 10px;border-radius:999px;font-size:11.5px`. */
+.status-chip--pill {
+  padding: 3px 10px;
+  font-size: var(--fs-chip);
+}
+
+.status-chip__dot {
+  width: 6px;
+  height: 6px;
+  border-radius: var(--r-pill);
+  background: currentColor;
+  flex: 0 0 6px;
+}
+</style>

package/components/StockCard.vue

@@ -5,15 +5,18 @@
     color="page-background-color fill-height header-row"
   >
     <v-col cols="12" sm="12" md="11" lg="12" xl="12">
-      <v-row no-gutters class="mb-4">
-        <v-col cols="auto">
-          <v-btn variant="text" color="primary" class="text-none" @click="back">
-            <v-icon left>mdi-arrow-left</v-icon>
+      <!-- The loose Back link above the card becomes the design's title row -
+           the page name on the left, its action right-aligned on the same line.
+           `title` was already declared here and never drawn. -->
+      <PageHeader :title="title">
+        <template #actions>
+          <AppButton variant="ghost" icon="mdi-arrow-left" @click="back">
             Back
-          </v-btn>
-        </v-col>
-      </v-row>
-      <v-card class="pa-5 position-relative rounded-lg">
+          </AppButton>
+        </template>
+      </PageHeader>
+
+      <AppCard class="pa-5 position-relative">
         <!-- Stock Information -->
         <v-row class="pt-2">
           <v-col cols="12">
@@ -104,7 +107,7 @@
             </TableMain>
           </v-col>
         </v-row>
-      </v-card>
+      </AppCard>
     </v-col>
   </v-row>
 </template>
@@ -181,9 +184,11 @@ watchEffect(() => {
 </script>
 
 <style scoped>
-.text-fontgray {
-  color: #7e7e7e;
-}
+/* The scoped `.text-fontgray { color: #7e7e7e }` that used to sit here is gone.
+   It out-specified the layer's tokenised rule in `assets/css/screens.css`, which
+   is why these four field labels were the estate's one measured 4.06:1 - the
+   same fixed grey in both themes. The surface under them is `AppCard`, which is
+   itself tokenised, so the ink can safely follow the theme. */
 
 :deep() .v-table .v-table__wrapper > table > thead > tr > th:not(:last-child) {
   border-right: thin solid rgba(var(--v-border-color), var(--v-border-opacity));

package/components/SwitchContext.vue

@@ -15,7 +15,10 @@
           :to="props.route"
           class="text-subtitle-2 font-weight-bold"
         >
-          <v-list-item-title class="text-truncate">
+          <!-- The design prints the organisation and site names in full.
+               Vuetify's list-item title truncates by default, which cut them
+               to "Property Managem…" / "Seventh Cond…" in the 252px rail. -->
+          <v-list-item-title class="switch-context__name">
             {{ name || `Select ${prop.title}` }}
           </v-list-item-title>
         </v-list-item>
@@ -100,9 +103,38 @@ 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;
   emit("select", value);
 };
 </script>
+
+<style scoped>
+/* Wrap onto a second line instead of truncating - the design shows the full
+   organisation and site names. */
+.switch-context__name {
+  white-space: normal;
+  overflow: visible;
+  overflow-wrap: anywhere;
+  line-height: 1.25;
+}
+</style>

package/components/TableHygiene.vue

@@ -5,10 +5,8 @@
         <slot name="actions">
           <v-btn
             v-if="canCreate"
-            class="text-none"
-            rounded="pill"
-            variant="tonal"
-            size="large"
+            class="text-none screen-btn-primary"
+            variant="flat"
             @click="emits('create')"
           >
             {{ createLabel }}
@@ -18,16 +16,11 @@
     </v-col>
 
     <v-col cols="12">
-      <v-card
-        width="100%"
-        variant="outlined"
-        border="thin"
-        rounded="lg"
-        :loading="loading"
-      >
+      <v-card width="100%" variant="flat" class="table-card" :loading="loading">
         <v-toolbar
           density="compact"
-          color="grey-lighten-4"
+          color="transparent"
+          class="table-card__toolbar"
           :extension-height="extensionHeight"
         >
           <template #prepend>
@@ -46,7 +39,7 @@
 
           <template #append>
             <v-row no-gutters justify="end" align="center">
-              <span class="mr-2 text-caption text-fontgray">
+              <span class="mr-2 table-card__range">
                 {{ pageRange }}
               </span>
               <local-pagination
@@ -68,25 +61,16 @@
           :max-height="`calc(100vh - (${offset}px))`"
           class="overflow-y-auto"
         >
-          <v-row
-            v-if="groupedItems.length === 0"
-            no-gutters
-            justify="center"
-            class="py-10"
-          >
-            <v-col
-              cols="auto"
-              class="text-center text-medium-emphasis text-body-2"
-            >
-              {{ noDataText }}
-            </v-col>
-          </v-row>
+          <div v-if="groupedItems.length === 0" class="table-card__empty">
+            <v-icon icon="mdi-magnify-close" size="32" />
+            <span>{{ noDataText }}</span>
+          </div>
 
           <template
             v-for="(group, groupIndex) in groupedItems"
             :key="`group-${groupIndex}`"
           >
-            <v-sheet color="grey-lighten-4" border="b t">
+            <v-sheet color="transparent" class="table-card__group" border="b t">
               <v-row no-gutters align="center" class="px-4 py-2">
                 <v-col cols="auto" class="d-flex align-center ga-2">
                   <span
@@ -94,39 +78,37 @@
                   >
                     Set {{ group.set }}
                   </span>
-                  <v-chip
+                  <StatusChip
                     v-if="group.isScheduleTask"
-                    size="x-small"
-                    color="info"
-                    variant="tonal"
-                    prepend-icon="mdi-calendar-clock"
+                    tone="info"
+                    :dot="false"
                     class="text-none"
                   >
+                    <v-icon size="12">mdi-calendar-clock</v-icon>
                     Schedule Task
-                  </v-chip>
+                  </StatusChip>
                   <slot name="group-header-chips" :group="group">
-                    <v-chip
+                    <StatusChip
                       v-if="group.completedByName && isGroupComplete(group)"
-                      size="x-small"
-                      color="success"
-                      variant="tonal"
-                      prepend-icon="mdi-check-circle-outline"
+                      status="Completed"
+                      :dot="false"
                       class="text-none"
                     >
+                      <v-icon size="12">mdi-check-circle-outline</v-icon>
                       Completed · {{ group.completedByName }}
-                    </v-chip>
-                    <v-chip
+                    </StatusChip>
+                    <StatusChip
                       v-else-if="
                         group.completedByName && isGroupInProgress(group)
                       "
-                      size="x-small"
-                      color="warning"
-                      variant="tonal"
-                      prepend-icon="mdi-progress-clock"
+                      status="Ongoing"
+                      tone="warn"
+                      :dot="false"
                       class="text-none"
                     >
+                      <v-icon size="12">mdi-progress-clock</v-icon>
                       Ongoing · {{ group.completedByName }}
-                    </v-chip>
+                    </StatusChip>
                   </slot>
                 </v-col>
                 <v-spacer />
@@ -139,7 +121,8 @@
             <v-sheet
               v-for="item in group.items"
               :key="item[itemValue]"
-              color="white"
+              color="transparent"
+              class="table-card__row"
               border="b"
             >
               <v-row no-gutters align="center" class="px-4 py-2">

package/components/TableList.vue

@@ -6,7 +6,7 @@
     rounded="lg"
     :loading="loading"
   >
-    <v-toolbar density="compact" color="grey-lighten-4">
+    <v-toolbar density="compact" class="px-3 border-b-sm" color="transparent">
       <template #prepend>
         <v-checkbox v-model="selectAll" hide-details class="mx-1"></v-checkbox>
 

package/components/TableListSecondary.vue

@@ -159,6 +159,6 @@ watch(selectAll, (curr) => {
 }
 
 .clickable-rows tbody tr:hover {
-  background-color: #f5f5f5;
+  background-color: var(--hover);
 }
 </style>