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

package/components/AppCard.vue

@@ -0,0 +1,20 @@
+<!--
+  THE CARD.
+
+  14px radius, a 1px `--border` rule and the design's one-pixel shadow, on
+  `--card`. A plain element rather than a `v-card`, because `v-card` brings its
+  own elevation, radius and surface colour at a specificity that a class has to
+  fight - which is why the radius kept coming back as 4px in Phase 3.
+-->
+<template>
+  <div class="app-card" :class="{ 'app-card--flush': flush }">
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps({
+  /** Let content (a menu, a dropdown) escape the card's rounded corners. */
+  flush: { type: Boolean, default: false },
+});
+</script>

package/components/AppDateField.vue

@@ -0,0 +1,35 @@
+<!--
+  THE DATE FIELD.
+
+  The same 40px box with a calendar glyph, as the handoff draws the two date
+  ends of a filter row. `<input type="date">` - the browser's own picker, which
+  is the one a phone user already knows and the one that is localised, keyboard
+  accessible and free.
+-->
+<template>
+  <label class="app-field" :class="{ 'app-field--compact': compact }">
+    <v-icon class="app-field__icon" icon="mdi-calendar-month-outline" size="17" />
+    <span v-if="label" class="app-field__label">{{ label }}</span>
+    <input
+      class="app-field__input"
+      type="date"
+      :value="model"
+      :min="min || undefined"
+      :max="max || undefined"
+      :disabled="disabled"
+      @input="model = ($event.target as HTMLInputElement).value"
+    />
+  </label>
+</template>
+
+<script setup lang="ts">
+const model = defineModel({ type: String, default: "" });
+
+defineProps({
+  label: { type: String, default: "" },
+  min: { type: String, default: "" },
+  max: { type: String, default: "" },
+  compact: { type: Boolean, default: false },
+  disabled: { type: Boolean, default: false },
+});
+</script>

package/components/AppField.vue

@@ -0,0 +1,46 @@
+<!--
+  THE TEXT FIELD.
+
+  40px (34px compact), 10px radius, a 1px border, 13.5px/500 - and the label
+  OUTSIDE the box as a small muted word, not Vuetify's outlined field with a
+  label that floats up through the border. A native `<input>`, so the browser
+  keeps the keyboard, autofill and accessibility for free.
+-->
+<template>
+  <label
+    class="app-field"
+    :class="[{ 'app-field--compact': compact, 'app-field--search': search }, klass]"
+  >
+    <v-icon
+      v-if="icon || search"
+      class="app-field__icon"
+      :icon="icon || 'mdi-magnify'"
+      size="18"
+    />
+    <span v-if="label" class="app-field__label">{{ label }}</span>
+    <input
+      class="app-field__input"
+      :type="type"
+      :value="model"
+      :placeholder="placeholder"
+      :disabled="disabled"
+      @input="model = ($event.target as HTMLInputElement).value"
+    />
+  </label>
+</template>
+
+<script setup lang="ts">
+const model = defineModel({ type: String, default: "" });
+
+defineProps({
+  label: { type: String, default: "" },
+  placeholder: { type: String, default: "" },
+  icon: { type: String, default: "" },
+  type: { type: String, default: "text" },
+  /** The design's search field: a magnifier and `flex:1` in a filter row. */
+  search: { type: Boolean, default: false },
+  compact: { type: Boolean, default: false },
+  disabled: { type: Boolean, default: false },
+  klass: { type: String, default: "" },
+});
+</script>

package/components/AppKpiTile.vue

@@ -0,0 +1,65 @@
+<!--
+  THE KPI TILE.
+
+  The handoff's tile is three rows: the soft icon square AND the uppercase
+  label together on the first, the big tabular number with its percentage pill
+  BESIDE it on the second, the sub-line on the third. The product had the icon
+  alone on a row of its own, the label under it, and the pill stranded at the
+  bottom next to the sub-line - the same figures in a different shape.
+
+  It draws what it is given and nothing else: no fetch, no formatting, no
+  threshold logic. `#action` is the far end of the first row (a filter menu, a
+  "View All"); `#default`, when given, replaces the figure rows entirely for
+  the tiles that list items instead of counting them.
+-->
+<template>
+  <AppCard class="app-kpi d-flex flex-column flex-grow-1">
+    <div class="app-kpi__head">
+      <span
+        v-if="icon"
+        class="app-kpi__icon"
+        :style="tint ? { backgroundColor: tint } : undefined"
+      >
+        <v-icon :icon="icon" :color="color || undefined" size="19" />
+      </span>
+
+      <span class="app-kpi__label">{{ label }}</span>
+
+      <span v-if="$slots.action" class="app-kpi__action">
+        <slot name="action" />
+      </span>
+    </div>
+
+    <slot>
+      <div class="app-kpi__figure">
+        <span class="app-kpi__value">{{ value }}</span>
+
+        <span
+          v-if="chip"
+          class="app-kpi__chip"
+          :class="{ 'app-kpi__chip--down': down }"
+        >
+          {{ chip }}
+        </span>
+      </div>
+
+      <div v-if="sub" class="app-kpi__sub">{{ sub }}</div>
+    </slot>
+  </AppCard>
+</template>
+
+<script setup lang="ts">
+defineProps({
+  icon: { type: String, default: "" },
+  /** The icon square's soft fill - a token-derived colour from the caller. */
+  tint: { type: String, default: "" },
+  color: { type: String, default: "" },
+  label: { type: String, default: "" },
+  value: { type: [String, Number], default: "" },
+  /** The percentage pill's text, already formatted by the caller. */
+  chip: { type: String, default: "" },
+  /** Draws the pill in the error tone rather than the success one. */
+  down: { type: Boolean, default: false },
+  sub: { type: String, default: "" },
+});
+</script>

package/components/AppSegmented.vue

@@ -0,0 +1,38 @@
+<!--
+  THE SEGMENTED CONTROL - `Today | Week | Month`.
+
+  A tray of plain `<button>`s, not a `v-btn-toggle`. The toggle brings its own
+  height scale, dividers, ripple and overlay layer, and its selected state is
+  drawn from `on-surface` - which is why the product's selected segment reads
+  grey where the design fills it with the accent.
+
+  Selection only: it writes the same `v-model` the toggle wrote, and the value
+  set is whatever the caller passes. No behaviour is added here.
+-->
+<template>
+  <div class="app-seg" role="group">
+    <button
+      v-for="option in options"
+      :key="String(option.value)"
+      type="button"
+      class="app-seg__item"
+      :class="{ 'app-seg__item--on': model === option.value }"
+      :aria-pressed="model === option.value"
+      @click="model = option.value"
+    >
+      {{ option.label }}
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps({
+  /** `{ label, value }` - the same option list the toggle was given. */
+  options: {
+    type: Array as PropType<Array<{ label: string; value: any }>>,
+    default: () => [],
+  },
+});
+
+const model = defineModel<any>({ default: "" });
+</script>

package/components/AppSelect.vue

@@ -0,0 +1,203 @@
+<!--
+  THE SELECT.
+
+  The handoff draws it as the text field with the filter's name in muted 12px
+  on the left, the chosen value next to it and a chevron on the right. A native
+  `<select>` under our chrome: the option list, the keyboard and the mobile
+  wheel are the browser's, so there is no menu to build and nothing to get
+  wrong on a phone.
+
+  `multiple` is the ONE case where native is the wrong answer. A native
+  `<select multiple>` is not a dropdown at all - it is an always-open scrolling
+  LIST BOX - so adopting it would turn the daily filter bars into list boxes
+  and change how the staff work. So multi opens a POPOVER in the same field
+  chrome, with the chosen values as the design's soft removable pills.
+
+  The single-value path below is byte-for-byte the one it has always been: a
+  consumer that passes neither `multiple` nor `return-object` still emits
+  exactly the `<select>` element's own string.
+-->
+<template>
+  <label
+    v-if="!multiple"
+    v-bind="$attrs"
+    class="app-field"
+    :class="{ 'app-field--compact': compact }"
+  >
+    <span v-if="label" class="app-field__label">{{ label }}</span>
+    <select
+      class="app-field__input"
+      :value="singleValue"
+      :disabled="disabled"
+      @change="onNativeChange"
+    >
+      <!-- `clearable` on a native select is the empty option, not an x. -->
+      <option v-if="clearable" value="">{{ placeholder }}</option>
+      <option v-for="opt in normalized" :key="String(opt.value)" :value="opt.value">
+        {{ opt.title }}
+      </option>
+    </select>
+    <v-icon class="app-field__icon" icon="mdi-chevron-down" size="17" />
+  </label>
+
+  <v-menu
+    v-else
+    :close-on-content-click="false"
+    :disabled="disabled"
+    location="bottom start"
+    offset="4"
+  >
+    <template #activator="{ props: activator }">
+      <div
+        v-bind="{ ...activator, ...$attrs }"
+        class="app-field app-select"
+        :class="{ 'app-field--compact': compact, 'app-select--disabled': disabled }"
+        role="button"
+        :aria-disabled="disabled"
+        :tabindex="disabled ? -1 : 0"
+      >
+        <span v-if="label" class="app-field__label">{{ label }}</span>
+        <span class="app-select__values">
+          <StatusChip
+            v-for="opt in selectedOptions"
+            :key="String(opt.value)"
+            tone="neutral"
+            pill
+            :dot="false"
+          >
+            {{ opt.title }}
+            <button
+              type="button"
+              class="app-select__x"
+              :aria-label="`Remove ${opt.title}`"
+              @click.stop="toggle(opt)"
+            >
+              <v-icon icon="mdi-close" size="12" />
+            </button>
+          </StatusChip>
+          <span v-if="!selectedOptions.length" class="app-select__placeholder">
+            {{ placeholder }}
+          </span>
+        </span>
+        <button
+          v-if="clearable && selectedOptions.length"
+          type="button"
+          class="app-select__clear"
+          aria-label="Clear"
+          @click.stop="clear"
+        >
+          <v-icon icon="mdi-close-circle" size="15" />
+        </button>
+        <v-icon class="app-field__icon" icon="mdi-chevron-down" size="17" />
+      </div>
+    </template>
+
+    <div class="app-select__menu">
+      <button
+        v-for="opt in normalized"
+        :key="String(opt.value)"
+        type="button"
+        class="app-select__option"
+        :aria-pressed="isOn(opt)"
+        @click="toggle(opt)"
+      >
+        <v-icon
+          class="app-select__box"
+          :class="{ 'app-select__box--on': isOn(opt) }"
+          :icon="isOn(opt) ? 'mdi-checkbox-marked' : 'mdi-checkbox-blank-outline'"
+          size="17"
+        />
+        <span class="app-select__option-text">{{ opt.title }}</span>
+      </button>
+    </div>
+  </v-menu>
+</template>
+
+<script setup lang="ts">
+/* `v-menu` has no single root node, so a class on `<AppSelect multiple>` has
+   to be put on the activator by hand. The single branch lands where it always
+   did - on the `<label>`. */
+defineOptions({ inheritAttrs: false });
+
+/*
+ * One model for both shapes: a string when single, an array when multiple.
+ * The default stays `""` so an existing single consumer that never sets its
+ * v-model starts on the same empty string it starts on today.
+ */
+const model = defineModel<any>({ default: "" });
+
+const props = defineProps({
+  label: { type: String, default: "" },
+  /** Strings, or the `{ title, value }` shape `v-select` already takes. */
+  items: { type: Array as PropType<any[]>, default: () => [] },
+  itemTitle: { type: String, default: "title" },
+  itemValue: { type: String, default: "value" },
+  compact: { type: Boolean, default: false },
+  disabled: { type: Boolean, default: false },
+  /** Popover multi-select with removable pills. Never a native list box. */
+  multiple: { type: Boolean, default: false },
+  /** Emit the source item rather than its `itemValue`. */
+  returnObject: { type: Boolean, default: false },
+  clearable: { type: Boolean, default: false },
+  placeholder: { type: String, default: "" },
+});
+
+const normalized = computed(() =>
+  props.items.map((item: any) =>
+    typeof item === "object" && item !== null
+      ? { title: item[props.itemTitle], value: item[props.itemValue], raw: item }
+      : { title: String(item), value: item, raw: item }
+  )
+);
+
+/* A model entry is either the plain value or - under `return-object` - the
+   source item, so everything compares on this one key. */
+const keyOf = (v: any) =>
+  String(v !== null && typeof v === "object" ? v[props.itemValue] : v);
+
+/* ---- single ---------------------------------------------------------- */
+
+const singleValue = computed(() =>
+  props.returnObject ? keyOf(model.value) : model.value
+);
+
+function onNativeChange(event: Event) {
+  const value = (event.target as HTMLSelectElement).value;
+  model.value = props.returnObject
+    ? normalized.value.find((o) => String(o.value) === value)?.raw ?? value
+    : value;
+}
+
+/* ---- multiple -------------------------------------------------------- */
+
+const selected = computed<any[]>(() =>
+  Array.isArray(model.value) ? model.value : []
+);
+
+const selectedKeys = computed(() => new Set(selected.value.map(keyOf)));
+
+const isOn = (opt: any) => selectedKeys.value.has(String(opt.value));
+
+/* Fall back to the raw key when a chosen value is not in `items` - an async
+   item list can arrive after the model does, and the chip must still print. */
+const selectedOptions = computed(() =>
+  selected.value.map(
+    (v) =>
+      normalized.value.find((o) => String(o.value) === keyOf(v)) ?? {
+        title: keyOf(v),
+        value: keyOf(v),
+      }
+  )
+);
+
+function toggle(opt: any) {
+  if (props.disabled) return;
+  model.value = isOn(opt)
+    ? selected.value.filter((v) => keyOf(v) !== String(opt.value))
+    : [...selected.value, props.returnObject ? opt.raw : opt.value];
+}
+
+function clear() {
+  model.value = [];
+}
+</script>

package/components/AreaChecklistHistoryMain.vue

@@ -33,7 +33,7 @@
         <template #extension>
           <v-row no-gutters class="w-100 d-flex flex-column">
             <v-card
-              class="w-100 px-3 d-flex align-center ga-5 py-2"
+              class="w-100 filter-bar d-flex align-center ga-5"
               flat
               :height="60"
             >
@@ -80,7 +80,11 @@
           </div>
         </template>
         <template #item.status="{ value }">
-          <v-chip class="text-capitalize">{{ value || "No Status" }}</v-chip>
+          <StatusChip
+            class="text-capitalize"
+            :status="value"
+            :label="value || 'No Status'"
+          />
         </template>
       </TableMain></v-col
     >

package/components/AreaMain.vue

@@ -49,10 +49,8 @@
                 <!-- Primary action -->
                 <v-btn
                   v-if="canCreateArea"
-                  class="text-none mr-3"
-                  rounded="pill"
-                  variant="tonal"
-                  size="large"
+                  class="text-none mr-3 screen-btn-primary"
+                  variant="flat"
                   @click="onCreateItem"
                 >
                   {{ createLabel }}
@@ -63,10 +61,8 @@
                   <template #activator="{ props: t }">
                     <v-btn
                       v-bind="t"
-                      class="ma-1"
-                      variant="tonal"
-                      size="large"
-                      rounded="pill"
+                      class="ma-1 screen-icon-btn"
+                      variant="flat"
                       href="/files/area-sample-data.xlsx"
                       target="_blank"
                       download
@@ -81,10 +77,8 @@
                   <template #activator="{ props: t }">
                     <v-btn
                       v-bind="t"
-                      class="ma-1"
-                      variant="tonal"
-                      size="large"
-                      rounded="pill"
+                      class="ma-1 screen-icon-btn"
+                      variant="flat"
                       @click="onImportData"
                     >
                       <v-icon>mdi-upload</v-icon>
@@ -97,10 +91,8 @@
                   <template #activator="{ props: t }">
                     <v-btn
                       v-bind="t"
-                      class="ma-1"
-                      variant="tonal"
-                      size="large"
-                      rounded="pill"
+                      class="ma-1 screen-icon-btn"
+                      variant="flat"
                       @click="handleDownloadExcel"
                       :loading="isDownloading"
                     >
@@ -114,7 +106,7 @@
 
             <v-spacer />
 
-            <v-col cols="auto">
+            <v-col cols="auto" class="filter-field">
               <v-text-field
                 v-model="searchInput"
                 density="compact"

package/components/AttendanceMain.vue

@@ -15,11 +15,12 @@
         @row-click="handleRowClick"
       >
         <template #actions>
+          <!-- Was `color="black"`: a black slab in both themes, and the only
+               black surface on the page. Same button, the design's ghost. -->
           <v-btn
             v-if="canManageAttendanceSettings"
-            variant="flat"
-            color="black"
-            class="text-none"
+            variant="outlined"
+            class="text-none screen-btn-ghost"
             @click="dialogShowSettings = true"
           >
             <v-icon class="mr-2">mdi-cog</v-icon>

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">