@7365admin1/layer-common 1.10.8 → 1.10.9

package/components/FileInput.vue

@@ -0,0 +1,289 @@
+<template>
+  <div>
+    <v-file-input
+      v-model="files"
+      :label="label"
+      accept="image/*"
+      :prepend-icon="prependIcon"
+      :loading="isFileUploading"
+      hide-details
+      chips
+      multiple
+      clearable
+      @update:modelValue="handleFileSelect"
+      @click:clear="handleClear"
+      :hide-input="hasHideInput"
+    >
+      <template v-slot:append v-if="hasLabel">
+        <slot name="append">
+          <v-btn color="primary" height="50px" @click="openCameraDialog">
+            <v-icon>mdi-camera</v-icon>
+          </v-btn>
+        </slot>
+      </template>
+    </v-file-input>
+
+    <!-- Camera Dialog -->
+    <v-dialog
+      v-model="showCameraDialog"
+      transition="dialog-bottom-transition"
+      width="800"
+      max-width="800"
+      persistent
+      @after-enter="startCamera"
+    >
+      <v-container
+        class="d-flex justify-center"
+        max-height="90vh"
+        width="800"
+        max-width="800"
+      >
+        <v-card elevation="2" class="d-flex flex-column align-center pa-2">
+          <v-toolbar>
+            <v-card-title class="text-h5">Take a Picture</v-card-title>
+            <v-spacer></v-spacer>
+            <v-btn
+              color="grey-darken-1"
+              icon="mdi-close"
+              @click="closeCameraDialog"
+            ></v-btn>
+          </v-toolbar>
+
+          <div
+            id="reader"
+            class="d-flex justify-center align-center"
+            style="
+              position: relative;
+              width: 500px;
+              min-width: 400px;
+              height: 400px;
+            "
+          >
+            <video
+              ref="video"
+              style="flex: 1; height: 400px; min-width: 300px"
+              class="video-shutter"
+              autoplay
+            ></video>
+            <canvas
+              ref="canvas"
+              style="flex: 1; height: 400px; min-width: 300px; display: none"
+            ></canvas>
+          </div>
+
+          <v-row align="center" justify="center">
+            <v-col cols="6">
+              <v-btn color="primary" icon class="mt-4" @click="switchCamera">
+                <v-icon>mdi-camera-switch</v-icon>
+              </v-btn>
+            </v-col>
+            <v-col cols="6">
+              <v-btn
+                color="secondary"
+                icon
+                class="mt-4"
+                @click="captureImageFromCamera"
+              >
+                <v-icon large>mdi-camera-outline</v-icon>
+              </v-btn>
+            </v-col>
+          </v-row>
+        </v-card>
+      </v-container>
+    </v-dialog>
+  </div>
+
+  <Snackbar v-model="messageSnackbar" :text="message" :color="messageColor" />
+</template>
+
+<script setup lang="ts">
+interface FileWithPreview {
+  name: string;
+  data: File;
+  progress: number;
+  url: string;
+}
+
+const props = defineProps({
+  label: {
+    type: String,
+    default: "Select File",
+  },
+  prependIcon: {
+    type: String,
+    default: "mdi-paperclip",
+  },
+  required: {
+    type: Boolean,
+    default: true,
+  },
+  initFiles: {
+    type: Array,
+  },
+  hasLabel: {
+    type: Boolean,
+    default: true,
+  },
+  hasHideInput: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits<{
+  (event: "onFileAttach", payload: Array<{ data: File }>): void;
+  (event: "update:files", files: FileWithPreview[]): void;
+  (event: "onFileRemoved", payload: { index: number; file: File }): void;
+  (event: "onClear"): void;
+}>();
+
+const { showUploadedFiles } = useUploadFiles();
+const isFileUploading = ref<boolean>(false);
+
+const files = ref<File[]>([]);
+const showCameraDialog = ref(false);
+const video = ref<HTMLVideoElement | null>(null);
+const canvas = ref<HTMLCanvasElement | null>(null);
+const cameraFacingMode = ref<"environment" | "user">("environment");
+
+const message = ref("");
+const messageColor = ref("");
+const messageSnackbar = ref(false);
+
+function showMessage(msg: string, color: string) {
+  message.value = msg;
+  messageColor.value = color;
+  messageSnackbar.value = true;
+}
+
+watchEffect(() => {
+  files.value = [...(props.initFiles as typeof files.value)];
+});
+
+const handleFileSelect = async () => {
+  if (files.value && files.value.length > 0) {
+    const newFiles = files.value.map((file: File) => ({
+      name: file.name,
+      data: file,
+      progress: 0,
+      url: URL.createObjectURL(file),
+    }));
+
+    //   attachedFiles.value = [...newFiles];
+    showUploadedFiles(newFiles);
+
+    emit("update:files", newFiles);
+  } else {
+    files.value = [...(props.initFiles as typeof files.value)];
+  }
+};
+
+const handleClear = () => {
+  files.value = [];
+  emit("onClear");
+};
+
+const openCameraDialog = () => {
+  showCameraDialog.value = true;
+};
+
+const closeCameraDialog = () => {
+  showCameraDialog.value = false;
+  stopCamera();
+};
+
+const startCamera = async () => {
+  try {
+    const constraints = {
+      video: {
+        facingMode: cameraFacingMode.value,
+      },
+    };
+
+    const stream = await navigator.mediaDevices.getUserMedia(constraints);
+    if (video.value) {
+      video.value.srcObject = stream;
+      video.value.play();
+    }
+  } catch (error: any) {
+    showMessage(error, "error");
+    closeCameraDialog();
+  }
+};
+
+const stopCamera = () => {
+  if (video.value) {
+    const stream = video.value.srcObject as MediaStream;
+    if (stream) {
+      stream.getTracks().forEach((track) => track.stop());
+    }
+  }
+};
+
+const switchCamera = async () => {
+  await stopCamera();
+  cameraFacingMode.value =
+    cameraFacingMode.value === "environment" ? "user" : "environment";
+  showMessage(
+    `Switched to ${
+      cameraFacingMode.value === "environment" ? "Back Camera" : "Front Camera"
+    }`,
+    "error"
+  );
+  startCamera();
+};
+
+const captureImageFromCamera = () => {
+  if (!video.value || !canvas.value) return;
+
+  const context = canvas.value.getContext("2d");
+  if (!context) return;
+
+  // Set canvas dimensions to match video
+  canvas.value.width = video.value.videoWidth;
+  canvas.value.height = video.value.videoHeight;
+
+  // Capture the frame
+  context.drawImage(video.value, 0, 0, canvas.value.width, canvas.value.height);
+
+  // Convert to file
+  canvas.value.toBlob((blob) => {
+    if (!blob) return;
+
+    const file = new File([blob], `camera-capture-${Date.now()}.png`, {
+      type: "image/png",
+    });
+
+    files.value = [file];
+    handleFileSelect();
+    closeCameraDialog();
+  }, "image/png");
+};
+
+const removeFile = (index) => {
+  const removedFile = files.value[index];
+  files.value = files.value.filter((_, i) => i !== index);
+  emit("onFileRemoved", { index, file: removedFile }); // Emit when a file is removed
+  // emit("onFilesUpdated", files.value); // Emit updated files list
+};
+
+// Cleanup
+onUnmounted(() => {
+  stopCamera();
+});
+</script>
+
+<style scoped>
+.custom-chip {
+  max-width: 100%;
+  height: auto !important;
+  white-space: normal;
+  padding: 3px 20px;
+}
+
+.chip-text {
+  word-break: break-word;
+  white-space: normal;
+  line-height: 1.2;
+}
+</style>

package/components/StockCard.vue

@@ -110,6 +110,10 @@
 </template>
 
 <script setup lang="ts">
+import useEquipment from "../composables/useEquipment";
+import useStock from "../composables/useStock";
+import useUtils from "../composables/useUtils";
+
 const props = defineProps({
   orgId: { type: String, default: "" },
   site: { type: String, default: "" },
@@ -126,18 +130,18 @@ const supply = ref({
   remarks: "",
 });
 
-const { getSupplyById } = useSupply();
+const { getEquipmentById } = useEquipment();
 
 const supplyId = useRoute().params.id as string;
 
-const { data: getSupplyByIdReq } = await useLazyAsyncData(
-  `get-supply-by-id-${supplyId}`,
-  () => getSupplyById(supplyId),
+const { data: getEquipmentByIdReq } = await useLazyAsyncData(
+  `get-equipment-by-id-${supplyId}`,
+  () => getEquipmentById(supplyId)
 );
 
 watchEffect(() => {
-  if (getSupplyByIdReq?.value) {
-    supply.value = getSupplyByIdReq.value as any;
+  if (getEquipmentByIdReq?.value) {
+    supply.value = getEquipmentByIdReq.value as any;
   }
 });
 
@@ -163,7 +167,7 @@ const {
   () => getStockBySupply(props.site, supplyId),
   {
     watch: [page, () => props.site, () => supplyId],
-  },
+  }
 );
 
 watchEffect(() => {

package/components/VisitorForm.vue

@@ -144,7 +144,8 @@
 
           <v-col v-if="shouldShowField('unit')" cols="12">
             <InputLabel class="text-capitalize" title="Registered Unit Company Name" required />
-            <v-text-field v-model.trim="registeredUnitCompanyName" density="comfortable" :loading="buildingUnitDataPending" readonly class="no-pointer" />
+            <v-text-field v-model.trim="registeredUnitCompanyName" density="comfortable"
+              :loading="buildingUnitDataPending" readonly class="no-pointer" />
           </v-col>
 
           <v-col v-if="shouldShowField('remarks')" cols="12">
@@ -154,10 +155,16 @@
 
           <v-col v-if="prop.type === 'contractor' && contractorStep === 2" cols="12">
             <PassInformation />
-            <EntryPassInformation v-if="entryPassSettings?.data?.settings?.nfcPass" v-model="passType"
-              v-model:quantity="passQuantity" v-model:cards="passCards" :settings="entryPassSettings"
-              :loading="entryPassSettingsPending" @scan:barcode="$emit('scan:barcode')"
-              @scan:camera="$emit('scan:camera')" />
+            <EntryPassInformation
+              v-if="entryPassSettings?.data?.settings?.nfcPass"
+              v-model="passType"
+              v-model:quantity="passQuantity"
+              v-model:cards="passCards"
+              :settings="entryPassSettings"
+              :loading="entryPassSettingsPending"
+              :site-id="prop.site"
+              :unit-id="visitor.unit || null"
+            />
           </v-col>
 
           <v-col v-if="prop.type === 'contractor' && contractorStep === 3" cols="12">
@@ -190,8 +197,8 @@
             prop.type === 'contractor' &&
             contractorStep > 1
           " tile block variant="text" class="text-none" size="48" @click="handleGoToPreviousPage" text="Back" />
-          <v-btn v-else-if="prop.mode === 'add' || prop.mode === 'register'" tile block variant="text" class="text-none" size="48"
-            @click="backToSelection" text="Back to Selection" />
+          <v-btn v-else-if="prop.mode === 'add' || prop.mode === 'register'" tile block variant="text" class="text-none"
+            size="48" @click="backToSelection" text="Back to Selection" />
           <v-btn v-else tile block variant="text" class="text-none" size="48" @click="emit('close:all')" text="Close" />
         </v-col>
         <v-col cols="6">
@@ -209,6 +216,44 @@
         :vehicle-number-users-list="vehicleNumberUserItems" @close="dialog.vehicleNumberUsersList = false"
         @update:people="handleAutofillDataViaVehicleNumber" />
     </v-dialog>
+
+    <v-dialog v-model="dialog.showNonCheckedOutDialog" max-width="700" persistent>
+      <v-card :loading="loading.checkingOut">
+        <v-toolbar>
+          <v-toolbar-title>
+            <v-row no-gutters class="d-flex align-center justify-space-between">
+              <span class="font-weight-bold">
+                You have an unchecked-out vehicle for: {{ visitor.plateNumber }}
+              </span>
+            </v-row>
+          </v-toolbar-title>
+        </v-toolbar>
+
+        <v-card-text>
+
+          <v-list lines="three">
+            <v-list-item v-if="matchingPlateNumberNonCheckedOutArr.length > 0"
+              v-for="v in matchingPlateNumberNonCheckedOutArr" :key="v._id" class="cursor-pointer">
+              <v-list-item-title>
+                {{ v.plateNumber }} - {{ v.name }}
+              </v-list-item-title>
+
+              <v-list-item-subtitle>
+                Checked In at : {{ UTCToLocalTIme(v.checkIn) }}
+              </v-list-item-subtitle>
+
+              <template #append>
+                <v-btn size="x-small" class="text-capitalize" color="red" text="Checkout"
+                  :loading="loading.checkingOut && v?._id === prop.visitorData?._id"
+                  @click.stop="handleCheckout(v._id)" />
+              </template>
+
+            </v-list-item>
+          </v-list>
+
+        </v-card-text>
+      </v-card>
+    </v-dialog>
   </v-card>
 </template>
 
@@ -243,12 +288,12 @@ type AutofillSource = "nric" | "contact" | "vehicleNumber" | null;
 const currentAutofillSource = ref<AutofillSource>(null);
 
 
-const { requiredRule, debounce } = useUtils();
+const { requiredRule, debounce, UTCToLocalTIme } = useUtils();
 const { getSiteById, getSiteLevels, getSiteUnits } = useSiteSettings();
-const { createVisitor, typeFieldMap, contractorTypes } = useVisitor();
+const { createVisitor, typeFieldMap, contractorTypes, getVisitors, updateVisitor } = useVisitor();
 const { getBySiteId: getEntryPassSettingsBySiteId } = useSiteEntryPassSettings();
 const { findPersonByNRIC, findPersonByContact, searchCompanyList, findUsersByPlateNumber } = usePeople()
-const { getById: getUnitDataById} = useBuildingUnit()
+const { getById: getUnitDataById } = useBuildingUnit()
 
 const emit = defineEmits([
   "back",
@@ -278,15 +323,20 @@ const visitor = reactive<Partial<TVisitorPayload>>({
 });
 
 const passType = ref("");
-const passQuantity = ref<number | null>(null);
+const passQuantity = ref<number | null>(1);
 const passCards = ref<string[]>([]);
 
 const registeredUnitCompanyName = ref('N/A')
 
 const dialog = reactive({
   vehicleNumberUsersList: false,
+  showNonCheckedOutDialog: false,
 });
 
+const loading = reactive({
+  checkingOut: false,
+})
+
 const validForm = ref(false);
 const formRef = ref<HTMLFormElement | null>(null);
 const processing = ref(false);
@@ -306,6 +356,8 @@ const blocksArray = ref<TDefaultOptionObj[]>([]);
 const levelsArray = ref<TDefaultOptionObj[]>([]);
 const unitsArray = ref<TDefaultOptionObj[]>([]);
 
+const matchingPlateNumberNonCheckedOutArr = ref<TVisitor[]>([])
+
 
 const vehicleNumberUserItems = ref<TPeople[]>([])
 
@@ -466,25 +518,70 @@ watch(fetchCompanyListReq, (arr) => {
   }
 })
 const {
-  data: fetchVehicleNumberUserReq,
-  refresh: fetchVehicleNumberUserRefresh,
-  pending: fetchVehicleNumberUserPending,
+  data: fetchVisitorListByVehicleNumberReq,
+  refresh: fetchVisitorListByVehicleNumberRefresh,
+  pending: fetchVisitorListByVehicleNumberPending,
 
-} = useLazyAsyncData(`fetch-vehicle-number-user-list`, () => {
+} = useLazyAsyncData(`fetch-visitor-list-by-vehicle-number`, () => {
   if (!visitor.plateNumber) return Promise.resolve(null)
-  return findUsersByPlateNumber(visitor.plateNumber)
+  return getVisitors({ page: 1, limit: 20, site: prop.site, plateNumber: visitor.plateNumber, checkedOut: false, status: "registered" })
 })
 
-watch(fetchVehicleNumberUserReq, (arr) => {
-  const arrayData = arr?.data
-  if (Array.isArray(arrayData)) {
-    vehicleNumberUserItems.value = arrayData;
-    if (arrayData.length > 0) {
-      dialog.vehicleNumberUsersList = true
-    }
+watch(fetchVisitorListByVehicleNumberReq, (arr: any) => {
+  const itemsArray = arr?.items || []
+  const isValidArray = Array.isArray(itemsArray)
+  matchingPlateNumberNonCheckedOutArr.value = isValidArray ? itemsArray : []
+  if(matchingPlateNumberNonCheckedOutArr.value.length > 0) {
+    dialog.showNonCheckedOutDialog = true;
+  } else {
+    dialog.showNonCheckedOutDialog = false;
   }
 })
 
+
+const debounceSearchVisitorsByPlateNumbers = debounce(() => {
+  if (!visitor.plateNumber) {
+    matchingPlateNumberNonCheckedOutArr.value = []
+    dialog.showNonCheckedOutDialog = false;
+    return;
+  }
+  fetchVisitorListByVehicleNumberRefresh();
+}, 300);
+
+watch(() => visitor.plateNumber, (newVal) => {
+  debounceSearchVisitorsByPlateNumbers();
+});
+
+
+
+async function handleCheckout(visitorId: string) {
+  if (!visitorId) {
+    errorMessage.value = "Invalid visitor ID. Cannot proceed with checkout.";
+    return;
+  }
+
+  try {
+    loading.checkingOut = true;
+    const res = await updateVisitor(visitorId as string, {
+      checkOut: new Date().toISOString(),
+    });
+    if (res) {
+      await fetchVisitorListByVehicleNumberRefresh(); 
+
+    }
+  } catch (error: any) {
+    const errorMessage = error?.response?._data?.message;
+    console.log("[ERROR]", error);
+    errorMessage.value =
+      errorMessage || "An error occurred while checking out the vehicle.";
+  } finally {
+    loading.checkingOut = false;
+  }
+}
+
+
+
+
 const debounceFetchCompany = debounce(async () => fetchCompanyListRefresh(), 200)
 
 watch(companyNameInput, async (val) => {
@@ -496,19 +593,7 @@ watch(companyNameInput, async (val) => {
 })
 
 
-const debounceSearchVehicleUsers = debounce(() => {
-  if (!visitor.plateNumber) {
-    vehicleNumberUserItems.value = [];
-    dialog.vehicleNumberUsersList = false;
-    return;
-  }
-  fetchVehicleNumberUserRefresh();
-}, 300);
 
-watch(() => visitor.plateNumber, (newVal) => {
-  if (currentAutofillSource.value && currentAutofillSource.value !== "vehicleNumber") return;
-  debounceSearchVehicleUsers();
-});
 
 
 function handleAutofillDataViaVehicleNumber(item: TPeople) {
@@ -766,12 +851,12 @@ async function submit() {
 
 
   if (prop.type === "contractor") {
-      // contractor type logic payload
-      payload = {
-        ...payload,
-        members: visitor.members,
-      };
-    }
+    // contractor type logic payload
+    payload = {
+      ...payload,
+      members: visitor.members,
+    };
+  }
   try {
     const res = await createVisitor(payload);
     if (res) {
@@ -801,9 +886,9 @@ onMounted(() => {
   contractorStep.value = 1;
   currentAutofillSource.value = null;
 
-  if(prop.mode === 'register' && prop.visitorData) {
-    console.log('Register mode, prefill visitor data', prop.visitorData?.plateNumber )
-   visitor.plateNumber = prop.visitorData?.plateNumber || ""
+  if (prop.mode === 'register' && prop.visitorData) {
+    console.log('Register mode, prefill visitor data', prop.visitorData?.plateNumber)
+    visitor.plateNumber = prop.visitorData?.plateNumber || ""
   }
 });
 </script>

package/composables/useAccessManagement.ts

@@ -55,10 +55,7 @@ export default function useAccessManagement() {
     );
   }
 
-  function getAllAccessCardsCounts(params: {
-    site: string;
-    userType: string;
-  }) {
+  function getAllAccessCardsCounts(params: { site: string; userType: string }) {
     return useNuxtApp().$api<Record<string, any>>(
       `/api/access-management/all-access-cards-counts`,
       {
@@ -71,14 +68,16 @@ export default function useAccessManagement() {
     );
   }
 
-  function getUserTypeAccessCards(params: {
-    page?: number;
-    limit?: number;
-    search?: string;
-    organization?: string;
-    userType?: string;
-    site?: string;
-  } = {}) {
+  function getUserTypeAccessCards(
+    params: {
+      page?: number;
+      limit?: number;
+      search?: string;
+      organization?: string;
+      userType?: string;
+      site?: string;
+    } = {}
+  ) {
     return useNuxtApp().$api<Record<string, any>>(
       `/api/access-management/user-type-access-cards`,
       {
@@ -200,12 +199,14 @@ export default function useAccessManagement() {
     );
   }
 
-  function getVisitorAccessCards(params: {
-    page?: number;
-    limit?: number;
-    site?: string;
-    search?: string;
-  } = {}) {
+  function getVisitorAccessCards(
+    params: {
+      page?: number;
+      limit?: number;
+      site?: string;
+      search?: string;
+    } = {}
+  ) {
     return useNuxtApp().$api<Record<string, any>>(
       `/api/access-management/visitor-access-cards`,
       {
@@ -221,6 +222,27 @@ export default function useAccessManagement() {
     );
   }
 
+  function getAvailableContractorCards(params: {
+    type: "NFC" | "QRCODE";
+    siteId: string;
+    unitId: string;
+    page?: number;
+    limit?: number;
+  }) {
+    return useNuxtApp().$api<Record<string, any>>(
+      `/api/access-management/available-card-contractor/${params.type}`,
+      {
+        method: "GET",
+        query: {
+          siteId: params.siteId,
+          unitId: params.unitId,
+          page: params.page ?? 1,
+          limit: params.limit ?? 100,
+        },
+      }
+    );
+  }
+
   return {
     getDoorAccessLevels,
     getLiftAccessLevels,
@@ -238,5 +260,6 @@ export default function useAccessManagement() {
     getVisitorAccessCards,
     saveVisitorAccessCardQrTag,
     getAllVisitorAccessCardsQrTags,
+    getAvailableContractorCards,
   };
 }