@7365admin1/layer-common 4.84.0 → 4.84.1-staging.482

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

@@ -10,6 +10,7 @@
         <v-tab value="general">General</v-tab>
         <v-tab value="residents">Residents/Tenants</v-tab>
         <v-tab value="vehicles">Vehicles</v-tab>
+        <v-tab value="management">Management</v-tab>
         <v-tab value="others">Others</v-tab>
       </v-tabs>
     </v-toolbar>
@@ -170,6 +171,11 @@
         </TableMain>
       </template>
 
+      <template v-else-if="tab === 'management'">
+        <BuildingUnitManagement :unit-id="buildingUnit._id" :site-id="buildingUnit?.site?._id"
+          :can-update="canUpdateUnit" />
+      </template>
+
       <template v-else-if="tab === 'others'">
         <v-row>
           <!-- <v-col cols="12" md="6" class="mt-2">