@7365admin1/layer-common 1.8.6 → 1.10.0

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>