@7365admin1/layer-common 4.119.0 → 4.121.0

package/components/FeedbackHandlingSettings.vue

@@ -0,0 +1,385 @@
+<!--
+  FEEDBACK HANDLING - per-site office hours, who receives new feedback, the
+  escalation steps and the categories that close themselves (TLR, 2026-10-13).
+
+  Saved as the one switch `site.metadata.feedbackSettings`
+  (`useSiteFeatureSettings`). Only the site's owning organisation (or Seven365)
+  may change it - the server checks. Until a site saves this card nothing
+  changes for it: no routes, no escalation, no auto-close (see
+  `utils/feedback-handling-settings.ts`).
+-->
+<template>
+  <div class="feedback-handling">
+    <v-skeleton-loader v-if="loading" type="article" />
+
+    <template v-else>
+      <div v-if="!canEdit" class="screen-hint fh-note mb-4" data-test="fh-owner-only">
+        Only the client that owns this site can change feedback handling.
+      </div>
+      <!-- Office hours -->
+      <section class="mb-6">
+        <div class="fh-label">Office hours</div>
+        <div class="screen-hint fh-note mt-1 mb-3">
+          Used to decide who receives new feedback and, if you choose, how escalation time is counted.
+        </div>
+
+        <v-chip-group v-model="form.workingDays" multiple column selected-class="text-primary" :disabled="!canEdit">
+          <v-chip v-for="day in WEEK_DAYS" :key="day.value" :value="day.value" filter variant="outlined" size="small">
+            {{ day.title }}
+          </v-chip>
+        </v-chip-group>
+
+        <v-row dense class="mt-2">
+          <v-col cols="6" sm="3">
+            <v-text-field v-model="form.officeStart" type="time" label="Opens" density="comfortable" hide-details :disabled="!canEdit" />
+          </v-col>
+          <v-col cols="6" sm="3">
+            <v-text-field v-model="form.officeEnd" type="time" label="Closes" density="comfortable" hide-details :disabled="!canEdit" />
+          </v-col>
+        </v-row>
+
+        <v-switch
+          v-model="form.excludePublicHolidays"
+          class="app-switch mt-2"
+          hide-details
+          :disabled="!canEdit"
+          label="Treat public holidays as non-working days"
+        />
+        <div class="screen-hint fh-note">Uses the Singapore public holiday list kept up to date by Seven365.</div>
+      </section>
+
+      <v-divider class="mb-6" />
+
+      <!-- Routing -->
+      <section class="mb-6">
+        <div class="fh-label">Who receives new feedback</div>
+        <div class="screen-hint fh-note mt-1 mb-3">
+          The managing agent always sees every feedback. Choosing the provider also sends it straight to them.
+          Categories not listed here work as they do today.
+        </div>
+
+        <div v-for="(route, i) in form.routes" :key="i" class="fh-row pa-3 mb-2">
+          <v-row dense align="center">
+            <v-col cols="12" md="3">
+              <v-select
+                v-model="route.category"
+                :items="categoryItems(route.category)"
+                label="Category"
+                density="comfortable"
+                hide-details
+                :disabled="!canEdit"
+              />
+            </v-col>
+            <v-col cols="12" md="3">
+              <v-select
+                v-model="route.provider"
+                :items="providerItems"
+                label="Provider"
+                density="comfortable"
+                hide-details
+                clearable
+                :no-data-text="'No active providers at this site'"
+                :disabled="!canEdit"
+              />
+            </v-col>
+            <v-col cols="12" sm="6" md="3">
+              <v-select
+                v-model="route.officeHours"
+                :items="targetItems"
+                label="During office hours"
+                density="comfortable"
+                hide-details
+                :disabled="!canEdit"
+              />
+            </v-col>
+            <v-col cols="10" sm="5" md="2">
+              <v-select
+                v-model="route.afterHours"
+                :items="targetItems"
+                label="Weekends & public holidays"
+                density="comfortable"
+                hide-details
+                :disabled="!canEdit"
+              />
+            </v-col>
+            <v-col cols="2" sm="1" class="d-flex justify-end">
+              <v-btn
+                v-if="canEdit"
+                icon="mdi-delete-outline"
+                variant="text"
+                size="small"
+                aria-label="Remove this category"
+                @click="form.routes.splice(i, 1)"
+              />
+            </v-col>
+          </v-row>
+        </div>
+
+        <AppButton
+          v-if="canEdit"
+          variant="ghost"
+          icon="mdi-plus"
+          :disabled="!categoryItems('').length"
+          @click="form.routes.push({ category: '', provider: '', officeHours: 'ma', afterHours: 'ma' })"
+        >
+          Add category
+        </AppButton>
+      </section>
+
+      <v-divider class="mb-6" />
+
+      <!-- Escalation -->
+      <section class="mb-6">
+        <v-switch
+          v-model="form.escalationEnabled"
+          class="app-switch"
+          hide-details
+          :disabled="!canEdit"
+          label="Escalate unresolved feedback"
+        />
+        <div class="screen-hint fh-note mb-3">
+          Tell more people when a feedback is still not completed after the time you set.
+        </div>
+
+        <template v-if="form.escalationEnabled">
+          <div v-for="(level, i) in form.levels" :key="i" class="fh-row pa-3 mb-2">
+            <div class="fh-step mb-2">Step {{ i + 1 }}</div>
+            <v-row dense align="center">
+              <v-col cols="12" sm="4" md="3">
+                <v-text-field
+                  v-model.number="level.afterHours"
+                  type="number"
+                  min="1"
+                  max="1440"
+                  label="If not completed after (hours)"
+                  density="comfortable"
+                  hide-details
+                  :disabled="!canEdit"
+                />
+              </v-col>
+              <v-col cols="12" sm="8" md="4">
+                <v-autocomplete
+                  v-model="level.users"
+                  :items="peopleItems"
+                  label="Notify these people"
+                  multiple
+                  chips
+                  closable-chips
+                  density="comfortable"
+                  hide-details
+                  :disabled="!canEdit"
+                />
+              </v-col>
+              <v-col cols="10" md="4">
+                <v-combobox
+                  v-model="level.emails"
+                  label="And these email addresses"
+                  multiple
+                  chips
+                  closable-chips
+                  density="comfortable"
+                  hide-details
+                  :disabled="!canEdit"
+                />
+              </v-col>
+              <v-col cols="2" md="1" class="d-flex justify-end">
+                <v-btn
+                  v-if="canEdit"
+                  icon="mdi-delete-outline"
+                  variant="text"
+                  size="small"
+                  aria-label="Remove this step"
+                  @click="form.levels.splice(i, 1)"
+                />
+              </v-col>
+            </v-row>
+          </div>
+
+          <AppButton
+            v-if="canEdit && form.levels.length < MAX_ESCALATION_LEVELS"
+            variant="ghost"
+            icon="mdi-plus"
+            @click="form.levels.push({ id: '', afterHours: 24, users: [], emails: [] })"
+          >
+            Add step
+          </AppButton>
+
+          <v-switch
+            v-model="form.workingTimeOnly"
+            class="app-switch mt-3"
+            hide-details
+            :disabled="!canEdit"
+            label="Count office hours only"
+          />
+          <div class="screen-hint fh-note">
+            Time outside office hours (and public holidays, if treated as non-working) does not count.
+          </div>
+        </template>
+      </section>
+
+      <v-divider class="mb-6" />
+
+      <!-- Auto-close -->
+      <section class="mb-6">
+        <div class="fh-label">Close automatically when the provider marks done</div>
+        <div class="screen-hint fh-note mt-1 mb-3">
+          Use only for simple jobs like cleaning. The managing agent can still re-open.
+        </div>
+        <v-select
+          v-model="form.autoCloseCategories"
+          :items="subjectTitles"
+          label="Categories"
+          multiple
+          chips
+          closable-chips
+          density="comfortable"
+          hide-details
+          :disabled="!canEdit"
+        />
+      </section>
+
+      <div v-if="errors.length && tried" class="text-error text-caption mb-3">
+        <div v-for="e in errors" :key="e">{{ e }}</div>
+      </div>
+
+      <div v-if="canEdit" class="d-flex justify-end">
+        <AppButton :disabled="saving || !loaded" @click="save">{{ saving ? "Saving" : "Save feedback handling" }}</AppButton>
+      </div>
+    </template>
+
+    <Snackbar v-model="snackbar" :text="message" :color="messageColor" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  MAX_ESCALATION_LEVELS,
+  WEEK_DAYS,
+  feedbackHandlingErrors,
+  feedbackHandlingForm,
+  feedbackSettingsFromForm,
+  type TFeedbackHandlingForm,
+} from "../utils/feedback-handling-settings";
+
+const props = withDefaults(
+  defineProps<{
+    siteId: string;
+    orgId?: string;
+    canEdit?: boolean;
+  }>(),
+  { orgId: "", canEdit: false },
+);
+
+const emit = defineEmits<{ saved: [] }>();
+
+const { getSiteById } = useSiteSettings();
+const { saveSiteFeature } = useSiteFeatureSettings();
+const { getAll: getProviders } = useServiceProvider();
+const { getAll: getMembers } = useMember();
+const { subjects } = useLocal();
+
+const loading = ref(true);
+/** The stored settings were read; Save stays off until then (a failed read must not save defaults). */
+const loaded = ref(false);
+const saving = ref(false);
+const tried = ref(false);
+const form = ref<TFeedbackHandlingForm>(feedbackHandlingForm(null));
+const providers = ref<Array<{ title: string; value: string }>>([]);
+const people = ref<Array<{ title: string; value: string }>>([]);
+
+const snackbar = ref(false);
+const message = ref("");
+const messageColor = ref("");
+
+const subjectTitles = subjects.map((s) => s.value);
+const targetItems = [
+  { title: "Managing agent", value: "ma" },
+  { title: "Provider", value: "provider" },
+];
+const providerItems = computed(() => providers.value);
+const peopleItems = computed(() => people.value);
+const errors = computed(() => feedbackHandlingErrors(form.value));
+
+/** The subject list minus categories already routed (a row keeps its own). */
+function categoryItems(current: string) {
+  const used = new Set(form.value.routes.map((r) => r.category).filter((c) => c && c !== current));
+  return subjectTitles.filter((s) => !used.has(s));
+}
+
+function notify(text: string, color: string) {
+  message.value = text;
+  messageColor.value = color;
+  snackbar.value = true;
+}
+
+async function load() {
+  loading.value = true;
+  try {
+    const site: any = await getSiteById(props.siteId);
+    form.value = feedbackHandlingForm(site?.metadata?.feedbackSettings ?? site?.data?.metadata?.feedbackSettings);
+    loaded.value = !!site;
+    const [p, m] = await Promise.allSettled([
+      getProviders({ siteId: props.siteId, limit: 100, status: "active" }),
+      getMembers({ siteId: props.siteId, org: props.orgId, limit: 100 }),
+    ]);
+    if (p.status === "fulfilled") {
+      providers.value = (p.value?.items ?? []).map((i: any) => ({
+        title: i.name || i.orgName || "Provider",
+        value: String(i._id),
+      }));
+    }
+    if (m.status === "fulfilled") {
+      const seen = new Set<string>();
+      people.value = (m.value?.items ?? [])
+        .map((i: any) => ({ title: i.name || i.email || "Member", value: String(i.user?._id ?? i.user ?? "") }))
+        .filter((i: { value: string }) => /^[a-f0-9]{24}$/i.test(i.value) && !seen.has(i.value) && !!seen.add(i.value));
+    }
+  } catch (error) {
+    notify(errorConverter(error), "error");
+  } finally {
+    loading.value = false;
+  }
+}
+
+async function save() {
+  tried.value = true;
+  if (errors.value.length || !loaded.value) return;
+  saving.value = true;
+  try {
+    await saveSiteFeature(props.siteId, "feedbackSettings", feedbackSettingsFromForm(form.value));
+    tried.value = false;
+    notify("Feedback handling saved", "success");
+    emit("saved");
+  } catch (error) {
+    notify(errorConverter(error), "error");
+  } finally {
+    saving.value = false;
+  }
+}
+
+onMounted(load);
+</script>
+
+<style scoped>
+.fh-label {
+  font-family: var(--font-sans);
+  font-size: 14px;
+  font-weight: 800;
+  color: var(--text);
+}
+
+.fh-note {
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.fh-step {
+  font-size: 13px;
+  font-weight: 700;
+}
+
+.fh-row {
+  border: 1px solid var(--border, rgba(0, 0, 0, 0.12));
+  border-radius: 8px;
+}
+</style>

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>