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

package/components/Signature.vue

@@ -1,16 +1,28 @@
 <template>
   <v-dialog v-model="dialogModel" max-width="700" persistent>
-    <v-card>
-      <v-toolbar>
-        <v-toolbar-title>Signature</v-toolbar-title>
+    <v-card class="screen-modal">
+      <!-- Was a bare `v-toolbar`, which Vuetify paints from its own `surface`:
+           a grey slab across the top of the card, visibly lighter than the card
+           on the dark theme. A `v-card-title` is the same row on the card's own
+           surface, and the close is the design's borderless 32px square. -->
+      <v-card-title class="d-flex align-center">
+        Signature
         <v-spacer />
-        <v-btn icon="mdi-close" @click="hideModal" />
-      </v-toolbar>
-
-      <v-card-text>
+        <v-btn
+          variant="text"
+          icon="mdi-close"
+          class="screen-modal__close"
+          aria-label="Close signature"
+          @click="hideModal"
+        />
+      </v-card-title>
+
+      <v-card-text class="screen-modal__body">
         <v-row no-gutters>
           <v-col cols="12">
-            <div class="text-subtitle-1 text-medium-emphasis ml-2">
+            <!-- `text-medium-emphasis` is Vuetify's 60%-alpha ink; `--muted` is
+                 the design's sub-line and follows the theme. -->
+            <div class="screen-hint ml-2 mb-2">
               Your signature here
             </div>
 
@@ -23,34 +35,28 @@
               class="border"
             />
           </v-col>
-
-          <v-col cols="12" class="text-center">
-            <v-row class="d-flex">
-              <v-col class="w-50 px-3">
-                <v-btn
-                  text="clear"
-                  color="warning"
-                  class="my-4 w-100 rounded-lg"
-                  height="40px"
-                  @click="clear"
-                />
-              </v-col>
-
-              <v-col class="w-50 px-3">
-                <v-btn
-                  text="submit"
-                  color="#1867C0"
-                  class="my-4 w-100 rounded-lg"
-                  height="40px"
-                  :loading="loading"
-                  :disabled="loading"
-                  @click="submit"
-                />
-              </v-col>
-            </v-row>
-          </v-col>
         </v-row>
       </v-card-text>
+
+      <!-- The design's modal footer: two equal-width buttons on a bordered
+           strip, ghost then primary. Was a hand-built `v-row` of two 50%
+           columns, one `color="warning"` and one a LITERAL `#1867C0` - a fixed
+           hex that is the same blue on both themes and is not the theme's
+           accent either. Both colours go; the shape is the shared one. -->
+      <div class="screen-modal__footer">
+        <v-btn class="text-none screen-btn-ghost" variant="outlined" @click="clear">
+          Clear
+        </v-btn>
+        <v-btn
+          class="text-none screen-btn-primary"
+          variant="flat"
+          :loading="loading"
+          :disabled="loading"
+          @click="submit"
+        >
+          Submit
+        </v-btn>
+      </div>
     </v-card>
   </v-dialog>
 </template>

package/components/SignaturePad.vue

@@ -1,25 +1,11 @@
 <template>
   <div>
-    <div
-      style="
-        position: relative;
-        border: 1.5px dashed #bbb;
-        border-radius: 6px;
-        background: #fafafa;
-        overflow: hidden;
-      "
-    >
+    <div class="screen-signpad">
       <canvas
         ref="canvasRef"
         :width="W"
         :height="H"
-        style="
-          display: block;
-          width: 100%;
-          height: 130px;
-          cursor: crosshair;
-          touch-action: none;
-        "
+        class="screen-signpad__canvas"
         @mousedown="startMouse"
         @mousemove="moveMouse"
         @mouseup="stop"
@@ -28,23 +14,13 @@
         @touchmove.prevent="moveTouch"
         @touchend="stop"
       />
-      <div
-        v-if="isEmpty"
-        style="
-          position: absolute;
-          inset: 0;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          pointer-events: none;
-        "
-      >
-        <span class="text-caption text-disabled">Draw your signature here</span>
+      <div v-if="isEmpty" class="screen-signpad__hint">
+        Draw your signature here
       </div>
     </div>
 
     <v-row no-gutters align="center" class="mt-1" style="min-height: 28px">
-      <span class="text-caption text-medium-emphasis">{{ label }}</span>
+      <span class="screen-signpad__label">{{ label }}</span>
       <v-spacer />
       <v-btn
         v-if="!isEmpty"

package/components/SiteSettings.vue

@@ -1,8 +1,25 @@
 <template>
   <v-row no-gutters>
-    <v-expansion-panels multiple v-model="openPanels">
+    <!--
+      The accordion was tokenised in an earlier batch but the screen still
+      opened with no name on it. "Settings" is the two apps' OWN navigation
+      label, and both wrappers (`-property-management` and `-security`
+      `settings.vue`) are bare mounts with no heading of their own, so the
+      title belongs here. No action on this row - the screen's saves live
+      inside their own sections.
+    -->
+    <v-col cols="12">
+      <PageHeader title="Settings" />
+    </v-col>
+
+    <!--
+      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 +39,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 +93,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 +135,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,18 +146,21 @@
         </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
         </v-expansion-panel-title>
         <v-expansion-panel-text class="">
-          <DeliveryCompany :site="siteId" v-model:initial="deliveryCompanies" @refresh-site="refreshSiteData"
+          <!-- The panel above already names this section, and the component
+               prints its own name unless told not to - so without hide-title
+               the words "Delivery Companies" appear twice on the open panel. -->
+          <DeliveryCompany :site="siteId" hide-title v-model:initial="deliveryCompanies" @refresh-site="refreshSiteData"
             @update:companiesValue="handleUpdateCompanies" :read-only="!canManageSiteSettings" />
         </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 +170,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 +183,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 +286,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 +441,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/SlideCardGroup.vue

@@ -1,22 +1,35 @@
+<!--
+  The attachment thumbnail strip (14 caller files).
+
+  THREE THINGS WERE WRONG AND ONE OF THEM NEVER DREW AT ALL:
+
+  1. The strip painted `backgroundColor: '#FFFF'` inline. That is opaque white
+     in BOTH themes - a white band behind the thumbnails on the dark page. It
+     is deleted rather than re-coloured: the strip has no surface of its own in
+     the design, it sits on whatever panel holds it.
+  2. `.selected` was `border: 2px solid var(--v-theme-primary)`. `--v-theme-*`
+     holds a BARE TRIPLET, `74, 110, 182`, not a colour - so the declaration was
+     invalid and dropped silently, and a selected thumbnail has never had a
+     border. It is now `var(--accent)`, which is a colour.
+  3. The remove button's `color="red"` is a fixed Vuetify red, the same red on
+     both themes; `error` is the theme's own. Its `x-large` glyph (40px) was
+     larger than any icon the design draws - 18px is the size the handoff gives
+     a control icon.
+-->
 <template>
-  <v-sheet class="mx-auto">
-    <v-slide-group
-      class="pa-1"
-      show-arrows
-      :style="{ backgroundColor: '#FFFF' }"
-    >
+  <v-sheet class="mx-auto bg-transparent">
+    <v-slide-group class="pa-1" show-arrows>
       <v-slide-group-item
         v-for="(data, idx) in localDataFiles"
         :key="idx"
         v-slot="{ isSelected }"
       >
         <v-card
-          :class="['ma-1', isSelected && 'selected']"
+          :class="['ma-1', 'slide-card', isSelected && 'selected']"
           width="150"
           height="100"
+          elevation="0"
           @click="clickable && emit('onClickCarousel', data)"
-          class="rounded-lg border-thin"
-          border=" opacity-50 thin "
         >
           <v-btn
             icon
@@ -25,7 +38,7 @@
             class="remove-btn pa-0 ma-0"
             @click.stop="removeFile(data)"
           >
-            <v-icon color="red" class="pa-0 ma-0" size="x-large"
+            <v-icon color="error" class="pa-0 ma-0" size="18"
               >mdi-close-circle</v-icon
             >
           </v-btn>
@@ -181,8 +194,19 @@ const removeFile = (file) => {
   right: 8px;
 }
 
+/* The thumbnail tile: the design's inner radius and its own border token,
+   in place of Vuetify's `rounded-lg` + `border-thin` + a `border` prop that
+   set an opacity as well. */
+.slide-card {
+  border: 1px solid var(--border);
+  border-radius: var(--r-inner);
+}
+
+/* See the note at the top: this used to name `var(--v-theme-primary)`, a bare
+   triplet, so the rule was invalid and the selected tile drew no border at
+   all. */
 .selected {
-  border: 2px solid var(--v-theme-primary);
+  border: 2px solid var(--accent);
 }
 
 .remove-btn {

package/components/Snackbar.vue

@@ -1,9 +1,16 @@
 <template>
-  <v-snackbar v-model="snackbar" :color="props.color" :z-index="100000000" >
+  <v-snackbar
+    v-model="snackbar"
+    class="app-toast"
+    :color="props.color || 'primary-button'"
+    :z-index="100000000"
+  >
     {{ props.text }}
 
     <template #actions>
-      <v-btn variant="text" @click="snackbar = false"> Close </v-btn>
+      <v-btn class="app-toast__close" variant="text" @click="snackbar = false">
+        Close
+      </v-btn>
     </template>
   </v-snackbar>
 </template>
@@ -15,9 +22,35 @@ const props = defineProps({
     type: String,
     default: "",
   },
+  /**
+   * A Vuetify theme colour name. `success` / `warning` / `error` / `info` are
+   * mapped onto the design palette in `utils/theme.ts` and pass through here
+   * unchanged.
+   *
+   * An UNCOLOURED toast used to land on one of two wrong surfaces, and both are
+   * corrected by the `||` in the template rather than by 163 caller files:
+   *
+   *   - the prop omitted or bound to `undefined` fell to the old default
+   *     `"primary"`, and `theme.ts:228` maps Vuetify's `primary` to
+   *     `--accent-text` - a FOREGROUND (the link ink), never a fill. Measured:
+   *     `rgb(74,110,182)` light, `rgb(120,162,244)` dark - the dark one a pale
+   *     link-blue slab that matches no other accent surface in the product.
+   *   - `:color=""`, which is how most callers initialise their toast state
+   *     (`reactive({ show: false, message: "", color: "" })`), is not falsy to
+   *     Vue's default machinery, so it reached Vuetify as an empty colour and
+   *     fell through to `.v-snackbar--variant-elevated`, i.e. `surface-variant`
+   *     = the NAVIGATION RAIL colour with `--text2` ink.
+   *
+   * `primary-button` is the accent FILL, and its pair `on-primary-button`
+   * supplies the white label (4.57:1 in both themes). The same correction is
+   * already on `FileInput`, `FeedbackDetail` and `BuildingUnitFormEdit`.
+   *
+   * The handoff draws no toast at all, so "an uncoloured toast is the accent
+   * fill" is our reading of a gap in the design, not a value it states.
+   */
   color: {
     type: String,
-    default: "primary",
+    default: "",
   },
 });
 </script>

package/components/SpecificAttr.vue

@@ -3,18 +3,28 @@
     <v-col cols="12" :lg="props.lg" :md="props.md" :sm="props.sm">
       <v-row no-gutters>
         <v-col cols="12">
-          <span
-            class="font-weight-medium text-subtitle-1 text-decoration-underline cursor-pointer"
-            @click="emit('back')"
-          >
-            Back
-          </span>
+          <!--
+            The Back link. `.screen-back` is stated once in `screens.css`; the
+            underline and the accent colour are the handoff's own rule for a
+            link (line 26), the 12.5px/700 is its "View All" (line 166), and
+            the design draws no back control of its own - the gap is written
+            out next to the class.
+          -->
+          <span class="screen-back" @click="emit('back')"> 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>