@7365admin1/layer-common 4.0.4-staging.241 → 4.1.0

package/components/PublicOnboarding/VisitorRegistrationForm.vue

@@ -0,0 +1,273 @@
+<template>
+  <v-form v-model="formValid" @submit.prevent="submit">
+    <v-row no-gutters>
+      <v-col cols="12" class="mb-4">
+        <p class="text-caption text-medium-emphasis mb-2">Visitor Arrival</p>
+        <InputDatePicker v-model="visitor.expectedCheckIn" placeholder="DD/MM/YYYY" :rules="[requiredRule]" />
+      </v-col>
+
+      <v-col cols="6" class="mb-4 pr-1">
+        <v-text-field
+          v-model="visitor.arrivalTime"
+          type="time"
+          label="Time"
+          density="comfortable"
+          variant="outlined"
+          hide-details
+        />
+      </v-col>
+      <v-col cols="6" class="mb-4 pl-1">
+        <v-text-field
+          v-model.number="visitor.duration"
+          type="number"
+          min="0"
+          label="Duration Hour(s)"
+          density="comfortable"
+          variant="outlined"
+          hide-details
+        />
+      </v-col>
+
+      <v-col cols="12" class="mb-2">
+        <p class="text-caption text-medium-emphasis">Visitor Information</p>
+      </v-col>
+
+      <v-col cols="12" class="mb-4">
+        <v-text-field
+          v-model="visitor.name"
+          label="Name"
+          density="comfortable"
+          variant="outlined"
+          :rules="[requiredRule]"
+        />
+      </v-col>
+
+      <v-col cols="12" class="mb-1">
+        <InputPhoneNumberV2 v-model="visitor.contact" density="comfortable" :rules="[requiredRule]" />
+      </v-col>
+      <v-col v-if="isContactPickerSupported" cols="12" class="mb-4 text-right">
+        <a href="#" class="text-caption" @click.prevent="fillFromContactPicker">
+          or select contact in your phone book
+        </a>
+      </v-col>
+
+      <v-col cols="12" class="mb-4">
+        <PublicOnboardingLocationFields
+          :site="site"
+          v-model:block="visitor.block"
+          v-model:level="visitor.level"
+          v-model:unit="visitor.unit"
+        />
+      </v-col>
+
+      <v-col cols="12" class="mb-4">
+        <v-text-field
+          v-model="visitor.email"
+          type="email"
+          label="Email"
+          density="comfortable"
+          variant="outlined"
+          hide-details
+        />
+      </v-col>
+
+      <v-col cols="12" class="mb-4">
+        <div class="d-flex align-center justify-space-between pa-3 bordered-field">
+          <span>Overnight Parking</span>
+          <v-switch
+            :model-value="visitor.isOvernightParking"
+            color="primary"
+            base-color="grey-lighten-1"
+            hide-details
+            @update:model-value="onToggleOvernightParking"
+          />
+        </div>
+      </v-col>
+
+      <v-col cols="12" class="mb-4">
+        <div class="d-flex align-center justify-space-between pa-3 bordered-field">
+          <span>No. of passenger (Optional)</span>
+          <div class="d-flex align-center ga-3">
+            <v-btn icon size="small" variant="outlined" :disabled="!visitor.numberOfPassengers" @click="visitor.numberOfPassengers = Math.max(0, (visitor.numberOfPassengers || 0) - 1)">
+              <v-icon>mdi-minus</v-icon>
+            </v-btn>
+            <span>{{ visitor.numberOfPassengers || 0 }}</span>
+            <v-btn icon size="small" variant="outlined" @click="visitor.numberOfPassengers = (visitor.numberOfPassengers || 0) + 1">
+              <v-icon>mdi-plus</v-icon>
+            </v-btn>
+          </div>
+        </div>
+      </v-col>
+
+      <v-col cols="12" class="mb-4">
+        <v-textarea
+          v-model="visitor.purpose"
+          label="Enter purpose of visit"
+          density="comfortable"
+          variant="outlined"
+          rows="4"
+          auto-grow
+        />
+      </v-col>
+
+      <v-col v-if="submitError" cols="12" class="mb-4">
+        <v-alert type="error" variant="tonal" density="compact">{{ submitError }}</v-alert>
+      </v-col>
+
+      <v-col cols="12">
+        <v-btn color="primary" variant="flat" block size="large" :loading="submitting" :disabled="!formValid" type="submit">
+          Submit
+        </v-btn>
+      </v-col>
+    </v-row>
+
+    <v-dialog v-model="showOvernightDialog" max-width="420" persistent>
+      <v-card class="pa-6">
+        <p class="text-body-1 text-center mb-4">
+          Overnight Parking requests outside our below business hours will not
+          be guaranteed a response
+        </p>
+        <div class="mb-4">
+          <div v-for="day in overnightScheduleDisplay" :key="day.label" class="d-flex justify-space-between text-body-2 py-1">
+            <span class="text-capitalize">{{ day.label }}</span>
+            <span>{{ day.text }}</span>
+          </div>
+        </div>
+        <v-row no-gutters class="ga-2">
+          <v-col>
+            <v-btn color="success" variant="tonal" block @click="confirmOvernightParking(true)">Yes</v-btn>
+          </v-col>
+          <v-col>
+            <v-btn color="error" variant="tonal" block @click="confirmOvernightParking(false)">No</v-btn>
+          </v-col>
+        </v-row>
+      </v-card>
+    </v-dialog>
+  </v-form>
+</template>
+
+<script lang="ts" setup>
+const prop = defineProps({
+  site: { type: String, required: true },
+});
+
+const emit = defineEmits(["done"]);
+
+const { createVisitor, getOvernightParkingHours } = usePublicVisitorOnboarding();
+const { isSupported: isContactPickerSupported, pickContact } = useContactPicker();
+
+const requiredRule = (v: any) => (v !== null && v !== undefined && v !== "") || "This field is required";
+
+const visitor = reactive({
+  expectedCheckIn: null as string | null,
+  arrivalTime: "",
+  duration: null as number | null,
+  name: "",
+  contact: "",
+  block: "",
+  level: "",
+  unit: "",
+  email: "",
+  isOvernightParking: false,
+  numberOfPassengers: 0,
+  purpose: "",
+});
+
+const formValid = ref(false);
+const submitting = ref(false);
+const submitError = ref("");
+
+async function fillFromContactPicker() {
+  const contact = await pickContact();
+  if (!contact) return;
+  if (contact.name) visitor.name = contact.name;
+  if (contact.tel) visitor.contact = contact.tel;
+}
+
+const DAY_LABELS = ["monday", "tuesday", "wednesday", "thursday", "friday", "saturday", "sunday"];
+const overnightSchedule = ref<Record<string, any>>({});
+const showOvernightDialog = ref(false);
+
+const overnightScheduleDisplay = computed(() =>
+  DAY_LABELS.map((day) => {
+    const d = overnightSchedule.value[day];
+    return {
+      label: day,
+      text: d?.isEnabled && d?.startTime && d?.endTime ? `${d.startTime} - ${d.endTime}` : "Closed",
+    };
+  }),
+);
+
+async function onToggleOvernightParking(value: boolean | null) {
+  if (!value) {
+    visitor.isOvernightParking = false;
+    return;
+  }
+  try {
+    const res: any = await getOvernightParkingHours(prop.site);
+    overnightSchedule.value = res?.data ?? res ?? {};
+  } catch {
+    overnightSchedule.value = {};
+  }
+  showOvernightDialog.value = true;
+}
+
+function confirmOvernightParking(confirmed: boolean) {
+  visitor.isOvernightParking = confirmed;
+  showOvernightDialog.value = false;
+}
+
+async function submit() {
+  submitError.value = "";
+  submitting.value = true;
+  try {
+    const payload: Record<string, any> = {
+      type: "guest",
+      name: visitor.name,
+      contact: visitor.contact,
+      email: visitor.email || undefined,
+      block: visitor.block || undefined,
+      level: visitor.level || undefined,
+      unit: visitor.unit || undefined,
+      expectedCheckIn: visitor.expectedCheckIn || undefined,
+      arrivalTime: visitor.arrivalTime || undefined,
+      duration: visitor.duration ?? undefined,
+      isOvernightParking: visitor.isOvernightParking,
+      numberOfPassengers: visitor.numberOfPassengers || undefined,
+      purpose: visitor.purpose || undefined,
+    };
+
+    const res: any = await createVisitor(prop.site, payload);
+    emit("done", res?.status || "pending", res?._id);
+  } catch (error: any) {
+    submitError.value =
+      error?.data?.message || error?.message || "Unable to submit your registration. Please try again.";
+  } finally {
+    submitting.value = false;
+  }
+}
+</script>
+
+<style scoped>
+/* Matches the surrounding v-text-field/v-select "outlined" variant's own
+   border exactly (Vuetify's field border color/opacity/radius tokens),
+   rather than an approximated color - these two rows aren't real Vuetify
+   fields, so without this they were the only inconsistent borders on the
+   form (one had a mismatched color/radius, the other had none at all). */
+.bordered-field {
+  border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
+  border-radius: 4px;
+}
+
+/* InputDatePicker/InputPhoneNumberV2 hardcode `.filter-field` on their own
+   internal v-text-field/v-select, independent of anything on this form's
+   own markup - that class sets border-radius: var(--r-inner) globally
+   (assets/css/screens.css), which is why they never matched the other
+   plain fields' 4px default no matter what class this component's own
+   elements had. Scoped :deep() here targets just their rendering within
+   this form (not the shared components' other usages elsewhere in the
+   app) with higher specificity than that global rule. */
+:deep(.filter-field .v-field) {
+  border-radius: 4px;
+}
+</style>

package/components/VisitorManagement.vue

@@ -457,6 +457,15 @@
         >
           {{ item?.overnightParking?.status }}
         </v-card>
+        <v-card
+          v-else-if="activeTab === 'guests' && item?.status"
+          size="small"
+          class="rounded-xl text-capitalize text-center elevation-0 py-1 px-2"
+          :color="getVisitorStatusColor(item.status)"
+          style="max-width: 150px; margin: auto"
+        >
+          {{ getVisitorStatusLabel(item.status) }}
+        </v-card>
         <span v-else> N/A </span>
       </template>
 
@@ -536,6 +545,27 @@
             <v-divider />
           </v-card>
         </v-menu>
+        <v-menu v-else-if="activeTab === 'guests' && item?.status === 'pending' && canUpdateVisitor">
+          <template #activator="{ props }">
+            <v-avatar v-bind="props" class="rounded-xl border-md">
+              <v-icon icon="mdi-dots-vertical" />
+            </v-avatar>
+          </template>
+
+          <v-card>
+            <v-list-item @click.stop="openApproveRejectVisitorDialog(item, 'approved')">
+              <template #title>
+                <span class="text-caption">Approve</span>
+              </template>
+            </v-list-item>
+            <v-divider />
+            <v-list-item @click.stop="openApproveRejectVisitorDialog(item, 'rejected')">
+              <template #title>
+                <span class="text-caption">Reject</span>
+              </template>
+            </v-list-item>
+          </v-card>
+        </v-menu>
       </template>
 
       <template v-slot:item.checkInRemarks="{ item }">
@@ -1179,6 +1209,78 @@
       </v-card>
     </v-dialog>
 
+    <v-dialog
+      v-model="dialog.approveRejectVisitorDialog"
+      transition="dialog-bottom-transition"
+      persistent
+      width="60vh"
+    >
+      <v-card>
+        <v-toolbar density="compact">
+          <v-row
+            no-gutters
+            class="d-flex fill-height justify-space-between align-center px-4"
+          >
+            <span class="font-weight-bold">{{ approveRejectVisitorDialogTitle }}</span>
+            <v-btn
+              icon="mdi-close"
+              variant="text"
+              @click="closeApproveRejectVisitorDialog"
+            />
+          </v-row>
+        </v-toolbar>
+        <v-card-text class="px-4 pb-6">
+          <v-row no-gutters justify="center" align-content="center">
+            <v-col cols="12" class="text-h6 text-center">
+              {{
+                `Are you sure you want to ${approveRejectVisitorDialog.text} the ${approveRejectVisitorDialogTitle}?`
+              }}
+            </v-col>
+
+            <v-col cols="12" md="8" class="mt-4">
+              <v-textarea
+                v-model="visitorApproveRejectRemarks"
+                label="Remarks"
+                placeholder="Enter remarks"
+                outlined
+                rows="3"
+                clearable
+              />
+            </v-col>
+          </v-row>
+        </v-card-text>
+        <v-toolbar class="pa-0" density="compact">
+          <v-row no-gutters>
+            <v-col cols="6">
+              <v-btn
+                text="No"
+                color="grey-lighten-3"
+                variant="flat"
+                height="48"
+                tile
+                block
+                :disabled="isApprovingRejectingVisitor"
+                @click="closeApproveRejectVisitorDialog"
+              />
+            </v-col>
+            <v-col cols="6">
+              <v-btn
+                text="Yes"
+                color="success"
+                variant="flat"
+                height="48"
+                tile
+                block
+                :disabled="!visitorApproveRejectRemarks || isApprovingRejectingVisitor"
+                @click="updateVisitorApprovalStatus"
+                :loading="isApprovingRejectingVisitor"
+              />
+            </v-col>
+          </v-row>
+        </v-toolbar>
+      </v-card>
+    </v-dialog>
+
     <v-dialog v-model="hidQrDialog" max-width="440" persistent>
       <v-card>
         <v-toolbar color="transparent" density="comfortable" class="px-2">
@@ -1436,6 +1538,7 @@ const dialog = reactive({
   showVisitorDataFromScannedQRCode: false,
   approveRejectOvernightParkingRequestDialog: false,
   returnNfcCard: false,
+  approveRejectVisitorDialog: false,
 });
 
 const snapshotImageUrl = ref("");
@@ -1488,6 +1591,18 @@ const headers = computed(() => {
     list.push({ title: "Action", value: "action" });
   }
 
+  // Guests is the only non-overnight-parking tab whose rows carry a
+  // top-level status (approved/pending/rejected) and an Approve/Reject
+  // action - without these two, the item.status/item.action template slots
+  // have no header to render against and v-data-table never shows them,
+  // no matter what their own v-if says.
+  if (tab === "guests") {
+    list.push(
+      { title: "Status", value: "status" },
+      { title: "Action", value: "action" },
+    );
+  }
+
   return list;
 });
 
@@ -1590,6 +1705,77 @@ function closeApproveRejectOvernightParkingDialog() {
   overNightParkingRequestApproveRejectRemarks.value = "";
 }
 
+/** Self-service submissions arrive with `status: "pending"` when the site's
+    Self-Service Auto-Approvals toggle is off - Approve/Reject here is what
+    actually decides the visitor's outcome, mirroring the Overnight Parking
+    approve/reject pattern above but against the top-level visitor status
+    (via the existing staff update endpoint) rather than a nested field. */
+function getVisitorStatusColor(status: string) {
+  switch (status) {
+    case "approved":
+      return "success";
+    case "rejected":
+      return "error";
+    case "pending":
+      return "warning";
+    default:
+      return "grey";
+  }
+}
+
+function getVisitorStatusLabel(status: string) {
+  return status === "pending" ? "Pending Approval" : status;
+}
+
+const selectedVisitorForApproval = ref<Record<string, any>>({});
+const visitorApproveRejectRemarks = ref("");
+const approveRejectVisitorDialog = ref({ text: "", status: "" });
+const isApprovingRejectingVisitor = ref(false);
+
+const approveRejectVisitorDialogTitle = computed(() => {
+  const type = selectedVisitorForApproval.value?.type as string | undefined;
+  const label = type ? type.replace("-", " ") : "Visitor";
+  return `${label.charAt(0).toUpperCase()}${label.slice(1)} Registration Request`;
+});
+
+function openApproveRejectVisitorDialog(visitor: Record<string, any>, status: "approved" | "rejected") {
+  selectedVisitorForApproval.value = visitor;
+  approveRejectVisitorDialog.value = {
+    text: status === "approved" ? "Approve" : "Reject",
+    status,
+  };
+  visitorApproveRejectRemarks.value = "";
+  dialog.approveRejectVisitorDialog = true;
+}
+
+function closeApproveRejectVisitorDialog() {
+  dialog.approveRejectVisitorDialog = false;
+  selectedVisitorForApproval.value = {};
+  approveRejectVisitorDialog.value = { text: "", status: "" };
+  visitorApproveRejectRemarks.value = "";
+}
+
+async function updateVisitorApprovalStatus() {
+  isApprovingRejectingVisitor.value = true;
+  try {
+    await updateVisitor(selectedVisitorForApproval.value._id, {
+      status: approveRejectVisitorDialog.value.status,
+      remarks: visitorApproveRejectRemarks.value,
+      updatedBy: currentUser.value?._id,
+    } as any);
+    showMessage(
+      `Visitor registration successfully ${approveRejectVisitorDialog.value.status}`,
+      "success"
+    );
+    await getVisitorRefresh();
+    closeApproveRejectVisitorDialog();
+  } catch (error) {
+    showMessage(errorConverter(error), "error");
+  } finally {
+    isApprovingRejectingVisitor.value = false;
+  }
+}
+
 function mappedAttachments(attachments: string[]) {
   return attachments.map((x, index) => {
     return {
@@ -1665,17 +1851,12 @@ function toRoute(tab: any) {
 
   const obj = tabOptions.value.find((x) => x.value === tab);
   if (!obj) return;
+  // Don't call getVisitorRefresh() here - activeTab is already in the
+  // useLazyAsyncData `watch` array below, so changing it (which already
+  // happened via v-model before this handler runs) already triggers a
+  // refetch on its own. Calling refresh() again here fired the same
+  // request a second time on every tab click.
   page.value = 1;
-  getVisitorRefresh();
-  // navigateTo({
-  //   name: routeName,
-  //   params: {
-  //     org: orgId,
-  //   },
-  //   // query: {
-  //   //   tab
-  //   // },
-  // });
 }
 const {
   data: getVisitorReq,
@@ -1702,8 +1883,15 @@ const {
     };
 
     if (activeTab.value === "guests") {
-      params.type = "guest";
-      params.status = "approved";
+      // Self-service Contractor submissions land here too, not just Visitor
+      // (type: "guest") - the "Registered" tab hard-filters status="registered",
+      // which a pending/approved self-service contractor never has, so without
+      // this it had no tab that would ever show it.
+      params.type = "guest,contractor";
+      // A self-service submission awaiting Approve/Reject (Self-Service
+      // Auto-Approvals off) lands here as "pending" alongside already
+      // "approved" guests, rather than being hidden until someone acts on it.
+      params.status = "approved,pending";
     } else if (activeTab.value === "resident-transactions") {
       params.status = "registered";
       params.type = "resident,tenant";
@@ -2237,8 +2425,11 @@ function buildReportParams(): any {
   };
 
   if (activeTab.value === "guests") {
-    params.type = "guest";
-    params.status = "approved";
+    // Kept in sync with the Guests tab's own list query above - otherwise a
+    // report generated from this tab would silently omit contractors and
+    // pending rows the screen is actually showing.
+    params.type = "guest,contractor";
+    params.status = "approved,pending";
   } else if (activeTab.value === "resident-transactions") {
     params.status = "registered";
     params.type = "resident,tenant";

package/composables/useContactPicker.ts

@@ -0,0 +1,36 @@
+/**
+ * Wraps the browser's Contact Picker API ("or select contact in your phone
+ * book" on the self-service onboarding form). Support is narrow - Android
+ * Chrome/Edge over HTTPS only, not iOS Safari or desktop - so `isSupported`
+ * must gate whether the UI even offers this, rather than showing a button
+ * that silently does nothing everywhere else.
+ */
+export default function useContactPicker() {
+  const isSupported = computed(() => {
+    return (
+      typeof navigator !== "undefined" &&
+      "contacts" in navigator &&
+      "ContactsManager" in window
+    );
+  });
+
+  async function pickContact(): Promise<{ name?: string; tel?: string } | null> {
+    if (!isSupported.value) return null;
+    try {
+      const props = ["name", "tel"];
+      const contacts = await (navigator as any).contacts.select(props, { multiple: false });
+      const contact = contacts?.[0];
+      if (!contact) return null;
+      return {
+        name: contact.name?.[0],
+        tel: contact.tel?.[0],
+      };
+    } catch {
+      // User cancelled the picker, or the browser refused - either way this
+      // is not an error worth surfacing, the visitor can just type instead.
+      return null;
+    }
+  }
+
+  return { isSupported, pickContact };
+}

package/composables/usePublicVisitorOnboarding.ts

@@ -0,0 +1,73 @@
+/**
+ * Public, unauthenticated calls for the self-service visitor onboarding page
+ * (reached by scanning the gate QR code printed from Site Settings > Entry
+ * Pass > Self-Service). Every endpoint here is deliberately a separate,
+ * narrower public route from its staff-facing equivalent in `useBuilding`/
+ * `useVisitor`/`useSiteEntryPassSettings` - see the server-side route
+ * comments for why each one is safe to leave unauthenticated.
+ */
+export default function usePublicVisitorOnboarding() {
+  function getOnboardingSettings(siteId: string) {
+    return useNuxtApp().$api<Record<string, any>>(
+      `/api/access-management/settings/${siteId}/onboarding`,
+      { method: "GET" },
+    );
+  }
+
+  function getBlocks(siteId: string) {
+    return useNuxtApp().$api<Record<string, any>>(
+      `/api/buildings/list/site/resident/${siteId}`,
+      { method: "GET" },
+    );
+  }
+
+  function getLevels(siteId: string, blockId: string) {
+    return useNuxtApp().$api<Record<string, any>>(
+      `/api/building-levels/list/site/resident/${siteId}`,
+      { method: "GET", query: { block: blockId } },
+    );
+  }
+
+  function getUnits(siteId: string, block: string, level: string) {
+    return useNuxtApp().$api<Record<string, any>>(
+      `/api/building-units/resident/site/${siteId}/block/${block}/level/${level}`,
+      { method: "GET" },
+    );
+  }
+
+  function createVisitor(siteId: string, payload: Record<string, any>) {
+    return useNuxtApp().$api<Record<string, any>>(
+      `/api/visitor-transactions/self-service/${siteId}`,
+      { method: "POST", body: payload },
+    );
+  }
+
+  // The "2" collection is the one actually populated/used by
+  // OvernightParkingAvailability.vue - the un-suffixed v1 collection this
+  // used to read from is a separate, unpopulated legacy store.
+  function getOvernightParkingHours(siteId: string) {
+    return useNuxtApp().$api<Record<string, any>>(
+      `/api/overnight-parking-approval-settings2/site/${siteId}/public`,
+      { method: "GET" },
+    );
+  }
+
+  // Backs the visitor's own preview/QR page, linked from their registration
+  // email so it still works after they've closed the browser.
+  function getSelfServicePreview(id: string) {
+    return useNuxtApp().$api<Record<string, any>>(
+      `/api/visitor-transactions/self-service/preview/${id}`,
+      { method: "GET" },
+    );
+  }
+
+  return {
+    getOnboardingSettings,
+    getBlocks,
+    getLevels,
+    getUnits,
+    createVisitor,
+    getOvernightParkingHours,
+    getSelfServicePreview,
+  };
+}