@7365admin1/layer-common 4.82.1-staging.476 → 4.83.0

package/components/AppSelect.vue

@@ -18,8 +18,7 @@
 <template>
   <v-menu
     v-if="!multiple"
-    v-model="singleOpen"
-    :close-on-content-click="!searchable"
+    :close-on-content-click="true"
     :disabled="disabled"
     location="bottom start"
     offset="4"
@@ -53,27 +52,9 @@
       </div>
     </template>
 
-    <div
-      ref="singleMenu"
-      class="app-select__menu"
-      role="listbox"
-      @scroll.passive="onMenuScroll"
-    >
-      <div v-if="searchable" class="app-select__search">
-        <v-icon icon="mdi-magnify" size="16" />
-        <input
-          ref="singleSearchInput"
-          v-model="search"
-          type="text"
-          class="app-select__search-input"
-          :placeholder="searchPlaceholder"
-          aria-label="Search options"
-          @keydown.enter.prevent="selectFirstMatch"
-          @keydown.esc.stop="singleOpen = false"
-        >
-      </div>
+    <div class="app-select__menu" role="listbox">
       <button
-        v-for="opt in visibleOptions"
+        v-for="opt in normalized"
         :key="String(opt.value)"
         type="button"
         class="app-select__option"
@@ -85,14 +66,6 @@
         <span class="app-select__option-text">{{ opt.title }}</span>
         <v-icon v-if="isSingleOn(opt)" icon="mdi-check" size="17" />
       </button>
-      <p v-if="searchable && !visibleOptions.length" class="app-select__empty">
-        {{ normalized.length ? "No matches" : "Nothing to choose from" }}
-      </p>
-      <!-- In the list, not under the field: the wait belongs where the reader's
-           eye already is, at the end of what they just scrolled through. -->
-      <p v-if="loadingMore" class="app-select__loading" role="status">
-        Loading more...
-      </p>
     </div>
   </v-menu>
 
@@ -149,18 +122,8 @@
     </template>
 
     <div class="app-select__menu">
-      <div v-if="searchable" class="app-select__search">
-        <v-icon icon="mdi-magnify" size="16" />
-        <input
-          v-model="search"
-          type="text"
-          class="app-select__search-input"
-          :placeholder="searchPlaceholder"
-          aria-label="Search options"
-        >
-      </div>
       <button
-        v-for="opt in visibleOptions"
+        v-for="opt in normalized"
         :key="String(opt.value)"
         type="button"
         class="app-select__option"
@@ -175,9 +138,6 @@
         />
         <span class="app-select__option-text">{{ opt.title }}</span>
       </button>
-      <p v-if="searchable && !visibleOptions.length" class="app-select__empty">
-        {{ normalized.length ? "No matches" : "Nothing to choose from" }}
-      </p>
     </div>
   </v-menu>
 </template>
@@ -194,34 +154,6 @@ defineOptions({ inheritAttrs: false });
  */
 const model = defineModel<any>({ default: "" });
 
-/**
- * ASKING FOR THE NEXT PAGE, FROM INSIDE THE LIST.
- *
- * A dropdown that pages should load as it is scrolled - a button under the
- * field asks the reader to leave the list they are reading to fetch more of it.
- * The menu is already the scroll container (`max-height: 280px; overflow-y:
- * auto` in `primitives.css`), so the end of the list is the natural trigger.
- */
-const emit = defineEmits<{ (e: "load-more"): void }>();
-
-/** How close to the end counts as the end. About one row and a half. */
-const LOAD_MORE_SLACK_PX = 48;
-
-const singleMenu = ref<HTMLElement | null>(null);
-/* Scroll fires per pixel. This makes the ask happen once per ARRIVAL at the
-   end, not once per event, and rearms when the list grows under the reader. */
-const askedAtBottom = ref(false);
-
-function onMenuScroll(event: Event) {
-  const el = event.target as HTMLElement | null;
-  if (!el || !props.hasMore || props.loadingMore) return;
-  const near = el.scrollHeight - el.scrollTop - el.clientHeight <= LOAD_MORE_SLACK_PX;
-  if (near && !askedAtBottom.value) emit("load-more");
-  askedAtBottom.value = near;
-}
-
-
-
 const props = defineProps({
   label: { type: String, default: "" },
   /** Strings, or the `{ title, value }` shape `v-select` already takes. */
@@ -236,22 +168,6 @@ const props = defineProps({
   returnObject: { type: Boolean, default: false },
   clearable: { type: Boolean, default: false },
   placeholder: { type: String, default: "" },
-  /**
-   * A filter box at the top of the popover. Opt-in, so the 44 consumers that
-   * do not ask for it render exactly the DOM they render today - a list short
-   * enough to read does not want a search field in front of it.
-   */
-  searchable: { type: Boolean, default: false },
-  /**
-   * MORE OPTIONS EXIST THAN ARE LOADED - see the `load-more` emit.
-   *
-   * Opt-in, and single-select only for now. A caller that leaves these alone
-   * behaves exactly as it did: no footer, no listener, no emit.
-   */
-  hasMore: { type: Boolean, default: false },
-  /** A page is on its way; shows the footer and stops further asking. */
-  loadingMore: { type: Boolean, default: false },
-  searchPlaceholder: { type: String, default: "Search" },
 });
 
 const normalized = computed(() =>
@@ -262,56 +178,6 @@ const normalized = computed(() =>
   )
 );
 
-/* ---- search ---------------------------------------------------------- */
-
-const search = ref("");
-const singleOpen = ref(false);
-const singleSearchInput = ref<HTMLInputElement | null>(null);
-
-/* Case-insensitive substring over what the option READS AS, not its value:
-   the title is the only part the user can see to type. */
-const visibleOptions = computed(() => {
-  const term = search.value.trim().toLowerCase();
-  if (!props.searchable || !term) return normalized.value;
-  return normalized.value.filter((opt) =>
-    String(opt.title ?? "").toLowerCase().includes(term)
-  );
-});
-
-/*
- * A page that does not fill the menu leaves nothing to scroll, and the reader
- * would be stranded with no way to reach the rest. That is not hypothetical
- * here: a page of ten whose rows are mostly filtered out by the caller can draw
- * four options in a box built for eight. So whenever the list settles short of
- * its own container, the next page is asked for straight away.
- */
-watch(
-  () => [visibleOptions.value.length, props.hasMore, props.loadingMore, singleOpen.value],
-  async () => {
-    if (!props.hasMore || props.loadingMore || !singleOpen.value) return;
-    await nextTick();
-    const el = singleMenu.value;
-    if (el && el.scrollHeight <= el.clientHeight) emit("load-more");
-  },
-  { flush: "post" },
-);
-
-/* A stale term would hide the list the next time the popover opens, so it is
-   dropped on every open - and the caret goes into the box, since opening a
-   searchable select is almost always a prelude to typing. */
-watch(singleOpen, async (open) => {
-  if (!props.searchable) return;
-  search.value = "";
-  if (!open) return;
-  await nextTick();
-  singleSearchInput.value?.focus();
-});
-
-function selectFirstMatch() {
-  const [first] = visibleOptions.value;
-  if (first) selectSingle(first);
-}
-
 /* A model entry is either the plain value or - under `return-object` - the
    source item, so everything compares on this one key. */
 const keyOf = (v: any) =>
@@ -339,11 +205,6 @@ const isSingleOn = (opt: any) =>
 function selectSingle(opt: any) {
   if (props.disabled) return;
   model.value = props.returnObject ? opt.raw : String(opt.value);
-  // `close-on-content-click` has to be OFF while searching - it fires on the
-  // click that puts the caret in the search box, so the popover would shut the
-  // moment it was typed into. With it off, picking an option has to close the
-  // popover by hand.
-  if (props.searchable) singleOpen.value = false;
 }
 
 function clearSingle() {

package/components/AttendanceDetailsDialog.vue

@@ -12,24 +12,6 @@
       <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>
@@ -66,9 +48,6 @@
                     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>
@@ -105,9 +84,6 @@
                     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>
@@ -143,27 +119,7 @@ const props = defineProps({
 const emit = defineEmits(["close"]);
 
 const attendance = ref<Record<string, any> | null>(null);
-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 { getMyAttendanceById } = useAttendance();
 const { formatDate } = useUtils();
 const { getFileUrl } = useFile();
 
@@ -180,8 +136,6 @@ 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);
       }
@@ -193,7 +147,6 @@ watch(
 watch(showDialog, (newVal) => {
   if (!newVal) {
     attendance.value = null;
-    clearPhotos();
   }
 });
 </script>

package/components/AttendanceMain.vue

@@ -17,68 +17,15 @@
         <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. -->
-          <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>
+          <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>
         </template>
         <template #item.checkInTimestamp="{ item }">
           <span>{{ formatDate(item.checkInTimestamp) }}</span>
@@ -117,12 +64,6 @@
 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: "" },
@@ -136,7 +77,6 @@ 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);
@@ -153,7 +93,7 @@ const headers = [
   { title: "Total Hours", value: "totalHours" },
 ];
 
-const { getAttendances, attendancePhotoPath } = useAttendance();
+const { getAttendances } = useAttendance();
 const { formatDate } = useUtils();
 
 function calculateTotalHours(attendance: any): string {
@@ -214,40 +154,6 @@ 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/AttendanceSettingsDialog.vue

@@ -18,29 +18,6 @@
           {{ 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">
@@ -181,28 +158,7 @@ const isMapSearchVisible = ref(false);
 
 const radiusInMeters = computed(() => radius.value * 1609.34);
 
-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 { getAttendanceSettings, updateAttendanceSettings } = useAttendance();
 
 const postalCode = ref("");
 const country = ref("");
@@ -241,7 +197,6 @@ watchEffect(() => {
   }
 
   if (getAttendanceSettingsReq.value) {
-    siteDeviceMode.value = getAttendanceSettingsReq.value.siteDeviceMode === true;
     isGeofencingEnabled.value =
       getAttendanceSettingsReq.value.isGeofencingEnabled || false;
 
@@ -436,13 +391,6 @@ 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,7 +10,6 @@
         <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>
@@ -171,11 +170,6 @@
         </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">

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="sanitizeHtml(getFieldValue(key))" />
+                <span v-if="key === 'content'" v-html="getFieldValue(key)" />
                 <span v-else-if="key === 'noExpiration'">
                   <BulletinExpirationChip
                     :value="getFieldValue(key) as boolean"

package/components/Dialog/UpdateMoreAction.vue

@@ -23,7 +23,7 @@
         Close
       </v-btn>
 
-      <v-menu v-if="canUpdate || canDelete || $slots.actions" contained>
+      <v-menu v-if="canUpdate || canDelete" contained>
         <template #activator="{ props }">
           <v-btn
             variant="flat"
@@ -42,16 +42,6 @@
              render-verified either. Only the row type and the destructive ink
              change. -->
         <v-list class="pa-0 update-more__list">
-          <!--
-            Screen-specific rows, above Edit and the destructive one.
-
-            Additive: a screen that passes nothing gets the menu it always
-            had, and `$slots.actions` is undefined unless a caller actually
-            defines the slot - so the button does not appear over an empty
-            list when a screen has neither permission nor extra rows.
-          -->
-          <slot name="actions" />
-
           <v-list-item v-if="canUpdate" @click="emit('edit')">
             <v-list-item-title>
               {{ editButtonLabel }}