@7365admin1/layer-common 4.2.8 → 4.2.9-staging.277

package/components/VisitorManagement.vue

@@ -632,116 +632,187 @@
         edit-button-label="Edit Visitor"
       >
         <template v-slot:content>
-          <v-row no-gutters class="mb-4">
-            <v-col v-for="(label, key) in formattedFields" :key="key" cols="12">
-              <span
+          <!--
+            THE PREVIEW'S FIELD LIST.
+
+            Was `<strong>Label:</strong> value` inside a gapless `v-row` - a
+            bold browser-default label beside an unstyled value, neither of
+            them on the type scale, and every row flush against the next.
+
+            The label stays to the LEFT of its value, which is the shape this
+            dialog has always had and the one the owner picked on 2026-09-03
+            over the stacked `AccessCardDetailsDialog` treatment. What changes
+            is that the pair is now on the type scale, in a fixed label column
+            so every value starts on the same edge, with the card's own
+            `--border` hairline separating one row from the next. The type
+            tokens are `AccessCardDetailsDialog`'s; only the arrangement is
+            this dialog's own.
+          -->
+          <div class="visitor-preview">
+            <!--
+              The status the Guests tab decides on. It was not shown here at
+              all, which is why a disabled Check In button had nothing on the
+              card explaining itself. Gated on the same `activeTab === 'guests'
+              && item?.status` the row's own status column uses, so every other
+              tab's preview keeps exactly the fields it had.
+            -->
+            <div
+              v-if="activeTab === 'guests' && selectedVisitorStatus"
+              class="visitor-preview__row visitor-preview__row--tall"
+            >
+              <div class="visitor-preview__label">Status</div>
+              <div>
+                <StatusChip
+                  class="text-capitalize"
+                  :status="selectedVisitorStatus"
+                  :label="getVisitorStatusLabel(selectedVisitorStatus)"
+                />
+              </div>
+            </div>
+
+            <!--
+              `<template>` and not a wrapping `<div>`: every row draws its own
+              hairline, so a wrapper that renders empty - which is every field
+              this visitor type carries no value for - would put a rule across
+              nothing. Only the branch that matches becomes a row, which is
+              also what makes `:last-child` land on the real last row.
+            -->
+            <template v-for="(label, key) in formattedFields" :key="key">
+              <div
                 v-if="
                   key === 'checkIn' &&
                   !selectedVisitorObject[key] &&
                   canUpdateVisitor
                 "
-                class="d-flex align-center"
+                class="visitor-preview__row visitor-preview__row--tall"
               >
-                <strong>{{ label }}:</strong>
-                <!-- The design's check-in / check-out pair. Was Vuetify's
-                     `color="success"` beside a hardcoded `color="red"` - two
-                     different systems on one field list, and neither of them a
-                     token. `:loading` is dropped rather than re-invented: the
-                     same flag already drives `:disabled`, which is the
-                     precedent set when the scanned-visitor form converted. -->
-                <AppButton
-                  variant="ok"
-                  icon="mdi-check"
-                  class="ml-3"
-                  :disabled="isVisitorDataFromScannedQRCodeCheckingInOut"
-                  @click="handleCheckin(selectedVisitorDataObject)"
-                >
-                  Check In
-                </AppButton>
-              </span>
-              <span
-                v-if="
+                <div class="visitor-preview__label">{{ label }}</div>
+                <div>
+                  <!-- The design's check-in / check-out pair. Was Vuetify's
+                       `color="success"` beside a hardcoded `color="red"` - two
+                       different systems on one field list, and neither of them
+                       a token. `:loading` is dropped rather than re-invented:
+                       the same flag already drives `:disabled`, which is the
+                       precedent set when the scanned-visitor form converted. -->
+                  <!-- A guest whose registration is still awaiting a decision
+                       must not be checked in from here. The Guests row already
+                       withholds its own Checkin button while `status` is
+                       "pending" (DV-0080); this preview is the same action on
+                       the same record, so it is gated too - disabled rather
+                       than hidden, so the Check In field itself still reads.
+                       The Status row above is what says why. -->
+                  <AppButton
+                    variant="ok"
+                    icon="mdi-check"
+                    :disabled="
+                      isVisitorDataFromScannedQRCodeCheckingInOut ||
+                      isSelectedVisitorPendingApproval
+                    "
+                    @click="handleCheckin(selectedVisitorDataObject)"
+                  >
+                    Check In
+                  </AppButton>
+                </div>
+              </div>
+
+              <div
+                v-else-if="
                   key === 'checkOut' &&
                   selectedVisitorObject['checkIn'] &&
                   !selectedVisitorObject[key] &&
                   canCheckoutVisitor
                 "
-                class="d-flex align-center"
+                class="visitor-preview__row visitor-preview__row--tall"
               >
-                <strong>{{ label }}:</strong>
-                <AppButton
-                  variant="err"
-                  icon="mdi-close"
-                  class="ml-3"
-                  :disabled="loading.checkingOut"
-                  @click="handleCheckout(selectedVisitorId as string)"
-                >
-                  Check Out
-                </AppButton>
-              </span>
+                <div class="visitor-preview__label">{{ label }}</div>
+                <div>
+                  <AppButton
+                    variant="err"
+                    icon="mdi-close"
+                    :disabled="loading.checkingOut"
+                    @click="handleCheckout(selectedVisitorId as string)"
+                  >
+                    Check Out
+                  </AppButton>
+                </div>
+              </div>
 
-              <span
+              <div
                 v-else-if="key === 'nric' && selectedVisitorObject['nric']"
-                class="d-flex align-center"
+                class="visitor-preview__row"
               >
-                <strong>{{ label }}:</strong>
-                <span v-tooltip:top="selectedVisitorObject[key]" class="ml-2">{{
-                  maskNRIC(selectedVisitorObject[key])
-                }}</span>
-              </span>
-              <span
+                <div class="visitor-preview__label">{{ label }}</div>
+                <div
+                  v-tooltip:top="selectedVisitorObject[key]"
+                  class="visitor-preview__value"
+                >
+                  {{ maskNRIC(selectedVisitorObject[key]) }}
+                </div>
+              </div>
+
+              <div
                 v-else-if="
                   key === 'attachments' &&
                   selectedVisitorObject?.[key]?.length > 0
                 "
-                class="d-flex flex-column"
+                class="visitor-preview__row visitor-preview__row--tall"
               >
-                <strong class="w-full">{{ label }}:</strong>
+                <div class="visitor-preview__label">{{ label }}</div>
                 <div class="d-flex flex-wrap ga-2">
                   <AttachmentsViewer
-                    :files="
-                      mappedAttachments(selectedVisitorObject.attachments)
-                    "
+                    :files="mappedAttachments(selectedVisitorObject.attachments)"
                     title=""
                     show-file-type-title
                   />
                 </div>
-              </span>
-              <span
+              </div>
+
+              <!--
+                Two fixes the redesign is not allowed to leave behind. The
+                branch had no value check, so "Entry Image" and "Exit Image"
+                both printed as bare labels over an AttachmentsViewer holding
+                `[undefined]` on every visitor without snapshots - which is
+                every visitor the ANPR cameras never saw. And BOTH keys read
+                `snapshotEntryImage`, so a visitor with both snapshots was
+                shown the entry photo twice, the second time labelled "Exit
+                Image".
+              -->
+              <div
                 v-else-if="
-                  key === 'snapshotEntryImage' || key === 'snapshotExitImage'
+                  (key === 'snapshotEntryImage' ||
+                    key === 'snapshotExitImage') &&
+                  selectedVisitorObject[key]
                 "
-                class="d-flex flex-column"
+                class="visitor-preview__row visitor-preview__row--tall"
               >
-                <strong class="w-full">{{ label }}:</strong>
+                <div class="visitor-preview__label">{{ label }}</div>
                 <div class="d-flex flex-wrap ga-2">
                   <AttachmentsViewer
-                    :files="
-                      mappedSnapshots([
-                        selectedVisitorObject.snapshotEntryImage,
-                      ])
-                    "
+                    :files="mappedSnapshots([selectedVisitorObject[key]])"
                     anpr
                     :site="siteId"
                     title="Snapshot"
                   />
                 </div>
-              </span>
+              </div>
 
-              <span
+              <div
                 v-else-if="selectedVisitorObject[key]"
-                class="d-flex ga-3 align-start"
-                ><strong>{{ label }}:</strong>
-                {{ formatValues(key, selectedVisitorObject[key]) }}
-                <TooltipInfo
-                  v-if="key === 'checkOut'"
-                  text="Manual Checkout"
-                  density="compact"
-                  size="x-small"
-                />
-              </span>
-            </v-col>
-          </v-row>
+                class="visitor-preview__row"
+              >
+                <div class="visitor-preview__label">{{ label }}</div>
+                <div class="visitor-preview__value d-flex align-center ga-2">
+                  {{ formatValues(key, selectedVisitorObject[key]) }}
+                  <TooltipInfo
+                    v-if="key === 'checkOut'"
+                    text="Manual Checkout"
+                    density="compact"
+                    size="x-small"
+                  />
+                </div>
+              </div>
+            </template>
+          </div>
         </template>
       </VehicleUpdateMoreAction>
     </v-dialog>
@@ -1816,6 +1887,17 @@ const selectedVisitorDataObject = computed(() => {
   return items.value.find((x: any) => x?._id === selectedVisitorId.value) || {};
 });
 
+const selectedVisitorStatus = computed(
+  () => (selectedVisitorDataObject.value?.status as string) ?? ""
+);
+
+/** Self-service guests land in the list as "pending" until someone approves
+    or rejects them - check-in is not a decision that should be available while
+    that is still open. */
+const isSelectedVisitorPendingApproval = computed(
+  () => selectedVisitorStatus.value === "pending"
+);
+
 const formatType = (item: any) =>
   (item.deliveryType ? item.deliveryType + "-" : "") + item.type;
 
@@ -2739,6 +2821,62 @@ watchEffect(async () => {
 </script>
 
 <style scoped>
+/*
+ * THE PREVIEW DIALOG'S FIELD LIST - LABEL BESIDE VALUE.
+ *
+ * The type comes from `AccessCardDetailsDialog` unchanged - the label on
+ * `--fs-breadcrumb`/`--text2`, the value on `--fs-cell`/`--fw-cell`/`--text` -
+ * so a field reads the same weight here as it does on an access card. The
+ * arrangement is this dialog's: a FIXED 116px label column, so every value in
+ * the card starts on one edge instead of wherever its own label happened to
+ * end, which is what the old `d-flex ga-3` gave.
+ *
+ * `minmax(0, 1fr)` on the value track and not `1fr`: a grid track's default
+ * `min-width: auto` refuses to shrink below its content, so a long company
+ * name or a `Block / Level / Unit` string would push the card wider than the
+ * 450px the dialog is opened at rather than wrap inside it.
+ *
+ * The hairline is the card's own `--border`, on the row and not between rows,
+ * so it tracks the theme with everything else on the card. The last row drops
+ * it - a rule directly above the footer's own edge reads as a double line.
+ */
+.visitor-preview {
+  display: flex;
+  flex-direction: column;
+  padding-bottom: 8px;
+}
+
+.visitor-preview__row {
+  display: grid;
+  grid-template-columns: 116px minmax(0, 1fr);
+  gap: 16px;
+  align-items: baseline;
+  padding: 9px 0;
+  border-bottom: 1px solid var(--border);
+}
+
+.visitor-preview__row:last-child {
+  border-bottom: none;
+}
+
+/* A chip, a 40px button and an attachment tile have no text baseline worth
+   aligning a label to; those rows centre instead. */
+.visitor-preview__row--tall {
+  align-items: center;
+}
+
+.visitor-preview__label {
+  font-size: var(--fs-breadcrumb);
+  color: var(--text2);
+}
+
+.visitor-preview__value {
+  font-size: var(--fs-cell);
+  font-weight: var(--fw-cell);
+  color: var(--text);
+  word-break: break-word;
+}
+
 /* The width the type filter carried as `max-width="200"` on the v-select. */
 .visitor-type-filter {
   max-width: 200px;

package/package.json

@@ -2,7 +2,7 @@
   "name": "@7365admin1/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "4.2.8",
+  "version": "4.2.9-staging.277",
   "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.",