@7365admin1/layer-common 1.11.2 → 1.11.4

package/components/OvernightParkingAvailability.vue

@@ -0,0 +1,267 @@
+<template>
+  <v-form v-model="isInternalFormValid" ref="internalFormRef" :readonly="viewMode">
+    <v-row no-gutters>
+      <v-col cols="12">
+        <v-row no-gutters class="d-flex align-center ga-2 justify-space-between">
+          <InputLabel class="text-capitalize" title="Overnight Parking Approval Hours" />
+          <span class="d-flex ga-2 align-center">
+            <p>Auto Approve Parking?</p>
+            <v-switch v-model="autoApproveOvernightParking" hide-details color="success" size="large" />
+          </span>
+        </v-row>
+        <v-card class="mt-2">
+          <v-card-text>
+            <template v-for="(slot, index) in overnightParkingSlotsArray" :key="slot.day">
+              <v-row no-gutters class="mb-4">
+                <v-col cols="12" class="text-capitalize mb-2 text-subtitle-1 d-flex align-center justify-space-between">
+                  <span class="font-weight-black">{{ slot.day }}</span>
+                  <v-icon :icon="slot?.isEnabled ? 'mdi-check-circle' : 'mdi-check-circle-outline'" size="20"
+                    :class="{ 'cursor-pointer': !viewMode }"
+                    :color="slot.isEnabled ? 'green-darken-2' : 'black-lighten-1'"
+                    @click="!viewMode && toggleEnabled(slot.day)" />
+                </v-col>
+
+                <v-col cols="6" class="pr-2">
+                  <InputLabel title="Start" :required="slot.isEnabled" />
+                  <v-select v-model="slot.startTime" :disabled="!slot.isEnabled" :items="allTimeSlots" item-value="time"
+                    item-title="time" density="comfortable" :rules="slot.isEnabled ? [requiredRule] : []"
+                    @update:model-value="slot.endTime = null" />
+                </v-col>
+
+                <v-col cols="6" class="pl-2">
+                  <InputLabel title="End" :required="slot.isEnabled" />
+                  <v-select v-model="slot.endTime" :disabled="!slot.isEnabled"
+                    :items="generateTimeSlots(0.5, slot.startTime ?? undefined)" item-value="time" item-title="time"
+                    density="comfortable" :rules="slot.isEnabled ? [requiredRule] : []" />
+                </v-col>
+
+                <v-col v-if="!viewMode" cols="12" class="mt-1">
+                  <div class="d-flex align-center ga-1 cursor-pointer text-caption text-medium-emphasis"
+                    @click="applyToOtherDays(slot.day)">
+                    <v-icon icon="mdi-content-copy" size="14" />
+                    <span>Apply to other days</span>
+                  </div>
+                </v-col>
+              </v-row>
+
+              <v-divider v-if="index < overnightParkingSlotsArray.length - 1" class="mb-4" />
+            </template>
+
+            <v-col cols="12" align="end">
+              <v-btn color="primary" class="text-none mt-2" size="large" :loading="loading.updating" variant="flat"
+                text="Save" :disabled="viewMode || !isValid" @click="handleSave('save')" />
+            </v-col>
+          </v-card-text>
+        </v-card>
+      </v-col>
+    </v-row>
+  </v-form>
+
+  <Snackbar v-model="messageSnackbar" :text="message" :color="messageColor" style="z-index: 3000;" />
+
+  <v-dialog v-model="applyDialog.open" max-width="360" persistent>
+    <v-card>
+      <v-card-title class="text-subtitle-1 font-weight-bold pt-4 px-4">Apply to days</v-card-title>
+      <v-card-text class="px-4 pb-2">
+        <p class="text-caption text-medium-emphasis mb-3">
+          Select the days to apply <span class="font-weight-bold text-capitalize">{{ applyDialog.sourceDay }}</span>'s
+          hours to.
+        </p>
+        <v-checkbox v-for="day in applyDialog.targetDays" :key="day.day" v-model="day.selected" :label="day.day"
+          density="compact" hide-details class="text-capitalize" />
+      </v-card-text>
+      <v-card-actions class="px-4 pb-4">
+        <v-spacer />
+        <v-btn variant="text" @click="applyDialog.open = false">Cancel</v-btn>
+        <v-btn color="primary" variant="flat" :disabled="!applyDialog.targetDays.some(d => d.selected)"
+          @click="confirmApply">Apply</v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  viewMode: {
+    type: Boolean,
+    default: false,
+    required: false,
+  },
+  site: {
+    type: String,
+    default: "",
+    required: false,
+  }
+})
+
+
+const model = ref<TOvernightParkingAvailability>({
+  monday: { isEnabled: false, startTime: null, endTime: null },
+  tuesday: { isEnabled: false, startTime: null, endTime: null },
+  wednesday: { isEnabled: false, startTime: null, endTime: null },
+  thursday: { isEnabled: false, startTime: null, endTime: null },
+  friday: { isEnabled: false, startTime: null, endTime: null },
+  saturday: { isEnabled: false, startTime: null, endTime: null },
+  sunday: { isEnabled: false, startTime: null, endTime: null },
+})
+
+
+const autoApproveOvernightParking = ref(false)
+
+const { requiredRule } = useUtils()
+const { generateTimeSlots, generateTimeSlotsFromStart } = useFacilityUtils()
+const { updateOvernightParkingAvailability, getOvernightParkingAvailability } = useSiteSettings()
+
+type TDay = Exclude<keyof TOvernightParkingAvailability, 'autoApproveOvernightParking'>
+type TOvernightParkingSlot = TOvernightParkingDay & { day: TDay }
+
+const orderedDays: TDay[] = ['monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday', 'sunday']
+
+const allTimeSlots = computed(() => generateTimeSlotsFromStart(0.5))
+
+const isInternalFormValid = ref(false)
+const internalFormRef = ref<InstanceType<typeof import('vuetify/components').VForm>>()
+
+const messageSnackbar = ref(false)
+const message = ref('')
+const messageColor = ref<'success' | 'error'>()
+
+const loading = reactive({
+  updating: false
+})
+
+const applyDialog = reactive({
+  open: false,
+  sourceDay: '' as TDay,
+  targetDays: [] as { day: TDay; selected: boolean }[],
+})
+
+
+
+const { data: availabilityDataReq, refresh: refreshAvailability } = await useLazyAsyncData<TOvernightParkingAvailability>(
+  `overnight-parking-availability-${props.site}`,
+  () => getOvernightParkingAvailability(props.site)
+)
+
+watch(availabilityDataReq, (data) => {
+  if (!data) return
+  orderedDays.forEach((day) => {
+    const slot = overnightParkingSlotsArray.value.find((s) => s.day === day)
+    if (!slot) return
+    slot.isEnabled = data?.[day]?.isEnabled ?? false
+    slot.startTime = data?.[day]?.startTime ?? null
+    slot.endTime = data?.[day]?.endTime ?? null
+  })
+
+  autoApproveOvernightParking.value = data?.autoApproveOvernightParking === true
+}, { immediate: true })
+
+
+const overnightParkingSlotsArray = ref<TOvernightParkingSlot[]>(
+  orderedDays.map((day) => ({
+    day,
+    isEnabled: model.value?.[day]?.isEnabled ?? false,
+    startTime: model.value?.[day]?.startTime ?? null,
+    endTime: model.value?.[day]?.endTime ?? null,
+  }))
+)
+
+watch(overnightParkingSlotsArray, (slots) => {
+  const updated = {} as TOvernightParkingAvailability
+  slots.forEach((slot) => {
+    updated[slot.day] = {
+      isEnabled: slot.isEnabled,
+      startTime: slot.startTime,
+      endTime: slot.endTime,
+    }
+  })
+  model.value = updated
+}, { deep: true })
+
+function toggleEnabled(day: TDay) {
+  const slot = overnightParkingSlotsArray.value.find((s) => s.day === day)
+  if (!slot) return
+  internalFormRef.value?.resetValidation()
+  slot.isEnabled = !slot.isEnabled
+}
+
+function applyToOtherDays(sourceDay: TDay) {
+  applyDialog.sourceDay = sourceDay
+  applyDialog.targetDays = orderedDays
+    .filter((d) => d !== sourceDay)
+    .map((d) => ({ day: d, selected: false }))
+  applyDialog.open = true
+}
+
+function confirmApply() {
+  const source = overnightParkingSlotsArray.value.find((s) => s.day === applyDialog.sourceDay)
+  if (!source) return
+  const selectedDays = applyDialog.targetDays.filter((d) => d.selected).map((d) => d.day)
+  overnightParkingSlotsArray.value.forEach((slot) => {
+    if (selectedDays.includes(slot.day)) {
+      slot.startTime = source.startTime
+      slot.endTime = source.endTime
+      slot.isEnabled = source.isEnabled
+    }
+  })
+  applyDialog.open = false
+  message.value = `Applied ${applyDialog.sourceDay}'s hours to ${selectedDays.join(', ')}.`
+  messageColor.value = 'success'
+  messageSnackbar.value = true
+}
+
+const isValid = computed(() => {
+  const slots = overnightParkingSlotsArray.value
+  const enabledSlots = slots.filter((s) => s.isEnabled)
+  const isAllSlotsValid = slots.every((s) => {
+    if (!s.isEnabled) return true
+    return !!s.startTime?.trim() && !!s.endTime?.trim()
+  })
+  return isAllSlotsValid && enabledSlots.length > 0
+})
+
+watch(autoApproveOvernightParking, (newValue, oldValue) => {
+  if (oldValue === newValue) return
+  handleSave('toggle')  
+})
+
+
+function handleSave(action: 'toggle' | 'save') {
+  if (!isValid.value && action === 'save') {
+    message.value = 'Please fill in all required fields.'
+    messageColor.value = 'error'
+    messageSnackbar.value = true
+    return
+  }
+
+  let payload = {}
+
+  if(action === 'save') {
+    payload = {
+      ...model.value
+    }
+  } else if (action === 'toggle') {
+    payload = {
+      autoApproveOvernightParking: autoApproveOvernightParking.value,
+    }
+  }
+
+  try {
+    loading.updating = true
+    updateOvernightParkingAvailability(props.site, payload)
+    message.value = 'Overnight parking settings updated successfully.'
+    messageColor.value = 'success'
+    messageSnackbar.value = true
+  } catch (error) {
+    message.value = 'Failed to update overnight parking settings. Please try again.'
+    messageColor.value = 'error'
+    messageSnackbar.value = true
+  } finally {
+    loading.updating = false
+  }
+
+}
+
+</script>
+
+<style scoped></style>

package/components/OvernightParkingManagement.vue

@@ -0,0 +1,130 @@
+<template>
+  <v-row no-gutters>
+    <TableMain
+      :headers="headers"
+      :items="items"
+      :loading="loading"
+      :page="page"
+      :pages="pages"
+      :pageRange="pageRange"
+      :createLabel="createLabel"
+      :show-header="true"
+      :extension-height="extensionHeight"
+      :offset="offset"
+      v-model:search="searchInput"
+      @refresh="emits('refresh')"
+      @create="emits('create')"
+      @row-click="handleRowClick"
+      @update:page="handleUpdatePage"
+    >
+
+      <template #item.dateRequested="{ value }">
+        {{ formatDateDDMMYYYYLocal(value) }}
+      </template>
+
+      <template #item.status="{ value }">
+        <v-chip
+          class="text-capitalize"
+          :color="formatStatus(value).color"
+          variant="flat"
+          pill
+        >
+          {{ formatStatus(value).label }}
+        </v-chip>
+      </template>
+
+      <template #item.start="{ value }">
+        {{ formatTimeValue(value) }}
+      </template>
+
+      <template #item.end="{ value }">
+        {{ formatTimeValue(value) }}
+      </template>
+
+      <template #item.action="{ item }">
+        <v-btn v-if="item.status === 'pending'" color="success" density="compact">Approve</v-btn>
+      </template>
+
+      <template v-if="$slots.footer" #footer>
+        <slot name="footer" />
+      </template>
+    </TableMain>
+  </v-row>
+</template>
+
+<script setup lang="ts">
+import useUtils from "../composables/useUtils";
+
+const props = defineProps({
+  site: {
+    type: String,
+    default: "",
+    required: false,
+  },
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+
+
+});
+
+const emits = defineEmits(["refresh", "create", "row-click", "update:page"]);
+
+const searchInput = defineModel<string>("search", { default: "" });
+
+const { standardFormatDate, formatDateDDMMYYYYLocal } = useUtils();
+
+const items = ref<TOvernightParkingRequest[]>([])
+const page = ref(1)
+const pages = ref(1)
+const pageRange = ref("-- - -- of --");
+const extensionHeight = ref(0)
+const offset = ref(0)
+const createLabel = "New Overnight Parking Request"
+
+const headers = [
+  { title: "Name", value: "name" },
+  { title: "Plate Number", value: "plateNumber" },
+  { title: "Date Requested", value: "dateTime" },
+  { title: "Invited By", value: "invitedBy" },
+  { title: "Status", value: "status" },
+  { title: "Action", value: "action" },
+];
+
+function formatStatus(status: TOvernightParkingRequest["status"]) {
+  switch (String(status || "").toLowerCase()) {
+    case "approved":
+      return { color: "success", label: "Approved" };
+    case "expired":
+      return { color: "grey", label: "Expired" };
+    case "rejected":
+      return { color: "error", label: "Rejected" };
+    case "pending":
+      return { color: "warning", label: "Pending" };
+    default:
+      return { color: "secondary", label: status || "N/A" };
+  }
+}
+
+
+function formatTimeValue(value: TOvernightParkingRequest["start"] | TOvernightParkingRequest["end"]) {
+  if (!value) return "N/A";
+
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return String(value);
+
+  return date.toLocaleTimeString("en-US", {
+    hour: "2-digit",
+    minute: "2-digit",
+  });
+}
+
+function handleRowClick(data: { item?: TOvernightParkingRequest }) {
+  emits("row-click", data);
+}
+
+function handleUpdatePage(value: number) {
+  emits("update:page", value);
+}
+</script>

package/components/Signature.vue

@@ -1,11 +1,12 @@
 <template>
-  <v-dialog max-width="700" v-model="isDialogVisible" persistent>
+  <v-dialog v-model="dialogModel" max-width="700" persistent>
     <v-card>
       <v-toolbar>
-        <v-toolbar-title>Signature </v-toolbar-title>
+        <v-toolbar-title>Signature</v-toolbar-title>
         <v-spacer />
-        <v-btn icon="mdi-close" @click="hideModal"></v-btn>
+        <v-btn icon="mdi-close" @click="hideModal" />
       </v-toolbar>
+
       <v-card-text>
         <v-row no-gutters>
           <v-col cols="12">
@@ -16,8 +17,8 @@
             <NuxtSignaturePad
               ref="signature"
               :options="state.option"
-              :width="'100%'"
-              :height="'400px'"
+              width="100%"
+              height="400px"
               :disabled="state.disabled"
               class="border"
             />
@@ -29,10 +30,9 @@
                 <v-btn
                   text="clear"
                   color="warning"
-                  type="submit"
                   class="my-4 w-100 rounded-lg"
                   height="40px"
-                  @click="clear()"
+                  @click="clear"
                 />
               </v-col>
 
@@ -40,12 +40,11 @@
                 <v-btn
                   text="submit"
                   color="#1867C0"
-                  type="submit"
                   class="my-4 w-100 rounded-lg"
                   height="40px"
                   :loading="loading"
-                  @click="submit"
                   :disabled="loading"
+                  @click="submit"
                 />
               </v-col>
             </v-row>
@@ -58,8 +57,6 @@
 
 <script setup lang="ts">
 const loading = ref(false);
-// const { isValid } = useAudit();
-// const { uiRequiredInput, uiSetSnackbar } = useUtils();
 
 const message = ref("");
 const messageColor = ref("");
@@ -71,7 +68,8 @@ function showMessage(msg: string, color: string) {
   messageSnackbar.value = true;
 }
 
-const signature = ref(null);
+const signature = ref<any>(null);
+
 const state = ref({
   count: 0,
   option: {
@@ -85,40 +83,50 @@ const emit = defineEmits<{
   (event: "onSubmit", payload: string): void;
   (event: "onCloseDialog"): void;
 }>();
-let props = defineProps({
+
+const props = defineProps({
   isShowDialog: {
     type: Boolean,
     default: false,
   },
 });
 
-const isDialogVisible = computed(() => props.isShowDialog);
+const dialogModel = computed({
+  get: () => props.isShowDialog,
+  set: (value: boolean) => {
+    if (!value) emit("onCloseDialog");
+  },
+});
 
 const hideModal = () => {
   emit("onCloseDialog");
 };
+
 const file = ref<File | null>(null);
 const { addFile } = useFile();
+
 const submit = async () => {
   try {
+    if (!signature.value) {
+      showMessage("Signature pad is not ready.", "error");
+      return;
+    }
+
     loading.value = true;
-    const base64 = signature.value.saveSignature();
-    const blob = await (await fetch(base64)).blob();
 
-    file.value = new File([blob], "signature.jpg", { type: "image/jpeg" });
+    const base64 = signature.value.saveSignature?.();
+    if (!base64) {
+      showMessage("Please provide a signature first.", "warning");
+      return;
+    }
 
-    const uploadItem = {
-      data: file.value,
-      name: file.value.name,
-      url: URL.createObjectURL(file.value),
-      progress: 0,
-      type: file.value.type,
-    };
+    const blob = await (await fetch(base64)).blob();
+    file.value = new File([blob], "signature.jpg", { type: "image/jpeg" });
 
-    const response = await addFile(uploadItem.data);
+    const response = await addFile(file.value);
 
-    if (response && response.length > 0) {
-      emit("onSubmit", response[0]._id);
+    if (response && response.id) {
+      emit("onSubmit", response.id);
     }
   } catch (error) {
     showMessage("Error uploading signature. Please try again.", "error");
@@ -128,6 +136,6 @@ const submit = async () => {
 };
 
 const clear = () => {
-  signature.value.clearCanvas();
+  signature.value?.clearCanvas?.();
 };
 </script>

package/components/UnitMain.vue

@@ -211,10 +211,12 @@
 <script setup lang="ts">
 import { useUnitPermission } from "../composables/useUnitPermission";
 import useUnits from "../composables/useUnits";
+import useUtils from "../composables/useUtils";
 
 const props = defineProps({
   orgId: { type: String, default: "" },
   site: { type: String, default: "" },
+  serviceType: { type: String, default: "", required: true },
 });
 
 const items = ref<Array<Record<string, any>>>([]);
@@ -252,6 +254,7 @@ const {
       page: page.value,
       search: searchInput.value,
       site: props.site,
+      serviceType: props.serviceType,
     }),
   {
     watch: [page, () => props.site],
@@ -389,7 +392,7 @@ async function _createUnit(name: string) {
       if (!id) throw new Error("Invalid unit id for update");
       response = await updateUnit(id, name);
     } else {
-      response = await createUnit(name, props.site);
+      response = await createUnit(name, props.site, props.serviceType);
     }
     showMessage(response?.message, "success");
     dialogShowForm.value = false;

package/components/VisitorForm.vue

@@ -289,6 +289,7 @@
 
 <script setup lang="ts">
 import useBuildingUnit from '../composables/useBuildingUnit';
+import useWebUsb from '../composables/useWebUsb';
 
 
 const prop = defineProps({
@@ -322,7 +323,8 @@ const { requiredRule, debounce, UTCToLocalTIme } = useUtils();
 const { getSiteById, getSiteLevels, getSiteUnits } = useSiteSettings();
 const { createVisitor, typeFieldMap, contractorTypes, getVisitors, updateVisitor } = useVisitor();
 const { getBySiteId: getEntryPassSettingsBySiteId } = useSiteEntryPassSettings();
-const { createVisitorPass } = useAccessManagement();
+const { createVisitorPass, signQr } = useAccessManagement();
+const { testConnection } = useWebUsb();
 const { findPersonByNRIC, findPersonByContact, searchCompanyList, findUsersByPlateNumber } = usePeople()
 const { getById: getUnitDataById } = useBuildingUnit()
 
@@ -353,7 +355,7 @@ const visitor = reactive<Partial<TVisitorPayload>>({
   members: [],
 });
 
-const passType = ref("");
+const passType = ref<string | null>(null);
 const passQuantity = ref<number | null>(1);
 const passCards = ref<{ _id: string; cardNo: string }[]>([]);
 
@@ -655,15 +657,9 @@ function handleAutofillDataViaVehicleNumber(item: TPeople) {
 const {
   data: entryPassSettings,
   pending: entryPassSettingsPending,
-  refresh: refreshEntryPassSettings,
-} = useLazyAsyncData(`fetch-entrypass-settings-${prop.site}`, () => {
-  if (contractorStep.value !== 2) return Promise.resolve(null);
-  return getEntryPassSettingsBySiteId(prop.site);
-});
-
-watch(contractorStep, (step) => {
-  if (step === 2) refreshEntryPassSettings();
-});
+} = useLazyAsyncData(`fetch-entrypass-settings-${prop.site}`, () =>
+  getEntryPassSettingsBySiteId(prop.site)
+);
 
 const {
   data: siteData,
@@ -908,10 +904,13 @@ async function submit() {
     const res = await createVisitor(payload);
     if (res) {
       if (prop.type === "contractor" && passType.value) {
-        const visitorId = res?._id;
-        const acmUrl = entryPassSettings.value?.data?.settings?.acm_url;
+        const visitorId = res as unknown as string;
+        const rawUrl = entryPassSettings.value?.data?.settings?.url;
+        const { encrypted: acmUrl } = await $fetch<{ encrypted: string }>(
+          `/api/encrypt-acm-url${rawUrl ? `?url=${encodeURIComponent(rawUrl)}` : ""}`
+        );
         if (visitorId && acmUrl) {
-          await createVisitorPass({
+          const passRes = await createVisitorPass({
             site: prop.site,
             unitId: visitor.unit!,
             quantity: passQuantity.value ?? 1,
@@ -920,6 +919,37 @@ async function submit() {
             acm_url: acmUrl,
             visitorId,
           });
+
+          if (passType.value === "QR") {
+            const accessCards: any[] = (passRes as any)?.accessCards ?? [];
+            const printer = entryPassSettings.value?.data?.settings?.printer;
+            if (printer?.vendorId && printer?.productId && accessCards.length) {
+              const vendorId = parseInt(printer.vendorId);
+              const productId = parseInt(printer.productId);
+              const companyName = visitor.company || "";
+              const blockLabel = blocksArray.value.find((b: any) => b.value === visitor.block)?.title || "";
+              const levelLabel = levelsArray.value.find((l: any) => l.value === visitor.level)?.title || "";
+              const unitLabel = unitsArray.value.find((u: any) => u.value === visitor.unit)?.title || "";
+              const address = [blockLabel, levelLabel, unitLabel].filter(Boolean).join("/");
+
+              await nextTick();
+              for (const qrCode of accessCards) {
+                const signed = await signQr({ cardId: qrCode._id, purpose: "vms" });
+                const qrData = signed?.data;
+                if (!qrData) continue;
+                await testConnection(
+                  vendorId,
+                  productId,
+                  true,
+                  qrData,
+                  qrCode.accessLevel,
+                  qrCode.liftAccessLevel,
+                  companyName,
+                  address,
+                );
+              }
+            }
+          }
         }
       }
       if (createMore.value) {

package/composables/useAccessManagement.ts

@@ -279,6 +279,16 @@ export default function useAccessManagement() {
     );
   }
 
+  function signQr(payload: { cardId: string; purpose: string }) {
+    return useNuxtApp().$api<{ message: string; data: string }>(
+      `/api/access-management/sign-qr`,
+      {
+        method: "POST",
+        body: payload,
+      }
+    );
+  }
+
   return {
     getDoorAccessLevels,
     getLiftAccessLevels,
@@ -299,5 +309,6 @@ export default function useAccessManagement() {
     getAvailableContractorCards,
     generateQrVms,
     createVisitorPass,
+    signQr,
   };
 }