@7365admin1/layer-common 4.96.0 → 4.97.1-staging.500

package/components/SiteProviderChange.vue

@@ -0,0 +1,371 @@
+<template>
+  <!--
+    Change provider at a site / change site owner (owner, Harris, 2026-10-05).
+
+    One dialog to plan the change - the server's preview says, in plain words,
+    exactly what will happen before anything does - and one to see the site's
+    changes, undo one within 14 days, or cancel one that is still planned.
+    Who may do what is decided by the server; a refusal is shown as it says it.
+  -->
+  <v-dialog v-model="changeOpen" max-width="620" persistent>
+    <v-card class="screen-modal" data-test="spc-dialog">
+      <v-card-title class="d-flex align-center">
+        {{ kind === "owner" ? "Change site owner" : `Change or end ${shownFrom}` }}
+        <v-spacer />
+        <v-btn variant="text" icon="mdi-close" class="screen-modal__close" aria-label="Close" :disabled="saving" @click="changeOpen = false" />
+      </v-card-title>
+      <v-card-text class="screen-modal__body">
+        <p class="spc-intro">
+          <template v-if="kind === 'owner'">
+            {{ siteName || "This site" }} moves to a new owner, who takes charge of all of its records.
+            Every service provider at the site keeps working as it is. Only the new owner must already be working at the site
+            (invite them first; Seven365 can pick any company).
+          </template>
+          <template v-else>
+            Only {{ preview?.service || "this service" }} at {{ siteName || "this site" }} changes. Other services at the site,
+            and {{ shownFrom }}'s other sites, are not touched.
+          </template>
+        </p>
+
+        <label class="spc-label" for="spc-to">{{ kind === "owner" ? "New owner" : "New company (optional)" }}</label>
+        <v-select
+          id="spc-to"
+          v-model="to"
+          :items="toItems"
+          item-title="title"
+          item-value="value"
+          density="comfortable"
+          variant="outlined"
+          class="filter-field"
+          :disabled="saving"
+          :no-data-text="kind === 'owner' ? 'Invite the new owner to the site first.' : 'Invite the new company to the site first.'"
+          data-test="spc-to"
+          @update:model-value="refresh"
+        />
+
+        <div class="spc-label">When</div>
+        <v-radio-group v-model="when" inline hide-details :disabled="saving" @update:model-value="refresh">
+          <v-radio label="Straight away" value="now" />
+          <v-radio label="On a date" value="date" />
+        </v-radio-group>
+        <input
+          v-if="when === 'date'"
+          v-model="endDate"
+          type="date"
+          class="spc-date"
+          :min="tomorrow"
+          aria-label="Change date"
+          data-test="spc-date"
+          @change="refresh"
+        />
+        <div v-if="when === 'date'" class="spc-sub">
+          Until then both companies work at the site. The change happens at the start of that day.
+        </div>
+
+        <div class="spc-preview" data-test="spc-preview">
+          <div class="spc-preview__title">What will happen</div>
+          <div v-if="loading" class="spc-sub">Checking...</div>
+          <div v-else-if="error" class="spc-error">{{ error }}</div>
+          <template v-else-if="preview">
+            <div v-if="!preview.allowed" class="spc-error">{{ preview.reason }}</div>
+            <ul class="spc-list">
+              <li v-for="line in preview.sentences" :key="line">{{ line }}</li>
+            </ul>
+          </template>
+        </div>
+      </v-card-text>
+      <div class="screen-modal__footer">
+        <v-btn class="screen-btn-ghost" variant="outlined" :disabled="saving" @click="changeOpen = false">Cancel</v-btn>
+        <v-btn
+          class="screen-btn-primary"
+          variant="flat"
+          :loading="saving"
+          :disabled="!canConfirm"
+          data-test="spc-confirm"
+          @click="confirm"
+        >
+          {{ when === "date" ? "Plan this change" : kind === "owner" ? "Change owner" : to ? "Change provider" : "End provider" }}
+        </v-btn>
+      </div>
+    </v-card>
+  </v-dialog>
+
+  <v-dialog v-model="historyOpen" max-width="720">
+    <v-card class="screen-modal" data-test="spc-history">
+      <v-card-title class="d-flex align-center">
+        Provider changes at {{ siteName || "this site" }}
+        <v-spacer />
+        <v-btn
+          v-if="ownerOrgId"
+          variant="outlined"
+          class="screen-btn-ghost mr-2"
+          data-test="spc-change-owner"
+          @click="openOwnerChange"
+        >
+          Change owner
+        </v-btn>
+        <v-btn variant="text" icon="mdi-close" class="screen-modal__close" aria-label="Close" @click="historyOpen = false" />
+      </v-card-title>
+      <v-card-text class="screen-modal__body">
+        <div v-if="historyLoading" class="spc-sub">Loading...</div>
+        <div v-else-if="historyError" class="spc-error">{{ historyError }}</div>
+        <div v-else-if="!history.length" class="spc-sub">No changes yet.</div>
+        <div v-for="c in history" :key="c._id" class="spc-item" data-test="spc-item">
+          <div class="d-flex align-center">
+            <strong class="spc-item__title">{{ title(c) }}</strong>
+            <v-spacer />
+            <span class="spc-chip" :class="`spc-chip--${c.status}`">{{ statusText(c) }}</span>
+          </div>
+          <div class="spc-sub">{{ whenText(c) }}</div>
+          <ul class="spc-list">
+            <li v-for="line in c.sentences || []" :key="line">{{ line }}</li>
+          </ul>
+          <div v-if="c.status === 'failed'" class="spc-error">It could not be done: {{ c.failure }}</div>
+          <div class="d-flex justify-end ga-2">
+            <v-btn v-if="c.canCancel" size="small" variant="outlined" :loading="busy === c._id" data-test="spc-cancel" @click="cancelChange(c)">
+              Cancel this plan
+            </v-btn>
+            <template v-if="c.canUndo">
+              <span v-if="confirmUndo === c._id" class="spc-sub align-self-center">Everything this change did is put back.</span>
+              <v-btn v-if="confirmUndo === c._id" size="small" variant="text" @click="confirmUndo = ''">Keep it</v-btn>
+              <v-btn
+                size="small"
+                :variant="confirmUndo === c._id ? 'flat' : 'outlined'"
+                :color="confirmUndo === c._id ? 'error' : undefined"
+                :loading="busy === c._id"
+                data-test="spc-undo"
+                @click="confirmUndo === c._id ? undoChange(c) : (confirmUndo = c._id)"
+              >
+                {{ confirmUndo === c._id ? "Yes, undo" : `Undo (until ${day(c.undoUntil)})` }}
+              </v-btn>
+            </template>
+          </div>
+        </div>
+      </v-card-text>
+    </v-card>
+  </v-dialog>
+
+  <Snackbar v-model="snack" :text="snackText" :color="snackColor" />
+</template>
+
+<script lang="ts" setup>
+const props = defineProps({
+  siteId: { type: String, required: true },
+  siteName: { type: String, default: "" },
+  /** The site's owner organisation; offers "Change owner" in the history dialog. */
+  ownerOrgId: { type: String, default: "" },
+});
+const emit = defineEmits<{ (e: "changed"): void }>();
+
+const { previewProviderChange, applyProviderChange, listProviderChanges, undoProviderChange, cancelProviderChange } = useCustomerSite();
+
+const changeOpen = ref(false);
+const kind = ref<"provider" | "owner">("provider");
+const from = ref("");
+const fromName = ref("");
+const to = ref<string | null>(null);
+const when = ref<"now" | "date">("now");
+const endDate = ref("");
+const preview = ref<Record<string, any> | null>(null);
+const loading = ref(false);
+const saving = ref(false);
+const error = ref("");
+
+const history = ref<Record<string, any>[]>([]);
+const historyOpen = ref(false);
+const historyLoading = ref(false);
+const historyError = ref("");
+const busy = ref("");
+/** The change whose Undo was pressed once; the second press does it. */
+const confirmUndo = ref("");
+/** The company being changed, as the server names it once the preview is in. */
+const shownFrom = computed(() => preview.value?.fromName || fromName.value);
+
+const snack = ref(false);
+const snackText = ref("");
+const snackColor = ref("success");
+
+const tomorrow = computed(() => new Date(Date.now() + 864e5).toISOString().slice(0, 10));
+const replacements = ref<Array<{ org: string; name: string }>>([]);
+const toItems = computed(() => [
+  ...(kind.value === "provider" ? [{ title: "No new company yet - just end", value: null }] : []),
+  ...replacements.value.map((r) => ({ title: r.name, value: r.org })),
+]);
+const canConfirm = computed(
+  () =>
+    !loading.value &&
+    !saving.value &&
+    Boolean(preview.value?.allowed) &&
+    (kind.value === "provider" || Boolean(to.value)) &&
+    (when.value === "now" || Boolean(endDate.value)),
+);
+
+function message(e: any) {
+  return e?.data?.message || e?.message || "Something went wrong. Please try again.";
+}
+function say(text: string, color = "success") {
+  snackText.value = text;
+  snackColor.value = color;
+  snack.value = true;
+}
+function body() {
+  return {
+    site: props.siteId,
+    kind: kind.value,
+    from: from.value,
+    to: to.value || null,
+    endDate: when.value === "date" ? endDate.value || null : null,
+  };
+}
+
+async function refresh() {
+  if (!from.value) return;
+  loading.value = true;
+  error.value = "";
+  try {
+    preview.value = await previewProviderChange(body());
+    replacements.value = preview.value?.replacements ?? [];
+  } catch (e: any) {
+    preview.value = null;
+    error.value = message(e);
+  } finally {
+    loading.value = false;
+  }
+}
+
+function reset() {
+  to.value = null;
+  when.value = "now";
+  endDate.value = "";
+  preview.value = null;
+  error.value = "";
+  replacements.value = [];
+}
+
+function openChange(row: { from: string; fromName: string }) {
+  reset();
+  kind.value = "provider";
+  from.value = row.from;
+  fromName.value = row.fromName;
+  changeOpen.value = true;
+  refresh();
+}
+
+function openOwnerChange() {
+  reset();
+  kind.value = "owner";
+  from.value = props.ownerOrgId;
+  fromName.value = "the owner";
+  changeOpen.value = true;
+  refresh();
+}
+
+async function confirm() {
+  saving.value = true;
+  try {
+    const res = await applyProviderChange(body());
+    changeOpen.value = false;
+    say(
+      res?.status === "scheduled"
+        ? "The change is planned. You can cancel it until that day."
+        : res?.alreadyDone
+          ? "This change was already done."
+          : "Done. You can undo it within 14 days from Provider changes.",
+    );
+    emit("changed");
+    if (historyOpen.value) loadHistory();
+  } catch (e: any) {
+    error.value = message(e);
+  } finally {
+    saving.value = false;
+  }
+}
+
+async function loadHistory() {
+  historyLoading.value = true;
+  historyError.value = "";
+  try {
+    history.value = (await listProviderChanges(props.siteId)) ?? [];
+  } catch (e: any) {
+    history.value = [];
+    historyError.value = message(e);
+  } finally {
+    historyLoading.value = false;
+  }
+}
+
+function openHistory() {
+  historyOpen.value = true;
+  loadHistory();
+}
+
+async function undoChange(c: Record<string, any>) {
+  confirmUndo.value = "";
+  busy.value = c._id;
+  try {
+    const res = await undoProviderChange(c._id);
+    say(
+      res?.doorAccessToReEnrol
+        ? `Undone. ${res.doorAccessToReEnrol} face or card enrolment(s) on the door readers must be added again.`
+        : "Undone. Everything is back as it was.",
+    );
+    emit("changed");
+    await loadHistory();
+  } catch (e: any) {
+    say(message(e), "error");
+  } finally {
+    busy.value = "";
+  }
+}
+
+async function cancelChange(c: Record<string, any>) {
+  busy.value = c._id;
+  try {
+    await cancelProviderChange(c._id);
+    say("The planned change is cancelled. Nothing changed.");
+    await loadHistory();
+  } catch (e: any) {
+    say(message(e), "error");
+  } finally {
+    busy.value = "";
+  }
+}
+
+function title(c: Record<string, any>) {
+  if (c.kind === "owner") return `Owner: ${c.fromName} to ${c.toName}`;
+  return c.toName ? `${c.fromName} replaced by ${c.toName}` : `${c.fromName} ended`;
+}
+function day(v: unknown) {
+  if (!v) return "";
+  return new Date(String(v)).toLocaleDateString(undefined, { day: "numeric", month: "short", year: "numeric" });
+}
+function statusText(c: Record<string, any>) {
+  return (
+    { scheduled: "Planned", applying: "In progress", applied: "Done", undoing: "Undoing", undone: "Undone", cancelled: "Cancelled", failed: "Failed" } as Record<string, string>
+  )[c.status] ?? c.status;
+}
+function whenText(c: Record<string, any>) {
+  if (c.status === "scheduled") return `Planned for ${day(c.endAt)}`;
+  if (c.status === "undone") return `Done ${day(c.appliedAt)}, undone ${day(c.undoneAt)}`;
+  if (c.status === "cancelled") return `Cancelled ${day(c.cancelledAt)}`;
+  return c.appliedAt ? `Done ${day(c.appliedAt)}` : `Asked ${day(c.createdAt)}`;
+}
+
+defineExpose({ openChange, openOwnerChange, openHistory });
+</script>
+
+<style scoped>
+.spc-intro { margin: 0 0 12px; color: var(--muted, inherit); }
+.spc-label { display: block; font-weight: 600; margin: 8px 0 4px; }
+.spc-date { border: 1px solid var(--line, #ccc); border-radius: 6px; padding: 8px 10px; color: inherit; background: transparent; margin-top: 4px; }
+.spc-sub { color: var(--muted, inherit); font-size: 13px; margin-top: 4px; }
+.spc-error { color: var(--err, #b00020); margin: 4px 0; }
+.spc-preview { margin-top: 16px; padding: 12px 14px; border: 1px solid var(--line, #ddd); border-radius: 8px; }
+.spc-preview__title { font-weight: 600; margin-bottom: 6px; }
+.spc-list { margin: 4px 0 0 18px; padding: 0; }
+.spc-list li { margin: 3px 0; }
+.spc-item { padding: 12px 0; border-bottom: 1px solid var(--line, #eee); }
+.spc-item__title { font-weight: 600; }
+.spc-chip { font-size: 12px; padding: 2px 10px; border-radius: 999px; border: 1px solid currentColor; }
+.spc-chip--failed { color: var(--err, #b00020); }
+</style>

package/components/TableMain.vue

@@ -59,17 +59,32 @@
             >
               {{ createLabel }}
             </v-btn>
-            <v-text-field
+            <!--
+              The design's search field. This was a `v-text-field` with only a
+              `max-width`, so inside the actions row it shrank to its minimum
+              and showed "Se" and a magnifier, at a different height and
+              border from the button beside it. Same `search` model; clearing
+              now sets "" instead of Vuetify's null.
+            -->
+            <AppField
               v-if="canSearch"
               v-model="searchInput"
-              density="compact"
+              search
               placeholder="Search"
-              clearable
-              max-width="300"
-              append-inner-icon="mdi-magnify"
-              hide-details
+              aria-label="Search"
               class="table-card__search"
-            />
+            >
+              <template v-if="searchInput" #trailing>
+                <button
+                  type="button"
+                  class="app-field__trailing"
+                  aria-label="Clear search"
+                  @click="searchInput = ''"
+                >
+                  <v-icon icon="mdi-close" size="16" />
+                </button>
+              </template>
+            </AppField>
             <!-- Ghost/secondary, as the design specifies for Scan QR Code. -->
             <v-btn
               v-if="canScanVisitorQRCode"

package/components/VehicleQrStickerDialog.vue

@@ -92,9 +92,6 @@
               <v-select v-model="design.theme" :items="STICKER_THEMES" item-value="id" label="Colours" density="compact"
                 hide-details />
             </v-col>
-            <v-col cols="12" sm="6" md="4" lg>
-              <v-select v-model="design.frame" :items="FRAME_OPTIONS" label="Sticker shape" density="compact" hide-details />
-            </v-col>
             <v-col cols="12" sm="6" md="4" lg>
               <v-select v-model="design.label" :items="LABEL_OPTIONS" label="Words under the plate" density="compact"
                 hide-details />
@@ -103,6 +100,26 @@
               <v-btn variant="text" size="small" class="text-none" @click="resetDesign">Back to the standard look</v-btn>
             </v-col>
           </v-row>
+          <div class="text-body-2 mt-3 mb-1">Sticker shape</div>
+          <div class="shape-picker" role="radiogroup" aria-label="Sticker shape" data-test="vehicle-qr-shapes">
+            <button v-for="s in shapeThumbs" :key="s.value" type="button" role="radio" class="shape-option"
+              :class="{ 'shape-option--on': design.frame === s.value }" :aria-checked="design.frame === s.value"
+              :data-shape="s.value" @click="design.frame = s.value">
+              <img class="shape-thumb" :src="s.src" alt="" />
+              <span class="text-caption">{{ s.title }}</span>
+            </button>
+          </div>
+          <v-switch v-model="design.cutLines" label="Show cut lines" color="primary" density="compact" hide-details inset
+            class="mt-1" data-test="vehicle-qr-cut-lines" />
+          <v-alert type="info" variant="tonal" density="compact" class="mt-1" data-test="vehicle-qr-cut-guide">
+            <div class="font-weight-medium">{{ sheetSummary(design.frame) }}.</div>
+            <div>Print at 100% ("Actual size" in the print window), not "Fit to page", so the QR code stays full size.</div>
+            <div>
+              How to cut: first cut the sheet into pieces through the middle of the gaps (the small + marks show where),
+              then cut round each sticker {{ design.cutLines ? "on the light-grey line" : "along its edge" }} - with scissors
+              or a cutting machine. Cut off the strip with the unit and owner before pasting.
+            </div>
+          </v-alert>
           <iframe ref="frame" title="Sticker sheet preview" :srcdoc="docHtml" class="sticker-preview mt-3" />
         </template>
       </v-card-text>
@@ -136,6 +153,7 @@ import {
   idsForRequest,
   installerLine,
   setIds,
+  sheetSummary,
   stickerPlateRows,
   stickerWarning,
   type StickerItem,
@@ -145,8 +163,8 @@ import {
   DEFAULT_STICKER_DESIGN,
   DOT_OPTIONS,
   EYE_OPTIONS,
-  FRAME_OPTIONS,
   LABEL_OPTIONS,
+  SHAPE_OPTIONS,
   QR_ECC,
   STICKER_THEMES,
   normalizeDesign,
@@ -206,6 +224,18 @@ function resetDesign() {
   Object.assign(design, DEFAULT_STICKER_DESIGN);
 }
 
+// A small live picture of every shape in the current dots / corners / colours.
+const sampleCode = QRCode.create("S365V:SamplePreviewToken0000", {
+  errorCorrectionLevel: QR_ECC as QRCode.QRCodeErrorCorrectionLevel,
+}).modules;
+const shapeThumbs = computed(() => {
+  const look = normalizeDesign(design);
+  return SHAPE_OPTIONS.map((o) => ({
+    ...o,
+    src: `data:image/svg+xml;charset=utf-8,${encodeURIComponent(stickerFaceSvg(sampleCode, { ...look, frame: o.value, cutLines: false }))}`,
+  }));
+});
+
 const allOnPageTicked = computed(() => plates.value.length > 0 && plates.value.every((p) => selected.value.includes(p.id)));
 const someOnPageTicked = computed(() => plates.value.some((p) => selected.value.includes(p.id)));
 
@@ -306,6 +336,36 @@ function print() {
 </script>
 
 <style scoped>
+.shape-picker {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
+  gap: 8px;
+}
+.shape-option {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 2px;
+  padding: 6px 4px;
+  border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
+  border-radius: 8px;
+  background: #f4f4f4;
+  cursor: pointer;
+}
+.shape-option--on {
+  border: 2px solid rgb(var(--v-theme-primary));
+  background: rgba(var(--v-theme-primary), 0.08);
+}
+.shape-option:focus-visible {
+  outline: 2px solid rgb(var(--v-theme-primary));
+  outline-offset: 2px;
+}
+.shape-thumb {
+  display: block;
+  width: 64px;
+  height: 64px;
+  object-fit: contain;
+}
 .sticker-preview {
   width: 100%;
   height: 460px;

package/components/VisitorForm.vue

@@ -943,8 +943,20 @@ const hidQrReaderId = computed(() => (
   hidQrConfiguredReaderId.value || String(hidQrReader.value?._id || "")
 ));
 
+/*
+ * Visitor QR passes are hidden at the manager's request (2026-09-23).
+ *
+ * A flag rather than a deletion: issuing, the preview dialog, printing and the
+ * regenerate handler below are all intact and untouched, so bringing the
+ * feature back is this one line. Every surface that offers a Visitor QR reads
+ * `hidQrCodePassAllowed`, which is why the switch belongs here and not in each
+ * of them.
+ */
+const HID_VISITOR_QR_ENABLED = false;
+
 const hidQrCodePassAllowed = computed(() => {
   return (
+    HID_VISITOR_QR_ENABLED &&
     hidQrCodePassEnabled.value &&
     ["guest", "contractor", "walk-in"].includes(prop.type)
   );