@7365admin1/layer-common 4.118.10 → 4.120.0

package/components/SiteDataRetention.vue

@@ -0,0 +1,286 @@
+<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).
+  -->
+  <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>
+    <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>
+      <div v-for="t in RETENTION_TYPES" :key="t.value" class="sdr-row">
+        <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}`"
+        />
+      </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>
+    </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>
+    <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>
+
+  <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";
+
+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). */
+  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. */
+  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 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 });
+
+function turnOn() {
+  enabled.value = true;
+  confirmOn.value = false;
+}
+
+function onToggle(v: boolean | null) {
+  preview.value = null;
+  if (v) confirmOn.value = true;
+  else enabled.value = false;
+}
+
+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;
+  }
+}
+
+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-help { 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__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/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,118 @@
+<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-switch
+      v-model="askNric"
+      label="Ask for NRIC / FIN"
+      color="primary"
+      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>
+
+    <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 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 askNric = ref(true);
+const contact = ref("default");
+const vehicle = ref("default");
+const saving = ref(false);
+
+watch(
+  () => props.siteData,
+  (site) => {
+    const v = getVisitorFieldSwitches(site);
+    askNric.value = v.nric !== "hidden";
+    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: askNric.value ? "default" : "hidden",
+      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,

package/components/VisitorForm.vue

@@ -93,7 +93,7 @@
                   content-class="visitor-form__menu">
                   <template #activator="{ props }">
                     <InputVehicleNumber v-bind="props" v-model="visitor.plateNumber" density="comfortable"
-                      :rules="[isVehicleRequired ? requiredRule : () => true]"
+                      :rules="[vehicleRule]"
                       @update:model-value="handleUpdateVehicleNumber" @focus="handleFocusPlateNumber"
                       @blur="isPlateNumberFieldFocused = false" />
                   </template>
@@ -121,7 +121,7 @@
             <InputLabel class="text-capitalize" title="Contractor Type (Required)" required />
             <v-combobox v-model="contractorTypeObj" v-model:search="contractorTypeInput" ref="contractorTypeCombo"
               autocomplete="off" :hide-no-data="false" @update:focused="handleFocusedContractorType"
-              :items="contractorTypes" :rules="[requiredRule]" item-value="value"
+              :items="contractorTypeItems" :rules="[requiredRule]" item-value="value"
               @update:model-value="handleSelectContractorType" variant="outlined" density="comfortable" persistent-hint
               small-chips>
               <template v-slot:no-data>
@@ -311,7 +311,7 @@
         <div class="screen-modal__body nric-options-body">
           <div class="nric-selected-person d-flex align-center justify-space-between ga-3 mb-5">
             <span>{{ selectedNricSearchResult.name || "Unknown" }}</span>
-            <span v-if="!visitor.nric || currentAutofillSource === 'nric'" class="text-no-wrap">NRIC: {{ selectedNricSearchResult.nric || "N/A" }}</span>
+            <span v-if="!visitor.nric || currentAutofillSource === 'nric'" class="text-no-wrap">NRIC: {{ maskNRIC(selectedNricSearchResult.nric) || "N/A" }}</span>
           </div>
 
           <template v-if="(!visitor.contact || currentAutofillSource === 'contact') && selectedNricContactOptions.length >= 1">
@@ -355,7 +355,7 @@
           </p>
 
           <div class="checkout-dialog__subject">
-            <div v-if="!skipNonCheckedOutNric">NRIC: {{ visitor.nric || "N/A" }}</div>
+            <div v-if="!skipNonCheckedOutNric">NRIC: {{ maskNRIC(visitor.nric) || "N/A" }}</div>
             <div>Phone Number: {{ visitor.contact || "N/A" }}</div>
           </div>
 
@@ -422,7 +422,7 @@
         <div class="visitor-form__footer" v-if="!skipNonCheckedOutNric">
           <v-btn class="screen-btn-primary" variant="flat" :loading="loading.searchingNonCheckedOut"
             @click="handleSkipNricNonCheckedOut">
-            Skip NRIC: {{ visitor.nric || "N/A" }}
+            Skip NRIC: {{ maskNRIC(visitor.nric) || "N/A" }}
           </v-btn>
         </div>
       </v-card>
@@ -613,7 +613,7 @@ import useUtils from "../composables/useUtils";
 import useSiteSettings from "../composables/useSiteSettings";
 import useLocalAuth from "../composables/useLocalAuth";
 import useBuilding from "../composables/useBuilding";
-import useVisitor from "../composables/useVisitor";
+import useVisitor, { getVisitorFieldSwitches, VEHICLE_REQUIRED_MESSAGE } from "../composables/useVisitor";
 import useSiteEntryPassSettings from "../composables/useSiteEntryPassSettings";
 import useAccessManagement from "../composables/useAccessManagement";
 import usePeople from "../composables/usePeople";
@@ -845,10 +845,18 @@ const formFieldsExcluded: Partial<Record<TVisitorType, string[]>> = {
   guest: ["purpose"],
 };
 
+// The site's registration switches (Site Settings -> Visitor registration).
+// A site that never saved them reads all "default" = the per-type rules below.
+const visitorFieldSwitches = computed(() =>
+  getVisitorFieldSwitches(siteData.value)
+);
+
 const isFormField = (
   fieldKey: keyof TVisitorPayload | "delivery-company"
 ) => {
   if (formFieldsExcluded[prop.type]?.includes(fieldKey)) return false;
+  if (fieldKey === "nric" && visitorFieldSwitches.value.nric === "hidden") return false;
+  if (fieldKey === "contact" && visitorFieldSwitches.value.contact === "hidden") return false;
   return !!typeFieldMap[prop.type]?.includes(fieldKey);
 };
 
@@ -892,13 +900,22 @@ const requireNRIC = computed(() => {
 });
 
 const requireContact = computed(() => {
+  if (visitorFieldSwitches.value.contact === "required") return true;
   return ["contractor", "delivery"].includes(prop.type);
 });
 
+// "Always required" only reaches types whose form has a plate field (not walk-in).
 const isVehicleRequired = computed(() => {
+  if (visitorFieldSwitches.value.vehicle === "required") return true;
   return ["guest", "pick-up", "drop-off"].includes(prop.type);
 });
 
+const vehicleRule = (v: string) => {
+  if (visitorFieldSwitches.value.vehicle === "required")
+    return !!String(v ?? "").trim() || VEHICLE_REQUIRED_MESSAGE;
+  return isVehicleRequired.value ? requiredRule(v) : true;
+};
+
 const requireCompany = computed(() => {
   return prop.type === "contractor";
 });
@@ -1012,6 +1029,10 @@ const formTitle = computed(() => {
 
 function handleSelectContractorType(obj: { title: string; value: string }) {
   visitor.contractorType = obj.value ?? "";
+  // Managing agent staff (site switch): fill in the MA's company if empty.
+  if (obj?.value === MA_STAFF_CONTRACTOR_TYPE && !visitor.company) {
+    visitor.company = maStaffRegistration.value.company;
+  }
 }
 
 function handleFocusedContractorType() {
@@ -1511,6 +1532,20 @@ const {
   getSiteById(prop.site)
 );
 
+// "Managing agent staff" is offered only where the site switched it on
+// (`metadata.maStaffRegistration`); it is saved as a contractor, so older app
+// builds still list it. Off = the list is exactly as before.
+const MA_STAFF_CONTRACTOR_TYPE = "managing-agent-staff";
+const maStaffRegistration = computed(() => {
+  const m = (siteData.value as any)?.metadata?.maStaffRegistration;
+  return { enabled: m?.enabled === true, company: typeof m?.company === "string" ? m.company : "" };
+});
+const contractorTypeItems = computed(() =>
+  maStaffRegistration.value.enabled
+    ? [...contractorTypes, { title: "Managing agent staff", value: MA_STAFF_CONTRACTOR_TYPE }]
+    : contractorTypes
+);
+
 // Has to sit BELOW `siteData`, not beside `hidQrConfiguredReaderId` up at the HID block.
 // `hidQrConfiguredReaderId` reads `hidQrCodePassConfig`, which reads `siteData`, and Vue
 // runs a watcher's source getter the moment `watch()` is called - so declared

package/components/VisitorManagement.vue

@@ -162,7 +162,9 @@
       <template v-slot:item.type-company="{ item }">
         <span class="d-flex align-center ga-2">
           <v-icon icon="mdi-user" size="15" />
-          <span v-if="item.type === 'contractor'" class="text-capitalize">{{
+          <v-chip v-if="item.type === 'contractor' && item.contractorType === 'managing-agent-staff'" size="x-small"
+            color="primary" variant="tonal">MA staff</v-chip>
+          <span v-else-if="item.type === 'contractor'" class="text-capitalize">{{
             formatCamelCaseToWords(item.contractorType)
           }}</span>
           <span v-else class="text-capitalize">{{ formatType(item) }}</span>

package/components/VisitorSearchResultSummary.vue

@@ -26,7 +26,7 @@
       </div>
       <div class="visitor-summary__cell">
         <div class="visitor-summary__label">NRIC</div>
-        <div class="visitor-summary__value">{{ item?.nric || "N/A" }}</div>
+        <div class="visitor-summary__value">{{ maskNRIC(item?.nric) || "N/A" }}</div>
       </div>
     </div>
 
@@ -49,6 +49,7 @@
 </template>
 
 <script setup lang="ts">
+const { maskNRIC } = useUtils();
 const props = defineProps<{
   item: any;
 }>();

package/composables/useCommonPermission.ts

@@ -280,6 +280,16 @@ export function useCommonPermissions() {
         check: true,
         description: "Allows the user to manage work order settings.",
       },
+      // Security Ops site visits. The boundary is one half; the guardhouse
+      // code an Ops Executive scans to open a visit is the other, and it is the
+      // proof the whole module rests on - so this is the right that decides who
+      // may re-register it. In the COMMON catalogue because site settings are
+      // shared across verticals, not only security.
+      "manage-geofence": {
+        check: true,
+        description:
+          "Allows the user to set a site's boundary and register the guardhouse check-in code used for Security Ops site visits.",
+      },
       "manage-billing-and-soa-configuration": {
         check: true,
         description: