@7365admin1/layer-common 4.84.0 → 4.86.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @iservice365/layer-common
 
+## 4.86.0
+
+### Minor Changes
+
+- 4891c16: Security headers on every app (HSTS, nosniff, frame-ancestors/X-Frame-Options, Referrer-Policy, Permissions-Policy, COOP, minimal enforced CSP + full Report-Only CSP), drop `x-powered-by`, explicit `SameSite=Lax` on the session cookies, `sanitizeHtml` for rich text rendered with `v-html`, html2pdf.js 0.14 (jsPDF 4.2.1).
+
+## 4.85.0
+
+### Minor Changes
+
+- e46f7cb: Attendance: Site device mode. Settings switch (new permission attendance-mgmt:manage-site-device-mode, or manage-attendance-settings), "Check in / Check out for someone" on My Attendance with live photo, name and NRIC masked in the browser (only the last 4 characters are sent), private photos in the details dialog, person/NRIC column with duplicate warning, person search and CSV export on the Attendance page.
+
 ## 4.84.0
 
 ### Minor Changes
@@ -1974,11 +1986,11 @@
   `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/AttendanceDetailsDialog.vue

@@ -12,6 +12,24 @@
       <v-card-title class="text-capitalize">Attendance Details</v-card-title>
 
       <v-card-text class="screen-modal__body pa-6">
+        <!-- Site device mode: who was actually checked in, and which account's
+             shared phone took it. Only the masked NRIC is ever shown. -->
+        <v-alert
+          v-if="attendance?.isProxy"
+          type="info"
+          variant="tonal"
+          density="compact"
+          class="mb-4"
+          data-test="attendance-proxy-details"
+        >
+          <div class="font-weight-medium">{{ attendance.proxy?.name }}</div>
+          <div>
+            NRIC {{ attendance.proxy?.nricMasked }}<span v-if="attendance.proxy?.post"> · {{ attendance.proxy.post }}</span>
+          </div>
+          <div class="text-caption">
+            Taken on site device by {{ attendance.takenByName || attendance.userName || "-" }}
+          </div>
+        </v-alert>
         <v-row v-if="attendance" dense>
           <v-col :cols="attendance.checkOut?.timestamp ? 6 : 12">
             <v-row dense>
@@ -48,6 +66,9 @@
                     cover
                   ></v-img>
                 </div>
+                <div v-else-if="photoUrls.checkIn" class="att-dlg__frame">
+                  <v-img :src="photoUrls.checkIn" height="280" width="100%" cover></v-img>
+                </div>
                 <div class="att-dlg__frame att-dlg__frame--empty pa-8 text-center" v-else>
                   <span class="screen-hint att-dlg__meta">No image</span>
                 </div>
@@ -84,6 +105,9 @@
                     cover
                   ></v-img>
                 </div>
+                <div v-else-if="photoUrls.checkOut" class="att-dlg__frame">
+                  <v-img :src="photoUrls.checkOut" height="280" width="100%" cover></v-img>
+                </div>
                 <div class="att-dlg__frame att-dlg__frame--empty pa-8 text-center" v-else>
                   <span class="screen-hint att-dlg__meta">No image</span>
                 </div>
@@ -119,7 +143,27 @@ const props = defineProps({
 const emit = defineEmits(["close"]);
 
 const attendance = ref<Record<string, any> | null>(null);
-const { getMyAttendanceById } = useAttendance();
+const { getMyAttendanceById, getAttendancePhotoUrl } = useAttendance();
+
+// Site device mode photos are private: fetched with the session and shown from
+// a local object URL, never from a public link.
+const photoUrls = reactive<{ checkIn: string; checkOut: string }>({ checkIn: "", checkOut: "" });
+function clearPhotos() {
+  for (const k of ["checkIn", "checkOut"] as const) {
+    if (photoUrls[k]) URL.revokeObjectURL(photoUrls[k]);
+    photoUrls[k] = "";
+  }
+}
+async function loadPrivatePhotos(id: string, row: Record<string, any> | null) {
+  for (const k of ["checkIn", "checkOut"] as const) {
+    if (!row?.[k]?.privatePhoto) continue;
+    try {
+      photoUrls[k] = await getAttendancePhotoUrl(id, k);
+    } catch {
+      photoUrls[k] = "";
+    }
+  }
+}
 const { formatDate } = useUtils();
 const { getFileUrl } = useFile();
 
@@ -136,6 +180,8 @@ watch(
       try {
         const res = await getMyAttendanceById(newId);
         attendance.value = res?.data || res;
+        clearPhotos();
+        void loadPrivatePhotos(newId, attendance.value);
       } catch (err: any) {
         console.error("Failed to load attendance by id", err);
       }
@@ -147,6 +193,7 @@ watch(
 watch(showDialog, (newVal) => {
   if (!newVal) {
     attendance.value = null;
+    clearPhotos();
   }
 });
 </script>

package/components/AttendanceMain.vue

@@ -17,15 +17,68 @@
         <template #actions>
           <!-- Was `color="black"`: a black slab in both themes, and the only
                black surface on the page. Same button, the design's ghost. -->
-          <v-btn
-            v-if="canManageAttendanceSettings"
-            variant="outlined"
-            class="text-none screen-btn-ghost"
-            @click="dialogShowSettings = true"
-          >
-            <v-icon class="mr-2">mdi-cog</v-icon>
-            Settings
-          </v-btn>
+          <div class="d-flex flex-wrap align-center ga-2 w-100">
+            <div class="filter-field">
+              <v-text-field
+                v-model="searchInput"
+                density="compact"
+                placeholder="Search name or NRIC last 4"
+                clearable
+                width="280"
+                append-inner-icon="mdi-magnify"
+                hide-details
+                data-test="attendance-person-search"
+              />
+            </div>
+            <v-spacer />
+            <v-btn
+              variant="outlined"
+              class="text-none screen-btn-ghost"
+              :loading="exporting"
+              data-test="attendance-export-csv"
+              @click="exportCsv"
+            >
+              <v-icon class="mr-2">mdi-download</v-icon>
+              Export CSV
+            </v-btn>
+            <v-btn
+              v-if="canManageAttendanceSettings || canManageSiteDeviceMode"
+              variant="outlined"
+              class="text-none screen-btn-ghost"
+              @click="dialogShowSettings = true"
+            >
+              <v-icon class="mr-2">mdi-cog</v-icon>
+              Settings
+            </v-btn>
+          </div>
+        </template>
+        <!-- Site device mode rows name the PERSON checked in, their masked
+             NRIC, and the shared phone's account that took it. -->
+        <template #item.userName="{ item }">
+          <div v-if="item.isProxy" class="py-1">
+            <div class="font-weight-medium">
+              {{ item.proxyName }}
+              <v-chip
+                v-if="item.suspicious"
+                size="x-small"
+                color="warning"
+                variant="tonal"
+                class="ml-1"
+                prepend-icon="mdi-alert"
+                :title="item.suspiciousReason"
+                data-test="attendance-suspicious"
+              >
+                Check this
+              </v-chip>
+            </div>
+            <div class="text-caption text-medium-emphasis">
+              NRIC {{ item.nricMasked }}<span v-if="item.post"> · {{ item.post }}</span>
+            </div>
+            <div class="text-caption text-medium-emphasis">
+              Taken on site device by {{ item.userName || "-" }}
+            </div>
+          </div>
+          <span v-else>{{ item.userName }}</span>
         </template>
         <template #item.checkInTimestamp="{ item }">
           <span>{{ formatDate(item.checkInTimestamp) }}</span>
@@ -64,6 +117,12 @@
 import useAttendance from "../composables/useAttendance";
 import useWorkerTerm from "../composables/useWorkerTerm";
 import useUtils from "../composables/useUtils";
+import { useAttendancePermission } from "../composables/useAttendancePermission";
+import {
+  ATTENDANCE_CSV_HEADERS,
+  attendanceCsvRow,
+  toCsv,
+} from "../utils/attendance-proxy";
 
 const props = defineProps({
   orgId: { type: String, default: "" },
@@ -77,6 +136,7 @@ const props = defineProps({
 const canViewAllAttendance = computed(() => props.canViewAllAttendance);
 const canViewAttendanceDetails = computed(() => props.canViewAttendanceDetails);
 const canManageAttendanceSettings = computed(() => props.canManageAttendanceSettings);
+const { canManageSiteDeviceMode } = useAttendancePermission();
 
 const submitting = ref(false);
 const page = ref(1);
@@ -93,7 +153,7 @@ const headers = [
   { title: "Total Hours", value: "totalHours" },
 ];
 
-const { getAttendances } = useAttendance();
+const { getAttendances, attendancePhotoPath } = useAttendance();
 const { formatDate } = useUtils();
 
 function calculateTotalHours(attendance: any): string {
@@ -154,6 +214,40 @@ async function handleRowClick(data: any) {
   dialogShowMoreActions.value = true;
 }
 
+/**
+ * Export: every row matching the current search (up to 2000), with the person,
+ * masked NRIC, the photo links (they open only for a signed-in account with the
+ * right to see them) and the duplicate warning.
+ */
+const exporting = ref(false);
+async function exportCsv() {
+  exporting.value = true;
+  try {
+    const res: any = await getAttendances({
+      page: 1,
+      limit: 2000,
+      search: searchInput.value ?? "",
+      site: props.site,
+      serviceType: props.serviceType,
+    });
+    const rows = (res?.items ?? []).map((item: any) =>
+      attendanceCsvRow(
+        { ...item, totalHours: calculateTotalHours(item) },
+        (id, which) => `${window.location.origin}${attendancePhotoPath(id, which)}`,
+        (d) => formatDate(d as any)
+      )
+    );
+    const blob = new Blob([toCsv(ATTENDANCE_CSV_HEADERS, rows)], { type: "text/csv;charset=utf-8" });
+    const link = document.createElement("a");
+    link.href = URL.createObjectURL(blob);
+    link.download = `attendance-${new Date().toISOString().slice(0, 10)}.csv`;
+    link.click();
+    URL.revokeObjectURL(link.href);
+  } finally {
+    exporting.value = false;
+  }
+}
+
 const onSettingsSaved = async (payload: any) => {
   // TODO: Implement API call to save settings
   await getAttendancesRefresh();

package/components/AttendanceProxyDialog.vue

@@ -0,0 +1,391 @@
+<template>
+  <v-dialog v-model="showDialog" max-width="520" persistent>
+    <v-card class="screen-modal" data-test="attendance-proxy-dialog">
+      <v-card-title>
+        {{ action === "checkIn" ? "Check in for someone" : "Check out for someone" }}
+      </v-card-title>
+
+      <v-card-text class="screen-modal__body">
+        <!-- 1. What are we doing? Two big choices. -->
+        <v-btn-toggle
+          v-model="action"
+          mandatory
+          divided
+          class="w-100 mb-4 proxy__toggle"
+          :disabled="submitting"
+        >
+          <v-btn value="checkIn" class="flex-grow-1 text-none" prepend-icon="mdi-login">Check in</v-btn>
+          <v-btn value="checkOut" class="flex-grow-1 text-none" prepend-icon="mdi-logout">Check out</v-btn>
+        </v-btn-toggle>
+
+        <!-- Check-out: today's open check-ins on this device, tap to pick. -->
+        <div v-if="action === 'checkOut'" class="mb-4">
+          <InputLabel title="Checked in today on this device" />
+          <div v-if="openLoading" class="screen-hint">Loading...</div>
+          <div v-else-if="openItems.length === 0" class="screen-hint">
+            Nobody is checked in on this device today. You can still type the name and NRIC below.
+          </div>
+          <v-list v-else density="compact" class="proxy__open" data-test="attendance-proxy-open">
+            <v-list-item
+              v-for="item in openItems"
+              :key="item._id"
+              :active="picked === item._id"
+              @click="pick(item)"
+            >
+              <v-list-item-title>{{ item.name }} · {{ item.nricMasked }}</v-list-item-title>
+              <v-list-item-subtitle>
+                In at {{ formatTime(item.checkInTimestamp) }}<span v-if="item.post"> · {{ item.post }}</span>
+              </v-list-item-subtitle>
+            </v-list-item>
+          </v-list>
+        </div>
+
+        <!-- 2. Live photo (required). -->
+        <InputLabel title="Photo of the person" required />
+        <v-card variant="outlined" class="mb-1 proxy__stage">
+          <video
+            v-show="cameraOn && !photoPreview"
+            ref="videoEl"
+            autoplay
+            playsinline
+            muted
+            class="proxy__media"
+          />
+          <img v-if="photoPreview" :src="photoPreview" class="proxy__media" alt="Captured photo" />
+          <div v-if="!cameraOn && !photoPreview" class="proxy__placeholder">
+            <v-icon size="48" class="mb-2">mdi-camera</v-icon>
+            <span>{{ cameraError || "Starting the camera..." }}</span>
+          </div>
+        </v-card>
+        <div class="d-flex ga-2 mb-4">
+          <v-btn
+            v-if="!photoPreview"
+            class="text-none screen-btn-primary flex-grow-1"
+            variant="flat"
+            prepend-icon="mdi-camera"
+            :disabled="!cameraOn || submitting"
+            data-test="attendance-proxy-capture"
+            @click="capture"
+          >
+            Take photo
+          </v-btn>
+          <v-btn
+            v-else
+            class="text-none screen-btn-ghost flex-grow-1"
+            variant="flat"
+            prepend-icon="mdi-camera-retake"
+            :disabled="submitting"
+            @click="retake"
+          >
+            Retake
+          </v-btn>
+        </div>
+
+        <!-- 3. Who. -->
+        <InputLabel title="Name" required />
+        <v-text-field
+          v-model="name"
+          density="comfortable"
+          placeholder="e.g. Tan Ah Kow"
+          :error-messages="touched ? nameError(name) : ''"
+          :disabled="submitting"
+          data-test="attendance-proxy-name"
+        />
+
+        <InputLabel title="NRIC / FIN" required />
+        <v-text-field
+          v-model="nric"
+          density="comfortable"
+          placeholder="Full number or just the last 4 (e.g. 932P)"
+          autocomplete="off"
+          :error-messages="touched && !parsed.ok ? parsed.error : ''"
+          :hint="parsed.ok ? `Will be saved as ${parsed.masked}` : ''"
+          persistent-hint
+          :disabled="submitting"
+          data-test="attendance-proxy-nric"
+        />
+
+        <template v-if="action === 'checkIn'">
+          <InputLabel title="Shift / post (optional)" class="mt-2" />
+          <v-text-field
+            v-model="post"
+            density="comfortable"
+            placeholder="e.g. Main gate, night shift"
+            :error-messages="touched ? postError(post) : ''"
+            :disabled="submitting"
+          />
+        </template>
+
+        <v-alert type="info" variant="tonal" density="compact" icon="mdi-shield-lock-outline" class="mt-2">
+          Only the last 4 characters of the NRIC are saved. The photo is kept private and
+          only people allowed to see attendance can open it.
+        </v-alert>
+
+        <v-alert v-if="error" type="error" variant="tonal" density="compact" class="mt-3" closable @click:close="error = ''">
+          {{ error }}
+        </v-alert>
+      </v-card-text>
+
+      <div class="screen-modal__footer">
+        <v-btn class="text-none screen-btn-ghost" variant="flat" :disabled="submitting" @click="close">
+          Cancel
+        </v-btn>
+        <v-btn
+          class="text-none screen-btn-primary"
+          variant="flat"
+          :prepend-icon="action === 'checkIn' ? 'mdi-login' : 'mdi-logout'"
+          :loading="submitting"
+          data-test="attendance-proxy-submit"
+          @click="submit"
+        >
+          {{ action === "checkIn" ? "Check in" : "Check out" }}
+        </v-btn>
+      </div>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script setup lang="ts">
+import useAttendance from "../composables/useAttendance";
+import { nameError, parseNric, postError, proxyPayload } from "../utils/attendance-proxy";
+
+const showDialog = defineModel({ type: Boolean, default: false });
+const props = defineProps({
+  site: { type: String, required: true },
+  serviceType: { type: String, default: "" },
+  initialAction: { type: String as () => "checkIn" | "checkOut", default: "checkIn" },
+});
+const emit = defineEmits<{ (e: "saved", message: string): void; (e: "close"): void }>();
+
+const { uploadAttendancePhoto, checkIn, proxyCheckOut, getOpenProxyCheckIns } = useAttendance();
+
+const action = ref<"checkIn" | "checkOut">(props.initialAction);
+const name = ref("");
+const nric = ref("");
+const post = ref("");
+const touched = ref(false);
+const submitting = ref(false);
+const error = ref("");
+const parsed = computed(() => parseNric(nric.value));
+
+const openItems = ref<Array<Record<string, any>>>([]);
+const openLoading = ref(false);
+const picked = ref("");
+
+const videoEl = ref<HTMLVideoElement | null>(null);
+const stream = ref<MediaStream | null>(null);
+const cameraOn = ref(false);
+const cameraError = ref("");
+const photoFile = ref<File | null>(null);
+const photoPreview = ref("");
+
+function formatTime(ts: unknown) {
+  return ts ? new Date(String(ts)).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }) : "-";
+}
+
+function pick(item: Record<string, any>) {
+  picked.value = item._id;
+  name.value = item.name ?? "";
+  nric.value = item.nricLast4 ?? "";
+}
+
+async function loadOpen() {
+  openLoading.value = true;
+  try {
+    const res = await getOpenProxyCheckIns(props.site, props.serviceType);
+    openItems.value = res?.items ?? [];
+  } catch {
+    openItems.value = [];
+  } finally {
+    openLoading.value = false;
+  }
+}
+
+async function startCamera() {
+  cameraError.value = "";
+  try {
+    if (!navigator.mediaDevices?.getUserMedia) throw new Error("unsupported");
+    stream.value = await navigator.mediaDevices.getUserMedia({
+      video: { facingMode: "user", width: { ideal: 1280 }, height: { ideal: 720 } },
+      audio: false,
+    });
+    cameraOn.value = true;
+    await nextTick();
+    if (videoEl.value) {
+      videoEl.value.srcObject = stream.value;
+      await videoEl.value.play().catch(() => undefined);
+    }
+  } catch (err: any) {
+    cameraOn.value = false;
+    cameraError.value =
+      err?.name === "NotAllowedError"
+        ? "Camera access is blocked. Allow the camera in your browser settings, then reopen this window."
+        : "No camera could be started on this device.";
+  }
+}
+
+function stopCamera() {
+  stream.value?.getTracks().forEach((t) => t.stop());
+  stream.value = null;
+  cameraOn.value = false;
+}
+
+async function capture() {
+  const video = videoEl.value;
+  if (!video) return;
+  const canvas = document.createElement("canvas");
+  canvas.width = video.videoWidth;
+  canvas.height = video.videoHeight;
+  canvas.getContext("2d")?.drawImage(video, 0, 0);
+  const blob = await new Promise<Blob | null>((r) => canvas.toBlob(r, "image/jpeg", 0.8));
+  if (!blob) return;
+  photoFile.value = new File([blob], "attendance.jpg", { type: "image/jpeg" });
+  photoPreview.value = URL.createObjectURL(blob);
+  stopCamera();
+}
+
+function retake() {
+  if (photoPreview.value) URL.revokeObjectURL(photoPreview.value);
+  photoPreview.value = "";
+  photoFile.value = null;
+  void startCamera();
+}
+
+/** Location if the browser gives one within 4 s; never blocks the check-in. */
+function bestEffortLocation(): Promise<{ latitude: number; longitude: number } | undefined> {
+  return new Promise((resolve) => {
+    if (!navigator.geolocation) return resolve(undefined);
+    const timer = setTimeout(() => resolve(undefined), 4000);
+    navigator.geolocation.getCurrentPosition(
+      (p) => {
+        clearTimeout(timer);
+        resolve({ latitude: p.coords.latitude, longitude: p.coords.longitude });
+      },
+      () => {
+        clearTimeout(timer);
+        resolve(undefined);
+      },
+      { enableHighAccuracy: true, timeout: 4000, maximumAge: 60000 }
+    );
+  });
+}
+
+async function submit() {
+  touched.value = true;
+  error.value = "";
+  if (!photoFile.value) return void (error.value = "Take the person's photo first.");
+  if (nameError(name.value) || !parsed.value.ok || (action.value === "checkIn" && postError(post.value))) return;
+
+  // Masked HERE: from this line on only the last 4 (+ prefix) exist.
+  const proxy = proxyPayload({ name: name.value, nric: nric.value, post: post.value });
+  const shown = parsed.value.ok ? parsed.value.masked : "";
+  nric.value = "";
+
+  submitting.value = true;
+  try {
+    const [{ id: privatePhoto }, location] = await Promise.all([
+      uploadAttendancePhoto(props.site, photoFile.value, props.serviceType),
+      bestEffortLocation(),
+    ]);
+    const timestamp = new Date().toISOString();
+    if (action.value === "checkIn") {
+      await checkIn(
+        props.site,
+        { checkIn: { timestamp, privatePhoto, ...(location ? { location } : {}) }, proxy } as any,
+        props.serviceType
+      );
+    } else {
+      await proxyCheckOut(
+        props.site,
+        {
+          proxy: { name: proxy.name, nricLast4: proxy.nricLast4 },
+          checkOut: { timestamp, privatePhoto, ...(location ? { location } : {}) },
+        },
+        props.serviceType
+      );
+    }
+    emit(
+      "saved",
+      `${proxy.name} (${shown}) ${action.value === "checkIn" ? "checked in" : "checked out"} at ${formatTime(timestamp)}.`
+    );
+    close();
+  } catch (err: any) {
+    error.value = err?.data?.message || "Could not save. Please check the connection and try again.";
+  } finally {
+    submitting.value = false;
+  }
+}
+
+function reset() {
+  name.value = "";
+  nric.value = "";
+  post.value = "";
+  touched.value = false;
+  error.value = "";
+  picked.value = "";
+  if (photoPreview.value) URL.revokeObjectURL(photoPreview.value);
+  photoPreview.value = "";
+  photoFile.value = null;
+}
+
+function close() {
+  stopCamera();
+  reset();
+  showDialog.value = false;
+  emit("close");
+}
+
+watch(showDialog, (open) => {
+  if (open) {
+    action.value = props.initialAction;
+    void startCamera();
+    void loadOpen();
+  } else {
+    stopCamera();
+  }
+});
+
+watch(action, (next) => {
+  if (next === "checkOut") void loadOpen();
+});
+
+onBeforeUnmount(stopCamera);
+</script>
+
+<style scoped>
+.proxy__stage {
+  position: relative;
+  height: 260px;
+  overflow: hidden;
+  border-radius: var(--r-inner);
+  border-color: var(--border);
+}
+.proxy__media {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+  background: #000;
+}
+.proxy__placeholder {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  padding: 16px;
+  background: var(--thead);
+  color: var(--muted);
+  font-size: var(--fs-cell);
+}
+.proxy__open {
+  border: 1px solid var(--border);
+  border-radius: var(--r-inner);
+  max-height: 200px;
+  overflow-y: auto;
+}
+.proxy__toggle .v-btn {
+  height: 48px;
+}
+</style>

package/components/AttendanceSettingsDialog.vue

@@ -18,6 +18,29 @@
           {{ error }}
         </v-alert>
 
+        <!-- Site device mode (owner request 2026-10-01). Saved on its own,
+             straight away, through its own endpoint - the Update button below
+             never touches it. -->
+        <div v-if="canManageSiteDeviceMode" class="attendance-settings__device mb-4">
+          <v-switch
+            v-model="siteDeviceMode"
+            label="Site device mode"
+            color="accent"
+            inset
+            hide-details
+            :loading="deviceModeSaving"
+            :disabled="deviceModeSaving || loading"
+            data-test="site-device-mode-switch"
+            @update:model-value="onDeviceModeToggle"
+          />
+          <span class="attendance-settings__hint">
+            {{ siteDeviceMode ? "ON" : "OFF" }} for this site. When on, one shared
+            phone at this site can check staff in and out: each person takes a photo
+            and types their name and NRIC. Only the last 4 characters of the NRIC are
+            saved. This switch saves straight away.
+          </span>
+        </div>
+
         <v-form ref="formRef" v-model="valid" @submit.prevent="onSubmit">
           <v-row dense>
             <v-col cols="12">
@@ -158,7 +181,28 @@ const isMapSearchVisible = ref(false);
 
 const radiusInMeters = computed(() => radius.value * 1609.34);
 
-const { getAttendanceSettings, updateAttendanceSettings } = useAttendance();
+const { getAttendanceSettings, updateAttendanceSettings, setSiteDeviceMode } = useAttendance();
+const { canManageSiteDeviceMode } = useAttendancePermission();
+
+const siteDeviceMode = ref(false);
+const deviceModeSaving = ref(false);
+
+async function onDeviceModeToggle(next: boolean | null) {
+  const enabled = next === true;
+  deviceModeSaving.value = true;
+  try {
+    const res = await setSiteDeviceMode(props.site, enabled, props.serviceType);
+    siteDeviceMode.value = res?.siteDeviceMode === true;
+    snackbarText.value = res?.message || (enabled ? "Site device mode is ON." : "Site device mode is OFF.");
+    snackbarColor.value = "success";
+    snackbar.value = true;
+  } catch (err: any) {
+    siteDeviceMode.value = !enabled;
+    error.value = err?.data?.message || "Could not change Site device mode. Please try again.";
+  } finally {
+    deviceModeSaving.value = false;
+  }
+}
 
 const postalCode = ref("");
 const country = ref("");
@@ -197,6 +241,7 @@ watchEffect(() => {
   }
 
   if (getAttendanceSettingsReq.value) {
+    siteDeviceMode.value = getAttendanceSettingsReq.value.siteDeviceMode === true;
     isGeofencingEnabled.value =
       getAttendanceSettingsReq.value.isGeofencingEnabled || false;
 
@@ -391,6 +436,13 @@ watch(showDialog, (newVal) => {
   color: var(--text2);
 }
 
+/* Site device mode: its own framed block, because it saves on its own. */
+.attendance-settings__device {
+  padding: 12px 14px;
+  border: 1px solid var(--border);
+  border-radius: var(--r-inner);
+}
+
 /* Was a `variant="flat"` v-card, i.e. a second card inside the modal card. It
    is a frame around the QR, so it takes the design's inner surface. */
 .attendance-settings__qr {

package/components/BulletinBoardView.vue

@@ -19,7 +19,7 @@
               <v-col class="font-weight-bold">{{ label }}:</v-col>
 
               <v-col cols="9" class="px-10">
-                <span v-if="key === 'content'" v-html="getFieldValue(key)" />
+                <span v-if="key === 'content'" v-html="sanitizeHtml(getFieldValue(key))" />
                 <span v-else-if="key === 'noExpiration'">
                   <BulletinExpirationChip
                     :value="getFieldValue(key) as boolean"

package/components/MyAttendanceMain.vue

@@ -1,5 +1,31 @@
 <template>
   <v-row no-gutters align="center" justify="center">
+    <!-- Site device mode is ON for this site: this shared phone can check other
+         people in and out (owner request 2026-10-01). -->
+    <v-col v-if="siteDeviceMode && canCheckInOut" cols="12" class="mb-4">
+      <v-alert
+        type="info"
+        variant="tonal"
+        icon="mdi-cellphone-check"
+        data-test="site-device-mode-banner"
+      >
+        <div class="font-weight-medium">Site device mode is on</div>
+        <div class="mb-3">
+          This phone can check staff in and out for them: take their photo, type their
+          name and NRIC. Only the last 4 characters of the NRIC are saved.
+        </div>
+        <v-btn
+          class="text-none screen-btn-primary"
+          size="large"
+          variant="flat"
+          prepend-icon="mdi-account-clock"
+          data-test="attendance-proxy-open-btn"
+          @click="dialogShowProxy = true"
+        >
+          Check in / Check out for someone
+        </v-btn>
+      </v-alert>
+    </v-col>
     <v-col cols="12" lg="12">
       <TableMain
         title="Attendance Records"
@@ -71,6 +97,14 @@
     @close="dialogShowMoreActions = false"
   />
 
+  <AttendanceProxyDialog
+    v-if="siteDeviceMode"
+    v-model="dialogShowProxy"
+    :site="props.site"
+    :service-type="props.serviceType"
+    @saved="onProxySaved"
+  />
+
   <Snackbar v-model="messageSnackbar" :text="message" :color="messageColor" />
 </template>
 
@@ -107,7 +141,31 @@ const headers = [
   { title: "Total Hours", value: "totalHours" },
 ];
 
-const { getMyAttendances, checkIn, checkOut } = useAttendance();
+const { getMyAttendances, checkIn, checkOut, getAttendanceSettings } = useAttendance();
+
+// Site device mode: read once per site. A failed read means OFF (today's flow).
+const siteDeviceMode = ref(false);
+const dialogShowProxy = ref(false);
+watch(
+  () => [props.site, props.serviceType],
+  async () => {
+    siteDeviceMode.value = false;
+    if (!props.site) return;
+    try {
+      const res: any = await getAttendanceSettings(props.site, props.serviceType);
+      siteDeviceMode.value = res?.siteDeviceMode === true;
+    } catch {
+      siteDeviceMode.value = false;
+    }
+  },
+  { immediate: true }
+);
+
+function onProxySaved(text: string) {
+  message.value = text;
+  messageColor.value = "success";
+  messageSnackbar.value = true;
+}
 const { formatDate } = useUtils();
 
 const dialogShowMoreActions = ref(false);
@@ -170,7 +228,7 @@ watchEffect(() => {
     const today = new Date().toISOString().split("T")[0];
     todayAttendance.value =
       getMyAttendancesReq.value.items.find((item: any) => {
-        if (!item.checkInTimestamp) return false;
+        if (!item.checkInTimestamp || item.isProxy) return false;
         const itemDate = new Date(item.checkInTimestamp)
           .toISOString()
           .split("T")[0];

package/composables/useAttendance.ts

@@ -81,7 +81,60 @@ export default function useAttendance() {
     );
   }
 
+  // ---- Site device mode (check in/out for someone on a shared site phone) ----
+
+  function setSiteDeviceMode(site: string, enabled: boolean, serviceType: string = "") {
+    return useNuxtApp().$api<{ message: string; siteDeviceMode: boolean }>(
+      `/api/attendance-settings/site/${site}/device-mode`,
+      { method: "PUT", body: { serviceType, enabled } }
+    );
+  }
+
+  /** The person's photo, stored PRIVATELY by the server (never a public URL). */
+  function uploadAttendancePhoto(site: string, file: File, serviceType: string = "") {
+    const form = new FormData();
+    form.append("file", file);
+    return useNuxtApp().$api<{ id: string }>(`/api/attendances/site/${site}/photo`, {
+      method: "POST",
+      query: { serviceType },
+      body: form,
+    });
+  }
+
+  function proxyCheckOut(site: string, body: Record<string, any>, serviceType: string = "") {
+    return useNuxtApp().$api<{ message: string; id: string }>(
+      `/api/attendances/site/${site}/proxy-check-out`,
+      { method: "POST", body: { ...body, serviceType } }
+    );
+  }
+
+  function getOpenProxyCheckIns(site: string, serviceType: string = "") {
+    return useNuxtApp().$api<{ items: Array<Record<string, any>> }>(
+      `/api/attendances/site/${site}/proxy-open`,
+      { method: "GET", query: { serviceType } }
+    );
+  }
+
+  /** Path of the private photo; read through $api (session), never a public link. */
+  function attendancePhotoPath(id: string, which: "checkIn" | "checkOut") {
+    return `/api/attendances/id/${id}/photo/${which}`;
+  }
+
+  async function getAttendancePhotoUrl(id: string, which: "checkIn" | "checkOut") {
+    const blob = await useNuxtApp().$api<Blob>(attendancePhotoPath(id, which), {
+      method: "GET",
+      responseType: "blob",
+    });
+    return URL.createObjectURL(blob);
+  }
+
   return {
+    setSiteDeviceMode,
+    uploadAttendancePhoto,
+    proxyCheckOut,
+    getOpenProxyCheckIns,
+    attendancePhotoPath,
+    getAttendancePhotoUrl,
     getAttendances,
     getMyAttendances,
     getMyAttendanceById,

package/composables/useAttendancePermission.ts

@@ -57,6 +57,30 @@ export function useAttendancePermission() {
     );
   });
 
+  // Site device mode switch. Widened, never swapped: the new key OR the existing
+  // settings key OR `*` - the same three the server accepts (core
+  // `SITE_DEVICE_MODE_PERMISSIONS`), so an admin who manages attendance
+  // settings today can use it without a role change.
+  const canManageSiteDeviceMode = computed(() => {
+    if (!userAppRole.value) return false;
+    if (moduleDenied("attendance-mgmt")) return false;
+    if (userAppRole.value.permissions.includes("*")) return true;
+    return (
+      hasPermission(
+        userAppRole.value,
+        permissions,
+        "attendance-mgmt",
+        "manage-site-device-mode"
+      ) ||
+      hasPermission(
+        userAppRole.value,
+        permissions,
+        "attendance-mgmt",
+        "manage-attendance-settings"
+      )
+    );
+  });
+
   const canViewOwnAttendance = computed(() => {
     if (!userAppRole.value) return false;
     if (moduleDenied("my-attendance")) return false;
@@ -85,6 +109,7 @@ export function useAttendancePermission() {
     canViewAllAttendance,
     canViewAttendanceDetails,
     canManageAttendanceSettings,
+    canManageSiteDeviceMode,
     canViewOwnAttendance,
     canCheckInOut,
   };

package/composables/useCleaningPermission.ts

@@ -221,6 +221,11 @@ export default function useCleaningPermission() {
         description:
           "Allows the user to configure and manage attendance settings.",
       },
+      "manage-site-device-mode": {
+        check: true,
+        description:
+          "Allows the user to turn Site device mode on or off: one shared phone at the site checks staff in and out with a photo, their name and the last 4 characters of their NRIC.",
+      },
     },
     // my attendance permissions
     "my-attendance": {

package/composables/useLandscapingPermission.ts

@@ -198,6 +198,11 @@ export default function useLandscapingPermission() {
         check: true,
         description: "Allows the user to configure and manage attendance settings.",
       },
+      "manage-site-device-mode": {
+        check: true,
+        description:
+          "Allows the user to turn Site device mode on or off: one shared phone at the site checks staff in and out with a photo, their name and the last 4 characters of their NRIC.",
+      },
     },
     // my attendance permissions
     "my-attendance": {

package/composables/usePestControlPermission.ts

@@ -213,6 +213,11 @@ export default function usePestControlPermission() {
         check: true,
         description: "Allows the user to configure and manage attendance settings.",
       },
+      "manage-site-device-mode": {
+        check: true,
+        description:
+          "Allows the user to turn Site device mode on or off: one shared phone at the site checks staff in and out with a photo, their name and the last 4 characters of their NRIC.",
+      },
     },
     // my attendance permissions
     "my-attendance": {

package/composables/usePoolMaintenancePermission.ts

@@ -213,6 +213,11 @@ export default function usePoolMaintenancePermission() {
         check: true,
         description: "Allows the user to configure and manage attendance settings.",
       },
+      "manage-site-device-mode": {
+        check: true,
+        description:
+          "Allows the user to turn Site device mode on or off: one shared phone at the site checks staff in and out with a photo, their name and the last 4 characters of their NRIC.",
+      },
     },
     // my attendance permissions
     "my-attendance": {

package/composables/useSecurityPermission.ts

@@ -491,6 +491,11 @@ export default function useSecurityPermission() {
         description:
           "Allows the user to configure and manage attendance settings.",
       },
+      "manage-site-device-mode": {
+        check: true,
+        description:
+          "Allows the user to turn Site device mode on or off: one shared phone at the site checks staff in and out with a photo, their name and the last 4 characters of their NRIC.",
+      },
     },
 
     "my-attendance": {

package/constants/permissions.ts

@@ -206,6 +206,7 @@ export const PERMISSIONS = {
     "see-all-attendance",
     "see-attendance-details",
     "manage-attendance-settings",
+    "manage-site-device-mode",
   ],
   "my-attendance": ["see-own-attendance", "check-in-out"],
   toilet_locations: ["create-toilet-location"],

package/nuxt.config.ts

@@ -1,8 +1,23 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 import vuetify, { transformAssetUrls } from "vite-plugin-vuetify";
+import { SECURITY_HEADERS } from "./utils/security-headers";
 export default defineNuxtConfig({
   ssr: false,
   devtools: { enabled: false },
+
+  // Security headers for every app that extends this layer: the HTML shell gets
+  // them from Nitro, the static files from the `_headers` file the Cloudflare
+  // preset writes from these same rules. See utils/security-headers.ts.
+  routeRules: {
+    "/**": { headers: SECURITY_HEADERS },
+    // Stored files read with the signed-in session (API-core
+    // GET /api/files/object/<key>) instead of the public CDN. Unused until an
+    // app's API_DO_STORAGE_ENDPOINT points at /api/storage/<folder>; that switch
+    // goes with SPACES_PRIVATE_PREFIXES - see the storage runbook.
+    ...(process.env.API_CORE
+      ? { "/api/storage/**": { proxy: `${process.env.API_CORE}/api/files/object/**` } }
+      : {}),
+  },
   build: {
     transpile: ["vuetify"],
   },
@@ -48,6 +63,9 @@ export default defineNuxtConfig({
       cookieConfig: {
         domain: (process.env.DOMAIN as string) ?? "localhost",
         secure: true,
+        // Explicit, not the browser default: the API also reads `sid` from the
+        // cookie, so a cross-site form post must never carry it (CSRF).
+        sameSite: "lax",
         maxAge: 30 * 24 * 60 * 60,
       },
       APP: (process.env.APP as string) ?? "App",

package/package.json

@@ -2,7 +2,7 @@
   "name": "@7365admin1/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "4.84.0",
+  "version": "4.86.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.",
@@ -22,6 +22,7 @@
     "pages",
     "plugins",
     "public",
+    "server",
     "services",
     "types",
     "utils",
@@ -57,8 +58,9 @@
     "@mdi/font": "^7.4.47",
     "@types/qrcode": "^1.5.6",
     "ckeditor5": "47.4.0",
+    "dompurify": "^3.3.1",
     "hls.js": "^1.6.13",
-    "html2pdf.js": "^0.10.2",
+    "html2pdf.js": "^0.14.0",
     "html5-qrcode": "^2.3.8",
     "moment-timezone": "^0.6.0",
     "nuxt-signature-pad": "^1.8.0",

package/server/plugins/no-powered-by.ts

@@ -0,0 +1,7 @@
+// Nuxt's renderer stamps `x-powered-by: Nuxt` on the HTML shell. It tells a
+// scanner the framework for free and helps nobody, so drop it.
+export default defineNitroPlugin((nitroApp) => {
+  nitroApp.hooks.hook("render:response", (response) => {
+    if (response?.headers) delete response.headers["x-powered-by"];
+  });
+});

package/types/attendance.d.ts

@@ -11,9 +11,11 @@ declare type TAttendance = {
 declare type TAttendanceCheckIn = {
   checkIn: {
     timestamp: string;
-    location: TAttendanceLocation;
+    location?: TAttendanceLocation;
     img?: string;
+    privatePhoto?: string;
   };
+  proxy?: TAttendanceProxy;
 };
 
 declare type TAttendanceCheckOut = {
@@ -35,4 +37,14 @@ declare type TAttendanceSettings = {
   location?: TAttendanceLocation;
   isGeofencingEnabled?: boolean;
   mile?: number;
+  /** Site device mode: one shared phone may check staff in/out (default OFF). */
+  siteDeviceMode?: boolean;
+};
+
+/** Who a Site device mode check-in is for. Never the full NRIC. */
+declare type TAttendanceProxy = {
+  name: string;
+  nricLast4: string;
+  nricPrefix?: string;
+  post?: string;
 };

package/utils/attendance-proxy.ts

@@ -0,0 +1,110 @@
+/**
+ * Site device mode (owner request 2026-10-01): one shared phone at a site checks
+ * a person in or out with a photo, their name and their NRIC/FIN.
+ *
+ * Privacy (Singapore PDPA): the full NRIC is masked HERE, in the browser,
+ * before anything is sent. Only the last 4 characters leave the device, plus
+ * the prefix letter when the full number was typed, so the record can be shown
+ * as "G****932P" (owner's display rule); last 4 only is shown as "****932P".
+ */
+
+export const FULL_NRIC_RE = /^[STFGM]\d{7}[A-Z]$/;
+export const NRIC_LAST4_RE = /^\d{3}[A-Z]$/;
+const FULL_NRIC_ANYWHERE_RE = /[STFGM]\d{7}[A-Z]/i;
+
+export type TParsedNric =
+  | { ok: true; nricLast4: string; nricPrefix: string; masked: string; typedFull: boolean }
+  | { ok: false; error: string };
+
+/** Full NRIC/FIN or just its last 4, any case, spaces ignored. */
+export function parseNric(input: unknown): TParsedNric {
+  const value = String(input ?? "").replace(/\s+/g, "").toUpperCase();
+  if (!value) return { ok: false, error: "Type the NRIC/FIN, or just its last 4 characters (e.g. 932P)." };
+  if (FULL_NRIC_RE.test(value)) {
+    const nricLast4 = value.slice(-4);
+    const nricPrefix = value[0];
+    return { ok: true, nricLast4, nricPrefix, masked: `${nricPrefix}****${nricLast4}`, typedFull: true };
+  }
+  if (NRIC_LAST4_RE.test(value)) {
+    return { ok: true, nricLast4: value, nricPrefix: "", masked: `****${value}`, typedFull: false };
+  }
+  return {
+    ok: false,
+    error: "That doesn't look like an NRIC/FIN. Type the full number (e.g. S1234567D) or just the last 4 (e.g. 567D).",
+  };
+}
+
+/** Empty string when fine, otherwise the sentence to show. */
+export function nameError(input: unknown): string {
+  const value = String(input ?? "").trim();
+  if (!value) return "Type the person's name.";
+  if (FULL_NRIC_ANYWHERE_RE.test(value)) return "Please type the NRIC in the NRIC box, not in the name.";
+  if (value.length < 2) return "Type the person's full name.";
+  if (value.length > 80) return "The name is too long (80 characters at most).";
+  return "";
+}
+
+export function postError(input: unknown): string {
+  const value = String(input ?? "").trim();
+  if (FULL_NRIC_ANYWHERE_RE.test(value)) return "Please don't type an NRIC in Shift / post.";
+  if (value.length > 80) return "Shift / post is too long (80 characters at most).";
+  return "";
+}
+
+/** What is sent to the server. Never contains the full NRIC. */
+export function proxyPayload(input: { name: string; nric: string; post?: string }) {
+  const parsed = parseNric(input.nric);
+  if (!parsed.ok) throw new Error(parsed.error);
+  const name = String(input.name).trim().replace(/\s+/g, " ");
+  const post = String(input.post ?? "").trim();
+  return {
+    name,
+    nricLast4: parsed.nricLast4,
+    ...(parsed.nricPrefix ? { nricPrefix: parsed.nricPrefix } : {}),
+    ...(post ? { post } : {}),
+  };
+}
+
+/** CSV cell: quoted, and a leading = + - @ neutralised so a spreadsheet never runs it. */
+function csvCell(value: unknown): string {
+  let text = value === null || value === undefined ? "" : String(value);
+  if (/^[=+\-@\t\r]/.test(text)) text = `'${text}`;
+  return `"${text.replace(/"/g, '""')}"`;
+}
+
+export function toCsv(headers: string[], rows: unknown[][]): string {
+  return [headers, ...rows].map((row) => row.map(csvCell).join(",")).join("\r\n");
+}
+
+/** One export row for an attendance list item (web Attendance page). */
+export function attendanceCsvRow(
+  item: Record<string, any>,
+  photoLink: (id: string, which: "checkIn" | "checkOut") => string,
+  formatDate: (d: unknown) => string,
+): unknown[] {
+  return [
+    item.isProxy ? item.proxyName : item.userName,
+    item.isProxy ? item.nricMasked : "",
+    item.isProxy ? item.post ?? "" : "",
+    item.isProxy ? `Site device (${item.userName ?? ""})` : "Own account",
+    item.checkInTimestamp ? formatDate(item.checkInTimestamp) : "",
+    item.checkOutTimestamp ? formatDate(item.checkOutTimestamp) : "",
+    item.totalHours ?? "",
+    item.hasCheckInPhoto ? photoLink(String(item._id), "checkIn") : "",
+    item.hasCheckOutPhoto ? photoLink(String(item._id), "checkOut") : "",
+    item.suspicious ? item.suspiciousReason : "",
+  ];
+}
+
+export const ATTENDANCE_CSV_HEADERS = [
+  "Person",
+  "NRIC (last 4)",
+  "Shift / post",
+  "Taken on",
+  "Check in",
+  "Check out",
+  "Total hours",
+  "Check-in photo",
+  "Check-out photo",
+  "Check this",
+];

package/utils/sanitize-html.ts

@@ -0,0 +1,16 @@
+import DOMPurify from "dompurify";
+
+/**
+ * The one way rich text typed by a user (announcements, facility descriptions,
+ * policies) reaches `v-html`. Keeps formatting, drops scripts, event handlers,
+ * `javascript:` links and embedded frames/forms. Browser-only (the apps are
+ * `ssr: false`); without a DOM it returns "" rather than unsanitised HTML.
+ */
+export function sanitizeHtml(html: unknown): string {
+  if (html === null || html === undefined || html === "") return "";
+  if (typeof window === "undefined" || !DOMPurify.isSupported) return "";
+  return DOMPurify.sanitize(String(html), {
+    USE_PROFILES: { html: true },
+    FORBID_TAGS: ["style", "form", "input", "button", "iframe", "object", "embed"],
+  });
+}

package/utils/security-headers.ts

@@ -0,0 +1,52 @@
+/**
+ * Response headers every web app sends, on the HTML shell (Nitro route rules)
+ * and on the static files (nitro writes the same rules into Cloudflare's
+ * `_headers`). One list, so the eleven apps cannot drift apart.
+ *
+ * The ENFORCED Content-Security-Policy only carries the directives that cannot
+ * break a screen: who may frame us (clickjacking), no plugins, no <base> swap.
+ * The full policy ships as Report-Only first: the apps load Google Fonts,
+ * camera players and documents in iframes, sockets and the Spaces CDN, and a
+ * wrong guess there blanks a page. Violations show in the browser console;
+ * once a release runs clean, move it to the enforced header.
+ *
+ * HSTS deliberately has no `preload`: preload is decided for the whole
+ * iservice365.org domain at the apex and is hard to undo (owner/leads action).
+ */
+export const CSP_ENFORCED = [
+  "frame-ancestors 'self'",
+  "object-src 'none'",
+  "base-uri 'self'",
+].join("; ");
+
+export const CSP_REPORT_ONLY = [
+  "default-src 'self'",
+  "script-src 'self'",
+  "style-src 'self' 'unsafe-inline' https://fonts.googleapis.com",
+  "font-src 'self' data: https://fonts.gstatic.com",
+  "img-src 'self' data: blob: https:",
+  "media-src 'self' blob: https:",
+  "connect-src 'self' https: wss:",
+  "frame-src 'self' https:",
+  "worker-src 'self' blob:",
+  "object-src 'none'",
+  "base-uri 'self'",
+  "frame-ancestors 'self'",
+  "form-action 'self' https:",
+  "upgrade-insecure-requests",
+].join("; ");
+
+export const SECURITY_HEADERS: Record<string, string> = {
+  "strict-transport-security": "max-age=31536000; includeSubDomains",
+  "x-content-type-options": "nosniff",
+  "x-frame-options": "SAMEORIGIN",
+  "referrer-policy": "strict-origin-when-cross-origin",
+  // camera/mic: QR scan, photo capture; geolocation: attendance;
+  // usb/serial/hid: card readers (useWebUsb). Everything else is off.
+  "permissions-policy":
+    "camera=(self), microphone=(self), geolocation=(self), usb=(self), serial=(self), hid=(self), payment=(self), display-capture=(self), bluetooth=(), midi=(), magnetometer=(), gyroscope=(), accelerometer=()",
+  // allow-popups: payment and document windows we open keep working.
+  "cross-origin-opener-policy": "same-origin-allow-popups",
+  "content-security-policy": CSP_ENFORCED,
+  "content-security-policy-report-only": CSP_REPORT_ONLY,
+};