@7365admin1/layer-common 4.119.0 → 4.120.0

package/components/HandoverChecklistRecords.vue

@@ -0,0 +1,223 @@
+<template>
+  <div data-test="handover-records">
+    <div class="d-flex flex-wrap ga-2 mb-3">
+      <v-select v-model="templateId" :items="templateOptions" label="Room / inspection" density="comfortable"
+        variant="outlined" hide-details clearable class="handover-filter" />
+    </div>
+
+    <v-data-table-server :headers="headers" :items="rows" :items-length="total" :loading="loading"
+      :items-per-page="limit" :page="page" density="comfortable" class="cursor-pointer"
+      @update:page="(p: number) => { page = p; load(); }"
+      @update:items-per-page="(n: number) => { limit = n; page = 1; load(); }" @click:row="(_: any, r: any) => open(r.item)">
+      <template #item.completedAt="{ item }">{{ when(item.completedAt) }}</template>
+      <template #item.stage="{ item }">{{ HANDOVER_STAGE_LABELS[item.stage] ?? item.stage }}</template>
+      <template #item.notInOrderCount="{ item }">
+        <v-chip v-if="item.notInOrderCount" color="error" size="small" variant="tonal">
+          {{ item.notInOrderCount }} not in order
+        </v-chip>
+        <v-chip v-else color="success" size="small" variant="tonal">All in order</v-chip>
+      </template>
+      <template #no-data>No handover or takeover checks yet.</template>
+    </v-data-table-server>
+
+    <v-dialog v-model="viewer.show" max-width="820" scrollable>
+      <v-card>
+        <v-card-title class="d-flex align-center">
+          <span class="flex-grow-1">{{ viewer.record?.title }}</span>
+          <v-btn variant="text" prepend-icon="mdi-file-pdf-box" text="Download PDF" :loading="exporting"
+            :disabled="!viewer.record" @click="downloadPdf" />
+          <v-btn icon="mdi-close" variant="text" aria-label="Close" @click="viewer.show = false" />
+        </v-card-title>
+        <v-card-text>
+          <v-progress-linear v-if="viewer.loading" indeterminate />
+          <div v-else-if="viewer.record" ref="report" class="report-export">
+            <p class="mb-3">
+              <strong>{{ HANDOVER_STAGE_LABELS[viewer.record.stage] ?? viewer.record.stage }}</strong>
+              &middot; {{ when(viewer.record.completedAt) }} &middot; Checked by: {{ viewer.record.officerName || "N/A" }}
+            </p>
+            <v-table density="compact">
+              <thead>
+                <tr>
+                  <th>Item</th>
+                  <th>Qty</th>
+                  <th>Serial / tag no.</th>
+                  <th>Condition</th>
+                  <th>Remarks</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr v-for="(item, i) in viewer.record.items ?? []" :key="i">
+                  <td>
+                    <div>{{ item.label }}</div>
+                    <div class="d-flex flex-wrap ga-1 my-1">
+                      <a v-if="item.referencePhotoId" :href="getFileUrl(item.referencePhotoId)" target="_blank"
+                        rel="noopener" title="Reference photo">
+                        <img :src="getFileUrl(item.referencePhotoId)" alt="Reference" class="handover-thumb" crossorigin="anonymous" />
+                      </a>
+                    </div>
+                  </td>
+                  <td>{{ item.quantity ?? "" }}</td>
+                  <td>{{ item.tagNo || "" }}</td>
+                  <td>
+                    <span :class="item.result === 'in-order' ? 'text-success' : 'text-error'" class="font-weight-bold">
+                      {{ item.result === "in-order" ? "In order" : "Not in order" }}
+                    </span>
+                  </td>
+                  <td>
+                    <div>{{ item.remarks || "" }}</div>
+                    <div class="d-flex flex-wrap ga-1 my-1">
+                      <a v-for="p in item.damagePhotoIds ?? []" :key="p" :href="getFileUrl(p)" target="_blank"
+                        rel="noopener" title="Damage photo">
+                        <img :src="getFileUrl(p)" alt="Damage" class="handover-thumb" crossorigin="anonymous" />
+                      </a>
+                    </div>
+                  </td>
+                </tr>
+              </tbody>
+            </v-table>
+            <div v-if="viewer.record.remarks" class="mt-4">
+              <div class="text-subtitle-2">Remarks</div>
+              <p class="text-body-2">{{ viewer.record.remarks }}</p>
+            </div>
+            <div v-if="viewer.record.photoIds?.length" class="mt-4">
+              <div class="text-subtitle-2 mb-1">Photos</div>
+              <div class="d-flex flex-wrap ga-2">
+                <a v-for="p in viewer.record.photoIds" :key="p" :href="getFileUrl(p)" target="_blank" rel="noopener">
+                  <img :src="getFileUrl(p)" alt="Room photo" class="handover-photo" crossorigin="anonymous" />
+                </a>
+              </div>
+            </div>
+          </div>
+        </v-card-text>
+      </v-card>
+    </v-dialog>
+
+    <Snackbar v-model="toast.show" :text="toast.message" :color="toast.color" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import useFile from "../composables/useFile";
+import useReportPdf from "../composables/useReportPdf";
+import useHandoverChecklist, {
+  HANDOVER_STAGE_LABELS,
+  type THandoverRecord,
+  type THandoverTemplate,
+} from "../composables/useHandoverChecklist";
+
+const props = defineProps({
+  site: { type: String, required: true },
+  siteName: { type: String, default: "" },
+});
+
+const { getTemplates, getRecords, getRecord } = useHandoverChecklist();
+const { getFileUrl } = useFile();
+const { exportReportPdf } = useReportPdf();
+
+const headers = [
+  { title: "Date / time", key: "completedAt", sortable: false },
+  { title: "Room / inspection", key: "title", sortable: false },
+  { title: "Type", key: "stage", sortable: false },
+  { title: "Checked by", key: "officerName", sortable: false },
+  { title: "Result", key: "notInOrderCount", sortable: false },
+];
+
+const templates = ref<THandoverTemplate[]>([]);
+const templateOptions = computed(() => templates.value.map((t) => ({ title: t.title, value: t._id })));
+const templateId = ref<string | null>(null);
+const rows = ref<THandoverRecord[]>([]);
+const total = ref(0);
+const page = ref(1);
+const limit = ref(20);
+const loading = ref(false);
+const exporting = ref(false);
+const report = ref<HTMLElement | null>(null);
+const viewer = reactive({ show: false, loading: false, record: null as THandoverRecord | null });
+const toast = reactive({ show: false, message: "", color: "" });
+
+function when(d?: string) {
+  return d ? new Date(d).toLocaleString("en-GB", { dateStyle: "medium", timeStyle: "short" }) : "";
+}
+
+function fail(e: any, message: string) {
+  Object.assign(toast, { show: true, message: e?.data?.message || message, color: "error" });
+}
+
+async function load() {
+  loading.value = true;
+  try {
+    const res = await getRecords(props.site, { page: page.value, limit: limit.value, templateId: templateId.value || "" });
+    rows.value = res?.items ?? [];
+    total.value = res?.total ?? 0;
+  } catch (e) {
+    fail(e, "Could not load the records.");
+  } finally {
+    loading.value = false;
+  }
+}
+
+async function open(row: THandoverRecord) {
+  Object.assign(viewer, { show: true, loading: true, record: null });
+  try {
+    viewer.record = await getRecord(row._id);
+  } catch (e) {
+    fail(e, "Could not open the record.");
+  } finally {
+    viewer.loading = false;
+  }
+}
+
+async function downloadPdf() {
+  const r = viewer.record;
+  if (!r || !report.value) return;
+  exporting.value = true;
+  try {
+    await exportReportPdf(report.value, {
+      title: `${HANDOVER_STAGE_LABELS[r.stage] ?? "Handover"} checklist`,
+      site: props.siteName,
+      details: [
+        { label: "Room", value: r.title },
+        { label: "Date", value: when(r.completedAt) },
+        { label: "Checked by", value: r.officerName || "N/A" },
+      ],
+      fileName: `handover-${r.title}-${(r.completedAt || "").slice(0, 10)}.pdf`.replace(/[^\w.-]+/g, "-"),
+    });
+  } catch (e) {
+    fail(e, "Could not make the PDF.");
+  } finally {
+    exporting.value = false;
+  }
+}
+
+watch(templateId, () => {
+  page.value = 1;
+  load();
+});
+
+watch(
+  () => props.site,
+  async () => {
+    load();
+    templates.value = await getTemplates(props.site).catch(() => []);
+  },
+  { immediate: true },
+);
+</script>
+
+<style scoped>
+.handover-filter {
+  max-width: 320px;
+}
+.handover-thumb {
+  border-radius: 4px;
+  height: 48px;
+  object-fit: cover;
+  width: 48px;
+}
+.handover-photo {
+  border-radius: 6px;
+  height: 120px;
+  object-fit: cover;
+  width: 160px;
+}
+</style>

package/components/HandoverChecklistSetup.vue

@@ -0,0 +1,224 @@
+<template>
+  <div data-test="handover-setup">
+    <div class="d-flex flex-wrap align-center ga-2 mb-4">
+      <p class="text-body-2 text-medium-emphasis mb-0 flex-grow-1">
+        One checklist per room or inspection. The site team uses it to hand the room over (before use) and take it back (after
+        use).
+      </p>
+      <template v-if="canEdit">
+        <v-menu>
+          <template #activator="{ props: menu }">
+            <v-btn v-bind="menu" variant="outlined" class="screen-btn-ghost" prepend-icon="mdi-file-document-outline"
+              text="Use a ready-made template" />
+          </template>
+          <v-list density="compact">
+            <v-list-item v-for="s in HANDOVER_STARTERS" :key="s.name" :title="s.name" @click="openEditor(s.template)" />
+          </v-list>
+        </v-menu>
+        <v-btn class="screen-btn-primary" color="primary-button" variant="flat" prepend-icon="mdi-plus"
+          text="Add checklist" @click="openEditor()" />
+      </template>
+    </div>
+
+    <v-progress-linear v-if="loading" indeterminate class="mb-2" />
+    <p v-else-if="!templates.length" class="text-body-2 text-medium-emphasis">
+      No checklists yet. The site team will not see room handover until you add one.
+    </p>
+
+    <AppCard v-for="t in templates" :key="t._id" class="mb-3 pa-4">
+      <div class="d-flex align-start ga-2">
+        <div class="flex-grow-1">
+          <div class="text-subtitle-1 font-weight-bold">{{ t.title }}</div>
+          <div v-if="t.description" class="text-body-2 text-medium-emphasis">{{ t.description }}</div>
+          <div class="text-caption text-medium-emphasis">{{ t.items.length }} item{{ t.items.length === 1 ? "" : "s" }}</div>
+        </div>
+        <template v-if="canEdit">
+          <v-btn icon="mdi-pencil" variant="text" size="small" aria-label="Edit" @click="openEditor(t)" />
+          <v-btn icon="mdi-delete" variant="text" size="small" aria-label="Remove" @click="remove(t)" />
+        </template>
+      </div>
+    </AppCard>
+
+    <v-dialog v-model="editor.show" max-width="760" scrollable>
+      <v-card>
+        <v-card-title>{{ editor.id ? "Edit checklist" : "New checklist" }}</v-card-title>
+        <v-card-text>
+          <v-form ref="form">
+            <v-text-field v-model.trim="editor.title" label="Room or inspection name" placeholder="e.g. Function room 1"
+              :rules="[required]" density="comfortable" variant="outlined" />
+            <v-textarea v-model.trim="editor.description" label="Instructions for the guard (optional)" rows="2"
+              auto-grow density="comfortable" variant="outlined" />
+
+            <div class="text-subtitle-2 mb-2">Items to check</div>
+            <div v-for="(item, i) in editor.items" :key="i" class="handover-item mb-3 pa-3">
+              <v-row dense>
+                <v-col cols="12" sm="6">
+                  <v-text-field v-model.trim="item.label" label="Description" :rules="[required]" density="compact"
+                    variant="outlined" hide-details="auto" />
+                </v-col>
+                <v-col cols="4" sm="2">
+                  <v-text-field v-model.number="item.quantity" label="Qty" type="number" min="0" density="compact"
+                    variant="outlined" hide-details />
+                </v-col>
+                <v-col cols="8" sm="4">
+                  <v-text-field v-model.trim="item.tagNo" label="Serial / tag no." placeholder="e.g. Chair 1-8"
+                    density="compact" variant="outlined" hide-details />
+                </v-col>
+              </v-row>
+              <div class="d-flex align-center ga-2 mt-2">
+                <v-img v-if="item.referencePhotoId" :src="getFileUrl(item.referencePhotoId)" width="56" height="56"
+                  max-width="56" cover class="rounded" />
+                <v-btn size="small" variant="text" prepend-icon="mdi-camera" :loading="uploading === i"
+                  :text="item.referencePhotoId ? 'Change reference photo' : 'Add reference photo'"
+                  @click="pickPhoto(i)" />
+                <v-btn v-if="item.referencePhotoId" size="small" variant="text" text="Remove photo"
+                  @click="item.referencePhotoId = null" />
+                <v-spacer />
+                <v-btn icon="mdi-close" size="small" variant="text" aria-label="Remove item"
+                  :disabled="editor.items.length === 1" @click="editor.items.splice(i, 1)" />
+              </div>
+            </div>
+            <v-btn variant="text" prepend-icon="mdi-plus" text="Add item" @click="editor.items.push(blankItem())" />
+          </v-form>
+          <input ref="fileInput" type="file" accept="image/*" hidden @change="uploadPhoto" />
+        </v-card-text>
+        <v-card-actions>
+          <v-spacer />
+          <v-btn text="Cancel" @click="editor.show = false" />
+          <v-btn class="screen-btn-primary" color="primary-button" variant="flat" text="Save" :loading="saving"
+            @click="save" />
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+
+    <Snackbar v-model="toast.show" :text="toast.message" :color="toast.color" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import useFile from "../composables/useFile";
+import useHandoverChecklist, {
+  HANDOVER_STARTERS,
+  type THandoverItem,
+  type THandoverTemplate,
+} from "../composables/useHandoverChecklist";
+
+const props = defineProps({
+  site: { type: String, required: true },
+  canEdit: { type: Boolean, default: false },
+});
+
+const { getTemplates, addTemplate, updateTemplate, deleteTemplate } = useHandoverChecklist();
+const { addFile, getFileUrl } = useFile();
+
+const templates = ref<THandoverTemplate[]>([]);
+const loading = ref(false);
+const saving = ref(false);
+const uploading = ref<number | null>(null);
+const form = ref<any>(null);
+const fileInput = ref<HTMLInputElement | null>(null);
+const toast = reactive({ show: false, message: "", color: "" });
+const required = (v: string) => !!v || "Required";
+const blankItem = (): THandoverItem => ({ label: "", quantity: null, tagNo: "", referencePhotoId: null });
+
+const editor = reactive({
+  show: false,
+  id: "" as string | undefined,
+  title: "",
+  description: "",
+  items: [] as THandoverItem[],
+});
+
+function notify(message: string, color = "success") {
+  Object.assign(toast, { show: true, message, color });
+}
+
+async function load() {
+  loading.value = true;
+  try {
+    templates.value = (await getTemplates(props.site)) ?? [];
+  } catch (e: any) {
+    notify(e?.data?.message || "Could not load the checklists.", "error");
+  } finally {
+    loading.value = false;
+  }
+}
+
+/** A stored checklist to edit, a starter to copy, or nothing for a blank one. */
+function openEditor(t?: THandoverTemplate) {
+  editor.id = t?._id;
+  editor.title = t?.title ?? "";
+  editor.description = t?.description ?? "";
+  editor.items = t?.items?.length ? t.items.map((i) => ({ ...blankItem(), ...i })) : [blankItem()];
+  editor.show = true;
+}
+
+let photoIndex = -1;
+function pickPhoto(i: number) {
+  photoIndex = i;
+  fileInput.value?.click();
+}
+
+async function uploadPhoto(e: Event) {
+  const input = e.target as HTMLInputElement;
+  const file = input.files?.[0];
+  input.value = "";
+  if (!file || photoIndex < 0) return;
+  uploading.value = photoIndex;
+  try {
+    const res = await addFile(file);
+    editor.items[photoIndex].referencePhotoId = res?.id ?? null;
+  } catch (err: any) {
+    notify(err?.data?.message || "Could not upload the photo.", "error");
+  } finally {
+    uploading.value = null;
+  }
+}
+
+async function save() {
+  const { valid } = await form.value.validate();
+  if (!valid) return;
+  const body: THandoverTemplate = {
+    title: editor.title,
+    description: editor.description || null,
+    items: editor.items.map((i) => ({
+      label: i.label,
+      quantity: typeof i.quantity === "number" && !Number.isNaN(i.quantity) ? i.quantity : null,
+      tagNo: i.tagNo || null,
+      referencePhotoId: i.referencePhotoId || null,
+    })),
+  };
+  saving.value = true;
+  try {
+    if (editor.id) await updateTemplate(editor.id, body);
+    else await addTemplate(props.site, body);
+    editor.show = false;
+    notify("Checklist saved.");
+    await load();
+  } catch (err: any) {
+    notify(err?.data?.message || "Could not save the checklist.", "error");
+  } finally {
+    saving.value = false;
+  }
+}
+
+async function remove(t: THandoverTemplate) {
+  if (!t._id || !window.confirm(`Remove "${t.title}"? Records already submitted are kept.`)) return;
+  try {
+    await deleteTemplate(t._id);
+    notify("Checklist removed.");
+    await load();
+  } catch (err: any) {
+    notify(err?.data?.message || "Could not remove the checklist.", "error");
+  }
+}
+
+watch(() => props.site, load, { immediate: true });
+</script>
+
+<style scoped>
+.handover-item {
+  border: 1px solid var(--border, #e0e0e0);
+  border-radius: 8px;
+}
+</style>

package/components/IncidentReportEmailsSettings.vue

@@ -0,0 +1,88 @@
+<template>
+  <div data-test="incident-report-emails">
+    <p class="text-body-2 mb-3">For people who do not use the app, e.g. your HQ or insurer.</p>
+    <v-combobox
+      v-model="emails"
+      label="Also email every incident report to"
+      placeholder="Type an email address and press Enter"
+      multiple
+      chips
+      closable-chips
+      hide-no-data
+      :readonly="readOnly"
+      :rules="[validRule]"
+      :hint="`Up to ${MAX} addresses.`"
+      persistent-hint
+      density="comfortable"
+      variant="outlined"
+    />
+    <v-btn
+      v-if="!readOnly"
+      class="screen-btn-primary mt-4"
+      color="primary-button"
+      variant="flat"
+      text="Save"
+      :loading="saving"
+      :disabled="!loaded || validRule(emails) !== true"
+      @click="save"
+    />
+    <Snackbar v-model="toast.show" :text="toast.message" :color="toast.color" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import useSiteFeatureSettings from "../composables/useSiteFeatureSettings";
+
+/**
+ * Site setting `metadata.incidentReportEmails` (core site-feature-settings).
+ * Empty = today: only app users who switched on incident report emails get one.
+ */
+const props = defineProps({
+  siteId: { type: String, required: true },
+  saved: { type: Array as PropType<string[]>, default: () => [] },
+  readOnly: { type: Boolean, default: false },
+  /** The site has been read; Save stays off until then. */
+  loaded: { type: Boolean, default: false },
+});
+const emit = defineEmits(["saved"]);
+
+const MAX = 10;
+const EMAIL = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+
+const emails = ref<string[]>([]);
+watch(
+  () => props.saved,
+  (v) => (emails.value = Array.isArray(v) ? [...v] : []),
+  { immediate: true },
+);
+
+function validRule(list: string[]) {
+  const clean = (list ?? []).map((e) => String(e).trim());
+  if (clean.length > MAX) return `Up to ${MAX} addresses.`;
+  const bad = clean.find((e) => !EMAIL.test(e));
+  return bad ? `"${bad}" is not a valid email address.` : true;
+}
+
+const { saveSiteFeature } = useSiteFeatureSettings();
+const saving = ref(false);
+const toast = reactive({ show: false, message: "", color: "" });
+
+async function save() {
+  if (!props.loaded) return;
+  saving.value = true;
+  try {
+    const value = [...new Set(emails.value.map((e) => String(e).trim().toLowerCase()))];
+    await saveSiteFeature(props.siteId, "incidentReportEmails", value);
+    Object.assign(toast, { show: true, message: "Incident report emails saved.", color: "success" });
+    emit("saved");
+  } catch (e: any) {
+    Object.assign(toast, {
+      show: true,
+      message: e?.data?.message || "Could not save the incident report emails.",
+      color: "error",
+    });
+  } finally {
+    saving.value = false;
+  }
+}
+</script>

package/components/KeyPressFilter.vue

@@ -0,0 +1,43 @@
+<template>
+  <!-- Shown only when the site has key presses. Tells the list whether it
+       has any (`available`), so the list can add its Key press column. -->
+  <v-select
+    v-if="cabinets.length"
+    :model-value="modelValue"
+    :items="items"
+    item-title="name"
+    item-value="id"
+    label="Filter by key press"
+    multiple
+    clearable
+    hide-details
+    density="compact"
+    menu-icon="mdi-chevron-down"
+    style="max-width: 220px; min-width: 150px"
+    data-test="key-press-filter"
+    @update:model-value="(v: string[] | null) => emit('update:modelValue', v ?? [])"
+  />
+</template>
+
+<script setup lang="ts">
+import type { PropType } from "vue";
+import useKeyPresses from "../composables/useKeyPresses";
+
+const props = defineProps({
+  site: { type: String, required: true },
+  modelValue: { type: Array as PropType<string[]>, default: () => [] },
+});
+const emit = defineEmits<{
+  (e: "update:modelValue", value: string[]): void;
+  (e: "update:available", value: boolean): void;
+}>();
+
+const { cabinets } = useKeyPresses(() => props.site);
+// "" = keys kept in no named press.
+const items = computed(() => [...cabinets.value, { id: "", name: "No key press" }]);
+watch(
+  () => cabinets.value.length > 0,
+  (has) => emit("update:available", has),
+  { immediate: true },
+);
+</script>

package/components/KeyPressName.vue

@@ -0,0 +1,14 @@
+<template>
+  <span>{{ nameOf(id) }}</span>
+</template>
+
+<script setup lang="ts">
+import useKeyPresses from "../composables/useKeyPresses";
+
+// The key's press name in a list cell. One site read per page, shared.
+const props = defineProps({
+  site: { type: String, required: true },
+  id: { type: String, default: "" },
+});
+const { nameOf } = useKeyPresses(() => props.site);
+</script>

package/components/KeyPressSelect.vue

@@ -0,0 +1,31 @@
+<template>
+  <!-- Shown only when the site has key presses; otherwise nothing changes. -->
+  <div v-if="cabinets.length">
+    <div class="text-subtitle-1 text-medium-emphasis">Key press</div>
+    <v-select
+      :model-value="modelValue || null"
+      :items="cabinets"
+      item-title="name"
+      item-value="id"
+      placeholder="Choose a key press"
+      density="comfortable"
+      hint="Where this key is kept."
+      persistent-hint
+      clearable
+      data-test="key-press-select"
+      @update:model-value="(v: string | null) => emit('update:modelValue', v ?? '')"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import useKeyPresses from "../composables/useKeyPresses";
+
+const props = defineProps({
+  site: { type: String, required: true },
+  modelValue: { type: String, default: "" },
+});
+const emit = defineEmits<{ (e: "update:modelValue", value: string): void }>();
+
+const { cabinets } = useKeyPresses(() => props.site);
+</script>