@7365admin1/layer-common 4.119.0 → 4.121.0

package/components/MaStaffRegistrationSettings.vue

@@ -0,0 +1,61 @@
+<template>
+  <div data-test="ma-staff-registration">
+    <v-switch v-model="enabled" :disabled="readOnly" label="Offer &quot;Managing agent staff&quot; at the guardhouse"
+      color="primary" hide-details />
+    <p class="text-caption text-medium-emphasis mt-1 mb-3">
+      The guardhouse can register your staff drawing keys as a contractor of type "Managing agent staff", with your company
+      name filled in.
+    </p>
+    <v-text-field v-if="enabled" v-model.trim="company" :readonly="readOnly" label="Company name to fill in"
+      placeholder="e.g. JLL" density="comfortable" variant="outlined" maxlength="120" />
+    <v-btn v-if="!readOnly" class="screen-btn-primary" color="primary-button" variant="flat" text="Save"
+      :loading="saving" :disabled="!loaded" @click="save" />
+    <Snackbar v-model="toast.show" :text="toast.message" :color="toast.color" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import useSiteFeatureSettings from "../composables/useSiteFeatureSettings";
+
+/**
+ * Site setting `metadata.maStaffRegistration` (core site-feature-settings).
+ * Off = today: the contractor type list is unchanged.
+ */
+const props = defineProps({
+  siteId: { type: String, required: true },
+  saved: { type: Object as PropType<{ enabled?: boolean; company?: string } | null>, default: null },
+  readOnly: { type: Boolean, default: false },
+  /** The site has been read; Save stays off until then. */
+  loaded: { type: Boolean, default: false },
+});
+const emit = defineEmits(["saved"]);
+
+const enabled = ref(false);
+const company = ref("");
+watch(
+  () => props.saved,
+  (v) => {
+    enabled.value = v?.enabled === true;
+    company.value = v?.company ?? "";
+  },
+  { immediate: true },
+);
+
+const { saveSiteFeature } = useSiteFeatureSettings();
+const saving = ref(false);
+const toast = reactive({ show: false, message: "", color: "" });
+
+async function save() {
+  if (!props.loaded) return;
+  saving.value = true;
+  try {
+    await saveSiteFeature(props.siteId, "maStaffRegistration", { enabled: enabled.value, company: company.value });
+    Object.assign(toast, { show: true, message: "Saved.", color: "success" });
+    emit("saved");
+  } catch (e: any) {
+    Object.assign(toast, { show: true, message: e?.data?.message || "Could not save.", color: "error" });
+  } finally {
+    saving.value = false;
+  }
+}
+</script>

package/components/MemberInformation.vue

@@ -114,7 +114,7 @@
           <div class="nric-selected-person d-flex align-center justify-space-between ga-3 mb-5">
             <span>{{ memberSelectedSearchResult.name || "Unknown" }}</span>
             <span class="text-no-wrap">
-              NRIC: {{ memberSelectedSearchResult.nric || "N/A" }}
+              NRIC: {{ maskNRIC(memberSelectedSearchResult.nric) || "N/A" }}
             </span>
           </div>
 
@@ -214,7 +214,7 @@ const props = defineProps({
   },
 });
 
-const { requiredRule, debounce } = useUtils();
+const { requiredRule, debounce, maskNRIC } = useUtils();
 const { getPassKeysByPageSearch } = usePassKey();
 const {
   findPersonByNRICMultipleResult,

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/PassInformation.vue

@@ -48,6 +48,7 @@
             :rules="props.passRules"
             item-title="prefixAndName"
             item-value="_id"
+            :item-props="keyItemProps"
             label="Keys (Optional)"
             multiple
             variant="outlined"
@@ -97,6 +98,7 @@
 import type { PropType } from "vue";
 import type { ValidationRule } from "vuetify/lib/types.mjs";
 import usePassKey from "../composables/usePassKey";
+import useKeyPresses from "../composables/useKeyPresses";
 import { errorConverter } from "../utils/data";
 import VisitorPassKeyQRScanner from "./VisitorPassKeyQRScanner.vue";
 
@@ -125,6 +127,9 @@ const props = withDefaults(defineProps<PassInformationProps>(), {
 });
 
 const emit = defineEmits(["update:pass", "update:keys"]);
+// The key's press (if the site has any) under each key in the picker. Read
+// only when the key picker is shown.
+const { keyItemProps } = useKeyPresses(() => (props.hideKeys ? "" : props.site));
 const pass = ref<TPassKeyPayload[]>(props.pass);
 const keys = ref<TPassKeyPayload[]>(props.keys);
 const selectedPass = ref<string>("");

package/components/RolePermissionFormCreate.vue

@@ -79,6 +79,27 @@
             />
           </v-col>
 
+          <!--
+            Whole-role starting points (e.g. Guardhouse officer). Replaces the
+            ticks below; nothing is saved until Create. Only offered when this
+            catalogue has every permission the preset uses.
+          -->
+          <v-col v-if="rolePresets.length" cols="12" class="mt-3" data-test="role-presets">
+            <div class="text-caption font-weight-bold mb-1">Start from a ready-made role</div>
+            <div class="d-flex flex-wrap ga-2">
+              <v-tooltip v-for="p in rolePresets" :key="p.key" :text="p.description" location="top">
+                <template #activator="{ props: tip }">
+                  <v-chip v-bind="tip" size="small" variant="outlined" class="text-none" @click="applyRoleTemplate(p)">
+                    {{ p.label }}
+                  </v-chip>
+                </template>
+              </v-tooltip>
+            </div>
+            <div class="text-caption text-medium-emphasis mt-1">
+              Replaces the ticks below. Adjust them if needed, then create the role.
+            </div>
+          </v-col>
+
           <v-col cols="12" class="mt-3">
             <div class="role-create__list">
               <div
@@ -262,6 +283,7 @@ import useRole from "../composables/useRole";
 import useUtils from "../composables/useUtils";
 import useSite from "../composables/useSite";
 import { readApiError } from "../utils/subscription-form";
+import { applyRolePreset, ROLE_PRESETS, type TRolePreset } from "../utils/inventory-presets";
 
 /** Shown after "Couldn't save:" when the server gave no reason (network, timeout). */
 const SAVE_FALLBACK =
@@ -406,6 +428,17 @@ function toggleCategory(resource: string, value: boolean | null) {
   }
 }
 
+/** Whole-role presets this catalogue can express in full. */
+const rolePresets = computed(() =>
+  ROLE_PRESETS.filter((p) => applyRolePreset(safePermissions.value as any, p)),
+);
+
+function applyRoleTemplate(preset: TRolePreset) {
+  const state = applyRolePreset(safePermissions.value as any, preset);
+  // never an empty list: empty means "everything" on the server
+  if (state?.selected.length) permState.value = state;
+}
+
 /** A module preset replaced that module's ticks (see RolePermissionPresets). */
 function applyPreset(selected: string[]) {
   permState.value = { selected, enabled: permState.value.enabled };

package/components/SearchVehicleNumberUser.vue

@@ -19,6 +19,8 @@
             </span>
           </template>
 
+          <template #item.nric="{ value }">{{ maskNRIC(value) || "-" }}</template>
+
           <template #item.actions="{ item }">
             <AppButton variant="ghost" @click="handleSelectUser(item)">Select</AppButton>
           </template>
@@ -37,6 +39,7 @@
 </template>
 
 <script setup lang="ts">
+const { maskNRIC } = useUtils();
 
 const prop = defineProps({
   vehicleNumber: {

package/components/SiteDataRetention.vue

@@ -0,0 +1,153 @@
+<template>
+  <!--
+    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">
+    <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 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 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>
+        <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">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 v-if="error" class="sdr-error" role="alert">{{ error }}</div>
+
+    <div class="sdr-label mt-6">Data removal records</div>
+    <div class="sdr-sub">Each removal, with a certificate you can give your DPO (data protection lead).</div>
+    <div v-if="recordsLoading" class="sdr-sub">Loading...</div>
+    <div v-else-if="!records.length" class="sdr-sub" data-test="sdr-no-records">No records have been removed at this site.</div>
+    <div v-for="r in records" :key="r._id" class="sdr-record" data-test="sdr-record">
+      <div>
+        <strong>{{ statusText(r) }}</strong>
+        <div class="sdr-sub">
+          {{ r.items.filter((i: any) => i.count).map((i: any) => `${i.count} ${i.label.toLowerCase()}`).join(", ") || "No records" }}
+          · Record {{ r._id }}
+        </div>
+      </div>
+      <v-btn
+        v-if="r.status === 'done'"
+        variant="text"
+        prepend-icon="mdi-file-download-outline"
+        :loading="downloading === r._id"
+        data-test="sdr-certificate"
+        @click="certificate(r._id)"
+      >
+        Download certificate
+      </v-btn>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+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). */
+  metadata: { type: Object as PropType<Record<string, any> | null>, default: null },
+  /** 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 { listDataPurgeRecords, downloadDataPurgeCertificate } = useDataRetention();
+
+const records = ref<Record<string, any>[]>([]);
+const recordsLoading = ref(false);
+const downloading = ref("");
+const error = ref("");
+
+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 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{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)}`;
+  if (r.status === "running") return "Removal in progress";
+  if (r.status === "cancelled") return `Planned removal withdrawn${r.cancelledAt ? ` on ${day(r.cancelledAt)}` : ""}`;
+  if (r.status === "failed") return "Removal did not finish - Seven365 has been told";
+  return `Old records removed on ${day(r.ranAt)}`;
+}
+
+async function loadRecords() {
+  recordsLoading.value = true;
+  try {
+    records.value = (await listDataPurgeRecords(props.siteId))?.items ?? [];
+  } catch {
+    records.value = [];
+  } finally {
+    recordsLoading.value = false;
+  }
+}
+
+async function certificate(id: string) {
+  downloading.value = id;
+  try {
+    await downloadDataPurgeCertificate(props.siteId, id);
+  } catch (e) {
+    error.value = message(e);
+  } finally {
+    downloading.value = "";
+  }
+}
+
+onMounted(loadRecords);
+</script>
+
+<style scoped>
+.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; 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-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/SiteSettings.vue

@@ -219,6 +219,51 @@
         </v-expansion-panel-text>
       </v-expansion-panel>
 
+      <!-- The per-site client switches below are drawn only by the hosts that set
+           `showSiteSwitches` (Property Management and Security); the other
+           service-provider apps show no new panel. -->
+      <v-expansion-panel v-if="showSiteSwitches && canManageSiteSettings">
+        <v-expansion-panel-title>
+          <v-icon class="mr-2">mdi-card-account-details-outline</v-icon>
+          Visitor registration
+        </v-expansion-panel-title>
+        <v-expansion-panel-text>
+          <SiteSettingsVisitorRegistration :site-id="siteId" :site-data="siteData"
+            :can-manage="canManageSiteSettings" @saved="refreshSiteData" @message="show" />
+        </v-expansion-panel-text>
+      </v-expansion-panel>
+
+      <!-- Passes & keys (TLR B8 / D2): key presses, daily unreturned list,
+           check-out block. All off until a site saves them. Gated like Site
+           Information; saving needs site-settings rights (the server checks
+           it too). -->
+      <v-expansion-panel v-if="showSiteSwitches && canManageSiteInformation">
+        <v-expansion-panel-title>
+          <v-icon class="mr-2">mdi-key-chain</v-icon>
+          Passes &amp; keys
+        </v-expansion-panel-title>
+        <v-expansion-panel-text>
+          <KeySettingsPanel
+            :site="siteId"
+            :site-data="siteData"
+            :read-only="!canManageSiteSettings"
+            @message="show"
+            @saved="refreshSiteData"
+          />
+        </v-expansion-panel-text>
+      </v-expansion-panel>
+
+      <v-expansion-panel v-if="showSiteSwitches && canManageAnySiteSetting">
+        <v-expansion-panel-title>
+          <v-icon class="mr-2">mdi-email-alert-outline</v-icon>
+          Incident report emails
+        </v-expansion-panel-title>
+        <v-expansion-panel-text>
+          <IncidentReportEmailsSettings :site-id="siteId" :saved="(siteData as any)?.metadata?.incidentReportEmails"
+            :loaded="!!siteData" :read-only="!canManageSiteSettings" @saved="refreshSiteData" />
+        </v-expansion-panel-text>
+      </v-expansion-panel>
+
       <slot
         name="panels"
         :can-manage="canManageSiteSettings"
@@ -246,6 +291,8 @@ const props = defineProps({
   showCctvCamera: { type: Boolean, default: false },
   showDeliveryCompanies: { type: Boolean, default: false },
   showResidentVisitors: { type: Boolean, default: false },
+  /** Visitor registration, Passes & keys and Incident report emails: PM and Security only. */
+  showSiteSwitches: { type: Boolean, default: false },
 });
 
 const openPanels = ref([]); // default open first
@@ -255,6 +302,7 @@ const { canManageSiteInformation,
   canManageDeliveryCompanies,
   canManageResidentVisitors,
   canManageVehicleQr,
+  canManageSiteSettings: canManageAnySiteSetting,
 } = useSettingsPermission();
 
 const { getSiteById, updateSitebyId, updateSiteInformation } =

package/components/SiteSettingsVisitorRegistration.vue

@@ -0,0 +1,131 @@
+<template>
+  <!--
+    Guardhouse registration switches (`site.metadata.visitorFields`). A site
+    that never saved them shows "as usual" everywhere and behaves as today.
+  -->
+  <div data-test="visitor-registration-settings">
+    <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 mt-1 mb-4" data-test="visitor-fields-nric-help">
+      {{ nricHelp[nric] }} Existing records are not changed.
+    </p>
+
+    <v-select
+      v-model="contact"
+      :items="contactItems"
+      label="Contact number"
+      density="comfortable"
+      variant="outlined"
+      hide-details
+      :disabled="saving || !canManage"
+      data-test="visitor-fields-contact"
+    />
+    <p class="text-caption text-medium-emphasis mt-1 mb-4">
+      "Always required" means a visitor cannot be saved without a contact number.
+    </p>
+
+    <v-select
+      v-model="vehicle"
+      :items="vehicleItems"
+      label="Vehicle number"
+      density="comfortable"
+      variant="outlined"
+      hide-details
+      :disabled="saving || !canManage"
+      data-test="visitor-fields-vehicle"
+    />
+    <p class="text-caption text-medium-emphasis mt-1 mb-4">
+      "Always required" means a visitor cannot be saved without a plate number. Walk-in visitors are not asked.
+    </p>
+
+    <v-btn
+      v-if="canManage"
+      class="screen-btn-primary text-none"
+      variant="flat"
+      :loading="saving"
+      :disabled="!siteData"
+      data-test="visitor-fields-save"
+      @click="save"
+    >
+      Save
+    </v-btn>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { PropType } from "vue";
+import useSiteFeatureSettings from "../composables/useSiteFeatureSettings";
+import { getVisitorFieldSwitches } from "../composables/useVisitor";
+
+const props = defineProps({
+  siteId: { type: String, required: true },
+  siteData: { type: Object as PropType<Record<string, any> | null>, default: null },
+  canManage: { type: Boolean, default: false },
+});
+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" },
+  { title: "Always required", value: "required" },
+];
+const vehicleItems = [
+  { title: "As usual", value: "default" },
+  { title: "Always required", value: "required" },
+];
+
+const nric = ref<"default" | "hidden" | "last4">("default");
+const contact = ref("default");
+const vehicle = ref("default");
+const saving = ref(false);
+
+watch(
+  () => props.siteData,
+  (site) => {
+    const v = getVisitorFieldSwitches(site);
+    nric.value = v.nric;
+    contact.value = v.contact;
+    vehicle.value = v.vehicle;
+  },
+  { immediate: true }
+);
+
+const { saveSiteFeature } = useSiteFeatureSettings();
+
+async function save() {
+  if (!props.siteData) return;
+  saving.value = true;
+  try {
+    await saveSiteFeature(props.siteId, "visitorFields", {
+      nric: nric.value,
+      contact: contact.value,
+      vehicle: vehicle.value,
+    });
+    emit("message", "Visitor registration settings saved", "success");
+    emit("saved");
+  } catch (e: any) {
+    emit("message", e?.data?.message || "Could not save the visitor registration settings", "error");
+  } finally {
+    saving.value = false;
+  }
+}
+</script>

package/components/VehicleForm.vue

@@ -476,7 +476,7 @@
               </v-list-item-title>
 
               <v-list-item-subtitle>
-                NRIC: {{ v.nric || "-" }}
+                NRIC: {{ maskNRIC(v.nric) || "-" }}
               </v-list-item-subtitle>
 
               <div class="mt-1 d-flex flex-wrap ga-1">
@@ -581,7 +581,7 @@ const prop = defineProps({
   },
 });
 
-const { requiredRule, debounce } = useUtils();
+const { requiredRule, debounce, maskNRIC } = useUtils();
 const {
   addVehicle,
   getCustomSeasonPassTypes,