@7365admin1/layer-common 1.11.22 → 1.11.24

package/components/VisitorDataFromScannedQRCodeForm.vue

@@ -0,0 +1,292 @@
+<template>
+  <v-card width="100%" :loading="processing">
+    <v-toolbar>
+      <v-row
+        no-gutters
+        class="fill-height px-6 d-flex justify-space-between align-center"
+        align="center"
+      >
+        <span class="font-weight-bold text-h5 text-capitalize">
+          Visitor Information
+        </span>
+        <ButtonClose @click="emit('close')" />
+      </v-row>
+    </v-toolbar>
+    <v-card-text style="max-height: 100vh; overflow-y: auto" class="pa-5 my-3">
+      <div class="w-100 d-flex justify-space-between ga-2">
+        <!-- <span v-if="withStep2 || withStep3" class="text-subtitle-2 font-weight-bold" style="text-wrap: nowrap">Step
+          <span class="text-primary-button">{{ contractorStep }}</span>/{{ withStep3 ? 3 : withStep2 ? 2 : 1 }}</span> -->
+      </div>
+      <!-- <v-form ref="formRef" v-model="validForm" :disabled="processing" @click="errorMessage = ''"> -->
+      <v-row no-gutters class="pt-4">
+        <v-col cols="12">
+          <InputLabel class="text-capitalize" title="Full Name" />
+          <v-text-field
+            v-model="visitorInfo.name"
+            density="comfortable"
+            readonly
+          />
+        </v-col>
+
+        <v-col v-if="!visitorInfo.checkIn" cols="12">
+          <InputLabel class="text-capitalize" title="NRIC/Passport/ID No." />
+          <v-text-field
+            v-if="!visitorInfo.checkIn"
+            v-model="visitorInfo.nric"
+            density="comfortable"
+            hide-details
+            clearable
+          />
+          <v-text-field
+            v-else
+            v-model="visitorNric"
+            density="comfortable"
+            hide-details
+            readonly
+          />
+        </v-col>
+
+        <v-col v-if="!visitorInfo.checkIn" cols="12" class="mt-4">
+          <InputLabel
+            class="text-capitalize"
+            title="Vehicle Number (Optional)"
+          />
+          <InputVehicleNumber
+            v-if="!visitorInfo.checkIn"
+            v-model="visitorInfo.plateNumber"
+            density="comfortable"
+            hide-details
+            clearable
+          />
+          <InputVehicleNumber
+            v-else
+            v-model="visitorPlateNumber"
+            density="comfortable"
+            hide-details
+            readonly
+          />
+        </v-col>
+
+        <!-- <v-col cols="12" class="mt-4">
+          <InputLabel class="text-capitalize" title="Type" />
+          <v-text-field
+            v-model="visitorInfo.type"
+            density="comfortable"
+            hide-details
+            readonly
+          />
+        </v-col> -->
+
+        <v-col v-if="!visitorInfo.checkIn" cols="12" class="mt-4">
+          <InputLabel class="text-capitalize" title="Phone Number" />
+          <InputPhoneNumberV2
+            v-model="visitorInfo.contact"
+            density="comfortable"
+            :readonly="true"
+          />
+        </v-col>
+
+        <v-col cols="12">
+          <InputLabel class="text-capitalize" title="Location" />
+          <v-text-field v-model="location" density="comfortable" readonly />
+        </v-col>
+
+        <v-col v-if="!visitorInfo.checkIn" cols="12">
+          <InputLabel class="text-capitalize" title="Purpose" />
+          <v-textarea
+            v-model="visitorInfo.purpose"
+            density="comfortable"
+            :rows="2"
+            no-resize
+            readonly
+          />
+        </v-col>
+
+        <v-col v-if="!visitorInfo.checkIn" cols="12">
+          <InputLabel class="text-capitalize" title="Remarks" />
+          <v-textarea
+            v-model="visitorInfo.remarks"
+            density="comfortable"
+            :rows="2"
+            no-resize
+          />
+        </v-col>
+
+        <v-col v-if="!visitorInfo.checkIn" cols="12">
+          <InputLabel class="text-capitalize" title="Visitor Pass" />
+          <PassInformation
+            v-model:pass="visitorInfo.visitorPass"
+            :site="prop.site"
+            :type="visitorInfo.type"
+            :hideKeys="true"
+            :clearable="true"
+          />
+        </v-col>
+
+        <v-col v-else cols="12">
+          <v-card elevation="4" height="100%" width="100%">
+            <v-col cols="12" class="d-flex justify-center pb-0">
+              <span
+                class="text-h6 font-weight-bold d-flex text-center text-success"
+              >
+                {{
+                  visitorInfo.checkIn
+                    ? standardFormatDateTime(visitorInfo.checkIn)
+                    : "N/A"
+                }}
+              </span>
+            </v-col>
+            <v-col cols="12" class="d-flex justify-center">
+              Actual Check In
+            </v-col>
+          </v-card>
+        </v-col>
+
+        <!-- <v-col cols="12" class="mt-4">
+          <v-row no-gutters class="pt-2">
+            <v-col cols="6" class="pr-1">
+              <v-card elevation="3" height="100%" width="100%">
+                <v-col cols="12" class="d-flex justify-center pb-0">
+                  <span
+                    class="text-h6 font-weight-bold d-flex text-center text-success"
+                  >
+                    {{
+                      visitorInfo.checkIn
+                        ? standardFormatDateTime(visitorInfo.checkIn)
+                        : "N/A"
+                    }}
+                  </span>
+                </v-col>
+                <v-col cols="12" class="d-flex justify-center">
+                  Actual Check In
+                </v-col>
+              </v-card>
+            </v-col>
+            <v-col cols="6" class="pl-1">
+              <v-card elevation="3" height="100%" width="100%">
+                <v-col cols="12" class="d-flex justify-center pb-0">
+                  <span
+                    class="text-h6 font-weight-bold d-flex text-center text-error"
+                  >
+                    {{
+                      visitorInfo.checkOut
+                        ? standardFormatDateTime(visitorInfo.checkOut)
+                        : "N/A"
+                    }}
+                  </span>
+                </v-col>
+                <v-col cols="12" class="d-flex justify-center">
+                  Actual Check Out
+                </v-col>
+              </v-card>
+            </v-col>
+          </v-row>
+        </v-col> -->
+      </v-row>
+      <!-- </v-form> -->
+    </v-card-text>
+
+    <v-toolbar density="compact">
+      <v-row no-gutters>
+        <v-col cols="6">
+          <v-btn text="Close" block size="48" tile @click="emit('close')" />
+        </v-col>
+        <v-col cols="6">
+          <v-btn
+            v-if="!visitorInfo.checkIn && !visitorInfo.checkOut"
+            block
+            text="Check In"
+            variant="flat"
+            color="success"
+            size="48"
+            tile
+            :disabled="processing"
+            @click="emit('check-in-out', 'checkIn', visitorInfo)"
+            :loading="processing"
+          />
+          <v-btn
+            v-if="visitorInfo.checkIn && !visitorInfo.checkOut"
+            block
+            text="Confirm Check Out"
+            variant="flat"
+            color="error"
+            size="48"
+            tile
+            :disabled="processing"
+            @click="emit('check-in-out', 'checkOut', visitorInfo)"
+            :loading="processing"
+          />
+        </v-col>
+      </v-row>
+    </v-toolbar>
+  </v-card>
+</template>
+<script setup lang="ts">
+const prop = defineProps({
+  site: {
+    type: String,
+    required: true,
+  },
+  visitorData: {
+    type: Object as PropType<Partial<TVisitor>>,
+    default: {},
+  },
+  processing: {
+    type: Boolean,
+    required: false,
+  },
+});
+
+const emit = defineEmits(["check-in-out", "close"]);
+
+const { standardFormatDateTime } = useUtils();
+
+const visitorInfo = ref(prop.visitorData);
+
+const visitorNric = computed({
+  get: () =>
+    visitorInfo.value && visitorInfo.value.checkIn
+      ? visitorInfo.value.nric
+      : null,
+  set: () => {}, // readonly, do nothing on set
+});
+
+const visitorPlateNumber = computed({
+  get: () =>
+    visitorInfo.value && visitorInfo.value.checkIn
+      ? visitorInfo.value.plateNumber
+      : null,
+  set: () => {}, // readonly, do nothing on set
+});
+
+// watchEffect(() => {
+//   if (visitorInfo.value.plateNumber) {
+//     visitorInfo.value.type = "guest";
+//   } else {
+//     visitorInfo.value.type = "walk-in";
+//   }
+// });
+
+const location = computed({
+  get: () => {
+    if (
+      visitorInfo.value &&
+      visitorInfo.value.block &&
+      visitorInfo.value.level &&
+      visitorInfo.value.unitName
+    ) {
+      return `${visitorInfo.value.block} / ${visitorInfo.value.level} / ${visitorInfo.value.unitName}`;
+    } else if (
+      visitorInfo.value &&
+      visitorInfo.value.block &&
+      !visitorInfo.value.level &&
+      !visitorInfo.value.unitName
+    ) {
+      return visitorInfo.value.block;
+    } else {
+      return "N/A";
+    }
+  },
+  set: () => {}, // readonly, do nothing on set
+});
+</script>

package/components/VisitorForm.vue

@@ -475,15 +475,13 @@ async function handleAddNewContractorType() {
 
 async function handleSelectCompanyName(company: string) {
   visitor.company = company
+  // const selected = companyAutofillDataArray.value.find(x => x.companyName?.includes(company))
+  // if (!selected) return
 
-  const selected = companyAutofillDataArray.value.find(x => x.companyName?.includes(company))
-  if (!selected) return
-
-  visitor.block = selected.block || ""
-  visitor.level = selected.level || ""
-  visitor.unit = selected.unit || ""
-  visitor.unitName = selected.unitName || ""
-
+  // visitor.block = selected.block || ""
+  // visitor.level = selected.level || ""
+  // visitor.unit = selected.unit || ""
+  // visitor.unitName = selected.unitName || ""
 }
 
 const companyCombo = ref(null)

package/components/VisitorManagement.vue

@@ -169,11 +169,33 @@
           </span>
 
           <span
-            v-if="!item.checkOut && (item?.status === 'registered' || item?.status === 'unregistered') && canCheckoutVisitor">
-            <span class="d-flex align-center ga-2" v-bind="menuProps" style="cursor:pointer">
-              <v-icon icon="mdi-clock-time-eight-outline" color="red" size="20" />
-              <v-btn size="x-small" class="text-capitalize" color="red" text="Checkout"
-                :loading="loading.checkingOut && item?._id === selectedVisitorId" @click.stop="handleCheckout(item._id)" />
+            v-if="
+              !item.checkOut &&
+              (item?.status === 'registered' ||
+                item?.status === 'unregistered') &&
+              canCheckoutVisitor
+            "
+          >
+            <span
+              class="d-flex align-center ga-2"
+              v-bind="menuProps"
+              style="cursor: pointer"
+            >
+              <v-icon
+                icon="mdi-clock-time-eight-outline"
+                color="red"
+                size="20"
+              />
+              <v-btn
+                size="x-small"
+                class="text-capitalize"
+                color="red"
+                text="Checkout"
+                :loading="
+                  loading.checkingOut && item?._id === selectedVisitorId
+                "
+                @click.stop="handleCheckout(item._id)"
+              />
             </span>
           </span>
           <span v-else class="d-flex align-center ga-2">
@@ -249,17 +271,62 @@
               </div>
             </template>
             <v-list density="compact">
-              <v-list-item v-if="!item?.checkOut" prepend-icon="mdi-logout" title="Checkout" @click.stop="handleCheckout(item._id)" />
-              <v-list-item v-if="(item.visitorPass?.length ?? 0) > 0 || (item.passKeys?.length ?? 0) > 0"
-                prepend-icon="mdi-card-bulleted-outline" :title="item.checkOut ?  'View Pass/Key' :'Edit Pass/Key'"
-                @click.stop="handleOpenEditPassKey(item)" />
-              <v-list-item v-if="showAddPassKeyButton(item)" prepend-icon="mdi-plus" title="Add Pass/Key"
-                @click.stop="handleOpenAddPassKey(item)" />
+              <v-list-item
+                v-if="!item?.checkOut"
+                prepend-icon="mdi-logout"
+                title="Checkout"
+                @click.stop="handleCheckout(item._id)"
+              />
+              <v-list-item
+                v-if="
+                  (item.visitorPass?.length ?? 0) > 0 ||
+                  (item.passKeys?.length ?? 0) > 0
+                "
+                prepend-icon="mdi-card-bulleted-outline"
+                :title="item.checkOut ? 'View Pass/Key' : 'Edit Pass/Key'"
+                @click.stop="handleOpenEditPassKey(item)"
+              />
+              <v-list-item
+                v-if="showAddPassKeyButton(item)"
+                prepend-icon="mdi-plus"
+                title="Add Pass/Key"
+                @click.stop="handleOpenAddPassKey(item)"
+              />
             </v-list>
           </v-menu>
         </v-row>
       </template>
 
+      <template v-slot:item.arrival-date-time="{ item }">
+        <v-row no-gutters class="d-flex flex-column py-2">
+          <span class="d-flex align-center ga-2">
+            <v-icon icon="mdi-calendar" size="20" />
+            {{ standardFormatDate(item.expectedCheckIn) || "-" }}
+          </span>
+          <span class="d-flex align-center ga-2">
+            <v-icon icon="mdi-clock-time-four-outline" size="20" />
+            {{ formatTime(item.expectedCheckIn) || "-" }}
+          </span>
+
+          <span v-if="!item.checkIn && canUpdateVisitor">
+            <span class="d-flex align-center ga-2 cursor-pointer">
+              <v-icon
+                icon="mdi-clock-time-eight-outline"
+                color="success"
+                size="20"
+              />
+              <v-btn
+                size="x-small"
+                class="text-capitalize"
+                color="success"
+                text="Checkin"
+                @click.stop="handleCheckIn(item)"
+              />
+            </span>
+          </span>
+        </v-row>
+      </template>
+
       <template v-slot:item.action="{ item }">
         <v-btn
           v-if="activeTab === 'unregistered' && canAddVisitor"
@@ -459,6 +526,25 @@
           <p class="text-body-2 mb-3">
             Please ensure all passes and keys are returned before checking out.
           </p>
+
+          <div>
+            <InputLabel class="text-capitalize" title="Full Name" />
+            <v-text-field
+              v-model="selectedVisitorObject.name"
+              density="comfortable"
+              readonly
+            />
+          </div>
+
+          <div>
+            <InputLabel class="text-capitalize" title="Location" />
+            <v-text-field
+              v-model="selectedVisitorObject.location"
+              density="comfortable"
+              readonly
+            />
+          </div>
+
           <div v-if="passReturnStatuses.length > 0" class="mb-2">
             <p class="text-caption text-medium-emphasis mb-1">Passes</p>
             <v-row
@@ -609,14 +695,34 @@
 
     <ScanVisitorQRCode
       :dialog="dialog.scanVisitorQRCode"
+      :site="siteId"
+      @open-visitor-data-from-scanned-qr-code-dialog="
+        handleShowVisitorDataFromScannedQRCodeDialog
+      "
       @close-dialog="dialog.scanVisitorQRCode = false"
     />
 
+    <v-dialog
+      v-model="dialog.showVisitorDataFromScannedQRCode"
+      width="450"
+      persistent
+    >
+      <VisitorDataFromScannedQRCodeForm
+        :site="siteId"
+        :visitor-data="visitorDataFromScannedQRCode"
+        @check-in-out="handleVisitorDataFromScannedQRCodeCheckInOut"
+        :processing="isVisitorDataFromScannedQRCodeCheckingInOut"
+        @close="handleCloseVisitorDataFromScannedQRCodeDialog"
+      />
+    </v-dialog>
+
     <Snackbar v-model="messageSnackbar" :text="message" :color="messageColor" />
   </v-row>
 </template>
 
 <script setup lang="ts">
+import { errorConverter } from "../utils/data";
+
 definePageMeta({
   middleware: ["01-auth", "02-org"],
 });
@@ -644,10 +750,24 @@ const props = defineProps({
   },
 });
 
-const { getVisitors, visitorSelection, typeFieldMap, updateVisitor } =
-  useVisitor();
-const { debounce, formatCamelCaseToWords, formatDate, UTCToLocalTIme } =
-  useUtils();
+const { authenticate, currentUser } = useLocalAuth();
+authenticate();
+
+const {
+  getVisitors,
+  visitorSelection,
+  typeFieldMap,
+  updateVisitor,
+  visitorDataFromScannedQRCodeCheckIn,
+} = useVisitor();
+const {
+  debounce,
+  formatCamelCaseToWords,
+  formatDate,
+  formatTime,
+  UTCToLocalTIme,
+  standardFormatDate,
+} = useUtils();
 const { formatLocation } = useSecurityUtils();
 const { getFileUrlAnpr } = useFile();
 // const { status: visitorStatus, search } = useRoute().query as { status: string, search: string};
@@ -697,6 +817,7 @@ const dialog = reactive({
   addPassKey: false,
   editPassKey: false,
   scanVisitorQRCode: false,
+  showVisitorDataFromScannedQRCode: false,
 });
 
 const snapshotImageUrl = ref("");
@@ -709,7 +830,9 @@ const headers = computed(() => [
   { title: "Type/Company", value: "type-company" },
   { title: "Location", value: "location" },
   { title: "Contact/Vehicle No.", value: "contact-vehicleNumber" },
-  { title: "Check In/Out", value: "checkin-out" },
+  ...(activeTab.value != "guests"
+    ? [{ title: "Check In/Out", value: "checkin-out" }]
+    : [{ title: "Arrival Date / Time", value: "arrival-date-time" }]),
   ...(activeTab.value === "resident-transactions"
     ? [
         { title: "Check-in Remarks", value: "checkInRemarks" },
@@ -814,7 +937,7 @@ const {
 
     if (activeTab.value === "guests") {
       params.type = "guest";
-      params.status = "pending";
+      params.status = "approved";
     } else if (activeTab.value === "resident-transactions") {
       params.status = "registered";
       params.type = "resident,tenant";
@@ -850,7 +973,9 @@ watch(getVisitorReq, (newData: any) => {
 const selectedVisitorObject = computed(() => {
   const obj = items.value.find((x: any) => x?._id === selectedVisitorId.value);
   if (!obj) return {};
+
   const type = obj?.type as TVisitorType | undefined;
+
   let includedKeys: string[] = [
     "checkIn",
     "checkOut",
@@ -859,9 +984,23 @@ const selectedVisitorObject = computed(() => {
     "snapshotExitImage",
   ];
   includedKeys.unshift(...(typeFieldMap[type] ?? []));
-  return Object.fromEntries(
-    Object.entries(obj).filter(([key]) => includedKeys.includes(key))
-  );
+
+  let locationString = "N/A";
+
+  if (obj?.block || obj?.level || obj?.unitName) {
+    locationString = `${obj.block} / ${obj.level} / ${obj.unitName}`;
+  } else if (obj?.block) {
+    locationString = obj.block;
+  } else {
+    locationString = "N/A";
+  }
+
+  return {
+    ...Object.fromEntries(
+      Object.entries(obj).filter(([key]) => includedKeys.includes(key))
+    ),
+    location: locationString,
+  };
 });
 
 function formatValues(key: string, value: any) {
@@ -878,6 +1017,71 @@ function formatValues(key: string, value: any) {
   return value;
 }
 
+const visitorDataFromScannedQRCode = ref<Record<string, any>>({});
+
+function handleShowVisitorDataFromScannedQRCodeDialog(
+  scannedData: Record<string, any>
+) {
+  visitorDataFromScannedQRCode.value = scannedData;
+
+  const { checkIn, checkOut, _id, visitorPass } = scannedData;
+  const hasPasses = (visitorPass?.length ?? 0) > 0;
+
+  // 1. If they are checked in and HAVE passes/keys, go to the Return screen
+  if (checkIn && !checkOut && hasPasses) {
+    handleCheckout(_id);
+    return;
+  }
+
+  // 2. Default Case: Show visitor data (Entry, already checked out, or checked in with no passes)
+  dialog.showVisitorDataFromScannedQRCode = true;
+}
+
+const isVisitorDataFromScannedQRCodeCheckingInOut = ref(false);
+
+async function handleVisitorDataFromScannedQRCodeCheckInOut(
+  type: string,
+  visitorData: Record<string, any>
+) {
+  try {
+    isVisitorDataFromScannedQRCodeCheckingInOut.value = true;
+    if (type != "checkOut") {
+      await visitorDataFromScannedQRCodeCheckIn({
+        type,
+        filter: {
+          _id: visitorData._id,
+        },
+        update: {
+          updatedBy: currentUser.value._id,
+          visitorPass: visitorData.visitorPass.find(
+            (i: Record<string, any>) => i.keyId === null
+          )
+            ? undefined
+            : visitorData.visitorPass,
+          nric: visitorData.nric ?? "",
+          plateNumber: visitorData.plateNumber ?? "",
+        },
+        userType: "site",
+      });
+      showMessage("Visitor successfully checked-in!", "info");
+    } else {
+      selectedVisitorId.value = visitorData._id;
+      await proceedCheckout();
+    }
+    handleCloseVisitorDataFromScannedQRCodeDialog();
+    getVisitorRefresh();
+  } catch (error) {
+    showMessage(errorConverter(error), "error");
+  } finally {
+    isVisitorDataFromScannedQRCodeCheckingInOut.value = false;
+  }
+}
+
+function handleCloseVisitorDataFromScannedQRCodeDialog() {
+  dialog.showVisitorDataFromScannedQRCode = false;
+  visitorDataFromScannedQRCode.value = {};
+}
+
 function handleAddNew() {
   dialog.showSelection = true;
   activeVisitorFormType.value = null;
@@ -1058,6 +1262,11 @@ const canConfirmCheckout = computed(() => {
   });
 });
 
+async function handleCheckIn(user: Record<string, any>) {
+  visitorDataFromScannedQRCode.value = user;
+  dialog.showVisitorDataFromScannedQRCode = true;
+}
+
 function handleCheckout(userId: string) {
   if (!userId) {
     showMessage("Invalid userId", "error");