@7365admin1/layer-common 1.8.6 → 1.9.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @iservice365/layer-common
 
+## 1.9.0
+
+### Minor Changes
+
+- b7d47c7: update layer common package new changes
+
 ## 1.8.6
 
 ### Patch Changes

package/components/AccessCardAddForm.vue

@@ -24,7 +24,24 @@
               type="text"
             ></v-select>
           </v-col>
-          <v-col cols="12" class="px-1 pb-5">
+          <v-col cols="12" class="px-1" v-if="isNonPhysicalCard">
+            <InputLabel
+              class="text-capitalize font-weight-bold"
+              title="Quantity"
+              required
+            />
+            <v-text-field
+              v-model.number="card.quantity"
+              density="compact"
+              hide-details
+              :rules="[requiredRule]"
+              type="number"
+              :min="1"
+              hide-spin-buttons
+              @input="enforceMinQuantity"
+            />
+          </v-col>
+          <v-col cols="12" class="px-1 pb-5" v-if="!isNonPhysicalCard">
             <InputLabel
               class="text-capitalize font-weight-bold"
               :title="`Card No (${cardNoMaxLength} digits)`"
@@ -35,36 +52,38 @@
               density="compact"
               hide-details
               :rules="[requiredRule]"
-              maxlength="10"
+              :maxlength="cardNoMaxLength"
               type="number"
               hide-spin-buttons
+              :suffix="`${card.cardNumber?.toString().length || 0}/${cardNoMaxLength}`"
+              @input="limitCardNumber"
             >
             </v-text-field>
           </v-col>
-          <v-col cols="12" class="px-1">
+          <v-col cols="12" class="px-1" v-if="!isNonPhysicalCard">
             <InputLabel
               class="text-capitalize font-weight-bold"
               title="Start Date"
               required
             />
-            <InputDateTimePicker
-              ref="startDateRef"
+            <InputDatePicker
               v-model="card.startDate"
               placeholder="Start Date"
               :rules="[requiredRule]"
+              @update:model-value="updateEndDate"
             />
           </v-col>
-          <v-col cols="12" class="px-1 pb-4">
+          <v-col cols="12" class="px-1 pb-4" v-if="!isNonPhysicalCard">
             <InputLabel
               class="text-capitalize font-weight-bold"
               title="End Date"
               required
             />
-            <InputDateTimePicker
-              ref="endDateRef"
+            <InputDatePicker
               v-model="card.endDate"
               placeholder="End Date"
               :rules="[requiredRule]"
+              readonly
             />
           </v-col>
           <v-divider />
@@ -102,7 +121,7 @@
               >
               </v-select>
             </v-col>
-            <v-col cols="12">
+            <v-col cols="12" v-if="!isNonPhysicalCard">
               <InputLabel
                 class="text-capitalize font-weight-bold"
                 title="Card Type"
@@ -119,7 +138,7 @@
               >
               </v-select>
             </v-col>
-            <v-col cols="12">
+            <v-col cols="12" v-if="!isNonPhysicalCard">
               <InputLabel
                 class="text-capitalize font-weight-bold"
                 :title="`Pin No (${cardPinMaxLength} digits)`"
@@ -130,26 +149,27 @@
                 density="compact"
                 hide-details
                 :rules="[requiredRule]"
-                maxlength="10"
+                :maxlength="cardPinMaxLength"
                 type="number"
                 hide-spin-buttons
+                :suffix="`${card.pinNo?.toString().length || 0}/${cardPinMaxLength}`"
+                @input="limitPinNo"
               >
               </v-text-field>
             </v-col>
             <v-col cols="12" class="pt-5">
-              <v-btn
-                block
+              <v-switch
+                v-model="card.useAsLiftCard"
+                label="Use as Lift Card"
                 color="primary"
-                variant="text"
-                class="text-none font-weight-bold"
-                text="Use as lift Card"
-                @click="card.useAsLiftCard = !card.useAsLiftCard"
-              ></v-btn>
+                hide-details
+                density="compact"
+              />
             </v-col>
             <v-col cols="12" v-if="card.useAsLiftCard">
               <InputLabel
                 class="text-capitalize font-weight-bold"
-                title="Lift Access Label"
+                title="Lift Access Level"
                 :required="card.useAsLiftCard"
               />
               <v-select
@@ -187,6 +207,67 @@
                 </span>
               </div>
             </v-col>
+            <v-col cols="12">
+              <v-divider class="my-4" />
+            </v-col>
+            <v-col cols="12">
+              <v-switch
+                v-model="card.showAssign"
+                label="Assign (Optional)"
+                color="primary"
+                hide-details
+                density="compact"
+              />
+            </v-col>
+            <template v-if="card.showAssign">
+              <v-col cols="12">
+                <InputLabel
+                  class="text-capitalize font-weight-bold"
+                  title="Building"
+                />
+                <v-autocomplete
+                  v-model="card.assignBuilding"
+                  density="compact"
+                  :items="buildingItems"
+                  hide-details
+                  item-title="name"
+                  item-value="value"
+                  placeholder="Search building..."
+                />
+              </v-col>
+              <v-col cols="12">
+                <InputLabel
+                  class="text-capitalize font-weight-bold"
+                  title="Level"
+                />
+                <v-autocomplete
+                  v-model="card.assignLevel"
+                  density="compact"
+                  :items="levelItems"
+                  hide-details
+                  item-title="name"
+                  item-value="value"
+                  placeholder="Search level..."
+                  :disabled="!card.assignBuilding"
+                />
+              </v-col>
+              <v-col cols="12">
+                <InputLabel
+                  class="text-capitalize font-weight-bold"
+                  title="Unit"
+                />
+                <v-autocomplete
+                  v-model="card.assignUnit"
+                  density="compact"
+                  :items="unitItems"
+                  hide-details
+                  item-title="name"
+                  item-value="value"
+                  placeholder="Search unit..."
+                  :disabled="!card.assignLevel"
+                />
+              </v-col>
+            </template>
           </v-row>
         </v-row>
       </v-form>
@@ -244,6 +325,8 @@ const prop = defineProps({
 });
 
 const { add: _addCard, updateById: _updateCardById } = useCard();
+const { getAll: _getBuildings } = useBuilding();
+const { getAllUnits: _getUnits } = useBuildingUnit();
 const emit = defineEmits(["cancel", "success"]);
 
 const validForm = ref(false);
@@ -252,27 +335,43 @@ const message = ref("");
 
 const { requiredRule } = useUtils();
 
+function formatDate(date: Date): string {
+  return date.toISOString().split("T")[0];
+}
+
+const today = new Date();
+const tenYearsLater = new Date(today);
+tenYearsLater.setFullYear(today.getFullYear() + 10);
+
 const card = ref<Record<string, any>>({
-  accessCardType: "",
+  accessCardType: "Physical Access Card",
   type: "door-setup",
   cardNumber: "",
-  startDate: "",
-  endDate: "",
+  startDate: formatDate(today),
+  endDate: formatDate(tenYearsLater),
   door: "",
   accessGroup: [],
-  cardType: "",
+  cardType: "Normal",
   pinNo: "",
   isActivate: true,
   isAntiPassBack: false,
   useAsLiftCard: false,
+  isWinsland: false,
   status: "active",
   liftAccessLevel: "",
   org: "",
   site: "",
   unit: "",
   assign: "",
+  quantity: 1,
+  showAssign: false,
+  assignBuilding: "",
+  assignLevel: "",
+  assignUnit: "",
 });
 
+const isNonPhysicalCard = computed(() => card.value.accessCardType === "Non Physical Access Card");
+
 if (prop.mode === "edit") {
   card.value.accessCardType = prop.card.accessCardType;
   card.value.type = prop.card.type;
@@ -292,15 +391,19 @@ if (prop.mode === "edit") {
   card.value.site = prop.card.site;
   card.value.unit = prop.card.unit;
   card.value.assign = prop.card.assign;
+  card.value.quantity = prop.card.quantity;
+  card.value.showAssign = prop.card.showAssign;
+  card.value.assignBuilding = prop.card.assignBuilding;
+  card.value.assignLevel = prop.card.assignLevel;
+  card.value.assignUnit = prop.card.assignUnit;
 }
 
 const accessCardTypes = ["Physical Access Card", "Non Physical Access Card"];
 const typeOfVisitors = ["Contractor", "Visitor"];
 
 const accessLevelItems = ref<{ name: string; no: string }[]>([
-  { name: "All access", no: "1" },
 ]);
-const accessGroupItems = ref(["All Access", "Glass Door 1"]);
+const accessGroupItems = ref([]);
 const cardTypeItems = ref([
   {
     name: "Normal - Access Card",
@@ -321,14 +424,119 @@ const cardTypeItems = ref([
 ]);
 const cardNoMaxLength = ref(10);
 const cardPinMaxLength = ref(6);
-const startDateRef = ref<HTMLInputElement | null>(null);
-const endDateRef = ref<HTMLInputElement | null>(null);
 const liftAccessLevelItems = ref<{ name: string; no: string }[]>([]);
+const buildingItems = ref<{ name: string; value: string }[]>([]);
+const levelItems = ref<{ name: string; value: string }[]>([]);
+const unitItems = ref<{ name: string; value: string }[]>([]);
+const buildingsData = ref<Record<string, any>[]>([]);
 
 const route = useRoute();
 const siteId = route.params.site as string;
 const orgId = route.params.org as string;
 
+function limitCardNumber() {
+  if (card.value.cardNumber && card.value.cardNumber.toString().length > cardNoMaxLength.value) {
+    card.value.cardNumber = card.value.cardNumber.toString().slice(0, cardNoMaxLength.value);
+  }
+}
+
+function limitPinNo() {
+  if (card.value.pinNo && card.value.pinNo.toString().length > cardPinMaxLength.value) {
+    card.value.pinNo = card.value.pinNo.toString().slice(0, cardPinMaxLength.value);
+  }
+}
+
+function enforceMinQuantity() {
+  if (card.value.quantity < 1 || !card.value.quantity) {
+    card.value.quantity = 1;
+  }
+}
+
+function updateEndDate(startDate: string | null) {
+  if (startDate) {
+    const date = new Date(startDate);
+    date.setFullYear(date.getFullYear() + 10);
+    card.value.endDate = formatDate(date);
+  }
+}
+
+// Watch for Assign toggle to fetch buildings
+watch(() => card.value.showAssign, async (newVal) => {
+  if (newVal) {
+    try {
+      const response = await _getBuildings({
+        page: 1,
+        status: "active",
+        site: siteId,
+      });
+      buildingsData.value = response.items || [];
+      buildingItems.value = buildingsData.value.map((building: any) => ({
+        name: building.name,
+        value: building._id,
+      }));
+    } catch (error) {
+      console.error("Failed to fetch buildings:", error);
+    }
+  } else {
+    // Reset selections when toggled off
+    card.value.assignBuilding = "";
+    card.value.assignLevel = "";
+    card.value.assignUnit = "";
+    buildingItems.value = [];
+    levelItems.value = [];
+    unitItems.value = [];
+  }
+});
+
+// Watch for building selection to populate levels
+watch(() => card.value.assignBuilding, async (newVal) => {
+  if (newVal) {
+    const selectedBuilding = buildingsData.value.find((b: any) => b._id === newVal);
+    if (selectedBuilding && selectedBuilding.levels) {
+      levelItems.value = selectedBuilding.levels.map((level: string) => ({
+        name: level,
+        value: level,
+      }));
+    }
+    // Reset level and unit when building changes
+    card.value.assignLevel = "";
+    card.value.assignUnit = "";
+    unitItems.value = [];
+  } else {
+    levelItems.value = [];
+    card.value.assignLevel = "";
+    card.value.assignUnit = "";
+    unitItems.value = [];
+  }
+});
+
+// Watch for level selection to fetch units
+watch(() => card.value.assignLevel, async (newVal) => {
+  if (newVal && card.value.assignBuilding) {
+    try {
+      const response = await _getUnits({
+        page: 1,
+        status: "active",
+        site: siteId,
+        building: card.value.assignBuilding,
+      });
+      const units = response.items || [];
+      // Filter units by selected level
+      const filteredUnits = units.filter((unit: any) => unit.level === newVal);
+      unitItems.value = filteredUnits.map((unit: any) => ({
+        name: unit.name,
+        value: unit._id,
+      }));
+    } catch (error) {
+      console.error("Failed to fetch units:", error);
+    }
+    card.value.assignUnit = "";
+  } else {
+    unitItems.value = [];
+    card.value.assignUnit = "";
+  }
+});
+
 function cancel() {
   //   createMore.value = false;
   message.value = "";

package/components/BuildingUnitFormAdd.vue

@@ -8,7 +8,7 @@
     <v-card-text style="max-height: 100vh; overflow-y: auto">
       <v-form v-model="validForm" :disabled="disable">
         <v-row no-gutters>
-          <v-col cols="12" class="mt-2">
+          <!-- <v-col cols="12" class="mt-2">
             <v-row no-gutters>
               <InputLabel class="text-capitalize" title="Name" required />
               <v-col cols="12">
@@ -19,7 +19,7 @@
                 ></v-text-field>
               </v-col>
             </v-row>
-          </v-col>
+          </v-col> -->
 
           <v-col cols="12">
             <v-row>
@@ -48,7 +48,7 @@
             </v-row>
           </v-col>
 
-          <v-col cols="12">
+          <!-- <v-col cols="12">
             <v-row>
               <v-col cols="12" class="mt-2">
                 <v-row no-gutters>
@@ -67,9 +67,9 @@
                 </v-row>
               </v-col>
             </v-row>
-          </v-col>
+          </v-col> -->
 
-          <v-col cols="12">
+          <!-- <v-col cols="12">
             <v-row>
               <v-col cols="12" class="mt-2">
                 <v-row no-gutters>
@@ -87,9 +87,9 @@
                 </v-row>
               </v-col>
             </v-row>
-          </v-col>
+          </v-col> -->
 
-          <v-col cols="12">
+          <!-- <v-col cols="12">
             <v-row>
               <v-col cols="12" class="mt-2">
                 <v-row no-gutters>
@@ -129,7 +129,7 @@
                 </v-row>
               </v-col>
             </v-row>
-          </v-col>
+          </v-col> -->
 
           <v-col cols="12" class="mt-2">
             <v-row no-gutters>
@@ -221,7 +221,7 @@
             </v-row>
           </v-expand-transition>
 
-          <v-col cols="12" class="mt-5">
+          <!-- <v-col cols="12" class="mt-5">
             <InputLabel
               class="text-capitalize"
               title="Upload Files (Lease of Contract, Cert. of Occupancy)"
@@ -233,7 +233,7 @@
               title="Upload PDF Files"
               accept="application/pdf"
             />
-          </v-col>
+          </v-col> -->
 
           <v-col cols="12" class="mt-2">
             <v-checkbox v-model="createMore" density="comfortable" hide-details>
@@ -343,6 +343,7 @@ const buildingUnit = ref<TBuildingUnit>({
   leaseEnd: "",
 });
 
+
 const startDateRef = ref<HTMLInputElement | null>(null);
 const expiryDateRef = ref<HTMLInputElement | null>(null);
 
@@ -408,10 +409,11 @@ function setBuildingUnit() {
 
 async function submit() {
   disable.value = true;
+  const {buildingUnitFiles, companyName, companyRegistrationNumber, leaseStart, leaseEnd, ...rest} = buildingUnit.value;
   try {
     await add({
       labels: unitLabels.value,
-      unit: buildingUnit.value,
+      unit: rest,
       qty: buildingUnitQty.value,
     });
 

package/components/Button/Close.vue

@@ -0,0 +1,16 @@
+<template>
+    <v-btn text="Close" class="bg-grey-lighten-2 text-capitalize" :height="prop.height" @click="emit('click')" />
+</template>
+
+<script setup lang="ts">
+    const prop = defineProps<{ 
+        height?: string | number;
+    }>();
+
+    const emit = defineEmits<{
+        (e: 'click'): void;
+    }>();
+
+</script>
+
+<style scoped></style>

package/components/Dialog/UpdateMoreAction.vue

@@ -41,6 +41,7 @@
                 color="black"
                 class="text-none"
                 height="48"
+                :disabled="disabled"
                 v-bind="props"
                 tile
               >
@@ -78,6 +79,10 @@ const prop = defineProps({
     type: Boolean,
     default: true,
   },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
   editButtonLabel: {
     type: String,
     default: "Edit",
@@ -97,7 +102,7 @@ const prop = defineProps({
 });
 
 const emit = defineEmits(["close", "edit", "delete"]);
-const { canUpdate, editButtonLabel, deleteButtonLabel, title } = prop;
+const { canUpdate, editButtonLabel, deleteButtonLabel, title, disabled } = prop;
 </script>
 
 <style scoped></style>

package/components/FeedbackDetail.vue

@@ -305,21 +305,32 @@ async function handleCompletionFileAdded(file: File) {
 
     const res = await addFile(file);
 
-    if (res?.id && res?.name) {
-      const url = `https://seven365-storage.sgp1.cdn.digitaloceanspaces.com/dev/${res.id}`;
+    const uploadedId = res?.id;
 
-      if (!completionAttachments.value) {
-        completionAttachments.value = [];
-      }
+    if (uploadedId) {
+      const url = `${uploadedId}`;
 
+      completionAttachments.value = completionAttachments.value ?? [];
       completionAttachments.value.push(url);
+    }
 
-      completionFileNames.value[url] = res.name;
+    // if (res?.id && res?.name) {
+    //   const url = `https://seven365-storage.sgp1.cdn.digitaloceanspaces.com/dev/${res.id}`;
 
-      if (completionFileInput.value) {
-        completionFileInput.value.updateFileName(url, res.name);
-      }
-    }
+    //   if (!completionAttachments.value) {
+    //     completionAttachments.value = [];
+    //   }
+
+    //   completionAttachments.value.push(url);
+
+    //   completionFileNames.value[url] = res.name;
+
+    //   if (completionFileInput.value) {
+    //     completionFileInput.value.updateFileName(url, res.name);
+    //   }
+    // }
+
+    console.log("completionAttachments.value", completionAttachments.value);
   } catch (error) {
     console.error("Error uploading completion file:", error);
     showMessage("Failed to upload file", "error");

package/components/Input/DatePicker.vue

@@ -0,0 +1,102 @@
+<template>
+    <div class="d-flex flex-column">
+        <v-text-field v-bind="$attrs" ref="datePickerRef" :model-value="dateFormattedReadOnly" autocomplete="off"
+            :placeholder="placeholder" :rules="rules" style="z-index: 10" @click="openDatePicker">
+            <template #append-inner>
+                <v-icon icon="mdi-calendar" @click.stop="openDatePicker" />
+            </template>
+        </v-text-field>
+        <div class="w-100 d-flex align-end ga-3 hidden-input">
+            <input ref="dateInput" type="date" v-model="date" />
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+
+const prop = defineProps({
+    rules: {
+        type: Array as PropType<Array<any>>,
+        default: () => []
+    },
+    placeholder: {
+        type: String,
+        default: 'MM/DD/YYYY'
+    }
+})
+
+const date = defineModel<string | null>({ default: null }) // YYYY-MM-DD format
+
+const dateFormattedReadOnly = ref<string | null>(null)
+
+const dateInput = ref<HTMLInputElement | null>(null)
+const datePickerRef = ref<HTMLInputElement | null>(null)
+
+const isInitialLoad = ref(true)
+
+function openDatePicker() {
+    setTimeout(() => {
+        dateInput.value?.showPicker?.()
+    }, 0)
+}
+
+function validate() {
+    (datePickerRef.value as any)?.validate()
+}
+
+function convertToReadableFormat(dateStr: string): string {
+    if (!dateStr) return ""
+    const dateObj = new Date(dateStr + "T00:00:00")
+    const options: Intl.DateTimeFormatOptions = {
+        year: 'numeric',
+        month: '2-digit',
+        day: '2-digit'
+    }
+    return dateObj.toLocaleDateString('en-US', options)
+}
+
+function handleInitialDate() {
+    if (date.value) {
+        dateFormattedReadOnly.value = convertToReadableFormat(date.value)
+    } else {
+        dateFormattedReadOnly.value = null
+    }
+}
+
+watch(date, (dateVal) => {
+    if (isInitialLoad.value) return
+    if (!dateVal) {
+        dateFormattedReadOnly.value = null
+        return
+    }
+    dateFormattedReadOnly.value = convertToReadableFormat(dateVal)
+}, { immediate: false })
+
+watch(date, () => {
+    handleInitialDate()
+}, { immediate: true })
+
+onMounted(async () => {
+    await nextTick()
+    isInitialLoad.value = false
+    const nativeInput = (datePickerRef.value as any)?.$el?.querySelector('input')
+    if (nativeInput) {
+        nativeInput.addEventListener('click', (e: MouseEvent) => {
+            e.stopPropagation()
+            openDatePicker()
+        })
+    }
+})
+
+defineExpose({
+    validate
+})
+</script>
+
+<style scoped>
+.hidden-input {
+    opacity: 0;
+    height: 0;
+    width: 1px;
+}
+</style>

package/components/VisitorForm.vue

@@ -1,10 +1,11 @@
 <template>
   <v-card width="100%" :loading="processing">
     <v-toolbar>
-      <v-row no-gutters class="fill-height px-6" align="center">
+      <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">
           {{ prop.mode }} {{ formatVisitorType(type) }}
         </span>
+        <ButtonClose @click="emit('close:all')" />
       </v-row>
     </v-toolbar>
     <v-card-text style="max-height: 100vh; overflow-y: auto" class="pa-5 my-3">
@@ -238,6 +239,7 @@ const emit = defineEmits([
   "done:more",
   "error",
   "close",
+  "close:all"
 ]);
 
 const visitor = reactive<Partial<TVisitorPayload>>({

package/components/VisitorManagement.vue

@@ -114,7 +114,7 @@
 
     <v-dialog v-model="dialog.addVisitor" v-if="activeVisitorFormType" width="450" persistent>
       <VisitorForm mode="add" :org="orgId" :site="siteId" :type="activeVisitorFormType" @back="handleClickBack"
-        @done="handleVisitorFormDone" @done:more="handleVisitorFormCreateMore" />
+        @done="handleVisitorFormDone" @done:more="handleVisitorFormCreateMore" @close:all="handleCloseAll" />
     </v-dialog>
 
     <v-dialog v-model="dialog.viewVisitor" width="450" persistent>
@@ -385,6 +385,11 @@ function showMessage(msg: string, color: string) {
   messageSnackbar.value = true;
 }
 
+function handleCloseAll() {
+  dialog.showSelection = false;
+  dialog.addVisitor = false;
+} 
+
 function handleUpdateAutofillDetails(people: TPeople){
   dialog.vehicleNumberUsersList = false
   console.log('people', people)

package/components/WorkOrder/Detail.vue

@@ -20,19 +20,51 @@
       </v-col>
     </v-row>
   </div>
+  <WorkOrderCreate
+    v-model="showCreateDialog"
+    created-from="workOrder"
+    :work-order="_workOrder"
+    @update:work-order="(val: TWorkOrderCreate) => (_workOrder = val)"
+    :is-edit-mode="isEditMode"
+    :loading="isSubmitting"
+    :categories="serviceProviders"
+    :theme="theme"
+    :errored-images="erroredImages"
+    :max-files="5"
+    :message-fn="showMessage"
+    @close="handleCloseDialog"
+    @file-added="handleFileAdded"
+    @file-deleted="deleteFile"
+    @submit="submitWorkOrder"
+  />
+
+  <Snackbar v-model="messageSnackbar" :text="message" :color="messageColor" />
 </template>
 <script lang="ts" setup>
+import { useTheme } from "vuetify";
 const route = useRoute();
 const id = route.params.id;
 
 const {
   workOrder,
-  workOrders,
   getWorkOrderById,
   getWorkOrders: _getWorkOrders,
+  updateWorkOrder,
+  createWorkOrder,
 } = useWorkOrder();
 
 const { getServiceProviderNames } = useServiceProvider();
+const erroredImages = ref<string[]>([]);
+
+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;
+}
 
 const _getWorkOrderById = async () => {
   try {
@@ -67,5 +99,150 @@ const showCreateDialog = ref(false);
 const showCompleteDialog = ref(false);
 const showDeleteDialog = ref(false);
 
-function openEditDialog() {}
+const _workOrder = ref<TWorkOrderCreate>({
+  attachments: [],
+  category: "",
+  subject: "",
+  location: "",
+  description: "",
+  highPriority: false,
+  block: "",
+  level: "",
+  unit: "",
+  serviceProvider: "",
+  assignee: "",
+  organization: "",
+  site: "",
+});
+
+const isEditMode = ref(false);
+const isSubmitting = ref(false);
+const theme = useTheme().name;
+
+const _workOrderId = ref<string | null>(null);
+
+const serviceProviders = ref<
+  Array<{ title: string; value: string; subtitle: string }>
+>([]);
+
+const { getBySiteAsServiceProvider } = useCustomerSite();
+
+const { data: getAllReq } = useLazyAsyncData(
+  "get-by-site-as-service-provider",
+  () => getBySiteAsServiceProvider(useRoute().params.site as string)
+);
+
+watchEffect(() => {
+  if (getAllReq.value) {
+    serviceProviders.value = getAllReq.value.map((i: any) => ({
+      title: i.nature.replace(/_/g, " "),
+      subtitle: i.title,
+      value: i.nature,
+    }));
+  }
+});
+
+function openEditDialog() {
+  isEditMode.value = true;
+  _workOrder.value = { ...workOrder.value };
+  showCreateDialog.value = true;
+}
+
+function handleCloseDialog() {
+  resetWorkOrderForm();
+  isEditMode.value = false;
+  showCreateDialog.value = false;
+}
+
+function resetWorkOrderForm() {
+  _workOrder.value = {
+    attachments: [],
+    category: "",
+    subject: "",
+    location: "",
+    description: "",
+    highPriority: false,
+    block: "",
+    level: "",
+    unit: "",
+    serviceProvider: "",
+    assignee: "",
+    organization: "",
+    site: "",
+  };
+}
+
+const { addFile, deleteFile: _deleteFile } = useFile();
+
+const API_DO_STORAGE_ENDPOINT =
+  useRuntimeConfig().public.API_DO_STORAGE_ENDPOINT;
+
+async function handleFileAdded(file: File) {
+  try {
+    const res = await addFile(file);
+    const uploadedId = res?.id;
+    if (uploadedId) {
+      const url = `${API_DO_STORAGE_ENDPOINT}/${uploadedId}`;
+      _workOrder.value.attachments = _workOrder.value.attachments ?? [];
+      _workOrder.value.attachments.push(url);
+    }
+  } catch (error) {
+    console.error("Error uploading file:", error);
+    showMessage("Failed to upload file", "error");
+  }
+}
+
+async function deleteFile(value: string) {
+  try {
+    await _deleteFile(value);
+    _workOrder.value.attachments = (_workOrder.value.attachments ?? []).filter(
+      (file) => file !== value
+    );
+  } catch (error) {
+    console.log(error);
+    showMessage("Failed to delete file", "error");
+  }
+}
+
+async function submitWorkOrder() {
+  if (!isEditMode.value || !workOrder.value?._id) {
+    console.warn("Update called without valid edit mode or work order ID.");
+    return;
+  }
+  try {
+    isSubmitting.value = true;
+
+    const payload = {
+      // ..._workOrder.value,
+      attachments: _workOrder.value.attachments,
+      category: _workOrder.value.category,
+      description: _workOrder.value.description,
+      highPriority: _workOrder.value.highPriority,
+      organization: route.params.org as string,
+      site: route.params.site as string,
+      subject: _workOrder.value.subject,
+      unit: _workOrder.value.unit,
+    };
+
+    let res: Record<string, any> = {};
+
+    if (isEditMode.value) {
+      console.log("updating...");
+      res = await updateWorkOrder(workOrder.value._id as string, payload);
+    } else {
+      res = await createWorkOrder(payload);
+    }
+
+    showMessage(res.message, "success");
+    showCreateDialog.value = false;
+
+    await _getWorkOrderById();
+
+    resetWorkOrderForm();
+  } catch (err) {
+    showMessage((err as Error).message, "error");
+  } finally {
+    isSubmitting.value = false;
+  }
+}
 </script>

package/components/WorkOrder/Main.vue

@@ -65,6 +65,9 @@
           @click:row="tableRowClickHandler"
           style="max-height: calc(100vh - (200px))"
         >
+          <template v-slot:item.createdAt="{ item }">
+            {{ formatDateDDMMYYYYLocal(item.createdAt) }}
+          </template>
         </v-data-table>
       </v-card>
     </v-col>
@@ -88,6 +91,39 @@
     @submit="submitWorkOrder"
   />
 
+  <ConfirmDialog
+    v-model="showDeleteDialog"
+    :loading="submitting"
+    @submit="submitDelete"
+    :image-src="'/images/icons/delete-icon.png'"
+  >
+    <template #image>
+      <v-img
+        height="120"
+        src="/images/icons/delete-icon.png"
+        alt="Delete Icon"
+        contain
+      />
+    </template>
+
+    <template #title>
+      Are you sure you want to delete this work order?
+    </template>
+
+    <template #footer>
+      <v-btn
+        color="primary-button"
+        variant="flat"
+        class="font-weight-bold py-5 d-flex align-center justify-center"
+        @click="submitDelete"
+        :loading="submitting"
+        block
+      >
+        Confirm
+      </v-btn>
+    </template>
+  </ConfirmDialog>
+
   <Snackbar v-model="messageSnackbar" :text="message" :color="messageColor" />
 
   <!-- Preview Dialog -->
@@ -235,7 +271,8 @@ const message = ref("");
 const messageColor = ref("");
 const messageSnackbar = ref(false);
 
-const { getColorStatus, formatDate, debounce } = useUtils();
+const { getColorStatus, formatDate, debounce, formatDateDDMMYYYYLocal } =
+  useUtils();
 
 const _workOrder = ref<TWorkOrderCreate>({
   attachments: [],
@@ -272,12 +309,14 @@ const submitting = ref(false);
 const selected = ref<string[]>([]);
 const route = useRoute();
 const { customers } = useCustomer();
+const showDeleteDialog = ref(false);
 
 const {
   getWorkOrders: _getWorkOrders,
   createWorkOrder,
   getWorkOrderById,
   updateWorkOrder,
+  deleteWorkOrder,
 } = useWorkOrder();
 
 const page = ref(1);
@@ -444,8 +483,8 @@ async function submitWorkOrder() {
 
     showMessage(res.message, "success");
     showCreateDialog.value = false;
+    await getAllReqRefresh();
     resetWorkOrderForm();
-    getAllReqRefresh();
   } catch (err) {
     showMessage((err as Error).message, "error");
   } finally {
@@ -468,7 +507,6 @@ function onViewWorkOrder(item: any) {
 async function editWorkOrder(item: any) {
   try {
     const _workOrders = await getWorkOrderById(item._id);
-    console.log(_workOrders);
     _workOrder.value = {
       attachments: (_workOrders.attachments || []) as string[],
       category: _workOrders.category || "",
@@ -488,7 +526,30 @@ async function editWorkOrder(item: any) {
 
 async function _updateWorkOrder() {}
 
-function confirmDeleteWorkOrder(item: any) {}
+function confirmDeleteWorkOrder(item: any) {
+  workOrderToDelete.value = item;
+  showDeleteDialog.value = true;
+}
+
+const workOrderToDelete = ref<any>(null);
+
+async function submitDelete() {
+  if (!workOrderToDelete.value) return;
+  submitting.value = true;
+  try {
+    const response = await deleteWorkOrder(workOrderToDelete.value._id);
+    showMessage(response.message, "success");
+    await getAllReqRefresh();
+  } catch (error) {
+    console.error("Failed to delete work order:", error);
+    showMessage("Failed to delete work order!", "error");
+  } finally {
+    submitting.value = false;
+    showDeleteDialog.value = false;
+    workOrderToDelete.value = null;
+    dialogPreview.value = false;
+  }
+}
 
 function tableRowClickHandler(_: any, data: any) {
   selectedWorkOrder.value = data.item;

package/composables/useBuildingUnit.ts

@@ -73,7 +73,7 @@ export default function useBuildingUnit() {
     });
   }
 
-  function add(data: { labels: string[]; unit: TBuildingUnit; qty?: number }) {
+  function add(data: { labels: string[]; unit: Partial<TBuildingUnit>; qty?: number }) {
     return useNuxtApp().$api("/api/building-units", {
       method: "POST",
       body: data,

package/composables/useFeedback.ts

@@ -75,8 +75,9 @@ export default function useFeedback() {
   }
 
   function deleteFeedback(id: string) {
-    return useNuxtApp().$api<Record<string, any>>(`/api/feedbacks/${id}`, {
+    return useNuxtApp().$api<Record<string, any>>(`/api/feedbacks/deleted/feedback`, {
       method: "DELETE",
+      query: { id },
     });
   }
 
@@ -94,7 +95,7 @@ export default function useFeedback() {
 
   function updateStatusComplete(id: string, payload: TFeedbackStatusComplete) {
     return useNuxtApp().$api<Record<string, any>>(
-      `/api/feedbacks/${id}/status-complete`,
+      `/api/feedbacks/${id}/status/complete`,
       {
         method: "PUT",
         body: payload,

package/composables/useNFCPatrolSettings.ts

@@ -1,6 +1,6 @@
 export default function useNFCPatrolSettings() {
   async function getBySite(site: string) {
-    return await useNuxtApp().$api<Record<string, any>>(
+    return useNuxtApp().$api<Record<string, any>>(
       `/api/nfc-patrol-settings/site/${site}`
     );
   }

package/composables/useWorkOrder.ts

@@ -71,6 +71,13 @@ export default function useWorkOrder() {
     });
   }
 
+  function deleteWorkOrder(id: string) {
+    return useNuxtApp().$api<Record<string, any>>(`/api/work-orders/deleted/work-order`, {
+      method: "DELETE",
+      query: { id },
+    });
+  }
+
   return {
     workOrders,
     workOrder,
@@ -81,5 +88,6 @@ export default function useWorkOrder() {
     getWorkOrders,
     getWorkOrderById,
     updateWorkOrder,
+    deleteWorkOrder,
   };
 }

package/package.json

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

package/types/card.d.ts

@@ -19,4 +19,9 @@ declare type TCard = {
   site?: string | ObjectId;
   unit: string;
   assign: string;
+  quantity?: number;
+  showAssign?: boolean;
+  assignBuilding?: string;
+  assignLevel?: string;
+  assignUnit?: string;
 };