@7365admin1/layer-common 1.9.0 → 1.10.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @iservice365/layer-common
 
+## 1.10.0
+
+### Minor Changes
+
+- 70c2b90: get latest changes
+
 ## 1.9.0
 
 ### Minor Changes

package/components/DocumentManagement.vue

@@ -165,12 +165,6 @@
             Are you sure you want to delete this document? This action cannot be
             undone.
           </p>
-
-          <v-row v-if="message" no-gutters justify="center" class="mt-4">
-            <span class="text-caption text-error text-center">
-              {{ message }}
-            </span>
-          </v-row>
         </v-card-text>
 
         <v-toolbar density="compact">
@@ -303,7 +297,7 @@ const selectedDocument = ref<TDocument>({
   _id: "",
   name: "",
   attachment: "",
-  type: ""
+  type: "",
 });
 const deleteLoading = ref(false);
 const confirmDialog = ref(false);
@@ -354,7 +348,8 @@ function openEditDialog() {
 async function handleDeleteDocument() {
   deleteLoading.value = true;
   try {
-    await deleteById(selectedDocument.value._id ?? "");
+    const response = await deleteById(selectedDocument.value._id ?? "");
+    showMessage(response.message, "success");
     await getDocuments();
     selectedDocumentId.value = null;
     confirmDialog.value = false;
@@ -372,5 +367,5 @@ function successUpdate() {
   previewDialog.value = false;
   getDocuments();
   showMessage("Document updated successfully!", "success");
-};
+}
 </script>

package/components/IncidentReport/Authorities.vue

@@ -0,0 +1,226 @@
+<template>
+  <v-row no-gutters class="px-5 pt-4">
+    <!-- Authorities (Police/SCDF/Ambulance called in at the scene) -->
+    <v-col cols="12" class="border-b pb-5 mb-5 mt-1">
+      <p class="mb-2" style="font-size: 17px; font-weight: 600">
+        Authorities (Police/SCDF/Ambulance called in at the scene)?
+      </p>
+      <p
+        v-if="authorities?.authoritiesValue == 'no'"
+        class="mt-2 text-h6 text-capitalize"
+      >
+        {{ authorities?.authoritiesValue }}
+      </p>
+
+      <v-data-table
+        v-else
+        :headers="authoritiesTableHeader"
+        :items="authorities?.authoritiesCalled"
+        fixed-header
+        hide-default-footer
+        :hide-default-header="false"
+        items-per-page="100"
+        style="max-height: calc(100vh - (200px))"
+        class="border mt-5"
+      >
+      </v-data-table>
+    </v-col>
+
+    <!-- Input lists -->
+    <v-col cols="12" class="pb-3 mb-5 mt-1">
+      <v-row no-gutters>
+        <v-col cols="12" class="px-1 mb-7">
+          <p class="mb-2" style="font-size: 17px; font-weight: 600">
+            What was done to address the incident thereafter?
+          </p>
+          <p class="mt-2 text-h6 text-capitalize">
+            {{ authorities?.incidentThereAfter }}
+          </p>
+        </v-col>
+
+        <v-col cols="12" class="px-1 mb-7">
+          <p class="mb-2" style="font-size: 17px; font-weight: 600">
+            Were the management notified and who was notified?
+          </p>
+          <v-row no-gutters>
+            <v-col cols="12" sm="6" class="px-1">
+              <InputLabel class="text-capitalize" title="Action Taken" />
+              <p class="mt-2 text-h6 text-capitalize">
+                {{ authorities?.managementNotified?.actionTaken }}
+              </p>
+            </v-col>
+            <v-col cols="12" sm="6" class="px-1">
+              <InputLabel
+                class="text-capitalize"
+                title="Management Notified Time"
+              />
+              <p class="mt-2 text-h6 text-capitalize">
+                {{ authorities?.managementNotified?.time }}
+              </p>
+            </v-col>
+          </v-row>
+        </v-col>
+
+        <v-col cols="12" class="px-1 mb-7">
+          <p class="mb-2" style="font-size: 17px; font-weight: 600">
+            How the incident resolved?
+          </p>
+          <p class="mt-2 text-h6 text-capitalize">
+            {{ authorities?.incidentResolved }}
+          </p>
+        </v-col>
+
+        <v-col cols="12" class="px-1 mb-7">
+          <p class="mb-2" style="font-size: 17px; font-weight: 600">
+            What was the cause of the incident?
+          </p>
+          <p class="mt-2 text-h6 text-capitalize">
+            {{ authorities?.causeOfIncident }}
+          </p>
+        </v-col>
+
+        <v-col cols="12" class="px-1 mb-6">
+          <p class="mb-2" style="font-size: 17px; font-weight: 600">
+            Any system used to verify incident?
+          </p>
+          <p class="mt-2 text-h6 text-capitalize">
+            {{ authorities?.systemUsed }}
+          </p>
+        </v-col>
+
+        <v-col cols="12" class="px-1 mb-6">
+          <p class="mb-2" style="font-size: 17px; font-weight: 600">
+            Any cctv records or picture taken?
+          </p>
+          <p class="mt-2 text-h6 text-capitalize">
+            {{ authorities?.cctvRecord }}
+          </p>
+        </v-col>
+
+        <v-col cols="12" class="px-1 mb-6">
+          <p class="mb-2" style="font-size: 17px; font-weight: 600">
+            Particulars of tenant/Owner (if any)
+          </p>
+          <p class="mt-2 text-h6 text-capitalize">
+            {{ authorities?.particularsOwner }}
+          </p>
+        </v-col>
+
+        <v-col cols="12" class="px-1 mb-6">
+          <p class="mb-2" style="font-size: 17px; font-weight: 600">
+            When was the incident resolved?
+          </p>
+          <v-row no-gutters>
+            <v-col cols="12" sm="6" class="px-1">
+              <InputLabel class="text-capitalize" title="Action Taken" />
+              <p class="mt-2 text-h6 text-capitalize">
+                {{ authorities?.whenIncidentResolve?.actionTaken }}
+              </p>
+            </v-col>
+            <v-col cols="12" sm="6" class="px-1">
+              <InputLabel
+                class="text-capitalize"
+                title="Incident Resolve Time"
+              />
+              <p class="mt-2 text-h6 text-capitalize">
+                {{ authorities?.whenIncidentResolve?.time }}
+              </p>
+            </v-col>
+          </v-row>
+        </v-col>
+
+        <v-col cols="12" class="px-1 mb-6">
+          <p class="mb-2" style="font-size: 17px; font-weight: 600">
+            Name of shift in charge?
+          </p>
+          <v-row no-gutters>
+            <v-col cols="12" sm="6" class="px-1">
+              <InputLabel class="text-capitalize" title="Person in Charge" />
+              <p class="mt-2 text-h6 text-capitalize">
+                {{ authorities?.nameOfShiftIncharge?.personInCharge }}
+              </p>
+            </v-col>
+            <v-col cols="12" sm="6" class="px-1">
+              <InputLabel class="text-capitalize" title="Action Taken" />
+              <p class="mt-2 text-h6 text-capitalize">
+                {{ authorities?.nameOfShiftIncharge?.actionTaken }}
+              </p>
+            </v-col>
+          </v-row>
+        </v-col>
+
+        <v-col cols="12" class="px-1 mb-6">
+          <p class="mb-2" style="font-size: 17px; font-weight: 600"></p>
+          <v-row no-gutters>
+            <v-col cols="12" sm="6" class="px-1">
+              <InputLabel class="text-capitalize" title="Shift Start" />
+              <p class="mt-2 text-h6 text-capitalize">
+                {{ authorities?.nameOfShiftIncharge?.shiftStart }}
+              </p>
+            </v-col>
+            <v-col cols="12" sm="6" class="px-1">
+              <InputLabel class="text-capitalize" title="Shift End" />
+              <p class="mt-2 text-h6 text-capitalize">
+                {{ authorities?.nameOfShiftIncharge?.shiftEnd }}
+              </p>
+            </v-col>
+          </v-row>
+        </v-col>
+
+        <v-col cols="12" class="px-1">
+          <p class="mb-2" style="font-size: 17px; font-weight: 600">
+            Any security implication due to the incident?
+          </p>
+          <p class="mt-2 text-h6 text-capitalize">
+            {{ authorities?.securityImplication }}
+          </p>
+        </v-col>
+      </v-row>
+    </v-col>
+  </v-row>
+</template>
+
+<script lang="ts" setup>
+definePageMeta({
+  middleware: ["01-auth", "02-org"],
+  memberOnly: true,
+});
+
+// imports
+
+// utilities
+
+// props
+const props = defineProps({
+  authorities: {
+    type: Object as PropType<Record<string, any> | null>,
+    required: true,
+  },
+});
+
+// emits
+
+// state
+const authoritiesTableHeader = [
+  {
+    title: "Type of Authorities",
+    value: "type",
+  },
+  {
+    title: "Vehicle Number",
+    value: "vehicleNumber",
+  },
+  {
+    title: "Person in Charge",
+    value: "personInCharge",
+  },
+  {
+    title: "Case Report Reference",
+    value: "caseReportReference",
+  },
+  {
+    title: "Description",
+    value: "description",
+  },
+];
+</script>

package/components/IncidentReport/IncidentInformation.vue

@@ -0,0 +1,258 @@
+<template>
+  <v-row no-gutters class="px-5 pt-4">
+    <!-- Site Information -->
+    <v-col cols="12" class="border-b pb-3 mb-5">
+      <p class="mb-2" style="font-size: 17px; font-weight: 600">
+        Site Information
+      </p>
+      <v-row no-gutters class="mt-5">
+        <v-col cols="12" sm="6" md="3">
+          <InputLabel class="text-capitalize" title="Site" />
+          <p class="my-1 text-h6">{{ siteName || "NA" }}</p>
+        </v-col>
+        <v-col cols="12" sm="6" md="3">
+          <InputLabel
+            class="text-capitalize"
+            title="Incident Reference Number"
+          />
+          <p class="my-1 text-h6">
+            {{ incidentInformation?.siteInfo?.irNumber || "NA" }}
+          </p>
+        </v-col>
+        <v-col cols="12" sm="6" md="3">
+          <InputLabel class="text-capitalize" title="Submitted By" />
+          <p class="my-1 text-h6 text-capitalize">
+            {{ incidentInformation?.siteInfo?.submittedBy || "NA" }}
+          </p>
+        </v-col>
+        <v-col cols="12" sm="6" md="3">
+          <InputLabel class="text-capitalize" title="Designation" />
+          <p class="my-1 text-h6 text-capitalize">
+            {{ incidentInformation?.siteInfo?.designation || "NA" }}
+          </p>
+        </v-col>
+      </v-row>
+    </v-col>
+
+    <!-- Place of Incident -->
+    <v-col cols="12" class="border-b pb-5 mb-5 mt-1">
+      <p class="mb-2" style="font-size: 17px; font-weight: 600">
+        Place of Incident
+      </p>
+      <p class="my-1 text-h6 text-capitalize">
+        {{ incidentInformation?.placeOfIncident?.incidentLocation || "NA" }}
+      </p>
+    </v-col>
+
+    <!-- Incident Type / Time -->
+    <v-col cols="12" class="border-b pb-5 mb-5 mt-1">
+      <p class="mb-2" style="font-size: 17px; font-weight: 600">
+        Incident Type / Time
+      </p>
+      <v-row no-gutters class="mt-5">
+        <v-col cols="12" sm="3" md="3">
+          <InputLabel class="text-capitalize" title="Type of Incident" />
+          <p class="my-1 text-h6 text-capitalize">
+            {{
+              incidentInformation?.incidentTypeAndTime?.typeOfIncident || "NA"
+            }}
+          </p>
+        </v-col>
+        <v-col cols="12" sm="3" md="3">
+          <InputLabel class="text-capitalize" title="Incident Date" />
+          <p class="my-1 text-h6">
+            {{
+              toLocalDate(
+                incidentInformation?.incidentTypeAndTime?.dateOfIncident,
+              ) || "NA"
+            }}
+          </p>
+        </v-col>
+        <v-col cols="12" sm="3" md="3">
+          <InputLabel class="text-capitalize" title="Incident Start" />
+          <p class="my-1 text-h6">
+            {{
+              incidentInformation?.incidentTypeAndTime?.incidentStart || "NA"
+            }}
+          </p>
+        </v-col>
+        <v-col cols="12" sm="3" md="3">
+          <v-row no-gutters class="d-flex align-center">
+            <v-col cols="10">
+              <InputLabel class="text-capitalize" title="Incident End" />
+              <p class="my-1 text-h6">
+                {{
+                  incidentInformation?.incidentTypeAndTime?.incidentEnd || "NA"
+                }}
+              </p>
+            </v-col>
+          </v-row>
+        </v-col>
+      </v-row>
+    </v-col>
+
+    <!-- Response/Submission From (1st Contact) -->
+    <v-col cols="12" class="border-b pb-5 mb-5 mt-1">
+      <p class="mb-2" style="font-size: 17px; font-weight: 600">
+        Response/Submission From (1st Contact)
+      </p>
+      <v-row no-gutters class="mt-5">
+        <v-col cols="12" sm="4" md="3">
+          <InputLabel class="text-capitalize" title="Time" />
+          <p class="my-1 text-h6">
+            {{ incidentInformation?.submissionForm?.time || "NA" }}
+          </p>
+        </v-col>
+        <v-col cols="12" sm="4" md="3">
+          <InputLabel
+            class="text-capitalize"
+            title="Time of Report Submission"
+          />
+          <p class="my-1 text-h6">
+            {{ incidentInformation?.submissionForm?.timeOfResponse || "NA" }}
+          </p>
+        </v-col>
+        <v-col cols="12" sm="4" md="3">
+          <InputLabel class="text-capitalize" title="Date" />
+          <p class="my-1 text-h6">
+            {{
+              toLocalDate(incidentInformation?.submissionForm?.dateOfReport) ||
+              "NA"
+            }}
+          </p>
+        </v-col>
+      </v-row>
+    </v-col>
+
+    <!-- Name of Informant/Complainant Information -->
+    <v-col cols="12" class="border-b pb-5 mb-5 mt-1">
+      <p class="mb-2" style="font-size: 17px; font-weight: 600">
+        Name of Informant/Complainant Information
+      </p>
+      <v-row no-gutters class="d-flex align-center mt-5">
+        <v-col cols="12" sm="4" md="3">
+          <InputLabel class="text-capitalize" title="Name" />
+          <p class="my-1 text-h6 text-capitalize">
+            {{ incidentInformation?.complaintInfo?.complainant || "NA" }}
+          </p>
+        </v-col>
+        <v-col cols="12" sm="4" md="3">
+          <InputLabel class="text-capitalize" title="NRIC/WP Number" />
+          <p class="my-1 text-h6 text-capitalize">
+            {{ incidentInformation?.complaintInfo?.nric || "NA" }}
+          </p>
+        </v-col>
+        <v-col cols="12" sm="4" md="3">
+          <InputLabel class="text-capitalize" title="Contact Number" />
+          <p class="my-1 text-h6 text-capitalize">
+            {{ incidentInformation?.complaintInfo?.contact || "NA" }}
+          </p>
+        </v-col>
+      </v-row>
+    </v-col>
+
+    <!-- Name of Recipient of Complaint (1st Contact) -->
+    <v-col cols="12" class="border-b pb-5 mb-5 mt-1">
+      <p class="mb-2" style="font-size: 17px; font-weight: 600">
+        Name of Recipient of Complaint (1st Contact)
+      </p>
+      <v-row no-gutters class="d-flex align-center mt-5">
+        <v-col cols="12" sm="4" md="3">
+          <InputLabel class="text-capitalize" title="Name" />
+          <p class="my-1 text-h6 text-capitalize">
+            {{ incidentInformation?.recipientOfComplaint?.recipient || "NA" }}
+          </p>
+        </v-col>
+        <v-col cols="12" sm="4" md="3">
+          <InputLabel class="text-capitalize" title="NRIC/WP Number" />
+          <p class="my-1 text-h6 text-capitalize">
+            {{ incidentInformation?.recipientOfComplaint?.nric || "NA" }}
+          </p>
+        </v-col>
+        <v-col cols="12" sm="4" md="3">
+          <InputLabel class="text-capitalize" title="Contact Number" />
+          <p class="my-1 text-h6 text-capitalize">
+            {{ incidentInformation?.recipientOfComplaint?.contact || "NA" }}
+          </p>
+        </v-col>
+      </v-row>
+    </v-col>
+
+    <!-- Complaint Received through -->
+    <v-col cols="12" class="border-b pb-5 mb-5 mt-1">
+      <p class="mb-2" style="font-size: 17px; font-weight: 600">
+        Complaint Received through
+      </p>
+      <v-col cols="12">
+        <InputLabel class="text-capitalize" title="Received through" />
+        <p
+          v-if="
+            incidentInformation?.complaintReceivedTo?.receivedVia != 'others'
+          "
+          class="my-1 text-h6 text-capitalize"
+        >
+          {{ incidentInformation?.complaintReceivedTo?.receivedVia || "NA" }}
+        </p>
+
+        <p v-else class="my-1 text-h6">
+          {{
+            incidentInformation?.complaintReceivedTo?.otherDescription || "NA"
+          }}
+        </p>
+      </v-col>
+    </v-col>
+
+    <!-- Brief Description -->
+    <v-col cols="12" class="mb-10">
+      <p class="mb-2" style="font-size: 17px; font-weight: 600">
+        Brief Description
+      </p>
+      <p class="mt-5 text-h6 text-capitalize">
+        {{ incidentInformation?.complaintReceivedTo?.briefDescription || "NA" }}
+      </p>
+    </v-col>
+  </v-row>
+</template>
+
+<script lang="ts" setup>
+definePageMeta({
+  middleware: ["01-auth", "02-org"],
+  memberOnly: true,
+});
+
+// props
+const props = defineProps({
+  incidentInformation: {
+    type: Object as PropType<Record<string, any> | null>,
+    required: true,
+  },
+});
+
+// utilities
+const { getSiteById } = useSiteSettings();
+
+// state
+const siteName = ref("");
+
+const siteId = computed(() => props.incidentInformation?.siteInfo?.site );
+
+watch(
+  siteId,
+  async (newSiteId) => {
+    if (!newSiteId) return;
+
+    const siteDataValue = await getSiteById(newSiteId);
+
+    siteName.value = siteDataValue?.name ?? "";
+  },
+  { immediate: true }
+);
+
+function toLocalDate(utcString: string) {
+  return new Date(utcString).toLocaleString("en-US", {
+    year: "numeric",
+    month: "2-digit",
+    day: "2-digit",
+  });
+}
+</script>

package/components/IncidentReport/affectedEntities.vue

@@ -0,0 +1,167 @@
+<template>
+  <v-row no-gutters class="px-5 pt-4">
+    <!-- Any unit affected -->
+    <v-col cols="12" class="border-b pb-5 mb-5 mt-1">
+      <p class="mb-2" style="font-size: 17px; font-weight: 600">
+        Any unit affected?
+      </p>
+      <p
+        v-if="affectedEntities?.anyUnitAffectedValue == 'no'"
+        class="mt-2 text-h6 text-capitalize"
+      >
+        {{ affectedEntities?.anyUnitAffectedValue }}
+      </p>
+      <!-- Block Level Unit Section -->
+      <v-row v-else no-gutters class="d-flex align-center mt-5">
+        <v-row
+          v-if="affectedEntities?.affectedUnit.hasOwnProperty('block')"
+          no-gutters
+        >
+          <v-col cols="12" sm="4">
+            <InputLabel class="text-capitalize" title="Block" />
+            <p class="my-1 text-h6">
+              {{ affectedEntities?.affectedUnit?.block }}
+            </p>
+          </v-col>
+          <v-col cols="12" sm="4">
+            <InputLabel class="text-capitalize" title="Level" />
+            <p class="my-1 text-h6">
+              {{ affectedEntities?.affectedUnit?.level }}
+            </p>
+          </v-col>
+          <v-col cols="12" sm="4">
+            <InputLabel class="text-capitalize" title="Unit" />
+            <p class="my-1 text-h6">
+              {{ affectedEntities?.affectedUnit?.unit }}
+            </p>
+          </v-col>
+        </v-row>
+
+        <v-col v-else cols="12" class="px-1 mb-0">
+          <InputLabel class="text-capitalize" title="Location" />
+          <p class="my-1 text-h6 text-capitalize">
+            {{ affectedEntities?.affectedUnit?.other }}
+          </p>
+        </v-col>
+
+        <v-col cols="12" class="px-1 mb-0 mt-5">
+          <InputLabel class="text-capitalize" title="Remarks" />
+          <p class="my-1 text-h6 text-capitalize">
+            {{ affectedEntities?.affectedUnit?.remarks }}
+          </p>
+        </v-col>
+      </v-row>
+    </v-col>
+
+    <!-- Anyone affected/injured -->
+    <v-col cols="12" class="border-b pb-5 mb-5 mt-1">
+      <p class="mb-2" style="font-size: 17px; font-weight: 600">
+        Anyone affected/injured?
+      </p>
+      <p
+        v-if="affectedEntities?.anyoneAffectedValue == 'no'"
+        class="my-1 text-h6 text-capitalize"
+      >
+        {{ affectedEntities?.anyoneAffectedValue }}
+      </p>
+
+      <v-data-table
+        v-else
+        :headers="injuredTableHeader"
+        :items="affectedEntities?.affectedInjured"
+        fixed-header
+        hide-default-footer
+        :hide-default-header="false"
+        items-per-page="100"
+        style="max-height: calc(100vh - (200px))"
+        class="border mt-5"
+      >
+      </v-data-table>
+    </v-col>
+
+    <!-- Anyone damage to property -->
+    <v-col cols="12" class="pb-5 mb-5 mt-1">
+      <p class="mb-2" style="font-size: 17px; font-weight: 600">
+        Anyone damage to property?
+      </p>
+      <p
+        v-if="affectedEntities?.anyUnitAffectedValue == 'no'"
+        class="my-1 text-h6 text-capitalize"
+      >
+        {{ affectedEntities?.anyUnitAffectedValue }}
+      </p>
+
+      <v-data-table
+        v-else
+        :headers="damagePropertyTableHeader"
+        :items="affectedEntities?.anyoneDamageToProperty"
+        fixed-header
+        hide-default-footer
+        :hide-default-header="false"
+        items-per-page="100"
+        style="max-height: calc(100vh - (200px))"
+        class="border mt-5"
+      >
+      </v-data-table>
+    </v-col>
+  </v-row>
+</template>
+
+<script lang="ts" setup>
+definePageMeta({
+  middleware: ["01-auth", "02-org"],
+  memberOnly: true,
+});
+
+// imports
+
+// utilities
+
+// props
+const props = defineProps({
+  affectedEntities: {
+    type: Object as PropType<Record<string, any> | null>,
+    required: true,
+  },
+});
+
+// emits
+
+// state
+const injuredTableHeader = [
+  {
+    title: "Name",
+    value: "name",
+  },
+  {
+    title: "NRIC/WP No.",
+    value: "nric",
+  },
+  {
+    title: "Contact Number",
+    value: "contact",
+  },
+];
+const damagePropertyTableHeader = [
+  {
+    title: "Description",
+    value: "description",
+  },
+  {
+    title: "Block / Level / Unit",
+    value: "blkLevelUnit",
+  },
+  {
+    title: "Name",
+    value: "name",
+  },
+  {
+    title: "Contact Number",
+    value: "contact",
+  },
+  {
+    title: "Action",
+    value: "action",
+  },
+];
+</script>

package/components/InvitationMain.vue

@@ -93,7 +93,7 @@
                 <v-icon v-bind="props">mdi-dots-horizontal</v-icon>
               </template>
               <v-list>
-                <v-list-item @click="openConfirmDialog(item._id ?? '')">
+                <v-list-item @click="openConfirmDialog(item._id ?? '')" v-if="item.status === 'pending'">
                   Cancel Invite
                 </v-list-item>
               </v-list>
@@ -118,21 +118,23 @@
         </p>
       </template>
       <template #footer>
-        <v-btn
-          variant="text"
-          @click="confirmDialog = false"
-          :disabled="cancelLoading"
-        >
-          Close
-        </v-btn>
-        <v-btn
-          color="primary"
-          variant="flat"
-          @click="onConfirmCancel"
-          :loading="cancelLoading"
-        >
-          Cancel Invite
-        </v-btn>
+        <div class="d-flex justify-center ga-3 w-100">
+          <v-btn
+            variant="text"
+            @click="confirmDialog = false"
+            :disabled="cancelLoading"
+          >
+            Close
+          </v-btn>
+          <v-btn
+            color="primary"
+            variant="flat"
+            @click="onConfirmCancel"
+            :loading="cancelLoading"
+          >
+            Cancel Invite
+          </v-btn>
+        </div>
       </template>
     </ConfirmDialog>
     <Snackbar v-model="messageSnackbar" :text="message" :color="messageColor" />
@@ -245,7 +247,7 @@ const {
     status: props.status,
     search: headerSearch.value,
     type: "user-invite,member-invite",
-    app: props.app
+    app: props.app,
   })
 );
 

package/components/PasswordConfirmation.vue

@@ -0,0 +1,95 @@
+<template>
+    <v-card width="100%" :disabled="loading || processingPassword" :loading="loading || processingPassword">
+        <v-toolbar density="compact">
+            <v-row no-gutters class="pa-3 text-h6 font-weight-bold">
+                <span>{{ promptTitle }}</span>
+            </v-row>
+        </v-toolbar>
+        <v-card-text style="max-height: 100vh; overflow-y: auto" class="pa-5 my-5 px-7 text-center">
+            <v-row no-gutters class="w-100">
+                <v-col cols="12">
+                    <v-icon icon="mdi-lock-outline" :color="'gray'" class="text-h2" />
+                </v-col>
+                <v-col cols="12" v-if="message" class="mt-2">
+                    {{ message }}
+                </v-col>
+                <v-col cols="12" class="mt-5 text-start">
+                    <v-text-field v-model="passwordInput" label="Password" type="password" density="compact" :error-messages="errorMessage"></v-text-field>
+                </v-col>
+            </v-row>
+        </v-card-text>
+
+        <v-toolbar class="pa-0" density="compact">
+            <v-row no-gutters>
+                <v-col cols="6" class="pa-0">
+                    <v-btn block variant="text" class="text-none" size="large" tile @click="emit('cancel')" height="48">
+                        Cancel
+                    </v-btn>
+                </v-col>
+
+                <v-col cols="6" class="pa-0">
+                    <v-btn block tile variant="flat" class="text-none" size="large" height="48" color="red" :disabled="!passwordInput"
+                        @click="handleConfirm">
+                        Confirm
+                    </v-btn>
+                </v-col>
+            </v-row>
+        </v-toolbar>
+    </v-card>
+</template>
+
+<script setup lang="ts">
+
+const props = defineProps({
+    message: {
+        type: String,
+        default: "Confirm your digital signature with password to proceed."
+    },
+    promptTitle: {
+        type: String,
+        default: "Confirm Action"
+    },
+    loading: {
+        type: Boolean,
+        default: false
+    },
+})
+
+const { confirmPassword } = useDOBEntries();
+const { currentUser } = useLocalAuth();
+
+const emit = defineEmits(["cancel", "confirm"])
+
+const processingPassword = ref(false)
+const errorMessage = ref('')
+
+
+const passwordInput = ref('')
+
+
+
+async function handleConfirm() {
+    errorMessage.value = ''
+  try {
+    processingPassword.value = true;
+    const userId = currentUser.value?._id;
+    if (!userId) {
+        throw new Error('User not found. Please login again.');
+    }   
+    const res = await confirmPassword({ userId, password: passwordInput.value });
+    if (res) {
+      emit('confirm');
+    }
+
+  } catch (err: any) {
+    const errMessage = err?.response?._data?.message || 'Something went wrong. Please try again.';
+    console.log('[ERROR]', err)
+    errorMessage.value = errMessage;
+  } finally {
+    processingPassword.value = false;
+  }
+}
+
+</script>
+
+<style scoped></style>

package/components/RolePermissionMain.vue

@@ -119,21 +119,23 @@
       </template>
 
       <template #footer>
-        <v-btn
-          variant="text"
-          @click="confirmDialog = false"
-          :disabled="deleteLoading"
-        >
-          Close
-        </v-btn>
-        <v-btn
-          color="primary"
-          variant="flat"
-          @click="handleDeleteRole"
-          :loading="deleteLoading"
-        >
-          Delete Role
-        </v-btn>
+        <div class="d-flex justify-center ga-3 w-100">
+          <v-btn
+            variant="text"
+            @click="confirmDialog = false"
+            :disabled="deleteLoading"
+          >
+            Close
+          </v-btn>
+          <v-btn
+            color="primary"
+            variant="flat"
+            @click="handleDeleteRole"
+            :loading="deleteLoading"
+          >
+            Delete Role
+          </v-btn>
+        </div>
       </template>
     </ConfirmDialog>
 

package/components/ServiceProviderMain.vue

@@ -40,6 +40,7 @@
         </div>
 
         <v-text-field
+          v-model="searchText"
           placeholder="Search..."
           variant="outlined"
           density="comfortable"
@@ -420,19 +421,27 @@ const {
   invite: inviteServiceProvider,
 } = useServiceProvider();
 
-const loading = ref(true);
-
 const { getSiteById } = useSite();
 
+const { getColorStatus, debounce } = useUtils();
+
 const { data: site } = await useLazyAsyncData(
   "get-site-by-id-" + props.siteId,
   () => getSiteById(props.siteId)
 );
 
-const { data: serviceProviderReq, refresh: _getAllServiceProvider } =
-  await useLazyAsyncData("get-all-service-providers", () =>
-    getAllServiceProvider({ siteId: props.siteId })
-  );
+const loading = computed(() => getAllReqStatus.value === "pending");
+
+const {
+  data: serviceProviderReq,
+  refresh: _getAllServiceProvider,
+  status: getAllReqStatus,
+} = await useLazyAsyncData("get-all-service-providers", () =>
+  getAllServiceProvider({
+    siteId: props.siteId,
+    search: searchText.value || "",
+  })
+);
 
 watchEffect(() => {
   // console.log("serviceProviderReq", serviceProviderReq.value);
@@ -441,12 +450,14 @@ watchEffect(() => {
     pages.value = serviceProviderReq.value.pages;
     pageRange.value = serviceProviderReq.value.pageRange;
   }
-  loading.value = false;
+  // loading.value = false;
 });
 
 const createDialog = ref(false);
 const createInviteDialog = ref(false);
 
+const searchText = ref("");
+
 const success = () => {
   createDialog.value = false;
   // getServiceProvider();
@@ -544,4 +555,13 @@ async function submitServiceProviderInvite() {
     disableServiceProvider.value = false;
   }
 }
+
+const debounceSearch = debounce(_getAllServiceProvider, 500);
+
+watch(
+  () => searchText.value,
+  () => {
+    debounceSearch();
+  }
+);
 </script>

package/composables/useDOBEntries.ts

@@ -0,0 +1,13 @@
+export default function () {
+  async function confirmPassword({ userId, password} : { userId: string; password: string}) {
+    return await useNuxtApp().$api<Record<string, any>>(`/api/auth/verify-password/id/${userId}`, {
+      method: "POST",
+      body: { password},
+    });
+  }
+
+
+  return {
+    confirmPassword
+  };
+}

package/composables/useDocument.ts

@@ -26,8 +26,9 @@ export default function useDocument() {
   }
 
   function deleteById(id: string) {
-    return useNuxtApp().$api(`/api/documents/${id}`, {
-      method: "DELETE",
+    return useNuxtApp().$api<Record<string, any>>(`/api/documents/deleted/document`, {
+      method: "PUT",
+      query: { id },
     });
   }
 

package/composables/useFile.ts

@@ -30,12 +30,10 @@ export default function useFile() {
   }
 
   function deleteFile(attachmentId: string) {
-    return useNuxtApp().$api<Record<string, any>>(
-      `/api/files/${attachmentId}`,
-      {
-        method: "DELETE",
-      }
-    );
+    return useNuxtApp().$api<Record<string, any>>(`/api/files/deleted/file`, {
+      method: "PUT",
+      query: { id: attachmentId },
+    });
   }
 
   function getFileById(id: string) {

package/composables/useRole.ts

@@ -58,8 +58,9 @@ export default function useRole() {
   }
 
   function deleteRole(_id: string) {
-    return useNuxtApp().$api<Record<string, any>>(`/api/roles/${_id}`, {
-      method: "DELETE",
+    return useNuxtApp().$api<Record<string, any>>(`/api/roles/deleted/role`, {
+      method: "PUT",
+      query: { id: _id },
     });
   }
 

package/package.json

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

package/types/verification.d.ts

@@ -5,7 +5,7 @@ declare type TVerificationMetadata = {
 
 declare type TMiniVerification = Pick<
   TVerification,
-  "createdAt" | "email" | "_id"
+  "createdAt" | "email" | "_id" | "status"
 >;
 
 declare type TVerification = {