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

package/components/AttendanceProxyDialog.vue

@@ -1,391 +0,0 @@
-<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/BuildingUnitManagement.vue

@@ -1,298 +0,0 @@
-<template>
-  <v-card width="100%">
-    <v-expansion-panels v-model="panels" variant="accordion" multiple>
-      <v-expansion-panel v-for="section in sections" :key="section.key" :value="section.key">
-        <v-expansion-panel-title class="bg-primary">
-          <span>{{ section.title }} ({{ section.items.length }})</span>
-          <v-spacer />
-          <!-- @click.stop: the button sits in the panel header, so a click must
-               not also open or close the panel. -->
-          <v-btn v-if="canUpdate" size="small" variant="tonal" class="text-none mr-4" prepend-icon="mdi-plus"
-            @click.stop="openAdd(section.key)">
-            Add
-          </v-btn>
-        </v-expansion-panel-title>
-
-        <v-expansion-panel-text>
-          <v-progress-linear v-if="section.loading" indeterminate color="primary" />
-          <v-list v-if="section.items.length" density="compact" class="bg-transparent">
-            <v-list-item v-for="item in section.items" :key="item._id" :title="item.name"
-              :subtitle="section.subtitle(item)">
-              <template v-if="canUpdate" #append>
-                <v-btn icon="mdi-close" size="small" variant="text" :loading="removing === item._id"
-                  :aria-label="`Remove ${item.name} from this unit`" @click="confirmRemove(section.key, item)" />
-              </template>
-            </v-list-item>
-          </v-list>
-          <p v-else-if="!section.loading" class="font-weight-semibold text-caption ml-2 mt-5">
-            **No {{ section.empty }} to display**
-          </p>
-        </v-expansion-panel-text>
-      </v-expansion-panel>
-    </v-expansion-panels>
-
-    <p v-if="message" class="text-center text-subtitle-2 font-weight-medium text-error mt-4">
-      {{ message }}
-    </p>
-
-    <v-dialog v-model="removeDialog" width="450" persistent>
-      <v-card width="100%">
-        <v-toolbar density="compact" class="pl-4">
-          <span class="font-weight-medium text-h5">
-            Remove {{ pendingRemove?.section === "members" ? "Management" : "Service Provider" }}
-          </span>
-        </v-toolbar>
-
-        <v-card-text>
-          <p class="text-subtitle-2 text-center">
-            Are you sure you want to remove <strong>{{ pendingRemove?.name }}</strong> from this unit?
-          </p>
-        </v-card-text>
-
-        <v-toolbar density="compact">
-          <v-row no-gutters>
-            <v-col cols="6">
-              <v-btn tile block size="48" variant="text" class="text-none" :disabled="!!removing"
-                @click="removeDialog = false">
-                Cancel
-              </v-btn>
-            </v-col>
-            <v-col cols="6">
-              <v-btn tile block size="48" color="primary-button" variant="flat" class="text-none"
-                :loading="!!removing" @click="remove">
-                Remove
-              </v-btn>
-            </v-col>
-          </v-row>
-        </v-toolbar>
-      </v-card>
-    </v-dialog>
-
-    <v-dialog v-model="addDialog" width="520" persistent>
-      <v-card>
-        <v-toolbar density="compact" class="pl-4">
-          <span class="font-weight-medium text-h6">Add {{ adding === "members" ? "Management" : "Service Providers" }}</span>
-        </v-toolbar>
-        <v-card-text>
-          <p class="text-caption mb-3">
-            Only active {{ adding === "members" ? "members" : "service provider people" }} that are not assigned to a
-            unit yet are listed.
-          </p>
-          <v-autocomplete v-model="selected" v-model:search="candidateSearch" :items="candidates"
-            :loading="candidatesLoading" item-title="name" item-value="_id" multiple chips closable-chips
-            no-filter density="comfortable" placeholder="Search by name"
-            :no-data-text="candidatesLoading ? 'Loading...' : 'No one available'">
-            <template #item="{ props: itemProps, item }">
-              <v-list-item v-bind="itemProps" :subtitle="subtitleOf(item.raw)" />
-            </template>
-          </v-autocomplete>
-        </v-card-text>
-        <v-card-actions>
-          <v-spacer />
-          <v-btn class="text-none" :disabled="saving" @click="addDialog = false">Cancel</v-btn>
-          <v-btn class="text-none" color="primary" variant="flat" :loading="saving" :disabled="!selected.length"
-            @click="add">
-            Add
-          </v-btn>
-        </v-card-actions>
-      </v-card>
-    </v-dialog>
-  </v-card>
-</template>
-
-<script setup lang="ts">
-/**
- * A building unit's Management tab: the management members and the service
- * provider people (Members > Service Providers, not the provider companies)
- * attached to this unit. Each can be on one unit at a time, and only while
- * active - the server detaches them the moment they are suspended or deleted,
- * so they simply drop off this list.
- */
-type TSection = "members" | "providers";
-type TRow = {
-  _id: string;
-  name: string;
-  email?: string;
-  roleName?: string;
-  type?: string;
-  company?: string;
-  role?: string;
-  status?: string;
-};
-
-const props = defineProps({
-  unitId: {
-    type: String,
-    required: true,
-  },
-  /** The unit's site. The route's `site` is used when this is empty. */
-  siteId: {
-    type: String,
-    default: "",
-  },
-  /** The membership type whose members manage the site. */
-  managementType: {
-    type: String,
-    default: "property_management_agency",
-  },
-  canUpdate: {
-    type: Boolean,
-    default: false,
-  },
-});
-
-const route = useRoute();
-const org = computed(() => (route.params.org as string) ?? "");
-const site = computed(() => props.siteId || ((route.params.site as string) ?? ""));
-
-const { getAll: getMembers, updateMemberUnit } = useMember();
-const { getSiteMembers: getProviderPeople, updateSiteMemberUnit: updateProviderUnit } = useServiceProvider();
-const { debounce } = useUtils();
-
-const panels = ref<TSection[]>(["members", "providers"]);
-const message = ref("");
-const removing = ref("");
-
-function membersQuery(unit: string, search = "") {
-  return getMembers({ org: org.value, siteId: site.value, type: props.managementType, status: "active", unit, search, limit: 50 });
-}
-
-/**
- * The site's provider people on `unit`, active only. The endpoint returns the
- * whole list (no paging or search), so `search` is matched here.
- */
-async function providersQuery(unit: string, search = "") {
-  const res = await getProviderPeople(site.value, unit);
-  const q = search.toLowerCase();
-  const items = (res?.items ?? []).filter(
-    (p) => p.status === "active" && (!q || [p.name, p.email, p.company].some((v) => v?.toLowerCase().includes(q))),
-  );
-  return { items };
-}
-
-const { data: memberRes, pending: membersLoading, refresh: refreshMembers } = useLazyAsyncData(
-  `unit-management-members-${props.unitId}`,
-  () => membersQuery(props.unitId),
-);
-const { data: providerRes, pending: providersLoading, refresh: refreshProviders } = useLazyAsyncData(
-  `unit-management-providers-${props.unitId}`,
-  () => providersQuery(props.unitId),
-);
-
-function subtitleOf(row: TRow) {
-  return [row.company, row.roleName || row.role || row.type?.replace(/_/g, " "), row.email]
-    .filter(Boolean)
-    .join(" · ");
-}
-
-const sections = computed(() => [
-  {
-    key: "members" as TSection,
-    title: "Management",
-    empty: "management",
-    items: (memberRes.value?.items ?? []) as TRow[],
-    loading: membersLoading.value,
-    subtitle: subtitleOf,
-  },
-  {
-    key: "providers" as TSection,
-    title: "Service Providers",
-    empty: "service providers",
-    items: (providerRes.value?.items ?? []) as TRow[],
-    loading: providersLoading.value,
-    subtitle: subtitleOf,
-  },
-]);
-
-function refresh(section: TSection) {
-  return section === "members" ? refreshMembers() : refreshProviders();
-}
-
-function assign(section: TSection, id: string, unit: string) {
-  return section === "members" ? updateMemberUnit(id, unit) : updateProviderUnit(id, unit);
-}
-
-function errorOf(error: any, fallback: string) {
-  return error?.response?._data?.message || error?.data?.message || fallback;
-}
-
-// --- Remove: confirmed first ---
-const removeDialog = ref(false);
-const pendingRemove = ref<{ section: TSection; id: string; name: string } | null>(null);
-
-function confirmRemove(section: TSection, row: TRow) {
-  message.value = "";
-  pendingRemove.value = { section, id: row._id, name: row.name };
-  removeDialog.value = true;
-}
-
-async function remove() {
-  if (!pendingRemove.value) return;
-  const { section, id } = pendingRemove.value;
-  removing.value = id;
-  try {
-    await assign(section, id, "");
-    await refresh(section);
-  } catch (error: any) {
-    message.value = errorOf(error, "Failed to remove from unit.");
-  } finally {
-    removing.value = "";
-    removeDialog.value = false;
-    pendingRemove.value = null;
-  }
-}
-
-// --- Add dialog: active rows on no unit yet ---
-const addDialog = ref(false);
-const adding = ref<TSection>("members");
-const selected = ref<string[]>([]);
-const candidates = ref<TRow[]>([]);
-const candidateSearch = ref("");
-const candidatesLoading = ref(false);
-const saving = ref(false);
-
-async function loadCandidates() {
-  candidatesLoading.value = true;
-  try {
-    const search = candidateSearch.value?.trim() ?? "";
-    const res = adding.value === "members" ? await membersQuery("none", search) : await providersQuery("none", search);
-    // Keep what is already picked, so a new search does not drop the chips.
-    const picked = candidates.value.filter((c) => selected.value.includes(c._id));
-    const found = ((res?.items ?? []) as TRow[]).filter((c) => !selected.value.includes(c._id));
-    candidates.value = [...picked, ...found];
-  } catch (error: any) {
-    message.value = errorOf(error, "Failed to load the list.");
-  } finally {
-    candidatesLoading.value = false;
-  }
-}
-
-const debouncedLoad = debounce(loadCandidates, 400);
-watch(candidateSearch, () => {
-  if (addDialog.value) debouncedLoad();
-});
-
-function openAdd(section: TSection) {
-  message.value = "";
-  adding.value = section;
-  selected.value = [];
-  candidates.value = [];
-  candidateSearch.value = "";
-  addDialog.value = true;
-  loadCandidates();
-}
-
-async function add() {
-  saving.value = true;
-  message.value = "";
-  const section = adding.value;
-  const results = await Promise.allSettled(selected.value.map((id) => assign(section, id, props.unitId)));
-  const failed = results.filter((r): r is PromiseRejectedResult => r.status === "rejected");
-  if (failed.length) {
-    message.value = errorOf(failed[0].reason, `${failed.length} could not be added.`);
-  }
-  await refresh(section);
-  saving.value = false;
-  addDialog.value = false;
-}
-</script>