@7365admin1/layer-common 4.83.0 → 4.85.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @iservice365/layer-common
 
+## 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
+
+- 57abba1: Suspended access: when the API answers ACCESS_SUSPENDED (every membership of the person is suspended), the app signs out and the sign-in page shows the server's message. Role names are unique per site, so role pickers and the roles table show "Admin · St. Regis Residences" (`roleLabel`), and the Members role chip uses the same "Role · Site" form.
+
 ## 4.83.0
 
 ### Minor Changes
@@ -1968,11 +1980,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/MemberMain.vue

@@ -374,7 +374,7 @@
                       v-model="selectedRole"
                       :items="pickerRoles"
                       item-value="_id"
-                      item-title="name"
+                      :item-title="roleLabel"
                       density="comfortable"
                       :rules="[requiredRule]"
                       :error-messages="
@@ -427,6 +427,7 @@ import {
   safeReturnTo,
   limitedSites,
   withCurrentRole,
+  roleLabel,
 } from "../utils/role";
 import { formatLastActive } from "../utils/last-active";
 import { formatMemberDate, memberAccess, memberPerson } from "../utils/member-row";

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/components/RolePermissionMain.vue

@@ -58,6 +58,8 @@
             else. Two kinds share that list and they are governed differently,
             so the row has to say which it is.
           -->
+          <!-- "Admin · St. Regis Residences": names are unique per site (2026-10-01) -->
+          <template #item.name="{ item }">{{ roleLabel(item) }}</template>
           <template #item.scope="{ item }">
             <StatusChip
               :dot="false"
@@ -164,7 +166,7 @@
                 <v-select
                   v-model="memberReassignments[member._id]"
                   :items="deletionPreview.replacementRoles"
-                  item-title="name"
+                  :item-title="roleLabel"
                   item-value="_id"
                   label="Reassign role"
                   density="comfortable"
@@ -204,7 +206,7 @@
 
 <script setup lang="ts">
 // Relative import: this layer's `utils/` is not auto-imported into consumers.
-import { safeReturnTo, showSiteField } from "../utils/role";
+import { roleLabel, safeReturnTo, showSiteField } from "../utils/role";
 import { holdsPermission } from "../utils/permission-spellings";
 import {
   catalogueForOrg,

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/package.json

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

package/plugins/API.ts

@@ -1,7 +1,9 @@
 import { isPermissionRefusal } from "../utils/permission-refusal";
+import { accessSuspendedMessage, SIGNIN_NOTICE_COOKIE } from "../utils/access-suspended";
 
 export default defineNuxtPlugin((nuxtApp) => {
   const { cookieConfig } = useRuntimeConfig().public;
+  let signingOut = false;
 
   const api = $fetch.create({
     baseURL: "/",
@@ -32,6 +34,20 @@ export default defineNuxtPlugin((nuxtApp) => {
     // 401 + "You do not have permission ..." (vehicle writes and every other
     // `requireSiteReach` gate). See utils/permission-refusal.ts.
     onResponseError({ response }) {
+      // Every membership suspended (2026-10-01): the server already ended the
+      // session. Sign out here and let the sign-in page say why, once.
+      const suspended = accessSuspendedMessage((response as any)?._data);
+      if (suspended && import.meta.client && !signingOut) {
+        signingOut = true;
+        void nuxtApp.runWithContext(() => {
+          useCookie(SIGNIN_NOTICE_COOKIE, { ...cookieConfig, maxAge: 300 }).value = suspended;
+          for (const name of ["sid", "user", "organization"]) useCookie(name, cookieConfig).value = null;
+          const { APP_MAIN, APP_NAME } = useRuntimeConfig().public as Record<string, string>;
+          if (String(APP_NAME ?? "").toLowerCase() === "main" || !APP_MAIN) return navigateTo("/sign-in");
+          window.location.href = `${APP_MAIN}/sign-in`;
+        });
+        return;
+      }
       if (!isPermissionRefusal(response?.status, (response as any)?._data)) return;
       if (!import.meta.client) return;
       const refresh = (nuxtApp as any).$refreshAppRole;

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/access-suspended.ts

@@ -0,0 +1,18 @@
+/**
+ * Suspended = no access (owner 2026-10-01). When every membership of the
+ * signed-in person is suspended the API answers any request with 401 +
+ * `code: "ACCESS_SUSPENDED"` and the message "Your access has been suspended
+ * by <org>. Contact your administrator." (core `suspendedSessionGuard`). The
+ * session is already dead server-side; the app signs out and the sign-in page
+ * (web-app-main) shows the message once, from this cookie.
+ */
+export const ACCESS_SUSPENDED_CODE = "ACCESS_SUSPENDED";
+export const SIGNIN_NOTICE_COOKIE = "signin-notice";
+
+export function accessSuspendedMessage(data: unknown): string | null {
+  const body = data as { code?: unknown; message?: unknown } | null | undefined;
+  if (body?.code !== ACCESS_SUSPENDED_CODE) return null;
+  return typeof body.message === "string" && body.message
+    ? body.message
+    : "Your access has been suspended. Contact your administrator.";
+}

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/role.ts

@@ -9,6 +9,19 @@
 export const showSiteField = (siteState: boolean, type: string): boolean =>
   siteState && type !== "admin";
 
+/**
+ * A role's name with its site, "Admin · St. Regis Residences" (owner
+ * 2026-10-01: role names are unique per SITE, so two sites may both have an
+ * "Admin" - two independent roles - and every list that can show both must
+ * say which is which). Organisation-level roles (no site) show the name alone.
+ * `siteName` comes from the role list (`GET /api/roles`, core 2026-10-01).
+ */
+export function roleLabel(role: { name?: unknown; siteName?: unknown; site?: unknown } | null | undefined): string {
+  const name = typeof role?.name === "string" ? role.name : "";
+  const site = typeof role?.siteName === "string" ? role.siteName.trim() : "";
+  return role?.site && site ? `${name} · ${site}` : name;
+}
+
 /**
  * The Assign Role picker's list, with the member's CURRENT role always in it.
  *
@@ -50,13 +63,13 @@ export function memberRoleChip(
   const limited = limitedSites(item);
   if (orgLevel && limited.length) {
     return {
-      text: limited.map((l) => `${l.roleName || "No role"} (${l.siteName || "a site"})`).join(", "),
+      text: limited.map((l) => `${l.roleName || "No role"} · ${l.siteName || "a site"}`).join(", "),
       tone: "info",
     };
   }
   if (orgLevel && item?.roleState === "other-site") {
     const site = typeof item?.roleSiteName === "string" && item.roleSiteName ? item.roleSiteName : "";
-    return { text: site ? `${name || "Role"} (${site})` : name || "Role", tone: "info" };
+    return { text: site ? `${name || "Role"} · ${site}` : name || "Role", tone: "info" };
   }
   switch (item?.roleState) {
     case "missing":