@7365admin1/layer-common 1.10.8 → 1.10.10

package/components/FileInput.vue

@@ -0,0 +1,289 @@
+<template>
+  <div>
+    <v-file-input
+      v-model="files"
+      :label="label"
+      accept="image/*"
+      :prepend-icon="prependIcon"
+      :loading="isFileUploading"
+      hide-details
+      chips
+      multiple
+      clearable
+      @update:modelValue="handleFileSelect"
+      @click:clear="handleClear"
+      :hide-input="hasHideInput"
+    >
+      <template v-slot:append v-if="hasLabel">
+        <slot name="append">
+          <v-btn color="primary" height="50px" @click="openCameraDialog">
+            <v-icon>mdi-camera</v-icon>
+          </v-btn>
+        </slot>
+      </template>
+    </v-file-input>
+
+    <!-- Camera Dialog -->
+    <v-dialog
+      v-model="showCameraDialog"
+      transition="dialog-bottom-transition"
+      width="800"
+      max-width="800"
+      persistent
+      @after-enter="startCamera"
+    >
+      <v-container
+        class="d-flex justify-center"
+        max-height="90vh"
+        width="800"
+        max-width="800"
+      >
+        <v-card elevation="2" class="d-flex flex-column align-center pa-2">
+          <v-toolbar>
+            <v-card-title class="text-h5">Take a Picture</v-card-title>
+            <v-spacer></v-spacer>
+            <v-btn
+              color="grey-darken-1"
+              icon="mdi-close"
+              @click="closeCameraDialog"
+            ></v-btn>
+          </v-toolbar>
+
+          <div
+            id="reader"
+            class="d-flex justify-center align-center"
+            style="
+              position: relative;
+              width: 500px;
+              min-width: 400px;
+              height: 400px;
+            "
+          >
+            <video
+              ref="video"
+              style="flex: 1; height: 400px; min-width: 300px"
+              class="video-shutter"
+              autoplay
+            ></video>
+            <canvas
+              ref="canvas"
+              style="flex: 1; height: 400px; min-width: 300px; display: none"
+            ></canvas>
+          </div>
+
+          <v-row align="center" justify="center">
+            <v-col cols="6">
+              <v-btn color="primary" icon class="mt-4" @click="switchCamera">
+                <v-icon>mdi-camera-switch</v-icon>
+              </v-btn>
+            </v-col>
+            <v-col cols="6">
+              <v-btn
+                color="secondary"
+                icon
+                class="mt-4"
+                @click="captureImageFromCamera"
+              >
+                <v-icon large>mdi-camera-outline</v-icon>
+              </v-btn>
+            </v-col>
+          </v-row>
+        </v-card>
+      </v-container>
+    </v-dialog>
+  </div>
+
+  <Snackbar v-model="messageSnackbar" :text="message" :color="messageColor" />
+</template>
+
+<script setup lang="ts">
+interface FileWithPreview {
+  name: string;
+  data: File;
+  progress: number;
+  url: string;
+}
+
+const props = defineProps({
+  label: {
+    type: String,
+    default: "Select File",
+  },
+  prependIcon: {
+    type: String,
+    default: "mdi-paperclip",
+  },
+  required: {
+    type: Boolean,
+    default: true,
+  },
+  initFiles: {
+    type: Array,
+  },
+  hasLabel: {
+    type: Boolean,
+    default: true,
+  },
+  hasHideInput: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits<{
+  (event: "onFileAttach", payload: Array<{ data: File }>): void;
+  (event: "update:files", files: FileWithPreview[]): void;
+  (event: "onFileRemoved", payload: { index: number; file: File }): void;
+  (event: "onClear"): void;
+}>();
+
+const { showUploadedFiles } = useUploadFiles();
+const isFileUploading = ref<boolean>(false);
+
+const files = ref<File[]>([]);
+const showCameraDialog = ref(false);
+const video = ref<HTMLVideoElement | null>(null);
+const canvas = ref<HTMLCanvasElement | null>(null);
+const cameraFacingMode = ref<"environment" | "user">("environment");
+
+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;
+}
+
+watchEffect(() => {
+  files.value = [...(props.initFiles as typeof files.value)];
+});
+
+const handleFileSelect = async () => {
+  if (files.value && files.value.length > 0) {
+    const newFiles = files.value.map((file: File) => ({
+      name: file.name,
+      data: file,
+      progress: 0,
+      url: URL.createObjectURL(file),
+    }));
+
+    //   attachedFiles.value = [...newFiles];
+    showUploadedFiles(newFiles);
+
+    emit("update:files", newFiles);
+  } else {
+    files.value = [...(props.initFiles as typeof files.value)];
+  }
+};
+
+const handleClear = () => {
+  files.value = [];
+  emit("onClear");
+};
+
+const openCameraDialog = () => {
+  showCameraDialog.value = true;
+};
+
+const closeCameraDialog = () => {
+  showCameraDialog.value = false;
+  stopCamera();
+};
+
+const startCamera = async () => {
+  try {
+    const constraints = {
+      video: {
+        facingMode: cameraFacingMode.value,
+      },
+    };
+
+    const stream = await navigator.mediaDevices.getUserMedia(constraints);
+    if (video.value) {
+      video.value.srcObject = stream;
+      video.value.play();
+    }
+  } catch (error: any) {
+    showMessage(error, "error");
+    closeCameraDialog();
+  }
+};
+
+const stopCamera = () => {
+  if (video.value) {
+    const stream = video.value.srcObject as MediaStream;
+    if (stream) {
+      stream.getTracks().forEach((track) => track.stop());
+    }
+  }
+};
+
+const switchCamera = async () => {
+  await stopCamera();
+  cameraFacingMode.value =
+    cameraFacingMode.value === "environment" ? "user" : "environment";
+  showMessage(
+    `Switched to ${
+      cameraFacingMode.value === "environment" ? "Back Camera" : "Front Camera"
+    }`,
+    "error"
+  );
+  startCamera();
+};
+
+const captureImageFromCamera = () => {
+  if (!video.value || !canvas.value) return;
+
+  const context = canvas.value.getContext("2d");
+  if (!context) return;
+
+  // Set canvas dimensions to match video
+  canvas.value.width = video.value.videoWidth;
+  canvas.value.height = video.value.videoHeight;
+
+  // Capture the frame
+  context.drawImage(video.value, 0, 0, canvas.value.width, canvas.value.height);
+
+  // Convert to file
+  canvas.value.toBlob((blob) => {
+    if (!blob) return;
+
+    const file = new File([blob], `camera-capture-${Date.now()}.png`, {
+      type: "image/png",
+    });
+
+    files.value = [file];
+    handleFileSelect();
+    closeCameraDialog();
+  }, "image/png");
+};
+
+const removeFile = (index) => {
+  const removedFile = files.value[index];
+  files.value = files.value.filter((_, i) => i !== index);
+  emit("onFileRemoved", { index, file: removedFile }); // Emit when a file is removed
+  // emit("onFilesUpdated", files.value); // Emit updated files list
+};
+
+// Cleanup
+onUnmounted(() => {
+  stopCamera();
+});
+</script>
+
+<style scoped>
+.custom-chip {
+  max-width: 100%;
+  height: auto !important;
+  white-space: normal;
+  padding: 3px 20px;
+}
+
+.chip-text {
+  word-break: break-word;
+  white-space: normal;
+  line-height: 1.2;
+}
+</style>

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>