@7365admin1/layer-common 1.10.9 → 1.10.10

package/components/IncidentReport/Authorities.vue

@@ -25,158 +25,178 @@
       >
       </v-data-table>
     </v-col>
+    <div class="w-100 my-8 mx-2">
+      <v-table class="responsive-table border elevation-0">
+        <thead>
+          <tr>
+            <th
+              v-for="(item, index) in concernHeader"
+              :key="index"
+              class="text-left font-weight-bold text-black border-e"
+            >
+              {{ item }}
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <!-- 1 -->
+          <tr>
+            <td class="border-e">1.</td>
+            <td class="border-e">
+              What was done to address the incident thereafter?
+            </td>
+            <td class="border-e pa-2">
+              {{ authorities?.incidentThereAfter.actionTaken }}
+            </td>
+            <td class="border-e pa-2">
+              {{ authorities?.incidentThereAfter.status }}
+            </td>
+            <td class="pa-2">
+              {{ authorities?.incidentThereAfter.time }}
+            </td>
+          </tr>
 
-    <!-- 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>
+          <!-- 2 -->
+          <tr>
+            <td class="border-e">2.</td>
+            <td class="border-e">
+              Were the management notified and who was notified?
+            </td>
+            <td class="border-e pa-2">
+              {{ authorities?.managementNotified.actionTaken }}
+            </td>
+            <td class="border-e pa-2">
+              {{ authorities?.managementNotified.status }}
+            </td>
+            <td class="pa-2">
+              {{ authorities?.managementNotified.time }}
+            </td>
+          </tr>
+
+          <!-- 3 -->
+          <tr>
+            <td class="border-e">3.</td>
+            <td class="border-e">How was the incident resolved?</td>
+            <td class="border-e pa-2">
+              {{ authorities?.incidentResolved.actionTaken }}
+            </td>
+            <td class="border-e pa-2">
+              {{ authorities?.incidentResolved.status }}
+            </td>
+            <td class="pa-2">
+              {{ formatDate(authorities?.incidentResolved.time) }}
+            </td>
+          </tr>
+
+          <!-- 4 -->
+          <tr>
+            <td class="border-e">4.</td>
+            <td class="border-e">What was the cause of the incident?</td>
+            <td class="border-e pa-2">
+              {{ authorities?.causeOfIncident.actionTaken }}
+            </td>
+            <td class="border-e pa-2">
+              {{ authorities?.causeOfIncident.status }}
+            </td>
+            <td class="pa-2">
+              {{ authorities?.causeOfIncident.time }}
+            </td>
+          </tr>
+
+          <!-- 5 -->
+          <tr>
+            <td class="border-e">5.</td>
+            <td class="border-e">Any systems used to verify the incident?</td>
+            <td class="border-e pa-2">
+              {{ authorities?.systemUsed.actionTaken }}
+            </td>
+            <td class="border-e pa-2">
+              {{ authorities?.systemUsed.status }}
+            </td>
+            <td class="pa-2">
+              {{ formatDate(authorities?.systemUsed.time) }}
+            </td>
+          </tr>
+
+          <!-- 6 -->
+          <tr>
+            <td class="border-e">6.</td>
+            <td class="border-e">Any CCTV records or pictures taken?</td>
+            <td class="border-e pa-2">
+              {{ authorities?.cctvRecord.actionTaken }}
+            </td>
+            <td class="border-e pa-2">
+              {{ authorities?.cctvRecord.status }}
+            </td>
+            <td class="pa-2">
+              {{ formatDate(authorities?.cctvRecord.time) }}
+            </td>
+          </tr>
+
+          <!-- 7 -->
+          <tr>
+            <td class="border-e">7.</td>
+            <td class="border-e">Particulars of tenant / owner (if any)</td>
+            <td class="border-e pa-2">
+              {{ authorities?.particularsOwner.actionTaken }}
+            </td>
+            <td class="border-e pa-2">
+              {{ authorities?.particularsOwner.status }}
+            </td>
+            <td class="pa-2">
+              {{ authorities?.particularsOwner.time }}
+            </td>
+          </tr>
+
+          <!-- 8 -->
+          <tr>
+            <td class="border-e">8.</td>
+            <td class="border-e">When was the incident resolved?</td>
+            <td class="border-e pa-2">
+              {{ authorities?.whenIncidentResolve.actionTaken }}
+            </td>
+            <td class="border-e pa-2">
+              {{ authorities?.whenIncidentResolve.status }}
+            </td>
+            <td class="pa-2">
+              {{ authorities?.whenIncidentResolve.time }}
+            </td>
+          </tr>
+
+          <!-- 9 -->
+          <tr>
+            <td class="border-e">9.</td>
+            <td class="border-e">Name of Shift In charge</td>
+            <td class="border-e pa-2">
+              {{ authorities?.nameOfShiftIncharge.actionTaken }}
+            </td>
+            <td class="border-e pa-2">
+              {{ authorities?.nameOfShiftIncharge.status }}
+            </td>
+            <td class="pa-2">
+              {{ authorities?.nameOfShiftIncharge.time }}
+            </td>
+          </tr>
+
+          <!-- 10 -->
+          <tr>
+            <td class="border-e">10.</td>
+            <td class="border-e">
+              Any security implication due to the incident?
+            </td>
+            <td class="border-e pa-2">
+              {{ authorities?.securityImplication.actionTaken }}
+            </td>
+            <td class="border-e pa-2">
+              {{ authorities?.securityImplication.status }}
+            </td>
+            <td class="pa-2">
+              {{ formatDate(authorities?.securityImplication.time) }}
+            </td>
+          </tr>
+        </tbody>
+      </v-table>
+    </div>
   </v-row>
 </template>
 
@@ -223,4 +243,22 @@ const authoritiesTableHeader = [
     value: "description",
   },
 ];
+
+const concernHeader = [
+  "S/No",
+  "Areas of Concern",
+  "Actions Taken",
+  "Status",
+  "Time",
+];
+
+const formatDate = (date: Date | string | null) => {
+  if (!date) return "";
+
+  const d = typeof date === "string" ? new Date(date) : date;
+
+  if (isNaN(d.getTime())) return ""; // safeguard for invalid date
+
+  return new Intl.DateTimeFormat("en-GB").format(d);
+};
 </script>

package/components/IncidentReport/IncidentInformation.vue

@@ -89,6 +89,19 @@
           </v-row>
         </v-col>
       </v-row>
+      <v-row no-gutters class="mt-5">
+        <v-col cols="12" sm="3" md="3">
+          <InputLabel
+            class="text-capitalize"
+            title="Time of Response (1st Contact)"
+          />
+          <p class="my-1 text-h6">
+            {{
+              incidentInformation?.incidentTypeAndTime?.timeOfResponse || "NA"
+            }}
+          </p>
+        </v-col>
+      </v-row>
     </v-col>
 
     <!-- Response/Submission From (1st Contact) -->
@@ -103,15 +116,6 @@
             {{ 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">
@@ -140,7 +144,7 @@
           <div>
             <InputLabel class="text-capitalize mr-1" title="NRIC/WP Number" />
             <v-icon
-            v-if="incidentInformation?.complaintInfo?.nric"
+              v-if="incidentInformation?.complaintInfo?.nric"
               size="small"
               color="blue"
               class="cursor-pointer"

package/components/IncidentReport/IncidentInformationDownload.vue

@@ -0,0 +1,212 @@
+<template>
+  <v-row no-gutters class="px-5 pt-4">
+    <!-- Site Information -->
+    <p
+      class="text-uppercase text-center w-100 text-h6"
+      style="background: #aa212a; color: #fff; padding: 10px"
+    >
+      Incident Report
+    </p>
+    <v-row no-gutters class="mt-5 border pb-5">
+      <p
+        class="w-100 text-h6 pa-2 text-white text-center"
+        style="background: #fcbf49"
+      >
+        Incident Information
+      </p>
+
+      <v-col cols="6" class="pa-3 border-b border-e">
+        <p class="font-weight-bold">Site</p>
+        <p>{{ siteName || "-" }}</p>
+      </v-col>
+      <v-col cols="6" class="pa-3 border-b">
+        <p class="font-weight-bold">Reference</p>
+        <p>{{ incidentInformation?.siteInfo?.irNumber || "-" }}</p>
+      </v-col>
+
+      <v-col cols="6" class="pa-3 border-b border-e">
+        <p class="font-weight-bold">Place of Incident</p>
+        <p>
+          {{ incidentInformation?.placeOfIncident?.incidentLocation || "-" }}
+        </p>
+      </v-col>
+      <v-col cols="6" class="pa-3 border-b">
+        <p class="font-weight-bold">Type of Incident</p>
+        <p>
+          {{ incidentInformation?.incidentTypeAndTime?.typeOfIncident || "-" }}
+        </p>
+      </v-col>
+
+      <v-col cols="6" class="pa-3 border-b border-e">
+        <p class="font-weight-bold">Date of Incident</p>
+        <p>
+          {{
+            toLocalDate(
+              incidentInformation?.incidentTypeAndTime?.dateOfIncident
+            ) || "NA"
+          }}
+        </p>
+      </v-col>
+      <v-col cols="6" class="pa-3 border-b">
+        <p class="font-weight-bold">Incident Start Time</p>
+        <p>
+          {{ incidentInformation?.incidentTypeAndTime?.incidentStart || "-" }}
+        </p>
+      </v-col>
+
+      <v-col cols="6" class="pa-3 border-b border-e">
+        <p class="font-weight-bold">Time of Response (From 1st Contact)</p>
+        <p>
+          {{ incidentInformation?.incidentTypeAndTime?.timeOfResponse || "-" }}
+        </p>
+      </v-col>
+      <v-col cols="6" class="pa-3 border-b">
+        <p class="font-weight-bold">Incident End Time</p>
+        <p>
+          {{ incidentInformation?.incidentTypeAndTime?.incidentEnd || "-" }}
+        </p>
+      </v-col>
+
+      <v-col cols="6" class="pa-3 border-b border-e">
+        <p class="font-weight-bold">Date of Report Submission</p>
+        {{
+          toLocalDate(incidentInformation?.submissionForm?.dateOfReport) || "NA"
+        }}
+      </v-col>
+      <v-col cols="6" class="pa-3 border-b">
+        <p class="font-weight-bold">Time of Report Submission</p>
+        <p>{{ incidentInformation?.submissionForm?.time || "-" }}</p>
+      </v-col>
+
+      <v-col cols="6" class="pa-3 border-b border-e">
+        <p class="font-weight-bold">Report Submitted By</p>
+        <p>{{ incidentInformation?.siteInfo?.submittedBy || "-" }}</p>
+      </v-col>
+      <v-col cols="6" class="pa-3 border-b">
+        <p class="font-weight-bold">Designation</p>
+        <p>{{ incidentInformation?.siteInfo?.designation || "-" }}</p>
+      </v-col>
+
+      <v-col cols="4" class="pa-3 border-b border-e">
+        <p class="font-weight-bold">Name of Informant/Complainant</p>
+        <p>{{ incidentInformation?.complaintInfo?.complainant || "-" }}</p>
+      </v-col>
+      <v-col cols="4" class="pa-3 border-b border-e">
+        <p class="font-weight-bold">Contact No.</p>
+        <p>{{ incidentInformation?.complaintInfo?.contact || "-" }}</p>
+      </v-col>
+      <v-col cols="4" class="pa-3 border-b">
+        <p class="font-weight-bold">NRIC/WP No.</p>
+        <p>
+          <v-icon
+            v-if="incidentInformation?.complaintInfo?.nric"
+            size="small"
+            color="blue"
+            class="cursor-pointer"
+            @click="showNRICComplainant = !showNRICComplainant"
+          >
+            {{ showNRICComplainant ? "mdi-eye-off" : "mdi-eye" }}
+          </v-icon>
+        </p>
+      </v-col>
+
+      <v-col cols="4" class="pa-3 border-b border-e">
+        <p class="font-weight-bold">
+          Name of Recipient of Complaint (1st Contact)
+        </p>
+        <p>{{ incidentInformation?.recipientOfComplaint?.recipient || "-" }}</p>
+      </v-col>
+      <v-col cols="4" class="pa-3 border-b border-e">
+        <p class="font-weight-bold">Contact No.</p>
+        <p>{{ incidentInformation?.recipientOfComplaint?.contact || "-" }}</p>
+      </v-col>
+      <v-col cols="4" class="pa-3 border-b">
+        <p class="font-weight-bold">NRIC/WP No.</p>
+        <p>
+          {{
+            showNRICRecipient
+              ? incidentInformation?.recipientOfComplaint?.nric || "-"
+              : maskNRIC(incidentInformation?.recipientOfComplaint?.nric)
+          }}
+        </p>
+      </v-col>
+
+      <v-col cols="12" class="pa-3 border-b border-e">
+        <p class="font-weight-bold">Complaint Received through</p>
+        <p
+          v-if="
+            incidentInformation?.complaintReceivedTo?.receivedVia != 'others'
+          "
+        >
+          {{ incidentInformation?.complaintReceivedTo?.receivedVia || "-" }}
+        </p>
+
+        <p v-else>
+          {{
+            incidentInformation?.complaintReceivedTo?.otherDescription || "-"
+          }}
+        </p>
+      </v-col>
+      <v-col cols="6" class="pa-3">
+        <p class="font-weight-bold">Brief Description</p>
+        <p>
+          {{
+            incidentInformation?.complaintReceivedTo?.briefDescription || "-"
+          }}
+        </p>
+      </v-col>
+    </v-row>
+  </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);
+
+const showNRICComplainant = ref(false);
+const showNRICRecipient = ref(false);
+
+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",
+  });
+}
+
+const maskNRIC = (value: any) => {
+  if (!value) return "NA";
+
+  return value.replace(/.(?=.{3})/g, "*");
+};
+</script>