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

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/BuildingManagement/buildings.vue

@@ -1,46 +1,35 @@
 <template>
   <v-row no-gutters>
-    <v-col cols="12" class="mb-2">
-      <v-row no-gutters>
-        <v-btn class="text-none" rounded="pill" variant="tonal" @click="setBuilding()" size="large"
-          v-if="canCreate && canCreateBuilding">
-          Add Block
-        </v-btn>
-      </v-row>
-    </v-col>
+    <!-- Title row; nav calls this screen "Blocks". The Add pill moves onto it. -->
     <v-col cols="12">
-      <v-card width="100%" variant="outlined" border="thin" rounded="lg" :loading="loading">
-        <v-toolbar density="compact" color="grey-lighten-4">
-          <template #prepend>
-            <v-btn fab icon density="comfortable" @click="getBuildings()">
-              <v-icon>mdi-refresh</v-icon>
-            </v-btn>
-            <v-text-field v-model="searchInput" autocomplete="off" placeholder="Search" density="compact" hide-details
-              dense clearable class="mx-2" style="width: 200px;" />
-          </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" @update:value="getBuildings()" />
-            </v-row>
-          </template>
-        </v-toolbar>
-
-        <v-data-table :headers="headers" :items="items" item-value="_id" items-per-page="20" fixed-header
-          hide-default-footer @click:row="tableRowClickHandler" style="max-height: calc(100vh - (200px))">
-          <template #item.createdAt="{ value }">
-            {{ new Date(value).toLocaleDateString() }}
-          </template>
-          <template #item.levels="{ item }">
-            {{ item.levels.length }}
-          </template>
-        </v-data-table>
-      </v-card>
+      <PageHeader title="Blocks">
+        <template #actions>
+          <AppButton v-if="canCreate && canCreateBuilding" icon="mdi-plus" @click="setBuilding()">
+            Add Block
+          </AppButton>
+        </template>
+      </PageHeader>
     </v-col>
 
+    <!--
+      Was `v-card` + a `grey-lighten-4` `v-toolbar` + a bare `v-data-table`.
+      `TableMain` draws the same card, the same refresh/search/page-range/pager
+      row and the same table - with the design's uppercase header row.
+    -->
+    <TableMain :headers="headers" :items="items" :loading="loading" :page="page" :pages="pages"
+      :pageRange="pageRange" show-header @refresh="getBuildings()"
+      @update:page="page = $event; getBuildings()" @row-click="(data: any) => tableRowClickHandler(null, data)">
+      <template #prepend-additional>
+        <AppField v-model="searchInput" search compact placeholder="Search" klass="app-toolbar__search" />
+      </template>
+      <template #item.createdAt="{ value }">
+        {{ new Date(value).toLocaleDateString() }}
+      </template>
+      <template #item.levels="{ item }">
+        {{ item.levels.length }}
+      </template>
+    </TableMain>
+
     <!-- Create Dialog -->
     <v-dialog v-model="createDialog" width="450" persistent>
       <BuildingForm :site="site" mode="add" :blocks="items" @cancel="createDialog = false" @success="successCreate()"

package/components/BuildingManagement/units.vue

@@ -1,50 +1,34 @@
 <template>
   <v-row no-gutters>
-    <v-col cols="12" class="mb-2">
-      <v-row no-gutters>
-        <v-btn class="text-none" rounded="pill" variant="tonal" @click="setBuilding()" size="large"
-          v-if="canCreate && canCreateUnit">
-          Add Unit
-        </v-btn>
-        <v-btn class="text-none ml-2" rounded="pill" variant="tonal" @click="openBulkUploadFilePicker()" size="large"
-          :loading="bulkUploadLoading" v-if="canCreate && canCreateUnit">
-          <v-icon start>mdi-upload</v-icon>
-          Bulk Upload
-        </v-btn>
-        <input ref="bulkUploadFileInput" type="file" accept=".xlsx,.xls,.csv" class="d-none"
-          @change="handleBulkUploadFileChange" />
-      </v-row>
-    </v-col>
+    <!-- Title row; nav calls this screen "Units". Both pills move onto it. -->
     <v-col cols="12">
-      <v-card width="100%" variant="outlined" border="thin" rounded="lg" :loading="loading">
-        <v-toolbar density="compact" color="grey-lighten-4">
-          <template #prepend>
-            <v-btn fab icon density="comfortable" @click="getBuildingUnit()">
-              <v-icon>mdi-refresh</v-icon>
-            </v-btn>
-            <v-text-field v-model="searchInput" placeholder="Search" density="compact" hide-details dense clearable
-              class="mx-2" style="width: 200px;" />
-          </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" @update:value="getBuildingUnit()" />
-            </v-row>
-          </template>
-        </v-toolbar>
-
-        <v-data-table :headers="props.headers" :items="items" item-value="_id" items-per-page="20" fixed-header
-          hide-default-footer @click:row="tableRowClickHandler" style="max-height: calc(100vh - (200px))">
-          <template #item.block="{ value, item }">
-            {{ value ? `Block ${value}` : "" }}
-          </template>
-        </v-data-table>
-      </v-card>
+      <PageHeader title="Units">
+        <template #actions>
+          <AppButton v-if="canCreate && canCreateUnit" variant="ghost" icon="mdi-upload"
+            :disabled="bulkUploadLoading" @click="openBulkUploadFilePicker()">
+            Bulk Upload
+          </AppButton>
+          <AppButton v-if="canCreate && canCreateUnit" icon="mdi-plus" @click="setBuilding()">
+            Add Unit
+          </AppButton>
+        </template>
+      </PageHeader>
+      <input ref="bulkUploadFileInput" type="file" accept=".xlsx,.xls,.csv" class="d-none"
+        @change="handleBulkUploadFileChange" />
     </v-col>
 
+    <!-- Was `v-card` + a `grey-lighten-4` `v-toolbar` + a bare `v-data-table`. -->
+    <TableMain :headers="props.headers" :items="items" :loading="loading" :page="page" :pages="pages"
+      :pageRange="pageRange" show-header @refresh="getBuildingUnit()"
+      @update:page="page = $event; getBuildingUnit()" @row-click="(data: any) => tableRowClickHandler(null, data)">
+      <template #prepend-additional>
+        <AppField v-model="searchInput" search compact placeholder="Search" klass="app-toolbar__search" />
+      </template>
+      <template #item.block="{ value, item }">
+        {{ value ? `Block ${value}` : "" }}
+      </template>
+    </TableMain>
+
     <!-- Create Dialog -->
     <v-dialog v-model="createDialog" :width="smAndUp ? '50svw' : '100%'" persistent>
       <BuildingUnitFormAdd :site="site" @cancel="createDialog = false" @success="successCreate()"

package/components/BulletinBoardManagement.vue

@@ -1,17 +1,30 @@
 <template>
     <v-row no-gutters>
+        <!-- Title left, primary action right - the design's opening row. -->
+        <v-col cols="12">
+            <PageHeader title="Bulletin Board">
+                <template #actions>
+                    <AppButton v-if="canCreateBulletinBoard" icon="mdi-plus" @click="handleCreateEvent">
+                        Add Announcement
+                    </AppButton>
+                </template>
+            </PageHeader>
+        </v-col>
+
         <TableMain :headers="headers" :items="paginatePlaceholderItem" v-model:search="searchInput"
             :loading="getAnnouncementPending" :page="page" :pages="pages" :pageRange="pageRange"
-            @refresh="getAnnouncementsRefresh" :show-header="APP_CONSTANTS.RESIDENT === props.recipients" @update:page="handleUpdatePage" @row-click="handleRowClick"
-            @create="handleCreateEvent" :can-create="canCreateBulletinBoard" create-label="Add Announcement">
-            <template #extension>
-                <v-row no-gutters class="w-100 d-flex flex-column">
-                    <v-tabs v-model="status" color="primary" :height="40" @update:model-value="toRoute" class="w-100">
-                        <v-tab v-for="tab in tabOptions" :value="tab.status" :key="tab.status" class="text-capitalize">
-                            {{ tab.name }}
-                        </v-tab>
-                    </v-tabs>
-                </v-row>
+            @refresh="getAnnouncementsRefresh" :show-header="APP_CONSTANTS.RESIDENT === props.recipients" @update:page="handleUpdatePage" @row-click="handleRowClick">
+            <!--
+                The tabs move ONTO the toolbar row (the design draws them there)
+                instead of a stacked strip above the table. Same options, same
+                order, same `toRoute` - which already sets the status itself.
+            -->
+            <template #tabs>
+                <button v-for="tab in tabOptions" :key="tab.status" type="button" role="tab" class="app-tab"
+                    :class="{ 'app-tab--active': status === tab.status }" :aria-selected="status === tab.status"
+                    @click="status = tab.status as any; toRoute(tab.status)">
+                    {{ tab.name }}
+                </button>
             </template>
 
             <template v-slot:item.createdAt="{ item }">