@7365admin1/layer-common 4.120.0 → 4.121.0

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @iservice365/layer-common
 
+## 4.121.0
+
+### Minor Changes
+
+- 19485b6: Data retention is managed by Seven365 Admin: `SiteDataRetention` becomes a read-only summary (rules, dates, removal certificates still download), and the new `DataRetentionBanner` shows staff of the selected site a scheduled permanent deletion (`useDataRetention().getDataRetentionBanner`).
+- 495ae9c: Site Settings > Visitor registration: the NRIC / FIN setting is now a choice of "Ask and keep in full (as usual)", "Ask, but keep only the last 4 characters" or "Don't ask", with help text for each. On a last-4 site the visitor form tells staff that only the last 4 characters will be kept. Needs @7365admin1/core with visitorFields.nric = "last4".
+- 42cdb65: The Security Ops permissions are registered in the canonical vocabulary, so a misspelling is caught rather than silently false. The role editor offers two one-click sets, Security Ops officer and Head of security, and a Security Ops notification now opens the Ops Review page instead of nothing.
+- f663200: Site access has a switch marking a person as part of Security Ops: the officers who go out, walk a site and fill in the visit checklists. It applies to every site ticked in the dialog, shows a chip on each one, and reads the result back in a sentence. It grants nothing on its own, so the Role column still decides what a member may do.
+
 ## 4.120.0
 
 ### Minor Changes
@@ -3209,11 +3218,11 @@ Monthly report: a month that had patrols opens the list of that month's patrol r
   `utils/console-tier.ts` + `composables/useConsoleTier.ts` mirror the server's
   own rule from two endpoints the console already calls, unprojected:
 
-                                                                                                                                                                                                                                                                                                                                                                                                                              GET /api/members/user/:user/app/admin    the Seven365 staff membership
-                                                                                                                                                                                                                                                                                                                                                                                                                              GET /api/roles/id/:role                  that membership's role document
+                                                                                                                                                                                                                                                                                                                                                                                                                                GET /api/members/user/:user/app/admin    the Seven365 staff membership
+                                                                                                                                                                                                                                                                                                                                                                                                                                GET /api/roles/id/:role                  that membership's role document
 
-                                                                                                                                                                                                                                                                                                                                                                                                                              owner  = member.type === "admin" && role.type === "admin" && role.default === true
-                                                                                                                                                                                                                                                                                                                                                                                                                              staff  = member.type === "admin" && role.type === "admin"
+                                                                                                                                                                                                                                                                                                                                                                                                                                owner  = member.type === "admin" && role.type === "admin" && role.default === true
+                                                                                                                                                                                                                                                                                                                                                                                                                                staff  = member.type === "admin" && role.type === "admin"
 
   `role.default` is the marker because it is the only property of a platform
   staff role no API caller can set - `role.controller.ts` validates create and

package/components/DataRetentionBanner.vue

@@ -0,0 +1,73 @@
+<template>
+  <!--
+    Scheduled data removal at the selected site (owner 2026-10-14). Shown to
+    the people who work the site, never residents (the server answers nothing
+    to them), and only for a removal that will really happen: Seven365 Admin
+    allowed deletion at this site and the site's admins were already told.
+    A site with no data retention never shows it - the request answers
+    `{ banner: null }`.
+  -->
+  <v-alert
+    v-if="banner"
+    type="warning"
+    variant="tonal"
+    density="comfortable"
+    class="drb mb-3"
+    icon="mdi-delete-clock-outline"
+    data-test="drb"
+  >
+    <div class="drb__text">{{ banner.message }}</div>
+    <button type="button" class="drb__toggle" :aria-expanded="open" data-test="drb-details" @click="open = !open">
+      {{ open ? "Hide details" : "Details" }}
+    </button>
+    <div v-if="open" class="drb__details" data-test="drb-details-body">
+      <ul class="drb__list">
+        <li v-for="i in banner.items" :key="i.dataType">
+          {{ i.label }}: {{ Number(i.count).toLocaleString("en-SG") }} created before {{ day(i.cutoff) }}
+        </li>
+      </ul>
+      <div>
+        Only finished records are deleted (closed feedback and work orders, visitors who have checked out, decided
+        incident reports, past days' occurrence books). Use each list's export to keep a copy. To postpone this, contact
+        Seven365.
+      </div>
+    </div>
+  </v-alert>
+</template>
+
+<script lang="ts" setup>
+const props = defineProps({
+  /** The selected site. Anything that is not a site id shows nothing. */
+  siteId: { type: String, default: "" },
+});
+
+const { getDataRetentionBanner } = useDataRetention();
+const banner = ref<Record<string, any> | null>(null);
+const open = ref(false);
+
+const day = (d: string) =>
+  new Date(d).toLocaleDateString("en-SG", { day: "numeric", month: "short", year: "numeric", timeZone: "Asia/Singapore" });
+
+async function load(site: string) {
+  banner.value = null;
+  open.value = false;
+  if (!/^[a-f0-9]{24}$/i.test(site)) return;
+  try {
+    const res = await getDataRetentionBanner(site);
+    // A late answer for a site the user already left is dropped.
+    if (props.siteId === site) banner.value = res?.banner ?? null;
+  } catch {
+    // Not reachable, a resident, or an older server: no banner.
+    banner.value = null;
+  }
+}
+
+watch(() => props.siteId, (s) => load(s), { immediate: true });
+</script>
+
+<style scoped>
+.drb__text { word-break: break-word; }
+.drb__toggle { text-decoration: underline; font-weight: 600; margin-top: 4px; background: none; border: 0; padding: 0; color: inherit; cursor: pointer; }
+.drb__details { margin-top: 8px; font-size: 13px; }
+.drb__list { padding-left: 18px; margin-bottom: 6px; }
+</style>

package/components/MemberSiteAccess.vue

@@ -34,6 +34,33 @@
         <p v-if="!choices.length" class="text-body-2">This organisation has no sites yet.</p>
 
         <div v-else>
+          <!--
+            WHO GOES OUT TO THE SITES. One switch for the whole person, not one
+            per row: an officer is an officer everywhere they are sent, and the
+            server writes the same value onto every site ticked below.
+
+            It grants NOTHING. What a member may do is still their role, which
+            is why this sits apart from the Role column rather than inside it.
+          -->
+          <v-switch
+            v-model="securityOps"
+            color="primary"
+            density="compact"
+            hide-details
+            inset
+            class="mb-2"
+            data-test="site-access-security-ops"
+          >
+            <template #label>
+              <div>
+                <div class="text-body-2">This person is part of Security Ops</div>
+                <div class="text-caption text-medium-emphasis">
+                  They visit the sites ticked below and fill in the checklists.
+                </div>
+              </div>
+            </template>
+          </v-switch>
+
           <div class="d-flex align-center ga-2 mb-2">
             <v-select
               v-model="sameRole"
@@ -53,6 +80,7 @@
 
           <div v-for="(c, i) in choices" :key="c.site" class="d-flex align-center ga-2 py-1" data-test="site-access-row">
             <v-checkbox v-model="choices[i].on" density="compact" hide-details :label="c.name" style="min-width: 220px" />
+            <v-chip v-if="securityOps && choices[i].on" size="x-small" color="primary" variant="tonal">Security Ops</v-chip>
             <v-select
               v-if="c.roles.length"
               v-model="choices[i].role"
@@ -72,6 +100,10 @@
           </p>
         </div>
 
+        <p v-if="choices.length" class="text-caption mt-2" data-test="site-access-security-ops-note">
+          {{ securityOpsNote }}
+        </p>
+
         <p v-if="missing.length" class="text-error text-caption mt-2">Choose a role for: {{ missing.join(", ") }}</p>
         <p v-if="saveError" class="text-error mt-2">{{ saveError }}</p>
       </template>
@@ -87,7 +119,7 @@
 
 <script setup lang="ts">
 // Relative import: this layer's `utils/` is not auto-imported into consumers.
-import { applySameRole, initialChoices, roleItems, sharedRoleItems, toPayload, type SiteChoice } from "../utils/site-access";
+import { applySameRole, initialChoices, initialSecurityOps, roleItems, sharedRoleItems, toPayload, type SiteChoice } from "../utils/site-access";
 
 const props = defineProps({
   org: { type: String, required: true },
@@ -106,6 +138,7 @@ const choices = ref<SiteChoice[]>([]);
 const orgWide = ref<Array<{ roleName?: string }>>([]);
 const removeOrgAccess = ref(false);
 const sameRole = ref<string | null>(null);
+const securityOps = ref(false);
 
 const sharedItems = computed(() => sharedRoleItems(choices.value));
 const anyOn = computed(() => choices.value.some((c) => c.on));
@@ -119,6 +152,15 @@ function createOrgRole() {
 }
 const missing = computed(() => toPayload(choices.value).missing);
 
+/** Say back what the switch and the ticks add up to, in the order they read. */
+const securityOpsNote = computed(() => {
+  if (!securityOps.value) return "Not part of Security Ops.";
+  const names = choices.value.filter((c) => c.on).map((c) => c.name);
+  if (!names.length) return "Part of Security Ops, but no site is ticked yet.";
+  if (names.length === 1) return `Part of Security Ops at ${names[0]}.`;
+  return `Part of Security Ops at ${names.slice(0, -1).join(", ")} and ${names[names.length - 1]}.`;
+});
+
 function applySame() {
   if (sameRole.value) choices.value = applySameRole(choices.value, sameRole.value);
 }
@@ -130,6 +172,7 @@ async function load() {
     const res = await getSiteAccess(props.org, props.user);
     choices.value = initialChoices(res?.sites ?? []);
     orgWide.value = res?.orgWide ?? [];
+    securityOps.value = initialSecurityOps(res?.sites ?? []);
   } catch (e: any) {
     loadError.value = e?.data?.message || "Site access could not be loaded. Only the organisation's owner or an admin can change it.";
   }
@@ -141,7 +184,13 @@ async function save() {
   saveError.value = "";
   try {
     const { sites } = toPayload(choices.value);
-    await saveSiteAccess({ org: props.org, user: props.user, sites, removeOrgAccess: removeOrgAccess.value });
+    await saveSiteAccess({
+      org: props.org,
+      user: props.user,
+      sites,
+      securityOps: securityOps.value,
+      removeOrgAccess: removeOrgAccess.value,
+    });
     emit("saved", sites.length ? `Site access saved: ${sites.length} site(s).` : "Site access saved: no sites.");
   } catch (e: any) {
     saveError.value = e?.data?.message || "Site access could not be saved.";

package/components/SiteDataRetention.vue

@@ -1,94 +1,48 @@
 <template>
   <!--
-    Data retention (PDPA), per site (TLR, 2026-10-13). Off by default: a site
-    that never switched it on keeps everything, as today. When on, the site's
-    admins are warned (in the app and by email) `noticeDays` before old records
-    are removed, and every removal leaves a record with a downloadable
-    certificate. Who may change it is decided by the server (the site's owning
-    organisation, or Seven365).
+    Data retention (PDPA), per site. Since 2026-10-14 (owner) it is managed by
+    the Seven365 Super Admin in Seven365 Admin; here it is a read-only summary
+    for the site's managers: the rules, the dates, and every removal with its
+    certificate. A site that never had it switched on keeps everything, as today.
   -->
   <div class="sdr" data-test="sdr">
-    <p class="sdr-help">
-      Remove old records automatically after a set time, to meet your data protection (PDPA) policy. Off means
-      everything is kept.
-    </p>
-
-    <v-switch
-      :model-value="enabled"
-      color="primary"
-      inset
-      hide-details
-      label="Remove old records automatically"
-      :disabled="!canEdit || saving"
-      data-test="sdr-enabled"
-      @update:model-value="onToggle"
-    />
-    <div v-if="!canEdit" class="sdr-sub" data-test="sdr-owner-only">
-      Only the client that owns this site can change data retention.
+    <div class="sdr-managed" data-test="sdr-managed">
+      Managed by Seven365 Admin. To change how long this site keeps its records, contact Seven365.
     </div>
-    <div class="sdr-sub">Before anything is removed, your site admins get a notice with a link to download the records.</div>
 
-    <template v-if="enabled">
-      <div class="sdr-label">How long to keep each kind of record</div>
-      <div class="sdr-sub">
-        Leave blank to keep that kind of record forever. Only finished records are removed: closed feedback and work
-        orders, visitors who have checked out, decided incident reports and past days' occurrence books.
+    <div v-if="!metadata" class="sdr-sub">Loading...</div>
+    <template v-else-if="!setting.enabled">
+      <div class="sdr-label">Off</div>
+      <div class="sdr-sub" data-test="sdr-off">Every record at this site is kept. Nothing is deleted automatically.</div>
+    </template>
+    <template v-else>
+      <div class="sdr-label">On</div>
+      <div class="sdr-sub" data-test="sdr-deletion">
+        {{
+          setting.deletionApproved
+            ? "Old records are permanently deleted on the dates below."
+            : "Requested - waiting for Seven365 approval. Nothing is warned about or deleted until Seven365 approves it."
+        }}
       </div>
-      <div v-for="t in RETENTION_TYPES" :key="t.value" class="sdr-row">
+
+      <div class="sdr-label">How long each kind of record is kept</div>
+      <div v-for="t in RETENTION_TYPES" :key="t.value" class="sdr-row" :data-test="`sdr-rule-${t.value}`">
         <span class="sdr-row__name">{{ t.label }}</span>
-        <v-text-field
-          v-model="months[t.value]"
-          type="number"
-          min="1"
-          max="120"
-          suffix="months"
-          density="compact"
-          variant="outlined"
-          hide-details="auto"
-          placeholder="Keep"
-          class="sdr-row__field"
-          :disabled="!canEdit || saving"
-          :rules="[monthRule]"
-          :aria-label="`Keep ${t.label} for how many months`"
-          :data-test="`sdr-months-${t.value}`"
-        />
+        <span>{{ keep(t.value) }}</span>
+      </div>
+      <div class="sdr-sub mt-2">
+        Only finished records are deleted: closed feedback and work orders, visitors who have checked out, decided
+        incident reports and past days' occurrence books.
       </div>
 
-      <div class="sdr-label">Notice before removal</div>
-      <v-text-field
-        v-model="noticeDays"
-        type="number"
-        min="7"
-        max="90"
-        suffix="days"
-        density="compact"
-        variant="outlined"
-        hide-details="auto"
-        class="sdr-row__field"
-        :disabled="!canEdit || saving"
-        :rules="[noticeRule]"
-        aria-label="Days of notice before removal"
-        data-test="sdr-notice"
-      />
-      <div class="sdr-sub">Between 7 and 90 days. Records are removed only after this notice.</div>
+      <div class="sdr-label">Dates</div>
+      <div class="sdr-sub">Your site admins are told {{ setting.noticeDays ?? 14 }} days before each deletion, and reminded the day before.</div>
+      <div v-if="setting.startFrom" class="sdr-sub" data-test="sdr-start">Nothing is deleted before {{ day(setting.startFrom) }}.</div>
+      <div v-if="pending" class="sdr-sub" data-test="sdr-next">
+        <strong>{{ setting.deletionApproved ? "Next deletion" : "Warning sent for" }}: {{ day(pending.dueAt) }}</strong>
+      </div>
     </template>
 
-    <div class="sdr-actions">
-      <v-btn class="screen-btn-ghost" variant="outlined" :loading="previewing" :disabled="!enabled || !rules.length" data-test="sdr-preview" @click="runPreview">
-        Preview
-      </v-btn>
-      <v-btn class="screen-btn-primary" variant="flat" color="primary-button" :loading="saving" :disabled="!metadata || !canEdit || !valid || !dirty" data-test="sdr-save" @click="save">
-        Save
-      </v-btn>
-    </div>
-
-    <div v-if="preview" class="sdr-box" data-test="sdr-preview-result">
-      <div class="sdr-box__title">If this ran today, it would remove:</div>
-      <ul class="sdr-list">
-        <li v-for="i in preview.items" :key="i.dataType">{{ i.count }} {{ i.label.toLowerCase() }} created before {{ day(i.cutoff) }}</li>
-      </ul>
-      <div class="sdr-sub">Nothing is removed by Preview. The first removal comes only after the notice above.</div>
-    </div>
     <div v-if="error" class="sdr-error" role="alert">{{ error }}</div>
 
     <div class="sdr-label mt-6">Data removal records</div>
@@ -115,127 +69,45 @@
       </v-btn>
     </div>
   </div>
-
-  <ConfirmDialog v-model="confirmOn">
-    <template #title>Remove old records automatically?</template>
-    <template #description>
-      Records older than the times you set will be permanently deleted at this site. Your site admins will be told
-      {{ noticeNumber }} days before each removal, with a link to download them first. Deleted records cannot be
-      brought back.
-    </template>
-    <template #footer>
-      <v-btn class="screen-btn-ghost" variant="outlined" @click="confirmOn = false">Cancel</v-btn>
-      <v-btn class="screen-btn-primary" variant="flat" color="primary-button" data-test="sdr-confirm" @click="turnOn">
-        Turn on
-      </v-btn>
-    </template>
-  </ConfirmDialog>
 </template>
 
 <script lang="ts" setup>
-import { RETENTION_TYPES, type TRetentionRule } from "../composables/useDataRetention";
+import { RETENTION_TYPES } from "../composables/useDataRetention";
 
 const props = defineProps({
   siteId: { type: String, required: true },
-  /** The site's stored metadata (`{}` once read for a site with none; null = not read yet, Save stays off). */
+  /** The site's stored metadata (`{}` once read for a site with none; null = not read yet). */
   metadata: { type: Object as PropType<Record<string, any> | null>, default: null },
-  /** Only the site's owning organisation (or Seven365) may change it; the server checks too. */
+  /** No longer used: the summary is read-only for everyone. Kept so a host that still passes it renders as before. */
   canEdit: { type: Boolean, default: false },
 });
-const emit = defineEmits<{ (e: "saved"): void; (e: "error", message: string): void }>();
 
-const { saveSiteFeature } = useSiteFeatureSettings();
-const { previewDataRetention, listDataPurgeRecords, downloadDataPurgeCertificate } = useDataRetention();
+const { listDataPurgeRecords, downloadDataPurgeCertificate } = useDataRetention();
 
-const enabled = ref(false);
-const months = reactive<Record<string, string | number>>({});
-const noticeDays = ref<string | number>(14);
-const saving = ref(false);
-const previewing = ref(false);
-const preview = ref<Record<string, any> | null>(null);
-const error = ref("");
-const confirmOn = ref(false);
 const records = ref<Record<string, any>[]>([]);
 const recordsLoading = ref(false);
 const downloading = ref("");
-const stored = ref("");
-
-function load(meta: Record<string, any> | null) {
-  const d = meta?.dataRetention ?? {};
-  enabled.value = d.enabled === true;
-  for (const t of RETENTION_TYPES) months[t.value] = "";
-  for (const r of Array.isArray(d.rules) ? d.rules : []) months[r.dataType] = r.keepMonths;
-  noticeDays.value = d.noticeDays ?? 14;
-  stored.value = JSON.stringify(value());
-}
-
-const toInt = (v: unknown) => (v === "" || v === null || v === undefined ? null : Number(v));
-const monthRule = (v: unknown) => {
-  const n = toInt(v);
-  return n === null || (Number.isInteger(n) && n >= 1 && n <= 120) || "1 to 120 months, or blank";
-};
-const noticeRule = (v: unknown) => {
-  const n = toInt(v);
-  return (n !== null && Number.isInteger(n) && n >= 7 && n <= 90) || "7 to 90 days";
-};
-const noticeNumber = computed(() => toInt(noticeDays.value) ?? 14);
-
-const rules = computed<TRetentionRule[]>(() =>
-  RETENTION_TYPES.map((t) => ({ dataType: t.value, keepMonths: toInt(months[t.value]) as number })).filter((r) => r.keepMonths !== null),
-);
-const valid = computed(
-  () => RETENTION_TYPES.every((t) => monthRule(months[t.value]) === true) && (!enabled.value || noticeRule(noticeDays.value) === true),
-);
-function value() {
-  return enabled.value
-    ? { enabled: true, rules: rules.value, noticeDays: toInt(noticeDays.value) ?? 14 }
-    : { enabled: false, rules: rules.value, ...(toInt(noticeDays.value) ? { noticeDays: toInt(noticeDays.value) } : {}) };
-}
-const dirty = computed(() => JSON.stringify(value()) !== stored.value);
-
-watch(() => props.metadata, (m) => load(m), { immediate: true });
+const error = ref("");
 
-function turnOn() {
-  enabled.value = true;
-  confirmOn.value = false;
-}
+const setting = computed<Record<string, any>>(() => {
+  const d = props.metadata?.dataRetention;
+  return d && d.enabled === true ? d : { enabled: false };
+});
+const pending = computed(() => records.value.find((r) => r.status === "pending") ?? null);
 
-function onToggle(v: boolean | null) {
-  preview.value = null;
-  if (v) confirmOn.value = true;
-  else enabled.value = false;
+function keep(type: string) {
+  const r = (setting.value.rules ?? []).find((x: any) => x.dataType === type);
+  return r ? `${r.keepMonths} month${r.keepMonths === 1 ? "" : "s"}` : "Kept";
 }
 
 const message = (e: any) => e?.data?.message || e?.message || "Something went wrong. Please try again.";
-const day = (d: string) => new Date(d).toLocaleDateString("en-SG", { day: "numeric", month: "short", year: "numeric" });
-
-async function save() {
-  if (!props.metadata) return;
-  saving.value = true;
-  error.value = "";
-  try {
-    await saveSiteFeature(props.siteId, "dataRetention", value());
-    stored.value = JSON.stringify(value());
-    emit("saved");
-  } catch (e) {
-    error.value = message(e);
-    emit("error", error.value);
-  } finally {
-    saving.value = false;
-  }
-}
-
-async function runPreview() {
-  previewing.value = true;
-  error.value = "";
-  try {
-    preview.value = await previewDataRetention(props.siteId, { rules: rules.value });
-  } catch (e) {
-    error.value = message(e);
-  } finally {
-    previewing.value = false;
-  }
-}
+const day = (d: string) =>
+  new Date(/^\d{4}-\d{2}-\d{2}$/.test(d) ? `${d}T00:00:00+08:00` : d).toLocaleDateString("en-SG", {
+    day: "numeric",
+    month: "short",
+    year: "numeric",
+    timeZone: "Asia/Singapore",
+  });
 
 function statusText(r: Record<string, any>) {
   if (r.status === "pending") return `Removal planned for ${day(r.dueAt)}`;
@@ -271,16 +143,11 @@ onMounted(loadRecords);
 </script>
 
 <style scoped>
-.sdr-help { margin-bottom: 8px; }
+.sdr-managed { font-weight: 600; margin-bottom: 8px; }
 .sdr-sub { font-size: 13px; opacity: 0.75; margin-bottom: 8px; }
 .sdr-label { font-weight: 600; margin-top: 16px; }
-.sdr-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 6px 0; }
+.sdr-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 4px 0; border-bottom: 1px solid rgba(0, 0, 0, 0.06); }
 .sdr-row__name { flex: 1 1 160px; min-width: 140px; }
-.sdr-row__field { flex: 0 1 180px; max-width: 180px; min-width: 140px; }
-.sdr-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
-.sdr-box { border: 1px solid rgba(0, 0, 0, 0.12); border-radius: 8px; padding: 12px; margin-top: 12px; }
-.sdr-box__title { font-weight: 600; margin-bottom: 4px; }
-.sdr-list { padding-left: 18px; margin-bottom: 6px; }
 .sdr-error { color: rgb(var(--v-theme-error)); margin-top: 8px; }
 .sdr-record { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 0; border-bottom: 1px solid rgba(0, 0, 0, 0.08); word-break: break-word; }
 </style>

package/components/SiteSettingsVisitorRegistration.vue

@@ -4,16 +4,18 @@
     that never saved them shows "as usual" everywhere and behaves as today.
   -->
   <div data-test="visitor-registration-settings">
-    <v-switch
-      v-model="askNric"
-      label="Ask for NRIC / FIN"
-      color="primary"
+    <v-select
+      v-model="nric"
+      :items="nricItems"
+      label="NRIC / FIN"
+      density="comfortable"
+      variant="outlined"
       hide-details
       :disabled="saving || !canManage"
       data-test="visitor-fields-nric"
     />
-    <p class="text-caption text-medium-emphasis mb-4">
-      Turn off if your site does not collect ID numbers. Existing records are not changed.
+    <p class="text-caption text-medium-emphasis mt-1 mb-4" data-test="visitor-fields-nric-help">
+      {{ nricHelp[nric] }} Existing records are not changed.
     </p>
 
     <v-select
@@ -70,6 +72,17 @@ const props = defineProps({
 });
 const emit = defineEmits<{ (e: "saved"): void; (e: "message", text: string, color: string): void }>();
 
+const nricItems = [
+  { title: "Ask and keep in full (as usual)", value: "default" },
+  { title: "Ask, but keep only the last 4 characters", value: "last4" },
+  { title: "Don't ask", value: "hidden" },
+];
+const nricHelp: Record<string, string> = {
+  default: "The full ID number is saved, and staff can find a returning visitor by typing it.",
+  last4:
+    "The full number is still typed at registration, but only the last 4 characters are saved (e.g. *****567A), for data protection. Returning visitors are then found by those last 4 characters, so check the name before using a suggestion.",
+  hidden: "Choose this if your site does not collect ID numbers.",
+};
 const contactItems = [
   { title: "Ask as usual", value: "default" },
   { title: "Don't ask", value: "hidden" },
@@ -80,7 +93,7 @@ const vehicleItems = [
   { title: "Always required", value: "required" },
 ];
 
-const askNric = ref(true);
+const nric = ref<"default" | "hidden" | "last4">("default");
 const contact = ref("default");
 const vehicle = ref("default");
 const saving = ref(false);
@@ -89,7 +102,7 @@ watch(
   () => props.siteData,
   (site) => {
     const v = getVisitorFieldSwitches(site);
-    askNric.value = v.nric !== "hidden";
+    nric.value = v.nric;
     contact.value = v.contact;
     vehicle.value = v.vehicle;
   },
@@ -103,7 +116,7 @@ async function save() {
   saving.value = true;
   try {
     await saveSiteFeature(props.siteId, "visitorFields", {
-      nric: askNric.value ? "default" : "hidden",
+      nric: nric.value,
       contact: contact.value,
       vehicle: vehicle.value,
     });

package/components/VisitorForm.vue

@@ -48,6 +48,10 @@
                     </div>
                   </v-list>
                 </v-menu>
+                <p v-if="visitorFieldSwitches.nric === 'last4'" class="text-caption text-medium-emphasis mt-1"
+                  data-test="visitor-nric-last4-hint">
+                  {{ NRIC_LAST4_HINT }}
+                </p>
               </v-col>
             </v-row>
           </v-col>
@@ -613,7 +617,7 @@ import useUtils from "../composables/useUtils";
 import useSiteSettings from "../composables/useSiteSettings";
 import useLocalAuth from "../composables/useLocalAuth";
 import useBuilding from "../composables/useBuilding";
-import useVisitor, { getVisitorFieldSwitches, VEHICLE_REQUIRED_MESSAGE } from "../composables/useVisitor";
+import useVisitor, { getVisitorFieldSwitches, NRIC_LAST4_HINT, VEHICLE_REQUIRED_MESSAGE } from "../composables/useVisitor";
 import useSiteEntryPassSettings from "../composables/useSiteEntryPassSettings";
 import useAccessManagement from "../composables/useAccessManagement";
 import usePeople from "../composables/usePeople";

package/composables/useDataRetention.ts

@@ -1,6 +1,7 @@
 /**
  * PDPA data retention per site (`/api/data-retention`, API-core). The setting
- * itself is one site switch (`metadata.dataRetention`, useSiteFeatureSettings).
+ * itself is one site switch (`metadata.dataRetention`), managed by the Seven365
+ * Super Admin in Seven365 Admin since 2026-10-14; the apps only read it.
  * Documents are not part of data retention in this version.
  */
 export type TRetentionRule = { dataType: string; keepMonths: number };
@@ -39,5 +40,10 @@ export default function useDataRetention() {
     window.URL.revokeObjectURL(url);
   }
 
-  return { previewDataRetention, listDataPurgeRecords, downloadDataPurgeCertificate };
+  /** A scheduled removal at the site, for the people who work it (`{ banner: null }` when none). */
+  function getDataRetentionBanner(site: string) {
+    return api()<{ banner: Record<string, any> | null }>("/api/data-retention/banner", { method: "GET", query: { site } });
+  }
+
+  return { previewDataRetention, listDataPurgeRecords, downloadDataPurgeCertificate, getDataRetentionBanner };
 }

package/composables/useMember.ts

@@ -201,6 +201,12 @@ export default function useMember() {
     org: string;
     user: string;
     sites: Array<{ site: string; role: string }>;
+    /**
+     * Is this person one of the Security Ops officers who visits sites? One
+     * value for the whole person, written onto every site they end up with.
+     * Omit it and the server leaves the mark exactly as it is.
+     */
+    securityOps?: boolean;
     removeOrgAccess?: boolean;
   }) {
     return useNuxtApp().$api<Record<string, any>>("/api/members/site-access", {

package/composables/useVisitor.ts

@@ -279,7 +279,7 @@ export default function () {
  * Anything a site never saved reads as "default" = today's form.
  */
 export type TVisitorFieldSwitches = {
-  nric: "default" | "hidden";
+  nric: "default" | "hidden" | "last4";
   contact: "default" | "hidden" | "required";
   vehicle: "default" | "required";
 };
@@ -287,11 +287,14 @@ export type TVisitorFieldSwitches = {
 export function getVisitorFieldSwitches(site: any): TVisitorFieldSwitches {
   const v = site?.metadata?.visitorFields ?? {};
   return {
-    nric: v.nric === "hidden" ? "hidden" : "default",
+    nric: v.nric === "hidden" || v.nric === "last4" ? v.nric : "default",
     contact: v.contact === "hidden" || v.contact === "required" ? v.contact : "default",
     vehicle: v.vehicle === "required" ? "required" : "default",
   };
 }
 
+/** Shown under the NRIC field on a "keep only the last 4" site. */
+export const NRIC_LAST4_HINT = "Only the last 4 characters will be kept.";
+
 /** Same words as the server's refusal, so the guard reads one message. */
 export const VEHICLE_REQUIRED_MESSAGE = "This site requires a vehicle number for every visitor.";

package/constants/permissions.ts

@@ -342,6 +342,18 @@ export const PERMISSIONS = {
     // Owner answer Q10, 2026-09-11. Mirrors `start-virtual-patrol-route`.
     "start-nfc-patrol",
   ],
+  // Security Ops. Both strings are enforced by the server (API-core
+  // `SITE_VISIT_PERMISSIONS`) and read by the security mobile app's own
+  // catalogue, so the spelling is maintained by hand in three places and this
+  // is the one that makes a typo visible.
+  //
+  // `see-all-site-visits` also decides who is told about an action: a head of
+  // security holds it together with `site-settings:manage-geofence`. A wildcard
+  // deliberately does NOT qualify for that, because a wildcard says somebody
+  // administers this site, not that they run security at it - measured
+  // 2026-10-13, every wildcard holder at a live site was an org owner, a test
+  // account or a service provider's administrator.
+  "security-ops": ["start-site-visit", "see-all-site-visits"],
   // Owner answer Q9, 2026-09-11: seeing the CCTV wall. Distinct from
   // `site-settings:manage-cctv-camera`, which is camera setup.
   "cctv-mgmt": ["see-all-cctv", "view-recordings"],

package/package.json

@@ -2,7 +2,7 @@
   "name": "@7365admin1/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "4.120.0",
+  "version": "4.121.0",
   "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.",

package/utils/inventory-presets.ts

@@ -56,8 +56,50 @@ export const INVENTORY_PRESETS: TPermissionPreset[] = [
   },
 ];
 
-/** Presets per module key; only inventory has them today. */
-export const PERMISSION_PRESETS: Record<string, TPermissionPreset[]> = { inventory: INVENTORY_PRESETS };
+/**
+ * Security Ops in plain words: the two jobs the module actually has.
+ *
+ * WHY A PRESET AND NOT A NEW PERMISSION. Neither of these is a new right: both
+ * sets are made of strings that already exist. The preset only spares somebody
+ * hunting a permission tree, and that matters here because the alternative
+ * people reach for is a wildcard role, which is how a service provider's
+ * administrator ends up supervising a security site.
+ *
+ * GEOFENCING IS NOT IN EITHER SET, and cannot be: `applyPermissionPreset` is
+ * scoped to one resource, and `manage-geofence` belongs to `site-settings`.
+ * That matters because the owner's definition of a head of security
+ * (2026-10-13) is this permission AND geofencing, and the server reads exactly
+ * that pair to decide who is told when an action is raised or sent for
+ * verification. So the preset's description has to send the administrator to
+ * tick the other box, rather than quietly leaving the job half done.
+ *
+ * `start-site-visit` is deliberately NOT in the head of security set: it is the
+ * right to go and do a visit, and somebody who never walks a site should not
+ * have to hold it to be told what is happening on one. Holding it as well does
+ * not disqualify them.
+ */
+export const SECURITY_OPS_PRESETS: TPermissionPreset[] = [
+  {
+    key: "officer",
+    label: "Security Ops officer",
+    description:
+      "Goes to the site, works through the visit checklists and checks out. Sees their own work.",
+    actions: ["start-site-visit"],
+  },
+  {
+    key: "head",
+    label: "Head of security",
+    description:
+      "Sees every officer's visits and actions. Also tick Manage geofencing under Site settings: that pair is what decides who is told when an action is raised or sent for verification.",
+    actions: ["see-all-site-visits"],
+  },
+];
+
+/** Presets per module key. */
+export const PERMISSION_PRESETS: Record<string, TPermissionPreset[]> = {
+  inventory: INVENTORY_PRESETS,
+  "security-ops": SECURITY_OPS_PRESETS,
+};
 
 /**
  * The permission list with `resource`'s grants replaced by `preset`'s actions --

package/utils/notification-target.ts

@@ -204,6 +204,16 @@ const SITE_PAGES: Record<string, TSitePage[]> = {
   robotAlert: [{ apps: ["security", "property-management", "hygiene"], page: () => "robot-management/alerts" }],
   // hygiene has its Service Providers page too since 2026-09-28
   serviceProviderInviteAnswer: [{ apps: SERVICE_APPS, page: () => "service-providers" }],
+  /**
+   * Security Ops: an action was raised, sent for verification, signed off,
+   * reopened, or went overdue. Lands on the Ops Review page, which is where the
+   * register is read.
+   *
+   * WITHOUT THIS ENTRY THE ROW IS A DEAD END. `notificationTarget` answers null
+   * for a kind it has no page for, so every overdue escalation ever written has
+   * opened nothing at all. Adding it repairs those too, not only the new alerts.
+   */
+  "security-ops": [{ apps: ["security"], page: () => "security-ops" }],
 };
 SITE_PAGES.myVisitors = SITE_PAGES.visitors;
 

package/utils/site-access.ts

@@ -8,7 +8,7 @@ export type SiteAccessRole = { _id: string; name: string; type?: string; scope?:
 export type SiteAccessRow = {
   site: string;
   name: string;
-  membership: { role: string; roleName?: string } | null;
+  membership: { role: string; roleName?: string; securityOps?: boolean } | null;
   roles: SiteAccessRole[];
 };
 export type SiteChoice = { site: string; name: string; on: boolean; role: string; roles: SiteAccessRole[]; replacedRole?: string };
@@ -31,6 +31,18 @@ export function initialChoices(rows: SiteAccessRow[]): SiteChoice[] {
   });
 }
 
+/**
+ * Is this person already marked as Security Ops?
+ *
+ * ONE ANSWER FOR THE WHOLE PERSON, because that is the question the switch
+ * asks: an officer is an officer everywhere they are sent. Any marked site
+ * means yes, so a person whose rows disagree (only reachable by an older client
+ * or a hand edit) reads as marked, and saving settles every row to one value.
+ */
+export function initialSecurityOps(rows: SiteAccessRow[]): boolean {
+  return (rows ?? []).some((r) => Boolean(r.membership?.securityOps));
+}
+
 /** One site's Role list: "Organisation roles" first, then "<Site> roles". */
 export function roleItems(choice: Pick<SiteChoice, "name" | "roles">): RoleItem[] {
   const org = choice.roles.filter(isOrgRole);