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

package/components/AttendanceSettingsDialog.vue

@@ -1,13 +1,11 @@
 <template>
   <v-dialog v-model="showDialog" max-width="600" persistent>
-    <v-card>
-      <v-toolbar>
-        <v-row no-gutters class="fill-height px-6" align="center">
-          <span class="font-weight-bold text-h6">Attendance Settings</span>
-        </v-row>
-      </v-toolbar>
-
-      <v-card-text class="pa-6">
+    <v-card class="screen-modal attendance-settings">
+      <div class="attendance-settings__head">
+        <v-card-title>Attendance Settings</v-card-title>
+      </div>
+
+      <div class="screen-modal__body attendance-settings__body filter-field">
         <v-alert
           v-if="error"
           type="error"
@@ -26,12 +24,13 @@
               <v-checkbox
                 v-model="isGeofencingEnabled"
                 label="Enable Geofencing"
+                color="accent"
                 density="comfortable"
                 hide-details
               />
               <span
                 v-if="isGeofencingEnabled"
-                class="text-body-2 text-medium-emphasis"
+                class="attendance-settings__hint"
               >
                 Enabling this setting will require users to take attendance
                 within a certain radius via QR code or within the site location.
@@ -43,44 +42,32 @@
                 <v-checkbox
                   v-model="isQrEnabled"
                   label="Enable QR Code"
+                  color="accent"
                   density="comfortable"
                   hide-details
                 />
               </v-col>
 
               <v-col v-if="isQrEnabled" cols="12">
-                <v-card
-                  variant="flat"
-                  class="pa-4 d-flex flex-column align-center"
-                >
+                <div class="attendance-settings__qr">
                   <QrcodeVue
                     :value="site"
                     :level="'M'"
                     :render-as="'svg'"
                     :size="300"
                   />
-                  <v-btn
-                    variant="text"
-                    color="primary"
-                    class="mt-2"
-                    @click="downloadQrCode"
-                  >
-                    <v-icon class="mr-2">mdi-download</v-icon>
+                  <AppButton variant="ghost" icon="mdi-download" class="mt-2" @click="downloadQrCode">
                     Download QR Code
-                  </v-btn>
-                </v-card>
+                  </AppButton>
+                </div>
               </v-col>
 
               <v-col cols="12" class="mt-4">
                 <InputLabel title="Site Location" />
-                <v-btn
-                  variant="outlined"
-                  class="mt-2"
-                  @click="isMapSearchVisible = true"
-                >
-                  <v-icon class="mr-2">mdi-map-search</v-icon>
+                <AppButton variant="ghost" icon="mdi-map-search" class="mt-2"
+                  @click="isMapSearchVisible = true">
                   Search Location
-                </v-btn>
+                </AppButton>
               </v-col>
 
               <v-col v-if="geolocation" cols="12">
@@ -125,40 +112,12 @@
             </template>
           </v-row>
         </v-form>
-      </v-card-text>
-
-      <v-toolbar class="pa-0" density="compact">
-        <v-row no-gutters>
-          <v-col cols="6" class="pa-0">
-            <v-btn
-              block
-              variant="text"
-              class="text-none"
-              size="large"
-              @click="close"
-              height="56"
-              :disabled="submitting"
-            >
-              Cancel
-            </v-btn>
-          </v-col>
-          <v-col cols="6" class="pa-0">
-            <v-btn
-              block
-              variant="flat"
-              color="black"
-              class="text-none font-weight-bold rounded-0"
-              height="56"
-              size="large"
-              :loading="submitting"
-              @click="onSubmit"
-            >
-              <v-icon class="mr-2">mdi-check</v-icon>
-              Update
-            </v-btn>
-          </v-col>
-        </v-row>
-      </v-toolbar>
+      </div>
+
+      <div class="attendance-settings__footer">
+        <AppButton variant="ghost" :disabled="submitting" @click="close">Cancel</AppButton>
+        <AppButton icon="mdi-check" :disabled="submitting" @click="onSubmit">Update</AppButton>
+      </div>
     </v-card>
   </v-dialog>
 
@@ -210,6 +169,7 @@ const {
   data: getAttendanceSettingsReq,
   refresh: getAttendanceSettingsRefresh,
   pending: loading,
+  error: getAttendanceSettingsError,
 } = await useLazyAsyncData(
   `attendance-settings-${props.site}`,
   () => getAttendanceSettings(props.site, props.serviceType),
@@ -220,6 +180,22 @@ const {
 );
 
 watchEffect(() => {
+  // A failed read used to be indistinguishable from a site with no settings
+  // saved: the dialog just opened with geofencing off and blank fields, and
+  // the operator had no way to tell it was showing them nothing rather than
+  // the truth. Worse, a request answered by the SPA fallback resolves with a
+  // 200 and a STRING, so nothing threw - every field read off it was simply
+  // undefined. Anything that is not an object is a failure, and it is said.
+  const res: any = getAttendanceSettingsReq.value;
+  if (
+    getAttendanceSettingsError.value ||
+    (res !== null && res !== undefined && typeof res !== "object")
+  ) {
+    error.value =
+      "Could not load the saved settings - what you see below is not what is saved. Close and reopen to try again.";
+    return;
+  }
+
   if (getAttendanceSettingsReq.value) {
     isGeofencingEnabled.value =
       getAttendanceSettingsReq.value.isGeofencingEnabled || false;
@@ -397,3 +373,43 @@ watch(showDialog, (newVal) => {
   }
 });
 </script>
+
+<style scoped>
+.attendance-settings__head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-right: 12px;
+}
+
+.attendance-settings__body {
+  padding: 0 20px;
+}
+
+.attendance-settings__hint {
+  font-size: var(--fs-cell);
+  color: var(--text2);
+}
+
+/* Was a `variant="flat"` v-card, i.e. a second card inside the modal card. It
+   is a frame around the QR, so it takes the design's inner surface. */
+.attendance-settings__qr {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 16px;
+  border: 1px solid var(--border);
+  border-radius: var(--r-inner);
+  background: var(--thead);
+}
+
+/* The design's dialog footer. Deliberately not the shared
+   `.screen-modal__footer` - that class is on the batch-D branch (#1150), not
+   on this base, and a second copy in `screens.css` would collide with it. */
+.attendance-settings__footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  padding: 16px 20px 20px;
+}
+</style>

package/components/Avatar/Main.vue

@@ -1,6 +1,18 @@
 <template>
     <v-avatar :color="getColor(name || id)" :size="size">
-        <v-img v-if="imageSrc" alt="John" :src="imageUrl" />
+        <!--
+          A stored profile photo that 404s left the circle EMPTY - `v-img`
+          draws nothing when the source fails, and there was no fallback under
+          it. The initials the avatar already computes stand in, so the circle
+          is never blank.
+        -->
+        <v-img v-if="imageSrc" :alt="name" :src="imageUrl">
+            <template #error>
+                <div class="d-flex align-center justify-center fill-height">
+                    <span :style="{ fontSize: `${fontSize}px` }">{{ initials }}</span>
+                </div>
+            </template>
+        </v-img>
         <span v-else :style="{
             fontSize: `${fontSize}px`,
             lineHeight: `${size}px`
@@ -43,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"
 
@@ -54,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,30 +1,27 @@
 <template>
-  <v-row no-gutters>
-    <v-col cols="12">
-      <v-card
-        width="100%"
-        variant="outlined"
-        border="thin"
-        rounded="lg"
-        :loading="false"
-      >
-        <v-toolbar density="compact" color="grey-lighten-4">
-          <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 text-caption text-fontgray">
-                {{ 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"
@@ -38,7 +35,7 @@
             <span class="text-caption font-weight-bold text-capitalize">
               permissions
             </span>
-            <v-chip>{{ value.length }}</v-chip>
+            <StatusChip :dot="false" tone="neutral" :label="`${value.length}`" />
           </template>
 
           <template #item.nature="{ item }">
@@ -46,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/BtnUploadFile.vue

@@ -10,12 +10,17 @@
       <v-row no-gutters>
         <v-col v-if="value || readOnly" cols="12">
           <v-row no-gutters>
+            <!-- The strip is one control split in two: the file name, and the
+                 cross that clears it. `rounded=""` on the read-only card was
+                 not "no radius" - Vuetify's `useRounded` treats an empty string
+                 as `true` and adds `.rounded`, i.e. its own 4px. The design's
+                 radius is stated here instead, on both ends. -->
             <v-card
               variant="outlined"
               border="thin"
-              class="px-4 text-caption font-weight-medium"
-              :rounded="readOnly ? '' : '0 s'"
-              height="36"
+              class="btn-input-file__name"
+              :class="{ 'btn-input-file__name--solo': readOnly }"
+              height="40"
               @click="emit('click:view')"
             >
               <v-row no-gutters class="fill-height" align="center">
@@ -26,24 +31,28 @@
               v-if="!readOnly"
               variant="outlined"
               border="s-0 thin"
-              rounded="0 e"
-              class="px-4 d-inline"
-              height="36"
+              class="btn-input-file__clear"
+              height="40"
               @click="emit('click:close')"
             >
               <v-row no-gutters class="fill-height" align="center">
-                <v-icon size="small"> mdi-close </v-icon>
+                <v-icon size="18"> mdi-close </v-icon>
               </v-row>
             </v-card>
           </v-row>
         </v-col>
 
         <v-col v-else cols="12">
+          <!-- This arm is the `v-else` of `v-if="value || readOnly"`, so
+               `value` is always falsy by the time it renders: the old
+               `:prepend-icon="value ? '' : ..."` had an arm that could never be
+               taken, and the icon is unconditional. `screen-btn-ghost` is the
+               design's 40px bordered button while keeping Vuetify's `loading`
+               spinner, which the upload needs and `AppButton` does not have. -->
           <v-btn
-            variant="outlined"
-            border="thin"
-            class="text-none"
-            :prepend-icon="value ? '' : 'mdi-tray-arrow-up'"
+            variant="flat"
+            class="text-none screen-btn-ghost"
+            prepend-icon="mdi-tray-arrow-up"
             :disabled="loading"
             :loading="loading"
             @click="selectAttachment"
@@ -137,3 +146,36 @@ const errorMessage = computed(() => {
   return null;
 });
 </script>
+
+<style scoped>
+/* The design's control box on the attachment strip: 40px, `--r-inner` on the
+   outer corners only (the two cards butt together), a `--line` edge and the
+   13.5px/500 cell type - not Vuetify's `text-caption` scale and 4px radius.
+   `:deep` because the box being styled is the `v-card` root Vuetify renders. */
+.btn-input-file__name,
+.btn-input-file__clear {
+  font-family: var(--font-sans);
+  font-size: var(--fs-cell);
+  font-weight: var(--fw-cell);
+  color: var(--text2);
+  border-color: var(--border);
+}
+
+.btn-input-file__name {
+  padding-inline: 14px;
+  border-start-start-radius: var(--r-inner);
+  border-end-start-radius: var(--r-inner);
+}
+
+/* Read-only: there is no cross beside it, so it is a single rounded box. */
+.btn-input-file__name--solo {
+  border-radius: var(--r-inner);
+}
+
+.btn-input-file__clear {
+  display: inline;
+  padding-inline: 12px;
+  border-start-end-radius: var(--r-inner);
+  border-end-end-radius: var(--r-inner);
+}
+</style>

package/components/BuildingForm.vue

@@ -1,20 +1,17 @@
 <template>
-  <v-card width="100%">
-    <v-toolbar>
-      <v-row no-gutters class="fill-height px-6" align="center">
-        <span class="font-weight-bold text-h5 text-capitalize">
-          {{ prop.mode }} Block {{ (prop.mode === "edit" && building.block) ? `- ${building.block}` : "" }}
-        </span>
-      </v-row>
-    </v-toolbar>
-    <v-card-text style="max-height: 100vh; overflow-y: auto" class="pa-0">
+  <v-card width="100%" class="screen-modal">
+    <v-card-title class="text-capitalize">
+      {{ prop.mode }} Block {{ (prop.mode === "edit" && building.block) ? `- ${building.block}` : "" }}
+    </v-card-title>
+
+    <v-card-text class="screen-modal__body pa-0">
       <v-form v-model="validForm" :disabled="disable">
         <v-row no-gutters class="px-6 pt-4">
           <v-col cols="12" class="mt-2">
             <v-row no-gutters>
               <InputLabel class="text-capitalize font-weight-bold" title="Block Name" required />
               <v-col cols="12">
-                <v-text-field v-model="building.name" density="comfortable" :rules="[requiredRule]"></v-text-field>
+                <v-text-field v-model="building.name" class="filter-field" density="comfortable" :rules="[requiredRule]"></v-text-field>
               </v-col>
             </v-row>
           </v-col>
@@ -26,7 +23,7 @@
                   <InputLabel class="text-capitalize font-weight-bold" title="Block No." required />
                   <v-col cols="12">
                     <v-select v-model.number="building.block" :items="blocks" item-title="label" item-value="value"
-                      density="comfortable" :rules="[
+                      class="filter-field" density="comfortable" :rules="[
                         requiredRule,
                         () =>
                           (building.block && building.block > 0) ||
@@ -45,7 +42,7 @@
                 <v-row no-gutters>
                   <InputLabel class="text-capitalize font-weight-bold" title="No. of Levels" required />
                   <v-col cols="12">
-                    <v-text-field v-model.number="buildingLevels" density="comfortable" :rules="[requiredRule]"
+                    <v-text-field v-model.number="buildingLevels" class="filter-field" density="comfortable" :rules="[requiredRule]"
                       type="number" @update:model-value="setBuildingLevels()"></v-text-field>
                   </v-col>
                 </v-row>
@@ -73,7 +70,7 @@
               <v-col cols="12">
                 <v-row no-gutters>
                   <v-col :cols="prop.mode === 'edit' ? 10 : 12">
-                    <v-text-field v-model.trim="building.levels[levelIndex].name" density="comfortable"></v-text-field>
+                    <v-text-field v-model.trim="building.levels[levelIndex].name" class="filter-field" density="comfortable"></v-text-field>
                   </v-col>
                   <v-col v-if="prop.mode === 'edit'" cols="2" class="d-flex align-center pb-5 justify-end">
                     <v-btn icon variant="text" color="error" :disabled="disable"
@@ -92,7 +89,7 @@
         <v-row no-gutters class="px-6 w-100">
           <v-row no-gutters v-for="(newLevelsItem, index) in newLevelsArray" :key="index" :cols="12" class="w-100">
             <v-col :cols="prop.mode === 'edit' ? 10 : 12">
-              <v-text-field v-model.trim="newLevelsArray[index]" density="comfortable"></v-text-field>
+              <v-text-field v-model.trim="newLevelsArray[index]" class="filter-field" density="comfortable"></v-text-field>
             </v-col>
             <v-col v-if="prop.mode === 'edit'" cols="2" class="d-flex align-center pb-5 justify-end">
               <v-btn icon variant="text" color="error" @click="newLevelsArray.splice(index, 1)">
@@ -104,7 +101,7 @@
 
         <v-row v-if="prop.mode === 'edit'" no-gutters class="px-6 w-100">
           <v-col cols="10">
-            <v-text-field v-model.trim="activeNewLevelInput" density="comfortable" class="w-100"
+            <v-text-field v-model.trim="activeNewLevelInput" class="filter-field w-100" density="comfortable"
               placeholder="Add new level" @click="addNewLevelErrorMessage = ''"></v-text-field>
           </v-col>
           <v-col cols="2" class="d-flex align-center pb-5 justify-end">
@@ -150,22 +147,22 @@
       </v-form>
     </v-card-text>
 
-    <v-toolbar density="compact">
+    <v-card-actions class="screen-modal__footer">
       <v-row no-gutters>
-        <v-col cols="6">
-          <v-btn tile block variant="text" class="text-none" size="48" @click="cancel" :disabled="disable">
+        <v-col cols="6" class="pr-2">
+          <v-btn block variant="outlined" class="text-none screen-btn-ghost" @click="cancel" :disabled="disable">
             Cancel
           </v-btn>
         </v-col>
 
-        <v-col cols="6">
-          <v-btn tile block variant="flat" color="black" class="text-none" size="48" :disabled="!validForm || disable"
+        <v-col cols="6" class="pl-2">
+          <v-btn block variant="flat" class="text-none screen-btn-primary" :disabled="!validForm || disable"
             @click="submit" :loading="disable">
             Submit
           </v-btn>
         </v-col>
       </v-row>
-    </v-toolbar>
+    </v-card-actions>
 
     <ConfirmDialog v-model="confirmDeleteLevelDialog" :loading="loading.deletingLevel" width="450" persistent>
       <template #title>
@@ -178,16 +175,24 @@
 
       <template #footer>
         <v-row no-gutters class="w-100">
-          <v-col cols="6">
-            <v-btn tile block size="48" variant="text" class="text-none" :disabled="loading.deletingLevel"
+          <v-col cols="6" class="pr-2">
+            <v-btn block variant="outlined" class="text-none screen-btn-ghost" :disabled="loading.deletingLevel"
               @click="closeDeleteLevelPrompt">
               Cancel
             </v-btn>
           </v-col>
 
-          <v-col cols="6">
-            <v-btn tile block size="48" variant="flat" color="error" class="text-none" :loading="loading.deletingLevel"
-              :disabled="loading.deletingLevel" @click="confirmDeleteLevel">
+          <v-col cols="6" class="pl-2">
+            <!-- Left on Vuetify's own error fill, deliberately. It must NOT
+                 take `.screen-btn-primary` - that class sets `background` and
+                 would repaint a delete button accent blue. And the handoff
+                 draws no modal, so it specifies no destructive button: making
+                 one out of `--err` puts white on a token that LIGHTENS in dark
+                 theme, which measured 2.99:1 - the same fill-used-as-ink trap
+                 as the Upload button. So this keeps today's appearance and only
+                 loses the 40px height. A destructive button needs a spec. -->
+            <v-btn block variant="flat" color="error" class="text-none"
+              :loading="loading.deletingLevel" :disabled="loading.deletingLevel" @click="confirmDeleteLevel">
               Delete
             </v-btn>
           </v-col>
@@ -348,7 +353,9 @@ const buildingFilesNames = ref<Record<string, string>>({});
 building.value.site = prop.site;
 if (prop.mode === "edit") {
   building.value = JSON.parse(JSON.stringify(prop.building));
-  building.value.levels = building.value.levels.map((level: any) => ({ _id: level._id, name: level.name }));  //temporary
+  // Same missing field as the blocks table: a block record without `levels`
+  // made this `.map` throw, which killed the edit dialog before it opened.
+  building.value.levels = (building.value.levels ?? []).map((level: any) => ({ _id: level._id, name: level.name }));  //temporary
   buildingLevels.value = building.value.levels.length;
   initialBuildingLevels.value = JSON.parse(JSON.stringify(building.value.levels));