@7365admin1/layer-common 4.118.1 → 4.118.3

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @iservice365/layer-common
 
+## 4.118.3
+
+### Patch Changes
+
+- 90727b3: Incident report PDF: a field label stays with its value across a page break. Incident report dialog: shows "Reported by" (the report's organisation) when given `organizationId`.
+
+## 4.118.2
+
+### Patch Changes
+
+- 7beb1db: Incident Report PDF: attachments in a 2-up grid with Download links, sections flow without big gaps, and "Reported by" company name in the header and information table.
+
 ## 4.118.1
 
 ### Patch Changes
@@ -3133,11 +3145,11 @@ Monthly report: a month that had patrols opens the list of that month's patrol r
   `utils/console-tier.ts` + `composables/useConsoleTier.ts` mirror the server's
   own rule from two endpoints the console already calls, unprojected:
 
-                                                                                                                                                                                                                                                                                                                                                                                                          GET /api/members/user/:user/app/admin    the Seven365 staff membership
-                                                                                                                                                                                                                                                                                                                                                                                                          GET /api/roles/id/:role                  that membership's role document
+                                                                                                                                                                                                                                                                                                                                                                                                              GET /api/members/user/:user/app/admin    the Seven365 staff membership
+                                                                                                                                                                                                                                                                                                                                                                                                              GET /api/roles/id/:role                  that membership's role document
 
-                                                                                                                                                                                                                                                                                                                                                                                                          owner  = member.type === "admin" && role.type === "admin" && role.default === true
-                                                                                                                                                                                                                                                                                                                                                                                                          staff  = member.type === "admin" && role.type === "admin"
+                                                                                                                                                                                                                                                                                                                                                                                                              owner  = member.type === "admin" && role.type === "admin" && role.default === true
+                                                                                                                                                                                                                                                                                                                                                                                                              staff  = member.type === "admin" && role.type === "admin"
 
   `role.default` is the marker because it is the only property of a platform
   staff role no API caller can set - `role.controller.ts` validates create and

package/components/IncidentReport/Attachments.vue

@@ -0,0 +1,112 @@
+<template>
+  <div class="ir-att">
+    <p class="ir-att-title">Attachments</p>
+    <div v-if="items.length" class="ir-att-grid">
+      <div v-for="item in items" :key="item.id" class="ir-att-card">
+        <div class="ir-att-frame">
+          <img v-if="item.isImage" :src="item.url" :alt="item.name" />
+          <div v-else class="ir-att-icon">
+            <v-icon size="48">{{ item.icon }}</v-icon>
+          </div>
+        </div>
+        <p class="ir-att-name">{{ item.name }}</p>
+        <a class="ir-att-link" :href="item.url" target="_blank" rel="noopener">Download</a>
+      </div>
+    </div>
+    <p v-else class="mt-2 text-h6">No Attachments Available</p>
+  </div>
+</template>
+
+<script lang="ts" setup>
+// Print/PDF attachments: 2 per row in fixed frames so tall phone screenshots and
+// wide photos line up. The Download link is a plain <a href>, which the PDF
+// renderer keeps as a live link. Files live in the public file store, so the
+// link works for anyone holding the PDF.
+const props = defineProps({
+  photos: {
+    type: Array as PropType<string[]>,
+    default: () => [],
+  },
+});
+
+const { getFileUrl, getFileById } = useFile();
+
+const IMAGE = /\.(jpe?g|png|gif|webp|bmp|heic|svg)$/i;
+const VIDEO = /\.(mp4|mov|avi|mkv|webm|3gp)$/i;
+
+type Item = { id: string; name: string; url: string; isImage: boolean; icon: string };
+const items = ref<Item[]>([]);
+
+watch(
+  () => props.photos,
+  async (ids) => {
+    items.value = await Promise.all(
+      (ids ?? []).map(async (id) => {
+        let name = "";
+        try {
+          const res: any = await getFileById(id);
+          name = res?.data?.name ?? res?.name ?? "";
+        } catch {
+          // keep the link even if the name lookup fails
+        }
+        // No name known: treat as an image (that is what reports carry).
+        const isImage = !name || IMAGE.test(name);
+        return {
+          id,
+          name: name || "Attachment",
+          url: getFileUrl(id),
+          isImage,
+          icon: VIDEO.test(name) ? "mdi-file-video-outline" : "mdi-file-document-outline",
+        };
+      })
+    );
+  },
+  { immediate: true }
+);
+</script>
+
+<style scoped>
+.ir-att-title {
+  font-size: 17px;
+  font-weight: 600;
+  margin: 0 0 12px;
+  break-after: avoid;
+  page-break-after: avoid;
+}
+.ir-att-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 16px;
+}
+.ir-att-card {
+  break-inside: avoid;
+  page-break-inside: avoid;
+  border: 1px solid #8a8a8a;
+  padding: 8px;
+  min-width: 0;
+}
+.ir-att-frame {
+  height: 260px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #f5f5f5;
+  overflow: hidden;
+}
+.ir-att-frame img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+.ir-att-name {
+  margin: 6px 0 2px;
+  font-size: 12px;
+  overflow-wrap: anywhere;
+}
+.ir-att-link {
+  font-size: 12px;
+  font-weight: 600;
+  color: #1565c0;
+  text-decoration: underline;
+}
+</style>

package/components/IncidentReport/IncidentInformation.vue

@@ -31,6 +31,10 @@
             {{ incidentInformation?.siteInfo?.designation || "NA" }}
           </p>
         </v-col>
+        <v-col v-if="companyName" cols="12" sm="6" md="3">
+          <InputLabel class="text-capitalize" title="Reported by" />
+          <p class="my-1 text-h6">{{ companyName }}</p>
+        </v-col>
       </v-row>
     </v-col>
 
@@ -256,8 +260,15 @@ const props = defineProps({
     type: Object as PropType<Record<string, any> | null>,
     required: true,
   },
+  // The report's `organization` id: the company that filed it.
+  organizationId: {
+    type: String,
+    default: "",
+  },
 });
 
+const companyName = useIncidentCompany(() => props.organizationId);
+
 const emit = defineEmits(["showNRICComplainant", "showNRICRecipient"]);
 
 // utilities

package/components/IncidentReport/IncidentInformationDownload.vue

@@ -6,6 +6,9 @@
       <p v-if="status" class="ir-status ma-0 mt-2" :class="`ir-status--${statusKey}`">
         Status: {{ String(status).toUpperCase() }}
       </p>
+      <p v-if="companyName" class="ma-0 mt-2 ir-company">
+        Reported by: {{ companyName }}
+      </p>
     </div>
     <v-row no-gutters class="ir-box mt-5">
       <p class="ir-section w-100 text-h6 pa-2 text-center bg-warning text-on-warning">
@@ -21,6 +24,11 @@
         <p>{{ incidentInformation?.siteInfo?.irNumber || "-" }}</p>
       </v-col>
 
+      <v-col v-if="companyName" cols="12" class="pa-3 ir-cell">
+        <p class="font-weight-bold">Reported by (Company)</p>
+        <p>{{ companyName }}</p>
+      </v-col>
+
       <v-col cols="6" class="pa-3 ir-cell ir-e">
         <p class="font-weight-bold">Place of Incident</p>
         <p>
@@ -168,8 +176,15 @@ const props = defineProps({
     type: String,
     default: "",
   },
+  // The report's `organization` id: the company that filed it.
+  organizationId: {
+    type: String,
+    default: "",
+  },
 });
 
+const companyName = useIncidentCompany(() => props.organizationId);
+
 const statusKey = computed(() => String(props.status || "").toLowerCase());
 
 // utilities
@@ -249,6 +264,10 @@ const maskNRIC = (value: any) => {
   font-weight: 700;
   letter-spacing: 0.03em;
 }
+.ir-company {
+  font-size: 1rem;
+  font-weight: 600;
+}
 .ir-status--approved { color: #2e7d32; }
 .ir-status--rejected { color: #c62828; }
 .ir-box {
@@ -264,12 +283,11 @@ const maskNRIC = (value: any) => {
 }
 .ir-last {
   border-bottom: 0;
-  /* The long free-text answer may flow onto the next page, but never leave
-     one or two stray lines behind. */
-  break-inside: auto;
-  page-break-inside: auto;
-  orphans: 3;
-  widows: 3;
+}
+/* A label always travels with its value. */
+.ir-cell p:first-child {
+  break-after: avoid;
+  page-break-after: avoid;
 }
 .ir-section {
   break-after: avoid;

package/composables/useIncidentCompany.ts

@@ -0,0 +1,20 @@
+// "Reported by" company for an incident report: the report's `organization`
+// id looked up through the existing org endpoint. Blank when unreadable.
+export function useIncidentCompany(getId: () => string | undefined) {
+  const { getById: getOrgById } = useOrg();
+  const companyName = ref("");
+  watch(
+    getId,
+    async (id) => {
+      companyName.value = "";
+      if (!id) return;
+      try {
+        companyName.value = incidentCompanyName(await getOrgById(id));
+      } catch {
+        // Not readable by this viewer: show nothing rather than a wrong name.
+      }
+    },
+    { immediate: true }
+  );
+  return companyName;
+}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@7365admin1/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "4.118.1",
+  "version": "4.118.3",
   "author": "7365admin1",
   "main": "./nuxt.config.ts",
   "//files": "What a consumer extending this layer actually loads. Without this npm ships the whole working tree - the changesets, the CI workflows, the render harness in tools/ and any scratch directory that happened to exist at publish time. Nuxt resolves a layer by directory, so every runtime directory below has to stay listed; adding a new top-level runtime directory means adding it here too.",

package/utils/incident-company.ts

@@ -0,0 +1,7 @@
+// The company that filed an incident report = the organisation stored on the
+// report (the filer's own membership org: security agency, or the client's own
+// staff org). Returns "" when it cannot be resolved so nothing wrong is printed.
+export function incidentCompanyName(org: unknown): string {
+  const name = (org as { name?: unknown } | null | undefined)?.name;
+  return typeof name === "string" ? name.trim() : "";
+}