@7365admin1/layer-common 4.90.2-staging.496 → 4.90.2-staging.497

package/components/ServiceProviderMain.vue

@@ -36,6 +36,14 @@
         >
           Add
         </AppButton>
+        <AppButton
+          v-if="canInviteServiceProvider && siteId"
+          variant="ghost"
+          data-test="sp-provider-changes"
+          @click="providerChange?.openHistory()"
+        >
+          Provider changes
+        </AppButton>
         <AppButton
           v-if="canInviteServiceProvider"
           @click="
@@ -202,6 +210,17 @@
               the engagement itself, not a stored service-providers record, so
               the In-Active move (which acts on that record) does not apply.
             -->
+            <v-menu v-else-if="item.source === 'engagement' && canChangeProvider(item)" location="bottom end">
+              <template #activator="{ props: menuProps }">
+                <v-btn v-bind="menuProps" icon variant="text" density="comfortable" aria-label="Provider actions">
+                  <v-icon>mdi-dots-vertical</v-icon>
+                </v-btn>
+              </template>
+              <v-list density="compact" min-width="200">
+                <v-list-item title="View provider" @click="openProvider(item)" />
+                <v-list-item title="Change or end provider" data-test="sp-change-provider" @click="openProviderChange(item)" />
+              </v-list>
+            </v-menu>
             <v-btn
               v-else-if="item.source === 'engagement'"
               icon
@@ -230,6 +249,12 @@
                   title="View Members"
                   @click="openView(item)"
                 />
+                <v-list-item
+                  v-if="canChangeProvider(item)"
+                  title="Change or end provider"
+                  data-test="sp-change-provider"
+                  @click="openProviderChange(item)"
+                />
                 <v-list-item
                   :title="rowActionLabel(item)"
                   :class="{
@@ -720,6 +745,15 @@
   </v-dialog>
 
   <Snackbar v-model="messageSnackbar" :text="message" :color="messageColor" />
+
+  <SiteProviderChange
+    v-if="siteId"
+    ref="providerChange"
+    :site-id="siteId"
+    :site-name="siteName || site?.name || ''"
+    :owner-org-id="String(site?.orgId || '')"
+    @changed="loadList()"
+  />
 </template>
 
 <script lang="ts" setup>
@@ -998,6 +1032,20 @@ const { data: site } = await useLazyAsyncData(
 
 const searchText = ref("");
 
+// Change or end a provider at this site (owner 2026-10-05). The server decides
+// who may; the menu only offers it to people who may invite providers, on a
+// live provider row that names its company.
+const providerChange = ref<{
+  openChange: (row: { from: string; fromName: string }) => void;
+  openHistory: () => void;
+} | null>(null);
+function canChangeProvider(item: TableRow) {
+  return Boolean(canInviteServiceProvider.value && props.siteId && listTab.value === "active" && item.serviceProviderOrgId);
+}
+function openProviderChange(item: TableRow) {
+  providerChange.value?.openChange({ from: item.serviceProviderOrgId, fromName: item.companyName });
+}
+
 const createDialog = ref(false);
 const createInviteDialog = ref(false);
 // const loadingInviteRoles = ref(false);

package/components/SiteProviderChange.vue

@@ -0,0 +1,356 @@
+<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 ${fromName}` }}
+        <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 {{ fromName }}'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>
+            <v-btn v-if="c.canUndo" size="small" variant="outlined" :loading="busy === c._id" data-test="spc-undo" @click="undoChange(c)">
+              Undo (until {{ day(c.undoUntil) }})
+            </v-btn>
+          </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("");
+
+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>) {
+  if (!window.confirm(`Undo "${title(c)}"? Everything this change did at ${props.siteName || "the site"} is put back.`)) return;
+  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/composables/useCustomerSite.ts

@@ -86,7 +86,36 @@ async function deleteById(id: string) {
   );
 }
 
+  // Change provider at a site / change site owner (owner 2026-10-05).
+  type TProviderChangeInput = {
+    site: string;
+    kind: "provider" | "owner";
+    from: string;
+    to?: string | null;
+    endDate?: string | null;
+  };
+  function previewProviderChange(body: TProviderChangeInput) {
+    return useNuxtApp().$api<Record<string, any>>("/api/customer-sites/provider-changes/preview", { method: "POST", body });
+  }
+  function applyProviderChange(body: TProviderChangeInput) {
+    return useNuxtApp().$api<Record<string, any>>("/api/customer-sites/provider-changes", { method: "POST", body });
+  }
+  function listProviderChanges(site: string) {
+    return useNuxtApp().$api<Record<string, any>[]>("/api/customer-sites/provider-changes", { method: "GET", query: { site } });
+  }
+  function undoProviderChange(id: string) {
+    return useNuxtApp().$api<Record<string, any>>(`/api/customer-sites/provider-changes/${id}/undo`, { method: "POST" });
+  }
+  function cancelProviderChange(id: string) {
+    return useNuxtApp().$api<Record<string, any>>(`/api/customer-sites/provider-changes/${id}/cancel`, { method: "POST" });
+  }
+
   return {
+    previewProviderChange,
+    applyProviderChange,
+    listProviderChanges,
+    undoProviderChange,
+    cancelProviderChange,
     add,
     getAll,
     addViaInvite,

package/package.json

@@ -2,7 +2,7 @@
   "name": "@7365admin1/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "4.90.2-staging.496",
+  "version": "4.90.2-staging.497",
   "author": "7365admin1",
   "main": "./nuxt.config.ts",
   "//files": "What a consumer extending this layer actually loads. Without this npm ships the whole working tree - the changesets, the CI workflows, the render harness in tools/ and any scratch directory that happened to exist at publish time. Nuxt resolves a layer by directory, so every runtime directory below has to stay listed; adding a new top-level runtime directory means adding it here too.",