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

package/components/AppSelect.vue

@@ -18,7 +18,8 @@
 <template>
   <v-menu
     v-if="!multiple"
-    :close-on-content-click="true"
+    v-model="singleOpen"
+    :close-on-content-click="!searchable"
     :disabled="disabled"
     location="bottom start"
     offset="4"
@@ -52,9 +53,27 @@
       </div>
     </template>
 
-    <div class="app-select__menu" role="listbox">
+    <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>
       <button
-        v-for="opt in normalized"
+        v-for="opt in visibleOptions"
         :key="String(opt.value)"
         type="button"
         class="app-select__option"
@@ -66,6 +85,14 @@
         <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>
 
@@ -122,8 +149,18 @@
     </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 normalized"
+        v-for="opt in visibleOptions"
         :key="String(opt.value)"
         type="button"
         class="app-select__option"
@@ -138,6 +175,9 @@
         />
         <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>
@@ -154,6 +194,34 @@ 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. */
@@ -168,6 +236,22 @@ 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(() =>
@@ -178,6 +262,56 @@ 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) =>
@@ -205,6 +339,11 @@ 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,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();