@7365admin1/layer-common 4.97.0 → 4.97.1-staging.500

package/components/DocumentManagement.vue

@@ -57,7 +57,24 @@
       </div>
     </v-col>
 
-    <v-col cols="12" class="mb-2" v-if="isInsideFolder">
+    <v-col cols="12">
+      <v-tabs
+        v-model="activeTab"
+        class="doc-tabs"
+        density="compact"
+        :hide-slider="false"
+      >
+        <v-tab value="active" class="text-none">Documents</v-tab>
+        <v-tab value="expired" class="text-none">Document (Expired)</v-tab>
+      </v-tabs>
+    </v-col>
+
+    <!--
+      Hidden on the Expired tab: that tab is a site-wide worklist rather than a
+      place in the folder tree, so a breadcrumb there would name a folder whose
+      contents are not what is on screen.
+    -->
+    <v-col cols="12" class="mb-2" v-if="isInsideFolder && !isExpiredTab">
       <div class="folder-path-bar d-flex align-center ga-2 px-3 py-2">
         <v-btn
           icon="mdi-arrow-left"
@@ -149,19 +166,79 @@
           <span>{{ item.date_modified || "N/A" }}</span>
         </template>
 
+        <template #item.expiry_date="{ item }">
+          <span>{{ item.expiry_date || "N/A" }}</span>
+        </template>
+
         <template #item.remarks="{ item }">
           <span>{{ item.remarks || "N/A" }}</span>
         </template>
 
         <template #item.action="{ item }">
-          <v-btn
-            v-if="!isFolderItem(item._raw)"
-            variant="flat"
-            class="table-download-btn text-none"
-            @click.stop="downloadDocument(item._raw)"
-          >
-            Download
-          </v-btn>
+          <!--
+            A document carries its primary action and a kebab beside it. Which
+            primary action depends on the tab: an expired document cannot be
+            usefully downloaded, it needs replacing, so Download gives way to
+            Update there.
+          -->
+          <template v-if="!isFolderItem(item._raw)">
+            <v-btn
+              v-if="isExpiredTab"
+              variant="flat"
+              class="table-download-btn text-none"
+              :disabled="!canUpdateDocument"
+              @click.stop="openUpdateDialog(item._raw)"
+            >
+              Update
+            </v-btn>
+
+            <v-btn
+              v-else
+              variant="flat"
+              class="table-download-btn text-none"
+              @click.stop="downloadDocument(item._raw)"
+            >
+              Download
+            </v-btn>
+
+            <v-menu
+              v-if="canUpdateDocument || canDeleteDocument"
+              v-model="documentActionMenu[item._raw._id]"
+              location="bottom end"
+              offset="6"
+            >
+              <template #activator="{ props }">
+                <v-btn
+                  v-bind="props"
+                  icon="mdi-dots-vertical"
+                  variant="text"
+                  size="small"
+                  density="comfortable"
+                  class="folder-action-btn"
+                  @click.stop
+                />
+              </template>
+
+              <v-list class="folder-action-list pa-0">
+                <v-list-item
+                  v-if="canUpdateDocument"
+                  class="folder-action-item"
+                  @click.stop="openDocumentEdit(item._raw)"
+                >
+                  <v-list-item-title class="text-body-2">Edit</v-list-item-title>
+                </v-list-item>
+                <v-list-item
+                  v-if="canDeleteDocument"
+                  class="folder-action-item"
+                  @click.stop="openDocumentDelete(item._raw)"
+                >
+                  <v-list-item-title class="text-body-2">
+                    Delete
+                  </v-list-item-title>
+                </v-list-item>
+              </v-list>
+            </v-menu>
+          </template>
 
           <v-menu
             v-else
@@ -200,8 +277,11 @@
       </TableV3>
     </v-col>
 
-    <!-- Create Dialog -->
-    <v-dialog v-model="createDialog" width="450" persistent>
+    <!--
+      Wider than the other dialogs because Add Document holds a five-column
+      table, one row per file, rather than a stacked pair of fields.
+    -->
+    <v-dialog v-model="createDialog" max-width="1100" persistent>
       <DocumentForm
         v-if="createDialog"
         :parent-id="activeParentId"
@@ -210,6 +290,17 @@
       />
     </v-dialog>
 
+    <!-- Update Dialog: renew an expired document by replacing its file. -->
+    <v-dialog v-model="updateDialog" max-width="1100" persistent>
+      <DocumentForm
+        v-if="updateDialog"
+        mode="update"
+        :document="selectedDocument"
+        @cancel="updateDialog = false"
+        @success="successRenew()"
+      />
+    </v-dialog>
+
     <!-- Create Folder Dialog -->
     <v-dialog v-model="createFolderDialog" width="450" persistent>
       <v-card width="100%">
@@ -484,6 +575,15 @@
               </v-row>
             </v-col>
 
+            <v-col cols="12" class="mb-2">
+              <v-row no-gutters>
+                <v-col cols="6" class="text-body-1">Expiry Date</v-col>
+                <v-col cols="6" class="text-right text-body-1">{{
+                  previewDetails.expiryDate
+                }}</v-col>
+              </v-row>
+            </v-col>
+
             <v-col cols="12">
               <v-row no-gutters>
                 <v-col cols="6" class="text-body-1">Remarks</v-col>
@@ -634,6 +734,10 @@ const props = defineProps({
         title: "Date Modified",
         value: "date_modified",
       },
+      {
+        title: "Expiry Date",
+        value: "expiry_date",
+      },
       {
         title: "Remarks",
         value: "remarks",
@@ -733,6 +837,13 @@ const currentFolderPath = computed(() => {
 const fileTypes = ref(["all", "pdf", "csv", "doc"]);
 const selectedFileType = ref("all");
 
+/**
+ * Which half of the list is on screen. The value is sent straight to the API as
+ * its `expiry` filter, so the tab and the query cannot drift apart.
+ */
+const activeTab = ref<"active" | "expired">("active");
+const isExpiredTab = computed(() => activeTab.value === "expired");
+
 const {
   data: getDocumentReq,
   refresh: getDocuments,
@@ -748,12 +859,20 @@ const {
       parentId: activeParentId.value,
       type:
         selectedFileType.value === "all" ? undefined : selectedFileType.value,
+      expiry: activeTab.value,
     }),
   {
-    watch: [page, headerSearch, activeParentId, selectedFileType],
+    watch: [page, headerSearch, activeParentId, selectedFileType, activeTab],
   }
 );
 
+// Page 3 of the Documents tab is rarely page 3 of a much shorter Expired list,
+// so a tab change that kept the page number would land on an empty table that
+// looks like "nothing has expired".
+watch(activeTab, () => {
+  page.value = 1;
+});
+
 const loading = computed(() => getAllReqStatus.value === "pending");
 
 // The page totals are the server's count of the WHOLE list, read through the
@@ -788,6 +907,28 @@ function formatDate(value?: string | null) {
   });
 }
 
+/**
+ * Expiry is a day, not a moment: the picker collects `YYYY-MM-DD` and the
+ * design renders `13/12/2026`. Reusing `formatDate` would append a meaningless
+ * 00:00 to every row.
+ */
+function formatDateOnly(value?: string | null) {
+  if (!value) {
+    return "N/A";
+  }
+
+  const dateValue = new Date(value);
+  if (Number.isNaN(dateValue.getTime())) {
+    return "N/A";
+  }
+
+  return dateValue.toLocaleDateString("en-SG", {
+    year: "numeric",
+    month: "2-digit",
+    day: "2-digit",
+  });
+}
+
 function formatBytes(bytes = 0) {
   const b = Number(bytes) || 0;
   if (b === 0) return "0 B";
@@ -823,13 +964,20 @@ const tableItems = computed(() => {
         : formatBytes(Number(doc.file_size ?? doc.size ?? 0)),
     date_created: formatDate(doc.created_at || doc.createdAt),
     date_modified: formatDate(doc.updated_at || doc.updatedAt),
+    // Folders never expire, so they read N/A rather than borrowing a date.
+    expiry_date:
+      doc.type === "folder"
+        ? "N/A"
+        : formatDateOnly(doc.expiry_date || doc.expiryDate),
     remarks: doc.remarks || "N/A",
   }));
 });
 
 const createDialog = ref(false);
 const editDialog = ref(false);
+const updateDialog = ref(false);
 const previewDialog = ref(false);
+const documentActionMenu = ref<Record<string, boolean>>({});
 
 // Create folder dialog state
 const createFolderDialog = ref(false);
@@ -880,6 +1028,10 @@ const previewDetails = computed(() => {
     fileSize,
     dateCreated: formatDate(document?.created_at || document?.createdAt),
     dateModified: formatDate(document?.updated_at || document?.updatedAt),
+    expiryDate:
+      document?.type === "folder"
+        ? "N/A"
+        : formatDateOnly(document?.expiry_date || document?.expiryDate),
     remarks: document?.remarks || "N/A",
   };
 });
@@ -1151,6 +1303,29 @@ function openDeleteDialog() {
   message.value = "";
 }
 
+/*
+ * The three row-kebab entry points. Each names its document first: the dialogs
+ * below all read `selectedDocument`, which until now was only ever set by
+ * opening the detail modal, so firing one straight from a row without setting
+ * it would have acted on whichever document was inspected last.
+ */
+function openDocumentEdit(document: TDocument) {
+  selectedDocument.value = document;
+  documentActionMenu.value = {};
+  editDialog.value = true;
+}
+
+function openDocumentDelete(document: TDocument) {
+  selectedDocument.value = document;
+  documentActionMenu.value = {};
+  openDeleteDialog();
+}
+
+function openUpdateDialog(document: TDocument) {
+  selectedDocument.value = document;
+  updateDialog.value = true;
+}
+
 function openEditDialog() {
   editDialog.value = true;
 }
@@ -1179,6 +1354,19 @@ function successUpdate() {
   showMessage("Document updated successfully!", "success");
 }
 
+/**
+ * A renewal usually moves the document off the tab it was renewed from, so the
+ * refresh is what makes it disappear from the Expired list. A renewal that did
+ * not move the expiry date forward stays put, which is the intended behaviour
+ * rather than a failed save - hence the neutral wording.
+ */
+function successRenew() {
+  updateDialog.value = false;
+  previewDialog.value = false;
+  getDocuments();
+  showMessage("Document updated successfully!", "success");
+}
+
 function selectFileType(type: string) {
   selectedFileType.value = type;
   filterMenu.value = false;
@@ -1203,6 +1391,19 @@ function selectFileType(type: string) {
   color: var(--text);
 }
 
+/* The tab strip sits on the table card, so it takes the card's rule rather
+   than Vuetify's default underline, and the cell type rather than the button
+   scale - the same treatment the toolbar above it already gets. */
+.doc-tabs {
+  border-bottom: 1px solid var(--border);
+}
+
+.doc-tabs :deep(.v-tab) {
+  font-size: var(--fs-cell);
+  letter-spacing: normal;
+  min-width: 0;
+}
+
 .table-download-btn {
   min-width: 106px;
   height: 30px;

package/components/Facility/BookingSetup.vue

@@ -482,6 +482,55 @@
         </draggable>
       </section>
 
+      <!-- RESIDENT CHECKLISTS -->
+      <v-col cols="12" class="mt-4 border-t">
+        <v-row align="center" no-gutters class="pt-5">
+          <v-col cols="9" class="d-flex align-center text-body-2">
+            <v-row no-gutters>
+              <v-col cols="12" class="header-style">
+                Resident Checklists
+              </v-col>
+              <v-col cols="12" class="text-body-2 text-medium-emphasis">
+                Allow residents to view and complete assigned checklists. Each
+                checklist requires a photo upload before submission.
+              </v-col>
+            </v-row>
+          </v-col>
+          <v-col cols="3" class="d-flex align-center justify-end">
+            <v-switch
+              v-model="facility.isResidentChecklistEnabled"
+              class="d-flex align-center"
+              color="accent"
+              hide-details
+              @update:model-value="onToggleResidentChecklist"
+            />
+          </v-col>
+        </v-row>
+
+        <!-- SECURITY CHECKLISTS -->
+        <v-row align="center" no-gutters class="border-t pt-5 mt-5">
+          <v-col cols="9" class="d-flex align-center text-body-2">
+            <v-row no-gutters>
+              <v-col cols="12" class="header-style">
+                Security Checklists
+              </v-col>
+              <v-col cols="12" class="text-body-2 text-medium-emphasis">
+                Allow Security to view and complete assigned checklists
+              </v-col>
+            </v-row>
+          </v-col>
+          <v-col cols="3" class="d-flex align-center justify-end">
+            <v-switch
+              v-model="facility.isSecurityChecklistEnabled"
+              class="d-flex align-center"
+              color="accent"
+              hide-details
+              @update:model-value="onToggleSecurityChecklist"
+            />
+          </v-col>
+        </v-row>
+      </v-col>
+
       <v-col cols="12" class="mt-10">
         <p class="header-style font-weight-bold mb-5 mt-md-0 ml-md-4">
           Other Settings
@@ -1020,6 +1069,20 @@ watchEffect(() => {
   }
 });
 
+/**
+ * One checklist, one owner, and always one. A facility is completed either by
+ * its residents or by Security, so the two switches are each other's inverse:
+ * turning either off turns the other on. There is no state where a facility
+ * has no checklist owner.
+ */
+function onToggleResidentChecklist(enabled: boolean | null) {
+  facility.value.isSecurityChecklistEnabled = !enabled;
+}
+
+function onToggleSecurityChecklist(enabled: boolean | null) {
+  facility.value.isResidentChecklistEnabled = !enabled;
+}
+
 function onToggleBookingUnitLimit(val: any) {
   if (val) {
     isBookingUnitLimitEnabled.value = true;

package/components/HidAccessLogDashboard.vue

@@ -376,6 +376,7 @@ const visitorRecords = ref<Record<string, HidAccessRecord>>({});
 const logs = ref<HidAccessRecord[]>([]);
 const liveAccessLogs = ref<HidAccessRecord[]>([]);
 const administratorUserIds = ref<Set<number>>(new Set());
+const { selectHidReader, resolveForSite } = useHidReaderSelection();
 const selectedReaderId = ref("");
 const activeTab = ref<AccessTab>("all");
 const search = ref("");
@@ -401,7 +402,10 @@ const exportForm = reactive({
 });
 
 const statusOptions = ["Authorized", "Not Authorized", "Unknown"];
-const accessMethodFilterOptions = ["Facial", "QR Code", "ID and Password", "PIN", "Card"];
+const accessMethodFilterOptions = ["Facial", "QR Code", "ID and Password", "PIN", "Card", "Intercom"];
+
+/** The persisted event the resident app records when it opens a door on a call. */
+const INTERCOM_DOOR_OPEN_EVENT = "intercom_door_open";
 const accessMethodOptions = ["All", ...accessMethodFilterOptions];
 
 const readerOptions = computed(() =>
@@ -589,9 +593,11 @@ async function loadReaders() {
   if (!props.site) return;
   const response = await getReaders({ site: props.site, page: 1, limit: 100 });
   readers.value = response?.items ?? response?.data?.items ?? response?.data?.readers ?? [];
-  if (!selectedReaderId.value && readers.value.length) {
-    selectedReaderId.value = readers.value[0]._id;
-  }
+  /* Shared with every other HID screen — see `useHidReaderSelection`. The
+     resolver refuses a remembered reader that is not this site's, so a site
+     switch or a deleted reader falls back to the first rather than querying
+     an id the site does not own. */
+  selectedReaderId.value = resolveForSite(props.site, readers.value);
 }
 
 async function loadDashboard() {
@@ -606,7 +612,7 @@ async function loadDashboard() {
   resetDashboardData();
   try {
     const isVisitorTab = activeTab.value === "visitor";
-    const [logResponse, hidAccessLogResponse, visitorResponse, readerUserResponse] = await Promise.all([
+    const [logResponse, intercomLogResponse, hidAccessLogResponse, visitorResponse, readerUserResponse] = await Promise.all([
       loadDashboardSource(
         getLogs(selectedReaderId.value, {
           page: page.value,
@@ -615,6 +621,20 @@ async function loadDashboard() {
         null,
         "persisted access logs",
       ),
+      // Door opens from the resident app during an intercom call. The reader
+      // never logs a DTMF door open, so these exist only as persisted events
+      // and are fetched by type: the general page above is shared with every
+      // other event the reader emits and is dropped whenever the reader has
+      // live logs, which it always has.
+      loadDashboardSource(
+        getLogs(selectedReaderId.value, {
+          page: page.value,
+          limit,
+          type: INTERCOM_DOOR_OPEN_EVENT,
+        }),
+        null,
+        "intercom door-open logs",
+      ),
       loadDashboardSource(
         getReaderAccessLogs(selectedReaderId.value, {
           page: page.value,
@@ -681,9 +701,14 @@ async function loadDashboard() {
     // identity metadata here: it can contain a stale photo from another user.
     allIdentities.value = readerUsers;
     identities.value = readerUsers;
-    logs.value = liveItems.length
-      ? []
-      : logResponse?.items ?? logResponse?.data?.items ?? logResponse?.data?.logs ?? [];
+    const intercomItems = intercomLogResponse?.items ?? intercomLogResponse?.data?.items ?? intercomLogResponse?.data?.logs ?? [];
+    logs.value = [
+      ...(liveItems.length
+        ? []
+        : logResponse?.items ?? logResponse?.data?.items ?? logResponse?.data?.logs ?? []),
+      // Always kept: the reader has no live counterpart for these.
+      ...intercomItems,
+    ];
     liveAccessLogs.value = liveItems;
     serverPages.value = Number(hidAccessLogResponse?.pages ?? hidAccessLogResponse?.data?.pages ?? 1);
     serverPageRange.value = String(
@@ -819,6 +844,8 @@ function getAccessMethod(identity: HidAccessRecord, log?: HidAccessRecord) {
     id_password: "ID and Password",
     pin: "PIN",
     card: "Card",
+    // Set by the API on intercom_door_open events; no reader field implies it.
+    intercom: "Intercom",
   };
   const normalizedMethod = String(payload.normalizedMethod || "");
   if (normalizedMethodLabels[normalizedMethod]) return normalizedMethodLabels[normalizedMethod];
@@ -833,11 +860,36 @@ function getAccessMethod(identity: HidAccessRecord, log?: HidAccessRecord) {
   return identity.metadata?.facialData || identity.metadata?.imageTimestamp ? "Facial" : "N/A";
 }
 
+/**
+ * One shape for the whole Access Date and Time column: `15:18:43 23/9/2026`.
+ *
+ * Reader rows arrive as a number and went through `formatHidEpochDate`; an
+ * intercom door open never touches the reader, so the API writes it as an ISO
+ * string and this branch took `toLocaleString` instead - which put
+ * "9/23/2026, 2:15:29 PM" in the same column, one row below "15:18:43
+ * 23/9/2026". Both branches now build the same string.
+ *
+ * Local parts here, UTC parts there, on purpose: the reader encodes its own
+ * wall clock as if it were UTC, while an ISO string is a real instant. Reading
+ * each the way it was written is what makes both columns show the time that was
+ * on the clock at the door.
+ */
 function formatDate(value?: string | number) {
   if (!value) return "N/A";
   if (typeof value === "number") return formatHidEpochDate(value);
-  const date = typeof value === "number" ? new Date(value * 1000) : new Date(value);
-  return Number.isNaN(date.getTime()) ? "N/A" : date.toLocaleString();
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return "N/A";
+  return formatClock(
+    [date.getHours(), date.getMinutes(), date.getSeconds()],
+    date.getDate(),
+    date.getMonth() + 1,
+    date.getFullYear(),
+  );
+}
+
+function formatClock(time: number[], day: number, month: number, year: number) {
+  const clock = time.map((part) => String(part).padStart(2, "0")).join(":");
+  return `${clock} ${day}/${month}/${year}`;
 }
 
 function parseDate(value?: string | number) {
@@ -867,13 +919,12 @@ function formatHidEpochDate(value: number) {
   const date = new Date(value * 1000);
   if (Number.isNaN(date.getTime())) return "N/A";
 
-  const time = [
-    date.getUTCHours(),
-    date.getUTCMinutes(),
-    date.getUTCSeconds(),
-  ].map((part) => String(part).padStart(2, "0")).join(":");
-
-  return `${time} ${date.getUTCDate()}/${date.getUTCMonth() + 1}/${date.getUTCFullYear()}`;
+  return formatClock(
+    [date.getUTCHours(), date.getUTCMinutes(), date.getUTCSeconds()],
+    date.getUTCDate(),
+    date.getUTCMonth() + 1,
+    date.getUTCFullYear(),
+  );
 }
 
 function openHistoryDialog(row: AccessRow) {
@@ -1548,6 +1599,12 @@ function escapeHtml(value: unknown) {
     .replace(/"/g, "&quot;")
     .replace(/'/g, "&#039;");
 }
+
+/* Publish every change, including the seed above: a screen that had to fall
+   back to the first reader should leave the others agreeing with it. */
+watch(selectedReaderId, (value) => {
+  if (value) selectHidReader(props.site, value);
+});
 </script>
 
 <style scoped>