@7365admin1/layer-common 1.10.8 → 1.10.10

package/components/DeliveryCompany.vue

@@ -0,0 +1,240 @@
+<template>
+    <v-row no-gutters class="pa-3">
+        <v-col cols="12">
+            <v-card width="100%" variant="outlined" border="thin" rounded="lg" max-width="700" max-height="500"
+                style="overflow-y: auto;">
+                <v-toolbar density="compact" color="grey-lighten-4 pl-2 pr-4">
+                    <v-row v-if="!hideTitle" no-gutters class="px-3 font-weight-bold">
+                        Delivery Companies
+                    </v-row>
+
+                    <template #append>
+                        <v-btn v-if="!props.readOnly" variant="flat" color="primary" class="text-none"
+                            @click="handleAdd">
+                            Add
+                        </v-btn>
+                    </template>
+                </v-toolbar>
+
+                <v-card-text class="pa-0" style="min-height: 100px;">
+                    <template v-if="companies.length > 0">
+                        <draggable :list="companies" item-key="index" class="drag-area"
+                            :disabled="editingIndex !== null">
+                            <v-list-item v-for="(item, index) in companies" :key="index" class="mt-1">
+                                <v-row class="d-flex justify-space-between align-center" no-gutters>
+                                    <span class="d-flex align-center">
+                                        <v-btn icon="mdi-drag" class="drag-handle text-grey mr-2" flat
+                                            density="compact" />
+
+                                        <div v-if="editingIndex === index" class="w-full">
+                                            <v-text-field v-model="editedValue" class="text-subtitle-2"
+                                                prepend-icon="mdi-truck" style="min-width: 300px;" density="compact"
+                                                hide-details autofocus />
+                                        </div>
+
+                                        <div v-else>
+                                            <span>
+                                                <v-icon icon="mdi-truck" class="text-h6 mr-2" />
+                                            </span>
+                                            {{ item }}
+                                        </div>
+                                    </span>
+
+                                    <span class="d-flex align-center ga-2">
+                                        <template v-if="editingIndex === index">
+                                            <v-btn icon="mdi-check" color="green" density="compact"
+                                                @click="saveEdit(index)" />
+                                            <v-btn icon="mdi-close" color="grey" density="compact"
+                                                @click="cancelEdit" />
+                                        </template>
+
+                                        <template v-else>
+                                            <v-btn v-if="!props.readOnly" flat icon="mdi-pencil" class="text-grey"
+                                                density="compact" @click="startEdit(index)" />
+                                            <v-btn v-if="!props.readOnly" flat icon="mdi-trash-outline" class="text-red"
+                                                density="compact" @click="handleRemove(index)" />
+                                        </template>
+                                    </span>
+                                </v-row>
+                            </v-list-item>
+                        </draggable>
+                    </template>
+
+                    <div v-else class="text-center py-5">
+                        No delivery companies added yet.
+                    </div>
+                </v-card-text>
+            </v-card>
+        </v-col>
+
+        <v-dialog v-model="dialog.add" persistent width="450">
+            <v-card width="100%">
+                <v-toolbar>
+                    <v-row no-gutters class="fill-height px-6" align="center">
+                        <span class="font-weight-bold text-h5 text-capitalize">
+                            Add Delivery Company
+                        </span>
+                    </v-row>
+                </v-toolbar>
+
+                <v-card-text>
+                    <v-text-field v-model="editedValue" placeholder="Company Name" autofocus />
+                </v-card-text>
+
+                <v-toolbar>
+                    <v-row no-gutters justify="end" align="center" class="px-5">
+                        <v-btn variant="text" text="Cancel" @click="dialog.add = false" />
+                        <v-btn variant="flat" color="primary" class="text-none ml-2"
+                            @click="saveEdit(companies.length)">
+                            Add
+                        </v-btn>
+                    </v-row>
+                </v-toolbar>
+            </v-card>
+        </v-dialog>
+
+        <Snackbar v-model="toast.show" :text="toast.message" :color="toast.color" />
+
+        <v-dialog v-model="dialog.delete" persistent width="450">
+            <CardDeleteConfirmation
+                :prompt-title="`Are you sure you want to delete this ${companies?.[deleteIndex!]}?`"
+                @close="dialog.delete = false"
+                @delete="removeCompany(deleteIndex!)"
+            />
+        </v-dialog>
+    </v-row>
+</template>
+
+<script setup lang="ts">
+import useSiteSettings from '../composables/useSiteSettings'
+
+const props = defineProps<{
+    site: string
+    readOnly?: boolean
+    hideTitle?: boolean
+}>()
+
+const emit = defineEmits<{
+    (e: 'update:companiesValue', value: string[]): void
+    (e: 'refresh-site'): void
+}>()
+
+const { updateSitebyId } = useSiteSettings()
+
+const initialCompanies = defineModel<string[]>('initial', {
+    type: Array,
+    default: []
+})
+
+const dialog = reactive({
+    add: false,
+    delete: false,
+})
+
+const toast = reactive({
+    show: false,
+    message: '',
+    color: 'success',
+})
+
+const companies = ref<string[]>([])
+const editingIndex = ref<number | null>(null)
+const editedValue = ref('')
+const isHydrating = ref(true)
+const deleteIndex = ref<number | null>(null)
+
+
+
+watch(
+    companies,
+    async (newVal) => {
+        await persistCompanies()
+    },
+    { deep: true, immediate: false }
+)
+
+const startEdit = (index: number) => {
+    editingIndex.value = index
+    editedValue.value = companies.value[index] || ''
+}
+
+const saveEdit = async (index: number) => {
+    const value = editedValue.value.trim()
+    if (!value) return
+
+    const updated = [...companies.value]
+
+    if (index >= updated.length) {
+        updated.push(value)
+    } else {
+        updated[index] = value
+    }
+
+    companies.value = updated
+    editingIndex.value = null
+    editedValue.value = ''
+    dialog.add = false
+}
+
+const cancelEdit = () => {
+    editingIndex.value = null
+    editedValue.value = ''
+}
+
+const handleAdd = () => {
+    dialog.add = true
+    editedValue.value = ''
+    editingIndex.value = null
+}
+
+const removeCompany = async (index: number) => {
+    const updated = [...companies.value]
+    updated.splice(index, 1)
+    companies.value = updated
+    dialog.delete = false
+}
+
+const handleRemove = async (index: number) => {
+   deleteIndex.value = index;
+   dialog.delete = true;
+}
+
+const persistCompanies = async () => {
+    try {
+        const isSame =
+            companies.value.length === initialCompanies.value.length &&
+            companies.value.every((c, i) => c === initialCompanies.value[i]);
+        if (isSame) return
+
+
+        await updateSitebyId(props.site, {
+            deliveryCompanyList: companies.value,
+        })
+
+        toast.message = 'Delivery companies updated successfully!'
+        toast.color = 'success'
+        toast.show = true
+        emit('refresh-site')
+    } catch (error) {
+        console.error('Failed to update delivery companies:', error)
+        toast.message = 'Failed to update delivery companies. Please try again.'
+        toast.color = 'error'
+        toast.show = true
+    }
+}
+
+watch(initialCompanies, (val) => {
+    companies.value = Array.isArray(val) ? [...val] : []
+    isHydrating.value = false
+}, { immediate: true })
+</script>
+
+<style scoped>
+.drag-area {
+    cursor: grab;
+}
+
+.drag-handle {
+    cursor: grab;
+}
+</style>

package/components/DrawImage.vue

@@ -0,0 +1,172 @@
+<template>
+  <v-dialog
+    v-model="isDialogVisible"
+    transition="dialog-top-transition"
+    max-width="1000"
+  >
+    <v-card class="pa-1">
+      <v-toolbar>
+        <v-spacer></v-spacer>
+        <v-btn icon="mdi-close" @click="emit('onCloseDialog')" />
+      </v-toolbar>
+      <canvas id="imageCanvas" />
+      <v-card-title class="text-end">
+        <v-btn
+          color="orange-darken-3"
+          size="small"
+          variant="flat"
+          style="height: 40px; margin-right: 12px"
+          @click="onClearDrawing()"
+        >
+          Clear Drawing
+        </v-btn>
+        <v-btn
+          color="blue-darken-3"
+          size="small"
+          variant="flat"
+          style="height: 40px"
+          @click="submit"
+        >
+          Submit
+        </v-btn>
+      </v-card-title>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script setup lang="ts">
+const { getImage } = useUtils();
+
+const props = defineProps({
+  message: {
+    type: String,
+  },
+  isShowDialog: {
+    type: Boolean,
+    default: false,
+  },
+  imageUrl: {
+    type: String,
+  },
+  imageIdx: {
+    type: Number,
+  },
+});
+const emit = defineEmits<{
+  (event: "onSubmit", value: string, idx: number): void;
+  (event: "onCloseDialog"): void;
+}>();
+
+const isDialogVisible = computed(() => props.isShowDialog);
+
+var canvas: any = document.getElementById("imageCanvas");
+var ctx: any = "";
+var img: any = "";
+var pos: any = { x: 0, y: 0 };
+
+onMounted(async () => {
+  canvas = document.getElementById("imageCanvas");
+  ctx = canvas?.getContext("2d");
+
+  var rect = canvas.getBoundingClientRect();
+  canvas.width = rect.width < 712 ? 712 : rect.width;
+  canvas.height = rect.height < 400 ? 400 : rect.height;
+
+  const response = await getImage(props.imageUrl!);
+  if (!response) return;
+  handleImage(response);
+
+  canvas.addEventListener("mousedown", setPosition);
+  canvas.addEventListener("mousemove", draw);
+  canvas.addEventListener(
+    "touchstart",
+    function (e: any) {
+      var touch = e.touches[0];
+      var mouseEvent = new MouseEvent("mousedown", {
+        buttons: 1,
+        clientX: touch.clientX,
+        clientY: touch.clientY,
+      });
+      canvas.dispatchEvent(mouseEvent);
+    },
+    false,
+  );
+  canvas.addEventListener(
+    "touchmove",
+    function (e: any) {
+      var touch = e.touches[0];
+      var mouseEvent = new MouseEvent("mousemove", {
+        buttons: 1,
+        clientX: touch.clientX,
+        clientY: touch.clientY,
+      });
+      canvas.dispatchEvent(mouseEvent);
+    },
+    false,
+  );
+
+  var imageCanvas: any = document.getElementById("imageCanvas");
+  imageCanvas.style.cursor = "crosshair";
+});
+
+function handleImage(image: Blob) {
+  var reader = new FileReader();
+  reader.onload = function (event: any) {
+    img = new Image();
+    img.onload = function () {
+      var ratio = this.height / this.width;
+      canvas.height = canvas.width * ratio;
+      ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
+    };
+    img.src = event.target.result;
+  };
+  reader.readAsDataURL(image);
+}
+
+async function setPosition(e: any) {
+  var rect = canvas.getBoundingClientRect();
+
+  if (rect.width < 712 && rect.height < 400) {
+    var scaleX = 712 / rect.width;
+    var scaleY = 400 / rect.height;
+
+    pos.x = (e.clientX - rect.left) * scaleX;
+    pos.y = (e.clientY - rect.top) * scaleY;
+    return;
+  }
+
+  pos.x = e.clientX - rect.left;
+  pos.y = e.clientY - rect.top;
+}
+
+async function draw(e: any) {
+  canvas.style.cursor = "crosshair";
+
+  if (e.buttons !== 1) return;
+  if (pos.x === 0 && pos.y === 0) setPosition(e);
+
+  ctx.beginPath();
+  ctx.lineWidth = 5;
+  ctx.lineCap = "round";
+  ctx.strokeStyle = "#FF0000";
+  ctx.moveTo(pos.x, pos.y);
+  setPosition(e);
+  ctx.lineTo(pos.x, pos.y);
+  ctx.stroke();
+  ctx.closePath();
+}
+
+const submit = () => {
+  canvas.toBlob((blob: any) => {
+    const url = URL.createObjectURL(blob);
+    console.log("URL", url);
+
+    emit("onSubmit", url, props.imageIdx!);
+  });
+};
+
+async function onClearDrawing() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
+}
+</script>

package/components/EntryPassInformation.vue

@@ -46,12 +46,19 @@
           No printer is configured in the settings. QR Pass may not print.
         </v-alert>
         <template v-else>
-          <InputLabel title="Quantity" class="mt-3" />
+          <div class="d-flex align-center justify-space-between mt-3">
+            <InputLabel title="Quantity" />
+            <span v-if="availableCount !== null" class="text-caption text-grey">
+              {{ availableCount }} available
+            </span>
+            <v-progress-circular v-else-if="cardsLoading" size="14" width="2" indeterminate color="grey" />
+          </div>
           <v-text-field
             v-model.number="quantity"
             type="number"
             density="comfortable"
             :min="1"
+            :max="availableCount ?? undefined"
             hide-details
           />
         </template>
@@ -65,7 +72,7 @@
             v-model="selectedCards"
             :items="cardItems"
             :loading="cardsLoading"
-            item-title="cardNumber"
+            item-title="cardNo"
             item-value="_id"
             density="comfortable"
             multiple
@@ -78,7 +85,7 @@
             <template #item="{ props: itemProps, item }">
               <v-list-item v-bind="itemProps">
                 <template #subtitle>
-                  <span class="text-caption text-grey">{{ item.raw.cardNumber }}</span>
+                  <span class="text-caption text-grey">{{ item.raw.cardNo }}</span>
                 </template>
               </v-list-item>
             </template>
@@ -182,6 +189,8 @@
         </v-card>
       </v-container>
     </v-dialog>
+
+    <Snackbar v-model="snackbar" :text="snackbarText" :color="snackbarColor" />
   </div>
 </template>
 
@@ -207,11 +216,19 @@ const props = defineProps({
     type: Array as PropType<any[]>,
     default: () => [],
   },
+  siteId: {
+    type: String as PropType<string | null>,
+    default: null,
+  },
+  unitId: {
+    type: String as PropType<string | null>,
+    default: null,
+  },
 });
 
 const emit = defineEmits(["update:modelValue", "update:quantity", "update:cards"]);
 
-const { getAll: getAllCards } = useCard();
+const { getAvailableContractorCards, generateQrVms } = useAccessManagement();
 
 const nfcEnabled = computed(() => props.settings?.data?.settings?.nfcPass ?? false);
 const printer = computed(() => props.settings?.data?.settings?.printer ?? { vendorId: null, productId: null });
@@ -235,15 +252,54 @@ const selectedCards = computed({
   },
 });
 
+// ─── Snackbar ─────────────────────────────────────────────────────
+const snackbar = ref(false);
+const snackbarText = ref("");
+const snackbarColor = ref("error");
+
+function showSnackbar(text: string, color = "error") {
+  snackbarText.value = text;
+  snackbarColor.value = color;
+  snackbar.value = true;
+}
+
 // ─── Card fetching ────────────────────────────────────────────────
 const cardItems = ref<any[]>([]);
 const cardsLoading = ref(false);
+const availableCount = ref<number | null>(null);
 
-async function fetchCards() {
+async function fetchCards(type: "NFC" | "QRCODE" = "NFC") {
+  if (!props.siteId || !props.unitId) return;
   cardsLoading.value = true;
   try {
-    const res = await getAllCards({ assignFilter: "available", limit: 100 });
-    cardItems.value = res?.data ?? [];
+    const res = await getAvailableContractorCards({
+      type,
+      siteId: props.siteId,
+      unitId: props.unitId,
+    });
+    cardItems.value = res?.data?.[0]?.items ?? [];
+    availableCount.value = (res?.data?.[2] as any)?.count ?? cardItems.value.length;
+
+    if (type === "QRCODE" && props.settings?.data?._id && availableCount.value !== null && availableCount.value < 50) {
+      await generateQrVms({
+        site: props.settings.data.site,
+        unitId: props.unitId,
+        quantity: 50,
+      });
+      // Re-fetch to get the updated count after generation
+      const refreshed = await getAvailableContractorCards({
+        type,
+        siteId: props.siteId,
+        unitId: props.unitId,
+      });
+      cardItems.value = refreshed?.data?.[0]?.items ?? [];
+      availableCount.value = (refreshed?.data?.[2] as any)?.count ?? cardItems.value.length;
+    }
+  } catch (err: any) {
+    const msg = err?.data?.message ?? err?.message ?? String(err);
+    showSnackbar(`Entry pass service error: ${msg}`);
+    availableCount.value = null;
+    cardItems.value = [];
   } finally {
     cardsLoading.value = false;
   }
@@ -268,7 +324,7 @@ const toggleBarcodeScanning = () => {
 };
 
 const validateScannedBarcode = (scannedCode: string) => {
-  const card = cardItems.value.find((c) => c.cardNumber === scannedCode);
+  const card = cardItems.value.find((c) => c.cardNo === scannedCode);
   if (card) addCard(card);
   barcodeBuffer.value = "";
 };
@@ -360,7 +416,7 @@ const scanFrame = async () => {
   try {
     const barcodes = await barcodeDetector.detect(canvas);
     for (const barcode of barcodes) {
-      const card = cardItems.value.find((c) => c.cardNumber === barcode.rawValue);
+      const card = cardItems.value.find((c) => c.cardNo === barcode.rawValue);
       if (card) {
         addCard(card);
         closeCameraDialog();
@@ -390,9 +446,13 @@ watch(
   () => passType.value,
   (val) => {
     if (val === "NFC") {
-      fetchCards();
+      fetchCards("NFC");
       window.addEventListener("keydown", handleBarcodeInput);
+    } else if (val === "QR") {
+      availableCount.value = null;
+      fetchCards("QRCODE");
     } else {
+      availableCount.value = null;
       isBarcodeScanningActive.value = false;
       barcodeBuffer.value = "";
       if (barcodeTimeout.value) clearTimeout(barcodeTimeout.value);

package/components/EquipmentItemMain.vue

@@ -283,7 +283,9 @@
                               >mdi-delete-outline</v-icon
                             >
                           </template>
-                          <v-list-item-title>Remove Equipment</v-list-item-title>
+                          <v-list-item-title
+                            >Remove Equipment</v-list-item-title
+                          >
                         </v-list-item>
                       </v-list>
                     </v-menu>
@@ -440,7 +442,8 @@
 <script setup lang="ts">
 import useEquipmentItem from "../composables/useEquipmentItem";
 import { useEquipmentItemPermission } from "../composables/useEquipmentItemPermission";
-import useSupply from "../composables/useSupply";
+import useEquipmentManagement from "../composables/useEquipmentManagement";
+import useFile from "../composables/useFile";
 import useUtils from "../composables/useUtils";
 
 const props = defineProps({
@@ -546,7 +549,7 @@ watchEffect(() => {
   }
 });
 
-const { getSupplies } = useSupply();
+const { getSupplies } = useEquipmentManagement();
 
 const { data: getSuppliesReq } = await useLazyAsyncData(
   "get-supplies-for-equipment-item",
@@ -568,7 +571,9 @@ watchEffect(() => {
   }
 });
 
-const supplyItems = ref<Array<{ name: string; value: string; stockQty: number }>>([]);
+const supplyItems = ref<
+  Array<{ name: string; value: string; stockQty: number }>
+>([]);
 const selectedSupplyForAdd = ref<string>("");
 const equipmentItems = ref<TEquipmentItem[]>([]);
 

package/components/Feedback/Form.vue

@@ -31,7 +31,7 @@
       <template #label> Subject <span class="text-red">*</span> </template>
     </v-autocomplete>
 
-    <v-autocomplete
+    <!-- <v-autocomplete
       v-model="localFeedback.category"
       :items="categories"
       item-title="title"
@@ -45,7 +45,7 @@
       :rules="[requiredRule]"
     >
       <template #label> Category <span class="text-red">*</span> </template>
-    </v-autocomplete>
+    </v-autocomplete> -->
 
     <v-text-field
       label="Location"
@@ -91,7 +91,7 @@ const props = defineProps<{
   feedback: TFeedbackCreate;
   isEditMode: boolean;
   loading: boolean;
-  categories: { title: string; value: string }[];
+  // categories: { title: string; value: string }[];
   erroredImages?: string[];
   maxFiles?: number;
 }>();
@@ -133,7 +133,7 @@ const { requiredRule } = useUtils();
 const isFormValid = computed(() => {
   return (
     localFeedback.value.subject &&
-    localFeedback.value.category &&
+    // localFeedback.value.category &&
     localFeedback.value.location &&
     localFeedback.value.description
   );