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

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,51 @@
+<!--
+  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"
+      :readonly="readonly"
+      @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 },
+  /** A field that prints a derived value - a preview, a computed reference -
+      and is not typed into. Kept distinct from `disabled`, which also greys
+      the box and takes it out of the tab order. */
+  readonly: { 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/AreaChecklistHistoryLogs.vue

@@ -1,28 +1,27 @@
 <template>
   <v-row no-gutters align="center" justify="center">
     <v-col cols="12">
-      <v-card class="mx-auto">
-        <v-toolbar
-          density="compact"
-          color="grey-lighten-4"
-          class="d-flex align-center px-4 py-3"
-        >
-          <v-btn icon variant="plain" @click="back()" class="mr-2">
-            <v-icon>mdi-chevron-left</v-icon>
-          </v-btn>
-          <span class="text-h6 font-weight-bold">Area Checklist</span>
-        </v-toolbar>
-
-        <v-divider />
-
-        <v-card-text class="pa-0">
+      <!-- The screen's name and its Back move out of the `grey-lighten-4` bar -
+           a slab that stayed white in dark mode - onto the design's title row.
+           All five service apps mount this component bare, so the layer is the
+           only place the page name can come from. -->
+      <PageHeader title="Area Checklist">
+        <template #actions>
+          <AppButton variant="ghost" icon="mdi-chevron-left" @click="back()">
+            Back
+          </AppButton>
+        </template>
+      </PageHeader>
+
+      <AppCard>
+        <div class="pa-0">
           <v-row no-gutters>
             <v-col
               cols="12"
               md="6"
               lg="5"
               xl="4"
-              style="border-right: 1px solid rgba(0, 0, 0, 0.12)"
+              class="checklist-detail__split"
             >
               <v-row no-gutters class="pa-6">
                 <v-col cols="12" class="mb-4">
@@ -47,11 +46,11 @@
 
                     <v-col cols="12" class="mb-3">
                       <div class="text-body-2 mb-1">Status:</div>
-                      <v-chip
-                        class="text-capitalize text-body-2 font-weight-medium"
-                      >
-                        {{ status || "N/A" }}
-                      </v-chip>
+                      <StatusChip
+                        class="text-capitalize"
+                        :status="status"
+                        :label="status || 'N/A'"
+                      />
                     </v-col>
                   </v-row>
                 </v-col>
@@ -119,15 +118,15 @@
                         class="text-subtitle-2 font-weight-bold px-0"
                       >
                         Set {{ checklistSet.set }}
-                        <v-chip
+                        <StatusChip
                           v-if="checklistSet.isScheduleTask"
-                          size="x-small"
-                          color="info"
-                          variant="tonal"
-                          class="text-none ml-2"
+                          tone="info"
+                          :dot="false"
+                          pill
+                          class="ml-2"
                         >
                           Schedule Task
-                        </v-chip>
+                        </StatusChip>
                       </v-list-subheader>
 
                       <v-list-item
@@ -161,22 +160,14 @@
                             </div>
                           </v-col>
                           <v-col cols="12" sm="2" class="text-right">
-                            <v-chip
-                              :color="
-                                unit.status?.toLowerCase() === 'completed'
-                                  ? 'success'
-                                  : 'grey'
-                              "
-                              :variant="
-                                unit.status?.toLowerCase() === 'completed'
-                                  ? 'flat'
-                                  : 'outlined'
-                              "
-                              size="small"
+                            <!-- Same word decides the colour, only now through the
+                                 shared status map, so "Completed" here is the same
+                                 green as on every other screen. -->
+                            <StatusChip
                               class="text-capitalize"
-                            >
-                              {{ unit.status || "Open" }}
-                            </v-chip>
+                              :status="unit.status || 'Open'"
+                              :label="unit.status || 'Open'"
+                            />
                           </v-col>
                         </v-row>
                       </v-list-item>
@@ -191,8 +182,8 @@
               </v-row>
             </v-col>
           </v-row>
-        </v-card-text>
-      </v-card>
+        </div>
+      </AppCard>
     </v-col>
   </v-row>
 </template>
@@ -242,3 +233,19 @@ const timeOut = ref<string>("N/A");
 const status = ref<string>("N/A");
 const signatureUrl = ref<string>("");
 </script>
+
+<style scoped>
+/* Was an inline `rgba(0,0,0,.12)`, which is the same near-black rule in dark
+   mode. The token follows the theme. At `md` and below the two halves stack, so
+   the rule moves under the first one. */
+.checklist-detail__split {
+  border-bottom: 1px solid var(--border);
+}
+
+@media (min-width: 960px) {
+  .checklist-detail__split {
+    border-bottom: none;
+    border-right: 1px solid var(--border);
+  }
+}
+</style>

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>