@7365admin1/layer-common 1.11.23 → 1.11.26

package/components/VisitorManagement.vue

@@ -109,6 +109,22 @@
         >
       </template>
 
+      <template v-slot:item.email="{ value }">
+        {{ value ?? "N/A" }}
+      </template>
+
+      <template v-slot:item.invited-by="{ item }">
+        <span class="d-flex align-center ga-2">
+          <AvatarMain
+            v-if="item?.inviterName"
+            :name="item?.inviterName"
+            :size="20"
+            :id="item?._id"
+          />
+          <span class="text-capitalize">{{ item?.inviterName ?? "N/A" }}</span>
+        </span>
+      </template>
+
       <template v-slot:item.type-company="{ item }">
         <span class="d-flex align-center ga-2">
           <v-icon icon="mdi-user" size="15" />
@@ -297,6 +313,49 @@
         </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" />
+            {{ item.arrivalTime ?? "N/A" }}
+          </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.status="{ item }">
+        <v-card
+          v-if="item?.overnightParking?.status"
+          size="small"
+          class="rounded-xl text-capitalize text-center elevation-0 py-1 px-2"
+          :color="getOvernightParkingRequestStatusColor(item?.overnightParking?.status as string)"
+          style="max-width: 150px; margin: auto"
+        >
+          {{ item?.overnightParking?.status }}
+        </v-card>
+        <span v-else> N/A </span>
+      </template>
+
       <template v-slot:item.action="{ item }">
         <v-btn
           v-if="activeTab === 'unregistered' && canAddVisitor"
@@ -305,6 +364,52 @@
           text="Register"
           @click.stop="handleRegistrationUnregisteredVisitor(item)"
         />
+        <v-menu v-else-if="activeTab === 'overnight-parking'">
+          <template #activator="{ props }">
+            <v-avatar class="rounded-xl border-md">
+              <v-icon v-bind="props" icon="mdi-dots-vertical" />
+            </v-avatar>
+          </template>
+
+          <v-card>
+            <v-list-item
+              @click.stop="
+                openApproveRejectOverNightParkingRequestDialog(
+                  item,
+                  overNightParkingListActions[0].status
+                )
+              "
+              :disabled="
+                item?.overnightParking?.status == 'approved' ||
+                !overNightParkingListActions[0].disabled
+              "
+            >
+              <template #title>
+                <span class="text-caption">
+                  {{ overNightParkingListActions[0].text }}
+                </span>
+              </template>
+            </v-list-item>
+            <v-divider />
+            <v-list-item
+              v-if="item?.overnightParking?.status !== 'approved'"
+              @click="
+                openApproveRejectOverNightParkingRequestDialog(
+                  item,
+                  overNightParkingListActions[1].status
+                )
+              "
+              :disabled="!overNightParkingListActions[1].disabled"
+            >
+              <template #title>
+                <span class="text-caption">
+                  {{ overNightParkingListActions[1].text }}
+                </span>
+              </template>
+            </v-list-item>
+            <v-divider />
+          </v-card>
+        </v-menu>
       </template>
 
       <template v-slot:item.checkInRemarks="{ item }">
@@ -371,9 +476,29 @@
         <template v-slot:content>
           <v-row no-gutters class="mb-4">
             <v-col v-for="(label, key) in formattedFields" :key="key" cols="12">
+              <span
+                v-if="
+                  key === 'checkIn' &&
+                  !selectedVisitorObject[key] &&
+                  canUpdateVisitor
+                "
+                class="d-flex align-center"
+              >
+                <strong>{{ label }}:</strong>
+                <v-btn
+                  size="x-small"
+                  class="ml-3 text-capitalize"
+                  color="success"
+                  text="Checkin"
+                  :disabled="isVisitorDataFromScannedQRCodeCheckingInOut"
+                  @click="handleCheckin(selectedVisitorObject)"
+                  :loading="isVisitorDataFromScannedQRCodeCheckingInOut"
+                />
+              </span>
               <span
                 v-if="
                   key === 'checkOut' &&
+                  selectedVisitorObject['checkIn'] &&
                   !selectedVisitorObject[key] &&
                   canCheckoutVisitor
                 "
@@ -496,6 +621,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
@@ -667,12 +811,90 @@
       />
     </v-dialog>
 
+    <v-dialog
+      v-model="dialog.approveRejectOvernightParkingRequestDialog"
+      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"> Overnight Parking Request </span>
+            <v-btn
+              icon="mdi-close"
+              variant="text"
+              @click="dialog.approveRejectOvernightParkingRequestDialog = false"
+            />
+          </v-row>
+        </v-toolbar>
+        <v-card-text class="px-4 pb-2">
+          <v-row no-gutters justify="center" align-content="center">
+            <v-col
+              v-if="
+                approveRejectOvernightParkingRequestDialog.status !== 'remarks'
+              "
+              cols="12"
+              class="text-h6 text-center"
+            >
+              {{
+                `Are you sure you want to ${approveRejectOvernightParkingRequestDialog.text} the visitor's overnight parking request?`
+              }}
+            </v-col>
+
+            <v-col cols="12" md="8" class="mt-4">
+              <v-textarea
+                v-model="overNightParkingRequestApproveRejectRemarks"
+                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"
+                variant="text"
+                block
+                :disabled="isApprovingRejectingOvernightParkingRequest"
+                @click="closeApproveRejectOvernightParkingDialog"
+              />
+            </v-col>
+            <v-col cols="6">
+              <v-btn
+                text="Yes"
+                color="success"
+                variant="flat"
+                height="48"
+                rounded="0"
+                block
+                :disabled="
+                  !overNightParkingRequestApproveRejectRemarks ||
+                  isApprovingRejectingOvernightParkingRequest
+                "
+                @click="updateOvernightParkingRequestStatus"
+                :loading="isApprovingRejectingOvernightParkingRequest"
+              />
+            </v-col>
+          </v-row>
+        </v-toolbar>
+      </v-card>
+    </v-dialog>
+
     <Snackbar v-model="messageSnackbar" :text="message" :color="messageColor" />
   </v-row>
 </template>
 
 <script setup lang="ts">
-import { errorConverter } from "../utils/data";
+import moment from "moment-timezone";
 
 definePageMeta({
   middleware: ["01-auth", "02-org"],
@@ -709,10 +931,15 @@ const {
   visitorSelection,
   typeFieldMap,
   updateVisitor,
-  visitorDataFromScannedQRCodeCheckInOut,
+  visitorDataFromScannedQRCodeCheckIn,
 } = useVisitor();
-const { debounce, formatCamelCaseToWords, formatDate, UTCToLocalTIme } =
-  useUtils();
+const {
+  debounce,
+  formatCamelCaseToWords,
+  formatDate,
+  UTCToLocalTIme,
+  standardFormatDate,
+} = useUtils();
 const { formatLocation } = useSecurityUtils();
 const { getFileUrlAnpr } = useFile();
 // const { status: visitorStatus, search } = useRoute().query as { status: string, search: string};
@@ -747,6 +974,7 @@ const messageSnackbar = ref(false);
 
 const loading = reactive({
   fetchingVisitors: false,
+  checkingIn: false,
   checkingOut: false,
   savingRemarks: false,
   updatingPassKeys: false,
@@ -763,6 +991,7 @@ const dialog = reactive({
   editPassKey: false,
   scanVisitorQRCode: false,
   showVisitorDataFromScannedQRCode: false,
+  approveRejectOvernightParkingRequestDialog: false,
 });
 
 const snapshotImageUrl = ref("");
@@ -770,29 +999,140 @@ const remarksType = ref<"checkIn" | "checkOut">("checkIn");
 const remarksInput = ref("");
 const remarksViewOnly = ref(false);
 
-const headers = computed(() => [
-  { title: "Name", value: "name" },
-  { 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 === "resident-transactions"
-    ? [
-        { title: "Check-in Remarks", value: "checkInRemarks" },
-        { title: "Check-out Remarks", value: "checkOutRemarks" },
-      ]
-    : []),
-  ...(activeTab.value === "unregistered"
-    ? [{ title: "Action", value: "action" }]
-    : []),
-]);
+const headers = computed(() => {
+  const tab = activeTab.value;
+
+  // 1. Define the specific headers for Overnight Parking
+  if (tab === "overnight-parking") {
+    return [
+      { title: "Name", value: "name" },
+      { title: "Email", value: "email" },
+      { title: "Invited By", value: "invited-by" },
+      { title: "Arrival Date/Time", value: "arrival-date-time" },
+      { title: "Check In/Out", value: "checkin-out" },
+      { title: "Status", value: "status" },
+      { title: "Action", value: "action" },
+    ];
+  }
+
+  // 2. Define logic for all other tabs
+  const list = [{ title: "Name", value: "name" }];
+
+  // Standard info for non-parking tabs
+  list.push(
+    { title: "Type/Company", value: "type-company" },
+    { title: "Location", value: "location" },
+    { title: "Contact/Vehicle No.", value: "contact-vehicleNumber" }
+  );
+
+  // Conditional logic for Guests vs Others
+  if (tab === "guests") {
+    list.push({ title: "Arrival Date/Time", value: "arrival-date-time" });
+  } else {
+    list.push({ title: "Check In/Out", value: "checkin-out" });
+  }
+
+  // Specific additions
+  if (tab === "resident-transactions") {
+    list.push(
+      { title: "Check-in Remarks", value: "checkInRemarks" },
+      { title: "Check-out Remarks", value: "checkOutRemarks" }
+    );
+  }
+
+  if (tab === "unregistered") {
+    list.push({ title: "Action", value: "action" });
+  }
+
+  return list;
+});
 
 const tabOptions = [
   { name: "Registered", value: "registered" },
   { name: "Unregistered", value: "unregistered" },
   { name: "Guests", value: "guests" },
   { name: "Resident Transactions", value: "resident-transactions" },
+  { name: "Overnight Parking", value: "overnight-parking" },
+];
+
+function getOvernightParkingRequestStatusColor(status: string) {
+  switch (status) {
+    case "approved":
+      return "success";
+    case "rejected":
+      return "error";
+    default:
+      return "grey";
+  }
+}
+
+const overNightParkingListActions = [
+  {
+    text: "Approve",
+    status: "approved",
+    disabled: props.canUpdateVisitor,
+  },
+  {
+    text: "Reject",
+    status: "rejected",
+    disabled: props.canUpdateVisitor,
+  },
 ];
+const overNightParkingRequestApproveRejectRemarks = ref("");
+const approveRejectOvernightParkingRequestDialog = ref({
+  text: "",
+  status: "",
+});
+const selectedOvernightParkingRequest = ref<Record<string, any>>({});
+
+function openApproveRejectOverNightParkingRequestDialog(
+  visitor: Record<string, any>,
+  status: string
+) {
+  selectedOvernightParkingRequest.value = visitor;
+  approveRejectOvernightParkingRequestDialog.value = {
+    text: status === "approved" ? "Approve" : "Reject",
+    status,
+  };
+  dialog.approveRejectOvernightParkingRequestDialog = true;
+}
+
+const isApprovingRejectingOvernightParkingRequest = ref(false);
+
+async function updateOvernightParkingRequestStatus() {
+  isApprovingRejectingOvernightParkingRequest.value = true;
+  try {
+    await visitorDataFromScannedQRCodeCheckIn({
+      type: "overnight-parking",
+      filter: {
+        _id: selectedOvernightParkingRequest.value._id,
+      },
+      update: {
+        status: approveRejectOvernightParkingRequestDialog.value.status,
+        remarks: overNightParkingRequestApproveRejectRemarks.value ?? "",
+        updatedBy: currentUser.value?._id,
+      },
+      userType: "site",
+    });
+    showMessage(
+      `Visitor's overnight parking request successfully ${approveRejectOvernightParkingRequestDialog.value.status}`,
+      "success"
+    );
+    await getVisitorRefresh();
+    closeApproveRejectOvernightParkingDialog();
+  } catch (error) {
+    showMessage(errorConverter(error), "error");
+  } finally {
+    isApprovingRejectingOvernightParkingRequest.value = false;
+  }
+}
+
+function closeApproveRejectOvernightParkingDialog() {
+  dialog.approveRejectOvernightParkingRequestDialog = false;
+  selectedVisitorId.value = "";
+  approveRejectOvernightParkingRequestDialog.value = { text: "", status: "" };
+  overNightParkingRequestApproveRejectRemarks.value = "";
+}
 
 function normalizeDateOnly(value: string) {
   if (!value) return "";
@@ -848,15 +1188,16 @@ function toRoute(tab: any) {
   const obj = tabOptions.find((x) => x.value === tab);
   if (!obj) return;
   page.value = 1;
-  navigateTo({
-    name: routeName,
-    params: {
-      org: orgId,
-    },
-    // query: {
-    //   tab
-    // },
-  });
+  getVisitorRefresh();
+  // navigateTo({
+  //   name: routeName,
+  //   params: {
+  //     org: orgId,
+  //   },
+  //   // query: {
+  //   //   tab
+  //   // },
+  // });
 }
 const {
   data: getVisitorReq,
@@ -869,8 +1210,8 @@ const {
       page: page.value,
       site: siteId,
       search: searchInput.value,
-      dateTo: normalizeDateOnly(dateTo.value),
-      dateFrom: normalizeDateOnly(dateFrom.value),
+      dateTo: moment(dateTo.value).endOf("day").toISOString(),
+      dateFrom: moment(dateFrom.value).startOf("day").toISOString(),
       type:
         filterTypes.value.length === 0 && activeTab.value === "registered"
           ? "contractor,delivery,walk-in,pick-up,drop-off,guest"
@@ -880,10 +1221,12 @@ 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";
+    } else if (activeTab.value === "overnight-parking") {
+      params.tab = "Overnight Parking";
     } else {
       params.status = activeTab.value;
     }
@@ -913,10 +1256,12 @@ watch(getVisitorReq, (newData: any) => {
   }
 });
 
-const selectedVisitorObject = computed(() => {
+const selectedVisitorObject = computed<Record<string, any>>(() => {
   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",
@@ -925,9 +1270,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) {
@@ -947,9 +1306,20 @@ function formatValues(key: string, value: any) {
 const visitorDataFromScannedQRCode = ref<Record<string, any>>({});
 
 function handleShowVisitorDataFromScannedQRCodeDialog(
-  _visitorDataFromScannedQRCode: Record<string, any>
+  scannedData: Record<string, any>
 ) {
-  visitorDataFromScannedQRCode.value = _visitorDataFromScannedQRCode;
+  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;
 }
 
@@ -961,24 +1331,32 @@ async function handleVisitorDataFromScannedQRCodeCheckInOut(
 ) {
   try {
     isVisitorDataFromScannedQRCodeCheckingInOut.value = true;
-    await visitorDataFromScannedQRCodeCheckInOut({
-      type,
-      filter: {
-        _id: visitorData._id,
-      },
-      update: {
-        updatedBy: currentUser.value._id,
-        visitorPassIds: visitorData.visitorPass.map(
-          (i: Record<string, any>) => i.keyId
-        ),
-        nric: visitorData.nric ?? "",
-        plateNumber: visitorData.plateNumber ?? "",
-      },
-      userType: "site",
-    });
-
-    dialog.scanVisitorQRCode = false;
+    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();
+    dialog.viewVisitor = false;
   } catch (error) {
     showMessage(errorConverter(error), "error");
   } finally {
@@ -1171,6 +1549,11 @@ const canConfirmCheckout = computed(() => {
   });
 });
 
+function handleCheckin(user: Record<string, any>) {
+  visitorDataFromScannedQRCode.value = user;
+  dialog.showVisitorDataFromScannedQRCode = true;
+}
+
 function handleCheckout(userId: string) {
   if (!userId) {
     showMessage("Invalid userId", "error");

package/composables/useVisitor.ts

@@ -90,6 +90,7 @@ export default function () {
     status?: string;
     checkedOut?: boolean;
     plateNumber?: string;
+    tab?: string;
   };
 
   async function getVisitors({
@@ -106,6 +107,7 @@ export default function () {
     // status = "registered"
     plateNumber = "",
     checkedOut,
+    tab,
   }: GetVisitorsParams = {}) {
     return await useNuxtApp().$api<Record<string, any>>(
       "/api/visitor-transactions",
@@ -124,6 +126,7 @@ export default function () {
           checkedOut,
           plateNumber,
           order,
+          tab,
         },
       }
     );
@@ -174,7 +177,7 @@ export default function () {
     );
   }
 
-  function visitorDataFromScannedQRCodeCheckInOut(payload: any) {
+  function visitorDataFromScannedQRCodeCheckIn(payload: any) {
     return useNuxtApp().$api<Record<string, any>>("/api/visitors/update-one", {
       method: "PUT",
       body: payload,
@@ -191,6 +194,6 @@ export default function () {
     deleteVisitor,
     validateVisitorQrCode,
     updateVisitorPassKey,
-    visitorDataFromScannedQRCodeCheckInOut,
+    visitorDataFromScannedQRCodeCheckIn,
   };
 }

package/package.json

@@ -2,7 +2,7 @@
   "name": "@7365admin1/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "1.11.23",
+  "version": "1.11.26",
   "author": "7365admin1",
   "main": "./nuxt.config.ts",
   "publishConfig": {

package/types/building.d.ts

@@ -4,7 +4,7 @@ declare type TBuilding = {
   name: string;
   block: number | null;
   levels: string[];
-  buildingFloorPlan: string[]
+  buildingFiles: { id: string, name: string }[] | string[];
 };
 
 declare type TBuildingUnit = {