@7365admin1/layer-common 1.9.0 → 1.10.1

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,
   })
 );